Merge branch 'main' of https://github.com/mazeincoding/AppCut

1 files changed, 58 insertions, 39 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 12907738..c1b8f3e8 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -35,6 +35,7 @@ import {
   SelectTrigger,

   SelectValue,

 } from "../ui/select";

+import AudioWaveform from "./audio-waveform";

 

 export function Timeline() {

   // Timeline shows all tracks (video, audio, effects) and their clips.

@@ -221,7 +222,7 @@ export function Timeline() {
         const clipLeft = clip.startTime * 50 * zoomLevel;

         const clipTop = trackIdx * 60;

         const clipBottom = clipTop + 60;

-        const clipRight = clipLeft + clipWidth;

+        const clipRight = clipLeft + 60; // Set a fixed width for time display

         if (

           bx1 < clipRight &&

           bx2 > clipLeft &&

@@ -566,15 +567,6 @@ export function Timeline() {
       onMouseLeave={() => setIsInTimeline(false)}

       onWheel={handleWheel}

     >

-      {/* Show overlay when dragging media over the timeline */}

-      {isDragOver && (

-        <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">

-          <div>

-            Drop media here to add to timeline

-          </div>

-        </div>

-      )}

-

       {/* Toolbar */}

       <div className="border-b flex items-center px-2 py-1 gap-1">

         <TooltipProvider delayDuration={500}>

@@ -602,38 +594,40 @@ export function Timeline() {
           <div className="w-px h-6 bg-border mx-1" />

 

           {/* Time Display */}

-          <div className="text-xs text-muted-foreground font-mono px-2">

-            {Math.floor(currentTime * 10) / 10}s /{" "}

-            {Math.floor(duration * 10) / 10}s

+          <div className="text-xs text-muted-foreground font-mono px-2"

+            style={{ minWidth: '18ch', textAlign: 'center' }}

+            >

+              {currentTime.toFixed(1)}s / {duration.toFixed(1)}s

           </div>

 

-          <div className="w-px h-6 bg-border mx-1" />

-

           {/* Test Clip Button - for debugging */}

           {tracks.length === 0 && (

-            <Tooltip>

-              <TooltipTrigger asChild>

-                <Button

-                  variant="outline"

-                  size="sm"

-                  onClick={() => {

-                    const trackId = addTrack("video");

-                    addClipToTrack(trackId, {

-                      mediaId: "test",

-                      name: "Test Clip",

-                      duration: 5,

-                      startTime: 0,

-                      trimStart: 0,

-                      trimEnd: 0,

-                    });

-                  }}

-                  className="text-xs"

-                >

-                  Add Test Clip

-                </Button>

-              </TooltipTrigger>

-              <TooltipContent>Add a test clip to try playback</TooltipContent>

-            </Tooltip>

+            <>

+              <div className="w-px h-6 bg-border mx-1" />

+              <Tooltip>

+                <TooltipTrigger asChild>

+                  <Button

+                    variant="outline"

+                    size="sm"

+                    onClick={() => {

+                      const trackId = addTrack("video");

+                      addClipToTrack(trackId, {

+                        mediaId: "test",

+                        name: "Test Clip",

+                        duration: 5,

+                        startTime: 0,

+                        trimStart: 0,

+                        trimEnd: 0,

+                      });

+                    }}

+                    className="text-xs"

+                  >

+                    Add Test Clip

+                  </Button>

+                </TooltipTrigger>

+                <TooltipContent>Add a test clip to try playback</TooltipContent>

+              </Tooltip>

+            </>

           )}

 

           <div className="w-px h-6 bg-border mx-1" />

@@ -951,6 +945,17 @@ export function Timeline() {
                     )}

                   </>

                 )}

+                {isDragOver && (

+                  <div

+                    className="absolute left-0 right-0 border-2 border-dashed border-accent flex items-center justify-center text-muted-foreground"

+                    style={{

+                      top: `${tracks.length * 60}px`,

+                      height: "60px",

+                    }}

+                  >

+                    <div>Drop media here to add a new track</div>

+                  </div>

+                )}

               </div>

             </div>

           </div>

@@ -1624,7 +1629,21 @@ function TimelineTrackContent({
       );

     }

 

-    // Fallback for audio or videos without thumbnails

+    if (mediaItem.type === "audio") {

+    return (

+      <div className="w-full h-full flex items-center gap-2">

+        <div className="flex-1 min-w-0">

+          <AudioWaveform 

+            audioUrl={mediaItem.url} 

+            height={24}

+            className="w-full"

+          />

+        </div>

+      </div>

+    );

+  }

+

+    // Fallback for videos without thumbnails

     return (

       <span className="text-xs text-foreground/80 truncate">{clip.name}</span>

     );