diff --git a/src/common/ui-wrapper.js b/src/common/ui-wrapper.js new file mode 100644 index 000000000..c3aca466b --- /dev/null +++ b/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}; diff --git a/src/common/utils/ui-actions.js b/src/common/utils/ui-actions.js deleted file mode 100644 index a812307f9..000000000 --- a/src/common/utils/ui-actions.js +++ /dev/null @@ -1,28 +0,0 @@ -// @flow -import {UIManager} from 'playkit-js-ui' - -/** - * Sets the media info on error component to the "retry" functionality. - * @param {UIManager} uiManager - The ui manager. - * @param {ProviderMediaInfoObject} mediaInfo - The media info. - * @returns {void} - */ -function setUIErrorOverlayConfig(uiManager: UIManager, mediaInfo: ProviderMediaInfoObject): void { - uiManager.setConfig({ - mediaInfo: mediaInfo - }, 'error'); -} - -/** - * Sets the loading spinner state. - * @param {UIManager} uiManager - The ui manager. - * @param {boolean} show - The spinner state. - * @returns {void} - */ -function setUILoadingSpinnerState(uiManager: UIManager, show: boolean): void { - uiManager.setConfig({ - show: show - }, 'loading'); -} - -export {setUIErrorOverlayConfig, setUILoadingSpinnerState}; diff --git a/src/kaltura-player.js b/src/kaltura-player.js index 84829d6c1..60e2a58f7 100644 --- a/src/kaltura-player.js +++ b/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); diff --git a/src/ott/poster-and-thumbs.js b/src/ott/poster-and-thumbs.js index f50b4522b..e1d1322dc 100644 --- a/src/ott/poster-and-thumbs.js +++ b/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, playerWidth: num return url; } -export {addKalturaPoster, setUISeekbarConfig}; +export {addKalturaPoster, getPreviewThumbnailConfig}; diff --git a/src/ovp/poster-and-thumbs.js b/src/ovp/poster-and-thumbs.js index d9fdbaef8..cdf8c2caf 100644 --- a/src/ovp/poster-and-thumbs.js +++ b/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};