diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index f6d9fdde..d1bb3aa8 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -20,12 +20,10 @@ import { TooltipTrigger, TooltipProvider, } from "../ui/tooltip"; -import { DragOverlay } from "../ui/drag-overlay"; import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store"; import { useMediaStore } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store"; import { processMediaFiles } from "@/lib/media-processing"; -import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment"; import { toast } from "sonner"; import { useState, useRef, useEffect } from "react"; @@ -64,7 +62,7 @@ export function Timeline() { const handleDragEnter = (e: React.DragEvent) => { // When something is dragged over the timeline, show overlay e.preventDefault(); - // Don't show overlay for timeline clips or other internal drags + // Don't show overlay for timeline clips - they're handled by tracks if (e.dataTransfer.types.includes("application/x-timeline-clip")) { return; } @@ -81,7 +79,7 @@ export function Timeline() { const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); - // Don't update state for timeline clips + // Don't update state for timeline clips - they're handled by tracks if (e.dataTransfer.types.includes("application/x-timeline-clip")) { return; } @@ -98,6 +96,12 @@ export function Timeline() { setIsDragOver(false); dragCounterRef.current = 0; + // Ignore timeline clip drags - they're handled by track-specific handlers + const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip"); + if (hasTimelineClip) { + return; + } + const mediaItemData = e.dataTransfer.getData("application/x-media-item"); if (mediaItemData) { // Handle media item drops by creating new tracks @@ -903,6 +907,7 @@ function TimelineTrackContent({ const handleTrackDrop = (e: React.DragEvent) => { e.preventDefault(); + e.stopPropagation(); // Reset all drag states dragCounterRef.current = 0; @@ -985,7 +990,6 @@ function TimelineTrackContent({ updateClipStartTime(track.id, clipId, snappedTime); } else { // Moving to different track - console.log('Moving clip from', fromTrackId, 'to', track.id); moveClipToTrack(fromTrackId, track.id, clipId); requestAnimationFrame(() => { updateClipStartTime(track.id, clipId, snappedTime); @@ -1295,87 +1299,7 @@ function TimelineTrackContent({ )} )} - - ); -} - -// Custom context menu for track actions -function TrackContextMenu({ - x, - y, - track, - onClose, - onSplit, - onMute, - onDelete, -}: { - x: number; - y: number; - track: any; - onClose: () => void; - onSplit: () => void; - onMute: () => void; - onDelete: () => void; -}) { - // Small, modern, visually appealing popup - return ( -
e.preventDefault()} - > - {/* Split option */} - - {/* Mute/Unmute option */} - - {/* Delete option */} - -
- ); -} - - - - - - - - - - - - - - - +} \ No newline at end of file