From a9b704382958ca2dc63bd41063162d3e3277be3f Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 18 Jul 2025 18:05:15 +0200
Subject: refactor: improve timeline elements, fix few bugs

---
 apps/web/src/components/editor/timeline.tsx | 32 ++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 12 deletions(-)

(limited to 'apps/web/src/components/editor')

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,
     ]
   );
 
-- 
cgit v1.3.1