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

Nightly: SSE-Client-Handling verbessert (separater Hook, Snapshot/Party-Set + Ping); UI synchronisiert State pro Guild

Browse source
This commit is contained in:
vibe-bot 2025-08-10 00:11:38 +02:00
parent 21b4e9bd0c
commit c1f4d0f3a0
2 changed files with 27 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
server/src/index.ts
View file

@ -975,9 +975,13 @@ app.get('/api/events', (req: Request, res: Response) => {
// Snapshot senden // Snapshot senden
try { res.write(`data: ${JSON.stringify({ type: 'snapshot', party: Array.from(partyActive) })}\n\n`); } catch {} try { res.write(`data: ${JSON.stringify({ type: 'snapshot', party: Array.from(partyActive) })}\n\n`); } catch {}
// Ping, damit Proxies die Verbindung offen halten
const ping = setInterval(() => { try { res.write(':\n\n'); } catch {} }, 15_000);
sseClients.add(res); sseClients.add(res);
req.on('close', () => { req.on('close', () => {
sseClients.delete(res); sseClients.delete(res);
clearInterval(ping);
try { res.end(); } catch {} try { res.end(); } catch {}
}); });
}); });

28
web/src/App.tsx
View file

@ -45,6 +45,7 @@ export default function App() {
return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codePoints}.svg`; return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codePoints}.svg`;
} }
const [showBroccoli, setShowBroccoli] = useState<boolean>(false); const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
const [partyActiveGuilds, setPartyActiveGuilds] = useState<string[]>([]);
const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]); 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 [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
const [totalPlays, setTotalPlays] = useState<number>(0); const [totalPlays, setTotalPlays] = useState<number>(0);
@ -74,22 +75,31 @@ export default function App() {
const h = await fetch('/api/health').then(r => r.json()).catch(() => null); const h = await fetch('/api/health').then(r => r.json()).catch(() => null);
if (h && typeof h.totalPlays === 'number') setTotalPlays(h.totalPlays); if (h && typeof h.totalPlays === 'number') setTotalPlays(h.totalPlays);
} catch {} } catch {}
// SSE: Partymode Status global synchronisieren })();
const unsub = subscribeEvents((msg)=>{ }, []);
// SSE: Partymode-Status global synchronisieren (sauberes Cleanup)
useEffect(() => {
const unsub = subscribeEvents((msg) => {
if (msg?.type === 'party') { if (msg?.type === 'party') {
const [gid] = (selected||'').split(':'); setPartyActiveGuilds((prev) => {
if (gid && msg.guildId === gid) { const s = new Set(prev);
setChaosMode(!!msg.active); if (msg.active) s.add(msg.guildId); else s.delete(msg.guildId);
} return Array.from(s);
});
} else if (msg?.type === 'snapshot') { } else if (msg?.type === 'snapshot') {
const [gid] = (selected||'').split(':'); setPartyActiveGuilds(Array.isArray(msg.party) ? msg.party : []);
if (gid) setChaosMode(msg.party?.includes(gid));
} }
}); });
return () => { try { unsub(); } catch {} }; return () => { try { unsub(); } catch {} };
})();
}, []); }, []);
// Aus aktivem Guild-Status die lokale Anzeige setzen
useEffect(() => {
const gid = selected ? selected.split(':')[0] : '';
setChaosMode(gid ? partyActiveGuilds.includes(gid) : false);
}, [selected, partyActiveGuilds]);
// Uhrzeit (Berlin) aktualisieren // Uhrzeit (Berlin) aktualisieren
useEffect(() => { useEffect(() => {
const fmt = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }); const fmt = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' });