update for random soundfile list

templates/soundboard.html

@@ -19,7 +19,7 @@
     <div class="col-md-6 d-flex align-items-end">
       <div class="btn-group">
         <button id="btn-load-sb" class="btn btn-primary">Laden</button>
-        <button id="btn-play-random" class="btn btn-outline-secondary" disabled>Zufällig (max 2/h pro Datei)</button>
+        <button id="btn-play-random" class="btn btn-outline-secondary" disabled>1x Zufällig</button>
       </div>
     </div>
   </div>
@@ -33,6 +33,7 @@
     <div id="sb-backgrounds" class="mb-4"></div>
     <div id="sb-sounds" class="mb-4"></div>
     <div id="sb-random" class="mb-4"></div>
+    <div id="sb-auto" class="mb-4"></div>
   </div>
 
   <div class="mt-4">
@@ -49,6 +50,7 @@
   const content  = document.getElementById('sb-content');
 
   let currentSB = null;
+  let autoTimer = null;
   const statusBox = (msg, type='info') => {
     console.log(msg);
   };
@@ -117,6 +119,81 @@
     if (!list.length) { container.innerHTML=''; randBtn.disabled=true; return; }
     const items = list.map(s => `<li>${s.name || s.id || s.file}</li>`).join('');
     container.innerHTML = '<h4>Zufallspool</h4><p class="text-muted">max 2x pro Stunde je Datei.</p><ul>' + items + '</ul>';
+
+    renderAutoRandomControls();
+  }
+
+  function renderAutoRandomControls() {
+    const container = document.getElementById('sb-auto');
+    container.innerHTML = `
+      <h4>Automatik (Random)</h4>
+      <div class="row g-3 align-items-end">
+        <div class="col-md-3">
+          <label class="form-label">Intervall min (Minuten)</label>
+          <input id="auto-interval-min" type="number" class="form-control" value="5" min="1" max="60">
+        </div>
+        <div class="col-md-3">
+          <label class="form-label">Intervall max (Minuten)</label>
+          <input id="auto-interval-max" type="number" class="form-control" value="10" min="1" max="120">
+        </div>
+        <div class="col-md-3">
+          <label class="form-label">Startverzögerung min (Minuten)</label>
+          <input id="auto-delay-min" type="number" class="form-control" value="3" min="0" max="60">
+        </div>
+        <div class="col-md-3">
+          <label class="form-label">Startverzögerung max (Minuten)</label>
+          <input id="auto-delay-max" type="number" class="form-control" value="12" min="0" max="120">
+        </div>
+      </div>
+      <div class="mt-3 d-flex gap-2 align-items-center">
+        <button id="auto-start" class="btn btn-success" ${!randBtn.disabled ? '' : 'disabled'}>Auto-Start</button>
+        <button id="auto-stop" class="btn btn-outline-danger" disabled>Stop</button>
+        <span id="auto-status" class="text-muted ms-2">Aus</span>
+      </div>
+    `;
+
+    const start = document.getElementById('auto-start');
+    const stop  = document.getElementById('auto-stop');
+    const status = document.getElementById('auto-status');
+
+    start.onclick = () => {
+      const imin = Math.max(1, parseInt(document.getElementById('auto-interval-min').value, 10) || 5);
+      const imax = Math.max(imin, parseInt(document.getElementById('auto-interval-max').value, 10) || 10);
+      const dmin = Math.max(0, parseInt(document.getElementById('auto-delay-min').value, 10) || 3);
+      const dmax = Math.max(dmin, parseInt(document.getElementById('auto-delay-max').value, 10) || 12);
+
+      const delayMs = randBetween(dmin, dmax) * 60 * 1000;
+      scheduleAuto(imin, imax, delayMs, status, start, stop);
+    };
+
+    stop.onclick = () => stopAuto(status, start, stop);
+  }
+
+  function randBetween(min, max) {
+    return min + Math.random() * (max - min);
+  }
+
+  function scheduleAuto(imin, imax, delayMs, status, startBtn, stopBtn) {
+    stopAuto(status, startBtn, stopBtn);
+    status.textContent = `Geplant in ${(delayMs/60000).toFixed(1)} min`;
+    startBtn.disabled = true;
+    stopBtn.disabled = false;
+    autoTimer = setTimeout(async function tick() {
+      await playRandom();
+      const nextMs = randBetween(imin, imax) * 60 * 1000;
+      status.textContent = `Nächster in ${(nextMs/60000).toFixed(1)} min`;
+      autoTimer = setTimeout(tick, nextMs);
+    }, delayMs);
+  }
+
+  function stopAuto(status, startBtn, stopBtn) {
+    if (autoTimer) {
+      clearTimeout(autoTimer);
+      autoTimer = null;
+    }
+    if (status) status.textContent = 'Aus';
+    if (startBtn) startBtn.disabled = false;
+    if (stopBtn) stopBtn.disabled = true;
   }
 
   async function playSound(sound) {
@@ -146,10 +223,14 @@
 
   loadBtn.onclick = () => loadSoundboard(selectEl.value);
   randBtn.onclick = async () => {
+    await playRandom();
+  };
+
+  async function playRandom() {
     const res = await fetch('/api/soundboard/play_random', { method: 'POST' });
     const data = await res.json();
     if (!data.success) statusBox(data.message || 'Random fehlgeschlagen', 'warn');
-  };
+  }
 
   // Lautstärke
   const vol = document.getElementById('sb-volume');