diff --git a/static/controls.js b/static/controls.js new file mode 100644 index 0000000..f63d153 --- /dev/null +++ b/static/controls.js @@ -0,0 +1,98 @@ +const API_URL = `${document.location.protocol}://${document.location.host}/api`; + +// Get control elements + +const control_update_db = document.getElementById("control-update-db"); +const control_previous = document.getElementById("control-previous"); +const control_play_pause = document.getElementById("control-play-pause"); +const control_stop = document.getElementById("control-stop"); +const control_next = document.getElementById("control-next"); +const control_progress = document.getElementById("control-progress"); +const control_repeat = document.getElementById("control-repeat"); +const control_shuffle = document.getElementById("control-shuffle"); +const control_xfade = document.getElementById("control-xfade"); +const control_xfade_minus = document.getElementById("control-xfade-minus"); +const control_xfade_plus = document.getElementById("control-xfade-plus"); +const queue_table = document.querySelector("#queue tbody"); + +// Add API calls to controls + +control_update_db.addEventListener("click", e => { + fetch(`${API_URL}/update_db`); +}); +control_previous.addEventListener("click", e => { + fetch(`${API_URL}/previous_track`); +}); +control_play_pause.addEventListener("click", e => { + if (e.target.innerText === "⏵︎") { // Play + fetch(`${API_URL}/pause`); + } else { // Pause + fetch(`${API_URL}/play`); + } +}); +control_stop.addEventListener("click", e => { + fetch(`${API_URL}/stop`); +}); +control_next.addEventListener("click", e => { + fetch(`${API_URL}/next_track`); +}); +control_progress.addEventListener("change", e => { + fetch(`${API_URL}/seek/${e.target.value}`) +}); +control_repeat.addEventListener("click", e => { + fetch(`${API_URL}/repeat`); +}); +control_shuffle.addEventListener("click", e => { + fetch(`${API_URL}/shuffle`); +}); +control_xfade_minus.addEventListener("click", e => { + // TODO: not yet implemented + fetch(`${API_URL}/xfade`); +}); +control_xfade_plus.addEventListener("click", e => { + // TODO: not yet implemented + fetch(`${API_URL}/xfade`); +}); + +// Create WebSocket connection. +const socket = new WebSocket(`${document.location.protocol === "https" ? "wss" : "ws"}://${document.location.host}/ws`); + +// Connection opened +socket.addEventListener("open", (e) => { + socket.send("Hello Server!"); +}); + +// Listen for messages +socket.addEventListener("message", (e) => { + console.log("Message from server"); + const msg = JSON.parse(e.data); + if ("error" in msg.mpd_status) { + console.error(msg.mpd_status.error); + } + + if ("updating_db" in msg.mpd_status) { + control_update_db.disable(); + } else { + control_update_db.enable(); + } + if ("state" in msg.mpd_status && msg.mpd_status.state === "play") { + control_play_pause.innerText = "⏸︎"; // Pause + } else { + control_play_pause.innerText = "⏵︎"; // Play + } + if ("elapsed" in msg.mpd_status) { + control_progress.value = msg.mpd_status.elapsed; + } + if ("duration" in msg.mpd_status) { + control_progress.max = msg.mpd_status.duration; + } + if ("repeat" in msg.mpd_status) { + control_repeat.checked = msg.mpd_status.repeat; + } + if ("random" in msg.mpd_status) { + control_shuffle.checked = msg.mpd_status.random; + } + if ("xfade" in msg.mpd_status) { + control_xfade.value = msg.mpd_status.xfade; + } +}); diff --git a/static/index.html b/static/index.html index daaf309..8934465 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,7 @@ Sanic +
@@ -11,21 +12,39 @@
+
- - - - + + + +
- - + +
- baz +
+
+
+ + +
+
+ + +
+
+
+ + + + +
+
@@ -40,15 +59,16 @@ Actions - +
browser
result
+