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

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

@ -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 || '<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 () => {
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 || '<i class="bi bi-play-fill me-2"></i> Abspielen';
currentSoundButton.disabled = false;
clearCurrentTimer();
resetButtonUI(currentSoundButton);
}
// Neuen Button markieren
@ -72,25 +88,22 @@ function initSoundboard() {
btn.innerHTML = '<i class="bi bi-check-lg me-2"></i> 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 || '<i class="bi bi-play-fill me-2"></i> Abspielen';
currentSoundButton.disabled = false;
clearCurrentTimer();
resetButtonUI(currentSoundButton);
currentSoundButton = null;
}
@ -132,4 +143,4 @@ function initSoundboard() {
}
// Export für app.js
window.initSoundboard = initSoundboard;
window.initSoundboard = initSoundboard;