From 112f02fe032de8a970cd9d022032bd959f5cbb9f Mon Sep 17 00:00:00 2001
From: moncef <meharzimoncef57@gmail.com>
Date: Tue, 7 Apr 2026 00:30:23 +0100
Subject: [PATCH 1/4] feat: implement video editor timeline components with
 interactive zoom, trim, and speed region controls.

---
 src/components/video-editor/SettingsPanel.tsx | 47 ++++++++-
 src/components/video-editor/VideoEditor.tsx   | 31 +++++-
 src/components/video-editor/timeline/Item.tsx | 99 ++++++++++++++++++-
 .../video-editor/timeline/TimelineEditor.tsx  | 12 +++
 src/components/video-editor/types.ts          |  2 +
 .../videoPlayback/zoomRegionUtils.ts          | 33 ++++---
 src/i18n/locales/en/settings.json             |  7 ++
 src/i18n/locales/es/settings.json             |  7 ++
 src/i18n/locales/zh-CN/settings.json          |  7 ++
 9 files changed, 230 insertions(+), 15 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 7e556b8..34adddd 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -150,6 +150,9 @@ interface SettingsPanelProps {
 	onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
 	webcamMaskShape?: import("./types").WebcamMaskShape;
 	onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
+	selectedZoomInDuration?: number;
+	selectedZoomOutDuration?: number;
+	onZoomDurationChange?: (zoomIn: number, zoomOut: number) => void;
 }
 
 export default SettingsPanel;
@@ -163,6 +166,14 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
 	{ depth: 6, label: "5×" },
 ];
 
