diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index f5afe35..bec50c2 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -92,6 +92,9 @@ interface SettingsPanelProps { onWallpaperChange: (path: string) => void; selectedZoomDepth?: ZoomDepth | null; onZoomDepthChange?: (depth: ZoomDepth) => void; + selectedZoomFocusMode?: import("./types").ZoomFocusMode | null; + onZoomFocusModeChange?: (mode: import("./types").ZoomFocusMode) => void; + hasCursorTelemetry?: boolean; selectedZoomId?: string | null; onZoomDelete?: (id: string) => void; selectedTrimId?: string | null; @@ -161,6 +164,9 @@ export function SettingsPanel({ onWallpaperChange, selectedZoomDepth, onZoomDepthChange, + selectedZoomFocusMode, + onZoomFocusModeChange, + hasCursorTelemetry = false, selectedZoomId, onZoomDelete, selectedTrimId, @@ -500,6 +506,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 && (