Merge branch 'staging' of https://github.com/mazeincoding/AppCut into staging

1 files changed, 61 insertions, 0 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
new file mode 100644
index 00000000..6537d909
--- /dev/null
+++ b/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react";
+
+export interface TimelineScrollSyncProps {
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+}
+
+export function useTimelineScrollSync({
+	rulerScrollRef,
+	tracksScrollRef,
+}: TimelineScrollSyncProps) {
+	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;
+
+		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;
+
+			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;
+
+			isUpdatingRef.current = true;
+			rulerViewport.scrollLeft = tracksViewport.scrollLeft;
+			isUpdatingRef.current = false;
+		};
+
+		rulerViewport.addEventListener("scroll", handleRulerScroll, {
+			passive: true,
+		});
+		tracksViewport.addEventListener("scroll", handleTracksScroll, {
+			passive: true,
+		});
+
+		return () => {
+			rulerViewport.removeEventListener("scroll", handleRulerScroll);
+			tracksViewport.removeEventListener("scroll", handleTracksScroll);
+		};
+	}, [rulerScrollRef, tracksScrollRef]);
+
+	return null;
+}