SlavaVlad
0c35693598
All checks were successful
Deploy / build-and-deploy (push) Successful in 1m43s
431 lines
17 KiB
TypeScript
431 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { playSoundOnce } from "@/lib/sounds";
|
|
|
|
// ─── Types ──────────────────────────────────────────────────────────
|
|
|
|
type LibrarySound = {
|
|
id: string;
|
|
originalName: string;
|
|
url: string;
|
|
duration: number;
|
|
};
|
|
|
|
type LibraryImage = {
|
|
id: string;
|
|
originalName: string;
|
|
url: string;
|
|
mimeType: string;
|
|
fileSize: number;
|
|
};
|
|
|
|
type FreesoundResult = {
|
|
id: number;
|
|
name: string;
|
|
duration: number;
|
|
previewUrl: string | null;
|
|
};
|
|
|
|
export type DragData =
|
|
| { type: "sound"; url: string; originalName: string }
|
|
| { type: "image"; url: string; originalName: string }
|
|
| { type: "emoji"; emoji: string };
|
|
|
|
// ─── Emoji Picker (inline, searchable) ──────────────────────────────
|
|
|
|
const EMOJI_LIST = [
|
|
"😀", "😂", "🤣", "😍", "🥰", "😘", "😊", "😎", "🤩", "🥳", "🤯", "😱",
|
|
"😈", "🤡", "💀", "👻", "👽", "🤖", "🎃", "😺", "🙈", "🙉", "🙊", "💩",
|
|
"🔥", "🌊", "💥", "💫", "⭐", "🌟", "✨", "⚡", "☄️", "💧", "🧊", "🌋",
|
|
"🎉", "🎊", "🎈", "🎁", "🏆", "🥇", "💎", "🔮", "🪄", "🧨", "🔫", "⚔️",
|
|
"🛡️", "🚀", "🛸", "🚁", "⚓", "🌀", "🌈", "🌪️", "☢️", "☣️", "⚕️", "🧬",
|
|
"💉", "💊", "🩸", "🧪", "🔬", "🔭", "📡", "🎯", "🎲", "♟️", "🧩", "🎭",
|
|
"🎵", "🎶", "🎺", "📯", "🔔", "🎤", "🎧", "📢", "📣", "🔊", "🔇", "💤",
|
|
"💣", "🔪", "🪦", "⚰️", "🪤", "🧲", "🗝️", "🔑", "🔓", "🔒", "🛠️", "⛓️",
|
|
"🧹", "🪠", "🔧", "⚙️", "📦", "📀", "💿", "📹", "📸", "📷", "🖼️", "🎨",
|
|
"🍺", "🍻", "🍷", "🥃", "🍸", "🍹", "🧉", "🍕", "🍔", "🌭", "🍿", "🧀",
|
|
"🥜", "🌶️", "🍄", "🥚", "🧅", "🥕", "🥦", "🫁", "🧠", "👀", "👁️", "🫀",
|
|
"💋", "🫂", "🤝", "👍", "👎", "👊", "✊", "🤛", "🤜", "👆", "👇", "🖕",
|
|
"💪", "🦵", "🦶", "👂", "👃", "🧑🚀", "🧑🔧", "🧑⚕️", "🧑✈️", "🧑🏫", "🧑🎤", "🧑🍳",
|
|
"🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮",
|
|
"🦈", "🐙", "🦑", "🐋", "🐬", "🦭", "🐊", "🦎", "🐍", "🐢", "🦖", "🦕",
|
|
"🦟", "🦗", "🐛", "🪱", "🦋", "🐌", "🐞", "🐜", "🦂", "🕷️", "🦀", "🪸",
|
|
];
|
|
|
|
function EmojiPickerGrid({ onSelect }: { onSelect: (emoji: string) => void }) {
|
|
const [search, setSearch] = useState("");
|
|
const filtered = search ? EMOJI_LIST.filter(e => e.includes(search)) : EMOJI_LIST;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Search emoji..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1.5 text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
|
|
/>
|
|
<div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
|
|
{filtered.map(e => (
|
|
<button
|
|
key={e}
|
|
draggable
|
|
onDragStart={ev => {
|
|
ev.dataTransfer.setData("application/json", JSON.stringify({ type: "emoji", emoji: e } satisfies DragData));
|
|
}}
|
|
onClick={() => onSelect(e)}
|
|
className="w-8 h-8 flex items-center justify-center text-base rounded hover:bg-slate-700/60 cursor-pointer active:scale-90 transition-transform"
|
|
>
|
|
{e}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Sounds Tab ─────────────────────────────────────────────────────
|
|
|
|
function SoundsTab() {
|
|
const [sounds, setSounds] = useState<LibrarySound[]>([]);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [searchResults, setSearchResults] = useState<FreesoundResult[]>([]);
|
|
const [searching, setSearching] = useState(false);
|
|
const [showSearch, setShowSearch] = useState(false);
|
|
const searchTimer = useRef<ReturnType<typeof setInterval>>(undefined);
|
|
|
|
const fetchSounds = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/sounds");
|
|
const data = await res.json();
|
|
setSounds(data.sounds || []);
|
|
} catch {}
|
|
}, []);
|
|
|
|
useEffect(() => { fetchSounds(); }, [fetchSounds]);
|
|
|
|
const { getRootProps, getInputProps } = useDropzone({
|
|
onDrop: async (files) => {
|
|
if (!files.length) return;
|
|
setUploading(true);
|
|
setProgress(0);
|
|
const formData = new FormData();
|
|
files.forEach(f => formData.append("files", f));
|
|
try {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.upload.onprogress = e => {
|
|
if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
|
|
};
|
|
await new Promise<void>((resolve, reject) => {
|
|
xhr.onload = () => { if (xhr.status === 200) resolve(); else reject(); };
|
|
xhr.onerror = () => reject();
|
|
xhr.open("POST", "/api/sounds");
|
|
xhr.send(formData);
|
|
});
|
|
await fetchSounds();
|
|
} catch {}
|
|
setUploading(false);
|
|
},
|
|
accept: { "audio/ogg": [".ogg"] },
|
|
multiple: true,
|
|
});
|
|
|
|
const deleteSound = async (filename: string) => {
|
|
await fetch(`/api/sounds?filename=${encodeURIComponent(filename)}`, { method: "DELETE" });
|
|
await fetchSounds();
|
|
};
|
|
|
|
// Freesound search with debounce
|
|
const doSearch = useCallback(async (q: string) => {
|
|
if (!q.trim()) { setSearchResults([]); return; }
|
|
setSearching(true);
|
|
try {
|
|
const res = await fetch(`/api/sounds/search?q=${encodeURIComponent(q)}&page=1`);
|
|
const data = await res.json();
|
|
setSearchResults(data.results || []);
|
|
} catch {}
|
|
setSearching(false);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
clearTimeout(searchTimer.current);
|
|
if (!searchQuery.trim()) { setSearchResults([]); return; }
|
|
searchTimer.current = setTimeout(() => doSearch(searchQuery), 300);
|
|
return () => clearTimeout(searchTimer.current);
|
|
}, [searchQuery, doSearch]);
|
|
|
|
const importSound = async (result: FreesoundResult) => {
|
|
if (!result.previewUrl) return;
|
|
await fetch("/api/sounds/import", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ name: result.name, duration: result.duration, previewUrl: result.previewUrl }),
|
|
});
|
|
await fetchSounds();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2 p-3">
|
|
{uploading && (
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-[9px] font-mono text-slate-500">
|
|
<span>Uploading...</span>
|
|
<span>{progress}%</span>
|
|
</div>
|
|
<div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-cyan-500 transition-all duration-200" style={{ width: `${progress}%` }} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div {...getRootProps()} className="border-2 border-dashed border-slate-700/40 rounded-lg p-3 text-center cursor-pointer hover:border-cyan-600/40 transition-colors">
|
|
<input {...getInputProps()} />
|
|
<p className="text-[10px] font-mono text-slate-500">Drop OGG files here or click to upload</p>
|
|
</div>
|
|
|
|
{/* Library */}
|
|
{sounds.length > 0 && (
|
|
<div className="max-h-36 overflow-y-auto space-y-1">
|
|
{sounds.map(s => {
|
|
const filename = s.url.split("/").pop() || "";
|
|
return (
|
|
<SoundRow
|
|
key={s.id}
|
|
label={s.originalName}
|
|
duration={s.duration}
|
|
url={s.url}
|
|
onPlay={() => playSoundOnce(s.url, s.originalName)}
|
|
onDelete={() => deleteSound(filename)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Freesound toggle */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowSearch(!showSearch)}
|
|
className="text-[10px] font-mono text-slate-500 hover:text-slate-300 cursor-pointer"
|
|
>
|
|
{showSearch ? "▾ Hide Online Search" : "▸ Search Freesound"}
|
|
</button>
|
|
|
|
{showSearch && (
|
|
<div className="space-y-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Search online sounds..."
|
|
value={searchQuery}
|
|
onChange={e => setSearchQuery(e.target.value)}
|
|
className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1.5 text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
|
|
/>
|
|
{searching && <p className="text-[9px] font-mono text-slate-600 italic">Searching...</p>}
|
|
<div className="max-h-36 overflow-y-auto space-y-1">
|
|
{searchResults.map(r => (
|
|
<FreesoundRow
|
|
key={r.id}
|
|
name={r.name}
|
|
duration={r.duration}
|
|
onPreview={() => r.previewUrl && playSoundOnce(r.previewUrl, r.name)}
|
|
onImport={() => importSound(r)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Images Tab ─────────────────────────────────────────────────────
|
|
|
|
function ImagesTab() {
|
|
const [images, setImages] = useState<LibraryImage[]>([]);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
const fetchImages = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/images");
|
|
const data = await res.json();
|
|
setImages(data.images || []);
|
|
} catch {}
|
|
}, []);
|
|
|
|
useEffect(() => { fetchImages(); }, [fetchImages]);
|
|
|
|
const { getRootProps, getInputProps } = useDropzone({
|
|
onDrop: async (files) => {
|
|
if (!files.length) return;
|
|
setUploading(true);
|
|
setProgress(0);
|
|
const formData = new FormData();
|
|
files.forEach(f => formData.append("files", f));
|
|
try {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.upload.onprogress = e => {
|
|
if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
|
|
};
|
|
await new Promise<void>((resolve, reject) => {
|
|
xhr.onload = () => { if (xhr.status === 200) resolve(); else reject(); };
|
|
xhr.onerror = () => reject();
|
|
xhr.open("POST", "/api/images");
|
|
xhr.send(formData);
|
|
});
|
|
await fetchImages();
|
|
} catch {}
|
|
setUploading(false);
|
|
},
|
|
accept: { "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"] },
|
|
multiple: true,
|
|
});
|
|
|
|
const deleteImage = async (filename: string) => {
|
|
await fetch(`/api/images?filename=${encodeURIComponent(filename)}`, { method: "DELETE" });
|
|
await fetchImages();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2 p-3">
|
|
{uploading && (
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-[9px] font-mono text-slate-500">
|
|
<span>Uploading...</span>
|
|
<span>{progress}%</span>
|
|
</div>
|
|
<div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-cyan-500 transition-all duration-200" style={{ width: `${progress}%` }} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div {...getRootProps()} className="border-2 border-dashed border-slate-700/40 rounded-lg p-3 text-center cursor-pointer hover:border-cyan-600/40 transition-colors">
|
|
<input {...getInputProps()} />
|
|
<p className="text-[10px] font-mono text-slate-500">Drop images here or click to upload</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-6 gap-1.5 max-h-48 overflow-y-auto">
|
|
{images.map(img => {
|
|
const filename = img.url.split("/").pop() || "";
|
|
return (
|
|
<div
|
|
key={img.id}
|
|
draggable
|
|
onDragStart={ev => {
|
|
ev.dataTransfer.setData("application/json", JSON.stringify({ type: "image", url: img.url, originalName: img.originalName } satisfies DragData));
|
|
}}
|
|
className="relative group aspect-square rounded border border-slate-700/30 bg-slate-800/40 overflow-hidden cursor-grab active:cursor-grabbing"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={img.url} alt={img.originalName} className="w-full h-full object-cover" />
|
|
<button
|
|
type="button"
|
|
onClick={() => deleteImage(filename)}
|
|
className="absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center rounded bg-red-900/80 text-[8px] text-red-300 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Shared Row Components ──────────────────────────────────────────
|
|
|
|
function SoundRow({ label, duration, url, onPlay, onDelete }: {
|
|
label: string; duration: number; url: string; onPlay: () => void; onDelete: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
draggable
|
|
onDragStart={ev => {
|
|
ev.dataTransfer.setData("application/json", JSON.stringify({ type: "sound", url, originalName: label } satisfies DragData));
|
|
}}
|
|
className="flex items-center gap-2 px-2 py-1.5 rounded bg-slate-800/30 border border-slate-700/20 text-[10px] font-mono cursor-grab active:cursor-grabbing hover:bg-slate-700/30 transition-colors group"
|
|
>
|
|
<span className="text-xs">🔊</span>
|
|
<span className="flex-1 truncate text-slate-300">{label}</span>
|
|
<span className="text-slate-600 shrink-0">{duration.toFixed(1)}s</span>
|
|
<button type="button" onClick={e => { e.stopPropagation(); onPlay(); }} className="px-1.5 py-0.5 rounded hover:bg-slate-700/50 text-slate-400 hover:text-cyan-300 cursor-pointer">▶</button>
|
|
<button type="button" onClick={e => { e.stopPropagation(); onDelete(); }} className="px-1.5 py-0.5 rounded hover:bg-red-800/50 text-red-400 cursor-pointer">✕</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FreesoundRow({ name, duration, onPreview, onImport }: {
|
|
name: string; duration: number; onPreview: () => void; onImport: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-2 px-2 py-1.5 rounded bg-slate-800/20 border border-slate-700/15 text-[10px] font-mono">
|
|
<span className="text-xs">🌐</span>
|
|
<span className="flex-1 truncate text-slate-400">{name}</span>
|
|
<span className="text-slate-600 shrink-0">{duration.toFixed(1)}s</span>
|
|
<button type="button" onClick={onPreview} className="px-1.5 py-0.5 rounded hover:bg-slate-700/50 text-slate-400 hover:text-cyan-300 cursor-pointer">▶</button>
|
|
<button type="button" onClick={onImport} className="px-1.5 py-0.5 rounded bg-cyan-800/40 text-cyan-400 hover:bg-cyan-700/50 cursor-pointer">Import</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Main ResourceBrowser ───────────────────────────────────────────
|
|
|
|
type Tab = "sounds" | "images" | "emojis";
|
|
|
|
export function ResourceBrowser({ visible, onClose }: { visible: boolean; onClose: () => void }) {
|
|
const [tab, setTab] = useState<Tab>("sounds");
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="border-t border-slate-700/30 bg-slate-950/95 mt-3">
|
|
{/* Tab bar */}
|
|
<div className="flex items-center px-2 border-b border-slate-700/20">
|
|
{([
|
|
{ key: "sounds" as const, label: "🔊 Sounds" },
|
|
{ key: "images" as const, label: "🖼️ Images" },
|
|
{ key: "emojis" as const, label: "😀 Emojis" },
|
|
]).map(t => (
|
|
<button
|
|
key={t.key}
|
|
onClick={() => setTab(t.key)}
|
|
className={`px-3 py-2 text-[10px] font-mono border-b-2 transition-colors cursor-pointer ${
|
|
tab === t.key
|
|
? "border-cyan-500 text-cyan-300"
|
|
: "border-transparent text-slate-600 hover:text-slate-400"
|
|
}`}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
<div className="flex-1" />
|
|
<button onClick={onClose} className="px-2 py-2 text-[10px] font-mono text-slate-600 hover:text-slate-300 cursor-pointer">
|
|
✕ Close
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="max-h-72 overflow-y-auto">
|
|
{tab === "sounds" && <SoundsTab />}
|
|
{tab === "images" && <ImagesTab />}
|
|
{tab === "emojis" && <EmojisTab />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmojisTab() {
|
|
const handleSelect = (emoji: string) => {
|
|
// Dispatch a custom event so ItemEditor can pick it up
|
|
window.dispatchEvent(new CustomEvent("emoji-select", { detail: { emoji } }));
|
|
};
|
|
|
|
return <div className="p-3"><EmojiPickerGrid onSelect={handleSelect} /></div>;
|
|
}
|