feat(FEC-7954): poster and thumbnail preview missing on tv player (#97)

Split poster and thumbs handling to separate ott & ovp files.
Handle ott poster logic.

.flowconfig

@@ -20,3 +20,5 @@ module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-
 module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-ott-provider'
 module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ovp/player-defaults'
 module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ott/player-defaults'
+module.name_mapper='poster-and-thumbs' -> '<PROJECT_ROOT>/src/ovp/poster-and-thumbs'
+module.name_mapper='poster-and-thumbs' -> '<PROJECT_ROOT>/src/ott/poster-and-thumbs'

src/common/utils/setup-helpers.js

@@ -5,9 +5,8 @@ import {UIManager} from 'playkit-js-ui'
 import {ValidationErrorType} from './validation-error'
 import StorageManager from '../storage/storage-manager'
 import {setLogLevel as _setLogLevel, LogLevel} from './logger'
-import type {LogLevelObject} from './logger'
-import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH, getThumbSlicesUrl} from './thumbs'
 import {configureExternalStreamRedirect} from './external-stream-redirect-helper'
+import type {LogLevelObject} from './logger'
 
 const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
 const KALTURA_PLAYER_DEBUG_QS: string = 'debugKalturaPlayer';
@@ -67,19 +66,6 @@ function createKalturaPlayerContainer(targetId: string): string {
   return el.id;
 }
 
-/**
- * Add poster with player dimensions to thumbnail API call
- * @param {Object} metadata - metadata container
- * @param {number} width - player width in px
- * @param {number} height - player height in px
- * @returns {void}
- */
-function addKalturaPoster(metadata: Object, width: number, height: number): void {
-  if (metadata.poster) {
-    metadata.poster = `${metadata.poster}/height/${height}/width/${width}`;
-  }
-}
-
 /**
  * Sets the storage config on the player config if certain conditions are met.
  * @param {KalturaPlayerOptionsObject} options - kaltura player options
@@ -162,27 +148,13 @@ function getUrlParameter(name: string) {
   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }
 
-/**
- * Sets the preview thumbnail config for the ui seekbar component.
- * @param {Object} data - The provider data.
- * @param {UIManager} uiManager - The ui manager.
- * @returns {void}
- */
-function setUISeekbarConfig(data: Object, uiManager: UIManager): void {
-  uiManager.setConfig({
-    thumbsSprite: getThumbSlicesUrl(data),
-    thumbsWidth: DEFAULT_THUMBS_WIDTH,
-    thumbsSlices: DEFAULT_THUMBS_SLICES
-  }, "seekbar");
-}
-
 /**
  * Sets the media info on error component to the "retry" functionality.
- * @param {ProviderMediaInfoObject} mediaInfo - The media info.
  * @param {UIManager} uiManager - The ui manager.
+ * @param {ProviderMediaInfoObject} mediaInfo - The media info.
  * @returns {void}
  */
