External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Maze Winther
2025-07-17 17:34:48 +02:00
parent 4170ee4f5b
commit 0217303532
1 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
+70 -70
View File
@@ -1,10 +1,10 @@
import { Fragment } from "react"; import { Fragment } from "react";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
import { import {
ContextMenu, ContextMenu,
ContextMenuContent, ContextMenuContent,
ContextMenuItem, ContextMenuItem,
ContextMenuTrigger, ContextMenuTrigger,
} from "../../ui/context-menu"; } from "../../ui/context-menu";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { TimelineTrackContent } from "../timeline-track"; import { TimelineTrackContent } from "../timeline-track";
@@ -14,76 +14,76 @@ import type { TimelineTrack } from "@/types/timeline";
import type { SnapPoint } from "@/hooks/use-timeline-snapping"; import type { SnapPoint } from "@/hooks/use-timeline-snapping";
export interface TimelineTracksAreaProps { export interface TimelineTracksAreaProps {
tracks: TimelineTrack[]; tracks: TimelineTrack[];
zoomLevel: number; zoomLevel: number;
handleSnapPointChange: (snapPoint: SnapPoint | null) => void; handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
clearSelectedElements: () => void; clearSelectedElements: () => void;
} }
export function TimelineTracksArea({ export function TimelineTracksArea({
tracks, tracks,
zoomLevel, zoomLevel,
handleSnapPointChange, handleSnapPointChange,
clearSelectedElements, clearSelectedElements,
}: TimelineTracksAreaProps) { }: TimelineTracksAreaProps) {
const { addTrack, toggleTrackMute } = useTimelineStore(); const { addTrack, toggleTrackMute } = useTimelineStore();
return ( return (
<> <>
{/* Track Rows */} {/* Track Rows */}
{tracks.map((track, index) => ( {tracks.map((track, index) => (
<Fragment key={track.id}> <Fragment key={track.id}>
{/* Left Column (Sticky Track Labels) */} {/* Left Column (Sticky Track Labels) */}
<div <div
className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card z-[100]" className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card z-[100]"
style={{ height: `${getTrackHeight(track.type)}px` }} style={{ height: `${getTrackHeight(track.type)}px` }}
> >
<div className="flex items-center gap-2 px-2"> <div className="flex items-center gap-2 px-2">
<TrackIcon track={track} /> <TrackIcon track={track} />
</div> </div>
{track.muted && ( {track.muted && (
<span className="text-xs text-red-500 font-semibold">Muted</span> <span className="text-xs text-red-500 font-semibold">Muted</span>
)} )}
</div> </div>
{/* Scrollable Track Content */} {/* Scrollable Track Content */}
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<div <div
className=" h-full" className=" h-full"
onClick={(e) => { onClick={(e) => {
// If clicking empty area (not on a element), deselect all elements // If clicking empty area (not on a element), deselect all elements
if (!(e.target as HTMLElement).closest(".timeline-element")) { if (!(e.target as HTMLElement).closest(".timeline-element")) {
clearSelectedElements(); clearSelectedElements();
} }
}} }}
> >
<TimelineTrackContent <TimelineTrackContent
track={track} track={track}
zoomLevel={zoomLevel} zoomLevel={zoomLevel}
onSnapPointChange={handleSnapPointChange} onSnapPointChange={handleSnapPointChange}
/> />
</div> </div>
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>
<ContextMenuItem onClick={() => toggleTrackMute(track.id)}> <ContextMenuItem onClick={() => toggleTrackMute(track.id)}>
{track.muted ? "Unmute Track" : "Mute Track"} {track.muted ? "Unmute Track" : "Mute Track"}
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem>Track settings (soon)</ContextMenuItem> <ContextMenuItem>Track settings (soon)</ContextMenuItem>
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
</Fragment> </Fragment>
))} ))}
{/* Add Track Button - spans full width */} {/* Add Track Button - spans full width */}
<div <div
onClick={() => addTrack("media")} onClick={() => addTrack("media")}
className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card hover:bg-card/50 transition-colors cursor-pointer z-[100]" className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card hover:bg-card/50 transition-colors cursor-pointer z-[100]"
style={{ height: `${getTrackHeight("media")}px` }} style={{ height: `${getTrackHeight("media")}px` }}
> >
<div className="w-full flex justify-center items-center"> <div className="w-full flex justify-center items-center">
<Plus className="w-4 h-4 text-muted-foreground" /> <Plus className="w-4 h-4 text-muted-foreground" />
</div> </div>
</div> </div>
</> </>
); );
} }