Merge pull request #26 from SamSyntax/main

Playhead timeline dragging/scrubbing 

3 files changed, 22 insertions, 4 deletions

diff --git a/apps/web/bun.lockb b/apps/web/bun.lockb
new file mode 100755
index 00000000..30e5a2f5
--- /dev/null
+++ b/apps/web/bun.lockb
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..9af7a204 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/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" // 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 +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>

   );

-}
\ No newline at end of file
+}

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 109d022e..b742bf32 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -23,7 +23,7 @@ export function Header() {
           GitHub

         </Button>

       </Link>

-      <Link href={session ? "/editor" : "/auth/login"}>

+       <Link href={session ? "/editor" : "/auth/login"}>

         <Button size="sm" className="text-sm ml-4">

           Start editing

           <ArrowRight className="h-4 w-4" />