root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Volume-Regler in Toolbar verschoben, Spielt-Anzeige persistent

Browse source 
- Volume-Control von Bottom-Bar in Toolbar verschoben (links von Random)
- Pill-förmiges Design passend zu Size-Slider
- "Spielt" Anzeige bleibt bis Stop oder neuer Sound sichtbar
- Anfangsbuchstaben nur beim ersten Sound jeder Gruppe

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bot 2026-03-01 15:37:40 +01:00
parent 5f0b06550e
commit 4661c366fb
2 changed files with 54 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/src/App.tsx
View file

@ -216,12 +216,12 @@ export default function App() {
try {
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;
setLastPlayed('');
try { await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' }); } catch { }
}
@ -421,6 +421,34 @@ export default function App() {
<div className="toolbar-spacer" />
<div className="volume-control">
<span
className="material-icons vol-icon"
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
type="range"
className="vol-slider"
min={0}
max={1}
step={0.01}
value={volume}
onChange={async e => {
const v = parseFloat(e.target.value);
setVolume(v);
if (guildId) try { await setVolumeLive(guildId, v); } catch { }
}}
style={{ '--vol': `${Math.round(volume * 100)}%` } as React.CSSProperties}
/>
<span className="vol-pct">{Math.round(volume * 100)}%</span>
</div>
<button className="tb-btn random" onClick={handleRandom} title="Zufälliger Sound">
<span className="material-icons tb-icon">shuffle</span>
Random
@ -576,33 +604,6 @@ export default function App() {
<span className="np-label">Spielt:</span>
<span className="np-name">{lastPlayed || '—'}</span>
</div>
<div className="volume-section">
<span
className="material-icons volume-icon"
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
type="range"
className="volume-slider"
min={0}
max={1}
step={0.01}
value={volume}
onChange={async e => {
const v = parseFloat(e.target.value);
setVolume(v);
if (guildId) try { await setVolumeLive(guildId, v); } catch { }
}}
style={{ '--vol': `${Math.round(volume * 100)}%` } as React.CSSProperties}
/>
<span className="volume-pct">{Math.round(volume * 100)}%</span>
</div>
</div>
{/* ═══ CONTEXT MENU ═══ */}