diff options
Diffstat (limited to 'apps/web/src')
| -rw-r--r-- | apps/web/src/components/editor/media-panel/drag-overlay.tsx | 57 | ||||
| -rw-r--r-- | apps/web/src/components/editor/media-panel/views/media.tsx | 20 | ||||
| -rw-r--r-- | apps/web/src/components/ui/drag-overlay.tsx | 91 |
3 files changed, 60 insertions, 108 deletions
diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx new file mode 100644 index 00000000..3f3820db --- /dev/null +++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx @@ -0,0 +1,57 @@ +import { Upload, Plus, Image } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface MediaDragOverlayProps {
+ isVisible: boolean;
+ isProcessing?: boolean;
+ progress?: number;
+ onClick?: () => void;
+ isEmptyState?: boolean;
+}
+
+export function MediaDragOverlay({
+ isVisible,
+ isProcessing = false,
+ progress = 0,
+ onClick,
+ isEmptyState = false,
+}: MediaDragOverlayProps) {
+ if (!isVisible) return null;
+
+ const handleClick = (e: React.MouseEvent) => {
+ if (isProcessing || !onClick) return;
+ e.preventDefault();
+ e.stopPropagation();
+ onClick();
+ };
+
+ return (
+ <div
+ className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
+ onClick={handleClick}
+ >
+ <div className="flex items-center justify-center">
+ <Upload className="h-10 w-10 text-foreground" />
+ </div>
+
+ <div className="space-y-2">
+ <p className="text-xs text-muted-foreground max-w-sm">
+ {isProcessing
+ ? `Processing your files (${progress}%)`
+ : "Drag and drop videos, photos, and audio 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>
+ );
+}
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 e532e540..631fe39a 100644 --- a/apps/web/src/components/editor/media-panel/views/media.tsx +++ b/apps/web/src/components/editor/media-panel/views/media.tsx @@ -7,7 +7,7 @@ import { Image, Loader2, Music, Plus, Video } from "lucide-react"; import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
-import { DragOverlay } from "@/components/ui/drag-overlay";
+import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
import {
ContextMenu,
ContextMenuContent,
@@ -242,23 +242,9 @@ export function MediaView() { </div>
<div className="flex-1 overflow-y-auto p-3 pt-0">
- {(isDragOver || filteredMediaItems.length === 0) ? (
- <DragOverlay
+ {isDragOver || filteredMediaItems.length === 0 ? (
+ <MediaDragOverlay
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}
diff --git a/apps/web/src/components/ui/drag-overlay.tsx b/apps/web/src/components/ui/drag-overlay.tsx deleted file mode 100644 index eb190e89..00000000 --- a/apps/web/src/components/ui/drag-overlay.tsx +++ /dev/null @@ -1,91 +0,0 @@ -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="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>
- );
-}
|