diff options
| author | Simon Orzel <simonorzel@gmail.com> | 2025-07-17 03:00:38 +0200 |
|---|---|---|
| committer | Simon Orzel <simonorzel@gmail.com> | 2025-07-17 03:00:38 +0200 |
| commit | 167f366c6d791dfc054d64f50e83828960668e55 (patch) | |
| tree | 28d6b037a2d0597990d290520a8265cca1ef66d7 /apps/web/src/components/editor/timeline/timeline-content.tsx | |
| parent | 1505c1b12f516c65b6a3d076f0e9623a294031d6 (diff) | |
| download | opencut-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.tsx | 212 |
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> + ); } |
