media drag overlay cleanup
This commit is contained in:
Maze Winther
parent
63d5b2f110
commit
a7e23ec714
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue