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 && (