blob: 565a4e7d091a39b7ef440b342436a8c881c4a751 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
"use client";
import { Button } from "../ui/button";
import { AspectRatio } from "../ui/aspect-ratio";
import { DragOverlay } from "../ui/drag-overlay";
import { useMediaStore } from "@/stores/media-store";
import { Plus, Image, Video, Music } from "lucide-react";
import { useDragDrop } from "@/hooks/use-drag-drop";
export function MediaPanel() {
const { mediaItems, addMediaItem } = useMediaStore();
const { isDragOver, dragProps } = useDragDrop({
onDrop: (files) => {
// TODO: Handle file drop functionality
console.log("Files dropped on media panel:", files);
},
});
const handleAddSampleMedia = () => {
// Just for testing - add a sample media item
addMediaItem({
name: `Sample ${mediaItems.length + 1}`,
type: "image",
});
};
const getMediaIcon = (type: string) => {
switch (type) {
case "video":
return <Video className="h-4 w-4" />;
case "audio":
return <Music className="h-4 w-4" />;
default:
return <Image className="h-4 w-4" />;
}
};
return (
<div
className={`h-full overflow-y-auto transition-colors duration-200 relative ${
isDragOver ? "bg-accent/30 border-accent" : ""
}`}
{...dragProps}
>
<DragOverlay isVisible={isDragOver} />
<div className="space-y-4 p-2 h-full">
{/* Media Grid */}
{mediaItems.length === 0 ? (
<EmptyMedia onAddSample={handleAddSampleMedia} />
) : (
<div className="grid grid-cols-2 gap-2">
{mediaItems.map((item) => (
<Button
key={item.id}
variant="outline"
className="flex flex-col gap-2 p-2 h-auto overflow-hidden"
>
<AspectRatio ratio={16 / 9} className="w-full">
<div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground">
{getMediaIcon(item.type)}
<span className="text-xs mt-1 truncate max-w-full px-1">
{item.name}
</span>
</div>
</AspectRatio>
</Button>
))}
</div>
)}
</div>
</div>
);
}
function EmptyMedia({ onAddSample }: { onAddSample: () => void }) {
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">
<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 or click to add media
</p>
<Button
variant="outline"
size="sm"
className="mt-4"
onClick={onAddSample}
>
<Plus className="h-4 w-4 mr-2" />
Add Sample
</Button>
</div>
);
}
|
