feat(desktop): add camera chrome controls to camera-only overlay preview

Author: richiemcilroy

apps/desktop/src/routes/target-select-overlay.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@cap/ui-solid";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { createElementSize } from "@solid-primitives/resize-observer";
+import { makePersisted } from "@solid-primitives/storage";
 import { useSearchParams } from "@solidjs/router";
 import { createMutation, useQuery } from "@tanstack/solid-query";
 import { invoke } from "@tauri-apps/api/core";
@@ -32,6 +33,19 @@ import {
 } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import toast from "solid-toast";
+import {
+	CAMERA_DEFAULT_SIZE,
+	CAMERA_PRESET_LARGE,
+	CAMERA_WINDOW_STATE_STORAGE_KEY,
+	CameraPreviewToolbar,
+	CameraResizeHandles,
+	type CameraWindowState,
+	cameraBorderRadius,
+	cameraToolbarScale,
+	clampCameraSize,
+	getDefaultCameraWindowState,
+	normalizeBackgroundBlurMode,
+} from "~/components/CameraPreviewChrome";
 import {
 	CROP_ZERO,
 	type CropBounds,
@@ -315,10 +329,8 @@ function Inner() {
 							Record using only your camera and microphone
 						</span>
 					</div>
-					<div class="w-full max-w-[480px] px-6 mb-4">
-						<div class="w-full aspect-video rounded-2xl border border-gray-6 bg-black overflow-hidden">
-							<CameraPreviewInline />
-						</div>
+					<div class="flex justify-center w-full px-6 mb-4">
+						<CameraPreviewInline />
 					</div>
 					<RecordingControls
 						target={{ variant: "cameraOnly" } as ScreenCaptureTarget}
@@ -1169,10 +1181,18 @@ const WS_STALL_TIMEOUT_MS = 2000;
 
 function CameraPreviewInline() {
 	const { rawOptions } = useRecordingOptions();
+	const [state, setState] = makePersisted(
+		createStore<CameraWindowState>(getDefaultCameraWindowState()),
+		{ name: CAMERA_WINDOW_STATE_STORAGE_KEY },
+	);
 	const [frame, setFrame] = createSignal<ImageData | null>(null);
 	const [connectionFailed, setConnectionFailed] = createSignal(false);
+	const [chromeVisible, setChromeVisible] = createSignal(false);
+	const [viewportSize, setViewportSize] = createSignal({
+		width: window.innerWidth,
+		height: window.innerHeight,
+	});
 	let canvasRef: HTMLCanvasElement | undefined;
-	let containerRef: HTMLDivElement | undefined;
 	let ws: WebSocket | undefined;
 	let retryCount = 0;
 	let reconnectTimeoutId: ReturnType<typeof setTimeout> | undefined;
@@ -1186,6 +1206,36 @@ function CameraPreviewInline() {
 	const cameraWsPort = window.__CAP__?.cameraWsPort;
 	const hasCameraSelected = () => rawOptions.cameraID !== null;
 
+	createEventListener(window, "resize", () => {
+		setViewportSize({
+			width: window.innerWidth,
+			height: window.innerHeight,
+		});
+	});
+
+	createEffect(() => {
+		let currentSize = state.size as number | string;
+		if (typeof currentSize !== "number" || Number.isNaN(currentSize)) {
+			currentSize =
+				currentSize === "lg" ? CAMERA_PRESET_LARGE : CAMERA_DEFAULT_SIZE;
+			setState("size", currentSize);
+			return;
+		}
+
+		const clampedSize = clampCameraSize(currentSize);
+		if (clampedSize !== currentSize) {
+			setState("size", clampedSize);
+			return;
+		}
+
+		commands.setCameraPreviewState({
+			size: state.size,
+			shape: state.shape,
+			mirrored: state.mirrored,
+			background_blur: normalizeBackgroundBlurMode(state.backgroundBlur),
+		});
+	});
+
 	const getReusableFrame = (width: number, height: number) => {
 		if (
 			!reusableFrame ||
@@ -1434,44 +1484,39 @@ function CameraPreviewInline() {
 		ws?.close();
 	});
 
-	const [containerSize, setContainerSize] = createSignal<{
-		width: number;
-		height: number;
-	} | null>(null);
-
-	onMount(() => {
-		if (!containerRef) return;
-		const observer = new ResizeObserver(() => {
-			if (!containerRef) return;
-			const rect = containerRef.getBoundingClientRect();
-			setContainerSize({ width: rect.width, height: rect.height });
-		});
-		observer.observe(containerRef);
-		onCleanup(() => observer.disconnect());
-	});
-
-	const canvasStyle = () => {
+	const previewDimensions = () => {
 		const f = frame();
-		const cs = containerSize();
-		if (!f || !cs || cs.width === 0 || cs.height === 0) return {};
+		const aspect = f ? f.width / f.height : 16 / 9;
+		const size = clampCameraSize(state.size);
+		const width = state.shape === "full" && aspect >= 1 ? size * aspect : size;
+		const height =
+			state.shape === "full" ? (aspect >= 1 ? size : size / aspect) : size;
+		const viewport = viewportSize();
+		const maxWidth = Math.max(160, viewport.width - 48);
+		const maxHeight = Math.max(160, viewport.height - 320);
+		const scale = Math.min(1, maxWidth / width, maxHeight / height);
 
-		const frameAspect = f.width / f.height;
-		const containerAspect = cs.width / cs.height;
-
-		let displayWidth: number;
-		let displayHeight: number;
+		return {
+			height: Math.round(height * scale),
+			width: Math.round(width * scale),
+		};
+	};
 
-		if (frameAspect > containerAspect) {
-			displayWidth = cs.width;
-			displayHeight = cs.width / frameAspect;
-		} else {
-			displayHeight = cs.height;
-			displayWidth = cs.height * frameAspect;
-		}
+	const previewFrameStyle = () => {
+		const dimensions = previewDimensions();
+		return {
+			"border-radius": cameraBorderRadius(state),
+			height: `${dimensions.height}px`,
+			width: `${dimensions.width}px`,
+		};
+	};
 
+	const canvasStyle = () => {
 		return {
-			width: `${Math.round(displayWidth)}px`,
-			height: `${Math.round(displayHeight)}px`,
+			height: "100%",
+			"object-fit": "cover" as const,
+			transform: state.mirrored ? "scaleX(-1)" : "scaleX(1)",
+			width: "100%",
 		};
 	};
 
@@ -1496,41 +1541,68 @@ function CameraPreviewInline() {
 
 	return (
 		<div
-			ref={containerRef}
-			class="flex items-center justify-center w-full h-full bg-black"
+			class="flex flex-col items-center max-w-full"
+			onPointerMove={() => setChromeVisible(true)}
+			onPointerLeave={() => setChromeVisible(false)}
+			onPointerCancel={() => setChromeVisible(false)}
 		>
-			<Show
-				when={hasCameraSelected()}
-				fallback={
-					<div class="flex flex-col items-center gap-2 text-center px-4">
-						<IconCapCamera class="size-8 text-gray-9 mb-2" />
-						<div class="text-sm text-gray-11">Please select a camera</div>
-					</div>
-				}
-			>
-				<Show
-					when={!connectionFailed()}
-					fallback={
-						<div class="flex flex-col items-center gap-2 text-center px-4">
-							<div class="text-sm text-red-400">Camera connection failed</div>
-							<button
-								type="button"
-								onClick={handleRetryConnection}
-								class="text-xs text-blue-400 hover:text-blue-300 underline"
-							>
-								Try again
-							</button>
-						</div>
-					}
+			<div class="h-14 flex items-center justify-center">
+				<CameraPreviewToolbar
+					state={state}
+					setState={setState}
+					visible={chromeVisible()}
+					scale={cameraToolbarScale(state.size)}
+				/>
+			</div>
+			<div class="relative shadow-lg" style={previewFrameStyle()}>
+				<div
+					class="flex items-center justify-center w-full h-full overflow-hidden border border-gray-6 bg-black text-gray-11"
+					style={{ "border-radius": "inherit" }}
 				>
 					<Show
-						when={frame()}
-						fallback={<div class="text-sm text-gray-11">Loading camera...</div>}
+						when={hasCameraSelected()}
+						fallback={
+							<div class="flex flex-col items-center gap-2 text-center px-4">
+								<IconCapCamera class="size-8 text-gray-9 mb-2" />
+								<div class="text-sm text-gray-11">Please select a camera</div>
+							</div>
+						}
 					>
-						<canvas ref={canvasRef} style={canvasStyle()} />
+						<Show
+							when={!connectionFailed()}
+							fallback={
+								<div class="flex flex-col items-center gap-2 text-center px-4">
+									<div class="text-sm text-red-400">
+										Camera connection failed
+									</div>
+									<button
+										type="button"
+										onClick={handleRetryConnection}
+										class="text-xs text-blue-400 hover:text-blue-300 underline"
+									>
+										Try again
+									</button>
+								</div>
+							}
+						>
+							<Show
+								when={frame()}
+								fallback={
+									<div class="text-sm text-gray-11">Loading camera...</div>
+								}
+							>
+								<canvas ref={canvasRef} style={canvasStyle()} />
+							</Show>
+						</Show>
 					</Show>
-				</Show>
-			</Show>
+				</div>
+				<CameraResizeHandles
+					state={state}
+					setState={setState}
+					toolbarHeight={0}
+					visible={chromeVisible()}
+				/>
+			</div>
 		</div>
 	);
 }