diff options
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/editor/media-panel/views/media.tsx | 77 | ||||
| -rw-r--r-- | apps/web/src/components/ui/drag-overlay.tsx | 78 |
2 files changed, 108 insertions, 47 deletions
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx index 5438737f..f8cbb639 100644 --- a/apps/web/src/components/editor/media-panel/views/media.tsx +++ b/apps/web/src/components/editor/media-panel/views/media.tsx @@ -3,7 +3,7 @@ import { useDragDrop } from "@/hooks/use-drag-drop";
import { processMediaFiles } from "@/lib/media-processing";
import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { Image, Music, Plus, Upload, Video } from "lucide-react";
+import { Image, Loader2, Music, Plus, Upload, Video } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
@@ -203,9 +203,6 @@ export function MediaView() { className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
{...dragProps}
>
- {/* Show overlay when dragging files over the panel */}
- <DragOverlay isVisible={isDragOver} />
-
<div className="p-3 pb-2">
{/* Search and filter controls */}
<div className="flex gap-2">
@@ -227,47 +224,45 @@ export function MediaView() { value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
+ <Button
+ variant="outline"
+ size="lg"
+ onClick={handleFileSelect}
+ disabled={isProcessing}
+ className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
+ >
+ {isProcessing ? (
+ <Loader2 className="h-4 w-4 animate-spin" />
+ ) : (
+ <Plus className="h-4 w-4" />
+ )}
+ </Button>
</div>
</div>
<div className="flex-1 overflow-y-auto p-3 pt-0">
- {/* Show message if no media, otherwise show media grid */}
- {filteredMediaItems.length === 0 ? (
- <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">
- <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 below
- </p>
- <Button
- variant="outline"
- size="sm"
- onClick={handleFileSelect}
- disabled={isProcessing}
- className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center mt-2"
- >
- {isProcessing ? (
- <>
- <Upload className="h-4 w-4 animate-spin" />
- <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"
- >
- Add
- </span>
- </>
- )}
- </Button>
- </div>
+ {(isDragOver || filteredMediaItems.length === 0) ? (
+ <DragOverlay
+ isVisible={true}
+ title={
+ isDragOver
+ ? "Drop files here"
+ : mediaItems.length === 0
+ ? "No media in project"
+ : "No media found"
+ }
+ description={
+ isDragOver
+ ? "Release to add files"
+ : mediaItems.length === 0
+ ? "Drag and drop your images, videos, or audio files here to get started"
+ : "No media matches your current search or filter. Try adjusting your filters or add new media."
+ }
+ isProcessing={isProcessing}
+ progress={progress}
+ onClick={handleFileSelect}
+ isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
+ />
) : (
<div
className="grid gap-2"
diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx index ba6fe08f..eb190e89 100644 --- a/apps/web/src/components/ui/drag-overlay.tsx +++ b/apps/web/src/components/ui/drag-overlay.tsx @@ -1,25 +1,91 @@ -import { Upload } from "lucide-react";
+import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
interface DragOverlayProps {
isVisible: boolean;
title?: string;
description?: string;
+ isProcessing?: boolean;
+ progress?: number;
+ onClick?: () => void;
+ isEmptyState?: boolean;
}
export function DragOverlay({
isVisible,
title = "Drop files here",
description = "Images, videos, and audio files",
+ isProcessing = false,
+ progress = 0,
+ onClick,
+ isEmptyState = false,
}: DragOverlayProps) {
if (!isVisible) return null;
+ const handleClick = (e: React.MouseEvent) => {
+ if (isProcessing || !onClick) return;
+ e.preventDefault();
+ e.stopPropagation();
+ onClick();
+ };
+
return (
- <div className="absolute inset-0 bg-accent/20 backdrop-blur-lg border-2 border-dashed border-accent flex items-center justify-center z-10 pointer-events-none">
- <div className="text-center">
- <Upload className="h-8 w-8 text-accent mx-auto mb-2" />
- <p className="text-sm font-medium text-accent">{title}</p>
- <p className="text-xs text-muted-foreground">{description}</p>
+ <div
+ className="flex flex-col items-center justify-center h-full min-h-[300px] text-center cursor-pointer rounded-lg border-2 border-dashed border-primary/30 hover:border-primary/50 hover:bg-primary/5 transition-all duration-200 p-8 z-10 bg-background/50 backdrop-blur-sm"
+ onClick={handleClick}
+ >
+ <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary/10 to-primary/20 flex items-center justify-center mb-6 border border-primary/20">
+ {isProcessing ? (
+ <Upload className="h-10 w-10 text-primary animate-spin" />
+ ) : isEmptyState ? (
+ <Image className="h-10 w-10 text-primary" />
+ ) : (
+ <Upload className="h-10 w-10 text-primary" />
+ )}
+ </div>
+
+ <div className="space-y-2 mb-6">
+ <h3 className="text-lg font-medium text-foreground">
+ {isProcessing ? "Processing files..." : title}
+ </h3>
+ <p className="text-sm text-muted-foreground max-w-sm">
+ {isProcessing
+ ? `Processing your files (${progress}%)`
+ : description
+ }
+ </p>
</div>
+
+ {!isProcessing && (
+ <div className="flex flex-col items-center gap-3">
+ <Button
+ variant="default"
+ size="lg"
+ onClick={handleClick}
+ className="gap-2 px-6"
+ >
+ <Plus className="h-5 w-5" />
+ {isEmptyState ? "Choose Files" : "Browse Files"}
+ </Button>
+ <p className="text-xs text-muted-foreground/60">
+ {isEmptyState
+ ? "Supports images, videos, and audio files"
+ : "Or drop your files here"
+ }
+ </p>
+ </div>
+ )}
+
+ {isProcessing && (
+ <div className="w-full max-w-xs">
+ <div className="w-full bg-muted/50 rounded-full h-2">
+ <div
+ className="bg-primary h-2 rounded-full transition-all duration-300"
+ style={{ width: `${progress}%` }}
+ />
+ </div>
+ </div>
+ )}
</div>
);
}
|