From b266678fe4bb8c4053688fd037693fa2f930ac14 Mon Sep 17 00:00:00 2001
From: gantiro <gantiro396@gmail.com>
Date: Tue, 15 Jul 2025 22:51:38 +0700
Subject: Optimize timeline performance

---
 .../src/components/editor/timeline-playhead.tsx    | 32 ++++++++++------------
 1 file changed, 14 insertions(+), 18 deletions(-)

(limited to 'apps/web/src/components/editor/timeline-playhead.tsx')

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 };
-- 
cgit v1.3.1