From f3dcbf2867cde8ce9dfca6e58883e216bb3e4dc9 Mon Sep 17 00:00:00 2001
From: makaradam <makar.adam0213@gmail.com>
Date: Sat, 2 May 2026 11:21:59 +0200
Subject: [PATCH] fix: address code review feedback on custom zoom slider

- Clamp and NaN-guard customScale in getZoomScale (defensive sanitization)
- Set customScale on preset button click so slider stays green
- Set customScale on new zoom region creation so slider lights up immediately
---
 src/components/video-editor/SettingsPanel.tsx | 9 +++------
 src/components/video-editor/VideoEditor.tsx   | 5 ++++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index b6aff5f..36fa255 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -473,9 +473,6 @@ export function SettingsPanel({
 	);
 
 	const zoomEnabled = Boolean(selectedZoomDepth);
-	const isCustomActive =
-		selectedZoomCustomScale != null &&
-		!Object.values(ZOOM_DEPTH_SCALES).some((s) => s === selectedZoomCustomScale);
 	const trimEnabled = Boolean(selectedTrimId);
 
 	const handleDeleteClick = () => {
@@ -647,7 +644,7 @@ export function SettingsPanel({
 								<span
 									className={cn(
 										"text-xs font-mono font-semibold tabular-nums",
-										isCustomActive ? "text-[#34B27B]" : "text-slate-400",
+										selectedZoomCustomScale != null ? "text-[#34B27B]" : "text-slate-400",
 									)}
 								>
 									{(
@@ -678,7 +675,7 @@ export function SettingsPanel({
 									<SliderPrimitive.Range
 										className={cn(
 											"absolute h-full transition-colors duration-150",
-											isCustomActive ? "bg-[#34B27B]" : "bg-white/20",
+											selectedZoomCustomScale != null ? "bg-[#34B27B]" : "bg-white/20",
 										)}
 									/>
 								</SliderPrimitive.Track>
@@ -687,7 +684,7 @@ export function SettingsPanel({
 										"block h-3.5 w-3.5 rounded-full border-2 shadow transition-all duration-150",
 										"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B]/50",
 										"disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing",
-										isCustomActive
+										selectedZoomCustomScale != null
 											? "border-[#34B27B] bg-[#34B27B] shadow-[0_0_6px_rgba(52,178,123,0.4)]"
 											: "border-white/20 bg-[#2a2a30] hover:border-white/40",
 									)}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 7e0393e..4f27eb2 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -75,6 +75,7 @@ import {
 	type Rotation3DPreset,
 	type SpeedRegion,
 	type TrimRegion,
+	ZOOM_DEPTH_SCALES,
 	type ZoomDepth,
 	type ZoomFocus,
 	type ZoomFocusMode,
@@ -732,6 +733,7 @@ export default function VideoEditor() {
 				startMs: Math.round(span.start),
 				endMs: Math.round(span.end),
 				depth: DEFAULT_ZOOM_DEPTH,
+				customScale: ZOOM_DEPTH_SCALES[DEFAULT_ZOOM_DEPTH],
 				focus: { cx: 0.5, cy: 0.5 },
 			};
 			pushState((prev) => ({ zoomRegions: [...prev.zoomRegions, newRegion] }));
@@ -751,6 +753,7 @@ export default function VideoEditor() {
 				startMs: Math.round(span.start),
 				endMs: Math.round(span.end),
 				depth: DEFAULT_ZOOM_DEPTH,
+				customScale: ZOOM_DEPTH_SCALES[DEFAULT_ZOOM_DEPTH],
 				focus: clampFocusToDepth(focus, DEFAULT_ZOOM_DEPTH),
 			};
 			pushState((prev) => ({ zoomRegions: [...prev.zoomRegions, newRegion] }));
@@ -834,7 +837,7 @@ export default function VideoEditor() {
 						? {
 								...region,
 								depth,
-								customScale: undefined,
+								customScale: ZOOM_DEPTH_SCALES[depth],
 								focus: clampFocusToDepth(region.focus, depth),
 							}
 						: region,