1 files changed, 20 insertions, 13 deletions

diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
index 64a0fb58..a1740384 100644
--- a/apps/web/src/hooks/timeline/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -7,7 +7,14 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import {
+	TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD,
+} from "@/components/editor/panels/timeline/interaction";
+import {
+	TIMELINE_ZOOM_MAX,
+	TIMELINE_ZOOM_MIN,
+	BASE_TIMELINE_PIXELS_PER_SECOND,
+} from "@/lib/timeline/scale";
 import { useEditor } from "@/hooks/use-editor";
 import { zoomToSlider } from "@/lib/timeline/zoom-utils";
 
@@ -30,7 +37,7 @@ interface UseTimelineZoomReturn {
 
 export function useTimelineZoom({
 	containerRef,
-	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
+	minZoom = TIMELINE_ZOOM_MIN,
 	initialZoom,
 	initialScrollLeft,
 	initialPlayheadTime,
@@ -49,7 +56,7 @@ export function useTimelineZoom({
 			hasInitializedRef.current = true;
 			return Math.max(
 				minZoom,
-				Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom),
+					Math.min(TIMELINE_ZOOM_MAX, initialZoom),
 			);
 		}
 		return minZoom;
@@ -91,7 +98,7 @@ export function useTimelineZoom({
 			setZoomLevel((prev) => {
 				const nextZoom = Math.max(
 					minZoom,
-					Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, prev * zoomFactor),
+					Math.min(TIMELINE_ZOOM_MAX, prev * zoomFactor),
 				);
 				return nextZoom;
 			});
@@ -105,7 +112,7 @@ export function useTimelineZoom({
 		if (initialZoom !== undefined && !hasInitializedRef.current) {
 			hasInitializedRef.current = true;
 			setZoomLevel(
-				Math.max(minZoom, Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom)),
+				Math.max(minZoom, Math.min(TIMELINE_ZOOM_MAX, initialZoom)),
 			);
 			return;
 		}
@@ -126,7 +133,7 @@ export function useTimelineZoom({
 						: zoomLevelOrUpdater;
 				const clampedZoom = Math.max(
 					minZoom,
-					Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, nextZoom),
+					Math.min(TIMELINE_ZOOM_MAX, nextZoom),
 				);
 				return clampedZoom;
 			});
@@ -153,12 +160,12 @@ export function useTimelineZoom({
 		});
 		const isCrossingThresholdUp =
 			previousSliderPercent <
-				TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
-			sliderPercent >= TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
+				TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
+			sliderPercent >= TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
 		const isCrossingThresholdDown =
 			previousSliderPercent >=
-				TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
-			sliderPercent < TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
+				TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
+			sliderPercent < TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
 
 		const syncScroll = (scrollLeft: number) => {
 			scrollElement.scrollLeft = scrollLeft;
@@ -178,11 +185,11 @@ export function useTimelineZoom({
 			isInPlayheadAnchorModeRef.current = true;
 		}
 
-		if (sliderPercent >= TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD) {
+		if (sliderPercent >= TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD) {
 			const playheadPixelsBefore =
-				playheadTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * previousZoom;
+				playheadTime * BASE_TIMELINE_PIXELS_PER_SECOND * previousZoom;
 			const playheadPixelsAfter =
-				playheadTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+				playheadTime * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
 
 			const viewportOffset = playheadPixelsBefore - currentScrollLeft;
 			const newScrollLeft = playheadPixelsAfter - viewportOffset;