From e713a65f06c1c99a685be1fe77cf19918c9f962e Mon Sep 17 00:00:00 2001
From: Sijmen <me@sijman.nl>
Date: Mon, 8 May 2023 16:33:44 +0200
Subject: [PATCH] Add button to remove song from queue

---
 src/main.rs          | 18 ++++++++++++++++--
 src/mpd.rs           |  2 ++
 static/style.css     | 30 ++++++++++++++++++++----------
 templates/queue.html |  3 +++
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/main.rs b/src/main.rs
index 562dbb7..3c47f43 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -122,8 +122,22 @@ async fn post_queue(req: tide::Request<()>) -> tide::Result {
     Ok("".into())
 }
 
-async fn delete_queue(_req: tide::Request<()>) -> tide::Result {
-    mpd::connect()?.clear()?;
+#[derive(Deserialize)]
+struct DeleteQueueQuery {
+    #[serde(default)]
+    id: Option<u32>,
+}
+
+async fn delete_queue(req: tide::Request<()>) -> tide::Result {
+    let query: DeleteQueueQuery = req.query()?;
+
+    let mut mpd = mpd::connect()?;
+    if let Some(id) = query.id {
+        mpd.deleteid(id)?;
+    } else {
+        mpd.clear()?;
+    }
+
     Ok("".into())
 }
 
diff --git a/src/mpd.rs b/src/mpd.rs
index 6c5aa54..528450c 100644
--- a/src/mpd.rs
+++ b/src/mpd.rs
@@ -55,6 +55,7 @@ pub fn ls(path: &str) -> anyhow::Result<Vec<Entry>> {
 }
 
 pub struct QueueItem {
+    pub id: u32,
     pub file: String,
     pub title: String,
     pub artist: Option<String>,
@@ -70,6 +71,7 @@ pub fn playlist() -> anyhow::Result<Vec<QueueItem>> {
         .queue()?
         .into_iter()
         .map(|song| QueueItem {
+            id: song.place.unwrap().id,
             file: song.file.clone(),
             title: song.title.as_ref().unwrap_or(&song.file).clone(),
             artist: song.artist.clone(),
diff --git a/static/style.css b/static/style.css
index 1e996f7..9769273 100644
--- a/static/style.css
+++ b/static/style.css
@@ -108,12 +108,20 @@ ul {
 .queue ul .metadata {
   flex: 1;
 }
+
+.queue ul .metadata * {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
 .queue ul .song__name {
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
-  -webkit-box-orient: vertical;
+}
+
+.queue ul li:not(:hover) .remove {
+  display: none;
 }
 
 .browser .header {
@@ -134,12 +142,8 @@ ul {
   margin-right: 1.0rem;
 }
 
-ul.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-}
-@media (prefers-contrast: more) {
+ul.breadcrumb {  position: relative;
+  rast: more) {
   ul.breadcrumb {
     background-color: black;
     border: 2px solid white;
@@ -187,14 +191,20 @@ ul.dir li .material-symbols-outlined {
 
 .albumart {
   border-radius: 0.25rem;
-  background-color: #445;
   width: 48px;
   height: 48px;
+  background: #445 url(/static/placeholder.webp);
+  background-size: contain;
 }
+
 .albumart a {
   display: block;
 }
 
+.albumart img {
+  visibility: hidden;
+}
+
 .queue .albumart {
   margin: 0.75rem;
   margin-left: 0;
diff --git a/templates/queue.html b/templates/queue.html
index 5a08ccf..771619b 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -17,6 +17,9 @@
       <div class="song__artist" title="Artist">{{ artist }}</div>
       {% endif %}
     </div>
+    <div class="remove">
+      <button class="material-symbols-outlined" title="Remove" hx-delete="/queue?id={{ item.id }}">close</button>
+    </div>
   </li>
   {% endfor %}
 </ul>