play/pause fixed; mark current song in queue

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`
+  - [x] `/api/repeat`
-  - [ ] `/api/random`
+  - [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
-

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") {
+      if ("state" in msg.mpd_status && msg.mpd_status.state !== "play") {  // TODO: only update DOM if necessary
-        control_play_pause.innerHTML = "⏸︎";  // Pause
-      } else {
         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");

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();