External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: bunx biome format --write .

Browse Source
This commit is contained in:
Simon Orzel
2025-07-17 03:00:38 +02:00
parent 1505c1b12f
commit 167f366c6d
11 changed files with 1038 additions and 1049 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
+44 -40
View File
@@ -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;
}