Ignore HUD and webcam clicks when generating auto-zooms

electron/electron-env.d.ts

@@ -253,6 +253,9 @@ interface Window {
 		onEditorModeChanged: (callback: (inEditor: boolean) => void) => () => void;
 		hudOverlayRendererReady: () => void;
 		hudOverlaySetWebcamPreviewVisible: (visible: boolean) => void;
+		hudOverlaySetInteractiveBounds: (
+			bounds: Array<{ left: number; top: number; right: number; bottom: number }> | null,
+		) => void;
 		getHudOverlayCaptureProtection: () => Promise<{ success: boolean; enabled: boolean }>;
 		getHudOverlayMousePassthroughSupported: () => Promise<{
 			success: boolean;

electron/ipc/cursor/interaction.ts

@@ -11,6 +11,8 @@ import {
 	setLastLeftClick,
 	setLinuxCursorScreenPoint,
 } from "../state";
+import { getScreen } from "../utils";
+import { getHudOverlayInteractiveBounds, getHudOverlayWindow } from "../../windows";
 import type {
 	CursorInteractionType,
 	HookMouseEvent,
@@ -192,6 +194,22 @@ export function recordCursorMouseDown(button: 1 | 2 | 3) {
 		return;
 	}
 
+	const hudBounds = getHudOverlayInteractiveBounds();
+	const hud = getHudOverlayWindow();
+	if (hud?.isVisible() && !hud.isMinimized() && hudBounds) {
+		const cursor = getScreen().getCursorScreenPoint();
+		const isInsideHudInteractiveElement = hudBounds.some(
+			(bounds) =>
+				cursor.x >= bounds.left &&
+				cursor.x <= bounds.right &&
+				cursor.y >= bounds.top &&
+				cursor.y <= bounds.bottom,
+		);
+		if (isInsideHudInteractiveElement) {
+			return;
+		}
+	}
+
 	const point = getNormalizedCursorPoint();
 	if (!point) {
 		return;

electron/preload.ts

@@ -228,6 +228,11 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlaySetWebcamPreviewVisible: (visible: boolean) => {
 		ipcRenderer.send("hud-overlay-set-webcam-preview-visible", visible);
 	},
+	hudOverlaySetInteractiveBounds: (
+		bounds: Array<{ left: number; top: number; right: number; bottom: number }> | null,
+	) => {
+		ipcRenderer.send("hud-overlay-set-interactive-bounds", bounds);
+	},
 	getHudOverlayCaptureProtection: () => {
 		return ipcRenderer.invoke("get-hud-overlay-capture-protection");
 	},

electron/windows.ts

@@ -55,6 +55,12 @@ let hudOverlayMouseReassertTimer: NodeJS.Timeout | null = null;
 let hudOverlayRecordingActive = false;
 let hudCaptureStarting = false;
 let hudOverlayWebcamPreviewVisible = false;
+let hudOverlayInteractiveBounds: Array<{
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+}> | null = null;
 let countdownWindow: BrowserWindow | null = null;
 let capturePickerWindows: BrowserWindow[] = [];
 let areaRecordingBorderWindow: BrowserWindow | null = null;
@@ -487,6 +493,36 @@ ipcMain.on("hud-overlay-set-webcam-preview-visible", (_event, visible: boolean)
 	}
 });
 
+ipcMain.on(
+	"hud-overlay-set-interactive-bounds",
+	(
+		_event,
+		bounds:
+			| Array<{ left: number; top: number; right: number; bottom: number }>
+			| null
+			| undefined,
+	) => {
+		if (
+			!bounds ||
+			bounds.some(
+				(rect) =>
+					![rect.left, rect.top, rect.right, rect.bottom].every(Number.isFinite) ||
+					rect.right < rect.left ||
+					rect.bottom < rect.top,
+			)
+		) {
+			hudOverlayInteractiveBounds = null;
+			return;
+		}
+
+		hudOverlayInteractiveBounds = bounds;
+	},
+);
+
+export function getHudOverlayInteractiveBounds() {
+	return hudOverlayInteractiveBounds;
+}
+
 let hudCaptureProtectionUpdates = Promise.resolve();
 ipcMain.handle("set-hud-overlay-capture-protection", (_event, enabled: boolean) => {
 	// Settings can be open in more than one window. Match each helper acknowledgement
@@ -730,6 +766,7 @@ export function createHudOverlayWindow(): BrowserWindow {
 		screen.removeListener("display-metrics-changed", handleDisplayMetricsChanged);
 		if (hudOverlayWindow === win) {
 			hudOverlayWindow = null;
+			hudOverlayInteractiveBounds = null;
 			recordingPreparationActive = false;
 			hudCaptureStarting = false;
 			hudOverlayRecordingActive = false;

src/components/launch/LaunchWindow.tsx

@@ -156,6 +156,51 @@ function LaunchWindowContent() {
 		docked: showRecordingWebcamPreview,
 	});
 
+	useEffect(() => {
+		const reportInteractiveBounds = () => {
+			const elements = [hudBarRef.current, recordingWebcamPreviewContainerRef.current].filter(
+				(element): element is HTMLDivElement => element !== null,
+			);
+
+			if (elements.length === 0) {
+				window.electronAPI?.hudOverlaySetInteractiveBounds?.(null);
+				return;
+			}
+
+			window.electronAPI?.hudOverlaySetInteractiveBounds?.(
+				elements.map((element) => {
+					const rect = element.getBoundingClientRect();
+					return {
+						left: window.screenX + rect.left,
+						top: window.screenY + rect.top,
+						right: window.screenX + rect.right,
+						bottom: window.screenY + rect.bottom,
+					};
+				}),
+			);
+		};
+
+		reportInteractiveBounds();
+		const resizeObserver = new ResizeObserver(reportInteractiveBounds);
+		if (hudBarRef.current) resizeObserver.observe(hudBarRef.current);
+		if (recordingWebcamPreviewContainerRef.current) {
+			resizeObserver.observe(recordingWebcamPreviewContainerRef.current);
+		}
+		window.addEventListener("mousemove", reportInteractiveBounds);
+		window.addEventListener("resize", reportInteractiveBounds);
+
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("mousemove", reportInteractiveBounds);
+			window.removeEventListener("resize", reportInteractiveBounds);
+			window.electronAPI?.hudOverlaySetInteractiveBounds?.(null);
+		};
+	}, [
+		recordingHudOffset,
+		recordingWebcamPreviewContainerRef,
+		showRecordingWebcamPreview,
+	]);
+
 	const { handleHudMouseEnter, handleHudMouseLeave, beginInteractiveHudAction } =
 		useLaunchHudInteractionState({
 			openId,