diff --git a/interface.html b/interface.html
index 10b51a6..a5c0888 100644
--- a/interface.html
+++ b/interface.html
@@ -14,9 +14,7 @@
Player Controls
-
-
-
+
@@ -43,45 +41,53 @@
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(); };
+ const play = async () => { await api("/player/play", { method: "POST" });};
+ const stop = async () => { await api("/player/stop", { method: "POST" });};
+ const skip = async () => { await api("/player/skip", { method: "POST" });};
+
+ // WebSocket connections
+ let playerSocket, queueSocket;
+
+ function connectWebSockets() {
+ const proto = location.protocol === "https:" ? "wss" : "ws";
+ const base = `${proto}://${location.host}`;
+
+ playerSocket = new WebSocket(`${base}/player`);
+ queueSocket = new WebSocket(`${base}/queue`);
+
+ playerSocket.onopen = () => playerSocket.send("ping");
+ queueSocket.onopen = () => queueSocket.send("ping");
+
+ playerSocket.onmessage = (event) => {
+ const state = JSON.parse(event.data);
+ document.getElementById("playerState").textContent = JSON.stringify(state, null, 2);
+ document.getElementById("volumeSlider").value = state.volume;
+ document.getElementById("volumeValue").textContent = state.volume;
+ };
+
+ queueSocket.onmessage = (event) => {
+ const queue = JSON.parse(event.data);
+ document.getElementById("queueList").textContent = JSON.stringify(queue.items, null, 2);
+ };
+
+ playerSocket.onerror = queueSocket.onerror = console.error;
+ playerSocket.onclose = () => setTimeout(connectWebSockets, 1000);
+ queueSocket.onclose = () => setTimeout(connectWebSockets, 1000);
+ }
+
+ connectWebSockets();
- // Init
- updateVolume();
- updateQueue();
- updateState();
- setInterval(updateState, 3000); // auto-refresh state
- setInterval(updateQueue, 3000); // auto-refresh state