feat(FEC-10669): add ability to pass options to loadMedia request (#374)

docs/playing-your-video.md

@@ -89,7 +89,7 @@ var mediaInfo = {
 | `protocol`           | `string`        |          | The protocol of the specific media     | `"https"`, `"http"`                                                |
 | `fileIds`            | `string`        |          | List of comma-separated media file IDs |
 | `streamerType`       | `string`        |          | The playback streamer type             | `"applehttp"`, `"mpegdash"`, `"url"`, `"smothstreaming"`, `"none"` |
-| `urlType     `       | `string`        |          | The playback url type                  | `"PLAYMANIFEST"`, `"DIRECT"`                                       |
+| `urlType`            | `string`        |          | The playback url type                  | `"PLAYMANIFEST"`, `"DIRECT"`                                       |
 | `formats`            | `Array<string>` |          | Device types as defined in the system. |
 
 ## Examples
@@ -180,7 +180,22 @@ player.loadMedia(mediaInfo).then(() => {
 });
 ```
 
-Click ~~here~~ to see the full `loadMedia` API.
+Click [here](api.md#loadmedia) to see the full `loadMedia` API.
+
+### Media Options
+
+In addition to `mediaInfo`, you can also pass media options to the `loadMedia` API. Those options will override the default options supplied from the backend or those configured in the player.
+Example:
+
+```javascript
+const mediaOptions = {
+  ...
+  poster: 'my/poster/url',
+  startTime: 30,
+  ...
+};
+player.loadMedia(mediaInfo, mediaOptions);
+```
 
 ## Next Step
 

flow-typed/types/load-media-options.js

@@ -0,0 +1,2 @@
+// @flow
+declare type KPLoadMediaOptions = PKSourcesConfigObject & {startTime?: number};

flow-typed/types/media-config.js

@@ -0,0 +1,2 @@
+// @flow
+declare type KPMediaConfig = ProviderMediaConfigObject & PKPlaybackConfigObject;

karma.conf.js

@@ -16,13 +16,6 @@ const launchers = {
 };
 
 module.exports = config => {
-  const {mode} = config;
-  const webpackConfig = require('./webpack.config.js')(process.env.NODE_ENV, {mode});
-  //Need to remove externals otherwise they won't be included in test
-  delete webpackConfig.externals;
-  // Need to define inline source maps when using karma
-  webpackConfig.devtool = 'inline-source-map';
-
   const karmaConf = {
     logLevel: config.LOG_INFO,
     customLaunchers: launchers,
@@ -47,7 +40,12 @@ module.exports = config => {
       'test/setup/karma.js': ['webpack', 'sourcemap']
     },
     reporters: ['progress', 'coverage'],
-    webpack: webpackConfig,
+    webpack: {
+      ...require('./webpack.config.js')(process.env.NODE_ENV, {mode: config.mode || 'development'})[0],
+      externals: {}, //Need to remove externals otherwise they won't be included in test
+      devtool: 'inline-source-map', // Need to define inline source maps when using karma
+      mode: config.mode || 'development' // run in development mode by default to avoid minifying -> faster
+    },
     webpackServer: {
       noInfo: true
     },

package.json

@@ -36,7 +36,7 @@
     "prettier:fix": "prettier --write .",
     "publish": "git push --follow-tags --no-verify origin master",
     "release": "standard-version",
-    "test": "NODE_ENV=test karma start --color",
+    "test": "NODE_ENV=testing karma start --color --mode development",
     "watch:ott": "sh ./scripts/job.sh watch ott",
     "watch:ovp": "sh ./scripts/job.sh watch ovp"
   },

src/common/cast/player-snapshot.js

@@ -9,7 +9,7 @@ import {TextStyle, TrackType, Utils} from '@playkit-js/playkit-js';
  */
 class PlayerSnapshot {
   mediaInfo: ?ProviderMediaInfoObject;
-  mediaConfig: ?ProviderMediaConfigObject;
+  mediaConfig: ?KPMediaConfig;
   /**
    * @type {TextStyle}
    * @instance

src/kaltura-player.js

@@ -75,7 +75,17 @@ class KalturaPlayer extends FakeEventTarget {
     this._localPlayer.configure({sources});
   }
 
-  loadMedia(mediaInfo: ProviderMediaInfoObject): Promise<*> {
+  /**
+   * Loads a media.
+   * @param {ProviderMediaInfoObject} mediaInfo - The media info.
+   * @param {KPLoadMediaOptions} [mediaOptions] - The media options.
+   * @returns {Promise<*>} - Promise which resolves when the media is loaded, or rejected if error occurs.
+   * @instance
+   * @memberof KalturaPlayer
+   * @example
+   * kalturaPlayer.loadMedia({entryId: 'entry123'}, {startTime: 5, poster: 'my/poster/url'});
+   */
+  loadMedia(mediaInfo: ProviderMediaInfoObject, mediaOptions?: KPLoadMediaOptions): Promise<*> {
     KalturaPlayer._logger.debug('loadMedia', mediaInfo);
     this._mediaInfo = mediaInfo;
     this.reset();
@@ -84,19 +94,30 @@ class KalturaPlayer extends FakeEventTarget {
     const providerResult = this._provider.getMediaConfig(mediaInfo);
     providerResult
       .then(
-        mediaConfig => this.setMedia(mediaConfig),
+        (providerMediaConfig: ProviderMediaConfigObject) => {
+          const mediaConfig = Utils.Object.copyDeep(providerMediaConfig);
+          if (mediaOptions) {
+            mediaConfig.playback = mediaConfig.playback || {};
+            mediaConfig.sources = mediaConfig.sources || {};
+            const {startTime} = mediaOptions;
+            if (typeof startTime === 'number') {
+              mediaConfig.playback = Utils.Object.mergeDeep(mediaConfig.playback, {startTime});
+              delete mediaOptions.startTime;
+            }
+            mediaConfig.sources = Utils.Object.mergeDeep(mediaConfig.sources, mediaOptions);
+          }
+          this.setMedia(mediaConfig);
+        },
         e =>
           this._localPlayer.dispatchEvent(
             new FakeEvent(CoreEventType.ERROR, new Error(Error.Severity.CRITICAL, Error.Category.PLAYER, Error.Code.LOAD_FAILED, e))
           )
       )
-      .then(() => {
-        this._maybeSetEmbedConfig();
-      });
+      .then(() => this._maybeSetEmbedConfig());
     return providerResult;
   }
 
-  setMedia(mediaConfig: ProviderMediaConfigObject): void {
+  setMedia(mediaConfig: KPMediaConfig): void {
     KalturaPlayer._logger.debug('setMedia', mediaConfig);
     this.reset();
     const playerConfig = Utils.Object.copyDeep(mediaConfig);
@@ -179,7 +200,7 @@ class KalturaPlayer extends FakeEventTarget {
     return Utils.Object.copyDeep(this._mediaInfo);
   }
 
-  getMediaConfig(): ?ProviderMediaConfigObject {
+  getMediaConfig(): ?KPMediaConfig {
     const mediaConfig = {
       sources: this._localPlayer.config.sources,
       plugins: this._pluginsConfig

test/src/kaltura-player.spec.js

@@ -81,6 +81,23 @@ describe('kaltura player api', function () {
         });
       });
 
+      it('should use the configured start time from loadMedia options', function (done) {
+        kalturaPlayer.addEventListener(kalturaPlayer.Event.FIRST_PLAYING, () => {
+          (kalturaPlayer.currentTime >= 10).should.be.true;
+          done();
+        });
+        kalturaPlayer.loadMedia({entryId}, {startTime: 10}).then(() => kalturaPlayer.play());
+      });
+
+      it('should use the configured poster from loadMedia options', function (done) {
+        const poster = 'http://stilearning.com/vision/1.1/assets/globals/img/dummy/img-10.jpg';
+        kalturaPlayer.addEventListener(kalturaPlayer.Event.CHANGE_SOURCE_ENDED, () => {
+          kalturaPlayer.poster.should.equal(poster);
+          done();
+        });
+        kalturaPlayer.loadMedia({entryId}, {poster});
+      });
+
       describe('maybeSetStreamPriority', function () {
         describe('media source mime type is video/youtube', function () {
           it('should add youtube to stream priority if not already set', function (done) {

webpack.config.js

@@ -9,9 +9,7 @@ const playerType = process.env.PLAYER_TYPE || 'ovp';
 const playerFileType = playerType === 'ovp' ? 'ovp' : 'tv';
 
 module.exports = (env, argv) => {
-  const configs = [
-    createConfig(env, argv, 'var')
-  ];
+  const configs = [createConfig(env, argv, 'var')];
   if (argv.mode === 'production') {
     configs.push(createConfig(env, argv, 'commonjs2'));
   }
@@ -108,4 +106,4 @@ function createConfig(env, argv, target) {
       modules: [path.resolve(__dirname, 'src'), 'node_modules']
     }
   };
-};
+}