Skip to content

Commit

Permalink
feat(UI wrapper): disabling UI (#107)
Browse files Browse the repository at this point in the history
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
}
  • Loading branch information
Dan Ziv authored Apr 16, 2018
1 parent 185ffce commit 5784a75
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 54 deletions.
60 changes: 60 additions & 0 deletions src/common/ui-wrapper.js
Original file line number Diff line number Diff line change
@@ -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};
28 changes: 0 additions & 28 deletions src/common/utils/ui-actions.js

This file was deleted.

23 changes: 9 additions & 14 deletions src/kaltura-player.js
Original file line number Diff line number Diff line change
@@ -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),
Expand All @@ -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);
}
}
}
Expand All @@ -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 => {
Expand All @@ -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);
Expand Down
11 changes: 5 additions & 6 deletions src/ott/poster-and-thumbs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}

Expand Down Expand Up @@ -82,4 +81,4 @@ function selectPosterByPlayerDimensions(posters: Array<Object>, playerWidth: num
return url;
}

export {addKalturaPoster, setUISeekbarConfig};
export {addKalturaPoster, getPreviewThumbnailConfig};
12 changes: 6 additions & 6 deletions src/ovp/poster-and-thumbs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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};

0 comments on commit 5784a75

Please sign in to comment.