-function setUIErrorOverlayConfig(mediaInfo: ProviderMediaInfoObject, uiManager: UIManager): void {
+function setUIErrorOverlayConfig(uiManager: UIManager, mediaInfo: ProviderMediaInfoObject): void {
   uiManager.setConfig({
     mediaInfo: mediaInfo
   }, "error");
@@ -302,13 +274,11 @@ export {
   setStorageConfig,
   applyStorageSupport,
   setStorageTextStyle,
-  addKalturaPoster,
   validateConfig,
   setLogLevel,
   createKalturaPlayerContainer,
   checkNativeHlsSupport,
   getDefaultOptions,
-  setUISeekbarConfig,
   setUIErrorOverlayConfig,
   isSafari,
   isIos

src/kaltura-player.js

@@ -4,34 +4,54 @@ import {UIManager} from 'playkit-js-ui'
 import {Provider} from 'playkit-js-providers'
 import getLogger from './common/utils/logger'
 import {addKalturaParams} from './common/utils/kaltura-params'
-import {addKalturaPoster, setUISeekbarConfig, setUIErrorOverlayConfig} from './common/utils/setup-helpers'
+import {setUIErrorOverlayConfig} from './common/utils/setup-helpers'
 import {evaluatePluginsConfig} from './common/plugins/plugins-config'
+import {addKalturaPoster, setUISeekbarConfig} from 'poster-and-thumbs'
 import './assets/style.css'
 
 export default class KalturaPlayer {
   _player: Player;
+  _playerConfigure: Function;
   _provider: Provider;
   _uiManager: UIManager;
   _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._uiManager = new UIManager(this._player, options.ui);
     this._provider = new Provider(options.provider, __VERSION__);
     this._uiManager.buildDefaultUI();
-    Object.assign(this._player, {loadMedia: (mediaInfo) => this.loadMedia(mediaInfo)});
+    Object.assign(this._player, {
+      loadMedia: mediaInfo => this.loadMedia(mediaInfo),
+      configure: config => this.configure(config)
+    });
     return this._player;
   }
 
+  configure(config: Object): void {
+    if (!config.player && !config.ui) {
+      this._playerConfigure(config);
+    } else {
+      if (config.player) {
+        this._playerConfigure(config.player);
+      }
+      if (config.ui) {
+        this._uiManager.setConfig(config.ui);
+      }
+    }
+  }
+
   loadMedia(mediaInfo: ProviderMediaInfoObject): Promise<*> {
     this._logger.debug('loadMedia', mediaInfo);
     this._player.loadingMedia = true;
-    setUIErrorOverlayConfig(mediaInfo, this._uiManager);
+    setUIErrorOverlayConfig(this._uiManager, mediaInfo);
     return this._provider.getMediaConfig(mediaInfo)
       .then(mediaConfig => {
         const dimensions = this._player.dimensions;
-        setUISeekbarConfig(mediaConfig, this._uiManager);
+        setUISeekbarConfig(this._uiManager, mediaConfig);
+        Utils.Object.mergeDeep(mediaConfig.metadata, this._player.config.metadata);
         addKalturaPoster(mediaConfig.metadata, dimensions.width, dimensions.height);
         addKalturaParams(mediaConfig.sources, this._player);
         Utils.Object.mergeDeep(mediaConfig.plugins, this._player.config.plugins);

src/ott/poster-and-thumbs.js

@@ -0,0 +1,85 @@
+// @flow
+import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH} from '../common/utils/thumbs'
+import {Utils} from 'playkit-js'
+import {UIManager} from 'playkit-js-ui'
+
+/**
+ * Add poster with player dimensions.
+ * If poster is string and width and height exists in template we need to make a thumbnail API call.
+ * If poster is array of objects we need to choose the best fit dimensions according to the player dimensions.
+ * @param {Object} metadata - metadata container
+ * @param {number} width - player width in px
+ * @param {number} height - player height in px
+ * @returns {void}
+ */
+function addKalturaPoster(metadata: Object, width: number, height: number): void {
+  if (typeof metadata.poster === 'string') {
+    const regex = /.*\/thumbnail\/.*(?:width|height)\/\d+\/(?:height|width)\/\d+/;
+    if (regex.test(metadata.poster)) {
+      metadata.poster = setPlayerDimensionsOnPoster(metadata.poster, width, height);
+    }
+  } else if (Array.isArray(metadata.poster)) {
+    metadata.poster = selectPosterByPlayerDimensions(metadata.poster, width, height);
+  }
+}
+
+/**
+ * Sets the preview thumbnail config for the ui seekbar component.
+ * @param {UIManager} uiManager - The ui manager.
+ * @returns {void}
+ */
+function setUISeekbarConfig(uiManager: UIManager): void {
+  let seekbarConfig = Utils.Object.getPropertyPath(uiManager, 'config.components.seekbar');
+  if (seekbarConfig) {
+    seekbarConfig = Utils.Object.mergeDeep({
+      thumbsWidth: DEFAULT_THUMBS_WIDTH,
+      thumbsSlices: DEFAULT_THUMBS_SLICES
+    }, seekbarConfig);
+    uiManager.setConfig(seekbarConfig, "seekbar");
+  }
+}
+
+/**
+ * Replace the current dimensions with the player dimensions.
+ * @param {string} poster - Player url.
+ * @param {number} playerWidth - Player width.
+ * @param {height} playerHeight - Player height.
+ * @return {string} - The new poster url including the player dimensions.
+ */
+function setPlayerDimensionsOnPoster(poster: string, playerWidth: number, playerHeight: number): string {
+  const widthMatch = poster.match(/width\/(\d+)/);
+  const heightMatch = poster.match(/height\/(\d+)/);
+  if (Array.isArray(widthMatch)) {
+    poster = poster.replace(widthMatch[1], playerWidth.toString());
+  }
+  if (Array.isArray(heightMatch)) {
+    poster = poster.replace(heightMatch[1], playerHeight.toString());
+  }
+  return poster;
+}
+
+/**
+ * Selects the best fit poster depends on the player dimensions.
+ * @param {string} posters - Array of posters candidates.
+ * @param {number} playerWidth - Player width.
+ * @param {height} playerHeight - Player height.
+ * @return {string} - The poster url.
+ */
+function selectPosterByPlayerDimensions(posters: Array<Object>, playerWidth: number, playerHeight: number): string {
+  let min = Infinity;
+  let url = '';
+  posters.forEach(picture => {
+    const picWidth = picture.width;
+    const picHeight = picture.height;
+    const widthDelta = Math.abs(picWidth - playerWidth);
+    const heightDelta = Math.abs(picHeight - playerHeight);
+    const delta = widthDelta + heightDelta;
+    if (delta < min) {
+      min = delta;
+      url = picture.url;
+    }
+  });
+  return url;
+}
+
+export {addKalturaPoster, setUISeekbarConfig};

src/ovp/poster-and-thumbs.js

@@ -0,0 +1,32 @@
+// @flow
+import {DEFAULT_THUMBS_SLICES, DEFAULT_THUMBS_WIDTH, getThumbSlicesUrl} from '../common/utils/thumbs'
+import {UIManager} from 'playkit-js-ui'
+
+/**
+ * Add poster with player dimensions to thumbnail API call
+ * @param {Object} metadata - metadata container
+ * @param {number} playerWidth - player width in px
+ * @param {number} playerHeight - player height in px
+ * @returns {void}
+ */
+function addKalturaPoster(metadata: Object, playerWidth: number, playerHeight: number): void {
+  if (metadata.poster) {
+    metadata.poster = `${metadata.poster}/height/${playerHeight}/width/${playerWidth}`;
+  }
+}
+
+/**
+ * Sets the preview thumbnail config for the ui seekbar component.
+ * @param {UIManager} uiManager - The ui manager.
+ * @param {Object} mediaConfig - The provider media config.
+ * @returns {void}
+ */
+function setUISeekbarConfig(uiManager: UIManager, mediaConfig: Object): void {
+  uiManager.setConfig({
+    thumbsSprite: getThumbSlicesUrl(mediaConfig),
+    thumbsWidth: DEFAULT_THUMBS_WIDTH,
+    thumbsSlices: DEFAULT_THUMBS_SLICES
+  }, "seekbar");
+}
+
+export {addKalturaPoster, setUISeekbarConfig};

test/src/common/utils/setup-helpers.spec.js

@@ -4,7 +4,6 @@ import StorageManager from '../../../../src/common/storage/storage-manager'
 import {
   createKalturaPlayerContainer,
   validateConfig,
-  addKalturaPoster,
   checkNativeHlsSupport,
   isSafari,
   isIos,
@@ -73,14 +72,6 @@ describe('createKalturaPlayerContainer', function () {
   });
 });
 
-describe('addKalturaPoster', function () {
-  it('should append width and height to kaltura poster', function () {
-    let metadata = {poster: 'https//my/kaltura/poster'};
-    addKalturaPoster(metadata, 640, 360);
-    metadata.poster.should.equal('https//my/kaltura/poster/height/360/width/640');
-  });
-});
-
 describe('checkNativeHlsSupport', function () {
   it('set preferNative to true if user preference was set to true', function () {
     const playerConfig = {

test/src/ovp/poster-and-thumbs.spec.js

@@ -0,0 +1,9 @@
+import {addKalturaPoster} from '../../../src/ovp/poster-and-thumbs'
+
+describe('addKalturaPoster', function () {
+  it('should append width and height to kaltura poster', function () {
+    let metadata = {poster: 'https//my/kaltura/poster'};
+    addKalturaPoster(metadata, 640, 360);
+    metadata.poster.should.equal('https//my/kaltura/poster/height/360/width/640');
+  });
+});

webpack.config.ott.js

@@ -33,7 +33,8 @@ const entry = {
 const alias = {
   'playkit-js-providers': path.resolve('./node_modules/playkit-js-providers/dist/playkit-ott-provider'),
   'playkit-js-analytics': path.resolve('./node_modules/playkit-js-ott-analytics'),
-  'player-defaults': path.resolve('./src/ott/player-defaults')
+  'player-defaults': path.resolve('./src/ott/player-defaults'),
+  'poster-and-thumbs': path.resolve('./src/ott/poster-and-thumbs')
 };
 
 // TODO: Webpack merge?

webpack.config.ovp.js

@@ -33,7 +33,8 @@ const entry = {
 const alias = {
   'playkit-js-providers': path.resolve('./node_modules/playkit-js-providers/dist/playkit-ovp-provider'),
   'playkit-js-analytics': path.resolve('./node_modules/playkit-js-kanalytics'),
-  'player-defaults': path.resolve('./src/ovp/player-defaults')
+  'player-defaults': path.resolve('./src/ovp/player-defaults'),
+  'poster-and-thumbs': path.resolve('./src/ovp/poster-and-thumbs')
 };
 
 Object.assign(webpackConfig.resolve.alias, alias);