1 files changed, 37 insertions, 15 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index ce0ffa30..1ecbe545 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.
@@ -68,6 +69,7 @@ export function Timeline() {
   } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const dragCounterRef = useRef(0);
   const timelineRef = useRef<HTMLDivElement>(null);
@@ -333,8 +335,12 @@ export function Timeline() {
     } else if (e.dataTransfer.files?.length > 0) {
       // Handle file drops by creating new tracks
       setIsProcessing(true);
+      setProgress(0);
       try {
-        const processedItems = await processMediaFiles(e.dataTransfer.files);
+        const processedItems = await processMediaFiles(
+          e.dataTransfer.files,
+          (p) => setProgress(p)
+        );
         for (const processedItem of processedItems) {
           addMediaItem(processedItem);
           const currentMediaItems = useMediaStore.getState().mediaItems;
@@ -362,6 +368,7 @@ export function Timeline() {
         toast.error("Failed to process dropped files");
       } finally {
         setIsProcessing(false);
+        setProgress(0);
       }
     }
   };
@@ -566,15 +573,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,10 +600,11 @@ 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"
-            style={{ minWidth: '18ch', textAlign: 'center' }}
-            >
-              {currentTime.toFixed(1)}s / {duration.toFixed(1)}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>
 
           {/* Test Clip Button - for debugging */}
@@ -953,6 +952,15 @@ export function Timeline() {
                     )}
                   </>
                 )}
+                {isDragOver && (
+                  <div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
+                    <div>
+                      {isProcessing
+                        ? `Processing ${progress}%`
+                        : "Drop media here to add to timeline"}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -1626,7 +1634,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>
     );