diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index a78eb3f6..889c9f2c 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -75,11 +75,10 @@ export function Timeline() { splitAndKeepRight, toggleTrackMute, separateAudio, - undo, - redo, snappingEnabled, toggleSnapping, dragState, + justFinishedDragging, } = useTimelineStore(); const { mediaItems, addMediaItem } = useMediaStore(); const { activeProject } = useProjectStore(); @@ -162,21 +161,16 @@ export function Timeline() { // Timeline content click to seek handler const handleTimelineContentClick = useCallback( (e: React.MouseEvent) => { - console.log( - JSON.stringify({ - timelineClick: { - isSelecting, - justFinishedSelecting, - willReturn: isSelecting || justFinishedSelecting, - }, - }) - ); - // Don't seek if this was a selection box operation if (isSelecting || justFinishedSelecting) { return; } + // Don't seek if we just finished dragging an element + if (justFinishedDragging) { + return; + } + // Don't seek if clicking on timeline elements, but still deselect if ((e.target as HTMLElement).closest(".timeline-element")) { return; @@ -193,6 +187,19 @@ export function Timeline() { return; } + // MAIN FIX: Only seek on direct clicks to timeline background areas + // Check if the click is on the actual timeline background, not on any interactive elements + const target = e.target as HTMLElement; + const isTimelineBackground = + target.classList.contains("track-elements-container") || + target.closest("[data-ruler-area]") || + target.classList.contains("timeline-track-background"); + + if (!isTimelineBackground) { + clearSelectedElements(); + return; + } + // Clear selected elements when clicking empty timeline area console.log(JSON.stringify({ clearingSelectedElements: true })); clearSelectedElements(); @@ -249,6 +256,7 @@ export function Timeline() { clearSelectedElements, isSelecting, justFinishedSelecting, + justFinishedDragging, ] ); diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts index ee427e5e..46765beb 100644 --- a/apps/web/src/hooks/use-timeline-element-resize.ts +++ b/apps/web/src/hooks/use-timeline-element-resize.ts @@ -112,7 +112,12 @@ export function useTimelineElementResize({ const trimDelta = newTrimStart - resizing.initialTrimStart; const newStartTime = element.startTime + trimDelta; - onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd); + onUpdateTrim( + track.id, + element.id, + newTrimStart, + resizing.initialTrimEnd + ); updateElementStartTime(track.id, element.id, newStartTime); } else { // Trying to extend beyond trimStart = 0 @@ -132,7 +137,12 @@ export function useTimelineElementResize({ const trimDelta = newTrimStart - resizing.initialTrimStart; const newStartTime = element.startTime + trimDelta; - onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd); + onUpdateTrim( + track.id, + element.id, + newTrimStart, + resizing.initialTrimEnd + ); updateElementStartTime(track.id, element.id, newStartTime); } } @@ -175,11 +185,13 @@ export function useTimelineElementResize({ } }; - const handleResizeMove = (e: React.MouseEvent) => { - updateTrimFromMouseMove(e); - }; - const handleResizeEnd = () => { + console.log( + JSON.stringify({ + resizeEnd: true, + timeStamp: Date.now(), + }) + ); setResizing(null); }; diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts index 9a2c7361..c85f5bd2 100644 --- a/apps/web/src/stores/timeline-store.ts +++ b/apps/web/src/stores/timeline-store.ts @@ -74,6 +74,7 @@ interface TimelineStore { clickOffsetTime: number; currentTime: number; }; + justFinishedDragging: boolean; setDragState: (dragState: Partial) => void; startDrag: ( elementId: string, @@ -230,6 +231,8 @@ export const useTimelineStore = create((set, get) => { // Snapping settings defaults snappingEnabled: true, + justFinishedDragging: false, + getSortedTracks: () => { const { _tracks } = get(); const tracksWithMain = ensureMainTrack(_tracks); @@ -938,7 +941,12 @@ export const useTimelineStore = create((set, get) => { clickOffsetTime: 0, currentTime: 0, }, + justFinishedDragging: true, }); + + setTimeout(() => { + set({ justFinishedDragging: false }); + }, 50); }, // Persistence methods