From e1c67c4e92611ab3ba82d5fbde248734699c117a Mon Sep 17 00:00:00 2001
From: Siddharth <siddharthvaddem@yahoo.com>
Date: Sat, 25 Apr 2026 16:44:57 -0700
Subject: [PATCH] Revert "Merge pull request #373 from
 Moncef-Mhz/adjust-zoom-speed"

This reverts commit a6ae0e6d9889530ea1f1f1674b5312652153b7be, reversing
changes made to db10f92c49d230387f8afcb7f64225fe94c8c5bf.
---
 src/components/video-editor/SettingsPanel.tsx |  48 +-------
 src/components/video-editor/VideoEditor.tsx   |  34 -----
 src/components/video-editor/timeline/Item.tsx | 116 +-----------------
 .../video-editor/timeline/TimelineEditor.tsx  |  12 --
 src/components/video-editor/types.ts          |   2 -
 .../videoPlayback/zoomRegionUtils.ts          |  44 ++-----
 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, 13 insertions(+), 264 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 78d6bb4..f21f018 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -221,9 +221,6 @@ 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;
 	webcamSizePreset?: WebcamSizePreset;
 	onWebcamSizePresetChange?: (size: WebcamSizePreset) => void;
 	onWebcamSizePresetCommit?: () => void;
@@ -240,13 +237,6 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
 	{ depth: 6, label: "5×" },
 ];
 
