refactor

2 files changed, 18 insertions, 9 deletions

diff --git a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
index 095c0599..fc5df4d9 100644
--- a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
+++ b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
@@ -60,10 +60,7 @@ export function useEdgeAutoScroll({
 				mouseXRelative > viewportWidth - edgeThreshold &&
 				rulerViewport.scrollLeft < scrollMax
 			) {
-				const edgeDistance = Math.max(
-					0,
-					viewportWidth - edgeThreshold - mouseXRelative,
-				);
+				const edgeDistance = Math.max(0, viewportWidth - mouseXRelative);
 				const intensity = 1 - edgeDistance / edgeThreshold;
 				scrollSpeed = maxScrollSpeed * intensity;
 			}
diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
index 13024103..10563a05 100644
--- a/apps/web/src/hooks/timeline/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -44,7 +44,7 @@ export function useTimelineZoom({
 		null,
 	);
 
-	const [zoomLevel, setZoomLevel] = useState(() => {
+	const [zoomLevel, setZoomLevelRaw] = useState(() => {
 		if (initialZoom !== undefined) {
 			hasInitializedRef.current = true;
 			return Math.max(
@@ -56,6 +56,18 @@ export function useTimelineZoom({
 	});
 	const previousZoomRef = useRef(zoomLevel);
 	const hasRestoredScrollRef = useRef(false);
+	const preZoomScrollLeftRef = useRef(0);
+
+	const setZoomLevel = useCallback(
+		(updater: number | ((prev: number) => number)) => {
+			const scrollElement = tracksScrollRef.current;
+			if (scrollElement) {
+				preZoomScrollLeftRef.current = scrollElement.scrollLeft;
+			}
+			setZoomLevelRaw(updater);
+		},
+		[tracksScrollRef],
+	);
 
 	const handleWheel = useCallback(
 		(event: ReactWheelEvent) => {
@@ -82,7 +94,7 @@ export function useTimelineZoom({
 				return;
 			}
 		},
-		[minZoom],
+		[minZoom, setZoomLevel],
 	);
 
 	useEffect(() => {
@@ -99,7 +111,7 @@ export function useTimelineZoom({
 			}
 			return prev;
 		});
-	}, [minZoom, initialZoom]);
+	}, [minZoom, initialZoom, setZoomLevel]);
 
 	const wrappedSetZoomLevel = useCallback(
 		(zoomLevelOrUpdater: number | ((prev: number) => number)) => {
@@ -115,7 +127,7 @@ export function useTimelineZoom({
 				return clampedZoom;
 			});
 		},
-		[minZoom],
+		[minZoom, setZoomLevel],
 	);
 
 	useLayoutEffect(() => {
@@ -128,7 +140,7 @@ export function useTimelineZoom({
 			return;
 		}
 
-		const currentScrollLeft = scrollElement.scrollLeft;
+		const currentScrollLeft = preZoomScrollLeftRef.current;
 		const playheadTime = editor.playback.getCurrentTime();
 		const sliderPercent = zoomToSlider({ zoomLevel, minZoom });