feat(FEC-12610): Image Playback Engine - Support for rendering an ima…

…ge, with or without duration (#598) # Description of the Changes - Auto configure the stream priority to image engine if an image source is detected - New isUntimedImage() public API (to which the playkit-js-ui is listening and sets the ui preset accordingly) - Add default duration of 5 sc for timed image items on Playlist solves FEC-12610 related prs: kaltura/playkit-js-image-player#1 kaltura/playkit-js#697 kaltura/playkit-js-providers#190 kaltura/playkit-js-ui#718
kaltura · Jan 22, 2023 · af31665 · af31665
1 parent 538699c
commit af31665
Show file tree

Hide file tree

Showing 9 changed files with 4,241 additions and 3,594 deletions.
diff --git a/package.json b/package.json
@@ -58,14 +58,14 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "@playkit-js/playkit-js": "0.80.10",
+    "@playkit-js/playkit-js": "canary",
     "@playkit-js/playkit-js-dash": "1.31.4",
     "@playkit-js/playkit-js-hls": "1.31.2",
-    "@playkit-js/playkit-js-ui": "0.73.0",
+    "@playkit-js/playkit-js-ui": "canary",
     "@types/preact-i18n": "^2.3.1",
     "hls.js": "1.3.1",
     "intersection-observer": "^0.12.0",
-    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.37.0",
+    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#master",
     "proxy-polyfill": "^0.3.0",
     "shaka-player": "4.3.3"
   },

diff --git a/src/common/playlist/playlist-item.js b/src/common/playlist/playlist-item.js
@@ -1,6 +1,6 @@
 // @flow
 import {Utils} from '@playkit-js/playkit-js';
-const formats = ['hls', 'dash', 'progressive'];
+const formats = ['hls', 'dash', 'progressive', 'image'];
 /**
  * @class PlaylistItem
  * @param {PKSourcesConfigObject} [sources] - The item sources

diff --git a/src/common/playlist/playlist-manager.js b/src/common/playlist/playlist-manager.js
@@ -6,6 +6,8 @@ import {Playlist} from './playlist';
 import {PlaylistItem} from './playlist-item';
 import {mergeProviderPluginsConfig} from '../utils/setup-helpers';
 
+const DEFAULT_IMAGE_DURATION = 5;
+
 /**
  * @class PlaylistManager
  * @param {KalturaPlayer} player - The player instance
@@ -250,6 +252,7 @@ class PlaylistManager {
 
   _addBindings() {
     this._eventManager.listen(this._player, this._player.Event.Core.PLAYBACK_ENDED, () => this._onPlaybackEnded());
+    this._eventManager.listen(this._player, this._player.Event.Core.CHANGE_SOURCE_STARTED, () => this._onChangeSourceStarted());
   }
 
   _onPlaybackEnded(): void {
@@ -264,6 +267,12 @@ class PlaylistManager {
     }
   }
 
+  _onChangeSourceStarted(): void {
+    if (this._playlist.items[this._playlist._activeItemIndex].sources?.type === 'Image') {
+      this._player.configure({sources: {duration: DEFAULT_IMAGE_DURATION}});
+    }
+  }
+
   _setItem(activeItem: PlaylistItem): Promise<*> {
     const {index} = activeItem;
     PlaylistManager._logger.debug(`Playing item number ${index}`, activeItem);

diff --git a/src/common/utils/setup-helpers.js b/src/common/utils/setup-helpers.js
@@ -618,6 +618,32 @@ function printSetupMessages(): void {
   setupMessages.forEach(msgObj => getLogger('KalturaPlayer:Setup')[msgObj.level](msgObj.msg));
 }
 
+/**
+ * Prints early setup messages.
+ * @private
+ * @param {Player} player - The player.
+ * @param {string} engine - The player engine name.
+ * @param {string} format - The player engine format.
+ * @returns {PKPlaybackConfigObject} - The playback config.
+ */
+function addEngineToStreamPriority(player: Player, engine: string, format: string): PKPlaybackConfigObject {
+  const playbackConfig = player.config.playback;
+  let hasYoutube = false;
+  playbackConfig.streamPriority.forEach(sp => {
+    if (sp.engine === engine) {
+      hasYoutube = true;
+    }
+  });
+  if (!hasYoutube) {
+    playbackConfig.streamPriority.push({
+      engine: engine,
+      format: format
+    });
+  }
+
+  return playbackConfig;
+}
+
 /**
  * set stream priority according to playerConfig
  * @param {Player} player - player
@@ -626,21 +652,10 @@ function printSetupMessages(): void {
  */
 function maybeSetStreamPriority(player: Player, sources: PKSourcesConfigObject): ?PKPlaybackConfigObject {
   if (sources && hasYoutubeSource(sources)) {
-    const playbackConfig = player.config.playback;
-    let hasYoutube = false;
-    playbackConfig.streamPriority.forEach(sp => {
-      if (sp.engine === 'youtube') {
-        hasYoutube = true;
-      }
-    });
-    if (!hasYoutube) {
-      playbackConfig.streamPriority.push({
-        engine: 'youtube',
-        format: 'progressive'
-      });
-    }
-
-    return playbackConfig;
+    return addEngineToStreamPriority(player, 'youtube', 'progressive');
+  }
+  if (sources && hasImageSource(sources)) {
+    return addEngineToStreamPriority(player, 'image', 'image');
   }
   return null;
 }
