Implement click-to-seek functionality in timeline

3 files changed, 22 insertions, 2 deletions

diff --git a/apps/web/src/app/editor/editor.css b/apps/web/src/app/editor/editor.css
new file mode 100644
index 00000000..f482c6de
--- /dev/null
+++ b/apps/web/src/app/editor/editor.css
@@ -0,0 +1,4 @@
+/* Prevent scroll jumping on Mac devices when using the editor */
+body {
+  overflow: hidden;
+} 
\ No newline at end of file
diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 64186a3e..2efb59cc 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
+import "./editor.css";
 import {
   ResizablePanelGroup,
   ResizablePanel,
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..24169b69 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -290,11 +290,18 @@ export function Timeline() {
     }

   };

 

-  // Deselect all clips when clicking empty timeline area

+  // Deselect all clips when clicking empty timeline area and seek to clicked position

   const handleTimelineAreaClick = (e: React.MouseEvent) => {

     // Only clear selection if the click target is the timeline background (not a child/clip)

     if (e.target === e.currentTarget) {

       clearSelectedClips();

+      

+      // Calculate the clicked time position and seek to it

+      const rect = e.currentTarget.getBoundingClientRect();

+      const clickX = e.clientX - rect.left;

+      const clickedTime = clickX / (50 * zoomLevel);

+      const clampedTime = Math.max(0, Math.min(duration, clickedTime));

+      seek(clampedTime);

     }

   };

 

@@ -487,10 +494,18 @@ export function Timeline() {
           <div className="flex-1 relative overflow-hidden">

             <ScrollArea className="w-full">

               <div

-                className="relative h-12 bg-muted/30"

+                className="relative h-12 bg-muted/30 cursor-pointer"

                 style={{

                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,

                 }}

+                onClick={(e) => {

+                  // Calculate the clicked time position and seek to it

+                  const rect = e.currentTarget.getBoundingClientRect();

+                  const clickX = e.clientX - rect.left;

+                  const clickedTime = clickX / (50 * zoomLevel);

+                  const clampedTime = Math.max(0, Math.min(duration, clickedTime));

+                  seek(clampedTime);

+                }}

               >

                 {/* Time markers */}

                 {(() => {