Merge branch 'staging' into feat/timeline-return-to-start

1 files changed, 121 insertions, 26 deletions

diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index bff0a90a..669d556c 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -55,7 +55,7 @@ import { SelectionBox } from "../selection-box";
 import { useSelectionBox } from "@/hooks/use-selection-box";
 import { SnapIndicator } from "../snap-indicator";
 import { SnapPoint } from "@/hooks/use-timeline-snapping";
-import type { DragData, TimelineTrack } from "@/types/timeline";
+import type { DragData, TimelineTrack, TrackType } from "@/types/timeline";
 import {
   getTrackHeight,
   getCumulativeHeightBefore,
@@ -169,11 +169,32 @@ export function Timeline() {
   const handleTimelineMouseDown = useCallback((e: React.MouseEvent) => {
     // Only track mouse down on timeline background areas (not elements)
     const target = e.target as HTMLElement;
+    console.log(
+      JSON.stringify({
+        debug_mousedown: "START",
+        target_class: target.className,
+        target_parent_class: target.parentElement?.className,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        timeStamp: e.timeStamp,
+      })
+    );
+
     const isTimelineBackground =
       !target.closest(".timeline-element") &&
       !playheadRef.current?.contains(target) &&
       !target.closest("[data-track-labels]");
 
+    console.log(
+      JSON.stringify({
+        debug_mousedown: "CHECK",
+        isTimelineBackground,
+        hasTimelineElement: !!target.closest(".timeline-element"),
+        hasPlayhead: !!playheadRef.current?.contains(target),
+        hasTrackLabels: !!target.closest("[data-track-labels]"),
+      })
+    );
+
     if (isTimelineBackground) {
       mouseTrackingRef.current = {
         isMouseDown: true,
@@ -181,12 +202,38 @@ export function Timeline() {
         downY: e.clientY,
         downTime: e.timeStamp,
       };
+      console.log(
+        JSON.stringify({
+          debug_mousedown: "TRACKED",
+          mouseTracking: mouseTrackingRef.current,
+        })
+      );
+    } else {
+      console.log(
+        JSON.stringify({
+          debug_mousedown: "IGNORED - not timeline background",
+        })
+      );
     }
   }, []);
 
   // Timeline content click to seek handler
   const handleTimelineContentClick = useCallback(
     (e: React.MouseEvent) => {
+      console.log(
+        JSON.stringify({
+          debug_click: "START",
+          target: (e.target as HTMLElement).className,
+          target_parent: (e.target as HTMLElement).parentElement?.className,
+          mouseTracking: mouseTrackingRef.current,
+          isSelecting,
+          justFinishedSelecting,
+          clickX: e.clientX,
+          clickY: e.clientY,
+          timeStamp: e.timeStamp,
+        })
+      );
+
       const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
 
       // Reset mouse tracking
@@ -201,8 +248,8 @@ export function Timeline() {
       if (!isMouseDown) {
         console.log(
           JSON.stringify({
-            ignoredClickWithoutMouseDown: true,
-            timeStamp: e.timeStamp,
+            debug_click: "REJECTED - no mousedown",
+            mouseTracking: mouseTrackingRef.current,
           })
         );
         return;
@@ -216,11 +263,10 @@ export function Timeline() {
       if (deltaX > 5 || deltaY > 5 || deltaTime > 500) {
         console.log(
           JSON.stringify({
-            ignoredDragNotClick: true,
+            debug_click: "REJECTED - movement too large",
             deltaX,
             deltaY,
             deltaTime,
-            timeStamp: e.timeStamp,
           })
         );
         return;
@@ -228,27 +274,54 @@ export function Timeline() {
 
       // Don't seek if this was a selection box operation
       if (isSelecting || justFinishedSelecting) {
+        console.log(
+          JSON.stringify({
+            debug_click: "REJECTED - selection operation",
+            isSelecting,
+            justFinishedSelecting,
+          })
+        );
         return;
       }
 
       // Don't seek if clicking on timeline elements, but still deselect
       if ((e.target as HTMLElement).closest(".timeline-element")) {
+        console.log(
+          JSON.stringify({
+            debug_click: "REJECTED - clicked timeline element",
+          })
+        );
         return;
       }
 
       // Don't seek if clicking on playhead
       if (playheadRef.current?.contains(e.target as Node)) {
+        console.log(
+          JSON.stringify({
+            debug_click: "REJECTED - clicked playhead",
+          })
+        );
         return;
       }
 
       // Don't seek if clicking on track labels
       if ((e.target as HTMLElement).closest("[data-track-labels]")) {
+        console.log(
+          JSON.stringify({
+            debug_click: "REJECTED - clicked track labels",
+          })
+        );
         clearSelectedElements();
         return;
       }
 
       // Clear selected elements when clicking empty timeline area
-      console.log(JSON.stringify({ clearingSelectedElements: true }));
+      console.log(
+        JSON.stringify({
+          debug_click: "PROCEEDING - clearing elements",
+          clearingSelectedElements: true,
+        })
+      );
       clearSelectedElements();
 
       // Determine if we're clicking in ruler or tracks area
@@ -256,24 +329,39 @@ export function Timeline() {
         "[data-ruler-area]"
       );
 
+      console.log(
+        JSON.stringify({
+          debug_click: "CALCULATING POSITION",
+          isRulerClick,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          target_element: (e.target as HTMLElement).tagName,
+          target_class: (e.target as HTMLElement).className,
+        })
+      );
+
       let mouseX: number;
       let scrollLeft = 0;
 
       if (isRulerClick) {
         // Calculate based on ruler position
-        const rulerContent = rulerScrollRef.current?.querySelector(
-          "[data-radix-scroll-area-viewport]"
-        ) as HTMLElement;
-        if (!rulerContent) return;
+        const rulerContent = rulerScrollRef.current;
+        if (!rulerContent) {
+          console.log(
+            JSON.stringify({
+              debug_click: "ERROR - no ruler container found",
+            })
+          );
+          return;
+        }
         const rect = rulerContent.getBoundingClientRect();
         mouseX = e.clientX - rect.left;
         scrollLeft = rulerContent.scrollLeft;
       } else {
-        // Calculate based on tracks content position
-        const tracksContent = tracksScrollRef.current?.querySelector(
-          "[data-radix-scroll-area-viewport]"
-        ) as HTMLElement;
-        if (!tracksContent) return;
+        const tracksContent = tracksScrollRef.current;
+        if (!tracksContent) {
+          return;
+        }
         const rect = tracksContent.getBoundingClientRect();
         mouseX = e.clientX - rect.left;
         scrollLeft = tracksContent.scrollLeft;
@@ -291,7 +379,6 @@ export function Timeline() {
       // Use frame snapping for timeline clicking
       const projectFps = activeProject?.fps || 30;
       const time = snapTimeToFrame(rawTime, projectFps);
-
       seek(time);
     },
     [
@@ -405,7 +492,21 @@ export function Timeline() {
               item.name === processedItem.name && item.url === processedItem.url
           );
           if (addedItem) {
-            useTimelineStore.getState().addMediaToNewTrack(addedItem);
+            const trackType: TrackType =
+              addedItem.type === "audio" ? "audio" : "media";
+            const targetTrackId = useTimelineStore
+              .getState()
+              .insertTrackAt(trackType, 0);
+
+            useTimelineStore.getState().addElementToTrack(targetTrackId, {
+              type: "media",
+              mediaId: addedItem.id,
+              name: addedItem.name,
+              duration: addedItem.duration || 5,
+              startTime: currentTime,
+              trimStart: 0,
+              trimEnd: 0,
+            });
           }
         }
       } catch (error) {
@@ -428,15 +529,9 @@ export function Timeline() {
 
   // --- Scroll synchronization effect ---
   useEffect(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
+    const rulerViewport = rulerScrollRef.current;
+    const tracksViewport = tracksScrollRef.current;
+    const trackLabelsViewport = trackLabelsScrollRef.current;
 
     if (!rulerViewport || !tracksViewport) return;