1 files changed, 63 insertions, 0 deletions
diff --git a/templates/var/www/html/audio-controls.js b/templates/var/www/html/audio-controls.js
new file mode 100644
index 0000000..3b0a0c1
--- /dev/null
+++ b/templates/var/www/html/audio-controls.js
@@ -0,0 +1,63 @@
+const player = document.getElementById('radioPlayer');
+const button = document.getElementById('radioButton');
+const infoEl = document.getElementById('info');
+
+button.addEventListener('click', () => {
+  if (player.paused) {
+    player.play();
+    button.textContent = 'stop';
+  } else {
+    player.pause();
+    player.currentTime = 0;
+    button.textContent = 'play';
+  }
+});
+
+let spinnerInterval;
+
+function startSpinner() {
+  const spinnerChars = ['|', '/', '-', '\\'];
+  let i = 0;
+  spinnerInterval = setInterval(() => {
+    infoEl.textContent = `${spinnerChars[i++ % spinnerChars.length]}`;
+  }, 100);
+}
+
+function stopSpinner() {
+  clearInterval(spinnerInterval);
+}
+
+let spinnerHasRun = false;
+
+async function fetchCurrentTrack() {
+  if (!spinnerHasRun) {
+    startSpinner();
+    await new Promise(resolve => setTimeout(resolve, 3000));
+  }
+
+  try {
+    const response = await fetch('/info');
+    if (!response.ok) throw new Error('Network response was not ok');
+
+    const data = await response.json();
+    const source = data.icestats.source;
+
+    const title = source.title || 'Unknown';
+    const bitrate = source['ice-bitrate'] || 0;
+    const listeners = source.listeners || 0;
+    const listenerLabel = listeners === 1 ? 'listener' : 'listeners';
+
+    stopSpinner();
+    infoEl.textContent = `${title} | ${bitrate} kbps | ${listeners} ${listenerLabel}`;
+
+    spinnerHasRun = true;
+
+  } catch (error) {
+    stopSpinner();
+    infoEl.textContent = 'Error loading track info';
+    console.error(error);
+  }
+}
+
+fetchCurrentTrack();
+setInterval(fetchCurrentTrack, 10000);