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

Nightly: Rainbow-Flash stabil State-basierte Klasse statt direct classList (verhindert fehlendes Repaint)

Browse source
This commit is contained in:
vibe-bot 2025-08-09 21:41:24 +02:00
parent 60a0ac3a82
commit 191cf43ec8
1 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/App.tsx
View file

@ -39,6 +39,7 @@ export default function App() {
return groups.join('').split(''); return groups.join('').split('');
}, []); }, []);
const [showBroccoli, setShowBroccoli] = useState<boolean>(false); const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
const [flashMap, setFlashMap] = useState<Record<string, boolean>>({});
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);
@ -594,18 +595,15 @@ export default function App() {
onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }} onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }}
/> />
)} )}
<div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer" <div className={`sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer ${flashMap[key] ? 'rainbow-flash' : ''}`}
onClick={async (e)=>{ onClick={async ()=>{
// Rainbow-Flash für 1s im Rainbow-Theme // Rainbow-Flash via State, damit Re-Render die Klasse erhält
try {
if (theme === 'rainbow') { if (theme === 'rainbow') {
const el = (e.currentTarget as HTMLDivElement | undefined); setFlashMap(prev => ({ ...prev, [key]: true }));
if (el) { setTimeout(() => {
el.classList.add('rainbow-flash'); setFlashMap(prev => { const n = { ...prev }; delete n[key]; return n; });
setTimeout(()=> el.classList.remove('rainbow-flash'), 2000); }, 2000);
} }
}
} catch {}
await handlePlay(s.name, s.relativePath); await handlePlay(s.name, s.relativePath);
}}> }}>
<span className="text-sm font-medium truncate pr-2"> <span className="text-sm font-medium truncate pr-2">