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

feat(media): Download-Option für URL-Player; yt-dlp/ffmpeg Args für YouTube stabilisiert; UI: Checkbox 'Download speichern' + Dropdown layering fix

Browse source
This commit is contained in:
vibe-bot 2025-08-08 17:04:38 +02:00
parent e401124001
commit f9e9dc8d0b
4 changed files with 52 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web/src/App.tsx
View file

@ -22,6 +22,7 @@ export default function App() {
const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
const [mediaUrl, setMediaUrl] = useState<string>('');
const [mediaDownload, setMediaDownload] = useState<boolean>(false);
useEffect(() => {
(async () => {
@ -184,7 +185,7 @@ export default function App() {
if (e.key === 'Enter') {
if (!selected) { setError('Bitte Voice-Channel wählen'); return; }
const [guildId, channelId] = selected.split(':');
try { await playUrl(mediaUrl, guildId, channelId, volume); }
try { await playUrl(mediaUrl, guildId, channelId, volume, mediaDownload); }
catch (err: any) { setError(err?.message || 'Play-URL fehlgeschlagen'); }
}
}}
@ -193,10 +194,14 @@ export default function App() {
<button type="button" className="tab" onClick={async () => {
if (!selected) { setError('Bitte Voice-Channel wählen'); return; }
const [guildId, channelId] = selected.split(':');
try { await playUrl(mediaUrl, guildId, channelId, volume); }
try { await playUrl(mediaUrl, guildId, channelId, volume, mediaDownload); }
catch (e: any) { setError(e?.message || 'Play-URL fehlgeschlagen'); }
}}>▶ Abspielen</button>
</div>
<label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<input type="checkbox" checked={mediaDownload} onChange={(e) => setMediaDownload(e.target.checked)} />
Download speichern
</label>
</section>
{!isAdmin && (

4
web/src/api.ts
View file

@ -88,10 +88,10 @@ export async function adminRename(from: string, to: string): Promise<string> {
return data?.to as string;
}
export async function playUrl(url: string, guildId: string, channelId: string, volume: number): Promise<void> {
export async function playUrl(url: string, guildId: string, channelId: string, volume: number, download?: boolean): Promise<void> {
const res = await fetch(`${API_BASE}/play-url`, {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url, guildId, channelId, volume })
body: JSON.stringify({ url, guildId, channelId, volume, download: !!download })
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));

8
web/src/styles.css
View file

@ -91,7 +91,9 @@ header p { opacity: .8; }
.controls { display: grid; grid-template-columns: 1fr minmax(240px, 320px) 260px 200px; gap: 12px; align-items: center; margin-bottom: 12px; }
.controls.row2 { grid-template-columns: minmax(400px, 1fr); }
.controls.row3 { grid-template-columns: 1fr; }
.controls.glass { padding: 18px; }
.controls.glass { padding: 18px; position: relative; z-index: 1; }
.controls.row2 { grid-template-columns: minmax(400px, 1fr); z-index: 5; }
.controls.row3 { grid-template-columns: 1fr; z-index: 1; }
.controls.glass {
backdrop-filter: saturate(140%) blur(20px);
background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
@ -116,7 +118,7 @@ header p { opacity: .8; }
.control select optgroup { background-color: #0f1530; color: #c8c8d8; }
/* Custom Select */
.custom-select { position: relative; }
.custom-select { position: relative; z-index: 10; }
.select-trigger {
width: 100%;
text-align: left;
@ -137,7 +139,7 @@ header p { opacity: .8; }
background: #0f1530;
box-shadow: 0 24px 48px rgba(0,0,0,.5);
max-height: 280px; overflow-y: auto;
z-index: 20;
z-index: 100;
}
.select-item {
width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;