feat(FEC-13686) detach API

src/services/side-panels-manager/models/item-wrapper.tsx

@@ -3,6 +3,21 @@ import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
 import { PanelItemWrapper } from '../ui/panel-item-wrapper/panel-item-wrapper.component';
 import { PanelComponentProps, SidePanelItem } from './side-panel-item';
 
+const DETACH_CONTAINER_CLASS = 'playkit-player detach-sidebar-container';
+const CLOSE_DETACH_EVENTS = ['beforeunload', 'popstate'];
+
+export interface DetachWindowOptions {
+  onAttach?: () => void;
+  top?: number;
+  left?: number;
+  width: number;
+  height: number;
+  title: string;
+  maxWidth?: number;
+  maxHeight?: number;
+  attachPlaceholder?: ComponentClass | FunctionalComponent;
+}
+
 /**
  * Panel item metadata
  * @internal
@@ -16,6 +31,8 @@ export class ItemWrapper {
   private panelItemComponentRef!: RefObject<PanelItemWrapper>;
   private removePanelComponentFn!: () => void;
   private isActive: boolean;
+  private _detachWindow: Window | null = null;
+
   constructor(item: SidePanelItem, player: KalturaPlayer) {
     this.id = ++ItemWrapper.nextId;
     this.item = item;
@@ -40,14 +57,94 @@ export class ItemWrapper {
     this.isActive = false;
   }
 
+  public detach(options: DetachWindowOptions): void {
+    const el = document.createElement('div');
+    el.style.width = '100%';
+    el.style.height = `100%`;
+    el.className = `${DETACH_CONTAINER_CLASS}-${this.id}`;
+
+    // create and set params to the new window
+    let newWindowParams = 'menubar=no,status=no,location=no,toolbar=no';
+    newWindowParams += `,width=${options?.width || 'auto'},height=${options?.height || 'auto'}`;
+    newWindowParams += `,top=${options?.top || 'auto'}, left=${options?.left || 'auto'}`;
+    this._detachWindow = window.open('', '_blank', newWindowParams);
+    this._detachWindow!.document.title = options?.title;
+    this._detachWindow?.focus();
+
+    // copy and set styles to the new window
+    const currentPageHead = document.head;
+    const newPageHead = this._detachWindow!.document.head;
+    const newPageBody = this._detachWindow!.document.body;
+    const styles = currentPageHead.querySelectorAll('style');
+    styles.forEach((style) => {
+      const newStyle = this._detachWindow!.document.createElement('style');
+      newStyle!.textContent = style.textContent;
+      newPageHead?.appendChild(newStyle!);
+    });
+    newPageBody!.style.margin = '0px';
+    newPageBody!.style.backgroundColor = 'black';
+
+    // Append the <div> element to the new window's document
+    this._detachWindow?.document.body.appendChild(el);
+
+    // handle close of new window
+    this._detachWindow!.onbeforeunload = () => {
+      options?.onAttach?.();
+      this._detachWindow = null;
+    };
+    CLOSE_DETACH_EVENTS.forEach((closeEvent) => {
+      window.addEventListener(closeEvent, this._closeDetachedWindow);
+    });
+
+    // handle resize of new window
+    if (options?.maxWidth || options?.maxHeight) {
+      this._detachWindow!.addEventListener('resize', (event) => {
+        event.preventDefault();
+        if (options?.maxWidth && this._detachWindow!.innerWidth > options.maxWidth) {
+          this._detachWindow!.resizeTo(options.maxWidth, this._detachWindow!.outerHeight);
+        }
+        if (options?.maxHeight && this._detachWindow!.innerHeight > options.maxHeight) {
+          this._detachWindow!.resizeTo(this._detachWindow!.outerWidth, options.maxHeight);
+        }
+      });
+    }
+    this.panelItemComponentRef.current!.detach(el, options?.attachPlaceholder || (() => null));
+  }
+
+  public attach = (): void => {
+    if (this.isDetached) {
+      this.panelItemComponentRef.current!.attach();
+      this._closeDetachedWindow();
+    }
+  };
+
+  public get isDetached() {
+    return Boolean(this._detachWindow);
+  }
+
+  public getDetachedRef() {
+    return this.panelItemComponentRef.current?.detachRef;
+  }
+
   public remove(): void {
     this.removePanelComponentFn();
+    this._closeDetachedWindow();
   }
 
   public update(): void {
     this.panelItemComponentRef.current!.forceUpdate();
   }
 
+  private _closeDetachedWindow = () => {
+    if (this._detachWindow && !this._detachWindow.closed) {
+      this._detachWindow?.close();
+    }
+    CLOSE_DETACH_EVENTS.forEach((closeEvent) => {
+      window.removeEventListener(closeEvent, this._closeDetachedWindow);
+    });
+    this._detachWindow = null;
+  };
+
   private injectPanelComponent(): void {
     const { label, position, panelComponent, presets } = this.item;
     const SidePanelComponent: ComponentClass<PanelComponentProps> | FunctionalComponent<PanelComponentProps> = panelComponent;

src/services/side-panels-manager/side-panels-manager.ts

@@ -1,6 +1,6 @@
 import { ui, KalturaPlayer, Logger, PlaykitUI } from '@playkit-js/kaltura-player-js';
 import { SidePanelItem } from './models/side-panel-item';
-import { ItemWrapper } from './models/item-wrapper';
+import { ItemWrapper, DetachWindowOptions } from './models/item-wrapper';
 const { SidePanelModes, SidePanelPositions, ReservedPresetNames } = ui;
 
 const COUNTER_PANELS: Record<PlaykitUI.SidePanelPosition, PlaykitUI.SidePanelPosition> = {
@@ -94,6 +94,43 @@ export class SidePanelsManager {
     return false;
   }
 
+  public isItemDetached(itemId: number): boolean {
+    const itemWrapper: ItemWrapper | undefined = this.componentsRegistry.get(itemId);
+    if (itemWrapper) {
+      return itemWrapper.isDetached;
+    }
+    this.logger.warn(`${itemId} is not registered`);
+    return false;
+  }
+  public detachItem(itemId: number, options: DetachWindowOptions): void {
+    const itemWrapper: ItemWrapper | undefined = this.componentsRegistry.get(itemId);
+    if (itemWrapper) {
+      this.deactivateItem(itemId);
+      itemWrapper.detach({
+        ...options,
+        onAttach: () => this.attachItem(itemId)
+      });
+    } else {
+      this.logger.warn(`${itemId} is not registered`);
+    }
+  }
+  public attachItem(itemId: number): void {
+    const itemWrapper: ItemWrapper | undefined = this.componentsRegistry.get(itemId);
+    if (itemWrapper) {
+      itemWrapper.attach();
+      this.activateItem(itemId);
+    } else {
+      this.logger.warn(`${itemId} is not registered`);
+    }
+  }
+  public getDetachedRef(itemId: number) {
+    if (this.isItemDetached(itemId)) {
+      const itemWrapper: ItemWrapper = this.componentsRegistry.get(itemId)!;
+      return itemWrapper.getDetachedRef();
+    }
+    return null;
+  }
+
   /**
    * Rerender (uses preact Component.forceUpdate api under the hoods) the side panel item component
    * It's just for backward compatibility you should not use it.

src/services/side-panels-manager/ui/panel-item-wrapper/panel-item-wrapper.component.tsx

@@ -1,11 +1,25 @@
-import { h, Component, ComponentChild, RefObject, cloneElement, VNode } from 'preact';
+import {
+  h,
+  Component,
+  ComponentChild,
+  RefObject,
+  cloneElement,
+  VNode,
+  Fragment,
+  ComponentClass,
+  FunctionalComponent
+} from 'preact';
 import * as styles from './panel-item-wrapper.component.scss';
 import { ui } from '@playkit-js/kaltura-player-js';
-
 const { defaultTransitionTime } = ui.style;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const { createPortal } = ui;
 
 type PanelItemWrapperState = {
   on: boolean;
+  detachRef: HTMLDivElement | null;
+  attachPlaceholder: ComponentClass | FunctionalComponent;
 };
 
 type PanelItemWrapperProps = {
@@ -20,7 +34,11 @@ export class PanelItemWrapper extends Component<PanelItemWrapperProps, PanelItem
   private switchMode: boolean;
   constructor() {
     super();
-    this.state = { on: false };
+    this.state = {
+      on: false,
+      detachRef: null,
+      attachPlaceholder: () => null
+    };
     this.switchMode = false;
   }
 
@@ -33,13 +51,33 @@ export class PanelItemWrapper extends Component<PanelItemWrapperProps, PanelItem
     this.setState({ on: false });
   }
 
+  public detach = (detachRef: HTMLDivElement, attachPlaceholder: ComponentClass | FunctionalComponent): void => {
+    this.setState({ detachRef, attachPlaceholder });
+  };
+
+  public attach = (): void => {
+    this.setState({ detachRef: null, attachPlaceholder: () => null });
+  };
+
+  public get detachRef() {
+    return this.state.detachRef;
+  }
+
   render(): ComponentChild {
+    const node = cloneElement(this.props.children as VNode);
     return (
       <div
         className={[styles.sidePanelWrapper, this.state.on ? styles.activeState : ''].join(' ')}
         style={!this.state.on && !this.switchMode ? { transition: `visibility ${defaultTransitionTime}ms` } : ''}
       >
-        {cloneElement(this.props.children as VNode)}
+        {this.detachRef ? (
+          <Fragment>
+            {createPortal(node, this.detachRef)}
+            <this.state.attachPlaceholder />
+          </Fragment>
+        ) : (
+          node
+        )}
       </div>
     );
   }