2 files changed, 38 insertions, 7 deletions
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index 2b211c21..c784dab8 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -38,7 +38,6 @@ export function PropertiesPanel() {
     ? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
     : null;
 
-  // Get the first image clip for preview (simplified)
   const firstImageClip = tracks
     .flatMap((track) => track.clips)
     .find((clip) => {
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..db810d30 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -290,11 +290,21 @@ export function Timeline() {
     }
   };
 
-  // Deselect all clips when clicking empty timeline area
+  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
+      handleSeekToPosition(e);
     }
   };
 
@@ -487,10 +497,14 @@ 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
+                  handleSeekToPosition(e);
+                }}
               >
                 {/* Time markers */}
                 {(() => {
@@ -557,8 +571,26 @@ export function Timeline() {
 
                 {/* Playhead in ruler */}
                 <div
-                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
+                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000" // Remove pointer-events-none to allow dragging
                   style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const handleMouseMove = (e: MouseEvent) => {
+                      const timeline = timelineRef.current; // Get timeline element ref to track the position
+                      if (!timeline) return; // If no timeline element, exit
+                      const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element
+                      const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element 
+                      const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position
+                      seek(newTime); // Set the current time 
+                    };
+                    const handleMouseUp = () => {
+                      window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener
+                      window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener
+                    };
+                    window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener
+                    window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener
+                  }}
                 >
                   <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
                 </div>
@@ -670,7 +702,7 @@ export function Timeline() {
 
                     {/* Playhead for tracks area */}
                     <div
-                      className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
+                      className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"
                       style={{
                         left: `${currentTime * 50 * zoomLevel}px`,
                         height: `${tracks.length * 60}px`,
@@ -1510,4 +1542,4 @@ function TimelineTrackContent({
       </div>
     </div>
   );
-}
-\ No newline at end of file
+}