Optimize timeline performance

1 files changed, 14 insertions, 18 deletions

diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx
index 78aed3a8..daee080e 100644
--- a/apps/web/src/components/editor/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline-playhead.tsx
@@ -2,10 +2,7 @@
 

 import { useRef } from "react";

 import { TimelineTrack } from "@/types/timeline";

-import {

-  TIMELINE_CONSTANTS,

-  getTotalTracksHeight,

-} from "@/constants/timeline-constants";

+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

 import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";

 

 interface TimelinePlayheadProps {

@@ -16,7 +13,6 @@ interface TimelinePlayheadProps {
   seek: (time: number) => void;

   rulerRef: React.RefObject<HTMLDivElement>;

   rulerScrollRef: React.RefObject<HTMLDivElement>;

-  tracksScrollRef: React.RefObject<HTMLDivElement>;

   trackLabelsRef?: React.RefObject<HTMLDivElement>;

   timelineRef: React.RefObject<HTMLDivElement>;

   playheadRef?: React.RefObject<HTMLDivElement>;

@@ -31,7 +27,6 @@ export function TimelinePlayhead({
   seek,

   rulerRef,

   rulerScrollRef,

-  tracksScrollRef,

   trackLabelsRef,

   timelineRef,

   playheadRef: externalPlayheadRef,

@@ -39,15 +34,13 @@ export function TimelinePlayhead({
 }: TimelinePlayheadProps) {

   const internalPlayheadRef = useRef<HTMLDivElement>(null);

   const playheadRef = externalPlayheadRef || internalPlayheadRef;

-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({

+  const { playheadPosition, handleRulerMouseDown } = useTimelinePlayhead({

     currentTime,

     duration,

     zoomLevel,

     seek,

     rulerRef,

     rulerScrollRef,

-    tracksScrollRef,

-    playheadRef,

   });

 

   // Use timeline container height minus a few pixels for breathing room

@@ -66,14 +59,14 @@ export function TimelinePlayhead({
   return (

     <div

       ref={playheadRef}

-      className="absolute pointer-events-auto z-[100]"

+      className="absolute pointer-events-auto z-[999]"

       style={{

         left: `${leftPosition}px`,

         top: 0,

         height: `${totalHeight}px`,

         width: "2px", // Slightly wider for better click target

       }}

-      onMouseDown={handlePlayheadMouseDown}

+      onMouseDown={handleRulerMouseDown}

     >

       {/* The playhead line spanning full height */}

       <div

@@ -96,21 +89,24 @@ export function useTimelinePlayheadRuler({
   seek,

   rulerRef,

   rulerScrollRef,

-  tracksScrollRef,

-  playheadRef,

-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {

-  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({

+}: Omit<

+  TimelinePlayheadProps,

+  | "tracks"

+  | "trackLabelsRef"

+  | "timelineRef"

+  | "tracksScrollRef"

+  | "playheadRef"

+>) {

+  const { handleRulerMouseDown } = useTimelinePlayhead({

     currentTime,

     duration,

     zoomLevel,

     seek,

     rulerRef,

     rulerScrollRef,

-    tracksScrollRef,

-    playheadRef,

   });

 

-  return { handleRulerMouseDown, isDraggingRuler };

+  return { handleRulerMouseDown };

 }

 

 export { TimelinePlayhead as default };