feat(FEC-10941): Use In-Stream DASH thumbnails on the timeline (#423)

flow-typed/types/thumbnail-config.js

@@ -0,0 +1,6 @@
+// @flow
+declare type KPThumbnailConfig = {
+  thumbsSprite: string,
+  thumbsWidth: number,
+  thumbsSlices: number
+};

src/common/thumbnail-manager.js

@@ -13,7 +13,7 @@ const THUMBNAIL_SERVICE_TEMPLATE: string = '{{thumbnailUrl}}/width/{{thumbsWidth
 
 class ThumbnailManager {
   _player: Player;
-  _thumbnailConfig: ?SeekbarConfig;
+  _thumbnailConfig: ?KPThumbnailConfig;
 
   constructor(player: Player, uiConfig: KPUIOptionsObject, mediaConfig: KPMediaConfig) {
     this._player = player;
@@ -27,7 +27,7 @@ class ThumbnailManager {
     return this._player.getThumbnail(time);
   }
 
-  getKalturaThumbnailConfig(): ?SeekbarConfig {
+  getKalturaThumbnailConfig(): ?KPThumbnailConfig {
     return this._thumbnailConfig;
   }
 
@@ -37,7 +37,8 @@ class ThumbnailManager {
 
   _convertKalturaThumbnailToThumbnailInfo = (time: number): ?ThumbnailInfo => {
     if (this._thumbnailConfig) {
-      const {thumbsSprite, thumbsWidth, thumbsHeight, thumbsSlices} = this._thumbnailConfig;
+      const {thumbsSprite, thumbsWidth, thumbsSlices} = this._thumbnailConfig;
+      const {thumbsHeight} = DefaultThumbnailConfig;
       const duration = this._player.duration / thumbsSlices;
       const thumbnailInfo = {
         x: Math.floor(time / duration) * thumbsWidth,
@@ -50,7 +51,7 @@ class ThumbnailManager {
     }
   };
 
-  _buildKalturaThumbnailConfig = (uiConfig: KPUIOptionsObject, mediaConfig: KPMediaConfig): ?SeekbarConfig => {
+  _buildKalturaThumbnailConfig = (uiConfig: KPUIOptionsObject, mediaConfig: KPMediaConfig): ?KPThumbnailConfig => {
     const seekbarConfig = Utils.Object.getPropertyPath(uiConfig, 'components.seekbar');
     const posterUrl = mediaConfig.sources && mediaConfig.sources.poster;
     const isVod = mediaConfig.sources && mediaConfig.sources.type === MediaType.VOD;

src/common/ui-wrapper.js

@@ -17,7 +17,10 @@ class UIWrapper {
     const config: KPUIOptionsObject = options.ui;
     if (config.disable) {
       this._disabled = true;
-      appendPlayerViewToTargetContainer(config.targetId, player.getView());
+      const targetContainer = document.getElementById(config.targetId);
+      if (targetContainer) {
+        targetContainer.appendChild(player.getView());
+      }
     } else {
       this._uiManager = new UIManager(player, config);
       if (config.customPreset) {
@@ -86,19 +89,14 @@ class UIWrapper {
     return this._uiManager.hasManager(name);
   }
 
-  _resetErrorState(): void {
-    this.setConfig({hasError: false}, 'engine');
-  }
-
-  setSeekbarConfig(uiConfig: KPUIOptionsObject, thumbnailConfig: ?SeekbarConfig): void {
-    const seekbarConfig = Utils.Object.getPropertyPath(uiConfig, 'components.seekbar');
-    this.setConfig(Utils.Object.mergeDeep({}, thumbnailConfig, seekbarConfig), 'seekbar');
-  }
-
   setLoadingSpinnerState(show: boolean): void {
     this.setConfig({show: show}, 'loading');
   }
 
+  _resetErrorState(): void {
+    this.setConfig({hasError: false}, 'engine');
+  }
+
   _handleExternalCSS(config: KPUIOptionsObject): void {
     if (config.css) {
       Utils.Dom.loadStyleSheetAsync(config.css).then(
@@ -126,18 +124,4 @@ class UIWrapper {
   }
 }
 
-/**
- * Appends the player view to the target element in the dom.
- * @private
- * @param {string} targetId - The target id.
- * @param {HTMLElement} view - The player div element.
- * @returns {void}
- */
-function appendPlayerViewToTargetContainer(targetId: string, view: HTMLElement): void {
-  const targetContainer = document.getElementById(targetId);
-  if (targetContainer) {
-    targetContainer.appendChild(view);
-  }
-}
-
 export {UIWrapper};

src/kaltura-player.js

@@ -166,7 +166,6 @@ class KalturaPlayer extends FakeEventTarget {
     maybeSetStreamPriority(this, playerConfig);
     if (!hasYoutubeSource(playerConfig.sources)) {
       this._thumbnailManager = new ThumbnailManager(this._localPlayer, this.config.ui, mediaConfig);
-      this._uiWrapper.setSeekbarConfig(this.config.ui, this._thumbnailManager.getKalturaThumbnailConfig());
     }
     this.configure(playerConfig);
   }

test/src/common/thumbnail-manager.spec.js

@@ -3,6 +3,7 @@ import {DefaultThumbnailConfig, ThumbnailManager} from '../../../src/common/thum
 
 describe('ThumbnailManager', () => {
   let thumbnailManager, fakePlayer, fakeMediaConfig, sandbox;
+  const thumbsSprite = 'http://stilearning.com/vision/1.1/assets/globals/img/dummy/img-10.jpg';
   const fakeSeekbarConfig = {
     thumbsSlices: 200,
     thumbsWidth: 100
@@ -11,7 +12,13 @@ describe('ThumbnailManager', () => {
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     fakePlayer = {
-      config: {ui: {}},
+      config: {
+        ui: {
+          components: {
+            seekbar: {}
+          }
+        }
+      },
       getThumbnail: () => {}
     };
     fakeMediaConfig = {
@@ -92,4 +99,42 @@ describe('ThumbnailManager', () => {
     thumbnailManager.getThumbnail(100);
     spy.should.calledOnce;
   });
+
+  it('should set the configured thumbs sprite with default sizes', () => {
+    fakePlayer.config.ui.components.seekbar.thumbsSprite = thumbsSprite;
+    thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
+    thumbnailManager.getKalturaThumbnailConfig().should.deep.equal({
+      thumbsSprite,
+      ...DefaultThumbnailConfig
+    });
+  });
+
+  it('should set the configured thumbs sprite with configured sizes', () => {
+    const seekbarConfig = {
+      thumbsSlices: 200,
+      thumbsSprite,
+      thumbsWidth: 300
+    };
+    fakePlayer.config.ui.components.seekbar = seekbarConfig;
+    thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
+    thumbnailManager.getKalturaThumbnailConfig().should.deep.equal({...seekbarConfig, ...DefaultThumbnailConfig});
+  });
+
+  it('should set the backend thumbs sprite with default sizes', () => {
+    thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
+    const config = thumbnailManager.getKalturaThumbnailConfig();
+    config.thumbsSlices.should.equal(DefaultThumbnailConfig.thumbsSlices);
+    config.thumbsWidth.should.equal(DefaultThumbnailConfig.thumbsWidth);
+  });
+
+  it('should set the backend thumbs sprite with configured sizes', () => {
+    fakePlayer.config.ui.components.seekbar = {
+      thumbsSlices: 200,
+      thumbsWidth: 300
+    };
+    thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
+    const config = thumbnailManager.getKalturaThumbnailConfig();
+    config.thumbsSlices.should.equal(200);
+    config.thumbsWidth.should.equal(300);
+  });
 });