+// TODO: make this configurable
+const ZOOM_SPEED_OPTIONS = [
+	{ label: "Instant", zoomIn: 0, zoomOut: 0 },
+	{ label: "Fast", zoomIn: 500, zoomOut: 350 },
+	{ label: "Smooth", zoomIn: 1522, zoomOut: 1015 },
+	{ label: "Lazy", zoomIn: 3000, zoomOut: 2000 },
+];
+
 export function SettingsPanel({
 	selected,
 	onWallpaperChange,
@@ -223,6 +234,9 @@ export function SettingsPanel({
 	onWebcamLayoutPresetChange,
 	webcamMaskShape = "rectangle",
 	onWebcamMaskShapeChange,
+	selectedZoomInDuration,
+	selectedZoomOutDuration,
+	onZoomDurationChange,
 }: SettingsPanelProps) {
 	const t = useScopedT("settings");
 	const [wallpaperPaths, setWallpaperPaths] = useState<string[]>([]);
@@ -547,6 +561,37 @@ export function SettingsPanel({
 							)}
 						</div>
 					)}
+
+					{zoomEnabled && (
+						<div className="mt-3">
+							<span className="text-sm font-medium text-slate-200 mb-2 block">
+								{t("zoom.speed.title") || "Zoom Speed"}
+							</span>
+							<div className="grid grid-cols-4 gap-1.5">
+								{ZOOM_SPEED_OPTIONS.map((opt) => {
+									const isActive =
+										selectedZoomInDuration === opt.zoomIn &&
+										selectedZoomOutDuration === opt.zoomOut;
+									return (
+										<Button
+											key={opt.label}
+											type="button"
+											onClick={() => onZoomDurationChange?.(opt.zoomIn, opt.zoomOut)}
+											className={cn(
+												"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
+												"duration-200 ease-out cursor-pointer",
+												isActive
+													? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/20"
+													: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
+											)}
+										>
+											<span className="text-[10px] font-semibold">{opt.label}</span>
+										</Button>
+									);
+								})}
+							</div>
+						</div>
+					)}
 					{zoomEnabled && (
 						<Button
 							onClick={handleDeleteClick}
@@ -879,7 +924,7 @@ export function SettingsPanel({
 						</AccordionTrigger>
 						<AccordionContent className="pb-3">
 							<Tabs defaultValue="image" className="w-full">
-								<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+								<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3  rounded-lg">
 									<TabsTrigger
 										value="image"
 										className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index a27fbb9..79ac03a 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -64,6 +64,7 @@ import {
 	type ZoomRegion,
 } from "./types";
 import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
+import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./videoPlayback/constants";
 
 export default function VideoEditor() {
 	const {
@@ -848,6 +849,19 @@ export default function VideoEditor() {
 		[pushState],
 	);
 
+	const handleZoomDurationChange = useCallback(
+		(id: string, zoomIn: number, zoomOut: number) => {
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((region) =>
+					region.id === id
+						? { ...region, zoomInDurationMs: zoomIn, zoomOutDurationMs: zoomOut }
+						: region,
+				),
+			}));
+		},
+		[pushState],
+	);
+
 	const handleAnnotationSpanChange = useCallback(
 		(id: string, span: Span) => {
 			pushState((prev) => ({
@@ -1629,6 +1643,7 @@ export default function VideoEditor() {
 									onZoomAdded={handleZoomAdded}
 									onZoomSuggested={handleZoomSuggested}
 									onZoomSpanChange={handleZoomSpanChange}
+									onZoomDurationChange={handleZoomDurationChange}
 									onZoomDelete={handleZoomDelete}
 									selectedZoomId={selectedZoomId}
 									onSelectZoom={handleSelectZoom}
@@ -1745,7 +1760,6 @@ export default function VideoEditor() {
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
 						onAnnotationDelete={handleAnnotationDelete}
-						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={
 							selectedSpeedId
 								? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
@@ -1755,6 +1769,21 @@ export default function VideoEditor() {
 						onSpeedDelete={handleSpeedDelete}
 						unsavedExport={unsavedExport}
 						onSaveUnsavedExport={handleSaveUnsavedExport}
+						selectedZoomInDuration={
+							selectedZoomId
+								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomInDurationMs ??
+									ZOOM_IN_TRANSITION_WINDOW_MS)
+								: undefined
+						}
+						selectedZoomOutDuration={
+							selectedZoomId
+								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomOutDurationMs ??
+									TRANSITION_WINDOW_MS)
+								: undefined
+						}
+						onZoomDurationChange={(zoomIn, zoomOut) =>
+							selectedZoomId && handleZoomDurationChange(selectedZoomId, zoomIn, zoomOut)
+						}
 					/>
 				</div>
 			</div>
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index f265fe4..db9ae1a 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -1,5 +1,5 @@
 import type { Span } from "dnd-timeline";
-import { useItem } from "dnd-timeline";
+import { useItem, useTimelineContext } from "dnd-timeline";
 import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
 import { useMemo } from "react";
 import { cn } from "@/lib/utils";
@@ -13,8 +13,11 @@ interface ItemProps {
 	isSelected?: boolean;
 	onSelect?: () => void;
 	zoomDepth?: number;
+	zoomInDurationMs?: number;
+	zoomOutDurationMs?: number;
 	speedValue?: number;
 	variant?: "zoom" | "trim" | "annotation" | "speed";
+	onZoomDurationChange?: (id: string, zoomIn: number, zoomOut: number) => void;
 }
 
 // Map zoom depth to multiplier labels
@@ -44,10 +47,14 @@ export default function Item({
 	isSelected = false,
 	onSelect,
 	zoomDepth = 1,
+	zoomInDurationMs,
+	zoomOutDurationMs,
 	speedValue,
 	variant = "zoom",
 	children,
+	onZoomDurationChange,
 }: ItemProps) {
+	const { pixelsToValue } = useTimelineContext();
 	const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
 		id,
 		span,
@@ -101,6 +108,96 @@ export default function Item({
 						onSelect?.();
 					}}
 				>
+					{isZoom && (
+						<>
+							{/* Transition In Marker */}
+							<div
+								className="absolute top-0 bottom-0 left-0 bg-white/10 border-r border-white/20 pointer-events-none"
+								style={{
+									width: `${((zoomInDurationMs ?? 1522.575) / (span.end - span.start)) * 100}%`,
+								}}
+							/>
+							{/* Draggable handle for Transition In */}
+							<div
+								className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
+								style={{
+									left: `${((zoomInDurationMs ?? 1522.575) / (span.end - span.start)) * 100}%`,
+									transform: "translateX(-50%)",
+								}}
+								onPointerDown={(e) => {
+									e.stopPropagation();
+									e.preventDefault();
+									const target = e.currentTarget;
+									target.setPointerCapture(e.pointerId);
+
+									const onPointerMove = (moveEvent: PointerEvent) => {
+										const deltaPx = moveEvent.clientX - e.clientX;
+										const deltaMs = pixelsToValue(deltaPx);
+										const newDuration = Math.max(
+											0,
+											Math.min(
+												(zoomInDurationMs ?? 1522.575) + deltaMs,
+												span.end - span.start - (zoomOutDurationMs ?? 1015.05),
+											),
+										);
+										onZoomDurationChange?.(id, newDuration, zoomOutDurationMs ?? 1015.05);
+									};
+
+									const onPointerUp = () => {
+										target.releasePointerCapture(e.pointerId);
+										window.removeEventListener("pointermove", onPointerMove);
+										window.removeEventListener("pointerup", onPointerUp);
+									};
+
+									window.addEventListener("pointermove", onPointerMove);
+									window.addEventListener("pointerup", onPointerUp);
+								}}
+							/>
+							{/* Transition Out Marker */}
+							<div
+								className="absolute top-0 bottom-0 right-0 bg-white/10 border-l border-white/20 pointer-events-none"
+								style={{
+									width: `${((zoomOutDurationMs ?? 1015.05) / (span.end - span.start)) * 100}%`,
+								}}
+							/>
+							{/* Draggable handle for Transition Out */}
+							<div
+								className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
+								style={{
+									right: `${((zoomOutDurationMs ?? 1015.05) / (span.end - span.start)) * 100}%`,
+									transform: "translateX(50%)",
+								}}
+								onPointerDown={(e) => {
+									e.stopPropagation();
+									e.preventDefault();
+									const target = e.currentTarget;
+									target.setPointerCapture(e.pointerId);
+
+									const onPointerMove = (moveEvent: PointerEvent) => {
+										const deltaPx = e.clientX - moveEvent.clientX; // Inverted because right-anchored
+										const deltaMs = pixelsToValue(deltaPx);
+										const newDuration = Math.max(
+											0,
+											Math.min(
+												(zoomOutDurationMs ?? 1015.05) + deltaMs,
+												span.end - span.start - (zoomInDurationMs ?? 1522.575),
+											),
+										);
+										onZoomDurationChange?.(id, zoomInDurationMs ?? 1522.575, newDuration);
+									};
+
+									const onPointerUp = () => {
+										target.releasePointerCapture(e.pointerId);
+										window.removeEventListener("pointermove", onPointerMove);
+										window.removeEventListener("pointerup", onPointerUp);
+									};
+
+									window.addEventListener("pointermove", onPointerMove);
+									window.addEventListener("pointerup", onPointerUp);
+								}}
+							/>
+						</>
+					)}
 					<div
 						className={cn(glassStyles.zoomEndCap, glassStyles.left)}
 						style={{
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index b64aad0..72f140b 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -58,6 +58,7 @@ interface TimelineEditorProps {
 	onZoomAdded: (span: Span) => void;
 	onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
 	onZoomSpanChange: (id: string, span: Span) => void;
+	onZoomDurationChange: (id: string, zoomIn: number, zoomOut: number) => void;
 	onZoomDelete: (id: string) => void;
 	selectedZoomId: string | null;
 	onSelectZoom: (id: string | null) => void;
@@ -96,6 +97,8 @@ interface TimelineRenderItem {
 	label: string;
 	zoomDepth?: number;
 	speedValue?: number;
+	zoomInDurationMs?: number;
+	zoomOutDurationMs?: number;
 	variant: "zoom" | "trim" | "annotation" | "speed";
 }
 
@@ -530,6 +533,7 @@ function Timeline({
 	selectedTrimId,
 	selectedAnnotationId,
 	selectedSpeedId,
+	onZoomDurationChange,
 	keyframes = [],
 }: {
 	items: TimelineRenderItem[];
@@ -545,6 +549,7 @@ function Timeline({
 	selectedTrimId?: string | null;
 	selectedAnnotationId?: string | null;
 	selectedSpeedId?: string | null;
+	onZoomDurationChange: (id: string, zoomIn: number, zoomOut: number) => void;
 	keyframes?: { id: string; time: number }[];
 }) {
 	const t = useScopedT("timeline");
@@ -668,6 +673,9 @@ function Timeline({
 						isSelected={item.id === selectedZoomId}
 						onSelect={() => onSelectZoom?.(item.id)}
 						zoomDepth={item.zoomDepth}
+						zoomInDurationMs={item.zoomInDurationMs}
+						zoomOutDurationMs={item.zoomOutDurationMs}
+						onZoomDurationChange={onZoomDurationChange}
 						variant="zoom"
 					>
 						{item.label}
@@ -740,6 +748,7 @@ export default function TimelineEditor({
 	onZoomAdded,
 	onZoomSuggested,
 	onZoomSpanChange,
+	onZoomDurationChange,
 	onZoomDelete,
 	selectedZoomId,
 	onSelectZoom,
@@ -1271,6 +1280,8 @@ export default function TimelineEditor({
 			span: { start: region.startMs, end: region.endMs },
 			label: t("labels.zoomItem", { index: String(index + 1) }),
 			zoomDepth: region.depth,
+			zoomInDurationMs: region.zoomInDurationMs,
+			zoomOutDurationMs: region.zoomOutDurationMs,
 			variant: "zoom",
 		}));
 
@@ -1494,6 +1505,7 @@ export default function TimelineEditor({
 						selectedTrimId={selectedTrimId}
 						selectedAnnotationId={selectedAnnotationId}
 						selectedSpeedId={selectedSpeedId}
+						onZoomDurationChange={onZoomDurationChange}
 						keyframes={keyframes}
 					/>
 				</TimelineWrapper>
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
index de06ba1..abad188 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -29,6 +29,8 @@ export interface ZoomRegion {
 	depth: ZoomDepth;
 	focus: ZoomFocus;
 	focusMode?: ZoomFocusMode;
+	zoomInDurationMs?: number;
+	zoomOutDurationMs?: number;
 }
 
 export interface CursorTelemetryPoint {
diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
index e5c16e1..12acdbf 100644
--- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
@@ -7,7 +7,6 @@ import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
 
 const CHAINED_ZOOM_PAN_GAP_MS = 1500;
 const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
-const ZOOM_IN_OVERLAP_MS = 500;
 
 type DominantRegionOptions = {
 	connectZooms?: boolean;
@@ -38,26 +37,36 @@ function easeConnectedPan(value: number) {
 	return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
 }
 
-export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
-	const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
-	const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
-	const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
+const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
+const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
 
-	if (timeMs < leadInStart || timeMs > leadOutEnd) {
+function getDurations(region: ZoomRegion) {
+	const zoomIn = region.zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
+	const zoomOut = region.zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
+	return { zoomIn, zoomOut };
+}
+
+export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
+	const { zoomIn, zoomOut } = getDurations(region);
+
+	if (timeMs < region.startMs || timeMs > region.endMs) {
 		return 0;
 	}
 
-	if (timeMs < zoomInEnd) {
-		const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
+	// Zooming in
+	if (timeMs < region.startMs + zoomIn) {
+		const progress = Math.max(0, Math.min(1, (timeMs - region.startMs) / zoomIn));
 		return easeOutScreenStudio(progress);
 	}
 
-	if (timeMs <= region.endMs) {
-		return 1;
+	// Zooming out
+	if (timeMs > region.endMs - zoomOut) {
+		const progress = Math.max(0, Math.min(1, (region.endMs - timeMs) / zoomOut));
+		return easeOutScreenStudio(progress);
 	}
 
-	const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
-	return 1 - easeOutScreenStudio(progress);
+	// Full zoom
+	return 1;
 }
 
 function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomFocus {
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 632a569..44ac16a 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -8,6 +8,13 @@
 			"manual": "Manual",
 			"auto": "Auto",
 			"autoDescription": "Camera follows the recorded cursor position"
+		},
+		"speed": {
+			"title": "Zoom Speed",
+			"instant": "Instant",
+			"fast": "Fast",
+			"smooth": "Smooth",
+			"lazy": "Lazy"
 		}
 	},
 	"speed": {
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index 586e840..9f70ee4 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -8,6 +8,13 @@
 			"manual": "Manual",
 			"auto": "Auto",
 			"autoDescription": "La cámara sigue la posición del cursor grabado"
+		},
+		"speed": {
+			"title": "Velocidad de zoom",
+			"instant": "Instantáneo",
+			"fast": "Rápido",
+			"smooth": "Suave",
+			"lazy": "Lento"
 		}
 	},
 	"speed": {
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index ab0d41b..2e69b80 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -8,6 +8,13 @@
 			"manual": "手动",
 			"auto": "自动",
 			"autoDescription": "摄像头跟随录制时的光标位置"
+		},
+		"speed": {
+			"title": "缩放速度",
+			"instant": "即时",
+			"fast": "快速",
+			"smooth": "平滑",
+			"lazy": "缓慢"
 		}
 	},
 	"speed": {

From 8f35cf090c8fdbc06db62c247771fe4790c1fa8d Mon Sep 17 00:00:00 2001
From: moncef <meharzimoncef57@gmail.com>
Date: Tue, 7 Apr 2026 11:40:39 +0100
Subject: [PATCH 2/4] feat: add zoomRegionUtils to calculate dominant zoom
 regions and handle smooth transitions between connected regions

---
 .../video-editor/videoPlayback/zoomRegionUtils.ts    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
index 12acdbf..e9fd603 100644
--- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
@@ -41,8 +41,16 @@ const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
 const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
 
 function getDurations(region: ZoomRegion) {
-	const zoomIn = region.zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
-	const zoomOut = region.zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
+	let zoomIn = region.zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
+	let zoomOut = region.zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
+
+	const duration = region.endMs - region.startMs;
+	if (zoomIn + zoomOut > duration) {
+		const scale = duration / (zoomIn + zoomOut);
+		zoomIn *= scale;
+		zoomOut *= scale;
+	}
+
 	return { zoomIn, zoomOut };
 }
 

From 7409631207f6c58a21e98a37c34dbb5105bc2d97 Mon Sep 17 00:00:00 2001
From: moncef <meharzimoncef57@gmail.com>
Date: Tue, 7 Apr 2026 11:43:20 +0100
Subject: [PATCH 3/4] Fix pr review SelecedSpeedId

---
 src/components/video-editor/VideoEditor.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 79ac03a..e4de186 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1760,6 +1760,7 @@ export default function VideoEditor() {
 						onAnnotationStyleChange={handleAnnotationStyleChange}
 						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
 						onAnnotationDelete={handleAnnotationDelete}
+						selectedSpeedId={selectedSpeedId}
 						selectedSpeedValue={
 							selectedSpeedId
 								? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)

From 0cb298d20bd7a53672dc550298ba9014c80c0e3c Mon Sep 17 00:00:00 2001
From: moncef <meharzimoncef57@gmail.com>
Date: Tue, 7 Apr 2026 11:58:45 +0100
Subject: [PATCH 4/4] Fix Pr reviews

---
 src/components/video-editor/SettingsPanel.tsx |  9 ++--
 src/components/video-editor/VideoEditor.tsx   |  4 +-
 src/components/video-editor/timeline/Item.tsx | 49 +++++++++++++------
 .../videoPlayback/zoomRegionUtils.ts          | 11 +++--
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 34adddd..e45f439 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -166,7 +166,6 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
 	{ depth: 6, label: "5×" },
 ];
 
-// TODO: make this configurable
 const ZOOM_SPEED_OPTIONS = [
 	{ label: "Instant", zoomIn: 0, zoomOut: 0 },
 	{ label: "Fast", zoomIn: 500, zoomOut: 350 },
@@ -570,8 +569,10 @@ export function SettingsPanel({
 							<div className="grid grid-cols-4 gap-1.5">
 								{ZOOM_SPEED_OPTIONS.map((opt) => {
 									const isActive =
-										selectedZoomInDuration === opt.zoomIn &&
-										selectedZoomOutDuration === opt.zoomOut;
+										selectedZoomInDuration !== undefined &&
+										selectedZoomOutDuration !== undefined &&
+										Math.round(selectedZoomInDuration) === Math.round(opt.zoomIn) &&
+										Math.round(selectedZoomOutDuration) === Math.round(opt.zoomOut);
 									return (
 										<Button
 											key={opt.label}
@@ -924,7 +925,7 @@ export function SettingsPanel({
 						</AccordionTrigger>
 						<AccordionContent className="pb-3">
 							<Tabs defaultValue="image" className="w-full">
-								<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3  rounded-lg">
+								<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 rounded-lg">
 									<TabsTrigger
 										value="image"
 										className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index e4de186..0eba120 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1773,13 +1773,13 @@ export default function VideoEditor() {
 						selectedZoomInDuration={
 							selectedZoomId
 								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomInDurationMs ??
-									ZOOM_IN_TRANSITION_WINDOW_MS)
+									Math.round(ZOOM_IN_TRANSITION_WINDOW_MS))
 								: undefined
 						}
 						selectedZoomOutDuration={
 							selectedZoomId
 								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomOutDurationMs ??
-									TRANSITION_WINDOW_MS)
+									Math.round(TRANSITION_WINDOW_MS))
 								: undefined
 						}
 						onZoomDurationChange={(zoomIn, zoomOut) =>
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index db9ae1a..27a4815 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -3,6 +3,11 @@ import { useItem, useTimelineContext } from "dnd-timeline";
 import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
 import { useMemo } from "react";
 import { cn } from "@/lib/utils";
+import {
+	DEFAULT_ZOOM_IN_MS,
+	DEFAULT_ZOOM_OUT_MS,
+	getDurations,
+} from "../videoPlayback/zoomRegionUtils";
 import glassStyles from "./ItemGlass.module.css";
 
 interface ItemProps {
@@ -86,6 +91,16 @@ export default function Item({
 	const MIN_ITEM_PX = 6;
 	const safeItemStyle = { ...itemStyle, minWidth: MIN_ITEM_PX };
 
+	const { zoomIn, zoomOut } = useMemo(() => {
+		if (!isZoom) return { zoomIn: 0, zoomOut: 0 };
+		return getDurations({
+			startMs: span.start,
+			endMs: span.end,
+			zoomInDurationMs,
+			zoomOutDurationMs,
+		});
+	}, [isZoom, span.start, span.end, zoomInDurationMs, zoomOutDurationMs]);
+
 	return (
 		<div
 			ref={setNodeRef}
@@ -114,14 +129,14 @@ export default function Item({
 							<div
 								className="absolute top-0 bottom-0 left-0 bg-white/10 border-r border-white/20 pointer-events-none"
 								style={{
-									width: `${((zoomInDurationMs ?? 1522.575) / (span.end - span.start)) * 100}%`,
+									width: `${(zoomIn / (span.end - span.start)) * 100}%`,
 								}}
 							/>
 							{/* Draggable handle for Transition In */}
 							<div
 								className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
 								style={{
-									left: `${((zoomInDurationMs ?? 1522.575) / (span.end - span.start)) * 100}%`,
+									left: `${(zoomIn / (span.end - span.start)) * 100}%`,
 									transform: "translateX(-50%)",
 								}}
 								onPointerDown={(e) => {
@@ -130,17 +145,18 @@ export default function Item({
 									const target = e.currentTarget;
 									target.setPointerCapture(e.pointerId);
 
+									const startX = e.clientX;
+									const initialZoomIn = zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
+									const initialZoomOut = zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
+
 									const onPointerMove = (moveEvent: PointerEvent) => {
-										const deltaPx = moveEvent.clientX - e.clientX;
+										const deltaPx = moveEvent.clientX - startX;
 										const deltaMs = pixelsToValue(deltaPx);
 										const newDuration = Math.max(
 											0,
-											Math.min(
-												(zoomInDurationMs ?? 1522.575) + deltaMs,
-												span.end - span.start - (zoomOutDurationMs ?? 1015.05),
-											),
+											Math.min(initialZoomIn + deltaMs, span.end - span.start - initialZoomOut),
 										);
-										onZoomDurationChange?.(id, newDuration, zoomOutDurationMs ?? 1015.05);
+										onZoomDurationChange?.(id, newDuration, initialZoomOut);
 									};
 
 									const onPointerUp = () => {
@@ -157,14 +173,14 @@ export default function Item({
 							<div
 								className="absolute top-0 bottom-0 right-0 bg-white/10 border-l border-white/20 pointer-events-none"
 								style={{
-									width: `${((zoomOutDurationMs ?? 1015.05) / (span.end - span.start)) * 100}%`,
+									width: `${(zoomOut / (span.end - span.start)) * 100}%`,
 								}}
 							/>
 							{/* Draggable handle for Transition Out */}
 							<div
 								className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
 								style={{
-									right: `${((zoomOutDurationMs ?? 1015.05) / (span.end - span.start)) * 100}%`,
+									right: `${(zoomOut / (span.end - span.start)) * 100}%`,
 									transform: "translateX(50%)",
 								}}
 								onPointerDown={(e) => {
@@ -173,17 +189,18 @@ export default function Item({
 									const target = e.currentTarget;
 									target.setPointerCapture(e.pointerId);
 
+									const startX = e.clientX;
+									const initialZoomIn = zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
+									const initialZoomOut = zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
+
 									const onPointerMove = (moveEvent: PointerEvent) => {
-										const deltaPx = e.clientX - moveEvent.clientX; // Inverted because right-anchored
+										const deltaPx = startX - moveEvent.clientX; // Inverted because right-anchored
 										const deltaMs = pixelsToValue(deltaPx);
 										const newDuration = Math.max(
 											0,
-											Math.min(
-												(zoomOutDurationMs ?? 1015.05) + deltaMs,
-												span.end - span.start - (zoomInDurationMs ?? 1522.575),
-											),
+											Math.min(initialZoomOut + deltaMs, span.end - span.start - initialZoomIn),
 										);
-										onZoomDurationChange?.(id, zoomInDurationMs ?? 1522.575, newDuration);
+										onZoomDurationChange?.(id, initialZoomIn, newDuration);
 									};
 
 									const onPointerUp = () => {
diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
index e9fd603..88d08c1 100644
--- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
@@ -37,10 +37,15 @@ function easeConnectedPan(value: number) {
 	return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
 }
 
-const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
-const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
+export const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
+export const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
 
-function getDurations(region: ZoomRegion) {
+export function getDurations(region: {
+	startMs: number;
+	endMs: number;
+	zoomInDurationMs?: number;
+	zoomOutDurationMs?: number;
+}) {
 	let zoomIn = region.zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
 	let zoomOut = region.zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;