diff --git a/static/js/ui-soundboard.js b/static/js/ui-soundboard.js index 6387319..d775f4b 100644 --- a/static/js/ui-soundboard.js +++ b/static/js/ui-soundboard.js @@ -2,6 +2,7 @@ // Verantwortlich für: Soundboard-Buttons, Play/Stop, Volume-Regler let currentSoundButton = null; // welcher Button gerade spielt (für optisches Feedback) +let currentResetTimer = null; // Timer zum automatischen Rücksetzen der UI // Initialisierung – wird von app.js aufgerufen function initSoundboard() { @@ -39,16 +40,31 @@ function initSoundboard() { } // ── Play-Buttons ─────────────────────────────────────────────────────────── - document.querySelectorAll('.play-sound-btn').forEach(btn => { + const playButtons = document.querySelectorAll('.play-sound-btn'); + + const resetButtonUI = (btn) => { + if (!btn) return; + btn.classList.remove('btn-success'); + btn.classList.add('btn-outline-primary', 'btn-outline-secondary'); + btn.innerHTML = btn.dataset.originalText || ' Abspielen'; + btn.disabled = false; + }; + + const clearCurrentTimer = () => { + if (currentResetTimer) { + clearTimeout(currentResetTimer); + currentResetTimer = null; + } + }; + + playButtons.forEach(btn => { btn.addEventListener('click', async () => { const soundId = btn.dataset.soundId; // Alten Play-Button zurücksetzen if (currentSoundButton && currentSoundButton !== btn) { - currentSoundButton.classList.remove('btn-success'); - currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary'); - currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || ' Abspielen'; - currentSoundButton.disabled = false; + clearCurrentTimer(); + resetButtonUI(currentSoundButton); } // Neuen Button markieren @@ -72,25 +88,22 @@ function initSoundboard() { btn.innerHTML = ' Gespielt'; currentSoundButton = btn; - // Optional: Automatisch nach 3–5 Sekunden zurücksetzen - setTimeout(() => { + clearCurrentTimer(); + // Automatisches Reset nach maximal 15s, falls Track serverseitig stoppt + currentResetTimer = setTimeout(() => { if (currentSoundButton === btn) { - btn.classList.remove('btn-success'); - btn.classList.add('btn-outline-primary'); - btn.innerHTML = originalText; - btn.disabled = false; + resetButtonUI(btn); + currentSoundButton = null; } - }, 4000); // 4 Sekunden – anpassbar + }, 15000); } else { alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt')); - btn.innerHTML = originalText; - btn.disabled = false; + resetButtonUI(btn); } } catch (err) { console.error('Sound-Play-Fehler:', err); alert('Netzwerkfehler beim Abspielen'); - btn.innerHTML = originalText; - btn.disabled = false; + resetButtonUI(btn); } }); }); @@ -109,10 +122,8 @@ function initSoundboard() { if (data.success) { // Visuelles Feedback: aktuellen Play-Button zurücksetzen if (currentSoundButton) { - currentSoundButton.classList.remove('btn-success'); - currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary'); - currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || ' Abspielen'; - currentSoundButton.disabled = false; + clearCurrentTimer(); + resetButtonUI(currentSoundButton); currentSoundButton = null; } @@ -132,4 +143,4 @@ function initSoundboard() { } // Export für app.js -window.initSoundboard = initSoundboard; \ No newline at end of file +window.initSoundboard = initSoundboard;