perf: performance improvements 1

electron/window/create-window.ts

@@ -12,12 +12,14 @@ import * as path from 'path';
 import { DESKTOP_APP_DISPLAY_NAME } from '../app/desktop-branding.rules';
 import { readDesktopSettings } from '../desktop-settings';
 import { resolveDevelopmentClientUrl } from './dev-client-url.rules';
+import { shouldRegisterDisplayMediaHandler } from './display-media-handler.rules';
 
 let mainWindow: BrowserWindow | null = null;
 let tray: Tray | null = null;
 let closeToTrayEnabled = true;
 let appQuitting = false;
 let youtubeRequestHeadersConfigured = false;
+let displayMediaHandlerConfigured = false;
 
 const WINDOW_STATE_CHANGED_CHANNEL = 'window-state-changed';
 const YOUTUBE_EMBED_REFERRER = 'https://toju.app/';
@@ -189,31 +191,12 @@ function emitWindowState(): void {
   });
 }
 
-export async function createWindow(): Promise<void> {
-  const windowIconPath = getWindowIconPath();
+function ensureDisplayMediaRequestHandler(): void {
+  if (!shouldRegisterDisplayMediaHandler(process.platform, displayMediaHandlerConfigured)) {
+    return;
+  }
 
-  closeToTrayEnabled = readDesktopSettings().closeToTray;
-  ensureTray();
-  ensureYoutubeEmbedRequestHeaders();
-
-  mainWindow = new BrowserWindow({
-    width: 1400,
-    height: 900,
-    minWidth: 800,
-    minHeight: 600,
-    frame: false,
-    title: DESKTOP_APP_DISPLAY_NAME,
-    titleBarStyle: 'hidden',
-    backgroundColor: '#0a0a0f',
-    ...(windowIconPath ? { icon: windowIconPath } : {}),
-    webPreferences: {
-      backgroundThrottling: false,
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, '..', 'preload.js'),
-      webSecurity: true
-    }
-  });
+  displayMediaHandlerConfigured = true;
 
   if (process.platform === 'linux') {
     session.defaultSession.setDisplayMediaRequestHandler(
@@ -241,41 +224,70 @@ export async function createWindow(): Promise<void> {
       },
       { useSystemPicker: true }
     );
+
+    return;
   }
 
-  if (process.platform === 'win32') {
-    session.defaultSession.setDisplayMediaRequestHandler(
-      async (request, respond) => {
-        // On Windows the system picker (useSystemPicker: true) is preferred.
-        // This handler is only reached when the system picker is unavailable.
-        // Include loopback audio when the renderer requested it so that
-        // getDisplayMedia receives an audio track and the renderer-side
-        // restrictOwnAudio constraint can keep the app's own voice playback
-        // out of the captured stream.
-        try {
-          const sources = await desktopCapturer.getSources({
-            types: ['window', 'screen'],
-            thumbnailSize: { width: 150, height: 150 }
+  session.defaultSession.setDisplayMediaRequestHandler(
+    async (request, respond) => {
+      // On Windows the system picker (useSystemPicker: true) is preferred.
+      // This handler is only reached when the system picker is unavailable.
+      // Include loopback audio when the renderer requested it so that
+      // getDisplayMedia receives an audio track and the renderer-side
+      // restrictOwnAudio constraint can keep the app's own voice playback
+      // out of the captured stream.
+      try {
+        const sources = await desktopCapturer.getSources({
+          types: ['window', 'screen'],
+          thumbnailSize: { width: 150, height: 150 }
+        });
+        const firstSource = sources[0];
+
+        if (firstSource) {
+          respond({
+            video: firstSource,
+            ...(request.audioRequested ? { audio: 'loopback' } : {})
           });
-          const firstSource = sources[0];
 
-          if (firstSource) {
-            respond({
-              video: firstSource,
-              ...(request.audioRequested ? { audio: 'loopback' } : {})
-            });
-
-            return;
-          }
-        } catch {
-          // desktopCapturer also unavailable
+          return;
         }
+      } catch {
+        // desktopCapturer also unavailable
+      }
 
-        respond({});
-      },
-      { useSystemPicker: true }
-    );
-  }
+      respond({});
+    },
+    { useSystemPicker: true }
+  );
+}
+
+export async function createWindow(): Promise<void> {
+  const windowIconPath = getWindowIconPath();
+
+  closeToTrayEnabled = readDesktopSettings().closeToTray;
+  ensureTray();
+  ensureYoutubeEmbedRequestHeaders();
+
+  mainWindow = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 800,
+    minHeight: 600,
+    frame: false,
+    title: DESKTOP_APP_DISPLAY_NAME,
+    titleBarStyle: 'hidden',
+    backgroundColor: '#0a0a0f',
+    ...(windowIconPath ? { icon: windowIconPath } : {}),
+    webPreferences: {
+      backgroundThrottling: false,
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, '..', 'preload.js'),
+      webSecurity: true
+    }
+  });
+
+  ensureDisplayMediaRequestHandler();
 
   if (process.env['NODE_ENV'] === 'development') {
     await mainWindow.loadURL(resolveDevelopmentClientUrl(process.env['SSL'] === 'true'));

electron/window/display-media-handler.rules.spec.ts

@@ -0,0 +1,22 @@
+import {
+  describe,
+  expect,
+  it
+} from 'vitest';
+import { shouldRegisterDisplayMediaHandler } from './display-media-handler.rules';
+
+describe('shouldRegisterDisplayMediaHandler', () => {
+  it('registers once for platforms that need a fallback picker', () => {
+    expect(shouldRegisterDisplayMediaHandler('linux', false)).toBe(true);
+    expect(shouldRegisterDisplayMediaHandler('win32', false)).toBe(true);
+  });
+
+  it('does not re-register on window recreation', () => {
+    expect(shouldRegisterDisplayMediaHandler('linux', true)).toBe(false);
+    expect(shouldRegisterDisplayMediaHandler('win32', true)).toBe(false);
+  });
+
+  it('never registers on platforms with a native picker', () => {
+    expect(shouldRegisterDisplayMediaHandler('darwin', false)).toBe(false);
+  });
+});

electron/window/display-media-handler.rules.ts

@@ -0,0 +1,16 @@
+/**
+ * The display-media request handler is a session-level singleton. Registering
+ * it inside `createWindow()` without a guard re-installed a fresh handler
+ * (holding fresh closures) every time the window was recreated from the tray
+ * or a deep link. Registration happens at most once per app run.
+ */
+export function shouldRegisterDisplayMediaHandler(
+  platform: NodeJS.Platform,
+  alreadyConfigured: boolean
+): boolean {
+  if (alreadyConfigured) {
+    return false;
+  }
+
+  return platform === 'linux' || platform === 'win32';
+}