feat(FEC-13017): add api for get dual-thumbs (#117)

package.json

@@ -61,7 +61,8 @@
   "kaltura": {
     "name": "dualscreen",
     "dependencies": {
-      "playkit-kaltura-cuepoints": "3.0.6"
+      "playkit-kaltura-cuepoints": "3.0.6",
+      "playkit-timeline": "3.0.2"
     }
   },
   "dependencies": {

src/dualscreen.tsx

@@ -1,5 +1,5 @@
 import {h} from 'preact';
-import {DualScreenConfig, DualScreenPlayer, MultiscreenPlayer} from './types';
+import {DualScreenConfig, DualScreenPlayer, MultiscreenPlayer, PreviewThumbnail} from './types';
 import {PipChild, PipParent} from './components/pip';
 import {Multiscreen} from './components/multiscreen';
 import {PipMinimized} from './components/pip-minimized';
@@ -22,7 +22,7 @@ import {DragAndSnapManager} from './components/drag-and-snap-manager';
 import {SideBySideWrapper} from './components/side-by-side/side-by-side-wrapper';
 import {getValueOrUndefined} from './utils';
 import {DualScreenEngineDecorator} from './dualscreen-engine-decorator';
-import {ImagePlayer, SlideItem} from './image-player';
+import {ImagePlayer, SlideItem, SlideThumbnail} from './image-player';
 // @ts-ignore
 import {core, ui, BasePlugin, IEngineDecoratorProvider, KalturaPlayer} from '@playkit-js/kaltura-player-js';
 import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
@@ -75,6 +75,10 @@ export class DualScreen extends BasePlugin<DualScreenConfig> implements IEngineD
     this._readyPromise = this._makeReadyPromise();
     this._layout = Layout.Hidden;
     this._pipPosition = this.config.position;
+    const dualScreenApi = {
+      getDualScreenThumbs: this.getDualScreenThumbs
+    };
+    this.player.registerService('dualScreen', dualScreenApi);
   }
 
   getEngineDecorator(engine: any, dispatcher: Function) {
@@ -198,6 +202,23 @@ export class DualScreen extends BasePlugin<DualScreenConfig> implements IEngineD
     });
   };
 
+  public getDualScreenThumbs = (time: number): SlideThumbnail | PreviewThumbnail | Array<SlideThumbnail | PreviewThumbnail> => {
+    if (this._layout === Layout.Hidden) {
+      // @ts-ignore
+      return this.player.getThumbnail(time);
+    }
+    const primaryPlayer = this.getActiveDualScreenPlayer(PlayerContainers.primary);
+    if ([Layout.SingleMedia, Layout.SingleMediaInverse].includes(this._layout)) {
+      // @ts-ignore
+      return primaryPlayer?.player.getThumbnail(time);
+    }
+    const secondaryPlayer = this.getActiveDualScreenPlayer(PlayerContainers.secondary);
+    return [primaryPlayer, secondaryPlayer].map(dualScreenPlayer => {
+      // @ts-ignore
+      return dualScreenPlayer?.player.getThumbnail(time);
+    });
+  };
+
   private _setActiveDualScreenPlayer = (id: string, container: PlayerContainers.primary | PlayerContainers.secondary) => {
     if (this.getActiveDualScreenPlayer(container)?.id === id) {
       // prevent set player to the same container

src/image-player/image-player.tsx

@@ -1,3 +1,4 @@
+import {PreviewThumbnail} from '../types';
 import './image-player.scss';
 
 const MAX_RETRY_ATTEMPTS = 3;
@@ -9,18 +10,25 @@ export interface RawSlideItem {
   id: string;
   imageUrl: string;
   alt: string;
+  startTime: number;
 }
 
 export interface SlideItem extends RawSlideItem {
   index: number;
   loading: boolean;
   loaded: boolean;
   portrait: boolean;
+  height: number;
+  width: number;
   ready: Promise<void>;
   setReady: () => void;
   retryAttempts: number;
 }
 
+export interface SlideThumbnail extends PreviewThumbnail {
+  slide: true;
+}
+
 export class ImagePlayer {
   private _images: Array<SlideItem> = [];
   private _imagePlayer: HTMLDivElement;
@@ -39,6 +47,21 @@ export class ImagePlayer {
     return this._activeImage;
   }
 
+  public getThumbnail = (time: number): SlideThumbnail | undefined => {
+    for (let i = this._images.length - 1; i >= 0; i--) {
+      if (this._images[i].startTime <= time) {
+        return {
+          height: this._images[i].height,
+          width: this._images[i].width,
+          x: 0,
+          y: 0,
+          url: this._images[i].imageUrl,
+          slide: true
+        };
+      }
+    }
+  };
+
   public preLoadImages = () => {
     const isPreloadingActive = this._images.some(slide => slide.loading);
     if (!this._preloadEnabled || isPreloadingActive) {
@@ -75,6 +98,8 @@ export class ImagePlayer {
     const slideItem: SlideItem = {
       ...item,
       index: this._images.length,
+      height: 0,
+      width: 0,
       loading: false,
       loaded: false,
       portrait: false,
@@ -154,6 +179,8 @@ export class ImagePlayer {
     img.onload = () => {
       item.loading = false;
       item.loaded = true;
+      item.width = img.width;
+      item.height = img.height;
       item.portrait = img.width < img.height;
       item.setReady();
       this.preLoadImages();

src/image-sync-manager.ts

@@ -91,7 +91,8 @@ export class ImageSyncManager {
         this._imagePlayer.addImage({
           id: cue.id,
           imageUrl: cue.metadata!.assetUrl,
-          alt: cue.metadata!.title || cue.metadata!.description
+          alt: cue.metadata!.title || cue.metadata!.description,
+          startTime: cue.startTime
         });
         return cue;
       }

src/types/DualScreenPlayers.ts

@@ -14,3 +14,11 @@ export interface MultiscreenPlayer {
   setSecondary: (() => void) | null;
   setPrimary: () => void;
 }
+
+export interface PreviewThumbnail {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  url: string;
+}