From 2a1ac8fcf7075a4a25523c7601e98013313658c5 Mon Sep 17 00:00:00 2001
From: Andrew Kordampalos <megakor@gmail.com>
Date: Mon, 23 Jun 2025 22:17:36 +0300
Subject: Implement click-to-seek functionality in timeline

---
 apps/web/src/components/editor/timeline.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 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 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 */}
                 {(() => {
-- 
cgit v1.3.1