@raydiant/playlist-window-manager 0.0.0-electron-upgrade-1

package/src/BrowserWindowRenderer.ts

@@ -0,0 +1,595 @@
+import * as path from 'path';
+import {
+  BrowserWindow,
+  BrowserView,
+  ipcMain,
+  IpcMainEvent,
+  Event,
+  BrowserWindowConstructorOptions,
+  BrowserViewConstructorOptions,
+  RenderProcessGoneDetails,
+} from 'electron';
+import {
+  PresentationWindowRenderer,
+  CreateWindowOptions,
+  WindowBounds,
+  Logger,
+} from './types';
+import WindowUnresponsiveError from './WindowUnresponsiveError';
+
+interface ProxySettings {
+  proxyRules: string;
+  proxyBypassRules: string;
+}
+
+interface BrowserWindowRendererWindow {
+  parentWindowId?: string;
+  view: BrowserWindow | BrowserView;
+  bounds: WindowBounds;
+  receiveMessageCallback: (
+    event: IpcMainEvent,
+    type: string,
+    payload?: any
+  ) => void;
+  unresponsiveCallback: () => void;
+  renderProcessGoneCallback: (
+    event: Event,
+    details: RenderProcessGoneDetails
+  ) => void;
+}
+
+interface BrowserWindowRendererOptions {
+  bounds: WindowBounds;
+  frame: boolean;
+  hasShadow: boolean;
+  renderChildWindowsAsBrowserViews: boolean;
+  useWindowPool: boolean;
+  logger: Logger;
+  proxySettings?: ProxySettings;
+  windowCrashHandler?: () => void;
+}
+
+export default class BrowserWindowRenderer
+  implements PresentationWindowRenderer
+{
+  private windows: {
+    [windowId: string]: BrowserWindowRendererWindow;
+  } = {};
+  private windowCrashHandler: (reason: string) => void = (_: string) => {};
+
+  private browserWindowPool = new WindowPool<BrowserWindow>();
+  private browserViewPool = new WindowPool<BrowserView>();
+
+  // Create a hidden window to preload BrowserViews.
+  private offscreenWindow = new BrowserWindow({
+    show: false,
+    frame: this.opts.frame,
+    hasShadow: this.opts.hasShadow,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: false,
+    },
+  });
+
+  private proxySettings: ProxySettings | null = null;
+
+  private logger: Logger;
+
+  constructor(private opts: BrowserWindowRendererOptions) {
+    this.offscreenWindow.setBounds(opts.bounds);
+    if (opts.proxySettings) {
+      this.proxySettings = opts.proxySettings;
+    }
+
+    this.logger = opts.logger;
+
+    if (opts.windowCrashHandler) {
+      this.windowCrashHandler = opts.windowCrashHandler;
+    }
+  }
+
+  public async createWindow({
+    windowId,
+    parentWindowId,
+    bounds = this.opts.bounds,
+    backgroundColor,
+    receiveMessageCallback,
+    errorCallback,
+  }: CreateWindowOptions) {
+    const window: BrowserWindowRendererWindow = {
+      parentWindowId,
+      // If we are creating a child window and renderChildWindowsAsBrowserViews is true,
+      // render all child windows as browser views.
+      view:
+        parentWindowId && this.opts.renderChildWindowsAsBrowserViews
+          ? this.createOrGetPooledBrowserView(windowId, {
+              webPreferences: {
+                preload: path.join(__dirname, 'preload.js'),
+                contextIsolation: false,
+              },
+            })
+          : this.createOrGetPooledBrowserWindow(windowId, {
+              show: false,
+              frame: this.opts.frame,
+              // NOTE: useWindowPool: true does not work with renderChildWindowsAsBrowserViews: false
+              // because the parent can't be changed after creating the BrowserWindow.
+              parent: parentWindowId
+                ? this.getParentBrowserView(parentWindowId)
+                : undefined,
+              transparent: backgroundColor === 'transparent',
+              hasShadow: this.opts.hasShadow,
+              webPreferences: {
+                preload: path.join(__dirname, 'preload.js'),
+                contextIsolation: false,
+              },
+            }),
+      // If we are creating a child window and renderChildWindowsAsBrowserViews is false that means
+      // we are rendering child windows with BrowserWindow. BrowserWindows are positioned absolutely so
+      // to place them in the correct spot relative to their parent we need to add the main window's x / y.
+      // BrowserViews are relatively positioned so we don't need to do that.
+      bounds:
+        parentWindowId && !this.opts.renderChildWindowsAsBrowserViews
+          ? {
+              ...bounds,
+              x: bounds.x + this.opts.bounds.x,
+              y: bounds.y + this.opts.bounds.y,
+            }
+          : bounds,
+
+      receiveMessageCallback: (
+        _: IpcMainEvent,
+        type: string,
+        payload?: any
+      ) => {
+        if (receiveMessageCallback) {
+          receiveMessageCallback(type, payload);
+        }
+      },
+
+      unresponsiveCallback: () => {
+        this.logger.error(`Window received 'unresponsive' event`, { windowId });
+        this.windowCrashHandler('unresponsive');
+        errorCallback(
+          new WindowUnresponsiveError(`Window '${windowId}' is unresponsive`)
+        );
+      },
+
+      renderProcessGoneCallback: (
+        _: Event,
+        details: RenderProcessGoneDetails
+      ) => {
+        this.logger.error(
+          `Window received 'render-process-gone' event. Reason: ${details.reason}`,
+          { windowId }
+        );
+
+        // TODO: Handle different reasons for render-process-gone?
+        // https://www.electronjs.org/docs/api/web-contents#event-render-process-gone
+
+        this.windowCrashHandler('render-process-gone');
+
+        errorCallback(
+          new WindowUnresponsiveError(
+            `Window '${windowId}' render process gone`
+          )
+        );
+      },
+    };
+
+    // Attached crash handlers to skip presentation on error.
+    window.view.webContents.on(
+      'render-process-gone',
+      window.renderProcessGoneCallback
+    );
+
+    window.view.webContents.on('unresponsive', window.unresponsiveCallback);
+
+    if (window.view instanceof BrowserView) {
+      this.moveWindowOffscreen(window);
+    }
+
+    this.windows[windowId] = window;
+    // Listen for messages from window.
+    ipcMain.on(windowId, window.receiveMessageCallback);
+
+    if (backgroundColor) {
+      // To make a transparent window you need to set it's value to #00000000
+      // Electron issue: https://github.com/electron/electron/issues/20357
+      window.view.setBackgroundColor(
+        backgroundColor === 'transparent' ? '#00000000' : backgroundColor
+      );
+    }
+
+    window.view.setBounds(window.bounds);
+
+    if (this.proxySettings) {
+      await window.view.webContents.session.setProxy(this.proxySettings);
+    }
+
+    if (this.opts.useWindowPool) {
+      this.logPoolStats();
+    }
+  }
+
+  public async loadWindow(windowId: string, url: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to load window, missing window id '${windowId}'`);
+    }
+
+    await window.view.webContents.loadURL(url);
+    // window.view.webContents.openDevTools();
+  }
+
+  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.bounds = bounds;
+
+    if (window.view instanceof BrowserWindow && window.parentWindowId) {
+      // Child BrowserWindows are absolutely positioned so we need to add the main windows
+      // x/y to when updating the child window's bounds.
+      window.view.setBounds({
+        ...window.bounds,
+        x: window.bounds.x + this.opts.bounds.x,
+        y: window.bounds.y + this.opts.bounds.y,
+      });
+    } else {
+      window.view.setBounds(window.bounds);
+    }
+  }
+
+  public showWindow(windowId: string, isFocused: boolean) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to show window, missing window id '${windowId}'`);
+    }
+
+    if (window.view instanceof BrowserWindow) {
+      if (isFocused) {
+        window.view.show();
+      } else {
+        window.view.showInactive();
+      }
+    } else if (window.view instanceof BrowserView && window.parentWindowId) {
+      this.addWindowToParent(window.parentWindowId, window);
+      if (isFocused) {
+        // The setTimeout is required to set focus after the BrowserView has
+        // been added to the parent BrowserWindow.
+        setTimeout(() => window.view.webContents.focus(), 0);
+      }
+    }
+  }
+
+  public hideWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to hide window, missing window id '${windowId}'`);
+    }
+
+    if (window.view instanceof BrowserWindow) {
+      window.view.hide();
+    } else if (window.view instanceof BrowserView) {
+      this.moveWindowOffscreen(window);
+    }
+  }
+
+  public async removeWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to remove window, missing window id '${windowId}'`
+      );
+    }
+
+    // Remove crash handlers
+    window.view.webContents.removeListener(
+      'render-process-gone',
+      window.renderProcessGoneCallback
+    );
+
+    window.view.webContents.removeListener(
+      'unresponsive',
+      window.unresponsiveCallback
+    );
+
+    // Remove message handler
+    ipcMain.removeListener(windowId, window.receiveMessageCallback);
+
+    if (window.view instanceof BrowserView) {
+      if (window.parentWindowId) {
+        this.removeWindowFromParent(window.parentWindowId, window);
+      }
+      await this.destroyOrUnloadPooledBrowserView(windowId, window.view);
+    } else if (window.view instanceof BrowserWindow) {
+      await this.destroyOrUnloadPooledBrowserWindow(windowId, window.view);
+    }
+
+    delete this.windows[windowId];
+
+    if (this.opts.useWindowPool) {
+      this.logPoolStats();
+    }
+  }
+
+  public sendMessageString(windowId: string, message: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to send message to window, missing window id '${windowId}'`
+      );
+    }
+
+    window.view.webContents.send('electron-main', message);
+  }
+
+  public sendMessageObject(windowId: string, type: string, payload?: any) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to send message to window, missing window id '${windowId}'`
+      );
+    }
+
+    window.view.webContents.send('electron-main', { type, payload });
+  }
+
+  public muteWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(`Failed to mute window, missing window id '${windowId}'`);
+    }
+
+    window.view.webContents.setAudioMuted(true);
+  }
+
+  public unMuteWindow(windowId: string) {
+    const window = this.getWindow(windowId);
+    if (!window) {
+      throw new Error(
+        `Failed to unmute window, missing window id '${windowId}'`
+      );
+    }
+
+    window.view.webContents.setAudioMuted(false);
+  }
+
+  private getWindow(windowId: string): BrowserWindowRendererWindow | null {
+    return this.windows[windowId];
+  }
+
+  private moveWindowOffscreen(window: BrowserWindowRendererWindow) {
+    if (!(window.view instanceof BrowserView)) {
+      throw new Error(
+        `Failed move window offscreen, window is not a BrowserView`
+      );
+    }
+
+    if (window.parentWindowId) {
+      this.removeWindowFromParent(window.parentWindowId, window);
+    }
+    this.offscreenWindow.addBrowserView(window.view);
+  }
+
+  private addWindowToParent(
+    parentWindowId: string,
+    window: BrowserWindowRendererWindow
+  ) {
+    const parentWindow = this.getWindow(parentWindowId);
+    if (!parentWindow) {
+      throw new Error(
+        `Failed to add window to parent, missing parent window id '${parentWindowId}'`
+      );
+    }
+
+    if (parentWindow.view instanceof BrowserWindow) {
+      if (window.view instanceof BrowserView) {
+        this.offscreenWindow.removeBrowserView(window.view);
+        parentWindow.view.addBrowserView(window.view);
+      } else {
+        throw new Error(
+          `Failed add window to parent window id '${parentWindowId}', child window is not a BrowserView`
+        );
+      }
+    } else {
+      throw new Error(
+        `Failed add window to parent window id '${parentWindowId}', parent window is not a BrowserWindow`
+      );
+    }
+  }
+
+  private removeWindowFromParent(
+    parentWindowId: string,
+    window: BrowserWindowRendererWindow
+  ) {
+    const parentWindow = this.getWindow(parentWindowId);
+    if (!parentWindow) {
+      throw new Error(
+        `Failed to remove window from parent, missing parent window id '${parentWindowId}'`
+      );
+    }
+
+    if (parentWindow.view instanceof BrowserWindow) {
+      if (window.view instanceof BrowserView) {
+        parentWindow.view.removeBrowserView(window.view);
+      } else {
+        throw new Error(
+          `Failed remove window from parent window id '${parentWindowId}', child window is not a BrowserView`
+        );
+      }
+    } else {
+      throw new Error(
+        `Failed remove window from parent window id '${parentWindowId}', parent window is not a BrowserWindow`
+      );
+    }
+  }
+
+  private getParentBrowserView(parentWindowId: string): BrowserWindow {
+    const parentWindow = this.getWindow(parentWindowId);
+    if (!parentWindow) {
+      throw new Error(
+        `Failed to get parent BrowserView, missing parent window id '${parentWindowId}'`
+      );
+    }
+
+    if (!(parentWindow.view instanceof BrowserWindow)) {
+      throw new Error(
+        `Failed to get parent BrowserView, window is not a BrowserView`
+      );
+    }
+
+    return parentWindow.view;
+  }
+
+  private createOrGetPooledBrowserWindow(
+    windowId: string,
+    options: BrowserWindowConstructorOptions
+  ): BrowserWindow {
+    let browserWindow: BrowserWindow | null = null;
+
+    if (this.opts.useWindowPool) {
+      browserWindow = this.browserWindowPool.get();
+      if (browserWindow) {
+        this.logger.info(`Found free browser window from pool`, { windowId });
+      } else {
+        this.logger.info(`No free browser windows, adding new window to pool`, {
+          windowId,
+        });
+      }
+    }
+
+    if (!browserWindow) {
+      browserWindow = new BrowserWindow(options);
+      if (this.opts.useWindowPool) {
+        this.browserWindowPool.add(browserWindow);
+      }
+    }
+
+    return browserWindow;
+  }
+
+  private async destroyOrUnloadPooledBrowserWindow(
+    windowId: string,
+    browserWindow: BrowserWindow
+  ) {
+    if (this.opts.useWindowPool) {
+      this.hideWindow(windowId);
+      await browserWindow.webContents.loadURL('about:blank');
+      this.browserWindowPool.release(browserWindow);
+    } else {
+      if (browserWindow.isDestroyed()) {
+        this.logger.warn(
+          `Attempted to destroy BrowserWindow but it's already destroyed`,
+          { windowId }
+        );
+      } else {
+        // https://github.com/electron/electron/issues/26929#issuecomment-763837953
+        setImmediate(() => {
+          browserWindow.destroy();
+        });
+      }
+    }
+  }
+
+  private createOrGetPooledBrowserView(
+    windowId: string,
+    options: BrowserViewConstructorOptions
+  ): BrowserView {
+    let browserView: BrowserView | null = null;
+
+    if (this.opts.useWindowPool) {
+      browserView = this.browserViewPool.get();
+      if (browserView) {
+        this.logger.info(`Found free browser view from pool`, { windowId });
+      } else {
+        this.logger.info(`No free browser views, adding new view to pool`, {
+          windowId,
+        });
+      }
+    }
+
+    if (!browserView) {
+      browserView = new BrowserView(options);
+      if (this.opts.useWindowPool) {
+        this.browserViewPool.add(browserView);
+      }
+    }
+
+    return browserView;
+  }
+
+  private async destroyOrUnloadPooledBrowserView(
+    windowId: string,
+    browserView: BrowserView
+  ) {
+    if (this.opts.useWindowPool) {
+      this.hideWindow(windowId);
+      await browserView.webContents.loadURL('about:blank');
+      this.browserViewPool.release(browserView);
+    } else {
+      if (browserView.webContents.isDestroyed()) {
+        this.logger.warn(
+          `Attempted to destroy BrowserView but it's already destroyed`,
+          { windowId }
+        );
+      } else {
+        // Call destroy on webContents as workaround for BrowserView.destroy() being deprecated.
+        // https://github.com/electron/electron/pull/23578
+        // https://github.com/electron/electron/issues/26929
+        setImmediate(() => {
+          (browserView.webContents as any).destroy();
+        });
+      }
+    }
+  }
+
+  private logPoolStats() {
+    const bwSize = this.browserWindowPool.size();
+    const bvSize = this.browserViewPool.size();
+    this.logger.info(
+      `BrowserWindow pool total=${bwSize.total} inuse=${bwSize.inuse} free=${bwSize.free}`
+    );
+    this.logger.info(
+      `BrowserView pool total=${bvSize.total} inuse=${bvSize.inuse} free=${bvSize.free}`
+    );
+  }
+}
+
+class WindowPool<T extends BrowserWindow | BrowserView> {
+  private inuse: Set<T> = new Set();
+  private free: Set<T> = new Set();
+
+  add(window: T) {
+    this.inuse.add(window);
+  }
+
+  get(): T | null {
+    const firstFreeWindow = this.free.values().next().value;
+    if (!firstFreeWindow) return null;
+
+    // Mark window as inuse, call poo.release(window) to mark as free to use.
+    this.free.delete(firstFreeWindow);
+    this.inuse.add(firstFreeWindow);
+
+    return firstFreeWindow;
+  }
+
+  release(window: T) {
+    this.inuse.delete(window);
+    this.free.add(window);
+  }
+
+  size() {
+    const inuse = this.inuse.size;
+    const free = this.free.size;
+    return {
+      total: inuse + free,
+      inuse,
+      free,
+    };
+  }
+}