diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 32 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-timeline-element-resize.ts | 24 | ||||
| -rw-r--r-- | apps/web/src/stores/timeline-store.ts | 8 |
3 files changed, 46 insertions, 18 deletions
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<TimelineStore["dragState"]>) => void; startDrag: ( elementId: string, @@ -230,6 +231,8 @@ export const useTimelineStore = create<TimelineStore>((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<TimelineStore>((set, get) => { clickOffsetTime: 0, currentTime: 0, }, + justFinishedDragging: true, }); + + setTimeout(() => { + set({ justFinishedDragging: false }); + }, 50); }, // Persistence methods |