From f30090bf88df399c328ce95250bc8f9ed9d682e6 Mon Sep 17 00:00:00 2001
From: makaradam <makar.adam0213@gmail.com>
Date: Sat, 2 May 2026 11:05:48 +0200
Subject: [PATCH] fix: sanitize customScale in getZoomScale and fix
 isCustomActive styling

---
 src/components/video-editor/SettingsPanel.tsx | 9 ++++++---
 src/components/video-editor/types.ts          | 6 +++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 36fa255..b6aff5f 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -473,6 +473,9 @@ 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 = () => {
@@ -644,7 +647,7 @@ export function SettingsPanel({
 								<span
 									className={cn(
 										"text-xs font-mono font-semibold tabular-nums",
-										selectedZoomCustomScale != null ? "text-[#34B27B]" : "text-slate-400",
+										isCustomActive ? "text-[#34B27B]" : "text-slate-400",
 									)}
 								>
 									{(
@@ -675,7 +678,7 @@ export function SettingsPanel({
 									<SliderPrimitive.Range
 										className={cn(
 											"absolute h-full transition-colors duration-150",
-											selectedZoomCustomScale != null ? "bg-[#34B27B]" : "bg-white/20",
+											isCustomActive ? "bg-[#34B27B]" : "bg-white/20",
 										)}
 									/>
 								</SliderPrimitive.Track>
@@ -684,7 +687,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",
-										selectedZoomCustomScale != null
+										isCustomActive
 											? "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/types.ts b/src/components/video-editor/types.ts
index 9fc03e6..cbae93c 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -365,7 +365,11 @@ export const DEFAULT_ZOOM_DEPTH: ZoomDepth = 3;
 
 /** Returns the effective zoom scale for a region, preferring customScale over the preset. */
 export function getZoomScale(region: ZoomRegion): number {
-	return region.customScale ?? ZOOM_DEPTH_SCALES[region.depth];
+	if (region.customScale != null) {
+		const clamped = Math.max(MIN_ZOOM_SCALE, Math.min(MAX_ZOOM_SCALE, region.customScale));
+		if (Number.isFinite(clamped)) return clamped;
+	}
+	return ZOOM_DEPTH_SCALES[region.depth];
 }
 
 export function clampFocusToDepth(focus: ZoomFocus, _depth: ZoomDepth): ZoomFocus {