-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,
@@ -313,9 +303,6 @@ export function SettingsPanel({
 	onWebcamLayoutPresetChange,
 	webcamMaskShape = "rectangle",
 	onWebcamMaskShapeChange,
-	selectedZoomInDuration,
-	selectedZoomOutDuration,
-	onZoomDurationChange,
 	webcamSizePreset = DEFAULT_WEBCAM_SIZE_PRESET,
 	onWebcamSizePresetChange,
 	onWebcamSizePresetCommit,
@@ -649,39 +636,6 @@ 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 !== undefined &&
-										selectedZoomOutDuration !== undefined &&
-										Math.round(selectedZoomInDuration) === Math.round(opt.zoomIn) &&
-										Math.round(selectedZoomOutDuration) === Math.round(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}
@@ -1060,7 +1014,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 h-7 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 936ea32..b21ac1e 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -75,7 +75,6 @@ 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 {
@@ -960,23 +959,6 @@ 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) => ({
@@ -1913,7 +1895,6 @@ export default function VideoEditor() {
 									onZoomAdded={handleZoomAdded}
 									onZoomSuggested={handleZoomSuggested}
 									onZoomSpanChange={handleZoomSpanChange}
-									onZoomDurationChange={handleZoomDurationChange}
 									onZoomDelete={handleZoomDelete}
 									selectedZoomId={selectedZoomId}
 									onSelectZoom={handleSelectZoom}
@@ -2056,21 +2037,6 @@ export default function VideoEditor() {
 						onSpeedDelete={handleSpeedDelete}
 						unsavedExport={unsavedExport}
 						onSaveUnsavedExport={handleSaveUnsavedExport}
-						selectedZoomInDuration={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomInDurationMs ??
-									Math.round(ZOOM_IN_TRANSITION_WINDOW_MS))
-								: undefined
-						}
-						selectedZoomOutDuration={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomOutDurationMs ??
-									Math.round(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 aeca711..8fa210b 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -1,14 +1,9 @@
 import type { Span } from "dnd-timeline";
-import { useItem, useTimelineContext } from "dnd-timeline";
+import { useItem } from "dnd-timeline";
 import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
 import { useMemo } from "react";
 import { useScopedT } from "@/contexts/I18nContext";
 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 {
@@ -19,10 +14,7 @@ interface ItemProps {
 	isSelected?: boolean;
 	onSelect?: () => void;
 	zoomDepth?: number;
-	zoomInDurationMs?: number;
-	zoomOutDurationMs?: number;
 	speedValue?: number;
-	onZoomDurationChange?: (id: string, zoomIn: number, zoomOut: number) => void;
 	variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
@@ -53,15 +45,11 @@ export default function Item({
 	isSelected = false,
 	onSelect,
 	zoomDepth = 1,
-	zoomInDurationMs,
-	zoomOutDurationMs,
 	speedValue,
 	variant = "zoom",
 	children,
-	onZoomDurationChange,
 }: ItemProps) {
 	const t = useScopedT("timeline");
-	const { pixelsToValue } = useTimelineContext();
 	const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
 		id,
 		span,
@@ -93,16 +81,6 @@ 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}
@@ -125,98 +103,6 @@ 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: `${(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: `${(zoomIn / (span.end - span.start)) * 100}%`,
-									transform: "translateX(-50%)",
-								}}
-								onPointerDown={(e) => {
-									e.stopPropagation();
-									e.preventDefault();
-									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 - startX;
-										const deltaMs = pixelsToValue(deltaPx);
-										const newDuration = Math.max(
-											0,
-											Math.min(initialZoomIn + deltaMs, span.end - span.start - initialZoomOut),
-										);
-										onZoomDurationChange?.(id, newDuration, initialZoomOut);
-									};
-
-									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: `${(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: `${(zoomOut / (span.end - span.start)) * 100}%`,
-									transform: "translateX(50%)",
-								}}
-								onPointerDown={(e) => {
-									e.stopPropagation();
-									e.preventDefault();
-									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 = startX - moveEvent.clientX; // Inverted because right-anchored
-										const deltaMs = pixelsToValue(deltaPx);
-										const newDuration = Math.max(
-											0,
-											Math.min(initialZoomOut + deltaMs, span.end - span.start - initialZoomIn),
-										);
-										onZoomDurationChange?.(id, initialZoomIn, 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 81e6218..b1254b5 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -59,7 +59,6 @@ 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;
@@ -104,8 +103,6 @@ interface TimelineRenderItem {
 	label: string;
 	zoomDepth?: number;
 	speedValue?: number;
-	zoomInDurationMs?: number;
-	zoomOutDurationMs?: number;
 	variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
@@ -542,7 +539,6 @@ function Timeline({
 	selectedAnnotationId,
 	selectedBlurId,
 	selectedSpeedId,
-	onZoomDurationChange,
 	keyframes = [],
 }: {
 	items: TimelineRenderItem[];
@@ -560,7 +556,6 @@ function Timeline({
 	selectedAnnotationId?: string | null;
 	selectedBlurId?: string | null;
 	selectedSpeedId?: string | null;
-	onZoomDurationChange: (id: string, zoomIn: number, zoomOut: number) => void;
 	keyframes?: { id: string; time: number }[];
 }) {
 	const t = useScopedT("timeline");
@@ -687,9 +682,6 @@ 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}
@@ -778,7 +770,6 @@ export default function TimelineEditor({
 	onZoomAdded,
 	onZoomSuggested,
 	onZoomSpanChange,
-	onZoomDurationChange,
 	onZoomDelete,
 	selectedZoomId,
 	onSelectZoom,
@@ -1346,8 +1337,6 @@ 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",
 		}));
 
@@ -1604,7 +1593,6 @@ export default function TimelineEditor({
 						selectedAnnotationId={selectedAnnotationId}
 						selectedBlurId={selectedBlurId}
 						selectedSpeedId={selectedSpeedId}
-						onZoomDurationChange={onZoomDurationChange}
 						keyframes={keyframes}
 					/>
 				</TimelineWrapper>
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
index 87e4331..046f428 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -33,8 +33,6 @@ 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 88d08c1..e5c16e1 100644
--- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts
@@ -7,6 +7,7 @@ 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;
@@ -37,49 +38,26 @@ function easeConnectedPan(value: number) {
 	return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
 }
 
-export const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
-export const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
-
-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;
-
-	const duration = region.endMs - region.startMs;
-	if (zoomIn + zoomOut > duration) {
-		const scale = duration / (zoomIn + zoomOut);
-		zoomIn *= scale;
-		zoomOut *= scale;
-	}
-
-	return { zoomIn, zoomOut };
-}
-
 export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
-	const { zoomIn, zoomOut } = getDurations(region);
+	const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
+	const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
+	const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
 
-	if (timeMs < region.startMs || timeMs > region.endMs) {
+	if (timeMs < leadInStart || timeMs > leadOutEnd) {
 		return 0;
 	}
 
-	// Zooming in
-	if (timeMs < region.startMs + zoomIn) {
-		const progress = Math.max(0, Math.min(1, (timeMs - region.startMs) / zoomIn));
+	if (timeMs < zoomInEnd) {
+		const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
 		return easeOutScreenStudio(progress);
 	}
 
-	// Zooming out
-	if (timeMs > region.endMs - zoomOut) {
-		const progress = Math.max(0, Math.min(1, (region.endMs - timeMs) / zoomOut));
-		return easeOutScreenStudio(progress);
+	if (timeMs <= region.endMs) {
+		return 1;
 	}
 
-	// Full zoom
-	return 1;
+	const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
+	return 1 - easeOutScreenStudio(progress);
 }
 
 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 00e7c08..f737cfc 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -8,13 +8,6 @@
 			"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 92160bd..c48ed5c 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -8,13 +8,6 @@
 			"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 10a8ecd..299483a 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -8,13 +8,6 @@
 			"manual": "手动",
 			"auto": "自动",
 			"autoDescription": "摄像头跟随录制时的光标位置"
-		},
-		"speed": {
-			"title": "缩放速度",
-			"instant": "即时",
-			"fast": "快速",
-			"smooth": "平滑",
-			"lazy": "缓慢"
 		}
 	},
 	"speed": {