Merge branch 'main' into split-issue-83

1 files changed, 30 insertions, 10 deletions

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 7d3c85fb..591eac89 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -29,6 +29,7 @@ import {
   SelectTrigger,

   SelectValue,

 } from "../ui/select";

+

 import {

   Tooltip,

   TooltipContent,

@@ -36,6 +37,9 @@ import {
   TooltipTrigger,

 } from "../ui/tooltip";

 

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

+

+

 export function Timeline() {

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

   // You can drag media here to add it to your project.

@@ -566,15 +570,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}>

@@ -950,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>

@@ -1625,7 +1631,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>

     );