1 files changed, 15 insertions, 17 deletions

diff --git a/apps/web/src/components/editor/media-panel.tsx b/apps/web/src/components/editor/media-panel.tsx
index f2b3f657..dfe08365 100644
--- a/apps/web/src/components/editor/media-panel.tsx
+++ b/apps/web/src/components/editor/media-panel.tsx
@@ -3,7 +3,7 @@
 import { Button } from "../ui/button";
 import { AspectRatio } from "../ui/aspect-ratio";
 import { DragOverlay } from "../ui/drag-overlay";
-import { useMediaStore } from "@/stores/media-store";
+import { useMediaStore, type MediaItem } from "@/stores/media-store";
 import { processMediaFiles } from "@/lib/media-processing";
 import { Plus, Image, Video, Music, Trash2, Upload } from "lucide-react";
 import { useDragDrop } from "@/hooks/use-drag-drop";
@@ -17,27 +17,28 @@ export function MediaPanel() {
   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
   const [mediaFilter, setMediaFilter] = useState("all");
 
   const processFiles = async (files: FileList | File[]) => {
-    // If no files, do nothing
-    if (!files?.length) return;
-
+    if (!files || files.length === 0) return;
     setIsProcessing(true);
+    setProgress(0);
     try {
       // Process files (extract metadata, generate thumbnails, etc.)
-      const items = await processMediaFiles(files);
+      const processedItems = await processMediaFiles(files, (p) =>
+        setProgress(p)
+      );
       // Add each processed media item to the store
-      items.forEach((item) => {
-        addMediaItem(item);
-      });
+      processedItems.forEach((item) => addMediaItem(item));
     } catch (error) {
-      // Show error if processing fails
-      console.error("File processing failed:", error);
+      // Show error toast if processing fails
+      console.error("Error processing files:", error);
       toast.error("Failed to process files");
     } finally {
       setIsProcessing(false);
+      setProgress(0);
     }
   };
 
@@ -67,7 +68,7 @@ export function MediaPanel() {
     return `${min}:${sec.toString().padStart(2, "0")}`;
   };
 
-  const startDrag = (e: React.DragEvent, item: any) => {
+  const startDrag = (e: React.DragEvent, item: MediaItem) => {
     // When dragging a media item, set drag data for timeline to read
     e.dataTransfer.setData(
       "application/x-media-item",
@@ -101,7 +102,7 @@ export function MediaPanel() {
     setFilteredMediaItems(filtered);
   }, [mediaItems, mediaFilter, searchQuery]);
 
-  const renderPreview = (item: any) => {
+  const renderPreview = (item: MediaItem) => {
     // Render a preview for each media type (image, video, audio, unknown)
     // Each preview is draggable to the timeline
     const baseDragProps = {
@@ -241,15 +242,12 @@ export function MediaPanel() {
               {isProcessing ? (
                 <>
                   <Upload className="h-4 w-4 animate-spin" />
-                  <span className="hidden md:inline ml-2">Processing...</span>
+                  <span className="hidden md:inline ml-2">{progress}%</span>
                 </>
               ) : (
                 <>
                   <Plus className="h-4 w-4" />
-                  <span
-                    className="hidden sm:inline ml-2"
-                    aria-label="Add file"
-                  >
+                  <span className="hidden sm:inline ml-2" aria-label="Add file">
                     Add
                   </span>
                 </>