refactor: improve timeline elements, fix few bugs

1 files changed, 20 insertions, 12 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,

     ]

   );