From 167f366c6d791dfc054d64f50e83828960668e55 Mon Sep 17 00:00:00 2001
From: Simon Orzel <simonorzel@gmail.com>
Date: Thu, 17 Jul 2025 03:00:38 +0200
Subject: feat: bunx biome format --write .

---
 .../editor/timeline/timeline-playhead.tsx          | 243 +++++++++++----------
 1 file changed, 122 insertions(+), 121 deletions(-)

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

diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 9cd1429c..5e531e9c 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -1,121 +1,122 @@
-"use client";
-
-import { useRef } from "react";
-import { TimelineTrack } from "@/types/timeline";
-import {
-  TIMELINE_CONSTANTS,
-  getTotalTracksHeight,
-} from "@/constants/timeline-constants";
-import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
-
-interface TimelinePlayheadProps {
-  currentTime: number;
-  duration: number;
-  zoomLevel: number;
-  tracks: TimelineTrack[];
-  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>;
-  isSnappingToPlayhead?: boolean;
-}
-
-export function TimelinePlayhead({
-  currentTime,
-  duration,
-  zoomLevel,
-  tracks,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  trackLabelsRef,
-  timelineRef,
-  playheadRef: externalPlayheadRef,
-  isSnappingToPlayhead = false,
-}: TimelinePlayheadProps) {
-  const internalPlayheadRef = useRef<HTMLDivElement>(null);
-  const playheadRef = externalPlayheadRef || internalPlayheadRef;
-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  // Use timeline container height minus a few pixels for breathing room
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
-
-  // Get dynamic track labels width, fallback to 192px (ml-48) if no tracks or no ref
-  const trackLabelsWidth = 192; // Fixed width from grid layout
-  const leftPosition = playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-
-  return (
-    <>
-      {/* Playhead line container */}
-      <div
-        ref={playheadRef}
-        className="absolute pointer-events-auto z-[95]"
-        style={{
-          left: `${trackLabelsWidth + leftPosition}px`,
-          top: 0,
-          bottom: 0,
-          width: "2px", // Slightly wider for better click target
-        }}
-        onMouseDown={handlePlayheadMouseDown}
-      >
-        {/* The playhead line spanning full height */}
-        <div
-          className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
-        />
-      </div>
-
-      {/* Playhead dot indicator - separate container with highest z-index */}
-      <div
-        className="absolute pointer-events-none z-[100]"
-        style={{
-          left: `${trackLabelsWidth + leftPosition}px`,
-          top: 0,
-          bottom: 0,
-        }}
-      >
-        <div
-          className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
-        />
-      </div>
-    </>
-  );
-}
-
-// Also export a hook for getting ruler handlers
-export function useTimelinePlayheadRuler({
-  currentTime,
-  duration,
-  zoomLevel,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  playheadRef,
-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
-  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  return { handleRulerMouseDown, isDraggingRuler };
-}
+"use client";
+
+import { useRef } from "react";
+import { TimelineTrack } from "@/types/timeline";
+import {
+	TIMELINE_CONSTANTS,
+	getTotalTracksHeight,
+} from "@/constants/timeline-constants";
+import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
+
+interface TimelinePlayheadProps {
+	currentTime: number;
+	duration: number;
+	zoomLevel: number;
+	tracks: TimelineTrack[];
+	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>;
+	isSnappingToPlayhead?: boolean;
+}
+
+export function TimelinePlayhead({
+	currentTime,
+	duration,
+	zoomLevel,
+	tracks,
+	seek,
+	rulerRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	trackLabelsRef,
+	timelineRef,
+	playheadRef: externalPlayheadRef,
+	isSnappingToPlayhead = false,
+}: TimelinePlayheadProps) {
+	const internalPlayheadRef = useRef<HTMLDivElement>(null);
+	const playheadRef = externalPlayheadRef || internalPlayheadRef;
+	const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
+		currentTime,
+		duration,
+		zoomLevel,
+		seek,
+		rulerRef,
+		rulerScrollRef,
+		tracksScrollRef,
+		playheadRef,
+	});
+
+	// Use timeline container height minus a few pixels for breathing room
+	const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
+	const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
+
+	// Get dynamic track labels width, fallback to 192px (ml-48) if no tracks or no ref
+	const trackLabelsWidth = 192; // Fixed width from grid layout
+	const leftPosition =
+		playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+
+	return (
+		<>
+			{/* Playhead line container */}
+			<div
+				ref={playheadRef}
+				className="absolute pointer-events-auto z-[95]"
+				style={{
+					left: `${trackLabelsWidth + leftPosition}px`,
+					top: 0,
+					bottom: 0,
+					width: "2px", // Slightly wider for better click target
+				}}
+				onMouseDown={handlePlayheadMouseDown}
+			>
+				{/* The playhead line spanning full height */}
+				<div
+					className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
+				/>
+			</div>
+
+			{/* Playhead dot indicator - separate container with highest z-index */}
+			<div
+				className="absolute pointer-events-none z-[100]"
+				style={{
+					left: `${trackLabelsWidth + leftPosition}px`,
+					top: 0,
+					bottom: 0,
+				}}
+			>
+				<div
+					className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
+				/>
+			</div>
+		</>
+	);
+}
+
+// Also export a hook for getting ruler handlers
+export function useTimelinePlayheadRuler({
+	currentTime,
+	duration,
+	zoomLevel,
+	seek,
+	rulerRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	playheadRef,
+}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
+	const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
+		currentTime,
+		duration,
+		zoomLevel,
+		seek,
+		rulerRef,
+		rulerScrollRef,
+		tracksScrollRef,
+		playheadRef,
+	});
+
+	return { handleRulerMouseDown, isDraggingRuler };
+}
-- 
cgit v1.3.1