feat(recording): add zoom marker shortcut while recording

electron/ipc/cursor/telemetry.ts

@@ -60,7 +60,8 @@ export function normalizeCursorTelemetrySamples(rawSamples: unknown): CursorTele
 					point.interactionType === "right-click" ||
 					point.interactionType === "middle-click" ||
 					point.interactionType === "move" ||
-					point.interactionType === "mouseup"
+					point.interactionType === "mouseup" ||
+					point.interactionType === "manual-zoom"
 						? point.interactionType
 						: undefined,
 				cursorType:
@@ -253,7 +254,12 @@ export function pushCursorSample(
 	} as CursorTelemetryPoint);
 
 	if (activeCursorSamples.length > MAX_CURSOR_SAMPLES) {
-		activeCursorSamples.shift();
+		const oldestNonMarkerIndex = activeCursorSamples.findIndex(
+			(sample) => sample.interactionType !== "manual-zoom",
+		);
+		if (oldestNonMarkerIndex >= 0) {
+			activeCursorSamples.splice(oldestNonMarkerIndex, 1);
+		}
 	}
 }
 
@@ -262,6 +268,21 @@ export function sampleCursorPoint() {
 	pushCursorSample(point.cx, point.cy, getCursorCaptureElapsedMs(), "move");
 }
 
