feat: decorates the player with kaltura-player to extend api

package.json

@@ -81,12 +81,13 @@
     "babel-polyfill": "^6.23.0",
     "hls.js": "^0.7.9",
     "js-logger": "^1.3.0",
-    "playkit-js": "git+https://github.com/kaltura/playkit-js.git#develop",
-    "playkit-js-dash": "git+https://github.com/kaltura/playkit-js-dash.git#develop",
-    "playkit-js-hls": "git+https://github.com/kaltura/playkit-js-hls.git#develop",
-    "playkit-js-kanalytics": "git+https://github.com/kaltura/playkit-js-kanalytics.git#develop",
-    "playkit-js-providers": "git+https://github.com/kaltura/playkit-js-providers.git#develop",
-    "playkit-js-ui": "git+https://github.com/kaltura/playkit-js-ui.git#develop",
+    "playkit-js": "git+https://github.com/kaltura/playkit-js.git#v0.3.0",
+    "playkit-js-dash": "git+https://github.com/kaltura/playkit-js-dash.git#v1.0.1",
+    "playkit-js-hls": "git+https://github.com/kaltura/playkit-js-hls.git#v1.0.1",
+    "playkit-js-kanalytics": "git+https://github.com/kaltura/playkit-js-kanalytics.git#v0.1.1",
+    "playkit-js-providers": "git+https://github.com/kaltura/playkit-js-providers.git#v1.0.0",
+    "playkit-js-ui": "git+https://github.com/kaltura/playkit-js-ui.git#v0.1.0",
+    "playkit-js-ima": "git+https://github.com/kaltura/playkit-js-ui.git#v0.0.2",
     "shaka-player": "latest"
   },
   "repository": {

src/index.html

@@ -27,22 +27,29 @@
 <script>
   var config = {
     partnerId: 1091,
-    entryId: '0_wifqaipd',
     env: {
       baseUrl: "http://qa-apache-testing-ubu-01.dev.kaltura.com/",
       beUrl: "http://qa-apache-testing-ubu-01.dev.kaltura.com/api_v3"
     },
     plugins: {
       kanalytics: {
         beUrl: "http://qa-apache-testing-ubu-01.dev.kaltura.com/api_v3"
+      },
+      ima: {
+        adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator='
       }
     }
   };
-  KalturaPlayer.setup('player-placeholder', config)
-    .then(function (response) {
-      window.player = response.player;
-      window.provider = response.provider;
+
+  try {
+    var kalturaPlayer = KalturaPlayer.setup('player-placeholder', config);
+    kalturaPlayer.loadMedia('0_wifqaipd').then(function () {
+      kalturaPlayer.play();
     });
+  } catch (e) {
+    console.error(e.message)
+  }
+
 </script>
 </body>
 </html>

src/index.js

@@ -1,7 +1,7 @@
 // @flow
 import 'babel-polyfill' // Important! must be first import to support older browsers compatibility
-import PolyfillManager from './polyfill/polyfill-manager'
-import './polyfill/all'
+import PolyfillManager from './polyfills/polyfill-manager'
+import './polyfills/all'
 
 PolyfillManager.installAll();
 
@@ -22,7 +22,7 @@ import 'playkit-js-dash'
 import 'playkit-js-kanalytics'
 
 // Import setup method
-import setup from './setup'
+import {setup} from './setup'
 
 export {Playkit, OvpProvider, PlaykitUI, setup};
 

src/kaltura-player.js

@@ -0,0 +1,36 @@
+// @flow
+import {Utils} from 'playkit-js'
+import PlaykitUI from 'playkit-js-ui'
+import OvpProvider from 'playkit-js-providers/dist/ovpProvider'
+import LoggerFactory from './utils/logger'
+import {addKalturaParams} from './utils/kaltura-params'
+import './assets/style.css'
+
+export default class KalturaPlayer {
+  _player: Player;
+  _provider: OvpProvider;
+  _uiManager: PlaykitUI;
+  _logger: any;
+
+  constructor(player: Player, targetId: string, config: Object) {
+    this._player = player;
+    this._logger = LoggerFactory.getLogger('KalturaPlayer' + Utils.Generator.uniqueId(5));
+    this._uiManager = new PlaykitUI(this._player, {targetId: targetId});
+    this._provider = new OvpProvider(config.partnerId, config.ks, config.env);
+    this._uiManager.buildDefaultUI();
+    return {
+      loadMedia: this.loadMedia.bind(this)
+    }
+  }
+
+  loadMedia(entryId: string, uiConfId: ?number): Promise<*> {
+    this._logger.debug('loadMedia', {entryId: entryId, uiConfId: uiConfId});
+    return this._provider.getConfig(entryId, uiConfId)
+      .then((data) => {
+        let playerConfig = {};
+        addKalturaParams(data.sources, this._player);
+        Utils.Object.mergeDeep(playerConfig, this._player.config, data);
+        this._player.configure(playerConfig);
+      });
+  }
+}

src/polyfill/performance-now.js → src/polyfills/performance-now.js

@@ -1,3 +1,4 @@
+// @flow
 import PolyfillManager from './polyfill-manager'
 import LoggerFactory from '../utils/logger'
 

src/polyfill/polyfill-manager.js → src/polyfills/polyfill-manager.js

@@ -1,3 +1,4 @@
+// @flow
 import LoggerFactory from '../utils/logger'
 
 export default class PolyfillManager {

src/setup.js

@@ -1,118 +1,22 @@
-//@flow
-import {loadPlayer, Utils} from 'playkit-js'
-import PlaykitUI from 'playkit-js-ui'
-import OvpProvider from 'playkit-js-providers/dist/ovpProvider'
-import {addKalturaParams} from './kaltura-params'
-import LoggerFactory from './utils/logger'
-import './assets/style.css'
+// @flow
+import {loadPlayer} from 'playkit-js'
+import KalturaPlayer from './kaltura-player'
+import {
+  extractPlayerConfig,
+  extractProvidersConfig,
+  createKalturaPlayerContainer,
+  validateTargetId, validateProvidersConfig
+} from "./utils/setup-helpers"
 
-const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
-const logger = LoggerFactory.getLogger('Setup');
-
-/**
- * Setup the kaltura player.
- * @param {string} targetId - The target id of the dom element which we append the player to.
- * @param {Object} userConfig - Optional fully user config which should include also partnerId and entryId.
- * @return {Promise<*>} - The response promise.
- */
-export default function setup(targetId: string, userConfig: ?Object): Promise<*> {
-  let response = {};
-  let playerConfig = extractPlayerConfig(userConfig);
-  logger.debug('Extract player config', playerConfig);
-  let providerConfig = extractProviderConfig(userConfig);
-  logger.debug('Extract provider config', providerConfig);
-  return new Promise((resolve, reject) => {
-    // Create player container
-    let containerId = createKalturaPlayerContainer(targetId);
-    // Create player and handle session id
-    response.player = loadPlayer(containerId, playerConfig);
-    response.player.addEventListener(response.player.Event.SOURCE_SELECTED, (event) => {
-      logger.debug('Add Kaltura params');
-      addKalturaParams(event.payload.selectedSource, response.player);
-    });
-    // Prepare config for the ui manager
-    Utils.Object.mergeDeep(playerConfig, {targetId: containerId});
-    // Build UI
-    buildUI(response.player, playerConfig);
-    // Handle provider config
-    if (providerConfig.partnerId) {
-      logger.debug('Partner id provided, creating ovp provider');
-      response.provider = new OvpProvider(providerConfig.partnerId, providerConfig.ks, providerConfig.env);
-      return response.provider.getConfig(providerConfig.entryId, providerConfig.uiConfId)
-        .then(data => {
-          Utils.Object.mergeDeep(playerConfig, data);
-          response.player.configure(playerConfig);
-          logger.debug('Finish setup, returning response', response);
-          resolve(response);
-        }).catch(error => {
-          reject(error);
-        });
-    }
-    logger.debug('Finish setup, returning response', response);
-    resolve(response);
-  });
-}
-
-/**
- * Creates the player container dom element.
- * @param {string} targetId - The div id which the player will append to.
- * @returns {string} - The player container id.
- */
-function createKalturaPlayerContainer(targetId: string): string {
-  let el = document.createElement("div");
-  el.id = Utils.Generator.uniqueId(5);
-  el.className = CONTAINER_CLASS_NAME;
-  el.setAttribute('tabindex', '-1');
-  let parentNode = document.getElementById(targetId);
-  if (parentNode && el) {
-    parentNode.appendChild(el);
-  }
-  return el.id;
-}
-
-/**
- * Builds the default kaltura ui of the player.
- * @param {Player} player - The kaltura player.
- * @param {Object} config - The ui configuration.
- * @returns {void}
- */
-function buildUI(player: Player, config: Object): void {
-  let playerUIManager = new PlaykitUI(player, config);
-  playerUIManager.buildDefaultUI();
-}
-
-/**
- * Extracts the player configuration.
- * @param {Object} config - The fully user configuration.
- * @returns {Object} - The player configuration.
- */
-function extractPlayerConfig(config: ?Object): Object {
-  let playerConfig = {};
-  Utils.Object.mergeDeep(playerConfig, config);
-  delete playerConfig.partnerId;
-  delete playerConfig.entryId;
-  delete playerConfig.uiConfId;
-  delete playerConfig.env;
-  delete playerConfig.ks;
-  return playerConfig;
-}
-
-/**
- * Extracts the provider configuration.
- * @param {Object} config - The fully user configuration.
- * @returns {Object} - The provider configuration.
- */
-function extractProviderConfig(config: ?Object): Object {
-  let providerConfig = {};
-  if (config) {
-    providerConfig.partnerId = config.partnerId;
-    providerConfig.entryId = config.entryId;
-    providerConfig.uiConfId = config.uiConfId;
-    providerConfig.env = config.env;
-    providerConfig.ks = config.ks;
-  }
-  return providerConfig;
+function setup(targetId: string, options: Object): KalturaPlayer {
+  validateTargetId(targetId);
+  validateProvidersConfig(options);
+  let playerConfig = extractPlayerConfig(options);
+  let providersConfig = extractProvidersConfig(options);
+  let containerId = createKalturaPlayerContainer(targetId);
+  let player = loadPlayer(containerId, playerConfig);
+  let kalturaPlayer = new KalturaPlayer(player, containerId, providersConfig);
+  return Object.assign(player, kalturaPlayer);
 }
 
-// Export those functions for automation testing
-export {extractProviderConfig, extractPlayerConfig, createKalturaPlayerContainer}
+export {setup};

src/kaltura-params.js → src/utils/kaltura-params.js

@@ -85,20 +85,22 @@ function addClientTag(source: Object) {
 }
 
 /**
- * @param {Array<Object>} sources - player sources
+ * @param {Object} sources - player sources
  * @param {Player} player - player
  * @return {void}
  * @private
  */
-function addKalturaParams(sources: Array<Object> = [], player: Player): void {
+function addKalturaParams(sources: Object, player: Player): void {
   handleSessionId(player);
-  for (let source of sources) {
-    if (typeof source.url === 'string' && source.url.toLowerCase().indexOf(PLAY_MANIFEST) > -1) {
-      updateSessionIdInUrl(source, player.config.session.id);
-      addReferrer(source);
-      addClientTag(source);
-    }
-  }
+  Object.keys(sources).forEach((key) => {
+    sources[key].forEach((source) => {
+      if (typeof source.url === 'string' && source.url.toLowerCase().indexOf(PLAY_MANIFEST) > -1) {
+        updateSessionIdInUrl(source, player.config.session.id);
+        addReferrer(source);
+        addClientTag(source);
+      }
+    });
+  });
 }
 
 export {addKalturaParams, handleSessionId, updateSessionIdInUrl, addReferrer, addClientTag}

src/utils/setup-helpers.js

@@ -0,0 +1,91 @@
+// @flow
+import {Utils} from 'playkit-js'
+import {ValidationErrorType} from './validation-error'
+
+const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
+
+/**
+ * Validate the initial user input for the providers.
+ * @param {Object} config - The fully user provider configuration.
+ * @returns {void}
+ */
+function validateProvidersConfig(config: Object) {
+  if (!config) {
+    throw new Error(ValidationErrorType.INITIAL_CONFIG_REQUIRED);
+  }
+  if (!config.partnerId) {
+    throw new Error(ValidationErrorType.PARTNER_ID_REQUIRED);
+  }
+}
+
+/**
+ * Validate the initial user input for the player.
+ * @param {string} targetId - The DOM element id which the player will be append to.
+ * @returns {void}
+ */
+function validateTargetId(targetId: string) {
+  if (!targetId) {
+    throw new Error(ValidationErrorType.TARGET_ID_REQUIRED);
+  }
+  if (!document.getElementById(targetId)) {
+    throw new Error(ValidationErrorType.DOM_ELEMENT_WITH_TARGET_ID_REQUIRED + targetId);
+  }
+}
+
+/**
+ * Extracts the player configuration.
+ * @param {Object} config - The fully user configuration.
+ * @returns {Object} - The player configuration.
+ */
+function extractPlayerConfig(config: ?Object): Object {
+  let playerConfig = {};
+  Utils.Object.mergeDeep(playerConfig, config);
+  delete playerConfig.partnerId;
+  delete playerConfig.entryId;
+  delete playerConfig.uiConfId;
+  delete playerConfig.env;
+  delete playerConfig.ks;
+  return playerConfig;
+}
+
+/**
+ * Extracts the provider configuration.
+ * @param {Object} config - The fully user configuration.
+ * @returns {Object} - The provider configuration.
+ */
+function extractProvidersConfig(config: ?Object): Object {
+  let providerConfig = {};
+  if (config) {
+    providerConfig.partnerId = config.partnerId;
+    providerConfig.entryId = config.entryId;
+    providerConfig.uiConfId = config.uiConfId;
+    providerConfig.env = config.env;
+    providerConfig.ks = config.ks;
+  }
+  return providerConfig;
+}
+
+/**
+ * Creates the player container dom element.
+ * @param {string} targetId - The div id which the player will append to.
+ * @returns {string} - The player container id.
+ */
+function createKalturaPlayerContainer(targetId: string): string {
+  let el = document.createElement("div");
+  el.id = Utils.Generator.uniqueId(5);
+  el.className = CONTAINER_CLASS_NAME;
+  el.setAttribute('tabindex', '-1');
+  let parentNode = document.getElementById(targetId);
+  if (parentNode && el) {
+    parentNode.appendChild(el);
+  }
+  return el.id;
+}
+
+export {
+  extractPlayerConfig,
+  extractProvidersConfig,
+  createKalturaPlayerContainer,
+  validateTargetId,
+  validateProvidersConfig
+};

src/utils/validation-error.js

@@ -0,0 +1,9 @@
+// @flow
+const ValidationErrorType = {
+  INITIAL_CONFIG_REQUIRED: 'Must provide initial providers config',
+  PARTNER_ID_REQUIRED: 'Must provide partner id',
+  TARGET_ID_REQUIRED: 'Must provide target id',
+  DOM_ELEMENT_WITH_TARGET_ID_REQUIRED: 'Must provide DOM element with id of: '
+};
+
+export {ValidationErrorType};