From d643a9a27767d001301f5d8cefc68f227582c446 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 11 Jul 2025 00:57:09 +0200
Subject: small refactor

---
 apps/web/src/components/editor/timeline-playhead.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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