refactor: improve timeline elements, fix few bugs

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,
     ]
   );
 

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);
   };
 

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