Merge pull request #611 from webadderallorg/fix/webcam-hud-preview-bounds

fix(recording): preserve webcam preview HUD bounds

Author: meiiie

electron/electron-env.d.ts

@@ -208,6 +208,7 @@ interface Window {
 		hudOverlayHide: () => void;
 		hudOverlayClose: () => void;
 		hudOverlayRendererReady: () => void;
+		hudOverlaySetWebcamPreviewVisible: (visible: boolean) => void;
 		getHudOverlayCaptureProtection: () => Promise<{ success: boolean; enabled: boolean }>;
 		getHudOverlayMousePassthroughSupported: () => Promise<{
 			success: boolean;

electron/hudOverlayBounds.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
 	getHudOverlayWindowBounds,
 	resizeHudOverlayFallbackBounds,
+	shouldExpandHudOverlayFallback,
 } from "./hudOverlayBounds";
 
 describe("getHudOverlayWindowBounds", () => {
@@ -143,3 +144,35 @@ describe("resizeHudOverlayFallbackBounds", () => {
 		});
 	});
 });
+
+describe("shouldExpandHudOverlayFallback", () => {
+	it("expands while recording only when the floating webcam preview is visible", () => {
+		expect(
+			shouldExpandHudOverlayFallback({
+				fallbackExpanded: false,
+				recordingActive: true,
+				webcamPreviewVisible: true,
+			}),
+		).toBe(true);
+	});
+
+	it("keeps the compact recording fallback when there is no webcam preview", () => {
+		expect(
+			shouldExpandHudOverlayFallback({
+				fallbackExpanded: false,
+				recordingActive: true,
+				webcamPreviewVisible: false,
+			}),
+		).toBe(false);
+	});
+
+	it("preserves manual fallback expansion outside recording", () => {
+		expect(
+			shouldExpandHudOverlayFallback({
+				fallbackExpanded: true,
+				recordingActive: false,
+				webcamPreviewVisible: false,
+			}),
+		).toBe(true);
+	});
+});

electron/hudOverlayBounds.ts

@@ -38,6 +38,18 @@ export function getHudOverlayWindowBounds(
 	};
 }
 
+export function shouldExpandHudOverlayFallback({
+	fallbackExpanded,
+	recordingActive,
+	webcamPreviewVisible,
+}: {
+	fallbackExpanded: boolean;
+	recordingActive: boolean;
+	webcamPreviewVisible: boolean;
+}): boolean {
+	return fallbackExpanded || (recordingActive && webcamPreviewVisible);
+}
+
 export function resizeHudOverlayFallbackBounds(
 	workArea: HudOverlayWorkArea,
 	currentBounds: HudOverlayWorkArea,

electron/preload.ts

@@ -179,6 +179,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlayRendererReady: () => {
 		ipcRenderer.send("hud-overlay-renderer-ready");
 	},
+	hudOverlaySetWebcamPreviewVisible: (visible: boolean) => {
+		ipcRenderer.send("hud-overlay-set-webcam-preview-visible", visible);
+	},
 	getHudOverlayCaptureProtection: () => {
 		return ipcRenderer.invoke("get-hud-overlay-capture-protection");
 	},

electron/windows.ts

@@ -5,7 +5,11 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { app, BrowserWindow, ipcMain } from "electron";
 import { USER_DATA_PATH } from "./appPaths";
-import { getHudOverlayWindowBounds, resizeHudOverlayFallbackBounds } from "./hudOverlayBounds";
+import {
+	getHudOverlayWindowBounds,
+	resizeHudOverlayFallbackBounds,
+	shouldExpandHudOverlayFallback,
+} from "./hudOverlayBounds";
 import { getPackagedRendererBaseUrl } from "./rendererServer";
 
 const electronWindowsDir = path.dirname(fileURLToPath(import.meta.url));
@@ -29,6 +33,7 @@ let hudOverlayFallbackExpanded = false;
 let hudOverlayIgnoringMouse = true;
 let hudOverlayMouseReassertTimer: NodeJS.Timeout | null = null;
 let hudOverlayRecordingActive = false;
+let hudOverlayWebcamPreviewVisible = false;
 let countdownWindow: BrowserWindow | null = null;
 let updateToastWindow: BrowserWindow | null = null;
 
@@ -189,10 +194,15 @@ function getHudOverlayDisplay() {
 
 function getHudOverlayBounds() {
 	const { workArea } = getHudOverlayDisplay();
+	const fallbackExpanded = shouldExpandHudOverlayFallback({
+		fallbackExpanded: hudOverlayFallbackExpanded,
+		recordingActive: hudOverlayRecordingActive,
+		webcamPreviewVisible: hudOverlayWebcamPreviewVisible,
+	});
 	return getHudOverlayWindowBounds(
 		workArea,
 		isHudOverlayMousePassthroughSupported() && !hudOverlayRecordingActive,
-		hudOverlayFallbackExpanded,
+		fallbackExpanded,
 	);
 }
 
@@ -393,6 +403,18 @@ ipcMain.handle("get-hud-overlay-mouse-passthrough-supported", () => {
 	};
 });
 
+ipcMain.on("hud-overlay-set-webcam-preview-visible", (_event, visible: boolean) => {
+	const nextVisible = Boolean(visible);
+	if (hudOverlayWebcamPreviewVisible === nextVisible) {
+		return;
+	}
+
+	hudOverlayWebcamPreviewVisible = nextVisible;
+	if (hudOverlayRecordingActive) {
+		applyHudOverlayBounds();
+	}
+});
+
 ipcMain.handle("set-hud-overlay-capture-protection", (_event, enabled: boolean) => {
 	loadHudOverlayCaptureProtectionSetting();
 	hudOverlayHiddenFromCapture = Boolean(enabled);
@@ -415,6 +437,7 @@ ipcMain.handle("set-hud-overlay-capture-protection", (_event, enabled: boolean)
 export function createHudOverlayWindow(): BrowserWindow {
 	loadHudOverlayCaptureProtectionSetting();
 	hudOverlayFallbackExpanded = false;
+	hudOverlayWebcamPreviewVisible = false;
 	const initialBounds = getHudOverlayBounds();
 	let hasShownHudWindow = false;
 

src/components/launch/LaunchWindow.tsx

@@ -152,6 +152,16 @@ function LaunchWindowContent() {
 		hudOverlayMousePassthroughSupported,
 	});
 
+	useEffect(() => {
+		window.electronAPI?.hudOverlaySetWebcamPreviewVisible?.(showRecordingWebcamPreview);
+	}, [showRecordingWebcamPreview]);
+
+	useEffect(() => {
+		return () => {
+			window.electronAPI?.hudOverlaySetWebcamPreviewVisible?.(false);
+		};
+	}, []);
+
 	const {
 		recordingHudOffset,
 		isHudDragging,