Add background preview capture and picture-in-picture support

apps/desktop/src/electron/ElectronWindow.test.ts

@@ -94,6 +94,7 @@ describe("ElectronWindow", () => {
         webPreferences: {
           preload: "/tmp/preload.js",
           partition: "persist:t3code-preview-test",
+          backgroundThrottling: null,
           sandbox: true,
           contextIsolation: true,
           nodeIntegration: false,

apps/desktop/src/electron/ElectronWindow.ts

@@ -22,6 +22,7 @@ const ElectronWindowCreateOptions = Schema.Struct({
   webPreferences: Schema.Struct({
     preload: Schema.NullOr(Schema.String),
     partition: Schema.NullOr(Schema.String),
+    backgroundThrottling: Schema.NullOr(Schema.Boolean),
     sandbox: Schema.NullOr(Schema.Boolean),
     contextIsolation: Schema.NullOr(Schema.Boolean),
     nodeIntegration: Schema.NullOr(Schema.Boolean),
@@ -179,6 +180,7 @@ export const make = Effect.gen(function* () {
         webPreferences: {
           preload: webPreferences?.preload ?? null,
           partition: webPreferences?.partition ?? null,
+          backgroundThrottling: webPreferences?.backgroundThrottling ?? null,
           sandbox: webPreferences?.sandbox ?? null,
           contextIsolation: webPreferences?.contextIsolation ?? null,
           nodeIntegration: webPreferences?.nodeIntegration ?? null,

apps/desktop/src/ipc/channels.ts

@@ -61,6 +61,9 @@ export const PREVIEW_CANCEL_PICK_ELEMENT_CHANNEL = "desktop:preview-cancel-pick-
 export const PREVIEW_CAPTURE_SCREENSHOT_CHANNEL = "desktop:preview-capture-screenshot";
 export const PREVIEW_REVEAL_ARTIFACT_CHANNEL = "desktop:preview-reveal-artifact";
 export const PREVIEW_COPY_ARTIFACT_CHANNEL = "desktop:preview-copy-artifact";
+export const PREVIEW_PICTURE_IN_PICTURE_OPEN_CHANNEL = "desktop:preview-pip-open";
+export const PREVIEW_PICTURE_IN_PICTURE_CLOSE_CHANNEL = "desktop:preview-pip-close";
+export const PREVIEW_PICTURE_IN_PICTURE_FRAME_CHANNEL = "desktop:preview-pip-frame";
 export const PREVIEW_AUTOMATION_STATUS_CHANNEL = "desktop:preview-automation-status";
 export const PREVIEW_AUTOMATION_SNAPSHOT_CHANNEL = "desktop:preview-automation-snapshot";
 export const PREVIEW_AUTOMATION_CLICK_CHANNEL = "desktop:preview-automation-click";

apps/desktop/src/ipc/methods/preview.ts

@@ -168,6 +168,16 @@ export const stopRecording = tabMethod(
   "desktop.ipc.preview.stopRecording",
   (manager, tabId) => manager.stopRecording(tabId),
 );
+export const openPictureInPicture = tabMethod(
+  IpcChannels.PREVIEW_PICTURE_IN_PICTURE_OPEN_CHANNEL,
+  "desktop.ipc.preview.openPictureInPicture",
+  (manager, tabId) => manager.openPictureInPicture(tabId),
+);
+export const closePictureInPicture = tabMethod(
+  IpcChannels.PREVIEW_PICTURE_IN_PICTURE_CLOSE_CHANNEL,
+  "desktop.ipc.preview.closePictureInPicture",
+  (manager, tabId) => manager.closePictureInPicture(tabId),
+);
 
 export const clearCookies = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PREVIEW_CLEAR_COOKIES_CHANNEL,
@@ -367,6 +377,8 @@ export const methods = [
   captureScreenshot,
   revealArtifact,
   copyArtifactToClipboard,
+  openPictureInPicture,
+  closePictureInPicture,
   automationStatus,
   automationSnapshot,
   automationClick,

apps/desktop/src/preload.ts

@@ -179,6 +179,12 @@ contextBridge.exposeInMainWorld("desktopBridge", {
       ipcRenderer.invoke(IpcChannels.PREVIEW_REVEAL_ARTIFACT_CHANNEL, { path }),
     copyArtifactToClipboard: (path) =>
       ipcRenderer.invoke(IpcChannels.PREVIEW_COPY_ARTIFACT_CHANNEL, { path }),
+    pictureInPicture: {
+      open: (tabId) =>
+        ipcRenderer.invoke(IpcChannels.PREVIEW_PICTURE_IN_PICTURE_OPEN_CHANNEL, { tabId }),
+      close: (tabId) =>
+        ipcRenderer.invoke(IpcChannels.PREVIEW_PICTURE_IN_PICTURE_CLOSE_CHANNEL, { tabId }),
+    },
     recording: {
       startScreencast: (tabId) =>
         ipcRenderer.invoke(IpcChannels.PREVIEW_RECORDING_START_CHANNEL, { tabId }),

apps/desktop/src/preview-pip-preload.ts

@@ -0,0 +1,17 @@
+// @effect-diagnostics globalDate:off - This isolated Electron preload does not run inside an Effect runtime.
+import type { DesktopPreviewRecordingFrame } from "@t3tools/contracts";
+import { contextBridge, ipcRenderer } from "electron";
+
+import { PREVIEW_PICTURE_IN_PICTURE_FRAME_CHANNEL } from "./ipc/channels.ts";
+
+contextBridge.exposeInMainWorld("previewPictureInPicture", {
+  onFrame: (listener: (frame: DesktopPreviewRecordingFrame) => void) => {
+    const wrappedListener = (_event: Electron.IpcRendererEvent, frame: unknown) => {
+      if (typeof frame !== "object" || frame === null) return;
+      listener(frame as DesktopPreviewRecordingFrame);
+    };
+    ipcRenderer.on(PREVIEW_PICTURE_IN_PICTURE_FRAME_CHANNEL, wrappedListener);
+    return () =>
+      ipcRenderer.removeListener(PREVIEW_PICTURE_IN_PICTURE_FRAME_CHANNEL, wrappedListener);
+  },
+});