stream: let listeners remove a track from the queue

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

stream/index.html

@@ -157,6 +157,13 @@
     .queue .q-num { color: #6b6480; font-size: .8rem; font-variant-numeric: tabular-nums;
       min-width: 1.2em; text-align: right; }
     .queue .q-meta { flex: 1; min-width: 0; }
+    /* Retrait d'un morceau à venir : croix discrète, virant au rouge tamisé au
+       survol pour signaler l'action destructive. Bouton nu, aligné sur le titre. */
+    .queue .q-act { color: #7d768f; font-size: .95rem; line-height: 1;
+      background: none; border: 0; padding: 0; cursor: pointer;
+      transition: color .15s; }
+    .queue .q-act:hover { color: #e08b9b; }
+    .queue .q-act:disabled { opacity: .5; cursor: default; }
     /* Ajout à la file : un input d'URL + bouton, calqués sur le bloc « share ».
        Le message de retour s'affiche discrètement sous le formulaire, en rouge
        tamisé quand c'est une erreur. */
@@ -473,11 +480,33 @@
             ? `<a href="${escapeHtml(u)}" target="_blank" rel="noopener">${t}</a>`
             : t;
           const meta = `<div class="q-meta"><div class="h-title">${titleHtml}</div>${artist}</div>`;
-          return `<li><div class="q-item"><span class="q-num">${i + 1}</span>${meta}</div></li>`;
+          // Croix de retrait, portant l'id opaque de l'entrée (fourni par
+          // /queue). Absent (ancien ingest sans id) → pas de bouton.
+          const id = (m.id || "").toString();
+          const rm = id
+            ? `<button class="q-act" type="button" data-id="${escapeHtml(id)}" title="Retirer de la file" aria-label="Retirer de la file">✕</button>`
+            : "";
+          return `<li><div class="q-item"><span class="q-num">${i + 1}</span>${meta}${rm}</div></li>`;
         }).join("");
       } catch (e) { /* keep last known values */ }
     }
 
+    // Retrait d'un morceau de la file : délégation de clic sur la liste. On POST
+    // l'id au stream (relayé à l'ingest), puis on rafraîchit la file. Un échec
+    // (entrée déjà passée entre-temps) est simplement ignoré : le prochain
+    // rafraîchissement remettra l'affichage d'aplomb.
+    queueList.addEventListener("click", async (e) => {
+      const btn = e.target.closest(".q-act");
+      if (!btn) return;
+      const id = btn.dataset.id;
+      if (!id) return;
+      btn.disabled = true;
+      try {
+        await fetch("/dequeue?id=" + encodeURIComponent(id), { method: "POST" });
+      } catch (err) { /* ignore */ }
+      pollQueue();
+    });
+
     // Ajout à la file : on POST l'URL au stream, qui la relaie à l'ingest. Ce
     // dernier résout l'URL (piste seule, ou playlist/album entier) et la place
     // en file prioritaire — le prochain morceau diffusé sera la demande. On

stream/radio.liq

@@ -316,6 +316,29 @@ harbor.http.register(
   end
 )
 
+# Retirer un morceau de la file d'attente. Symétrique de /enqueue : le player
+# n'a pas accès au réseau interne, on relaie donc la demande (l'`id` opaque
+# fourni par /queue) vers l'ingest, qui retire l'entrée correspondante. On
+# renvoie tel quel son code et son corps JSON ({removed: true} ou une erreur).
+ingest_dequeue_url = "http://ingest:8080/dequeue"
+harbor.http.register(
+  port=8000, method="POST", "/dequeue",
+  fun(req, resp) -> begin
+    id = list.assoc(default="", "id", req.query)
+    if id == "" then
+      resp.status_code(400)
+      resp.data("missing id")
+    else
+      body = http.post(
+        data="", timeout=10.0, "#{ingest_dequeue_url}?id=#{url.encode(id)}"
+      )
+      resp.status_code(body.status_code)
+      resp.content_type("application/json; charset=utf-8")
+      resp.data(string.trim(body) ^ "\n")
+    end
+  end
+)
+
 # Passer au morceau suivant : on saute le morceau en cours sur la source
 # diffusée. request.dynamic a déjà préchargé le suivant, donc l'enchaînement
 # est immédiat (le prochain /next est demandé au daemon dans la foulée).