feat(UI wrapper): disabling UI (#107)

Created a UI wrapper using the proxy pattern, which all the UI actions will pass through it.
UI can be disable using the following configuration:

ui: {
  disable: true
}

src/common/ui-wrapper.js

@@ -0,0 +1,60 @@
+// @flow
+import {UIManager} from 'playkit-js-ui'
+import {getPreviewThumbnailConfig} from 'poster-and-thumbs'
+
+class UIWrapper {
+  _uiManager: UIManager;
+  _disabled: boolean = false;
+
+  constructor(player: Player, config: UIOptionsObject) {
+    if (config.disable) {
+      this._disabled = true;
+      appendPlayerViewToTargetContainer(config.targetId, player.getView());
+    } else {
+      this._uiManager = new UIManager(player, config);
+      if (config.customPreset) {
+        this._uiManager.buildCustomUI(config.customPreset)
+      } else {
+        this._uiManager.buildDefaultUI();
+      }
+    }
+  }
+
+  setConfig(config: Object, componentAlias?: string): void {
+    if (this._disabled) return;
+    this._uiManager.setConfig(config, componentAlias);
+  }
+
+  setErrorPresetConfig(mediaInfo: ProviderMediaInfoObject): void {
+    if (this._disabled) return;
+    this._uiManager.setConfig({mediaInfo: mediaInfo}, 'error');
+  }
+
+  setSeekbarConfig(mediaConfig: Object): void {
+    if (this._disabled) return;
+    const seekbarConfig = getPreviewThumbnailConfig(this._uiManager, mediaConfig);
+    if (seekbarConfig) {
+      this._uiManager.setConfig(seekbarConfig, 'seekbar');
+    }
+  }
+
+  setLoadingSpinnerState(show: boolean): void {
+    if (this._disabled) return;
+    this._uiManager.setConfig({show: show}, 'loading');
+  }
+}
+
+/**
+ * Appends the player view to the target element in the dom.
+ * @param {string} targetId - The target id.
+ * @param {HTMLDivElement} view - The player div element.
+ * @returns {void}
+ */
+function appendPlayerViewToTargetContainer(targetId: string, view: HTMLDivElement): void {
+  const targetContainer = document.getElementById(targetId);
+  if (targetContainer) {
+    targetContainer.appendChild(view);
+  }
+}
+
+export {UIWrapper};

src/kaltura-player.js

@@ -1,32 +1,27 @@
 // @flow
 import {Error, EventType as CoreEventType, FakeEvent, loadPlayer, Utils} from 'playkit-js'
-import {EventType as UIEventType, UIManager} from 'playkit-js-ui'
+import {EventType as UIEventType} from 'playkit-js-ui'
 import {Provider} from 'playkit-js-providers'
 import getLogger from './common/utils/logger'
 import {addKalturaParams} from './common/utils/kaltura-params'
-import {setUIErrorOverlayConfig, setUILoadingSpinnerState} from './common/utils/ui-actions'
 import {evaluatePluginsConfig} from './common/plugins/plugins-config'
-import {addKalturaPoster, setUISeekbarConfig} from 'poster-and-thumbs'
+import {addKalturaPoster} from 'poster-and-thumbs'
 import './assets/style.css'
+import {UIWrapper} from './common/ui-wrapper'
 
 export default class KalturaPlayer {
   _player: Player;
   _playerConfigure: Function;
   _provider: Provider;
-  _uiManager: UIManager;
+  _uiWrapper: UIWrapper;
   _logger: any;
 
   constructor(options: KalturaPlayerOptionsObject) {
     this._player = loadPlayer(options.player);
     this._playerConfigure = this._player.configure.bind(this._player);
     this._logger = getLogger('KalturaPlayer' + Utils.Generator.uniqueId(5));
+    this._uiWrapper = new UIWrapper(this._player, options.ui);
     this._provider = new Provider(options.provider, __VERSION__);
-    this._uiManager = new UIManager(this._player, options.ui);
-    if (options.ui.customPreset) {
-      this._uiManager.buildCustomUI(options.ui.customPreset)
-    } else {
-      this._uiManager.buildDefaultUI();
-    }
     Object.assign(this._player, {
       loadMedia: mediaInfo => this.loadMedia(mediaInfo),
       configure: config => this.configure(config),
@@ -44,7 +39,7 @@ export default class KalturaPlayer {
         this._playerConfigure(config.player);
       }
       if (config.ui) {
-        this._uiManager.setConfig(config.ui);
+        this._uiWrapper.setConfig(config.ui);
       }
     }
   }
@@ -53,8 +48,8 @@ export default class KalturaPlayer {
     this._logger.debug('loadMedia', mediaInfo);
     this._player.reset();
     this._player.loadingMedia = true;
-    setUILoadingSpinnerState(this._uiManager, true);
-    setUIErrorOverlayConfig(this._uiManager, mediaInfo);
+    this._uiWrapper.setErrorPresetConfig(mediaInfo);
+    this._uiWrapper.setLoadingSpinnerState(true);
     return this._provider.getMediaConfig(mediaInfo)
       .then(mediaConfig => this.setMedia(mediaConfig))
       .catch(e => {
@@ -65,7 +60,7 @@ export default class KalturaPlayer {
   setMedia(mediaConfig: ProviderMediaConfigObject): void {
     this._logger.debug('setMedia', mediaConfig);
     const dimensions = this._player.dimensions;
-    setUISeekbarConfig(this._uiManager, mediaConfig);
+    this._uiWrapper.setSeekbarConfig(mediaConfig);
     Utils.Object.mergeDeep(mediaConfig.metadata, this._player.config.metadata);
     addKalturaPoster(mediaConfig.metadata, dimensions.width, dimensions.height);
     addKalturaParams(mediaConfig.sources, this._player);

src/ott/poster-and-thumbs.js

@@ -24,18 +24,17 @@ function addKalturaPoster(metadata: Object, width: number, height: number): void
 }
 
 /**
- * Sets the preview thumbnail config for the ui seekbar component.
+ * Gets the preview thumbnail config for the ui seekbar component.
  * @param {UIManager} uiManager - The ui manager.
- * @returns {void}
+ * @returns {?Object} - The preview thumbnail config.
  */
-function setUISeekbarConfig(uiManager: UIManager): void {
+function getPreviewThumbnailConfig(uiManager: UIManager): ?Object {
   let seekbarConfig = Utils.Object.getPropertyPath(uiManager, 'config.components.seekbar');
   if (seekbarConfig) {
-    seekbarConfig = Utils.Object.mergeDeep({
+    return Utils.Object.mergeDeep({
       thumbsWidth: DEFAULT_THUMBS_WIDTH,
       thumbsSlices: DEFAULT_THUMBS_SLICES
     }, seekbarConfig);
-    uiManager.setConfig(seekbarConfig, "seekbar");
   }
 }
 
@@ -82,4 +81,4 @@ function selectPosterByPlayerDimensions(posters: Array<Object>, playerWidth: num
   return url;
 }
 
-export {addKalturaPoster, setUISeekbarConfig};
+export {addKalturaPoster, getPreviewThumbnailConfig};

src/ovp/poster-and-thumbs.js

@@ -16,17 +16,17 @@ function addKalturaPoster(metadata: Object, playerWidth: number, playerHeight: n
 }
 
 /**
- * Sets the preview thumbnail config for the ui seekbar component.
+ * Gets the preview thumbnail config for the ui seekbar component.
  * @param {UIManager} uiManager - The ui manager.
  * @param {Object} mediaConfig - The provider media config.
- * @returns {void}
+ * @returns {Object} - The preview thumbnail config.
  */
-function setUISeekbarConfig(uiManager: UIManager, mediaConfig: Object): void {
-  uiManager.setConfig({
+function getPreviewThumbnailConfig(uiManager: UIManager, mediaConfig: Object): Object {
+  return {
     thumbsSprite: getThumbSlicesUrl(mediaConfig),
     thumbsWidth: DEFAULT_THUMBS_WIDTH,
     thumbsSlices: DEFAULT_THUMBS_SLICES
-  }, "seekbar");
+  };
 }
 
-export {addKalturaPoster, setUISeekbarConfig};
+export {addKalturaPoster, getPreviewThumbnailConfig};