feat(FEC-8176): restructure player config (#117)

Today we have a very nested config object hard to reason and manage. We would like to change it to: const config = { "targetId": "player-placeholder", "logLevel": "DEBUG", "disableUserCache": true, "sources": {}, "playback": {}, "session": {}, "plugins": {}, "provider": {}, "ui": {} } The main change is moving the metadata and other source related info into the sources config, and mainly flattening the config hierarchy, which makes it more concise and easy to create and manipulate. A more full example will be: "targetId": "player-placeholder", "logLevel": "DEBUG", "disableUserCache": true, "sources": { "hls": [{}], "dash": [{}], "progressive": [{}], "duration": 741, "type": "Vod", "dvr": false, "id": "0_wifqaipd", "options": { "forceRedirectExternalStreams": false }, "poster": "", "metadata": { "name": "MPEG Dash with MultiAudio New Transcoding", "MediaType": "Movie", "WatchPermissionRule": "Parrent Allowed" } }, "playback": { "audioLanguage": "", "textLanguage": "", "useNativeTextTrack": false, "volume": 1, "startTime": 0, "playsinline": true, "preload": "none", "autoplay": false, "allowMutedAutoPlay": true, "muted": false, "options": { "html5": { "hls": {}, "dash": {} } }, "preferNative": { "hls": false, "dash": false }, "streamPriority": [ { "engine": "html5", "format": "hls" }, { "engine": "html5", "format": "dash" }, { "engine": "html5", "format": "progressive" } ] }, "session": { "id": "a957e334-c878-a0b2-54d9-3c52e2682c7f:68ee462c-f43a-9b5d-3079-8d8402d51a24", "partnerId": 1091, "ks": "OTAwOGUyMmQwY2JmYzI3NWZiODM3MzgzY2ZkNjNkZWVjZGI4MTdhYXwxMDkxOzEwOTE7MTUyNTE3NDI4NjswOzE1MjUwODc4ODYuOTA0MTswO3ZpZXc6Kix3aWRnZXQ6MTs7" }, "plugins": {}, "provider": {}, "ui": {} Change will be backward compatible and will mainly be managed in the kaltura-player layer which will make sure each component will be getting its relevant data.
kaltura · May 6, 2018 · 3f89ef3 · 3f89ef3
1 parent 0431297
commit 3f89ef3
Show file tree

Hide file tree

Showing 36 changed files with 889 additions and 305 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -21,7 +21,8 @@
     "sinon": true,
     "__VERSION__": true,
     "__NAME__": true,
-    "__PACKAGE_URL__": true
+    "__PACKAGE_URL__": true,
+    "__CONFIG_DOCS_URL__": true
   },
   "rules": {
     "mocha-no-only/mocha-no-only": "off",

diff --git a/.flowconfig b/.flowconfig
@@ -20,5 +20,5 @@ module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-
 module.name_mapper='playkit-js-providers' -> 'playkit-js-providers/dist/playkit-ott-provider'
 module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ovp/player-defaults'
 module.name_mapper='player-defaults' -> '<PROJECT_ROOT>/src/ott/player-defaults'
-module.name_mapper='poster-and-thumbs' -> '<PROJECT_ROOT>/src/ovp/poster-and-thumbs'
-module.name_mapper='poster-and-thumbs' -> '<PROJECT_ROOT>/src/ott/poster-and-thumbs'
+module.name_mapper='poster' -> '<PROJECT_ROOT>/src/ovp/poster'
+module.name_mapper='poster' -> '<PROJECT_ROOT>/src/ott/poster'
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -8,7 +8,7 @@ var config = {
 var player = KalturaPlayer.setup(config);
 ```
 
-#### Configuration Structure  
+#### Configuration Structure
 
 The configuration uses the following structure:
 
@@ -17,7 +17,10 @@ The configuration uses the following structure:
   targetId: string,
   logLevel: string,
   disableUserCache: boolean,
-  player: PKPlayerOptionsObject,
+  playback: PKPlaybackConfigObject,
+  sources: PKSourcesConfigObject,
+  plugins: PKPluginsConfigObject,
+  session: PKSessionConfigObject,
   provider: ProviderOptionsObject,
   ui: UIOptionsObject
 }
@@ -33,27 +36,36 @@ The configuration uses the following structure:
 >##### Default: `"ERROR"`
 >##### Description: Defines the player log level.
 >Possible values: `"DEBUG", "INFO", "TIME", "WARN", "ERROR", "OFF"`
-## 
+##
 >### config.disableUserCache
 >##### Type: `boolean`
 >##### Default: `false`
 >##### Description: Indicates whether to stop using the saved user preferences.
 <br>More on user preferences in the player can be found [here](./user-preferences.md).
-## 
->### config.player
->##### Type: `PKPlayerOptionsObject`
->##### Description: Defines the player configuration.
->Full configuration documentation for the config.player can be found [here](https://github.com/kaltura/playkit-js/blob/master/docs/configuration.md). 
+##
+>### config.playback
+>##### Type: `PKPlaybackConfigObject`
+>##### Description: Defines the playback configuration.
+>### config.sources
+>##### Type: `PKSourcesConfigObject`
+>##### Description: Defines the sources configuration.
+>### config.plugins
+>##### Type: `PKPluginsConfigObject`
+>##### Description: Defines the plugins configuration.
+>### config.session
+>##### Type: `PKSessionConfigObject`
+>##### Description: Defines the session configuration.
+>Full configuration documentation for the `playback`,`sources`,`plugins`,`session` can be found [here](https://github.com/kaltura/playkit-js/blob/master/docs/configuration.md).
 ##
 >### config.provider
 >##### Type: `ProviderOptionsObject`
 >##### Description: Defines the provider configuration.
->Full configuration documentation for the config.provider can be found [here](https://github.com/kaltura/playkit-js-providers/blob/master/docs/configuration.md). 
+>Full configuration documentation for the config.provider can be found [here](https://github.com/kaltura/playkit-js-providers/blob/master/docs/configuration.md).
 ##
 >### config.ui
 >##### Type: `UIOptionsObject`
 >##### Description: Defines the user interface (UI) configuration.
->Full configuration documentation for the config.ui can be found [here](https://github.com/kaltura/playkit-js-ui/blob/master/docs/configuration.md). 
+>Full configuration documentation for the config.ui can be found [here](https://github.com/kaltura/playkit-js-ui/blob/master/docs/configuration.md).
 
 ## Configuration Priority
 In the player setup flow, the configuration described above (partially or in full) can be provided by a number of different sources. Each source has a priority, meaning has a greater or less impact on how the player is configured.
@@ -62,8 +74,8 @@ Available sources include:
 
 * **Application** - This is the application that embeds the player and can configures the player inline upon instantiation.
 * **Server** - A partner configuration that is saved on the server. The partner can use this configuration when configuring the player by suppling the `uiConfId` value.
-* **Local Storage (Browser)** - This is the user preferences configuration, which is saved in the local storage of the browser. 
-* **Default Player Configuration** - The default player configuration is defined internally by the player. 
+* **Local Storage (Browser)** - This is the user preferences configuration, which is saved in the local storage of the browser.
+* **Default Player Configuration** - The default player configuration is defined internally by the player.
 
 When the player builds its runtime configuration, it will need to how to built the configuration correctly according to the priority of each configuration, which is as follows (#1 is highest; #4 is lowest):
 

diff --git a/docs/embed-types.md b/docs/embed-types.md
@@ -1,8 +1,8 @@
 # Embed Code Types
 
-When using embed codes, you can select from one of three options: Auto Embed, Dynamic Embed and Iframe Embed. You may want to use different embed code types in different situations, according to the explanations below. 
+When using embed codes, you can select from one of three options: Auto Embed, Dynamic Embed and Iframe Embed. You may want to use different embed code types in different situations, according to the explanations below.
 
-## Auto Embed  
+## Auto Embed
 
 Auto embed is the recommended embed code for the Kaltura Player. It uses precise code and is good for getting a player or widget onto the page quickly and easily without any runtime customizations.<br>
 
@@ -11,10 +11,10 @@ Auto embed is optimized for packing a lots of resources into the initial request
 
 ```html
 <div id="{TARGET_ID}" style="width: 640px;height: 360px"></div>
-<script type="text/javascript" src='https://cdnapisec.kaltura.com/p/{PARTNER_ID}/embedPlaykitJs/uiconf_id/{UICONF_ID}?autoembed=true&targetId={TARGET_ID}&entry_id={ENTRY_ID}&config[player]={"playback":{"autoplay":true}}'></script>
+<script type="text/javascript" src='https://cdnapisec.kaltura.com/p/{PARTNER_ID}/embedPlaykitJs/uiconf_id/{UICONF_ID}?autoembed=true&targetId={TARGET_ID}&entry_id={ENTRY_ID}&config[playback]={"autoplay":true}'></script>
 ```
 
-## Dynamic Embed  
+## Dynamic Embed
 
 Dynamic embed is recommended for cases where you want to control runtime configuration dynamically and/or have more control over the embed call.<br>
 
@@ -31,11 +31,9 @@ Basic dynamic embed codes look like this:
           partnerId: {PARTNER_ID},
           uiConfId: {UICONF_ID}
         },
-        player: {
-          playback:{
-            autoplay: true
+        playback: {
+          autoplay: true
           }
-        }
       });
       kalturaPlayer.loadMedia({entryId: '{ENTRY_ID}'});
     } catch (e) {
@@ -44,14 +42,14 @@ Basic dynamic embed codes look like this:
   </script>
 ```
 
-## IFrame Embed  
+## IFrame Embed
 
 The iframe embed is good for sites that don't allow third-party JavaScript to be embedded in their pages. This makes the iFrame embed a better fit for sites that have stringent page security requirements.<br>
 
 Note that if you use the iframe only embed mode, the page won't be able to access the player API:
 
 ```html
-<iframe type="text/javascript" src='https://cdnapisec.kaltura.com/p/{PARTNER_ID}/embedPlaykitJs/uiconf_id/{UICONF_ID}?iframeembed=true&entry_id={ENTRY_ID}&config[player]={"playback":{"autoplay":true}}'
+<iframe type="text/javascript" src='https://cdnapisec.kaltura.com/p/{PARTNER_ID}/embedPlaykitJs/uiconf_id/{UICONF_ID}?iframeembed=true&entry_id={ENTRY_ID}&config[playback]={"autoplay":true}'
    style="width: 640px;height: 360px" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0">
 </iframe>
 ```

diff --git a/docs/how-to-build-a-plugin.md b/docs/how-to-build-a-plugin.md
@@ -107,7 +107,7 @@ Returns: ```string``` - The plugin name.
 
 Returns: ```void``` - Dispatches an event from the player.
 #
-### Methods to Implement  
+### Methods to Implement
 
 > #### ```(static) isValid(player)```
 
@@ -160,7 +160,7 @@ Now, lets take a look at the `registerPlugin` API.
 
 
 
-# Writing a Basic Plugin  
+# Writing a Basic Plugin
 
 In this section, we'll learn how to write a simple plugin, one that doesn't require any installation or setup steps except for a player script in hand (remotely or locally).
 
@@ -265,9 +265,9 @@ class MyPlugin extends KalturaPlayer.core.BasePlugin {
   constructor(name, player, config) {
     super(name, player, config);
   }
-  
+
   destroy() {}
-  
+
   reset() {}
 }
 ```
@@ -385,11 +385,9 @@ All that's left now is to verify that the player activates the plugin during run
 1 . Include the new plugin name and plugin configuration in the player configuration. For example:
 ```js
 var config = {
-    player: {
-        plugins: {
-            myPlugin: {
-                myValue: 10
-            }
+    plugins: {
+        myPlugin: {
+            myValue: 10
         }
     }
 };
@@ -409,11 +407,9 @@ var config = {
     provider: {
         partnerId: "YOUR_PARTNER_ID"
     },
-    player: {
-        plugins: {
-            myPlugin: {
-                myValue: 10
-            }
+    plugins: {
+        myPlugin: {
+            myValue: 10
         }
     }
 };
@@ -447,11 +443,9 @@ var config = {
     provider: {
         partnerId: "YOUR_PARTNER_ID"
     },
-    player: {
-        plugins: {
-            myPlugin: {
-                myValue: 10
-            }
+    plugins: {
+        myPlugin: {
+            myValue: 10
         }
     }
 };

diff --git a/docs/player-setup.md b/docs/player-setup.md
@@ -12,7 +12,10 @@ Player setup requires the following steps to create a player instance:
 ```js
 var config = {
   targetId: "player-container",
-  player: { ... }, // player configuration
+  playback: { ... }, // playback configuration
+  sources: { ... }, // sources configuration
+  plugins: { ... }, // plugins configuration
+  session: { ... }, // session configuration
   provider: { // provider configuration
     ...
     partnerId: YOUR_PARTNER_ID
@@ -22,7 +25,7 @@ var config = {
 };
 ```
 
-The following sections are examples of common (and important) configurations for the player setup. 
+The following sections are examples of common (and important) configurations for the player setup.
 
 #### Example: Using a Kaltura Session (KS)
 If you need to use a KS for your media requests, configure it inside your provider configuration:
@@ -37,7 +40,7 @@ var config = {
   }
   ...
 };
-``` 
+```
 See this [article](https://vpaas.kaltura.com/documentation/VPaaS-API-Getting-Started/how-to-create-kaltura-session.html) to learn more about how to create a KS.
 #### Example: Using Server Configuration
 If you want to use a server configuration, you'll need to provide the `uiConfId` in your provider configuration:
@@ -52,7 +55,7 @@ var config = {
   }
   ...
 };
-``` 
+```
 
 #### Example: Using an Environment
 If you want to refer to a specific backend URL, you can specify it in your provider configuration:
@@ -69,12 +72,12 @@ var config = {
   }
   ...
 };
-``` 
-> For full configuration details see [this]() document. 
+```
+> For full configuration details see [this]() document.
 
 
 ### Step 4 - Set Up the Player
-To get your player instance, use the `setup` factory method and pass it your player configuration: 
+To get your player instance, use the `setup` factory method and pass it your player configuration:
 ```js
 var player = KalturaPlayer.setup(config);
 ```

diff --git a/flow-typed/types/kaltura-player-options.js b/flow-typed/types/kaltura-player-options.js
@@ -1,19 +1,33 @@
 // @flow
+declare type KalturaPlayerOptionsObject = {
+  targetId: string,
+  logLevel?: string,
+  disableUserCache?: boolean,
+  playback?: PKPlaybackConfigObject,
+  sources?: PKSourcesConfigObject,
+  plugins?: PKPluginsConfigObject,
+  session?: PKSessionConfigObject,
+  provider: ProviderOptionsObject,
+  ui: UIOptionsObject
+};
+
 declare type PartialKalturaPlayerOptionsObject = {
   targetId: string,
   logLevel?: string,
   disableUserCache?: boolean,
-  player?: PKPlayerOptionsObject,
+  playback?: PKPlaybackConfigObject,
+  sources?: PKSourcesConfigObject,
+  plugins?: PKPluginsConfigObject,
+  session?: PKSessionConfigObject,
   provider: ProviderOptionsObject,
   ui?: UIOptionsObject
 };
 
-declare type KalturaPlayerOptionsObject = {
+declare type LegacyPartialKalturaPlayerOptionsObject = {
   targetId: string,
   logLevel?: string,
   disableUserCache?: boolean,
-  player: PKPlayerOptionsObject,
+  player?: PKPlayerOptionsObject,
   provider: ProviderOptionsObject,
-  ui: UIOptionsObject
+  ui?: UIOptionsObject
 };
-
diff --git a/package.json b/package.json
@@ -81,14 +81,14 @@
     "babel-polyfill": "^6.23.0",
     "hls.js": "^0.9.1",
     "js-logger": "^1.3.0",
-    "playkit-js": "https://github.com/kaltura/playkit-js.git#v0.26.0",
-    "playkit-js-dash": "https://github.com/kaltura/playkit-js-dash.git#v1.6.0",
-    "playkit-js-hls": "https://github.com/kaltura/playkit-js-hls.git#v1.6.0",
+    "playkit-js": "https://github.com/kaltura/playkit-js.git#v0.27.0",
+    "playkit-js-dash": "https://github.com/kaltura/playkit-js-dash.git#v1.6.1",
+    "playkit-js-hls": "https://github.com/kaltura/playkit-js-hls.git#v1.6.1",
     "playkit-js-ima": "https://github.com/kaltura/playkit-js-ima.git#v0.5.5",
     "playkit-js-kanalytics": "https://github.com/kaltura/playkit-js-kanalytics.git#v0.8.3",
     "playkit-js-ott-analytics": "https://github.com/kaltura/playkit-js-ott-analytics.git#v0.1.1",
-    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.2.0",
-    "playkit-js-ui": "https://github.com/kaltura/playkit-js-ui.git#v0.22.4",
+    "playkit-js-providers": "https://github.com/kaltura/playkit-js-providers.git#v2.3.0",
+    "playkit-js-ui": "https://github.com/kaltura/playkit-js-ui.git#v0.23.0",
     "playkit-js-youbora": "https://github.com/kaltura/playkit-js-youbora.git#v0.3.3",
     "shaka-player": "2.3.3"
   },

diff --git a/samples/ovp/all-plugins.html b/samples/ovp/all-plugins.html
@@ -19,14 +19,12 @@
         serviceUrl: "http://qa-apache-php7.dev.kaltura.com/api_v3"
       }
     },
-    player: {
-      plugins: {
-        kanalytics: {
-          serviceUrl: "http://qa-apache-php7.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%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
-        }
+    plugins: {
+      kanalytics: {
+        serviceUrl: "http://qa-apache-php7.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%3Dpremidpost&cmsid=496&vid=short_onecue&correlator='
       }
     }
   };