RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: refactors media drag overlay and media tab

This commit is contained in:
Simon Orzel 2025-07-16 00:48:00 +02:00
parent 1f95bb98d6
commit f76169ada1
2 changed files with 108 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
apps/web/src/components/editor/media-panel/views/media.tsx
View File

@ -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"

78
apps/web/src/components/ui/drag-overlay.tsx
View File

@ -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>
);
}