NOTES.md

@@ -35,8 +35,9 @@
   - [ ] `Clear queue` button?
 - File browser
   - [ ] List all directories
-  - [ ] Selected folder has different icon (📂 vs 📁)
+  - [ ] The selected folder has a different icon (📂 vs 📁)
-  - [ ] Folders with subfolders have a ➕ or ➖ sign
+  - [ ] Folders with subfolders have a ➕ sign
+  - [ ] Expanded folders have a ➖ sign
   - [ ] Clicked folders contents are displayed in the results
   - [ ] Select tracks in results
   - [ ] `Add` selected tracks to queue button
@@ -62,23 +63,22 @@
   - [ ] `#download` requests download of URL (`yt-dlp`)
     - *TBA*
 - API endpoints
-  - [x] GET `/api/update_db`
+  - [x] `/api/update_db`
-  - [x] GET `/api/previous_track`
+  - [x] `/api/previous_track`
-  - [x] GET `/api/next_track`
+  - [x] `/api/next_track`
-  - [x] GET `/api/stop`
+  - [x] `/api/stop`
-  - [x] GET `/api/play`
+  - [x] `/api/play`
-  - [x] GET `/api/pause`
+  - [x] `/api/pause`
-  - [x] GET `/api/seek/:seconds`
+  - [x] `/api/seek/:seconds`
-  - [x] GET `/api/repeat`
+  - [x] `/api/repeat`
-  - [x] GET `/api/random`
+  - [x] `/api/random`
-  - [x] GET `/api/volume/:level`
+  - [x] `/api/volume/:level`
   - [ ] `/api/xfade/:seconds`
   - [ ] `/api/queue_clear`
-  - [ ] POST `/api/queue` `{"song_id": 123}`
+  - [ ] `/api/queue_add/:songid`
-  - [x] GET `/api/queue/:song_id/delete`
+  - [ ] `/api/queue_del/:songid`
-  - [x] GET `/api/queue/:song_id/move/:position`
+  - [ ] `/api/queue_move/:songid/:pos`
   - [ ] `/api/list_database/:path`
   - [ ] `/api/list_playlists`
   - [ ] `/api/save_playlist`
   - [ ] `/api/delete_playlist`
-

static/index.js

@@ -152,12 +152,12 @@ control_delete_playlist.addEventListener("click", () => {
   });
 });
 
-control_update_db.addEventListener("click", event => {
+control_update_db.addEventListener("click", () => {
   console.log("Issuing database update")
   fetch(`${API_URL}/update_db`).then(async r => {
     if (r.status === 200) {
       console.log(await r.text());
-      event.target.disabled = true;
+      e.target.disabled = true;
     } else {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
@@ -420,28 +420,32 @@ socket.addEventListener("message", event => {
       const length = document.createElement("td");
       length.innerText = secondsToTrackTime(song.duration);
       const actions = document.createElement("td");
-      const moveUp = document.createElement("button");
-      moveUp.classList.add("borderless");
       if (parseInt(song.Pos) !== 0) {
+        const moveUp = document.createElement("button");
+        moveUp.classList.add("borderless");
         moveUp.innerHTML = "🔺"; // 🔺 Red Triangle Pointed Down
         moveUp.addEventListener("click", event => { moveTrackInQueue(event, -1) });
+        actions.appendChild(moveUp);
       } else {
-        moveUp.innerHTML = " ";
+        const spacer = document.createElement("span")
+        spacer.innerHTML = " ";
+        actions.appendChild(spacer);
       }
-      const moveDown = document.createElement("button");
-      moveDown.classList.add("borderless");
       if (parseInt(song.Pos) !== msg.mpd_queue.length - 1) {
+        const moveDown = document.createElement("button");
+        moveDown.classList.add("borderless");
         moveDown.innerHTML = "🔻"; // 🔻 Red Triangle Pointed Up
         moveDown.addEventListener("click", event => {moveTrackInQueue(event, 1)});
+        actions.appendChild(moveDown);
       } else {
-        moveDown.innerHTML = " ";
+        const spacer = document.createElement("span")
+        spacer.innerHTML = " ";
+        actions.appendChild(spacer);
       }
       const remove = document.createElement("button");
       remove.classList.add("borderless");
       remove.innerHTML = "❌"; // ❌ Cross mark
       remove.addEventListener("click", removeTrackFromQueue);
-      actions.appendChild(moveUp);
-      actions.appendChild(moveDown);
       actions.appendChild(remove);
       tr.appendChild(pos);
       tr.appendChild(artist);