feat(web): complete frontend redesign — DECK theme system
Redesigned the entire frontend with a new "DECK" aesthetic: - 5 distinctive themes: Midnight, Daylight, Neon, Vapor, Matrix - Compact pill-shaped sound buttons with category color bars - Tab navigation: All Sounds / Favorites / Recently Added - Horizontal category filter chips with color coding - Fixed bottom control bar: Stop, Random, Party, Volume - Responsive layout optimized for 800+ sounds - Syne + Outfit typography pairing - Party mode with animated gradient effects - Search with clear button, "Now Playing" indicator - Admin panel as modal overlay - Subtle dot grid background pattern on dark themes Replaces the previous Apple Music-style card layout with a dense, efficient grid that scales properly for large sound libraries. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bot
parent
1feb7b0836
commit
ba8c07f347
4 changed files with 3291 additions and 838 deletions
|
|
@ -4,10 +4,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>Soundboard</title>
|
||||
<!-- No tailwind script injection to avoid collision with our custom CSS structural layout -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet" />
|
||||
<meta name="theme-color" content="#0b0b0f" />
|
||||
<title>Jukebox</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</head>
|
||||
|
|
|
|||
1734
web/package-lock.json
generated
Normal file
1734
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
694
web/src/App.tsx
694
web/src/App.tsx
|
|
@ -1,81 +1,101 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume, adminStatus, adminLogin, adminLogout, adminDelete, adminRename, playUrl, fetchCategories, createCategory, assignCategories, clearBadges, updateCategory, deleteCategory, partyStart, partyStop, subscribeEvents, getSelectedChannels, setSelectedChannel } from './api';
|
||||
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
||||
import {
|
||||
fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume,
|
||||
adminStatus, adminLogin, adminLogout, adminDelete, adminRename,
|
||||
playUrl, fetchCategories, createCategory, assignCategories, clearBadges,
|
||||
updateCategory, deleteCategory, partyStart, partyStop, subscribeEvents,
|
||||
getSelectedChannels, setSelectedChannel,
|
||||
} from './api';
|
||||
import type { VoiceChannelInfo, Sound, Category } from './types';
|
||||
import { getCookie, setCookie } from './cookies';
|
||||
|
||||
/* ── Category Color Palette ── */
|
||||
const CAT_PALETTE = [
|
||||
'#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6',
|
||||
'#f97316', '#06b6d4', '#ef4444', '#a855f7', '#84cc16',
|
||||
'#d946ef', '#0ea5e9', '#f43f5e', '#10b981',
|
||||
];
|
||||
|
||||
const THEMES = [
|
||||
{ id: 'midnight', label: 'Midnight' },
|
||||
{ id: 'daylight', label: 'Daylight' },
|
||||
{ id: 'neon', label: 'Neon' },
|
||||
{ id: 'vapor', label: 'Vapor' },
|
||||
{ id: 'matrix', label: 'Matrix' },
|
||||
];
|
||||
|
||||
type Tab = 'all' | 'favorites' | 'recent';
|
||||
|
||||
export default function App() {
|
||||
/* ── State ── */
|
||||
const [sounds, setSounds] = useState<Sound[]>([]);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [folders, setFolders] = useState<Array<{ key: string; name: string; count: number }>>([]);
|
||||
const [activeFolder, setActiveFolder] = useState<string>('__all__');
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [activeCategoryId, setActiveCategoryId] = useState<string>('');
|
||||
const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<Tab>('all');
|
||||
const [activeFolder, setActiveFolder] = useState('');
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
const [selected, setSelected] = useState<string>('');
|
||||
const selectedRef = useRef<string>('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [notification, setNotification] = useState<{ msg: string, type: 'info' | 'error' } | null>(null);
|
||||
const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
|
||||
const [selected, setSelected] = useState('');
|
||||
const selectedRef = useRef('');
|
||||
|
||||
const [volume, setVolume] = useState<number>(1);
|
||||
const [volume, setVolume] = useState(1);
|
||||
const [favs, setFavs] = useState<Record<string, boolean>>({});
|
||||
const [theme, setTheme] = useState<string>(() => localStorage.getItem('theme') || 'dark');
|
||||
const [isAdmin, setIsAdmin] = useState<boolean>(false);
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'midnight');
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
|
||||
// Chaos Mode (Partymode)
|
||||
const [chaosMode, setChaosMode] = useState<boolean>(false);
|
||||
const [chaosMode, setChaosMode] = useState(false);
|
||||
const [partyActiveGuilds, setPartyActiveGuilds] = useState<string[]>([]);
|
||||
const chaosTimeoutRef = useRef<number | null>(null);
|
||||
const chaosModeRef = useRef<boolean>(false);
|
||||
const chaosModeRef = useRef(false);
|
||||
|
||||
// Scrolled State for Header blur
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [lastPlayed, setLastPlayed] = useState('');
|
||||
const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
|
||||
|
||||
/* ── Refs ── */
|
||||
useEffect(() => { chaosModeRef.current = chaosMode; }, [chaosMode]);
|
||||
useEffect(() => { selectedRef.current = selected; }, [selected]);
|
||||
|
||||
const showNotification = (msg: string, type: 'info' | 'error' = 'info') => {
|
||||
/* ── Helpers ── */
|
||||
const notify = useCallback((msg: string, type: 'info' | 'error' = 'info') => {
|
||||
setNotification({ msg, type });
|
||||
setTimeout(() => setNotification(null), 3000);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ---------------- Init Load ----------------
|
||||
const guildId = selected ? selected.split(':')[0] : '';
|
||||
const channelId = selected ? selected.split(':')[1] : '';
|
||||
|
||||
/* ── Init ── */
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const [c, selectedMap] = await Promise.all([fetchChannels(), getSelectedChannels()]);
|
||||
setChannels(c);
|
||||
let initial = '';
|
||||
if (c.length > 0) {
|
||||
const firstGuild = c[0].guildId;
|
||||
const serverCid = selectedMap[firstGuild];
|
||||
if (serverCid && c.find(x => x.guildId === firstGuild && x.channelId === serverCid)) {
|
||||
initial = `${firstGuild}:${serverCid}`;
|
||||
} else {
|
||||
initial = `${c[0].guildId}:${c[0].channelId}`;
|
||||
}
|
||||
const [ch, selMap] = await Promise.all([fetchChannels(), getSelectedChannels()]);
|
||||
setChannels(ch);
|
||||
if (ch.length) {
|
||||
const g = ch[0].guildId;
|
||||
const serverCid = selMap[g];
|
||||
const match = serverCid && ch.find(x => x.guildId === g && x.channelId === serverCid);
|
||||
setSelected(match ? `${g}:${serverCid}` : `${ch[0].guildId}:${ch[0].channelId}`);
|
||||
}
|
||||
if (initial) setSelected(initial);
|
||||
} catch (e: any) {
|
||||
showNotification(e?.message || 'Fehler beim Laden der Channels', 'error');
|
||||
}
|
||||
} catch (e: any) { notify(e?.message || 'Channel-Fehler', 'error'); }
|
||||
try { setIsAdmin(await adminStatus()); } catch { }
|
||||
try { const cats = await fetchCategories(); setCategories(cats.categories || []); } catch { }
|
||||
try { const c = await fetchCategories(); setCategories(c.categories || []); } catch { }
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// ---------------- Theme ----------------
|
||||
/* ── Theme ── */
|
||||
useEffect(() => {
|
||||
document.body.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
localStorage.setItem('jb-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
// ---------------- SSE Events ----------------
|
||||
/* ── SSE ── */
|
||||
useEffect(() => {
|
||||
const unsub = subscribeEvents((msg) => {
|
||||
if (msg?.type === 'party') {
|
||||
setPartyActiveGuilds((prev) => {
|
||||
setPartyActiveGuilds(prev => {
|
||||
const s = new Set(prev);
|
||||
if (msg.active) s.add(msg.guildId); else s.delete(msg.guildId);
|
||||
return Array.from(s);
|
||||
|
|
@ -84,370 +104,418 @@ export default function App() {
|
|||
setPartyActiveGuilds(Array.isArray(msg.party) ? msg.party : []);
|
||||
try {
|
||||
const sel = msg?.selected || {};
|
||||
const currentSelected = selectedRef.current || '';
|
||||
const gid = currentSelected ? currentSelected.split(':')[0] : '';
|
||||
if (gid && sel[gid]) {
|
||||
const newVal = `${gid}:${sel[gid]}`;
|
||||
setSelected(newVal);
|
||||
}
|
||||
const g = selectedRef.current?.split(':')[0];
|
||||
if (g && sel[g]) setSelected(`${g}:${sel[g]}`);
|
||||
} catch { }
|
||||
try {
|
||||
const vols = msg?.volumes || {};
|
||||
const cur = selectedRef.current || '';
|
||||
const gid = cur ? cur.split(':')[0] : '';
|
||||
if (gid && typeof vols[gid] === 'number') {
|
||||
setVolume(vols[gid]);
|
||||
}
|
||||
const g = selectedRef.current?.split(':')[0];
|
||||
if (g && typeof vols[g] === 'number') setVolume(vols[g]);
|
||||
} catch { }
|
||||
} else if (msg?.type === 'channel') {
|
||||
try {
|
||||
const gid = msg.guildId;
|
||||
const cid = msg.channelId;
|
||||
if (gid && cid) {
|
||||
const currentSelected = selectedRef.current || '';
|
||||
const curGid = currentSelected ? currentSelected.split(':')[0] : '';
|
||||
if (curGid === gid) setSelected(`${gid}:${cid}`);
|
||||
}
|
||||
} catch { }
|
||||
const g = selectedRef.current?.split(':')[0];
|
||||
if (msg.guildId === g) setSelected(`${msg.guildId}:${msg.channelId}`);
|
||||
} else if (msg?.type === 'volume') {
|
||||
try {
|
||||
const gid = msg.guildId;
|
||||
const v = msg.volume;
|
||||
const cur = selectedRef.current || '';
|
||||
const curGid = cur ? cur.split(':')[0] : '';
|
||||
if (gid && curGid === gid && typeof v === 'number') {
|
||||
setVolume(v);
|
||||
}
|
||||
} catch { }
|
||||
const g = selectedRef.current?.split(':')[0];
|
||||
if (msg.guildId === g && typeof msg.volume === 'number') setVolume(msg.volume);
|
||||
}
|
||||
});
|
||||
return () => { try { unsub(); } catch { } };
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const gid = selected ? selected.split(':')[0] : '';
|
||||
setChaosMode(gid ? partyActiveGuilds.includes(gid) : false);
|
||||
setChaosMode(guildId ? partyActiveGuilds.includes(guildId) : false);
|
||||
}, [selected, partyActiveGuilds]);
|
||||
|
||||
// ---------------- Data Fetching ----------------
|
||||
/* ── Data Fetch ── */
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const folderParam = activeFolder === '__favs__' ? '__all__' : activeFolder;
|
||||
const s = await fetchSounds(query, folderParam, activeCategoryId || undefined, false); // Removed fuzzy param for cleaner UI
|
||||
let folderParam = '__all__';
|
||||
if (activeTab === 'recent') folderParam = '__recent__';
|
||||
else if (activeFolder) folderParam = activeFolder;
|
||||
|
||||
const s = await fetchSounds(query, folderParam, undefined, false);
|
||||
setSounds(s.items);
|
||||
setTotal(s.total);
|
||||
setFolders(s.folders);
|
||||
} catch (e: any) {
|
||||
showNotification(e?.message || 'Fehler beim Laden der Sounds', 'error');
|
||||
}
|
||||
} catch (e: any) { notify(e?.message || 'Sounds-Fehler', 'error'); }
|
||||
})();
|
||||
}, [activeFolder, query, activeCategoryId]);
|
||||
}, [activeTab, activeFolder, query]);
|
||||
|
||||
/* ── Favs persistence ── */
|
||||
useEffect(() => {
|
||||
const c = getCookie('favs');
|
||||
if (c) { try { setFavs(JSON.parse(c)); } catch { } }
|
||||
if (c) try { setFavs(JSON.parse(c)); } catch { }
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
try { setCookie('favs', JSON.stringify(favs)); } catch { }
|
||||
}, [favs]);
|
||||
|
||||
/* ── Volume sync ── */
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (selected) {
|
||||
localStorage.setItem('selectedChannel', selected);
|
||||
try {
|
||||
const [guildId] = selected.split(':');
|
||||
const v = await getVolume(guildId);
|
||||
setVolume(v);
|
||||
} catch { }
|
||||
}
|
||||
})();
|
||||
if (selected) {
|
||||
(async () => {
|
||||
try { const v = await getVolume(guildId); setVolume(v); } catch { }
|
||||
})();
|
||||
}
|
||||
}, [selected]);
|
||||
|
||||
// ---------------- Actions ----------------
|
||||
async function handlePlay(name: string, rel?: string) {
|
||||
if (!selected) return showNotification('Bitte einen Voice-Channel auswählen', 'error');
|
||||
const [guildId, channelId] = selected.split(':');
|
||||
/* ── Actions ── */
|
||||
async function handlePlay(s: Sound) {
|
||||
if (!selected) return notify('Bitte einen Voice-Channel auswählen', 'error');
|
||||
try {
|
||||
setLoading(true);
|
||||
await playSound(name, guildId, channelId, volume, rel);
|
||||
} catch (e: any) {
|
||||
showNotification(e?.message || 'Wiedergabe fehlgeschlagen', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
await playSound(s.name, guildId, channelId, volume, s.relativePath);
|
||||
setLastPlayed(s.name);
|
||||
setTimeout(() => setLastPlayed(''), 4000);
|
||||
} catch (e: any) { notify(e?.message || 'Play fehlgeschlagen', 'error'); }
|
||||
}
|
||||
|
||||
async function handleStop() {
|
||||
if (!selected) return;
|
||||
try { await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' }); } catch { }
|
||||
}
|
||||
|
||||
async function handleRandom() {
|
||||
if (!sounds.length || !selected) return;
|
||||
const rnd = sounds[Math.floor(Math.random() * sounds.length)];
|
||||
handlePlay(rnd);
|
||||
}
|
||||
|
||||
async function toggleParty() {
|
||||
if (chaosMode) {
|
||||
await handleStop();
|
||||
try { await partyStop(guildId); } catch { }
|
||||
} else {
|
||||
if (!selected) return notify('Bitte einen Channel auswählen', 'error');
|
||||
try { await partyStart(guildId, channelId); } catch { }
|
||||
}
|
||||
}
|
||||
|
||||
// Chaos Mode Logic
|
||||
const startChaosMode = async () => {
|
||||
if (!selected || !sounds.length) return;
|
||||
const playRandomSound = async () => {
|
||||
const pool = sounds;
|
||||
if (!pool.length || !selected) return;
|
||||
const randomSound = pool[Math.floor(Math.random() * pool.length)];
|
||||
const [guildId, channelId] = selected.split(':');
|
||||
try {
|
||||
await playSound(randomSound.name, guildId, channelId, volume, randomSound.relativePath);
|
||||
} catch (e: any) { console.error('Chaos sound play failed:', e); }
|
||||
};
|
||||
|
||||
const scheduleNextPlay = async () => {
|
||||
if (!chaosModeRef.current) return;
|
||||
await playRandomSound();
|
||||
const delay = 30_000 + Math.floor(Math.random() * 60_000); // 30-90 Sekunden
|
||||
chaosTimeoutRef.current = window.setTimeout(scheduleNextPlay, delay);
|
||||
};
|
||||
|
||||
await playRandomSound();
|
||||
const firstDelay = 30_000 + Math.floor(Math.random() * 60_000);
|
||||
chaosTimeoutRef.current = window.setTimeout(scheduleNextPlay, firstDelay);
|
||||
};
|
||||
|
||||
const stopChaosMode = async () => {
|
||||
if (chaosTimeoutRef.current) {
|
||||
clearTimeout(chaosTimeoutRef.current);
|
||||
chaosTimeoutRef.current = null;
|
||||
/* ── Computed ── */
|
||||
const displaySounds = useMemo(() => {
|
||||
if (activeTab === 'favorites') {
|
||||
return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
|
||||
}
|
||||
if (selected) {
|
||||
const [guildId] = selected.split(':');
|
||||
try { await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' }); } catch { }
|
||||
}
|
||||
};
|
||||
return sounds;
|
||||
}, [sounds, activeTab, favs]);
|
||||
|
||||
const toggleChaosMode = async () => {
|
||||
if (chaosMode) {
|
||||
setChaosMode(false);
|
||||
await stopChaosMode();
|
||||
if (selected) { const [guildId] = selected.split(':'); try { await partyStop(guildId); } catch { } }
|
||||
} else {
|
||||
setChaosMode(true);
|
||||
await startChaosMode();
|
||||
if (selected) { const [guildId, channelId] = selected.split(':'); try { await partyStart(guildId, channelId); } catch { } }
|
||||
}
|
||||
};
|
||||
|
||||
// Filter Data
|
||||
const filtered = sounds;
|
||||
const favCount = useMemo(() => Object.values(favs).filter(Boolean).length, [favs]);
|
||||
|
||||
// Scroll Handler for Top Bar Blur
|
||||
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||
setIsScrolled(e.currentTarget.scrollTop > 20);
|
||||
};
|
||||
const visibleFolders = useMemo(() =>
|
||||
folders.filter(f => !['__all__', '__recent__', '__top3__'].includes(f.key)),
|
||||
[folders]);
|
||||
|
||||
const folderColorMap = useMemo(() => {
|
||||
const m: Record<string, string> = {};
|
||||
visibleFolders.forEach((f, i) => { m[f.key] = CAT_PALETTE[i % CAT_PALETTE.length]; });
|
||||
return m;
|
||||
}, [visibleFolders]);
|
||||
|
||||
/* ── Admin State ── */
|
||||
const [adminPwd, setAdminPwd] = useState('');
|
||||
|
||||
async function handleAdminLogin() {
|
||||
try {
|
||||
const ok = await adminLogin(adminPwd);
|
||||
if (ok) { setIsAdmin(true); setAdminPwd(''); notify('Admin eingeloggt'); }
|
||||
else notify('Falsches Passwort', 'error');
|
||||
} catch { notify('Login fehlgeschlagen', 'error'); }
|
||||
}
|
||||
|
||||
async function handleAdminLogout() {
|
||||
try { await adminLogout(); setIsAdmin(false); notify('Ausgeloggt'); } catch { }
|
||||
}
|
||||
|
||||
/* ── Render ── */
|
||||
return (
|
||||
<div className="app-layout">
|
||||
{/* ---------------- Sidebar ---------------- */}
|
||||
<aside className="sidebar">
|
||||
<h1 className="title-large" style={{ marginLeft: 12, marginBottom: 32, fontSize: 28, background: 'linear-gradient(45deg, var(--accent-blue), #5e5ce6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
|
||||
Jukebox
|
||||
</h1>
|
||||
<div className={`app-shell ${chaosMode ? 'party-active' : ''}`}>
|
||||
|
||||
<div className="sidebar-title">Library</div>
|
||||
<button className={`nav-item ${activeFolder === '__all__' ? 'active' : ''}`} onClick={() => setActiveFolder('__all__')}>
|
||||
<div className="flex items-center gap-2"><span className="material-icons" style={{ fontSize: 20 }}>library_music</span>All Sounds</div>
|
||||
<span style={{ opacity: 0.5, fontSize: 12 }}>{total}</span>
|
||||
</button>
|
||||
<button className={`nav-item ${activeFolder === '__favs__' ? 'active' : ''}`} onClick={() => setActiveFolder('__favs__')}>
|
||||
<div className="flex items-center gap-2"><span className="material-icons" style={{ fontSize: 20 }}>favorite</span>Favorites</div>
|
||||
<span style={{ opacity: 0.5, fontSize: 12 }}>{favCount}</span>
|
||||
</button>
|
||||
<button className={`nav-item ${activeFolder === '__recent__' ? 'active' : ''}`} onClick={() => setActiveFolder('__recent__')}>
|
||||
<div className="flex items-center gap-2"><span className="material-icons" style={{ fontSize: 20 }}>schedule</span>Recently Added</div>
|
||||
</button>
|
||||
{/* ════════ Header ════════ */}
|
||||
<header className="header">
|
||||
<div className="logo">JUKEBOX</div>
|
||||
|
||||
<div className="header-search">
|
||||
<span className="material-icons search-icon">search</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Sound suchen..."
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
/>
|
||||
{query && (
|
||||
<button className="search-clear" onClick={() => setQuery('')}>
|
||||
<span className="material-icons" style={{ fontSize: 16 }}>close</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="header-meta">
|
||||
<div className="sound-count">
|
||||
<strong>{total}</strong> Sounds
|
||||
</div>
|
||||
|
||||
<select
|
||||
className="select-clean"
|
||||
value={theme}
|
||||
onChange={e => setTheme(e.target.value)}
|
||||
>
|
||||
{THEMES.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button
|
||||
className={`admin-toggle ${isAdmin ? 'is-admin' : ''}`}
|
||||
onClick={() => setShowAdmin(true)}
|
||||
title="Admin"
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 18 }}>settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ════════ Tab Bar ════════ */}
|
||||
<nav className="tab-bar">
|
||||
<button
|
||||
className={`tab-btn ${activeTab === 'all' ? 'active' : ''}`}
|
||||
onClick={() => { setActiveTab('all'); setActiveFolder(''); }}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 16 }}>library_music</span>
|
||||
All Sounds
|
||||
<span className="tab-badge">{total}</span>
|
||||
</button>
|
||||
<button
|
||||
className={`tab-btn ${activeTab === 'favorites' ? 'active' : ''}`}
|
||||
onClick={() => { setActiveTab('favorites'); setActiveFolder(''); }}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 16 }}>star</span>
|
||||
Favorites
|
||||
{favCount > 0 && <span className="tab-badge">{favCount}</span>}
|
||||
</button>
|
||||
<button
|
||||
className={`tab-btn ${activeTab === 'recent' ? 'active' : ''}`}
|
||||
onClick={() => { setActiveTab('recent'); setActiveFolder(''); }}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 16 }}>schedule</span>
|
||||
Recently Added
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* ════════ Category Filter ════════ */}
|
||||
{activeTab === 'all' && visibleFolders.length > 0 && (
|
||||
<div className="category-strip">
|
||||
{visibleFolders.map(f => {
|
||||
const color = folderColorMap[f.key] || '#888';
|
||||
const isActive = activeFolder === f.key;
|
||||
return (
|
||||
<button
|
||||
key={f.key}
|
||||
className={`cat-chip ${isActive ? 'active' : ''}`}
|
||||
onClick={() => setActiveFolder(isActive ? '' : f.key)}
|
||||
style={isActive ? { borderColor: color, color, background: `${color}12` } : undefined}
|
||||
>
|
||||
<span className="cat-dot" style={{ background: color }} />
|
||||
{f.name.replace(/\s*\(\d+\)\s*$/, '')}
|
||||
<span style={{ opacity: 0.5, fontSize: 10, fontWeight: 700 }}>{f.count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ════════ Sound Grid ════════ */}
|
||||
<div className="sounds-area">
|
||||
{displaySounds.length === 0 ? (
|
||||
<div className="sounds-empty">
|
||||
<span className="material-icons">
|
||||
{activeTab === 'favorites' ? 'star_border' : 'music_off'}
|
||||
</span>
|
||||
<p>
|
||||
{activeTab === 'favorites'
|
||||
? 'Noch keine Favorites — klick den Stern!'
|
||||
: query
|
||||
? `Kein Sound für "${query}" gefunden`
|
||||
: 'Keine Sounds vorhanden'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sounds-grid">
|
||||
{displaySounds.map((s, idx) => {
|
||||
const key = s.relativePath ?? s.fileName;
|
||||
const isFav = !!favs[key];
|
||||
const color = s.folder ? folderColorMap[s.folder] || '#555' : '#555';
|
||||
const isNew = s.badges?.includes('new');
|
||||
const isTop = s.badges?.includes('top');
|
||||
const isPlaying = lastPlayed === s.name;
|
||||
|
||||
{folders.length > 3 && ( // 3 = __all__, __recent__, __top3__
|
||||
<>
|
||||
<div className="sidebar-title" style={{ marginTop: 32 }}>Folders</div>
|
||||
{folders.filter(f => !['__all__', '__recent__', '__top3__'].includes(f.key)).map(f => {
|
||||
const displayName = f.name.replace(/\s*\(\d+\)\s*$/, '');
|
||||
return (
|
||||
<button key={f.key} className={`nav-item ${activeFolder === f.key ? 'active' : ''}`} onClick={() => setActiveFolder(f.key)}>
|
||||
<div className="flex items-center gap-2" style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}><span className="material-icons" style={{ fontSize: 20 }}>folder</span>{displayName}</div>
|
||||
<span style={{ opacity: 0.5, fontSize: 12 }}>{f.count}</span>
|
||||
<button
|
||||
key={key}
|
||||
className={`sound-btn ${isPlaying ? 'is-playing' : ''}`}
|
||||
onClick={() => handlePlay(s)}
|
||||
title={`${s.name}${s.folder ? ` (${s.folder})` : ''}`}
|
||||
style={{ animationDelay: `${Math.min(idx * 8, 400)}ms` }}
|
||||
>
|
||||
<span className="cat-bar" style={{ background: color }} />
|
||||
<span className="sound-label">{s.name}</span>
|
||||
|
||||
{isNew && <span className="badge-dot new" />}
|
||||
{isTop && !isNew && <span className="badge-dot top" />}
|
||||
|
||||
<span
|
||||
className={`fav-star ${isFav ? 'is-fav' : ''}`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
setFavs(prev => ({ ...prev, [key]: !prev[key] }));
|
||||
}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 14 }}>
|
||||
{isFav ? 'star' : 'star_border'}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{categories.length > 0 && (
|
||||
<>
|
||||
<div className="sidebar-title" style={{ marginTop: 32 }}>Categories</div>
|
||||
{categories.map(cat => (
|
||||
<button key={cat.id} className={`nav-item ${activeCategoryId === cat.id ? 'active' : ''}`} onClick={() => setActiveCategoryId(prev => prev === cat.id ? '' : cat.id)}>
|
||||
<div className="flex items-center gap-2"><span className="material-icons" style={{ fontSize: 20 }}>label</span>{cat.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
{/* ---------------- Main Content ---------------- */}
|
||||
<main className="main-content" onScroll={handleScroll}>
|
||||
<header className={`top-bar ${isScrolled ? 'scrolled' : ''}`}>
|
||||
<h2 className="title-large" style={{ marginBottom: 0 }}>
|
||||
{activeFolder === '__all__' ? 'All Sounds' :
|
||||
activeFolder === '__favs__' ? 'Favorites' :
|
||||
activeFolder === '__recent__' ? 'Recently Added' :
|
||||
folders.find(f => f.key === activeFolder)?.name.replace(/\s*\(\d+\)\s*$/, '') || 'Library'}
|
||||
</h2>
|
||||
|
||||
<div className="header-actions">
|
||||
<div className="search-box">
|
||||
<span className="material-icons search-icon">search</span>
|
||||
<input
|
||||
type="text"
|
||||
className="input-modern"
|
||||
placeholder="Search..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
className="select-modern"
|
||||
value={theme}
|
||||
onChange={(e) => setTheme(e.target.value)}
|
||||
style={{ paddingRight: 20, paddingLeft: 12 }}
|
||||
>
|
||||
<option value="dark">Dark Theme</option>
|
||||
<option value="light">Light Theme</option>
|
||||
</select>
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="track-container">
|
||||
<div className="track-grid">
|
||||
{(activeFolder === '__favs__' ? filtered.filter((s) => !!favs[s.relativePath ?? s.fileName]) : filtered).map((s) => {
|
||||
const key = `${s.relativePath ?? s.fileName}`;
|
||||
const isFav = !!favs[key];
|
||||
return (
|
||||
<div key={key} className="track-card" onClick={() => handlePlay(s.name, s.relativePath)}>
|
||||
<button
|
||||
className={`fav-btn ${isFav ? 'active' : ''}`}
|
||||
onClick={(e) => { e.stopPropagation(); setFavs(prev => ({ ...prev, [key]: !prev[key] })); }}
|
||||
>
|
||||
<span className="material-icons">{isFav ? 'star' : 'star_border'}</span>
|
||||
</button>
|
||||
<div className="track-icon">
|
||||
<span className="material-icons" style={{ fontSize: 32 }}>music_note</span>
|
||||
</div>
|
||||
<div className="track-name">{s.name}</div>
|
||||
|
||||
{Array.isArray((s as any).badges) && (s as any).badges!.includes('new') && (
|
||||
<div className="badge-new">NEW</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* ---------------- Bottom Control Bar ---------------- */}
|
||||
<div className="bottom-player">
|
||||
<div className="player-section">
|
||||
{/* Target Channel */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span className="material-icons" style={{ color: 'var(--text-secondary)' }}>headset_mic</span>
|
||||
{/* ════════ Control Bar ════════ */}
|
||||
<div className="control-bar">
|
||||
<div className="ctrl-section left">
|
||||
<div className="channel-wrap">
|
||||
<span className="material-icons">headset_mic</span>
|
||||
<select
|
||||
className="select-modern"
|
||||
className="channel-select"
|
||||
value={selected}
|
||||
onChange={async (e) => {
|
||||
onChange={async e => {
|
||||
const v = e.target.value;
|
||||
setSelected(v);
|
||||
try {
|
||||
const [gid, cid] = v.split(':');
|
||||
await setSelectedChannel(gid, cid);
|
||||
const [g, c] = v.split(':');
|
||||
await setSelectedChannel(g, c);
|
||||
} catch { }
|
||||
}}
|
||||
style={{ width: '240px', background: 'transparent', border: '1px solid var(--border-color)' }}
|
||||
>
|
||||
<option value="" disabled>Select Channel...</option>
|
||||
{channels.map((c) => (
|
||||
<option value="" disabled>Channel...</option>
|
||||
{channels.map(c => (
|
||||
<option key={`${c.guildId}:${c.channelId}`} value={`${c.guildId}:${c.channelId}`}>
|
||||
{c.guildName} • {c.channelName}
|
||||
{c.guildName} · {c.channelName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{lastPlayed && (
|
||||
<div className="now-playing">
|
||||
<span className="material-icons" style={{ fontSize: 14, verticalAlign: -2, marginRight: 4 }}>play_arrow</span>
|
||||
<span>{lastPlayed}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="player-section center">
|
||||
{/* Playback Controls */}
|
||||
<button
|
||||
className="btn-danger"
|
||||
onClick={async () => {
|
||||
setChaosMode(false); await stopChaosMode();
|
||||
if (selected) { const [guildId] = selected.split(':'); try { await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' }); } catch { } }
|
||||
}}
|
||||
title="Stop All"
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 20 }}>stop</span>
|
||||
<div className="ctrl-section center">
|
||||
<button className="ctrl-btn stop" onClick={handleStop} title="Stop">
|
||||
<span className="material-icons">stop</span>
|
||||
<span>Stop</span>
|
||||
</button>
|
||||
|
||||
<button className="ctrl-btn shuffle" onClick={handleRandom} title="Zufälliger Sound">
|
||||
<span className="material-icons">shuffle</span>
|
||||
<span>Random</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn-primary"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const items = sounds;
|
||||
if (!items.length || !selected) return;
|
||||
const rnd = items[Math.floor(Math.random() * items.length)];
|
||||
const [guildId, channelId] = selected.split(':');
|
||||
await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);
|
||||
} catch { }
|
||||
}}
|
||||
title="Play Random Sound"
|
||||
style={{ padding: '12px 24px', display: 'flex', alignItems: 'center', gap: 6 }}
|
||||
className={`ctrl-btn party ${chaosMode ? 'active' : ''}`}
|
||||
onClick={toggleParty}
|
||||
title="Partymode"
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 20 }}>shuffle</span> Shuffle
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn-icon ${chaosMode ? 'btn-chaos' : ''}`}
|
||||
onClick={toggleChaosMode}
|
||||
title="Partymode (Auto-Play)"
|
||||
style={chaosMode ? { width: 'auto', padding: '0 16px', borderRadius: 999, display: 'flex', gap: 6 } : {}}
|
||||
>
|
||||
<span className="material-icons" style={{ fontSize: 20 }}>{chaosMode ? 'celebration' : 'all_inclusive'}</span>
|
||||
{chaosMode && <span>Party Active</span>}
|
||||
<span className="material-icons">{chaosMode ? 'celebration' : 'auto_awesome'}</span>
|
||||
<span>{chaosMode ? 'Party!' : 'Party'}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="player-section right">
|
||||
{/* Volume */}
|
||||
<div className="volume-container">
|
||||
<span className="material-icons" style={{ color: 'var(--text-secondary)', fontSize: 18 }}>volume_down</span>
|
||||
<div className="ctrl-section right">
|
||||
<div className="volume-wrap">
|
||||
<span
|
||||
className="material-icons"
|
||||
onClick={() => {
|
||||
const newVol = volume > 0 ? 0 : 0.5;
|
||||
setVolume(newVol);
|
||||
if (guildId) setVolumeLive(guildId, newVol).catch(() => {});
|
||||
}}
|
||||
>
|
||||
{volume === 0 ? 'volume_off' : volume < 0.5 ? 'volume_down' : 'volume_up'}
|
||||
</span>
|
||||
<input
|
||||
className="volume-slider"
|
||||
type="range"
|
||||
min={0} max={1} step={0.01}
|
||||
value={volume}
|
||||
onChange={async (e) => {
|
||||
onChange={async e => {
|
||||
const v = parseFloat(e.target.value);
|
||||
setVolume(v);
|
||||
try { (e.target as HTMLInputElement).style.setProperty('--_fill', `${Math.round(v * 100)}%`); } catch { }
|
||||
if (selected) { const [guildId] = selected.split(':'); try { await setVolumeLive(guildId, v); } catch { } }
|
||||
if (guildId) try { await setVolumeLive(guildId, v); } catch { }
|
||||
}}
|
||||
style={{ ['--_fill' as any]: `${Math.round(volume * 100)}%` }}
|
||||
style={{ '--fill': `${Math.round(volume * 100)}%` } as React.CSSProperties}
|
||||
/>
|
||||
<span className="material-icons" style={{ color: 'var(--text-secondary)', fontSize: 18 }}>volume_up</span>
|
||||
<span className="volume-pct">{Math.round(volume * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ════════ Notification Toast ════════ */}
|
||||
{notification && (
|
||||
<div className={`notification ${notification.type}`}>
|
||||
<span className="material-icons" style={{ fontSize: 18 }}>
|
||||
<div className={`toast ${notification.type}`}>
|
||||
<span className="material-icons" style={{ fontSize: 16 }}>
|
||||
{notification.type === 'error' ? 'error_outline' : 'check_circle'}
|
||||
</span>
|
||||
{notification.msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ════════ Admin Panel Overlay ════════ */}
|
||||
{showAdmin && (
|
||||
<div className="admin-overlay" onClick={e => { if (e.target === e.currentTarget) setShowAdmin(false); }}>
|
||||
<div className="admin-panel">
|
||||
<h3>
|
||||
Admin
|
||||
<button className="admin-close" onClick={() => setShowAdmin(false)}>
|
||||
<span className="material-icons" style={{ fontSize: 18 }}>close</span>
|
||||
</button>
|
||||
</h3>
|
||||
|
||||
{!isAdmin ? (
|
||||
<div>
|
||||
<div className="admin-field">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={adminPwd}
|
||||
onChange={e => setAdminPwd(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleAdminLogin()}
|
||||
placeholder="Admin-Passwort..."
|
||||
/>
|
||||
</div>
|
||||
<button className="admin-btn primary" onClick={handleAdminLogin}>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
|
||||
Eingeloggt als Admin
|
||||
</p>
|
||||
<button className="admin-btn outline" onClick={handleAdminLogout}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
1688
web/src/styles.css
1688
web/src/styles.css
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue