fix(FEC-11431): refactor preview thumb height from real image sprite …

…height (#473) Following #466, #471, #472 - code was refactored so image thumb height is taken from real image sprite. This overrides all issues regarding height miscalculations and the need for videoHeight (which is missing when casting) In addition kaltura player was passed to ThumbsManager instead of core player to fix preview image when casting as the duration when casting needs to come from cast player and not the core one.
kaltura · Jul 27, 2021 · fe5ad62 · fe5ad62
1 parent 9092e81
commit fe5ad62
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 27 deletions.
diff --git a/src/common/thumbnail-manager.js b/src/common/thumbnail-manager.js
@@ -1,5 +1,5 @@
 // @flow
-import {Utils, ThumbnailInfo, MediaType, EventManager, Html5EventType} from '@playkit-js/playkit-js';
+import {Utils, ThumbnailInfo, MediaType, EventManager} from '@playkit-js/playkit-js';
 import evaluate from './utils/evaluate';
 
 const DefaultThumbnailConfig: Object = {
@@ -12,23 +12,22 @@ const THUMBNAIL_REGEX = /.*\/p\/\d+\/(?:[a-zA-Z]+\/\d+\/)*thumbnail\/entry_id\/\
 const THUMBNAIL_SERVICE_TEMPLATE: string = '{{thumbnailUrl}}/width/{{thumbsWidth}}/vid_slices/{{thumbsSlices}}/ks/{{ks}}';
 
 class ThumbnailManager {
-  _player: Player;
+  _player: KalturaPlayer;
   _thumbnailConfig: ?KPThumbnailConfig;
   _eventManager: EventManager;
-  _origVideoHeight: number;
-  _origVideoWidth: number;
-  _origDuration: number;
+  _thumbsHeight: number;
 
-  constructor(player: Player, uiConfig: KPUIOptionsObject, mediaConfig: KPMediaConfig) {
+  constructor(player: KalturaPlayer, uiConfig: KPUIOptionsObject, mediaConfig: KPMediaConfig) {
     this._player = player;
     this._thumbnailConfig = this._buildKalturaThumbnailConfig(uiConfig, mediaConfig);
     this._eventManager = new EventManager();
-
-    this._eventManager.listenOnce(this._player, Html5EventType.LOADED_METADATA, () => {
-      this._origVideoHeight = this._player.videoHeight;
-      this._origVideoWidth = this._player.videoWidth;
-      this._origDuration = this._player.duration;
-    });
+    if (this._isUsingKalturaThumbnail()) {
+      const img = new Image();
+      this._eventManager.listenOnce(img, 'load', () => {
+        this._thumbsHeight = img.naturalHeight;
+      });
+      img.src = this._thumbnailConfig?.thumbsSprite || '';
+    }
   }
 
   destroy() {
@@ -39,7 +38,7 @@ class ThumbnailManager {
     if (this._isUsingKalturaThumbnail()) {
       return this._convertKalturaThumbnailToThumbnailInfo(time);
     }
-    return this._player.getThumbnail(time);
+    return this._player._localPlayer.getThumbnail(time);
   }
 
   getKalturaThumbnailConfig(): ?KPThumbnailConfig {
@@ -53,15 +52,12 @@ class ThumbnailManager {
   _convertKalturaThumbnailToThumbnailInfo = (time: number): ?ThumbnailInfo => {
     if (this._thumbnailConfig) {
       const {thumbsSprite, thumbsWidth, thumbsSlices} = this._thumbnailConfig;
-      const videoHeight = this._player.videoHeight || this._origVideoHeight;
-      const videoWidth = this._player.videoWidth || this._origVideoWidth;
-      const thumbsHeight = Math.floor(thumbsWidth * (videoHeight / videoWidth));
-      const duration = (this._player.duration || this._origDuration) / thumbsSlices;
+      const duration = this._player.duration / thumbsSlices;
       const thumbnailInfo = {
         x: Math.floor(time / duration) * thumbsWidth,
         y: 0,
         url: thumbsSprite,
-        height: thumbsHeight,
+        height: this._thumbsHeight,
         width: thumbsWidth
       };
       return new ThumbnailInfo(thumbnailInfo);

diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -166,7 +166,7 @@ class KalturaPlayer extends FakeEventTarget {
       playerConfig.playback = playback;
     }
     if (!hasYoutubeSource(sources)) {
-      this._thumbnailManager = new ThumbnailManager(this._localPlayer, this.config.ui, mediaConfig);
+      this._thumbnailManager = new ThumbnailManager(this, this.config.ui, mediaConfig);
     }
     this.configure({...playerConfig, sources});
   }

diff --git a/test/src/common/thumbnail-manager.spec.js b/test/src/common/thumbnail-manager.spec.js
@@ -20,8 +20,9 @@ describe('ThumbnailManager', () => {
         }
       },
       getThumbnail: () => {},
-      addEventListener: () => {},
-      removeEventListener: () => {}
+      _localPlayer: {
+        getThumbnail: () => {}
+      }
     };
     fakeMediaConfig = {
       sources: {
@@ -97,20 +98,18 @@ describe('ThumbnailManager', () => {
   it('should return thumbnail from core player', () => {
     fakeMediaConfig.sources.poster = null;
     thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
-    const spy = sandbox.spy(fakePlayer, 'getThumbnail');
+    const spy = sandbox.spy(fakePlayer._localPlayer, 'getThumbnail');
     thumbnailManager.getThumbnail(100);
     spy.should.calledOnce;
   });
 
-  it('should return thumbnail height from core player with video ratio 4:3', () => {
+  it('should return thumbnail height from image sprite', () => {
     fakeMediaConfig.sources.poster = null;
     fakePlayer.config.ui.components.seekbar.thumbsSprite = thumbsSprite;
     thumbnailManager = new ThumbnailManager(fakePlayer, fakePlayer.config.ui, fakeMediaConfig);
-    fakePlayer.duration = 1000;
-    fakePlayer.videoHeight = 480;
-    fakePlayer.videoWidth = 640;
+    thumbnailManager._thumbsHeight = 999;
     const thumbInfo = thumbnailManager.getThumbnail(100);
-    thumbInfo.height.should.equal(thumbInfo.width * (fakePlayer.videoHeight / fakePlayer.videoWidth));
+    thumbInfo.height.should.equal(999);
   });
 
   it('should set the configured thumbs sprite with default sizes', () => {