diff --git a/NOTES.md b/NOTES.md index 606518b..82cd40c 100644 --- a/NOTES.md +++ b/NOTES.md @@ -14,7 +14,7 @@ - [x] `Pause` button - [x] Track seeker - [x] `Repeat` toggle - - [ ] `Shuffle` toggle + - [x] `Shuffle` toggle - [ ] xfade - [ ] decrease - [ ] increase @@ -55,10 +55,10 @@ ## backend - Websocket - - [ ] `#status` requests mpd infos: + - [x] `#status` requests mpd infos: - `status` - `currentsong` - - `playlistinfo` + - `playlistinfo` (queue) - [ ] `#download` requests download of URL (`yt-dlp`) - *TBA* - API endpoints @@ -67,10 +67,10 @@ - [x] `/api/next_track` - [x] `/api/stop` - [x] `/api/play` - - [ ] `/api/pause` + - [x] `/api/pause` - [x] `/api/seek/:seconds` - - [ ] `/api/repeat` - - [ ] `/api/random` + - [x] `/api/repeat` + - [x] `/api/random` - [x] `/api/volume/:level` - [ ] `/api/xfade/:seconds` - [ ] `/api/queue_clear` @@ -81,12 +81,3 @@ - [ ] `/api/list_playlists` - [ ] `/api/save_playlist` - [ ] `/api/delete_playlist` - - -# foo - -- client: connect websocket -- server: on_connect: send full state -- server: subscribe to changes -- server: on_change: send to client - diff --git a/static/controls.js b/static/controls.js index 4aba6c6..29d341d 100644 --- a/static/controls.js +++ b/static/controls.js @@ -138,7 +138,7 @@ control_previous.addEventListener("click", e => { }); }); control_play_pause.addEventListener("click", e => { - if (e.target.innerHTML === "⏸︎") { // pause // TODO: check is never true + if (e.target.innerHTML === "⏸︎") { fetch(`${API_URL}/pause`).then(async r => { if (r.status >= 400) { console.error(`API returned ${r.status}: ${r.statusText}`); @@ -279,10 +279,10 @@ socket.addEventListener("message", (e) => { } // update play/pause button - if ("state" in msg.mpd_status && msg.mpd_status.state === "play") { - control_play_pause.innerHTML = "⏸︎"; // Pause - } else { + if ("state" in msg.mpd_status && msg.mpd_status.state !== "play") { // TODO: only update DOM if necessary control_play_pause.innerHTML = "⏵︎"; // Play + } else { + control_play_pause.innerHTML = "⏸︎"; // Pause } // update playback time @@ -354,6 +354,13 @@ socket.addEventListener("message", (e) => { const tbody = document.createElement("tbody"); msg.mpd_queue.forEach(elem => { const tr = document.createElement("tr"); + tr.dataset.song_id = elem.Id; + if ("songid" in msg.mpd_status && msg.mpd_status.songid === elem.Id) { + tr.classList.add("playing"); + } else { + tr.classList.remove("playing"); + } + // TODO: check if current row is currently playing track const pos = document.createElement("td"); pos.innerText = elem.Pos; const artist = document.createElement("td"); diff --git a/static/index.html b/static/index.html index 482b1f4..211a438 100644 --- a/static/index.html +++ b/static/index.html @@ -233,6 +233,7 @@ for (let i = 1; i <= 100; i++) { const tr = document.createElement("tr"); if (i === 1) { tr.classList.add("playing"); + tr.dataset.song_id = i; } const pos = document.createElement("td"); pos.innerText = i.toString();