oberon/mkcontrol-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes in ui-soundboard.js for stop and playback-animation

Browse Source
This commit is contained in:
oberon 2026-02-16 21:04:43 +01:00
parent d8d23b0c08
commit 723e25f05c
1 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
static/js/ui-soundboard.js
View File

@ -2,6 +2,7 @@
// Verantwortlich für: Soundboard-Buttons, Play/Stop, Volume-Regler // Verantwortlich für: Soundboard-Buttons, Play/Stop, Volume-Regler
let currentSoundButton = null; // welcher Button gerade spielt (für optisches Feedback) 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 // Initialisierung – wird von app.js aufgerufen
function initSoundboard() { function initSoundboard() {
@ -39,16 +40,31 @@ function initSoundboard() {
} }
// ── Play-Buttons ─────────────────────────────────────────────────────────── // ── 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 || '<i class="bi bi-play-fill me-2"></i> Abspielen';
btn.disabled = false;
};
const clearCurrentTimer = () => {
if (currentResetTimer) {
clearTimeout(currentResetTimer);
currentResetTimer = null;
}
};
playButtons.forEach(btn => {
btn.addEventListener('click', async () => { btn.addEventListener('click', async () => {
const soundId = btn.dataset.soundId; const soundId = btn.dataset.soundId;
// Alten Play-Button zurücksetzen // Alten Play-Button zurücksetzen
if (currentSoundButton && currentSoundButton !== btn) { if (currentSoundButton && currentSoundButton !== btn) {
currentSoundButton.classList.remove('btn-success'); clearCurrentTimer();
currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary'); resetButtonUI(currentSoundButton);
currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || '<i class="bi bi-play-fill me-2"></i> Abspielen';
currentSoundButton.disabled = false;
} }
// Neuen Button markieren // Neuen Button markieren
@ -72,25 +88,22 @@ function initSoundboard() {
btn.innerHTML = '<i class="bi bi-check-lg me-2"></i> Gespielt'; btn.innerHTML = '<i class="bi bi-check-lg me-2"></i> Gespielt';
currentSoundButton = btn; currentSoundButton = btn;
// Optional: Automatisch nach 3–5 Sekunden zurücksetzen clearCurrentTimer();
setTimeout(() => { // Automatisches Reset nach maximal 15s, falls Track serverseitig stoppt
currentResetTimer = setTimeout(() => {
if (currentSoundButton === btn) { if (currentSoundButton === btn) {
btn.classList.remove('btn-success'); resetButtonUI(btn);
btn.classList.add('btn-outline-primary'); currentSoundButton = null;
btn.innerHTML = originalText;
btn.disabled = false;
} }
}, 4000); // 4 Sekunden – anpassbar }, 15000);
} else { } else {
alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt')); alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt'));
btn.innerHTML = originalText; resetButtonUI(btn);
btn.disabled = false;
} }
} catch (err) { } catch (err) {
console.error('Sound-Play-Fehler:', err); console.error('Sound-Play-Fehler:', err);
alert('Netzwerkfehler beim Abspielen'); alert('Netzwerkfehler beim Abspielen');
btn.innerHTML = originalText; resetButtonUI(btn);
btn.disabled = false;
} }
}); });
}); });
@ -109,10 +122,8 @@ function initSoundboard() {
if (data.success) { if (data.success) {
// Visuelles Feedback: aktuellen Play-Button zurücksetzen // Visuelles Feedback: aktuellen Play-Button zurücksetzen
if (currentSoundButton) { if (currentSoundButton) {
currentSoundButton.classList.remove('btn-success'); clearCurrentTimer();
currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary'); resetButtonUI(currentSoundButton);
currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || '<i class="bi bi-play-fill me-2"></i> Abspielen';
currentSoundButton.disabled = false;
currentSoundButton = null; currentSoundButton = null;
} }