play/pause works

NOTES.md

@@ -7,13 +7,13 @@
   - [ ] Display config dialog (is this even needed?)
   - [x] `Update DB` button
     - [x] Disable if running update is detected
-  - [ ] `Previous Track` button
-  - [ ] `Next Track` button
+  - [x] `Previous Track` button
+  - [x] `Next Track` button
   - [x] `Stop` button
   - [x] `Play` button
-    - [ ] `Pause` button
+    - [x] `Pause` button
   - [x] Track seeker
-  - [ ] `Repeat` toggle
+  - [x] `Repeat` toggle
   - [ ] `Shuffle` toggle
   - [ ] xfade
     - [ ] decrease

flake.lock

@@ -43,11 +43,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1705883077,
-        "narHash": "sha256-ByzHHX3KxpU1+V0erFy8jpujTufimh6KaS/Iv3AciHk=",
+        "lastModified": 1708751719,
+        "narHash": "sha256-0uWOKSpXJXmXswOvDM5Vk3blB74apFB6rNGWV5IjoN0=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "5f5210aa20e343b7e35f40c033000db0ef80d7b9",
+        "rev": "f63ce824cd2f036216eb5f637dfef31e1a03ee89",
         "type": "github"
       },
       "original": {

server.go

@@ -124,7 +124,7 @@ func wsServe(c echo.Context) error {
 				c.Logger().Error(err)
 				break
 			} else {
-				log.Println(msg)
+				// log.Print(msg)
 				if strings.ToLower(msg) == "#status" {
 					status, err := mpdConn.Status()
 					if err != nil {

static/controls.js

@@ -1,3 +1,5 @@
+// Configuration
+
 const API_URL = `${document.location.protocol}//${document.location.host}/api`;
 const VOLUME_STEP = 5;
 
@@ -130,21 +132,21 @@ control_update_db.addEventListener("click", e => {
 });
 control_previous.addEventListener("click", e => {
   fetch(`${API_URL}/previous_track`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
 });
 control_play_pause.addEventListener("click", e => {
-  if (e.target.innerHTML === "&#x23F5;&#xFE0E;") {  // TODO: check is never true
+  if (e.target.innerHTML === "⏸︎") {  // pause  // TODO: check is never true
     fetch(`${API_URL}/pause`).then(async r => {
-      if (200 >= r.status < 300) {
+      if (r.status >= 400) {
         console.error(`API returned ${r.status}: ${r.statusText}`);
       }
     });
   } else {  // Pause
     fetch(`${API_URL}/play`).then(async r => {
-      if (200 >= r.status < 300) {
+      if (r.status >= 400) {
         console.error(`API returned ${r.status}: ${r.statusText}`);
       }
     });
@@ -152,21 +154,21 @@ control_play_pause.addEventListener("click", e => {
 });
 control_stop.addEventListener("click", e => {
   fetch(`${API_URL}/stop`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
 });
 control_next.addEventListener("click", e => {
   fetch(`${API_URL}/next_track`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
 });
 control_progress.addEventListener("change", e => {
   fetch(`${API_URL}/seek/${e.target.value}`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -180,7 +182,7 @@ control_repeat.addEventListener("click", e => {
     e.target.dataset.state = "on";
   }
   fetch(`${API_URL}/repeat`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -194,7 +196,7 @@ control_shuffle.addEventListener("click", e => {
     e.target.dataset.state = "on";
   }
   fetch(`${API_URL}/random`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -202,7 +204,7 @@ control_shuffle.addEventListener("click", e => {
 control_xfade_minus.addEventListener("click", e => {
   // TODO: not yet implemented
   fetch(`${API_URL}/xfade`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -210,7 +212,7 @@ control_xfade_minus.addEventListener("click", e => {
 control_xfade_plus.addEventListener("click", e => {
   // TODO: not yet implemented
   fetch(`${API_URL}/xfade`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -218,7 +220,7 @@ control_xfade_plus.addEventListener("click", e => {
 control_volume_up.addEventListener("click", e => {
   const v = Math.min(parseInt(control_volume.value) + VOLUME_STEP, 100);
   fetch(`${API_URL}/volume/${v}`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -228,7 +230,7 @@ control_volume_up.addEventListener("click", e => {
 control_volume_down.addEventListener("click", e => {
   const v = Math.max(parseInt(control_volume.value) - VOLUME_STEP, 0);
   fetch(`${API_URL}/volume/${v}`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });
@@ -236,7 +238,7 @@ control_volume_down.addEventListener("click", e => {
 });
 control_volume.addEventListener("change", e => {
   fetch(`${API_URL}/volume/${e.target.value}`).then(async r => {
-    if (200 >= r.status < 300) {
+    if (r.status >= 400) {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
   });

static/util.js

@@ -13,21 +13,21 @@ function addSongToQueue(song) {
   length.innerText = song.length;
   const actions = document.createElement("td");
   actions.classList.add("actions");
-  // TODO: maybe use a instead of button?
+  // TODO: maybe use `a` instead of `button`?
   const moveUp = document.createElement("button");
   moveUp.classList.add("borderless");
   moveUp.innerHTML = "🔺"; // 🔺 Red Triangle Pointed Down
   moveUp.addEventListener("click", event => {
     console.log(`DEBUG: move song ${song.id} up`);
   });
-  // TODO: maybe use a instead of button?
+  // TODO: maybe use `a` instead of `button`?
   const moveDown = document.createElement("button");
   moveDown.classList.add("borderless");
   moveDown.innerHTML = "$#x1F53B;"; // 🔻 Red Triangle Pointed Up
   moveDown.addEventListener("click", event => {
     console.log(`DEBUG: move song ${song.id} down`);
   });
-  // TODO: maybe use a instead of button?
+  // TODO: maybe use `a` instead of `button`?
   const remove = document.createElement("button");
   remove.classList.add("borderless");
   remove.innerHTML = "$#x274C;"; // ❌ Cross mark; 🗑️ Wastebasket