FEC-8696 ui components

flow-typed/interfaces/preset-components-provider.js

@@ -0,0 +1,5 @@
+// @flow
+
+declare interface IUIComponentsProvider {
+  getUIComponents(): Array<PKUIComponent>;
+}

flow-typed/types/ui-component.js

@@ -0,0 +1,11 @@
+
+type PKUIComponent = {
+  label: string,
+  presets: Array<string>,
+  container: string,
+  get: Function,
+  props: {},
+  beforeComponent?: string,
+  afterComponent?: string,
+  replaceComponent?: string
+};

src/player.js

@@ -391,6 +391,12 @@ export default class Player extends FakeEventTarget {
    * @private
    */
   _resizeWatcher: ResizeWatcher;
+  /**
+   * Holds preset component factories
+   * @type {?PKUIComponent}
+   * @private
+   */
+  _uiComponents: Array<PKUIComponent>;
 
   /**
    * @param {Object} config - The configuration for the player instance.
@@ -404,6 +410,7 @@ export default class Player extends FakeEventTarget {
     Player.runCapabilities();
     this._env = Env;
     this._tracks = [];
+    this._uiComponents = [];
     this._firstPlay = true;
     this._repositionCuesTimeout = false;
     this._loadingMedia = false;
@@ -936,6 +943,10 @@ export default class Player extends FakeEventTarget {
     return Utils.Object.mergeDeep({}, this._config);
   }
 
+  get uiComponents(): PKUIComponent[] {
+    return [...this._uiComponents];
+  }
+
   /**
    * Set the _loadingMedia flag to inform the player that a load media request has sent.
    * @param {boolean} loading - Whether a load media request has sent.
@@ -1489,6 +1500,7 @@ export default class Player extends FakeEventTarget {
   _configureOrLoadPlugins(plugins: Object = {}): void {
     if (plugins) {
       const middlewares = [];
+      const uiComponents = [];
       Object.keys(plugins).forEach(name => {
         // If the plugin is already exists in the registry we are updating his config
         const plugin = this._pluginManager.get(name);
@@ -1511,12 +1523,17 @@ export default class Player extends FakeEventTarget {
                 // push the bumper middleware to the end, to play the bumper right before the content
                 plugin.name === 'bumper' ? middlewares.push(plugin.getMiddlewareImpl()) : middlewares.unshift(plugin.getMiddlewareImpl());
               }
+
+              if (typeof plugin.getUIComponents === 'function') {
+                uiComponents.push(...(plugin.getUIComponents() || []));
+              }
             }
           } else {
             delete this._config.plugins[name];
           }
         }
       });
+      this._uiComponents = uiComponents;
       middlewares.forEach(middleware => this._playbackMiddleware.use(middleware));
     }
   }

src/playkit.js

@@ -61,6 +61,8 @@ export {Track, VideoTrack, AudioTrack, TextTrack, TextStyle};
 // Export utils library
 export {Utils};
 
+export {Utils as utils};
+
 // Export Error class
 export {Error};