3 files changed, 17 insertions, 3 deletions

diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx
index 4deb6797..ce4ed1ff 100644
--- a/apps/web/src/components/editor/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline-playhead.tsx
@@ -1,5 +1,6 @@
 "use client";

 

+import { useRef } from "react";

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

 import {

   TIMELINE_CONSTANTS,

@@ -18,6 +19,7 @@ interface TimelinePlayheadProps {
   tracksScrollRef: React.RefObject<HTMLDivElement>;

   trackLabelsRef?: React.RefObject<HTMLDivElement>;

   timelineRef: React.RefObject<HTMLDivElement>;

+  playheadRef?: React.RefObject<HTMLDivElement>;

 }

 

 export function TimelinePlayhead({

@@ -31,7 +33,10 @@ export function TimelinePlayhead({
   tracksScrollRef,

   trackLabelsRef,

   timelineRef,

+  playheadRef: externalPlayheadRef,

 }: TimelinePlayheadProps) {

+  const internalPlayheadRef = useRef<HTMLDivElement>(null);

+  const playheadRef = externalPlayheadRef || internalPlayheadRef;

   const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({

     currentTime,

     duration,

@@ -40,6 +45,7 @@ export function TimelinePlayhead({
     rulerRef,

     rulerScrollRef,

     tracksScrollRef,

+    playheadRef,

   });

 

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

@@ -57,7 +63,8 @@ export function TimelinePlayhead({
 

   return (

     <div

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

+      ref={playheadRef}

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

       style={{

         left: `${leftPosition}px`,

         top: 0,

@@ -84,6 +91,7 @@ export function useTimelinePlayheadRuler({
   rulerRef,

   rulerScrollRef,

   tracksScrollRef,

+  playheadRef,

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

   const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({

     currentTime,

@@ -93,6 +101,7 @@ export function useTimelinePlayheadRuler({
     rulerRef,

     rulerScrollRef,

     tracksScrollRef,

+    playheadRef,

   });

 

   return { handleRulerMouseDown, isDraggingRuler };

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index fb4723d6..53a7aacd 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -124,6 +124,7 @@ export function Timeline() {
   const rulerScrollRef = useRef<HTMLDivElement>(null);
   const tracksScrollRef = useRef<HTMLDivElement>(null);
   const trackLabelsRef = useRef<HTMLDivElement>(null);
+  const playheadRef = useRef<HTMLDivElement>(null);
   const isUpdatingRef = useRef(false);
   const lastRulerSync = useRef(0);
   const lastTracksSync = useRef(0);
@@ -137,6 +138,7 @@ export function Timeline() {
     rulerRef,
     rulerScrollRef,
     tracksScrollRef,
+    playheadRef,
   });
 
   // Timeline content click to seek handler
@@ -148,7 +150,7 @@ export function Timeline() {
       }
 
       // Don't seek if clicking on playhead
-      if ((e.target as HTMLElement).closest(".playhead")) {
+      if (playheadRef.current?.contains(e.target as Node)) {
         return;
       }
 
@@ -880,6 +882,7 @@ export function Timeline() {
           tracksScrollRef={tracksScrollRef}
           trackLabelsRef={trackLabelsRef}
           timelineRef={timelineRef}
+          playheadRef={playheadRef}
         />
         {/* Timeline Header with Ruler */}
         <div className="flex bg-panel sticky top-0 z-10">
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 67f0d20c..61adaf92 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -8,6 +8,7 @@ interface UseTimelinePlayheadProps {
   rulerRef: React.RefObject<HTMLDivElement>;

   rulerScrollRef: React.RefObject<HTMLDivElement>;

   tracksScrollRef: React.RefObject<HTMLDivElement>;

+  playheadRef?: React.RefObject<HTMLDivElement>;

 }

 

 export function useTimelinePlayhead({

@@ -18,6 +19,7 @@ export function useTimelinePlayhead({
   rulerRef,

   rulerScrollRef,

   tracksScrollRef,

+  playheadRef,

 }: UseTimelinePlayheadProps) {

   // Playhead scrubbing state

   const [isScrubbing, setIsScrubbing] = useState(false);

@@ -48,7 +50,7 @@ export function useTimelinePlayhead({
       if (e.button !== 0) return;

 

       // Don't interfere if clicking on the playhead itself

-      if ((e.target as HTMLElement).closest(".playhead")) return;

+      if (playheadRef?.current?.contains(e.target as Node)) return;

 

       e.preventDefault();

       setIsDraggingRuler(true);