@raydiant/playlist-window-manager 0.0.0-test-1

package/src/IFrameRenderer.ts

@@ -0,0 +1,251 @@
+import {
+  PresentationWindowRenderer,
+  CreateWindowOptions,
+  WindowBounds,
+} from './types';
+
+interface IFrameRendererWindow {
+  frame: HTMLIFrameElement;
+  receiveMessageCallback?: (type: string, payload?: any) => void;
+}
+
+const namespace = 'raydiant';
+
+export default class IFrameRenderer implements PresentationWindowRenderer {
+  private windows: {
+    [windowId: string]: IFrameRendererWindow;
+  } = {};
+
+  constructor(private container: HTMLElement) {
+    // Post message is a single channel for all window so we need to
+    // attach a global message handler that forwards the event to the
+    // correct window.
+    window.addEventListener('message', this.globalMessageHandler, false);
+  }
+
+  public async createWindow({
+    windowId,
+    bounds,
+    backgroundColor = 'black',
+    receiveMessageCallback,
+  }: CreateWindowOptions) {
+    const frame = document.createElement('iframe');
+    this.windows[windowId] = { frame, receiveMessageCallback };
+
+    frame.setAttribute('data-windowId', windowId);
+
+    // Set the allowed permissions for the iframe.
+    // * allows any loaded domain to have access, which is required for
+    // third-party sites loaded into the iframe.
+    frame.allow = 'microphone *; camera *; autoplay';
+
+    // Default styles.
+    frame.style.position = 'absolute';
+    frame.style.zIndex = '0';
+    frame.style.border = 'none';
+
+    // Position will be 0,0 for the main window.
+    if (bounds) {
+      frame.style.top = `${bounds.y}px`;
+      frame.style.left = `${bounds.x}px`;
+      frame.style.width = `${bounds.width}px`;
+      frame.style.height = `${bounds.height}px`;
+    } else {
+      // If bounds assume fullscreen.
+      frame.style.top = '0px';
+      frame.style.left = '0px';
+      frame.style.width = '100%';
+      frame.style.height = '100%';
+    }
+
+    if (backgroundColor) {
+      frame.style.backgroundColor = backgroundColor;
+    }
+
+    // Set initial visibility and send to background.
+    frame.style.zIndex = '0';
+    frame.style.visibility = 'hidden';
+
+    this.container.appendChild(frame);
+  }
+
+  public loadWindow(windowId: string, url: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to update window bounds, missing window id '${windowId}'`
+      );
+    }
+
+    // Return a promise that resolves then the window has successfully loaded.
+    return new Promise<void>((resolve, reject) => {
+      window.frame.onload = () => {
+        resolve();
+      };
+
+      window.frame.onerror = () => {
+        reject(new Error(`Error loading window for '${url}'`));
+      };
+
+      window.frame.src = url;
+    });
+  }
+
+  public updateWindowBounds(windowId: string, bounds: WindowBounds) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to update window bounds, missing window id '${windowId}'`
+      );
+    }
+
+    window.frame.style.top = `${bounds.y}px`;
+    window.frame.style.left = `${bounds.x}px`;
+    window.frame.style.width = `${bounds.width}px`;
+    window.frame.style.height = `${bounds.height}px`;
+  }
+
+  public showWindow(windowId: string, isFocused: boolean) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to show window, missing window id '${windowId}'`);
+    }
+
+    window.frame.style.zIndex = '9999';
+    window.frame.style.visibility = 'visible';
+
+    if (isFocused) {
+      window.frame.focus();
+    }
+  }
+
+  public hideWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to hide window, missing window id '${windowId}'`);
+    }
+
+    window.frame.style.zIndex = '0';
+    window.frame.style.visibility = 'hidden';
+  }
+
+  public async removeWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to remove window, missing window id '${windowId}'`
+      );
+    }
+
+    this.container.removeChild(window.frame);
+    delete this.windows[windowId];
+  }
+
+  public sendMessageString(windowId: string, message: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to send message '${message}', missing window id '${windowId}'`
+      );
+    }
+
+    if (!window.frame.contentWindow) {
+      throw new Error(
+        `Failed to send message '${message}', contentWindow missing for '${windowId}'`
+      );
+    }
+
+    window.frame.contentWindow.postMessage(`${namespace}:${message}`, '*');
+  }
+
+  public sendMessageObject(windowId: string, type: string, payload?: any) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to send message '${type}', missing window id '${windowId}'`
+      );
+    }
+
+    if (!window.frame.contentWindow) {
+      throw new Error(
+        `Failed to send message '${type}', contentWindow missing for '${windowId}'`
+      );
+    }
+
+    window.frame.contentWindow.postMessage(
+      { namespace, windowId, type, payload },
+      '*'
+    );
+  }
+
+  public muteWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to mute window, missing window id '${windowId}'`);
+    }
+
+    // There is no mute/unmute API for iframes so we rely on the window manager overriding any
+    // mute presentation properties.
+  }
+
+  public unMuteWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to unmute window, missing window id '${windowId}'`
+      );
+    }
+
+    // There is no  mute/unmute API for iframes so we rely on the window manager overriding any
+    // mute presentation properties.
+  }
+
+  public destroy() {
+    window.removeEventListener('message', this.globalMessageHandler, false);
+  }
+
+  private getWindow(windowId: string): IFrameRendererWindow | null {
+    return this.windows[windowId];
+  }
+
+  private globalMessageHandler = (event: MessageEvent) => {
+    // Ignore messages that don't start with the message prefix.
+    if (typeof event.data === 'string' && event.data.startsWith(namespace)) {
+      const { windowId, type, payload } = this.deserializeMessage(event.data);
+
+      if (!windowId || !type) {
+        console.warn(
+          `Invalid message received from child window '${event.data}'`
+        );
+        return;
+      }
+
+      const window = this.getWindow(windowId);
+      if (!window) {
+        throw new Error(
+          `Failed add receive message callback to window, window with window id: '${windowId}' was not found`
+        );
+      }
+
+      if (window.receiveMessageCallback) {
+        window.receiveMessageCallback(type, payload);
+      }
+    }
+  };
+
+  private deserializeMessage(message: string) {
+    let windowId = '';
+    let type = '';
+    let payload: unknown;
+
+    const json = message.replace('raydiant:', '');
+    try {
+      // Messages are sent as json in the format of { type: string, payload: unknown }.
+      ({ windowId, type, payload } = JSON.parse(json));
+    } catch (err) {
+      // Not a valid message, return empty type and payload.
+    }
+
+    return { windowId, type, payload };
+  }
+}