codebase overhaul (#697)

1 files changed, 224 insertions, 0 deletions

diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
new file mode 100644
index 00000000..96a4be43
--- /dev/null
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -0,0 +1,224 @@
+import {
+	type WheelEvent as ReactWheelEvent,
+	type RefObject,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useEditor } from "@/hooks/use-editor";
+
+interface UseTimelineZoomProps {
+	containerRef: RefObject<HTMLDivElement>;
+	minZoom?: number;
+	initialZoom?: number;
+	initialScrollLeft?: number;
+	initialPlayheadTime?: number;
+	tracksScrollRef: RefObject<HTMLDivElement>;
+	rulerScrollRef: RefObject<HTMLDivElement>;
+}
+
+interface UseTimelineZoomReturn {
+	zoomLevel: number;
+	setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
+	handleWheel: (event: ReactWheelEvent) => void;
+	saveScrollPosition: () => void;
+}
+
+export function useTimelineZoom({
+	containerRef,
+	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
+	initialZoom,
+	initialScrollLeft,
+	initialPlayheadTime,
+	tracksScrollRef,
+	rulerScrollRef,
+}: UseTimelineZoomProps): UseTimelineZoomReturn {
+	const editor = useEditor();
+	const hasInitializedRef = useRef(false);
+	const hasRestoredPlayheadRef = useRef(false);
+	const scrollSaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+		null,
+	);
+
+	const [zoomLevel, setZoomLevel] = useState(() => {
+		if (initialZoom !== undefined) {
+			hasInitializedRef.current = true;
+			return Math.max(
+				minZoom,
+				Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom),
+			);
+		}
+		return minZoom;
+	});
+	const previousZoomRef = useRef(zoomLevel);
+	const hasRestoredScrollRef = useRef(false);
+
+	const handleWheel = useCallback(
+		(event: ReactWheelEvent) => {
+			const isZoomGesture = event.ctrlKey || event.metaKey;
+			const isHorizontalScrollGesture =
+				event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY);
+
+			if (isHorizontalScrollGesture) {
+				return;
+			}
+
+			// pinch-zoom (ctrl/meta + wheel)
+			if (isZoomGesture) {
+				const zoomMultiplier = event.deltaY > 0 ? 1 / 1.1 : 1.1;
+				setZoomLevel((prev) => {
+					const nextZoom = Math.max(
+						minZoom,
+						Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, prev * zoomMultiplier),
+					);
+					return nextZoom;
+				});
+				// for horizontal scrolling (when shift is held or horizontal wheel movement),
+				// let the event bubble up to allow ScrollArea to handle it
+				return;
+			}
+		},
+		[minZoom],
+	);
+
+	useEffect(() => {
+		if (initialZoom !== undefined && !hasInitializedRef.current) {
+			hasInitializedRef.current = true;
+			setZoomLevel(
+				Math.max(minZoom, Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom)),
+			);
+			return;
+		}
+		setZoomLevel((prev) => {
+			if (prev < minZoom) {
+				return minZoom;
+			}
+			return prev;
+		});
+	}, [minZoom, initialZoom]);
+
+	const wrappedSetZoomLevel = useCallback(
+		(zoomLevelOrUpdater: number | ((prev: number) => number)) => {
+			setZoomLevel((prev) => {
+				const nextZoom =
+					typeof zoomLevelOrUpdater === "function"
+						? zoomLevelOrUpdater(prev)
+						: zoomLevelOrUpdater;
+				const clampedZoom = Math.max(
+					minZoom,
+					Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, nextZoom),
+				);
+				return clampedZoom;
+			});
+		},
+		[minZoom],
+	);
+
+	useLayoutEffect(() => {
+		const previousZoom = previousZoomRef.current;
+		if (previousZoom === zoomLevel) return;
+
+		const scrollElement = tracksScrollRef.current;
+		if (scrollElement) {
+			editor.project.setTimelineViewState({
+				viewState: {
+					zoomLevel,
+					scrollLeft: scrollElement.scrollLeft,
+					playheadTime: editor.playback.getCurrentTime(),
+				},
+			});
+		}
+
+		previousZoomRef.current = zoomLevel;
+	}, [zoomLevel, editor, tracksScrollRef]);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: tracksScrollRef is a stable ref
+	const saveScrollPosition = useCallback(() => {
+		if (scrollSaveTimeoutRef.current) {
+			clearTimeout(scrollSaveTimeoutRef.current);
+		}
+		scrollSaveTimeoutRef.current = setTimeout(() => {
+			const scrollElement = tracksScrollRef.current;
+			if (scrollElement) {
+				editor.project.setTimelineViewState({
+					viewState: {
+						zoomLevel,
+						scrollLeft: scrollElement.scrollLeft,
+						playheadTime: editor.playback.getCurrentTime(),
+					},
+				});
+			}
+		}, 300);
+	}, [zoomLevel, editor]);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: refs are stable
+	useEffect(() => {
+		if (initialScrollLeft === undefined) return;
+		if (hasRestoredScrollRef.current) return;
+		const scrollElement = tracksScrollRef.current;
+		if (!scrollElement) return;
+
+		const restoreScroll = () => {
+			scrollElement.scrollLeft = initialScrollLeft;
+			if (rulerScrollRef.current) {
+				rulerScrollRef.current.scrollLeft = initialScrollLeft;
+			}
+			hasRestoredScrollRef.current = true;
+		};
+
+		if (scrollElement.scrollWidth > 0) {
+			restoreScroll();
+		} else {
+			const observer = new ResizeObserver(() => {
+				if (scrollElement.scrollWidth > 0) {
+					restoreScroll();
+					hasRestoredScrollRef.current = true;
+					observer.disconnect();
+				}
+			});
+			observer.observe(scrollElement);
+			return () => observer.disconnect();
+		}
+	}, [initialScrollLeft]);
+
+	useEffect(() => {
+		if (initialPlayheadTime !== undefined && !hasRestoredPlayheadRef.current) {
+			hasRestoredPlayheadRef.current = true;
+			editor.playback.seek({ time: initialPlayheadTime });
+		}
+	}, [initialPlayheadTime, editor]);
+
+	// prevent browser zoom in the timeline
+	useEffect(() => {
+		const preventZoom = (event: WheelEvent) => {
+			const isZoomKeyPressed = event.ctrlKey || event.metaKey;
+			const isInContainer = containerRef.current?.contains(
+				event.target as Node,
+			);
+			// only check isInContainer, not isInTimeline state - the state check
+			// causes race conditions where the closure captures stale state
+			if (isZoomKeyPressed && isInContainer) {
+				event.preventDefault();
+			}
+		};
+
+		document.addEventListener("wheel", preventZoom, {
+			passive: false,
+			capture: true,
+		});
+
+		return () => {
+			document.removeEventListener("wheel", preventZoom, { capture: true });
+		};
+	}, [containerRef]);
+
+	return {
+		zoomLevel,
+		setZoomLevel: wrappedSetZoomLevel,
+		handleWheel,
+		saveScrollPosition,
+	};
+}