+export function captureManualZoomMarker() {
+	if (!isCursorCaptureActive) {
+		return false;
+	}
+
+	const point = getNormalizedCursorPoint();
+	pushCursorSample(
+		point.cx,
+		point.cy,
+		getCursorCaptureElapsedMs(),
+		"manual-zoom",
+	);
+	return true;
+}
+
 export async function persistPendingCursorTelemetry(videoPath: string) {
 	const telemetryPath = getTelemetryPathForVideo(videoPath);
 	if (pendingCursorSamples.length > 0) {

electron/ipc/handlers.ts

@@ -1,4 +1,8 @@
 import { BrowserWindow } from "electron";
+import {
+	registerRecordingZoomShortcut,
+	unregisterRecordingZoomShortcut,
+} from "../recordingZoomShortcut";
 import { registerAnnouncementHandlers } from "./register/announcements";
 import { registerAssetHandlers } from "./register/assets";
 import { registerCaptionHandlers } from "./register/captions";
@@ -64,7 +68,14 @@ export function registerIpcHandlers(
 		createSourceSelectorWindow,
 		getSourceSelectorWindow,
 	});
-	registerRecordingHandlers(onRecordingStateChange);
+	registerRecordingHandlers((recording, sourceName) => {
+		if (recording) {
+			registerRecordingZoomShortcut();
+		} else {
+			unregisterRecordingZoomShortcut();
+		}
+		onRecordingStateChange?.(recording, sourceName);
+	});
 	registerPermissionHandlers();
 	registerAnnouncementHandlers();
 	registerAssetHandlers();

electron/ipc/types.ts

@@ -97,6 +97,7 @@ export type CursorInteractionType =
 	| "double-click"
 	| "right-click"
 	| "middle-click"
+	| "manual-zoom"
 	| "mouseup";
 
 export interface CursorTelemetryPoint {

electron/recordingZoomShortcut.ts

@@ -0,0 +1,59 @@
+import { app, globalShortcut } from "electron";
+import { captureManualZoomMarker } from "./ipc/cursor/telemetry";
+
+const RECORDING_ZOOM_SHORTCUT = "CommandOrControl+Alt+Z";
+const RECORDING_ZOOM_SHORTCUT_THROTTLE_MS = 500;
+
+let recordingZoomShortcutRegistered = false;
+let lastRecordingZoomShortcutAtMs = 0;
+let beforeQuitHookInstalled = false;
+
+function addRecordingZoomMarkerFromShortcut() {
+	const now = Date.now();
+	if (now - lastRecordingZoomShortcutAtMs < RECORDING_ZOOM_SHORTCUT_THROTTLE_MS) {
+		return;
+	}
+
+	lastRecordingZoomShortcutAtMs = now;
+	if (captureManualZoomMarker()) {
+		console.log(`[recording-zoom] Added zoom marker via ${RECORDING_ZOOM_SHORTCUT}`);
+	}
+}
+
+function ensureBeforeQuitHook() {
+	if (beforeQuitHookInstalled) {
+		return;
+	}
+	beforeQuitHookInstalled = true;
+	app.on("before-quit", () => {
+		unregisterRecordingZoomShortcut();
+	});
+}
+
+export function registerRecordingZoomShortcut() {
+	ensureBeforeQuitHook();
+	if (recordingZoomShortcutRegistered) {
+		return;
+	}
+
+	recordingZoomShortcutRegistered = globalShortcut.register(
+		RECORDING_ZOOM_SHORTCUT,
+		addRecordingZoomMarkerFromShortcut,
+	);
+
+	if (!recordingZoomShortcutRegistered) {
+		console.warn(
+			`[recording-zoom] Failed to register ${RECORDING_ZOOM_SHORTCUT}; another app may already be using it.`,
+		);
+	}
+}
+
+export function unregisterRecordingZoomShortcut() {
+	if (!recordingZoomShortcutRegistered) {
+		return;
+	}
+
+	globalShortcut.unregister(RECORDING_ZOOM_SHORTCUT);
+	recordingZoomShortcutRegistered = false;
+	lastRecordingZoomShortcutAtMs = 0;
+}

src/components/video-editor/VideoEditor.tsx

@@ -86,6 +86,8 @@ export default function VideoEditor() {
 		nextAnnotationZIndexRef,
 		autoSuggestedVideoPathRef,
 		pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef,
+		manualRecordingZoomsAppliedVideoPathRef,
 		pendingFreshRecordingAutoSuggestTimeoutRef,
 		pendingFreshRecordingAutoSuggestTelemetryCountRef,
 		timelineRef,
@@ -151,6 +153,7 @@ export default function VideoEditor() {
 
 	useEffect(() => {
 		autoSuggestedVideoPathRef.current = null;
+		manualRecordingZoomsAppliedVideoPathRef.current = null;
 		pendingFreshRecordingAutoSuggestTelemetryCountRef.current = 0;
 		if (pendingFreshRecordingAutoSuggestTimeoutRef.current !== null) {
 			window.clearTimeout(pendingFreshRecordingAutoSuggestTimeoutRef.current);
@@ -260,6 +263,8 @@ export default function VideoEditor() {
 		autoFullTrackClipIdRef,
 		autoFullTrackClipEndMsRef,
 		pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef,
+		manualRecordingZoomsAppliedVideoPathRef,
 		pendingFreshRecordingAutoSuggestTelemetryCountRef,
 		autoSuggestedVideoPathRef,
 		applySessionPresentation,
@@ -304,6 +309,8 @@ export default function VideoEditor() {
 		autoFullTrackClipEndMsRef,
 		autoSuggestedVideoPathRef,
 		pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef,
+		manualRecordingZoomsAppliedVideoPathRef,
 		pendingFreshRecordingAutoSuggestTimeoutRef,
 		pendingFreshRecordingAutoSuggestTelemetryCountRef,
 		handleUndo,

src/components/video-editor/hooks/useFreshRecordingManualZoom.ts

@@ -0,0 +1,99 @@
+import {
+	type Dispatch,
+	type MutableRefObject,
+	type SetStateAction,
+	useEffect,
+} from "react";
+import { buildManualRecordingZoomRegions } from "../timeline/recordingZoomMarkers";
+import {
+	clampFocusToDepth,
+	DEFAULT_ZOOM_DEPTH,
+	type CursorTelemetryPoint,
+	type ZoomRegion,
+} from "../types";
+
+interface UseFreshRecordingManualZoomParams {
+	videoPath: string | null;
+	loading: boolean;
+	duration: number;
+	normalizedCursorTelemetry: CursorTelemetryPoint[];
+	zoomRegions: ZoomRegion[];
+	setZoomRegions: Dispatch<SetStateAction<ZoomRegion[]>>;
+	nextZoomIdRef: MutableRefObject<number>;
+	autoSuggestedVideoPathRef: MutableRefObject<string | null>;
+	pendingFreshRecordingAutoZoomPathRef: MutableRefObject<string | null>;
+	pendingFreshRecordingManualZoomPathRef: MutableRefObject<string | null>;
+	manualRecordingZoomsAppliedVideoPathRef: MutableRefObject<string | null>;
+}
+
+export function useFreshRecordingManualZoom({
+	videoPath,
+	loading,
+	duration,
+	normalizedCursorTelemetry,
+	zoomRegions,
+	setZoomRegions,
+	nextZoomIdRef,
+	autoSuggestedVideoPathRef,
+	pendingFreshRecordingAutoZoomPathRef,
+	pendingFreshRecordingManualZoomPathRef,
+	manualRecordingZoomsAppliedVideoPathRef,
+}: UseFreshRecordingManualZoomParams) {
+	useEffect(() => {
+		if (!videoPath || loading || duration <= 0 || normalizedCursorTelemetry.length === 0) {
+			return;
+		}
+
+		if (pendingFreshRecordingManualZoomPathRef.current !== videoPath) {
+			return;
+		}
+
+		if (manualRecordingZoomsAppliedVideoPathRef.current === videoPath) {
+			return;
+		}
+
+		const totalMs = Math.round(duration * 1000);
+		const manualRegions = buildManualRecordingZoomRegions({
+			cursorTelemetry: normalizedCursorTelemetry,
+			totalMs,
+			defaultDurationMs: Math.min(1000, totalMs),
+			reservedSpans: zoomRegions.map((region) => ({
+				start: region.startMs,
+				end: region.endMs,
+			})),
+		});
+
+		manualRecordingZoomsAppliedVideoPathRef.current = videoPath;
+		pendingFreshRecordingManualZoomPathRef.current = null;
+
+		if (manualRegions.length === 0) {
+			return;
+		}
+
+		setZoomRegions((previous) => [
+			...previous,
+			...manualRegions.map((region) => ({
+				id: `zoom-${nextZoomIdRef.current++}`,
+				startMs: region.start,
+				endMs: region.end,
+				depth: DEFAULT_ZOOM_DEPTH,
+				focus: clampFocusToDepth(region.focus, DEFAULT_ZOOM_DEPTH),
+				mode: "manual" as const,
+			})),
+		]);
+		autoSuggestedVideoPathRef.current = videoPath;
+		pendingFreshRecordingAutoZoomPathRef.current = null;
+	}, [
+		videoPath,
+		loading,
+		duration,
+		normalizedCursorTelemetry,
+		zoomRegions,
+		setZoomRegions,
+		nextZoomIdRef,
+		autoSuggestedVideoPathRef,
+		pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef,
+		manualRecordingZoomsAppliedVideoPathRef,
+	]);
+}

src/components/video-editor/hooks/useTimelineEditingController.ts

@@ -18,6 +18,7 @@ import { useCursorTelemetry } from "./useCursorTelemetry";
 import { useEditorGlobalInteractions } from "./useEditorGlobalInteractions";
 import { useEditorPlaybackControls } from "./useEditorPlaybackControls";
 import { useFreshRecordingAutoZoom } from "./useFreshRecordingAutoZoom";
+import { useFreshRecordingManualZoom } from "./useFreshRecordingManualZoom";
 import { useTimelineProjection } from "./useTimelineProjection";
 import { useZoomRegionCommands } from "./useZoomRegionCommands";
 
@@ -51,6 +52,8 @@ type Input = {
 	autoFullTrackClipEndMsRef: MutableRefObject<number | null>;
 	autoSuggestedVideoPathRef: MutableRefObject<string | null>;
 	pendingFreshRecordingAutoZoomPathRef: MutableRefObject<string | null>;
+	pendingFreshRecordingManualZoomPathRef: MutableRefObject<string | null>;
+	manualRecordingZoomsAppliedVideoPathRef: MutableRefObject<string | null>;
 	pendingFreshRecordingAutoSuggestTimeoutRef: MutableRefObject<number | null>;
 	pendingFreshRecordingAutoSuggestTelemetryCountRef: MutableRefObject<number>;
 	handleUndo: () => void;
@@ -155,6 +158,19 @@ export function useTimelineEditingController(input: Input) {
 			timeline.setSelectedCaptionId,
 		],
 	);
+	useFreshRecordingManualZoom({
+		videoPath: input.videoPath,
+		loading: input.loading,
+		duration: input.duration,
+		normalizedCursorTelemetry: cursor.normalizedCursorTelemetry,
+		zoomRegions: timeline.zoomRegions,
+		setZoomRegions: timeline.setZoomRegions,
+		nextZoomIdRef: input.nextZoomIdRef,
+		autoSuggestedVideoPathRef: input.autoSuggestedVideoPathRef,
+		pendingFreshRecordingAutoZoomPathRef: input.pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef: input.pendingFreshRecordingManualZoomPathRef,
+		manualRecordingZoomsAppliedVideoPathRef: input.manualRecordingZoomsAppliedVideoPathRef,
+	});
 	const freshZoom = useFreshRecordingAutoZoom({
 		appPlatform: input.appPlatform,
 		videoPath: input.videoPath,

src/components/video-editor/project/useEditorProjectController.ts

@@ -64,6 +64,8 @@ type Input = {
 	autoFullTrackClipIdRef: MutableRefObject<string | null>;
 	autoFullTrackClipEndMsRef: MutableRefObject<number | null>;
 	pendingFreshRecordingAutoZoomPathRef: MutableRefObject<string | null>;
+	pendingFreshRecordingManualZoomPathRef: MutableRefObject<string | null>;
+	manualRecordingZoomsAppliedVideoPathRef: MutableRefObject<string | null>;
 	pendingFreshRecordingAutoSuggestTelemetryCountRef: MutableRefObject<number>;
 	autoSuggestedVideoPathRef: MutableRefObject<string | null>;
 	applySessionPresentation: (
@@ -126,6 +128,8 @@ export function useEditorProjectController(input: Input) {
 			autoFullTrackClipIdRef: input.autoFullTrackClipIdRef,
 			autoFullTrackClipEndMsRef: input.autoFullTrackClipEndMsRef,
 			pendingFreshRecordingAutoZoomPathRef: input.pendingFreshRecordingAutoZoomPathRef,
+			pendingFreshRecordingManualZoomPathRef: input.pendingFreshRecordingManualZoomPathRef,
+			manualRecordingZoomsAppliedVideoPathRef: input.manualRecordingZoomsAppliedVideoPathRef,
 			pendingFreshRecordingAutoSuggestTelemetryCountRef:
 				input.pendingFreshRecordingAutoSuggestTelemetryCountRef,
 			autoSuggestedVideoPathRef: input.autoSuggestedVideoPathRef,
@@ -148,6 +152,7 @@ export function useEditorProjectController(input: Input) {
 		devConfig: input.devConfig,
 		videoSourcePath: input.videoSourcePath,
 		pendingFreshRecordingAutoZoomPathRef: input.pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef: input.pendingFreshRecordingManualZoomPathRef,
 		applyLoadedProject: lifecycle.applyLoadedProject,
 		resetSourceScopedEditorState: lifecycle.resetSourceScopedEditorState,
 		applySessionPresentation: input.applySessionPresentation,
@@ -202,6 +207,7 @@ export function useEditorProjectController(input: Input) {
 		appearance: input.appearance,
 		videoPlaybackRef: input.videoPlaybackRef,
 		pendingFreshRecordingAutoZoomPathRef: input.pendingFreshRecordingAutoZoomPathRef,
+		pendingFreshRecordingManualZoomPathRef: input.pendingFreshRecordingManualZoomPathRef,
 		hasUnsavedChanges,
 		setIsPlaying: input.setIsPlaying,
 		setCurrentTime: input.setCurrentTime,