radu/py-dj
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement websockets

Browse source
This commit is contained in:
Radu C. Martin 2025-04-14 10:10:01 +02:00
parent c8abb8943e
commit bf3fceb833
3 changed files with 211 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

66
interface.html
View file

@ -14,9 +14,7 @@
<div>
<h2>Player Controls</h2>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="resume()">Resume</button>
<button onclick="play()">Play/Pause</button>
<button onclick="stop()">Stop</button>
<button onclick="skip()">Skip</button>
</div>
@ -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
</script>
</body>
</html>