summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/timeline/timeline-content.tsx
diff options
context:
space:
mode:
authorSimon Orzel <simonorzel@gmail.com>2025-07-17 03:00:38 +0200
committerSimon Orzel <simonorzel@gmail.com>2025-07-17 03:00:38 +0200
commit167f366c6d791dfc054d64f50e83828960668e55 (patch)
tree28d6b037a2d0597990d290520a8265cca1ef66d7 /apps/web/src/components/editor/timeline/timeline-content.tsx
parent1505c1b12f516c65b6a3d076f0e9623a294031d6 (diff)
downloadopencut-167f366c6d791dfc054d64f50e83828960668e55.tar.gz
feat: bunx biome format --write .
Diffstat (limited to 'apps/web/src/components/editor/timeline/timeline-content.tsx')
-rw-r--r--apps/web/src/components/editor/timeline/timeline-content.tsx212
1 files changed, 108 insertions, 104 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline-content.tsx b/apps/web/src/components/editor/timeline/timeline-content.tsx
index ed0375da..0229c418 100644
--- a/apps/web/src/components/editor/timeline/timeline-content.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-content.tsx
@@ -7,117 +7,121 @@ import type { TimelineTrack } from "@/types/timeline";
import type { SnapPoint } from "@/hooks/use-timeline-snapping";
export interface TimelineContentProps {
- dynamicTimelineWidth: number;
- tracks: TimelineTrack[];
- duration: number;
- zoomLevel: number;
- currentTime: number;
- seek: (time: number) => void;
- rulerRef: React.RefObject<HTMLDivElement>;
- rulerScrollRef: React.RefObject<HTMLDivElement>;
- tracksScrollRef: React.RefObject<HTMLDivElement>;
- playheadRef: React.RefObject<HTMLDivElement>;
- trackLabelsRef: React.RefObject<HTMLDivElement>;
- timelineRef: React.RefObject<HTMLDivElement>;
- handleSelectionMouseDown: (e: React.MouseEvent) => void;
- handleTimelineContentClick: (e: React.MouseEvent) => void;
- handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
- clearSelectedElements: () => void;
- selectionBox: {
- startPos: { x: number; y: number } | null;
- currentPos: { x: number; y: number } | null;
- isActive: boolean;
- } | null;
- tracksContainerRef: React.RefObject<HTMLDivElement>;
- currentSnapPoint: SnapPoint | null;
- showSnapIndicator: boolean;
+ dynamicTimelineWidth: number;
+ tracks: TimelineTrack[];
+ duration: number;
+ zoomLevel: number;
+ currentTime: number;
+ seek: (time: number) => void;
+ rulerRef: React.RefObject<HTMLDivElement>;
+ rulerScrollRef: React.RefObject<HTMLDivElement>;
+ tracksScrollRef: React.RefObject<HTMLDivElement>;
+ playheadRef: React.RefObject<HTMLDivElement>;
+ trackLabelsRef: React.RefObject<HTMLDivElement>;
+ timelineRef: React.RefObject<HTMLDivElement>;
+ handleSelectionMouseDown: (e: React.MouseEvent) => void;
+ handleTimelineContentClick: (e: React.MouseEvent) => void;
+ handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
+ clearSelectedElements: () => void;
+ selectionBox: {
+ startPos: { x: number; y: number } | null;
+ currentPos: { x: number; y: number } | null;
+ isActive: boolean;
+ } | null;
+ tracksContainerRef: React.RefObject<HTMLDivElement>;
+ currentSnapPoint: SnapPoint | null;
+ showSnapIndicator: boolean;
}
export function TimelineContent({
- dynamicTimelineWidth,
- tracks,
- duration,
- zoomLevel,
- currentTime,
- seek,
- rulerRef,
- rulerScrollRef,
- tracksScrollRef,
- playheadRef,
- trackLabelsRef,
- timelineRef,
- handleSelectionMouseDown,
- handleTimelineContentClick,
- handleSnapPointChange,
- clearSelectedElements,
- selectionBox,
- tracksContainerRef,
- currentSnapPoint,
- showSnapIndicator,
+ dynamicTimelineWidth,
+ tracks,
+ duration,
+ zoomLevel,
+ currentTime,
+ seek,
+ rulerRef,
+ rulerScrollRef,
+ tracksScrollRef,
+ playheadRef,
+ trackLabelsRef,
+ timelineRef,
+ handleSelectionMouseDown,
+ handleTimelineContentClick,
+ handleSnapPointChange,
+ clearSelectedElements,
+ selectionBox,
+ tracksContainerRef,
+ currentSnapPoint,
+ showSnapIndicator,
}: TimelineContentProps) {
- return (
- <div className="relative min-w-max min-h-max" style={{ minWidth: `${dynamicTimelineWidth}px` }}>
- <div className={`h-full grid grid-cols-[192px_1fr] ${tracks.length > 0 ? `grid-rows-[20px_repeat(${tracks.length},minmax(0,max-content))]` : 'grid-rows-[20px_1fr]'}`}>
+ return (
+ <div
+ className="relative min-w-max min-h-max"
+ style={{ minWidth: `${dynamicTimelineWidth}px` }}
+ >
+ <div
+ className={`h-full grid grid-cols-[192px_1fr] ${tracks.length > 0 ? `grid-rows-[20px_repeat(${tracks.length},minmax(0,max-content))]` : "grid-rows-[20px_1fr]"}`}
+ >
+ {/* Top-Left Corner (Empty space above track labels) */}
+ <div className="sticky top-0 left-0 border-inset bg-card/[0.99]"></div>
- {/* Top-Left Corner (Empty space above track labels) */}
- <div className="sticky top-0 left-0 border-inset bg-card/[0.99]"></div>
+ {/* Top Row (Sticky Ruler Header) */}
+ <TimelineRuler
+ duration={duration}
+ zoomLevel={zoomLevel}
+ currentTime={currentTime}
+ seek={seek}
+ rulerRef={rulerRef}
+ rulerScrollRef={rulerScrollRef}
+ tracksScrollRef={tracksScrollRef}
+ playheadRef={playheadRef}
+ handleSelectionMouseDown={handleSelectionMouseDown}
+ handleTimelineContentClick={handleTimelineContentClick}
+ />
- {/* Top Row (Sticky Ruler Header) */}
- <TimelineRuler
- duration={duration}
- zoomLevel={zoomLevel}
- currentTime={currentTime}
- seek={seek}
- rulerRef={rulerRef}
- rulerScrollRef={rulerScrollRef}
- tracksScrollRef={tracksScrollRef}
- playheadRef={playheadRef}
- handleSelectionMouseDown={handleSelectionMouseDown}
- handleTimelineContentClick={handleTimelineContentClick}
- />
+ {/* Track Rows */}
+ <TimelineTracksArea
+ tracks={tracks}
+ zoomLevel={zoomLevel}
+ handleSnapPointChange={handleSnapPointChange}
+ clearSelectedElements={clearSelectedElements}
+ />
+ </div>
- {/* Track Rows */}
- <TimelineTracksArea
- tracks={tracks}
- zoomLevel={zoomLevel}
- handleSnapPointChange={handleSnapPointChange}
- clearSelectedElements={clearSelectedElements}
- />
- </div>
+ {/* Overlay Components - positioned absolutely relative to the timeline container */}
+ <SelectionBox
+ startPos={selectionBox?.startPos || null}
+ currentPos={selectionBox?.currentPos || null}
+ containerRef={tracksContainerRef}
+ isActive={selectionBox?.isActive || false}
+ />
- {/* Overlay Components - positioned absolutely relative to the timeline container */}
- <SelectionBox
- startPos={selectionBox?.startPos || null}
- currentPos={selectionBox?.currentPos || null}
- containerRef={tracksContainerRef}
- isActive={selectionBox?.isActive || false}
- />
+ <TimelinePlayhead
+ currentTime={currentTime}
+ duration={duration}
+ zoomLevel={zoomLevel}
+ tracks={tracks}
+ seek={seek}
+ rulerRef={rulerRef}
+ rulerScrollRef={rulerScrollRef}
+ tracksScrollRef={tracksScrollRef}
+ trackLabelsRef={trackLabelsRef}
+ timelineRef={timelineRef}
+ playheadRef={playheadRef}
+ isSnappingToPlayhead={
+ showSnapIndicator && currentSnapPoint?.type === "playhead"
+ }
+ />
- <TimelinePlayhead
- currentTime={currentTime}
- duration={duration}
- zoomLevel={zoomLevel}
- tracks={tracks}
- seek={seek}
- rulerRef={rulerRef}
- rulerScrollRef={rulerScrollRef}
- tracksScrollRef={tracksScrollRef}
- trackLabelsRef={trackLabelsRef}
- timelineRef={timelineRef}
- playheadRef={playheadRef}
- isSnappingToPlayhead={
- showSnapIndicator && currentSnapPoint?.type === "playhead"
- }
- />
-
- <SnapIndicator
- snapPoint={currentSnapPoint}
- zoomLevel={zoomLevel}
- tracks={tracks}
- timelineRef={timelineRef}
- trackLabelsRef={trackLabelsRef}
- isVisible={showSnapIndicator}
- />
- </div>
- );
+ <SnapIndicator
+ snapPoint={currentSnapPoint}
+ zoomLevel={zoomLevel}
+ tracks={tracks}
+ timelineRef={timelineRef}
+ trackLabelsRef={trackLabelsRef}
+ isVisible={showSnapIndicator}
+ />
+ </div>
+ );
}