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')

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


From 267a590d04c89ad0a74b682d8b575197e1a742fc Mon Sep 17 00:00:00 2001
From: Andrew Kordampalos <megakor@gmail.com>
Date: Mon, 23 Jun 2025 22:32:17 +0300
Subject: De-duplicate code

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

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

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 24169b69..e2c212d9 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -290,18 +290,20 @@ export function Timeline() {
     }
   };
 
-  // Deselect all clips when clicking empty timeline area and seek to clicked position
+  const handleSeekToPosition = (e: React.MouseEvent) => {
+    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);
+  };
+
   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);
+      handleSeekToPosition(e);
     }
   };
 
@@ -500,11 +502,7 @@ export function Timeline() {
                 }}
                 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);
+                  handleSeekToPosition(e);
                 }}
               >
                 {/* Time markers */}
-- 
cgit v1.3.1


From c7f56d61d776f87607fc02e9f71bb4b8e1a49d98 Mon Sep 17 00:00:00 2001
From: Andrew Kordampalos <megakor@gmail.com>
Date: Mon, 23 Jun 2025 22:41:38 +0300
Subject: Format

---
 apps/web/src/components/editor/timeline.tsx | 1 +
 1 file changed, 1 insertion(+)

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

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index e2c212d9..cf6b57e6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -295,6 +295,7 @@ export function Timeline() {
     const clickX = e.clientX - rect.left;
     const clickedTime = clickX / (50 * zoomLevel);
     const clampedTime = Math.max(0, Math.min(duration, clickedTime));
+    
     seek(clampedTime);
   };
 
-- 
cgit v1.3.1