1 files changed, 17 insertions, 13 deletions

diff --git a/apps/web/src/timeline/hooks/use-timeline-zoom.ts b/apps/web/src/timeline/hooks/use-timeline-zoom.ts
index a8825a37..60768963 100644
--- a/apps/web/src/timeline/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/timeline/hooks/use-timeline-zoom.ts
@@ -4,21 +4,23 @@ import {
 	useEffect,
 	useLayoutEffect,
 	useReducer,
-	useRef,
+	useState,
 } from "react";
 import { useEditor } from "@/editor/use-editor";
+import { useCommittedRef } from "@/hooks/use-committed-ref";
 import { TIMELINE_ZOOM_MIN } from "@/timeline/scale";
 import {
 	ZoomController,
 	type ZoomConfig,
 } from "@/timeline/controllers/zoom-controller";
+import type { MediaTime } from "@/wasm";
 
 interface UseTimelineZoomProps {
 	containerRef: RefObject<HTMLDivElement | null>;
 	minZoom?: number;
 	initialZoom?: number;
 	initialScrollLeft?: number;
-	initialPlayheadTime?: number;
+	initialPlayheadTime?: MediaTime;
 	tracksScrollRef: RefObject<HTMLDivElement | null>;
 	rulerScrollRef: RefObject<HTMLDivElement | null>;
 }
@@ -47,24 +49,26 @@ export function useTimelineZoom({
 		getRulerScrollEl: () => rulerScrollRef.current,
 		getCurrentPlayheadTime: () => editor.playback.getCurrentTime(),
 		seek: (time) => editor.playback.seek({ time }),
-		setTimelineViewState: (viewState) =>
-			editor.project.setTimelineViewState({ viewState }),
+		setTimelineViewState: ({ zoomLevel, scrollLeft, playheadTime }) =>
+			editor.project.setTimelineViewState({
+				viewState: {
+					zoomLevel,
+					scrollLeft,
+					playheadTime,
+				},
+			}),
 	};
-	const configRef = useRef(config);
-	configRef.current = config;
-
-	const controllerRef = useRef<ZoomController | null>(null);
-	if (!controllerRef.current) {
-		controllerRef.current = new ZoomController({ configRef, initialZoom });
-	}
-	const controller = controllerRef.current;
+	const configRef = useCommittedRef(config);
+	const [controller] = useState(
+		() => new ZoomController({ configRef, initialZoom }),
+	);
 	const zoomLevel = controller.zoomLevel;
 
 	const [, rerender] = useReducer((n: number) => n + 1, 0);
 	useEffect(() => controller.subscribe(rerender), [controller]);
 
 	useEffect(() => {
-		controller.reconcileInitialAndMinZoom(minZoom, initialZoom);
+		controller.reconcileInitialAndMinZoom({ minZoom, initialZoom });
 	}, [controller, minZoom, initialZoom]);
 
 	useLayoutEffect(() => {