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

Nightly: Rainbow-Flash entfernt Soundbutton-Animation deaktiviert

Browse source
This commit is contained in:
vibe-bot 2025-08-09 22:02:51 +02:00
parent 9cf1b6d26c
commit 442c42ef23
2 changed files with 3 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/src/App.tsx
View file

@ -45,7 +45,6 @@ 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 [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);
@ -603,17 +602,8 @@ 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 ${flashMap[key] ? 'rainbow-flash' : ''}`} <div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer"
onClick={async ()=>{ onClick={()=>handlePlay(s.name, s.relativePath)}>
// Rainbow-Flash via State, damit Re-Render die Klasse erhält
if (theme === 'rainbow') {
setFlashMap(prev => ({ ...prev, [key]: true }));
setTimeout(() => {
setFlashMap(prev => { const n = { ...prev }; delete n[key]; return n; });
}, 2000);
}
await handlePlay(s.name, s.relativePath);
}}>
<span className="text-sm font-medium truncate pr-2"> <span className="text-sm font-medium truncate pr-2">
{s.name} {s.name}
{Array.isArray((s as any).badges) && (s as any).badges!.map((b:string, i:number)=> ( {Array.isArray((s as any).badges) && (s as any).badges!.map((b:string, i:number)=> (

8
web/src/styles.css
View file

@ -324,13 +324,7 @@ body {
100% { background-position: 0% 50%; } 100% { background-position: 0% 50%; }
} }
/* Rainbow-Theme: kurzzeitige Flash-Animation für gedrückte Sound-Buttons */ /* Rainbow-Flash entfernt */
[data-theme="rainbow"] .sound-btn.rainbow-flash {
background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080) !important;
background-size: 400% 400% !important;
animation: chaos-rainbow-animation 2s ease-in-out 1;
color: #ffffff;
}
/* Neuer Header-Style basierend auf Google Stitch Design */ /* Neuer Header-Style basierend auf Google Stitch Design */
header { header {