feat(FEC-12229): append KS to thumbnail API (#545)

appending KS to thumbnail url request API for poster and thumbnails/sprite.
definition as below: 
- ks will not be added to thumbnail api by default, but only if needed- according to new `loadThumbnailWithKs` configuration defined in provider.
- ks will never be added to thumbnail api when user is anonymous
- adding shouldAddKs API to player
- **for poster case:** ovp poster will add the ks when needed
- **for thumbnail/sprite case:** thumbnail manager will add the ks when needed

Solves FEC-12229

src/common/playlist/playlist-manager.js

@@ -238,7 +238,12 @@ class PlaylistManager {
           playlistConfig && playlistConfig.items && playlistConfig.items[index] && playlistConfig.items[index].sources
         );
         if (Array.isArray(itemData.sources.poster)) {
-          addKalturaPoster(itemData.sources, item.sources, this._player.dimensions);
+          addKalturaPoster(
+            itemData.sources,
+            item.sources,
+            this._player.dimensions,
+            this._player.shouldAddKs() ? this._player.config.session?.ks : ''
+          );
         }
         return {
           sources: itemData.sources,

src/common/thumbnail-manager.js

@@ -9,7 +9,7 @@ const DefaultThumbnailConfig: Object = {
 };
 
 const THUMBNAIL_REGEX = /.*\/p\/\d+\/(?:[a-zA-Z]+\/\d+\/)*thumbnail\/entry_id\/\w+\/.*\d+/;
-const THUMBNAIL_SERVICE_TEMPLATE: string = '{{thumbnailUrl}}/width/{{thumbsWidth}}/vid_slices/{{thumbsSlices}}/ks/{{ks}}';
+const THUMBNAIL_SERVICE_TEMPLATE: string = '{{thumbnailUrl}}/width/{{thumbsWidth}}/vid_slices/{{thumbsSlices}}';
 
 class ThumbnailManager {
   _player: KalturaPlayer;
@@ -68,7 +68,7 @@ class ThumbnailManager {
     const seekbarConfig = Utils.Object.getPropertyPath(uiConfig, 'components.seekbar');
     const posterUrl = mediaConfig.sources && mediaConfig.sources.poster;
     const isVod = mediaConfig.sources && mediaConfig.sources.type === MediaType.VOD;
-    const ks = mediaConfig.session && mediaConfig.session.ks;
+    const ks = this._player.shouldAddKs() ? mediaConfig.session?.ks : '';
     const thumbnailConfig = Utils.Object.mergeDeep(DefaultThumbnailConfig, seekbarConfig);
     const thumbsSprite = isVod ? this._getThumbSlicesUrl(posterUrl, ks, thumbnailConfig) : '';
     return {
@@ -83,10 +83,10 @@ class ThumbnailManager {
         try {
           const model: Object = {
             thumbnailUrl: posterUrl,
-            ks,
             ...thumbnailConfig
           };
-          return evaluate(THUMBNAIL_SERVICE_TEMPLATE, model);
+          const url = evaluate(THUMBNAIL_SERVICE_TEMPLATE, model);
+          return ks ? url + `/ks/${ks}` : url;
         } catch (e) {
           return '';
         }

src/kaltura-player.js

@@ -166,10 +166,11 @@ class KalturaPlayer extends FakeEventTarget {
     Object.keys(this._pluginsConfig).forEach(name => {
       playerConfig.plugins[name] = playerConfig.plugins[name] || {};
     });
+    this.configure({session: mediaConfig.session});
     if (!hasYoutubeSource(sources)) {
       this._thumbnailManager = new ThumbnailManager(this, this.config.ui, mediaConfig);
     }
-    addKalturaPoster(sources, mediaConfig.sources, this._localPlayer.dimensions);
+    addKalturaPoster(sources, mediaConfig.sources, this._localPlayer.dimensions, this.shouldAddKs() ? mediaConfig.session?.ks : '');
     addKalturaParams(this, {...playerConfig, sources});
     const playback = maybeSetStreamPriority(this, sources);
     if (playback) {
@@ -178,6 +179,10 @@ class KalturaPlayer extends FakeEventTarget {
     this.configure({...playerConfig, sources});
   }
 
+  shouldAddKs(): boolean {
+    return !!(this.config.provider.loadThumbnailWithKs && !this.config.session.isAnonymous);
+  }
+
   /**
    * Loads a playlist by id.
    * @param {ProviderPlaylistInfoObject} playlistInfo - The playlist info.

src/ovp/poster.js

@@ -6,16 +6,22 @@ import {THUMBNAIL_REGEX} from '../common/thumbnail-manager';
  * @param {PKSourcesConfigObject} playerSources - player sources container
  * @param {ProviderMediaConfigSourcesObject} mediaSources - media config sources container
  * @param {Object} dimensions - player dimensions object
+ * @param {string} ks - ks
  * @private
  * @returns {void}
  */
-function addKalturaPoster(playerSources: PKSourcesConfigObject, mediaSources: ProviderMediaConfigSourcesObject, dimensions: Object): void {
+function addKalturaPoster(
+  playerSources: PKSourcesConfigObject,
+  mediaSources: ProviderMediaConfigSourcesObject,
+  dimensions: Object,
+  ks?: string
+): void {
   const playerPoster = playerSources.poster;
   const mediaConfigPoster = mediaSources.poster;
   const playerWidth = dimensions.width;
   const playerHeight = dimensions.height;
   if (typeof playerPoster === 'string' && THUMBNAIL_REGEX.test(playerPoster) && playerPoster === mediaConfigPoster) {
-    playerSources.poster = `${playerPoster}/height/${playerHeight}/width/${playerWidth}`;
+    playerSources.poster = `${playerPoster}/height/${playerHeight}/width/${playerWidth}${ks ? `/ks/${ks}` : ''}`;
   }
   mediaSources.poster = playerSources.poster || '';
 }

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

@@ -25,7 +25,8 @@ describe('ThumbnailManager', () => {
       getThumbnail: () => {},
       _localPlayer: {
         getThumbnail: () => {}
-      }
+      },
+      shouldAddKs: () => true
     };
     fakeMediaConfig = {
       sources: {
@@ -153,6 +154,17 @@ describe('ThumbnailManager', () => {
     config.thumbsWidth.should.equal(300);
   });
 
+  it('should get thumbnail slices url without ks', () => {
+    sandbox.stub(fakePlayer, 'shouldAddKs').returns(false);
+    delete DefaultThumbnailConfig.thumbsSprite;
+    thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
+    thumbnailManager
+      .getKalturaThumbnailConfig()
+      .thumbsSprite.should.equals(
+        `${fakeMediaConfig.sources.poster}/width/${DefaultThumbnailConfig.thumbsWidth}/vid_slices/${DefaultThumbnailConfig.thumbsSlices}`
+      );
+  });
+
   describe('Poster Integration', function () {
     const targetId = 'player-placeholder_ovp/thumbnail.spec';
 

test/src/ovp/poster.spec.js

@@ -43,6 +43,15 @@ describe('addKalturaPoster', function () {
     mediaSources.poster.should.equal(playerSources.poster);
   });
 
+  it('should append ks to kaltura poster', function () {
+    const mediaSources = {poster: '/p/1091/thumbnail/entry_id/0_wifqaipd/2'};
+    const playerSources = {poster: '/p/1091/thumbnail/entry_id/0_wifqaipd/2'};
+    const ks = '123';
+    addKalturaPoster(playerSources, mediaSources, {width: 640, height: 360}, ks);
+    playerSources.poster.should.equal('/p/1091/thumbnail/entry_id/0_wifqaipd/2/height/360/width/640/ks/123');
+    mediaSources.poster.should.equal(playerSources.poster);
+  });
+
   describe.skip('Poster Integration', function () {
     let config, kalturaPlayer, sandbox, provider;
     const myCustomPosterUrl = Images.POSTER;

ts-typed/player.d.ts

@@ -53,5 +53,6 @@ declare namespace KalturaPlayerTypes {
       x: number;
       y: number;
     };
+    shouldAddKs: () => boolean;
   }
 }