mkcontrol-app/static/js/ui-soundboard.js

// static/js/ui-soundboard.js
// 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() {
  console.log('ui-soundboard.js → Initialisierung');

  // ── Volume-Regler ──────────────────────────────────────────────────────────
  const volumeSlider  = document.getElementById('volume-slider');
  const volumeDisplay = document.getElementById('volume-display');

  if (volumeSlider && volumeDisplay) {
    // Startwert anzeigen
    volumeDisplay.textContent = `${volumeSlider.value} %`;

    volumeSlider.addEventListener('input', () => {
      const vol = parseInt(volumeSlider.value) / 100;
      volumeDisplay.textContent = `${volumeSlider.value} %`;

      // Lautstärke an Server senden
      fetch('/api/set_volume', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ volume: vol })
      })
      .then(res => {
        if (!res.ok) throw new Error('Volume-Set-Fehler');
        console.log(`Volume auf ${vol} gesetzt`);
      })
      .catch(err => {
        console.error('Volume-Set-Fehler:', err);
        alert('Lautstärke konnte nicht gesetzt werden');
      });
    });
  } else {
    console.warn('Volume-Regler nicht gefunden im DOM');
  }

  // ── Play-Buttons ───────────────────────────────────────────────────────────
  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;
      const channel = btn.dataset.channel || null;
      const loopFlag = btn.dataset.loop === '1' || btn.dataset.loop === 'true';

      // Alten Play-Button zurücksetzen
      if (currentSoundButton && currentSoundButton !== btn) {
        clearCurrentTimer();
        resetButtonUI(currentSoundButton);
      }

      // Neuen Button markieren
      btn.disabled = true;
      const originalText = btn.innerHTML;
      btn.dataset.originalText = originalText;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Spielt...';

      try {
        const res = await fetch('/api/play_sound', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ sound_id: soundId, channel, loop: loopFlag })
        });

        const data = await res.json();

        if (data.success) {
          btn.classList.remove('btn-outline-primary', 'btn-outline-secondary');
          btn.classList.add('btn-success');
          btn.innerHTML = '<i class="bi bi-check-lg me-2"></i> Gespielt';
          currentSoundButton = btn;

          clearCurrentTimer();
          // Automatisches Reset nach maximal 15s, falls Track serverseitig stoppt
          currentResetTimer = setTimeout(() => {
            if (currentSoundButton === btn) {
              resetButtonUI(btn);
              currentSoundButton = null;
            }
          }, 15000);
        } else {
          alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt'));
          resetButtonUI(btn);
        }
      } catch (err) {
        console.error('Sound-Play-Fehler:', err);
        alert('Netzwerkfehler beim Abspielen');
        resetButtonUI(btn);
      }
    });
  });

  // ── Stop-Button für aktuellen Sound ────────────────────────────────────────
  document.querySelectorAll('.stop-sound-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const channel = btn.dataset.channel || null;
      try {
        const res = await fetch('/api/stop_sound', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' }
          ,body: JSON.stringify({ channel })
        });

        const data = await res.json();

        if (data.success) {
          // Visuelles Feedback: aktuellen Play-Button zurücksetzen
          if (currentSoundButton) {
            clearCurrentTimer();
            resetButtonUI(currentSoundButton);
            currentSoundButton = null;
          }

          console.log('Aktueller Sound gestoppt');
          // Optional: kurzes Feedback am Button
          btn.classList.add('btn-danger');
          setTimeout(() => btn.classList.remove('btn-danger'), 800);
        } else {
          alert('Fehler beim Stoppen: ' + (data.message || 'Unbekannt'));
        }
      } catch (err) {
        console.error('Stop-Sound-Fehler:', err);
        alert('Netzwerkfehler beim Stoppen');
      }
    });
  });
}

// Export für app.js
window.initSoundboard = initSoundboard;