chore: cleaned up logic, comments, logic and overall structure of media panel to be more robust

apps/web/src/components/editor/media-panel.tsx

@@ -16,17 +16,17 @@ export function MediaPanel() {
   const [isProcessing, setIsProcessing] = useState(false);
 
   const processFiles = async (files: FileList | File[]) => {
+    if (!files?.length) return;
+
     setIsProcessing(true);
-
     try {
-      const processedItems = await processMediaFiles(files);
+      const items = await processMediaFiles(files);
-
+      items.forEach(item => {
-      for (const processedItem of processedItems) {
+        addMediaItem(item);
-        addMediaItem(processedItem);
+        toast.success(`Added ${item.name}`);
-        toast.success(`Added ${processedItem.name} to project`);
+      });
-      }
     } catch (error) {
-      console.error("Error processing files:", error);
+      console.error("File processing failed:", error);
       toast.error("Failed to process files");
     } finally {
       setIsProcessing(false);
@@ -34,82 +34,64 @@ export function MediaPanel() {
   };
 
   const { isDragOver, dragProps } = useDragDrop({
-    onDrop: (files) => {
+    onDrop: processFiles,
-      processFiles(files);
-    },
   });
 
-  const handleFileSelect = () => {
+  const handleFileSelect = () => fileInputRef.current?.click();
-    fileInputRef.current?.click();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) processFiles(e.target.files);
+    e.target.value = "";
   };
 
-  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleRemove = (e: React.MouseEvent, id: string) => {
-    if (e.target.files && e.target.files.length > 0) {
-      processFiles(e.target.files);
-      // Reset the input so the same file can be selected again
-      e.target.value = "";
-    }
-  };
-
-  const handleRemoveItem = (e: React.MouseEvent, itemId: string) => {
     e.stopPropagation();
-    removeMediaItem(itemId);
+    removeMediaItem(id);
-    toast.success("Media removed from project");
+    toast.success("Media removed");
-  };
-
-  const handleDragStart = (e: React.DragEvent, item: any) => {
-    // Mark this as an internal app drag
-    e.dataTransfer.setData(
-      "application/x-media-item",
-      JSON.stringify({
-        id: item.id,
-        type: item.type,
-        name: item.name,
-      })
-    );
-    e.dataTransfer.effectAllowed = "copy";
   };
 
   const formatDuration = (duration: number) => {
-    const minutes = Math.floor(duration / 60);
+    const min = Math.floor(duration / 60);
-    const seconds = Math.floor(duration % 60);
+    const sec = Math.floor(duration % 60);
-    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    return `${min}:${sec.toString().padStart(2, "0")}`;
   };
 
-  const getMediaIcon = (type: string) => {
+  const startDrag = (e: React.DragEvent, item: any) => {
-    switch (type) {
+    e.dataTransfer.setData("application/x-media-item", JSON.stringify({
-      case "video":
+      id: item.id,
-        return <Video className="h-4 w-4" />;
+      type: item.type,
-      case "audio":
+      name: item.name,
-        return <Music className="h-4 w-4" />;
+    }));
-      default:
+    e.dataTransfer.effectAllowed = "copy";
-        return <Image className="h-4 w-4" />;
+  };
+
+  const renderPreview = (item: any) => {
+    const baseDragProps = {
+      draggable: true,
+      onDragStart: (e: React.DragEvent) => startDrag(e, item),
+    };
+
+    if (item.type === "image") {
+      return (
+        <img
+          src={item.url}
+          alt={item.name}
+          className="w-full h-full object-cover rounded cursor-grab active:cursor-grabbing"
+          loading="lazy"
+          {...baseDragProps}
+        />
+      );
     }
-  };
 
-  const renderMediaPreview = (item: any) => {
+    if (item.type === "video") {
-    switch (item.type) {
+      if (item.thumbnailUrl) {
-      case "image":
         return (
-          <img
+          <div className="relative w-full h-full cursor-grab active:cursor-grabbing" {...baseDragProps}>
-            src={item.url}
-            alt={item.name}
-            className="w-full h-full object-cover rounded cursor-grab active:cursor-grabbing"
-            loading="lazy"
-            draggable={true}
-            onDragStart={(e) => handleDragStart(e, item)}
-          />
-        );
-      case "video":
-        return item.thumbnailUrl ? (
-          <div className="relative w-full h-full">
             <img
               src={item.thumbnailUrl}
               alt={item.name}
-              className="w-full h-full object-cover rounded cursor-grab active:cursor-grabbing"
+              className="w-full h-full object-cover rounded"
               loading="lazy"
-              draggable={true}
-              onDragStart={(e) => handleDragStart(e, item)}
             />
             <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
               <Video className="h-6 w-6 text-white drop-shadow-md" />
@@ -120,49 +102,37 @@ export function MediaPanel() {
               </div>
             )}
           </div>
-        ) : (
-          <div
-            className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded cursor-grab active:cursor-grabbing"
-            draggable={true}
-            onDragStart={(e) => handleDragStart(e, item)}
-          >
-            <Video className="h-6 w-6 mb-1" />
-            <span className="text-xs">Video</span>
-            {item.duration && (
-              <span className="text-xs opacity-70">
-                {formatDuration(item.duration)}
-              </span>
-            )}
-          </div>
-        );
-      case "audio":
-        return (
-          <div
-            className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20 cursor-grab active:cursor-grabbing"
-            draggable={true}
-            onDragStart={(e) => handleDragStart(e, item)}
-          >
-            <Music className="h-6 w-6 mb-1" />
-            <span className="text-xs">Audio</span>
-            {item.duration && (
-              <span className="text-xs opacity-70">
-                {formatDuration(item.duration)}
-              </span>
-            )}
-          </div>
-        );
-      default:
-        return (
-          <div
-            className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded cursor-grab active:cursor-grabbing"
-            draggable={true}
-            onDragStart={(e) => handleDragStart(e, item)}
-          >
-            {getMediaIcon(item.type)}
-            <span className="text-xs mt-1">Unknown</span>
-          </div>
         );
+      }
+      return (
+        <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded cursor-grab active:cursor-grabbing" {...baseDragProps}>
+          <Video className="h-6 w-6 mb-1" />
+          <span className="text-xs">Video</span>
+          {item.duration && (
+            <span className="text-xs opacity-70">{formatDuration(item.duration)}</span>
+          )}
+        </div>
+      );
     }
+
+    if (item.type === "audio") {
+      return (
+        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20 cursor-grab active:cursor-grabbing" {...baseDragProps}>
+          <Music className="h-6 w-6 mb-1" />
+          <span className="text-xs">Audio</span>
+          {item.duration && (
+            <span className="text-xs opacity-70">{formatDuration(item.duration)}</span>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded cursor-grab active:cursor-grabbing" {...baseDragProps}>
+        <Image className="h-6 w-6" />
+        <span className="text-xs mt-1">Unknown</span>
+      </div>
+    );
   };
 
   return (
@@ -173,51 +143,71 @@ export function MediaPanel() {
         accept="image/*,video/*,audio/*"
         multiple
         className="hidden"
-        onChange={handleFileInputChange}
+        onChange={handleFileChange}
       />
 
       <div
-        className={`h-full overflow-y-auto transition-colors duration-200 relative ${
+        className={`h-full flex flex-col transition-colors relative ${isDragOver ? "bg-accent/30" : ""
-          isDragOver ? "bg-accent/30 border-accent" : ""
+          }`}
-        }`}
         {...dragProps}
       >
         <DragOverlay isVisible={isDragOver} />
 
-        <div className="space-y-4 p-2 h-full">
+        <div className="p-2 border-b">
-          {/* Media Grid */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={handleFileSelect}
+            disabled={isProcessing}
+          >
+            {isProcessing ? (
+              <>
+                <Upload className="h-4 w-4 mr-2 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              <>
+                <Plus className="h-4 w-4 mr-2" />
+                Add Media
+              </>
+            )}
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
           {mediaItems.length === 0 ? (
-            <EmptyMedia
+            <div className="flex flex-col items-center justify-center py-8 text-center h-full">
-              onFileSelect={handleFileSelect}
+              <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
-              isProcessing={isProcessing}
+                <Image className="h-8 w-8 text-muted-foreground" />
-            />
+              </div>
+              <p className="text-sm text-muted-foreground">No media in project</p>
+              <p className="text-xs text-muted-foreground/70 mt-1">
+                Drag files here or use the button above
+              </p>
+            </div>
           ) : (
             <div className="grid grid-cols-2 gap-2">
               {mediaItems.map((item) => (
                 <div key={item.id} className="relative group">
                   <Button
                     variant="outline"
-                    className="flex flex-col gap-2 p-2 h-auto overflow-hidden w-full relative"
+                    className="flex flex-col gap-2 p-2 h-auto w-full relative"
                   >
-                    <AspectRatio ratio={item.aspectRatio} className="w-full">
+                    <AspectRatio ratio={item.aspectRatio}>
-                      {renderMediaPreview(item)}
+                      {renderPreview(item)}
                     </AspectRatio>
-                    <span className="text-xs truncate max-w-full px-1">
+                    <span className="text-xs truncate px-1">
                       {item.name}
                     </span>
                   </Button>
 
-                  {/* Remove button - positioned outside the button container */}
+                  <div className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <div
-                    className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
-                    onDragStart={(e) => e.preventDefault()}
-                    onDrag={(e) => e.preventDefault()}
-                  >
                     <Button
                       variant="destructive"
                       size="icon"
-                      className="h-6 w-6 pointer-events-auto"
+                      className="h-6 w-6"
-                      onClick={(e) => handleRemoveItem(e, item.id)}
+                      onClick={(e) => handleRemove(e, item.id)}
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -231,44 +221,3 @@ export function MediaPanel() {
     </>
   );
 }
-
-function EmptyMedia({
-  onFileSelect,
-  isProcessing,
-}: {
-  onFileSelect: () => void;
-  isProcessing: boolean;
-}) {
-  return (
-    <div className="flex flex-col items-center justify-center py-8 text-center h-full">
-      <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
-        {isProcessing ? (
-          <div className="animate-spin">
-            <Upload className="h-8 w-8 text-muted-foreground" />
-          </div>
-        ) : (
-          <Image className="h-8 w-8 text-muted-foreground" />
-        )}
-      </div>
-      <p className="text-sm text-muted-foreground">
-        {isProcessing ? "Processing files..." : "No media in project"}
-      </p>
-      <p className="text-xs text-muted-foreground/70 mt-1">
-        {isProcessing
-          ? "Please wait while files are being processed"
-          : "Drag files or click to add media"}
-      </p>
-      {!isProcessing && (
-        <Button
-          variant="outline"
-          size="sm"
-          className="mt-4"
-          onClick={onFileSelect}
-        >
-          <Plus className="h-4 w-4 mr-2" />
-          Add Media
-        </Button>
-      )}
-    </div>
-  );
-}