fix(FEV-1204): remove Settings only when dual is loaded (#56)

**the issue:** we are always removing Settings component. the Settings button shouldn't be removed in a case where there is only 1 video stream (and dual is not actually in use). **solution:** remove Settings button when BE is retrieving secondary entry id and when using slides. Solves [FEV-1204](https://kaltura.atlassian.net/browse/FEV-1204)
kaltura · May 25, 2022 · efcd2e9 · efcd2e9
1 parent d965d65
commit efcd2e9
Showing 1 changed file with 33 additions and 15 deletions.
diff --git a/src/dualscreen.tsx b/src/dualscreen.tsx
@@ -20,7 +20,7 @@ const {EventType} = core;
 const PRESETS = ['Playback', 'Live', 'Ads'];
 // @ts-ignore
 export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngineDecoratorProvider {
-  public secondaryKalturaPlayer: KalturaPlayerTypes.Player;
+  public secondaryKalturaPlayer?: KalturaPlayerTypes.Player | any;
   private _player: KalturaPlayerTypes.Player;
   private _layout: Layout;
   private _externalLayout: ExternalLayout | null = null;
@@ -35,6 +35,7 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
   private _secondaryPlayerType = PlayerType.VIDEO;
   private _pipPortraitMode = false;
   private _originalVideoElementParent?: HTMLElement;
+  private _undoRemoveSettings?: Function | null = null;
 
   /**
    * The default configuration of the plugin.
@@ -56,10 +57,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
   constructor(name: string, player: any, config: DualScreenConfig) {
     super(name, player, config);
     this._player = player;
-    this.secondaryKalturaPlayer = this._createSecondaryPlayer();
     this._imagePlayer = new ImagePlayer(this._onActiveSlideChanged, this.config.slidesPreloadEnabled);
     this._readyPromise = this._makeReadyPromise();
-    this._addBindings();
     this._layout = Layout.Hidden;
     this._pipPosition = this.config.position;
   }
@@ -72,18 +71,21 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
     return this._readyPromise;
   }
 
-  getUIComponents() {
-    return [
-      {
-        presets: PRESETS,
-        container: ReservedPresetAreas.BottomBarRightControls,
-        get: KalturaPlayer.ui.components.Remove,
-        replaceComponent: KalturaPlayer.ui.components.Settings.displayName
-      }
-    ];
+  private _removeSettingsComponent = () => {
+    if (!this._undoRemoveSettings) {
+      const removeSettings =
+          {
+            presets: PRESETS,
+            container: ReservedPresetAreas.BottomBarRightControls,
+            get: KalturaPlayer.ui.components.Remove,
+            replaceComponent: KalturaPlayer.ui.components.Settings.displayName
+          }
+      this._undoRemoveSettings = this._player.ui.addComponent(removeSettings);
+    }
   }
 
   loadMedia(): void {
+    this._addBindings();
     const kalturaCuePointService: any = this._player.getService('kalturaCuepoints');
     this._getSecondaryMedia();
     if (kalturaCuePointService) {
@@ -98,6 +100,21 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
     this._imagePlayer.reset();
     this._imageSyncManager?.reset();
     this._readyPromise = this._makeReadyPromise();
+    if (this._undoRemoveSettings) {
+      this._undoRemoveSettings();
+      this._undoRemoveSettings = null;
+    }
+    this.secondaryKalturaPlayer?.destroy();
+    this.secondaryKalturaPlayer = null;
+    this._removeSecondaryPlaceholder();
+    this.eventManager.removeAll();
+  }
+
+  private _removeSecondaryPlaceholder() {
+    const secondaryPlaceholderEl = document.getElementById('secondaryPlaceholder');
+    if (secondaryPlaceholderEl) {
+      document.body.removeChild(secondaryPlaceholderEl);
+    }
   }
 
   private _makeReadyPromise = () => {
@@ -107,9 +124,6 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
   };
 
   private _addBindings() {
-    this.eventManager.listen(this.player, this.player.Event.RESIZE, (e: any) => {
-      this.logger.debug(e);
-    });
     this.eventManager.listen(this.player, this.player.Event.PLAYBACK_ENDED, () => {
       this._playbackEnded = true;
     });
@@ -496,6 +510,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
       // update PIP component
       this._setMode();
     }
+
+    this._removeSettingsComponent();
   };
 
   private _getThumbs(kalturaCuePointService: any) {
@@ -549,6 +565,8 @@ export class DualScreen extends KalturaPlayer.core.BasePlugin implements IEngine
           if (entryId) {
             // subscribe on secondary player readiness
             this._secondaryPlayerType = PlayerType.VIDEO;
+            this._removeSettingsComponent();
+            this.secondaryKalturaPlayer = this._createSecondaryPlayer();
             this.eventManager.listenOnce(this.secondaryKalturaPlayer, EventType.CHANGE_SOURCE_ENDED, () => {
               this._resolveReadyPromise();
             });