feat: add basic interface and cleanup

2025-04-11 19:37:03 +02:00 · 2025-04-11 19:37:03 +02:00 · c8abb8943e
commit c8abb8943e
parent 573429acd2
4 changed files with 211 additions and 53 deletions
--- a/interface.html
+++ b/interface.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Music Player</title>
+  <style>
+    body { font-family: sans-serif; padding: 1rem; }
+    button { margin: 0.5rem; }
+    #queueList { margin-top: 1rem; }
+  </style>
+</head>
+<body>
+  <h1>Music Player</h1>
+
+  <div>
+    <h2>Player Controls</h2>
+    <button onclick="play()">Play</button>
+    <button onclick="pause()">Pause</button>
+    <button onclick="resume()">Resume</button>
+    <button onclick="stop()">Stop</button>
+    <button onclick="skip()">Skip</button>
+  </div>
+
+  <div>
+    <h2>Volume</h2>
+    <input type="range" min="0" max="1" step="0.01" id="volumeSlider" oninput="setVolume(this.value)">
+    <span id="volumeValue">0</span>
+  </div>
+
+  <div>
+    <h2>Queue</h2>
+    <input type="text" id="trackUrl" placeholder="Track URL">
+    <button onclick="addToQueue()">Add to Queue</button>
+    <div id="queueList"></div>
+  </div>
+
+  <div>
+    <h2>Player State</h2>
+    <pre id="playerState"></pre>
+  </div>
+
+  <script>
+    const api = (endpoint, options = {}) =>
+      fetch(endpoint, options).then(res => res.json()).catch(console.error);
+
+    const updateVolume = async () => {
+      const res = await api("/player/volume");
+      document.getElementById("volumeSlider").value = res.volume;
+      document.getElementById("volumeValue").textContent = res.volume;
+    };
+
+    const setVolume = async (val) => {
+      await api(`/player/volume?volume=${val}`, { method: "PUT" });
+      document.getElementById("volumeValue").textContent = val;
+    };
+
+    const updateQueue = async () => {
+      const queue = await api("/queue");
+      document.getElementById("queueList").textContent = JSON.stringify(queue, null, 2);
+    };
+
+    const updateState = async () => {
+      const state = await api("/player");
+      document.getElementById("playerState").textContent = JSON.stringify(state, null, 2);
+    };
+
+    const addToQueue = async () => {
+      const url = document.getElementById("trackUrl").value;
+      await api(`/queue?url=${encodeURIComponent(url)}`, { method: "POST" });
+      updateQueue();
+    };
+
+    const play = async () => { await api("/player/play", { method: "POST" }); updateState(); };
+    const pause = async () => { await api("/player/pause", { method: "POST" }); updateState(); };
+    const resume = async () => { await api("/player/resume", { method: "POST" }); updateState(); };
+    const stop = async () => { await api("/player/stop", { method: "POST" }); updateState(); };
+    const skip = async () => { await api("/player/skip", { method: "POST" }); updateState(); updateQueue(); };
+
+    // Init
+    updateVolume();
+    updateQueue();
+    updateState();
+    setInterval(updateState, 3000); // auto-refresh state
+    setInterval(updateQueue, 3000); // auto-refresh state
+  </script>
+</body>
+</html>
+