summaryrefslogtreecommitdiff
path: root/apps/web/src/hooks/timeline/use-timeline-zoom.ts
diff options
context:
space:
mode:
authorMaze Winther <mazewinther@gmail.com>2026-04-01 19:27:49 +0200
committerMaze Winther <mazewinther@gmail.com>2026-04-01 19:27:49 +0200
commitbd9ec023eefc4b5d26fa8b66c4338e97104f0f96 (patch)
tree08350eaa107b27f026eebdb65df54b1ca25521fd /apps/web/src/hooks/timeline/use-timeline-zoom.ts
parentf4b9f40ab1ba1cedf208bba708f4331d36bb30cc (diff)
downloadopencut-bd9ec023eefc4b5d26fa8b66c4338e97104f0f96.tar.gz
refactor: split constants by domain and isolate timeline panel from core
Diffstat (limited to 'apps/web/src/hooks/timeline/use-timeline-zoom.ts')
-rw-r--r--apps/web/src/hooks/timeline/use-timeline-zoom.ts33
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;