fix(FEC-8449): configured preview thumbnail is not displayed during p…

…layback (#149) config the seekbar component thumbsWidth and thumbsSlices even thumbsSprite doesn't exist
kaltura · Aug 6, 2018 · f3544d0 · f3544d0
1 parent 30d6a21
commit f3544d0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 35 deletions.
diff --git a/src/common/ui-wrapper.js b/src/common/ui-wrapper.js
@@ -96,20 +96,15 @@ function appendPlayerViewToTargetContainer(targetId: string, view: HTMLDivElemen
  * Gets the preview thumbnail config for the ui seekbar component.
  * @param {ProviderMediaConfigObject} mediaConfig - The provider media config.
  * @param {SeekbarConfig} seekbarConfig - The seek bar config.
- * @returns {?Object} - The seekbar component config.
+ * @returns {SeekbarConfig} - The seekbar component config.
  */
-function getPreviewThumbnailConfig(mediaConfig: ProviderMediaConfigObject, seekbarConfig: SeekbarConfig): ?Object {
-  const mediaConfigPoster = mediaConfig.sources && mediaConfig.sources.poster;
-  if (typeof mediaConfigPoster === 'string') {
-    const regex = /.*\/p\/(\d+)\/.*\/thumbnail\/entry_id\/(\w+)\/.*\d+/;
-    if (regex.test(mediaConfigPoster)) {
-      return {
-        thumbsSprite: getThumbSlicesUrl(mediaConfig, seekbarConfig),
-        thumbsWidth: DEFAULT_THUMBS_WIDTH,
-        thumbsSlices: DEFAULT_THUMBS_SLICES
-      };
-    }
-  }
+function getPreviewThumbnailConfig(mediaConfig: ProviderMediaConfigObject, seekbarConfig: SeekbarConfig): SeekbarConfig {
+  const previewThumbnailConfig: SeekbarConfig = {
+    thumbsSprite: getThumbSlicesUrl(mediaConfig, seekbarConfig),
+    thumbsWidth: DEFAULT_THUMBS_WIDTH,
+    thumbsSlices: DEFAULT_THUMBS_SLICES
+  };
+  return previewThumbnailConfig;
 }
 
 export {UIWrapper};
diff --git a/src/common/utils/thumbs.js b/src/common/utils/thumbs.js
@@ -12,15 +12,22 @@ const TEMPLATE: string = '{{thumbnailUrl}}/width/{{width}}/vid_slices/{{slices}}
  * @returns {string} - The thumbnail slices url.
  */
 export function getThumbSlicesUrl(mediaConfig: ProviderMediaConfigObject, seekbarConfig?: SeekbarConfig): string {
-  try {
-    const model: Object = {
-      thumbnailUrl: mediaConfig.sources.poster,
-      ks: mediaConfig.session.ks,
-      width: (seekbarConfig && seekbarConfig.thumbsWidth) || DEFAULT_THUMBS_WIDTH,
-      slices: (seekbarConfig && seekbarConfig.thumbsSlices) || DEFAULT_THUMBS_SLICES
-    };
-    return evaluate(TEMPLATE, model);
-  } catch (e) {
-    return '';
+  const mediaConfigPoster = mediaConfig.sources && mediaConfig.sources.poster;
+  if (typeof mediaConfigPoster === 'string') {
+    const regex = /.*\/p\/\d+\/(?:[a-zA-Z]+\/\d+\/)*thumbnail\/entry_id\/\w+\/.*\d+/;
+    if (regex.test(mediaConfigPoster)) {
+      try {
+        const model: Object = {
+          thumbnailUrl: mediaConfigPoster,
+          ks: mediaConfig.session.ks,
+          width: (seekbarConfig && seekbarConfig.thumbsWidth) || DEFAULT_THUMBS_WIDTH,
+          slices: (seekbarConfig && seekbarConfig.thumbsSlices) || DEFAULT_THUMBS_SLICES
+        };
+        return evaluate(TEMPLATE, model);
+      } catch (e) {
+        return '';
+      }
+    }
   }
+  return '';
 }
diff --git a/test/src/common/utils/thumbs.spec.js b/test/src/common/utils/thumbs.spec.js
@@ -3,7 +3,7 @@ import {getThumbSlicesUrl} from '../../../../src/common/utils/thumbs';
 describe('getThumbSlicesUrl', function() {
   const fakeData = {
     sources: {
-      poster: '//my-thumb-service.com/p/1/entry_id/2/version/3'
+      poster: '//my-thumb-service.com/p/1/thumbnail/entry_id/2/version/3'
     },
     session: {
       ks: 'my-ks'
@@ -22,4 +22,14 @@ describe('getThumbSlicesUrl', function() {
   it('should get thumbnail slices url with the custom params', function() {
     getThumbSlicesUrl(fakeData, fakeUIConfig).should.equals(`${fakeData.sources.poster}/width/100/vid_slices/200/ks/${fakeData.session.ks}`);
   });
+
+  it('should get empty thumbnail slices url for non string given', function() {
+    fakeData.sources.poster = null;
+    getThumbSlicesUrl(fakeData, fakeUIConfig).should.equals(``);
+  });
+
+  it('should get empty thumbnail slices url for non valid string given', function() {
+    fakeData.sources.poster = '//my-thumb-service.com/p/1/entry_id/2/version/3';
+    getThumbSlicesUrl(fakeData, fakeUIConfig).should.equals(``);
+  });
 });
diff --git a/test/src/common/utils/ui-wrapper.spec.js b/test/src/common/utils/ui-wrapper.spec.js
@@ -117,16 +117,5 @@ describe('UIWrapper', function() {
       });
       uiWrapper.setSeekbarConfig(mediaConfig, uiConfig);
     });
-
-    it('should not set seek bar config', function(done) {
-      uiConfig.components.seekbar = {};
-      mediaConfig.sources.poster = '';
-      uiWrapper = new UIWrapper(player, {ui: uiConfig});
-      sandbox.stub(uiWrapper, 'setConfig').callsFake(config => {
-        config.should.deep.equal({});
-        done();
-      });
-      uiWrapper.setSeekbarConfig(mediaConfig, uiConfig);
-    });
   });
 });