72 lines
2.2 KiB
HTML
72 lines
2.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>API test</title>
|
||
|
|
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<textarea id="log"></textarea>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Create WebSocket connection.
|
||
|
|
const socket = new WebSocket("ws://localhost:1323/ws");
|
||
|
|
|
||
|
|
// Connection opened
|
||
|
|
socket.addEventListener("open", (event) => {
|
||
|
|
socket.send("Hello Server!");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Listen for messages
|
||
|
|
socket.addEventListener("message", (event) => {
|
||
|
|
console.log("server: ", event.data);
|
||
|
|
|
||
|
|
if (typeof event.data === "object" && "mpd_status" in event.data) {
|
||
|
|
// {"consume":"0","mixrampdb":"0","partition":"default","playlist":"1","playlistlength":"0","random":"0","repeat":"0","single":"0","state":"stop","volume":"100"}
|
||
|
|
|
||
|
|
// random
|
||
|
|
if ("random" in event.data) {
|
||
|
|
const randomToggle = document.getElementById("randomToggle");
|
||
|
|
randomToggle.checked = event.data.random === "0";
|
||
|
|
}
|
||
|
|
// repeat
|
||
|
|
if ("repeat" in event.data) {
|
||
|
|
const repeatToggle = document.getElementById("repeatToggle");
|
||
|
|
repeatToggle.checked = event.data.repeat === "0";
|
||
|
|
}
|
||
|
|
// state
|
||
|
|
if ("state" in event.data) {
|
||
|
|
const playPauseButton = document.getElementById("playPauseButton");
|
||
|
|
switch (event.data.state) {
|
||
|
|
case "play":
|
||
|
|
playPauseButton.value = "||"
|
||
|
|
break;
|
||
|
|
case "stop":
|
||
|
|
case "pause":
|
||
|
|
playPauseButton.value = ">"
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// volume
|
||
|
|
if ("volume" in event.data) {
|
||
|
|
const volumeInput = document.getElementById("volumeInput");
|
||
|
|
volumeInput.value = event.data.volume
|
||
|
|
}
|
||
|
|
// current song
|
||
|
|
if ("elapsed" in event.data && "duration" in event.data) {
|
||
|
|
const seekTrackInput = document.getElementById("trackSeekInput");
|
||
|
|
seekTrackInput.max = event.data.duration;
|
||
|
|
seekTrackInput.value = event.data.elapsed;
|
||
|
|
const currentSongTimeText = document.getElementById("currentSongTimeText");
|
||
|
|
currentSongTimeText.text = event.data.elapsed + " | " + event.data.duration;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// window.setInterval(() => {
|
||
|
|
// socket.send("#status")
|
||
|
|
// }, 1000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|