summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
diff options
context:
space:
mode:
authorSimon Orzel <simonorzel@gmail.com>2025-07-17 03:00:38 +0200
committerSimon Orzel <simonorzel@gmail.com>2025-07-17 03:00:38 +0200
commit167f366c6d791dfc054d64f50e83828960668e55 (patch)
tree28d6b037a2d0597990d290520a8265cca1ef66d7 /apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
parent1505c1b12f516c65b6a3d076f0e9623a294031d6 (diff)
downloadopencut-167f366c6d791dfc054d64f50e83828960668e55.tar.gz
feat: bunx biome format --write .
Diffstat (limited to 'apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx')
-rw-r--r--apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx84
1 files changed, 44 insertions, 40 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
index 473c6f3e..6537d909 100644
--- a/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
@@ -1,57 +1,61 @@
import { useEffect, useRef } from "react";
export interface TimelineScrollSyncProps {
- rulerScrollRef: React.RefObject<HTMLDivElement>;
- tracksScrollRef: React.RefObject<HTMLDivElement>;
+ rulerScrollRef: React.RefObject<HTMLDivElement>;
+ tracksScrollRef: React.RefObject<HTMLDivElement>;
}
export function useTimelineScrollSync({
- rulerScrollRef,
- tracksScrollRef,
+ rulerScrollRef,
+ tracksScrollRef,
}: TimelineScrollSyncProps) {
- const isUpdatingRef = useRef(false);
- const lastSyncRef = useRef(0);
+ const isUpdatingRef = useRef(false);
+ const lastSyncRef = useRef(0);
- // --- Horizontal scroll synchronization between ruler and tracks ---
- useEffect(() => {
- const rulerViewport = rulerScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
- const tracksViewport = tracksScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
+ // --- Horizontal scroll synchronization between ruler and tracks ---
+ useEffect(() => {
+ const rulerViewport = rulerScrollRef.current?.querySelector(
+ "[data-radix-scroll-area-viewport]",
+ ) as HTMLElement;
+ const tracksViewport = tracksScrollRef.current?.querySelector(
+ "[data-radix-scroll-area-viewport]",
+ ) as HTMLElement;
- if (!rulerViewport || !tracksViewport) return;
+ if (!rulerViewport || !tracksViewport) return;
- // Throttled scroll handlers for better performance
- const handleRulerScroll = () => {
- const now = Date.now();
- if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
- lastSyncRef.current = now;
+ // Throttled scroll handlers for better performance
+ const handleRulerScroll = () => {
+ const now = Date.now();
+ if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+ lastSyncRef.current = now;
- isUpdatingRef.current = true;
- tracksViewport.scrollLeft = rulerViewport.scrollLeft;
- isUpdatingRef.current = false;
- };
+ isUpdatingRef.current = true;
+ tracksViewport.scrollLeft = rulerViewport.scrollLeft;
+ isUpdatingRef.current = false;
+ };
- const handleTracksScroll = () => {
- const now = Date.now();
- if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
- lastSyncRef.current = now;
+ const handleTracksScroll = () => {
+ const now = Date.now();
+ if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
+ lastSyncRef.current = now;
- isUpdatingRef.current = true;
- rulerViewport.scrollLeft = tracksViewport.scrollLeft;
- isUpdatingRef.current = false;
- };
+ isUpdatingRef.current = true;
+ rulerViewport.scrollLeft = tracksViewport.scrollLeft;
+ isUpdatingRef.current = false;
+ };
- rulerViewport.addEventListener("scroll", handleRulerScroll, { passive: true });
- tracksViewport.addEventListener("scroll", handleTracksScroll, { passive: true });
+ rulerViewport.addEventListener("scroll", handleRulerScroll, {
+ passive: true,
+ });
+ tracksViewport.addEventListener("scroll", handleTracksScroll, {
+ passive: true,
+ });
- return () => {
- rulerViewport.removeEventListener("scroll", handleRulerScroll);
- tracksViewport.removeEventListener("scroll", handleTracksScroll);
- };
- }, [rulerScrollRef, tracksScrollRef]);
+ return () => {
+ rulerViewport.removeEventListener("scroll", handleRulerScroll);
+ tracksViewport.removeEventListener("scroll", handleTracksScroll);
+ };
+ }, [rulerScrollRef, tracksScrollRef]);
- return null;
+ return null;
}