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)

// 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 ───────────────────────────────────────────────────────────
  document.querySelectorAll('.play-sound-btn').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;
      }

      // 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 })
        });

        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;

          // Optional: Automatisch nach 3–5 Sekunden zurücksetzen
          setTimeout(() => {
            if (currentSoundButton === btn) {
              btn.classList.remove('btn-success');
              btn.classList.add('btn-outline-primary');
              btn.innerHTML = originalText;
              btn.disabled = false;
            }
          }, 4000); // 4 Sekunden – anpassbar
        } else {
          alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt'));
          btn.innerHTML = originalText;
          btn.disabled = false;
        }
      } catch (err) {
        console.error('Sound-Play-Fehler:', err);
        alert('Netzwerkfehler beim Abspielen');
        btn.innerHTML = originalText;
        btn.disabled = false;
      }
    });
  });

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

        const data = await res.json();

        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;
            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;