feat(FEC-10785): add support to remove ui element (#460)

Until now it was possible to add new component or to add and replace existing components.
There was no official way to remove an existing ui component.

Flow - KPUIComponent was separated to KPUIAddComponent and KPUIRemoveComponent
UIWrapper was added a new api - removeComponent(component: KPUIRemoveComponent): Function
getUIComponents handling was changed accordingly

flow-typed/types/ui-component.js

@@ -1,5 +1,13 @@
 // @flow
-declare type KPUIComponent = KPUIComponentOptions & {
+declare type KPUIAddComponent = KPUIComponentOptions & {
   get: Function,
   props?: {}
 };
+
+declare type KPUIRemoveComponent = {
+  removeComponent: string,
+  presets: Array<string>,
+  area: string
+};
+
+declare type KPUIComponent = KPUIAddComponent | KPUIRemoveComponent;

src/common/ui-wrapper.js

@@ -1,5 +1,5 @@
 // @flow
-import {UIManager} from '@playkit-js/playkit-js-ui';
+import {UIManager, Components} from '@playkit-js/playkit-js-ui';
 import {Env, getLogger, Utils} from '@playkit-js/playkit-js';
 import {KalturaPlayer} from '../kaltura-player';
 
@@ -55,13 +55,30 @@ class UIWrapper {
   /**
    * Add a component dynamically
    *
-   * @param {KPUIComponent} component - The component to add
+   * @param {KPUIAddComponent} component - The component to add
    * @returns {Function} - Removal function
    */
-  addComponent(component: KPUIComponent): Function {
+  addComponent(component: KPUIAddComponent): Function {
     return this._uiManager.addComponent(component);
   }
 
+  /**
+   * Remove a component dynamically
+   *
+   * @param {KPUIRemoveComponent} component - The component to remove
+   * @returns {Function} - Undo removal function
+   */
+  removeComponent(component: KPUIRemoveComponent): Function {
+    let replaceComponent: KPUIAddComponent = {
+      label: `Remove_${component.removeComponent}`,
+      get: Components.Remove,
+      presets: component.presets,
+      area: component.area || (component: any).container, // supporting also "container" prop for backward compatibility
+      replaceComponent: component.removeComponent
+    };
+    return this._uiManager.addComponent(replaceComponent);
+  }
+
   /**
    * @param {string} name - the manager name
    * @param {Object} manager - the manager object