fix(FEC-10776): set the plugins event registration after kaltura play…

…er internal events (#383)

Issue: plugins register before UI/provider and internal handler in Kaltura player which could cause incorrect behavior in the player after plugins handler.
Solution: configure the plugins after internal logic - seems we would like to handled last.
UI components that come from plugins adding by addComponent API so external UI components of Kaltura player will update via config.
For example - when the plugin registers on the contractor to error and makes a reset it'll handle the event before UI/provider and Kaltura player handle it and cause the error overlay to appear on UI, plugin call to reset didn't clear this state after it changed, it cleared it before UI changed it and does nothing.

src/common/ui-wrapper.js

@@ -16,7 +16,6 @@ class UIWrapper {
 
   constructor(player: KalturaPlayer, options: KPOptionsObject) {
     const config: KPUIOptionsObject = options.ui;
-    config.uiComponents = [...(player.uiComponents || []), ...(config.uiComponents || [])];
     if (config.disable) {
       this._disabled = true;
       appendPlayerViewToTargetContainer(config.targetId, player.getView());

src/kaltura-player.js

@@ -47,7 +47,6 @@ class KalturaPlayer extends FakeEventTarget {
   _remotePlayer: ?BaseRemotePlayer = null;
   _pluginManager: PluginManager = new PluginManager();
   _pluginsConfig: KPPluginsConfigObject = {};
-  _pluginsUiComponents: Array<KPUIComponent> = [];
   _reset: boolean = true;
   _firstPlay: boolean = true;
   _sourceSelected: boolean = false;
@@ -63,7 +62,6 @@ class KalturaPlayer extends FakeEventTarget {
     delete noSourcesOptions.plugins;
     this._localPlayer = loadPlayer(noSourcesOptions);
     this._controllerProvider = new ControllerProvider(this._pluginManager);
-    this.configure({plugins});
     this._uiWrapper = new UIWrapper(this, Utils.Object.mergeDeep(options, {ui: {logger: {getLogger, LogLevel}}}));
     this._provider = new Provider(
       Utils.Object.mergeDeep(options.provider, {
@@ -78,6 +76,7 @@ class KalturaPlayer extends FakeEventTarget {
     Object.values(CoreEventType).forEach(coreEvent => this._eventManager.listen(this._localPlayer, coreEvent, e => this.dispatchEvent(e)));
     this._addBindings();
     this._playlistManager.configure(options.playlist);
+    this.configure({plugins});
     this._localPlayer.configure({sources: sources || {}});
   }
 
@@ -553,10 +552,6 @@ class KalturaPlayer extends FakeEventTarget {
     return this._pluginManager.getAll();
   }
 
-  get uiComponents(): Array<KPUIComponent> {
-    return [...this._pluginsUiComponents];
-  }
-
   get provider(): Provider {
     return this._provider;
   }
@@ -733,8 +728,7 @@ class KalturaPlayer extends FakeEventTarget {
         }
       }
     });
-    this._pluginsUiComponents = uiComponents;
-
+    uiComponents.forEach(component => this._uiWrapper.addComponent(component));
     // First in the middleware chain is the plugin readiness to insure plugins are ready before load / play
     if (!this._pluginReadinessMiddleware) {
       this._pluginReadinessMiddleware = new PluginReadinessMiddleware(plugins);