From 0c454f0d1f75f3cc4c68c1b775bc98d2d15917cc Mon Sep 17 00:00:00 2001
From: nietowl <nietowl@users.noreply.github.com>
Date: Mon, 14 Sep 2026 14:29:37 +0530
Subject: [PATCH] Add clear-all-zooms action for the editor timeline.

Lets users remove every zoom region in one click or with Ctrl+Shift+Backspace (fixes #548).
---
 src/components/video-editor/SettingsPanel.tsx     | 15 +++++++++++++++
 .../video-editor/hooks/useZoomRegionCommands.ts   |  6 ++++++
 .../video-editor/layout/EditorPreviewPanel.tsx    | 12 ++++++++++++
 .../video-editor/layout/EditorTimelinePanel.tsx   |  1 +
 .../layout/useEditorSettingsPanelProps.ts         |  2 ++
 .../video-editor/timeline/TimelineEditor.tsx      |  4 ++++
 .../timeline/hooks/useTimelineEditorRuntime.ts    |  9 +++++++++
 .../hooks/useTimelineKeyboardShortcuts.ts         | 12 ++++++++++++
 src/i18n/locales/en/settings.json                 |  1 +
 src/i18n/locales/en/timeline.json                 |  3 ++-
 src/lib/shortcuts.ts                              |  5 +++++
 11 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 586e09d2a..eb172ef57 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -519,6 +519,8 @@ interface SettingsPanelProps {
 	selectedZoomMode?: ZoomMode | null;
 	onZoomModeChange?: (mode: ZoomMode) => void;
 	onZoomDelete?: (id: string) => void;
+	onClearAllZooms?: () => void;
+	hasZoomRegions?: boolean;
 	selectedClipId?: string | null;
 	selectedClipSpeed?: number | null;
 	selectedClipMuted?: boolean | null;
@@ -979,6 +981,8 @@ export function SettingsPanel({
 	selectedZoomMode,
 	onZoomModeChange,
 	onZoomDelete,
+	onClearAllZooms,
+	hasZoomRegions = false,
 	selectedClipId,
 	selectedClipSpeed,
 	selectedClipMuted,
@@ -3800,6 +3804,17 @@ export function SettingsPanel({
 						{tSettings("zoom.deleteZoom", "Delete Zoom")}
 					</Button>
 				)}
+				{activeEffectSection === "zoom" && hasZoomRegions && (
+					<Button
+						onClick={() => onClearAllZooms?.()}
+						variant="destructive"
+						size="sm"
+						className="h-8 w-full gap-2 border border-red-500/20 bg-red-500/10 text-xs text-red-400 transition-all hover:border-red-500/30 hover:bg-red-500/20"
+					>
+						<Trash2 className="h-3 w-3" />
+						{tSettings("zoom.clearAllZooms", "Clear All Zooms")}
+					</Button>
+				)}
 				{activeEffectSection === "audio" && selectedAudioId && (
 					<Button
 						onClick={() => {
diff --git a/src/components/video-editor/hooks/useZoomRegionCommands.ts b/src/components/video-editor/hooks/useZoomRegionCommands.ts
index 0fadb5785..eac1167d3 100644
--- a/src/components/video-editor/hooks/useZoomRegionCommands.ts
+++ b/src/components/video-editor/hooks/useZoomRegionCommands.ts
@@ -170,6 +170,11 @@ export function useZoomRegionCommands({
 		[selectedZoomId, setSelectedZoomId, setZoomRegions],
 	);
 
+	const handleClearAllZooms = useCallback(() => {
+		setZoomRegions([]);
+		setSelectedZoomId(null);
+	}, [setSelectedZoomId, setZoomRegions]);
+
 	return {
 		handleSelectZoom,
 		handleZoomAdded,
@@ -179,5 +184,6 @@ export function useZoomRegionCommands({
 		handleZoomDepthChange,
 		handleZoomModeChange,
 		handleZoomDelete,
+		handleClearAllZooms,
 	};
 }
diff --git a/src/components/video-editor/layout/EditorPreviewPanel.tsx b/src/components/video-editor/layout/EditorPreviewPanel.tsx
index 27fabb64a..c0ec0e604 100644
--- a/src/components/video-editor/layout/EditorPreviewPanel.tsx
+++ b/src/components/video-editor/layout/EditorPreviewPanel.tsx
@@ -3,6 +3,7 @@ import {
 	Check,
 	Crop,
 	MagicWand,
+	MagnifyingGlassMinus,
 	MagnifyingGlassPlus,
 	Pause,
 	Play,
@@ -287,6 +288,17 @@ export function EditorPreviewPanel(props: Props) {
 					>
 						<MagicWand className="h-4 w-4" />
 					</Button>
+					<Button
+						onClick={() => timelineRef.current?.clearAllZooms()}
+						variant="ghost"
+						size="icon"
+						disabled={timeline.zoomRegions.length === 0}
+						className="h-7 w-7 rounded-full text-muted-foreground transition-all hover:bg-red-500/10 hover:text-red-400 disabled:opacity-40"
+						title={t("timeline.zoom.clearAllZooms")}
+						aria-label={t("timeline.zoom.clearAllZooms")}
+					>
+						<MagnifyingGlassMinus className="h-4 w-4" />
+					</Button>
 					<Button
 						onClick={() => timelineRef.current?.splitClip()}
 						variant="ghost"
diff --git a/src/components/video-editor/layout/EditorTimelinePanel.tsx b/src/components/video-editor/layout/EditorTimelinePanel.tsx
index 78bfca53e..154f9022a 100644
--- a/src/components/video-editor/layout/EditorTimelinePanel.tsx
+++ b/src/components/video-editor/layout/EditorTimelinePanel.tsx
@@ -75,6 +75,7 @@ export function EditorTimelinePanel(props: Props) {
 				onZoomSuggested={zoomCommands.handleZoomSuggested}
 				onZoomSpanChange={zoomCommands.handleZoomSpanChange}
 				onZoomDelete={zoomCommands.handleZoomDelete}
+				onClearAllZooms={zoomCommands.handleClearAllZooms}
 				selectedZoomId={timeline.selectedZoomId}
 				onSelectZoom={zoomCommands.handleSelectZoom}
 				trimRegions={timeline.trimRegions}
diff --git a/src/components/video-editor/layout/useEditorSettingsPanelProps.ts b/src/components/video-editor/layout/useEditorSettingsPanelProps.ts
index fc7427c26..277c041cb 100644
--- a/src/components/video-editor/layout/useEditorSettingsPanelProps.ts
+++ b/src/components/video-editor/layout/useEditorSettingsPanelProps.ts
@@ -91,6 +91,8 @@ export function useEditorSettingsPanelProps(input: Input): ComponentProps<typeof
 		onZoomModeChange: (mode) =>
 			timeline.selectedZoomId && zoomCommands.handleZoomModeChange(mode),
 		onZoomDelete: zoomCommands.handleZoomDelete,
+		onClearAllZooms: zoomCommands.handleClearAllZooms,
+		hasZoomRegions: timeline.zoomRegions.length > 0,
 		selectedClipId: timeline.selectedClipId,
 		selectedClipSpeed: selectedClip?.speed ?? (timeline.selectedClipId ? 1 : null),
 		selectedClipMuted: selectedClip?.muted ?? (timeline.selectedClipId ? false : null),
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index 46a610f29..2181d739e 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -45,6 +45,7 @@ export interface TimelineEditorProps {
 	onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
 	onZoomSpanChange: (id: string, span: Span) => void;
 	onZoomDelete: (id: string) => void;
+	onClearAllZooms?: () => void;
 	selectedZoomId: string | null;
 	onSelectZoom: (id: string | null) => void;
 	trimRegions?: TrimRegion[];
@@ -106,6 +107,7 @@ function extractLocalPathFromMediaServerUrl(input: string | null | undefined): s
 export interface TimelineEditorHandle {
 	addZoom: () => void;
 	suggestZooms: () => void;
+	clearAllZooms: () => void;
 	splitClip: () => void;
 	addAnnotation: (trackIndex?: number) => void;
 	addAudio: (trackIndex?: number) => Promise<void>;
@@ -128,6 +130,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 			onZoomSuggested,
 			onZoomSpanChange,
 			onZoomDelete,
+			onClearAllZooms,
 			selectedZoomId,
 			onSelectZoom,
 			trimRegions = [],
@@ -367,6 +370,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 			onZoomSuggested,
 			onZoomSpanChange,
 			onZoomDelete,
+			onClearAllZooms,
 			selectedZoomId,
 			onSelectZoom,
 			trimRegions,
diff --git a/src/components/video-editor/timeline/hooks/useTimelineEditorRuntime.ts b/src/components/video-editor/timeline/hooks/useTimelineEditorRuntime.ts
index 9f7092db0..69ac07f43 100644
--- a/src/components/video-editor/timeline/hooks/useTimelineEditorRuntime.ts
+++ b/src/components/video-editor/timeline/hooks/useTimelineEditorRuntime.ts
@@ -37,6 +37,7 @@ interface UseTimelineEditorRuntimeParams {
 	onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
 	onZoomSpanChange: (id: string, span: Span) => void;
 	onZoomDelete: (id: string) => void;
+	onClearAllZooms?: () => void;
 	selectedZoomId: string | null;
 	onSelectZoom: (id: string | null) => void;
 	trimRegions: TrimRegion[];
@@ -87,6 +88,7 @@ export function useTimelineEditorRuntime({
 	onZoomSuggested,
 	onZoomSpanChange,
 	onZoomDelete,
+	onClearAllZooms,
 	selectedZoomId,
 	onSelectZoom,
 	trimRegions,
@@ -260,6 +262,10 @@ export function useTimelineEditorRuntime({
 		[videoDuration, totalMs, currentTimeMs, defaultRegionDurationMs, onAnnotationAdded],
 	);
 
+	const handleClearAllZooms = useCallback(() => {
+		onClearAllZooms?.();
+	}, [onClearAllZooms]);
+
 	useTimelineKeyboardShortcuts({
 		isMac,
 		keyShortcuts,
@@ -276,6 +282,7 @@ export function useTimelineEditorRuntime({
 		selectAllBlocksActive,
 		addKeyframe,
 		handleAddZoom,
+		handleClearAllZooms,
 		handleSplitClip,
 		handleAddAnnotation: () => handleAddAnnotation(),
 		deleteSelectedKeyframe,
@@ -292,6 +299,7 @@ export function useTimelineEditorRuntime({
 		() => ({
 			addZoom: handleAddZoom,
 			suggestZooms: handleSuggestZooms,
+			clearAllZooms: handleClearAllZooms,
 			splitClip: handleSplitClip,
 			addAnnotation: handleAddAnnotation,
 			addAudio: handleAddAudio,
@@ -301,6 +309,7 @@ export function useTimelineEditorRuntime({
 			handleAddAnnotation,
 			handleAddAudio,
 			handleAddZoom,
+			handleClearAllZooms,
 			handleSuggestZooms,
 			handleSplitClip,
 			keyframes,
diff --git a/src/components/video-editor/timeline/hooks/useTimelineKeyboardShortcuts.ts b/src/components/video-editor/timeline/hooks/useTimelineKeyboardShortcuts.ts
index 94cb39735..d3b3a4b13 100644
--- a/src/components/video-editor/timeline/hooks/useTimelineKeyboardShortcuts.ts
+++ b/src/components/video-editor/timeline/hooks/useTimelineKeyboardShortcuts.ts
@@ -19,6 +19,7 @@ interface UseTimelineKeyboardShortcutsParams {
 	selectAllBlocksActive: boolean;
 	addKeyframe: () => void;
 	handleAddZoom: () => void;
+	handleClearAllZooms: () => void;
 	handleSplitClip: () => void;
 	handleAddAnnotation: () => void;
 	deleteSelectedKeyframe: () => void;
@@ -46,6 +47,7 @@ export function useTimelineKeyboardShortcuts({
 	selectAllBlocksActive,
 	addKeyframe,
 	handleAddZoom,
+	handleClearAllZooms,
 	handleSplitClip,
 	handleAddAnnotation,
 	deleteSelectedKeyframe,
@@ -81,6 +83,15 @@ export function useTimelineKeyboardShortcuts({
 				return;
 			}
 
+			if (matchesShortcut(e, { key: "backspace", ctrl: true, shift: true }, isMac)) {
+				if (!hasAnyZoomBlocks) {
+					return;
+				}
+				e.preventDefault();
+				handleClearAllZooms();
+				return;
+			}
+
 			if (matchesShortcut(e, keyShortcuts.addKeyframe, isMac)) addKeyframe();
 			if (matchesShortcut(e, keyShortcuts.addZoom, isMac)) handleAddZoom();
 			if (matchesShortcut(e, keyShortcuts.splitClip, isMac)) handleSplitClip();
@@ -142,6 +153,7 @@ export function useTimelineKeyboardShortcuts({
 		deleteSelectedZoom,
 		handleAddAnnotation,
 		handleAddZoom,
+		handleClearAllZooms,
 		handleSplitClip,
 		hasAnyZoomBlocks,
 		isMac,
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 31953838b..f6f5420ce 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -9,6 +9,7 @@
 		"level": "Zoom Level",
 		"selectRegion": "Select a zoom region to adjust",
 		"deleteZoom": "Delete Zoom",
+		"clearAllZooms": "Clear All Zooms",
 		"modeAuto": "Auto",
 		"modeManual": "Manual",
 		"modeManualDescription": "Set a fixed focus point for this zoom",
diff --git a/src/i18n/locales/en/timeline.json b/src/i18n/locales/en/timeline.json
index 2fcda722d..2199574dc 100644
--- a/src/i18n/locales/en/timeline.json
+++ b/src/i18n/locales/en/timeline.json
@@ -14,7 +14,8 @@
 		"addedSuggestions": "Added {{count}} interaction-based zoom suggestion(s)",
 		"label": "Zoom {{index}}",
 		"addZoom": "Add Zoom (Z)",
-		"suggestZooms": "Suggest Zooms from Cursor"
+		"suggestZooms": "Suggest Zooms from Cursor",
+		"clearAllZooms": "Clear All Zooms (Ctrl+Shift+Backspace)"
 	},
 	"trim": {
 		"cannotPlace": "Cannot place trim here",
diff --git a/src/lib/shortcuts.ts b/src/lib/shortcuts.ts
index d43846930..680ea63c8 100644
--- a/src/lib/shortcuts.ts
+++ b/src/lib/shortcuts.ts
@@ -37,6 +37,11 @@ export const FIXED_SHORTCUTS: FixedShortcut[] = [
 		display: "Del / ⌫",
 		bindings: [{ key: "delete" }, { key: "backspace" }],
 	},
+	{
+		label: "Clear All Zooms",
+		display: "Ctrl + Shift + ⌫",
+		bindings: [{ key: "backspace", ctrl: true, shift: true }],
+	},
 	{ label: "Pan Timeline", display: "Shift + Scroll", bindings: [] },
 	{ label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
 ];