@@ -655,6 +670,18 @@ function hasYoutubeSource(sources: PKSourcesConfigObject): boolean {
   return !!(source && source[0] && source[0].mimetype === 'video/youtube');
 }
 
+/**
+ * returns true if sources contain image source
+ * @param {PKSourcesConfigObject} sources - thr sources object
+ * @returns {boolean} - true if sources contain image source
+ */
+function hasImageSource(sources: PKSourcesConfigObject): boolean {
+  // const IMAGE_MIME_TYPES = /(^image)(\/)[a-zA-Z0-9_]*/;
+  const source = sources && sources.image;
+  // return !!(source && source[0] && source[0].mimetype.match(IMAGE_MIME_TYPES));
+  return !!(source && source[0]);
+}
+
 /**
  * Maybe set inBrowserFullscreen config based on the plugins.
  * @private
@@ -737,6 +764,7 @@ export {
   getDefaultOptions,
   maybeSetStreamPriority,
   hasYoutubeSource,
+  hasImageSource,
   mergeProviderPluginsConfig,
   getServerUIConf
 };
diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -1,7 +1,13 @@
 // @flow
 import {EventType as UIEventType} from '@playkit-js/playkit-js-ui';
 import {Provider} from 'playkit-js-providers';
-import {hasYoutubeSource, maybeSetStreamPriority, mergeProviderPluginsConfig, supportLegacyOptions} from './common/utils/setup-helpers';
+import {
+  hasYoutubeSource,
+  hasImageSource,
+  maybeSetStreamPriority,
+  mergeProviderPluginsConfig,
+  supportLegacyOptions
+} from './common/utils/setup-helpers';
 import {addKalturaParams} from './common/utils/kaltura-params';
 import {ViewabilityManager, ViewabilityType, VISIBILITY_CHANGE} from './common/utils/viewability-manager';
 import {BasePlugin, ConfigEvaluator, PluginManager} from './common/plugins';
@@ -174,7 +180,7 @@ class KalturaPlayer extends FakeEventTarget {
       playerConfig.plugins[name] = playerConfig.plugins[name] || {};
     });
     this.configure({session: mediaConfig.session});
-    if (!hasYoutubeSource(sources)) {
+    if (!hasYoutubeSource(sources) || !hasImageSource(sources)) {
       this._thumbnailManager = new ThumbnailManager(this, this.config.ui, mediaConfig);
     } else {
       this._thumbnailManager = null;
@@ -422,6 +428,10 @@ class KalturaPlayer extends FakeEventTarget {
     return this._localPlayer.isDvr();
   }
 
+  isUntimedImg(): boolean {
+    return hasImageSource(this.sources) && !(typeof this.config.sources.duration === 'number' && this.config.sources.duration > 0);
+  }
+
   seekToLiveEdge(): void {
     this._localPlayer.seekToLiveEdge();
   }

diff --git a/test/src/kaltura-player.spec.js b/test/src/kaltura-player.spec.js
@@ -194,8 +194,7 @@ describe('kaltura player api', function () {
           dash: [
             {
               id: '0_nwkp7jtx_301,mpegdash',
-              url:
-                'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
+              url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
               mimetype: 'application/dash+xml'
             }
           ]

diff --git a/test/src/mock-data/media.js b/test/src/mock-data/media.js
@@ -10,24 +10,21 @@ const MediaConfig = {
       hls: [
         {
           id: '0_wifqaipd_861,applehttp',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/applehttp/flavorIds/0_h65mfj7f,0_3flmvnwc,0_m131krws,0_5407xm9j,0_xcrwyk2n/a.m3u8?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/applehttp/flavorIds/0_h65mfj7f,0_3flmvnwc,0_m131krws,0_5407xm9j,0_xcrwyk2n/a.m3u8?uiConfId=15215933',
           mimetype: 'application/x-mpegURL'
         }
       ],
       dash: [
         {
           id: '0_wifqaipd_911,mpegdash',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/mpegdash/flavorIds/0_m131krws,0_5407xm9j,0_xcrwyk2n/a.mpd?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/mpegdash/flavorIds/0_m131krws,0_5407xm9j,0_xcrwyk2n/a.mpd?uiConfId=15215933',
           mimetype: 'application/dash+xml'
         }
       ],
       progressive: [
         {
           id: '0_h65mfj7f261,url',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_h65mfj7f/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_h65mfj7f/a.mp4?uiConfId=15215933',
           mimetype: 'video/mp4',
           bandwidth: 480256,
           width: 480,
@@ -36,8 +33,7 @@ const MediaConfig = {
         },
         {
           id: '0_3flmvnwc261,url',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_3flmvnwc/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_3flmvnwc/a.mp4?uiConfId=15215933',
           mimetype: 'video/mp4',
           bandwidth: 686080,
           width: 640,
@@ -46,8 +42,7 @@ const MediaConfig = {
         },
         {
           id: '0_m131krws261,url',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_m131krws/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_m131krws/a.mp4?uiConfId=15215933',
           mimetype: 'video/mp4',
           bandwidth: 987136,
           width: 640,
@@ -56,8 +51,7 @@ const MediaConfig = {
         },
         {
           id: '0_5407xm9j261,url',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_5407xm9j/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_5407xm9j/a.mp4?uiConfId=15215933',
           mimetype: 'video/mp4',
           bandwidth: 1667072,
           width: 1280,
@@ -66,8 +60,7 @@ const MediaConfig = {
         },
         {
           id: '0_xcrwyk2n261,url',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_xcrwyk2n/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_wifqaipd/protocol/http/format/url/flavorIds/0_xcrwyk2n/a.mp4?uiConfId=15215933',
           mimetype: 'video/mp4',
           bandwidth: 2691072,
           width: 1280,
@@ -101,16 +94,14 @@ const MediaConfig = {
       hls: [
         {
           id: '0_nwkp7jtx_1033,applehttp',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/applehttp/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.m3u8',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/applehttp/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.m3u8',
           mimetype: 'application/x-mpegURL'
         }
       ],
       dash: [
         {
           id: '0_nwkp7jtx_301,mpegdash',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
           mimetype: 'application/dash+xml'
         }
       ],
@@ -139,16 +130,14 @@ const MediaConfig = {
       hls: [
         {
           id: '0_nwkp7jtx_1033,applehttp',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/applehttp/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.m3u8',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/applehttp/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.m3u8',
           mimetype: 'application/x-mpegURL'
         }
       ],
       dash: [
         {
           id: '0_nwkp7jtx_301,mpegdash',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_nwkp7jtx/protocol/http/format/mpegdash/flavorIds/0_iju7j519,0_98mlrldo,0_5hts3h5r,0_n6n76xp9/a.mpd',
           mimetype: 'application/dash+xml'
         }
       ],
@@ -186,8 +175,7 @@ const MediaConfig = {
       progressive: [
         {
           id: '1111',
-          url:
-            'http://qa-apache-php7.dev.kaltura.com/p/1234/sp/123400/playManifest/entryId/1111/protocol/http/format/url/flavorIds/1111/a.mp4?uiConfId=15215933',
+          url: 'http://qa-apache-php7.dev.kaltura.com/p/1234/sp/123400/playManifest/entryId/1111/protocol/http/format/url/flavorIds/1111/a.mp4?uiConfId=15215933',
           mimetype: 'video/youtube'
         }
       ],

diff --git a/test/src/mock-data/playlist.js b/test/src/mock-data/playlist.js
@@ -280,8 +280,7 @@ const playlistByConfig = {
         hls: [
           {
             mimetype: 'application/x-mpegURL',
-            url:
-              'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_fu4ifhie/protocol/http/format/applehttp/flavorIds/0_wbawecj0,0_cj2odpyt,0_uj45vim0,0_xlpm7btj,0_6p25la0i,0_cmq5aigy/a.m3u8'
+            url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_fu4ifhie/protocol/http/format/applehttp/flavorIds/0_wbawecj0,0_cj2odpyt,0_uj45vim0,0_xlpm7btj,0_6p25la0i,0_cmq5aigy/a.m3u8'
           }
         ]
       }
@@ -294,8 +293,7 @@ const playlistByConfig = {
         hls: [
           {
             mimetype: 'application/x-mpegURL',
-            url:
-              'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_15xrxwvo/protocol/http/format/applehttp/flavorIds/0_io24exzg,0_5r0geh30,0_b647tbfs,0_fzqa9ew4/a.m3u8'
+            url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_15xrxwvo/protocol/http/format/applehttp/flavorIds/0_io24exzg,0_5r0geh30,0_b647tbfs,0_fzqa9ew4/a.m3u8'
           }
         ]
       }
@@ -306,8 +304,7 @@ const playlistByConfig = {
         hls: [
           {
             mimetype: 'application/x-mpegURL',
-            url:
-              'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_p8aigvgu/protocol/http/format/applehttp/flavorIds/0_80115tmg/a.m3u8'
+            url: 'http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_p8aigvgu/protocol/http/format/applehttp/flavorIds/0_80115tmg/a.m3u8'
           }
         ]
       }