Implementing playhead scrubbing over timeline

apps/web/src/components/editor/timeline.tsx

@@ -557,8 +557,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"
                   style={{ left: `${currentTime * 50 * zoomLevel}px` }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const handleMouseMove = (e: MouseEvent) => {
+                      const timeline = timelineRef.current;
+                      if (!timeline) return;
+                      const rect = timeline.getBoundingClientRect();
+                      const mouseX = Math.max(0, e.clientX - rect.left);
+                      const newTime = mouseX / (50 * zoomLevel);
+                      seek(newTime);
+                    };
+                    const handleMouseUp = () => {
+                      window.removeEventListener("mousemove", handleMouseMove);
+                      window.removeEventListener("mouseup", handleMouseUp);
+                    };
+                    window.addEventListener("mousemove", handleMouseMove);
+                    window.addEventListener("mouseup", handleMouseUp);
+                  }}
                 >
                   <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 +688,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 +1528,4 @@ function TimelineTrackContent({
       </div>
     </div>
   );
-}
+}

apps/web/src/components/header.tsx

@@ -23,7 +23,8 @@ export function Header() {
           GitHub
         </Button>
       </Link>
-      <Link href={session ? "/editor" : "/auth/login"}>
+      {/* <Link href={session ? "/editor" : "/auth/login"}> */}
+      <Link href="/editor">
         <Button size="sm" className="text-sm ml-4">
           Start editing
           <ArrowRight className="h-4 w-4" />

apps/web/src/lib/media-processing.ts

@@ -47,6 +47,7 @@ export async function processMediaFiles(
       if ((fileType === "video" || fileType === "audio") && !duration) {
         duration = await getMediaDuration(file);
       }
+      console.log(file)
 
       processedItems.push({
         name: file.name,