OpenCut/apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx

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;
}