feat: add context menu in tracks and zooming in timeline

1 files changed, 41 insertions, 11 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce81f9e3..6c4063f8 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -49,6 +49,7 @@ export function Timeline() {
   const [zoomLevel, setZoomLevel] = useState(1);

   const dragCounterRef = useRef(0);

   const timelineRef = useRef<HTMLDivElement>(null);

+  const [isInTimeline, setIsInTimeline] = useState(false);

 

   // Unified context menu state

   const [contextMenu, setContextMenu] = useState<{

@@ -477,10 +478,29 @@ export function Timeline() {
     toast.success("Deleted selected clip(s)");

   };

 

+

+  // Prevent explorer zooming in/out when in timeline

+  useEffect(() => {

+    const preventZoom = (e: WheelEvent) => {

+      if (isInTimeline && (e.ctrlKey || e.metaKey)) {

+        e.preventDefault();

+      }

+    };

+

+    document.addEventListener('wheel', preventZoom, { passive: false });

+    

+    return () => {

+      document.removeEventListener('wheel', preventZoom);

+    };

+  }, [isInTimeline]);

+

   return (

     <div

       className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? "bg-accent/30 border-accent" : ""}`}

       {...dragProps}

+      onMouseEnter={() => setIsInTimeline(true)}

+      onMouseLeave={() => setIsInTimeline(false)}

+      onWheel={handleWheel}

     >

       {/* Show overlay when dragging media over the timeline */}

       {isDragOver && (

@@ -758,25 +778,35 @@ export function Timeline() {
                   <div

                     key={track.id}

                     className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"

+                    onContextMenu={(e) => {

+                      e.preventDefault();

+                      setContextMenu({

+                        type: 'track',

+                        trackId: track.id,

+                        x: e.clientX,

+                        y: e.clientY,

+                      });

+                    }}

                   >

-                    <div className="flex items-center gap-2 flex-1 min-w-0">

+                    <div className="flex items-center flex-1 min-w-0">

                       <div

-                        className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video"

-                          ? "bg-blue-500"

-                          : track.type === "audio"

+                        className={`w-3 h-3 rounded-full flex-shrink-0 ${

+                          track.type === "video"

+                            ? "bg-blue-500"

+                            : track.type === "audio"

                             ? "bg-green-500"

                             : "bg-purple-500"

-                          }`}

+                        }`}

                       />

-                      <span className="text-sm font-medium truncate">

+                      <span className="ml-2 text-sm font-medium truncate">

                         {track.name}

                       </span>

-                      {track.muted && (

-                        <span className="ml-2 text-xs text-red-500 font-semibold">

-                          Muted

-                        </span>

-                      )}

                     </div>

+                    {track.muted && (

+                      <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">

+                        Muted

+                      </span>

+                    )}

                   </div>

                 ))}

               </div>