diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline')
3 files changed, 16 insertions, 8 deletions
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index fd2b2a11..bcaece89 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -744,13 +744,16 @@ export function Timeline() { /> </div> </ContextMenuTrigger> - <ContextMenuContent> + <ContextMenuContent className="z-[200]"> <ContextMenuItem - onClick={() => toggleTrackMute(track.id)} + onClick={(e) => { + e.stopPropagation(); + toggleTrackMute(track.id); + }} > {track.muted ? "Unmute Track" : "Mute Track"} </ContextMenuItem> - <ContextMenuItem> + <ContextMenuItem onClick={(e) => e.stopPropagation()}> Track settings (soon) </ContextMenuItem> </ContextMenuContent> diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx index 8aadde82..c66e9fcb 100644 --- a/apps/web/src/components/editor/timeline/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline/timeline-element.tsx @@ -102,7 +102,8 @@ export function TimelineElement({ // Element should always be positioned at startTime - trimStart only affects content, not position const elementLeft = elementStartTime * 50 * zoomLevel; - const handleElementSplitContext = () => { + const handleElementSplitContext = (e: React.MouseEvent) => { + e.stopPropagation(); const effectiveStart = element.startTime; const effectiveEnd = element.startTime + @@ -118,7 +119,8 @@ export function TimelineElement({ } }; - const handleElementDuplicateContext = () => { + const handleElementDuplicateContext = (e: React.MouseEvent) => { + e.stopPropagation(); const { id, ...elementWithoutId } = element; addElementToTrack(track.id, { ...elementWithoutId, @@ -130,7 +132,8 @@ export function TimelineElement({ }); }; - const handleElementDeleteContext = () => { + const handleElementDeleteContext = (e: React.MouseEvent) => { + e.stopPropagation(); if (rippleEditingEnabled) { removeElementFromTrackWithRipple(track.id, element.id); } else { @@ -138,7 +141,8 @@ export function TimelineElement({ } }; - const handleReplaceClip = () => { + const handleReplaceClip = (e: React.MouseEvent) => { + e.stopPropagation(); if (element.type !== "media") { toast.error("Replace is only available for media clips"); return; @@ -354,7 +358,7 @@ export function TimelineElement({ </div> </div> </ContextMenuTrigger> - <ContextMenuContent> + <ContextMenuContent className="z-[200]"> <ContextMenuItem onClick={handleElementSplitContext}> <Scissors className="h-4 w-4 mr-2" /> Split at playhead diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx index 509ce9d7..d0aea7fa 100644 --- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx +++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx @@ -72,6 +72,7 @@ export function TimelinePlayhead({ top: 0, height: `${totalHeight}px`, width: "2px", // Slightly wider for better click target + zIndex: 100, }} onMouseDown={handlePlayheadMouseDown} > |