diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index f5afe35a4..bc7ebb07f 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -52,6 +52,7 @@ import type { PlaybackSpeed, WebcamLayoutPreset, ZoomDepth, + ZoomFocusMode, } from "./types"; import { SPEED_OPTIONS } from "./types"; @@ -92,6 +93,9 @@ interface SettingsPanelProps { onWallpaperChange: (path: string) => void; selectedZoomDepth?: ZoomDepth | null; onZoomDepthChange?: (depth: ZoomDepth) => void; + selectedZoomFocusMode?: ZoomFocusMode | null; + onZoomFocusModeChange?: (mode: ZoomFocusMode) => void; + hasCursorTelemetry?: boolean; selectedZoomId?: string | null; onZoomDelete?: (id: string) => void; selectedTrimId?: string | null; @@ -161,6 +165,9 @@ export function SettingsPanel({ onWallpaperChange, selectedZoomDepth, onZoomDepthChange, + selectedZoomFocusMode, + onZoomFocusModeChange, + hasCursorTelemetry = false, selectedZoomId, onZoomDelete, selectedTrimId, @@ -500,6 +507,41 @@ export function SettingsPanel({ {!zoomEnabled && (

{t("zoom.selectRegion")}

)} + {zoomEnabled && hasCursorTelemetry && ( +
+ + {t("zoom.focusMode.title")} + +
+ {(["manual", "auto"] as const).map((mode) => { + const isActive = selectedZoomFocusMode === mode; + return ( + + ); + })} +
+ {selectedZoomFocusMode === "auto" && ( +

+ {t("zoom.focusMode.autoDescription")} +

+ )} +
+ )} {zoomEnabled && (