Merge branch 'main' of git.berlin.ccc.de:cccb/sanic

NOTES.md

@@ -35,9 +35,8 @@
   - [ ] `Clear queue` button?
 - File browser
   - [ ] List all directories
-  - [ ] The selected folder has a different icon (📂 vs 📁)
-  - [ ] Folders with subfolders have a ➕ sign
-  - [ ] Expanded folders have a ➖ sign
+  - [ ] Selected folder has different icon (📂 vs 📁)
+  - [ ] Folders with subfolders have a ➕ or ➖ sign
   - [ ] Clicked folders contents are displayed in the results
   - [ ] Select tracks in results
   - [ ] `Add` selected tracks to queue button
@@ -63,22 +62,23 @@
   - [ ] `#download` requests download of URL (`yt-dlp`)
     - *TBA*
 - API endpoints
-  - [x] `/api/update_db`
-  - [x] `/api/previous_track`
-  - [x] `/api/next_track`
-  - [x] `/api/stop`
-  - [x] `/api/play`
-  - [x] `/api/pause`
-  - [x] `/api/seek/:seconds`
-  - [x] `/api/repeat`
-  - [x] `/api/random`
-  - [x] `/api/volume/:level`
+  - [x] GET `/api/update_db`
+  - [x] GET `/api/previous_track`
+  - [x] GET `/api/next_track`
+  - [x] GET `/api/stop`
+  - [x] GET `/api/play`
+  - [x] GET `/api/pause`
+  - [x] GET `/api/seek/:seconds`
+  - [x] GET `/api/repeat`
+  - [x] GET `/api/random`
+  - [x] GET `/api/volume/:level`
   - [ ] `/api/xfade/:seconds`
   - [ ] `/api/queue_clear`
-  - [ ] `/api/queue_add/:songid`
-  - [ ] `/api/queue_del/:songid`
-  - [ ] `/api/queue_move/:songid/:pos`
+  - [ ] POST `/api/queue` `{"song_id": 123}`
+  - [x] GET `/api/queue/:song_id/delete`
+  - [x] GET `/api/queue/:song_id/move/:position`
   - [ ] `/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", () => {
+control_update_db.addEventListener("click", event => {
   console.log("Issuing database update")
   fetch(`${API_URL}/update_db`).then(async r => {
     if (r.status === 200) {
       console.log(await r.text());
-      e.target.disabled = true;
+      event.target.disabled = true;
     } else {
       console.error(`API returned ${r.status}: ${r.statusText}`);
     }
@@ -420,32 +420,28 @@ 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 {
-        const spacer = document.createElement("span")
-        spacer.innerHTML = " ";
-        actions.appendChild(spacer);
+        moveUp.innerHTML = " ";
       }
+      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 {
-        const spacer = document.createElement("span")
-        spacer.innerHTML = " ";
-        actions.appendChild(spacer);
+        moveDown.innerHTML = " ";
       }
       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);