diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline/index.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/index.tsx | 61 |
1 files changed, 28 insertions, 33 deletions
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index 85d6a11e..8f41fbf3 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -20,6 +20,9 @@ import { ZoomIn, ZoomOut, Bookmark, + Eye, + MicOff, + Mic, } from "lucide-react"; import { Tooltip, @@ -544,7 +547,7 @@ export function Timeline() { {/* Timeline Header with Ruler */} <div className="flex bg-panel sticky top-0 z-10"> {/* Track Labels Header */} - <div className="w-48 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2"> + <div className="w-28 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2"> {/* Empty space */} <span className="text-sm font-medium text-muted-foreground opacity-0"> . @@ -652,14 +655,14 @@ export function Timeline() { ); }).filter(Boolean); })()} - + {/* Bookmark markers */} {(() => { const { activeProject } = useProjectStore.getState(); if (!activeProject?.bookmarks?.length) return null; - + return activeProject.bookmarks.map((bookmarkTime, i) => ( - <div + <div key={`bookmark-${i}`} className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer" style={{ @@ -687,7 +690,7 @@ export function Timeline() { {tracks.length > 0 && ( <div ref={trackLabelsRef} - className="w-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel" + className="w-28 shrink-0 border-r overflow-y-auto z-100 bg-panel" data-track-labels > <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}> @@ -695,17 +698,24 @@ export function Timeline() { {tracks.map((track) => ( <div key={track.id} - className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5" + className="flex items-center px-3 group" style={{ height: `${getTrackHeight(track.type)}px` }} > - <div className="flex items-center flex-1 min-w-0"> + <div className="flex items-center justify-end flex-1 min-w-0 gap-2"> + {track.muted ? ( + <MicOff + className="h-4 w-4 text-destructive cursor-pointer" + onClick={() => toggleTrackMute(track.id)} + /> + ) : ( + <Mic + className="h-4 w-4 text-muted-foreground cursor-pointer" + onClick={() => toggleTrackMute(track.id)} + /> + )} + <Eye className="h-4 w-4 text-muted-foreground" /> <TrackIcon track={track} /> </div> - {track.muted && ( - <span className="ml-2 text-xs text-red-500 font-semibold shrink-0"> - Muted - </span> - )} </div> ))} </div> @@ -760,7 +770,7 @@ export function Timeline() { <ContextMenu key={track.id}> <ContextMenuTrigger asChild> <div - className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]" + className="absolute left-0 right-0" style={{ top: `${getCumulativeHeightBefore( tracks, @@ -798,23 +808,6 @@ export function Timeline() { <ContextMenuItem onClick={(e) => e.stopPropagation()}> Track settings (soon) </ContextMenuItem> - {activeProject?.bookmarks?.length && activeProject.bookmarks.length > 0 && ( - <> - <ContextMenuItem disabled>Bookmarks</ContextMenuItem> - {activeProject.bookmarks.map((bookmarkTime, i) => ( - <ContextMenuItem - key={`bookmark-menu-${i}`} - onClick={(e) => { - e.stopPropagation(); - seek(bookmarkTime); - }} - > - <Bookmark className="h-3 w-3 mr-2 inline-block" /> - {bookmarkTime.toFixed(1)}s - </ContextMenuItem> - ))} - </> - )} </ContextMenuContent> </ContextMenu> ))} @@ -1000,11 +993,11 @@ function TimelineToolbar({ const handleZoomSliderChange = (values: number[]) => { setZoomLevel(values[0]); }; - + const handleToggleBookmark = async () => { await toggleBookmark(currentTime); }; - + // Check if the current time is bookmarked const currentBookmarked = isBookmarked(currentTime); return ( @@ -1142,7 +1135,9 @@ function TimelineToolbar({ <Tooltip> <TooltipTrigger asChild> <Button variant="text" size="icon" onClick={handleToggleBookmark}> - <Bookmark className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`} /> + <Bookmark + className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`} + /> </Button> </TooltipTrigger> <TooltipContent> |