From 20bc6352b6493faa004457b854a69acad9d27657 Mon Sep 17 00:00:00 2001
From: Sijmen <me@vijf.life>
Date: Fri, 5 Jan 2024 17:43:11 +0100
Subject: [PATCH] Allow clicking on queue items to change songs

---
 src/mpd.rs             | 17 ++++++++++++-----
 src/routes/controls.rs | 14 +++++++++++---
 src/routes/queue.rs    |  4 ++--
 static/style.css       |  2 +-
 templates/queue.html   |  7 ++++++-
 5 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/mpd.rs b/src/mpd.rs
index 9410435..f3a9332 100644
--- a/src/mpd.rs
+++ b/src/mpd.rs
@@ -15,6 +15,7 @@ pub fn host() -> String {
 
 pub struct QueueItem {
     pub id: u32,
+    pub position: i32,
     pub file: String,
     pub title: String,
     pub artist: Option<String>,
@@ -249,15 +250,20 @@ impl Mpd {
         Ok(())
     }
 
-    pub async fn add_pos(&mut self, path: &str, pos: &str) -> anyhow::Result<()> {
+    pub async fn add_position(&mut self, path: &str, position: &str) -> anyhow::Result<()> {
         let path = Self::escape_str(path);
-        let pos = Self::escape_str(pos);
-        self.command(&format!(r#"add "{path}" "{pos}""#)).await?;
+        let position = Self::escape_str(position);
+        self.command(&format!(r#"add "{path}" "{position}""#))
+            .await?;
         Ok(())
     }
 
-    pub async fn play(&mut self) -> anyhow::Result<()> {
-        self.command("play").await?;
+    pub async fn play(&mut self, position: Option<&str>) -> anyhow::Result<()> {
+        let command = match position {
+            Some(position) => format!(r#"play "{position}""#),
+            None => "play".into(),
+        };
+        self.command(&command).await?;
         Ok(())
     }
 
@@ -352,6 +358,7 @@ impl Mpd {
             .iter()
             .map(|song| QueueItem {
                 id: song["Id"].parse().unwrap(),
+                position: song["Pos"].parse().unwrap(),
                 file: song["file"].clone(),
                 title: song.get("Title").unwrap_or(&song["file"]).clone(),
                 artist: song.get("Artist").cloned(),
diff --git a/src/routes/controls.rs b/src/routes/controls.rs
index 707cf1b..79d27f4 100644
--- a/src/routes/controls.rs
+++ b/src/routes/controls.rs
@@ -1,4 +1,5 @@
-use actix_web::{post, HttpResponse, Responder};
+use actix_web::{post, web, HttpResponse, Responder};
+use serde::Deserialize;
 
 use crate::mpd;
 
@@ -13,9 +14,16 @@ async fn toggle_setting(setting: &str) -> anyhow::Result<()> {
     Ok(())
 }
 
+#[derive(Deserialize)]
+struct PostPlayQuery {
+    #[serde(default)]
+    position: Option<String>,
+}
+
 #[post("/play")]
-pub async fn post_play() -> impl Responder {
-    mpd::command("play").await.unwrap();
+pub async fn post_play(query: web::Query<PostPlayQuery>) -> impl Responder {
+    let mut mpd = mpd::get_instance().await;
+    mpd.play(query.position.as_deref()).await.unwrap();
     HttpResponse::NoContent()
 }
 
diff --git a/src/routes/queue.rs b/src/routes/queue.rs
index 5eda745..9adec96 100644
--- a/src/routes/queue.rs
+++ b/src/routes/queue.rs
@@ -38,13 +38,13 @@ pub async fn post_queue(query: web::Query<PostQueueQuery>) -> impl Responder {
     }
 
     if query.next {
-        mpd.add_pos(&path, "+0").await.unwrap();
+        mpd.add_position(&path, "+0").await.unwrap();
     } else {
         mpd.add(&path).await.unwrap();
     }
 
     if query.play {
-        mpd.play().await.unwrap();
+        mpd.play(None).await.unwrap();
     }
 
     HttpResponse::NoContent()
diff --git a/static/style.css b/static/style.css
index fd9ccd3..0dbc0dc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -105,7 +105,7 @@ ul {
   border-radius: .25rem;
   display: flex;
   align-items: center;
-  cursor: move;
+  cursor: grab;
 }
 .queue ul li:hover {
   background-color: #223;
diff --git a/templates/queue.html b/templates/queue.html
index 4aa5fea..2dde559 100644
--- a/templates/queue.html
+++ b/templates/queue.html
@@ -3,7 +3,12 @@
 
 <ul>
   {% for item in queue %}
-  <li {% if item.playing %}class="playing"{% endif %}>
+  <li
+    {% if item.playing %}class="playing"{% endif %}
+    hx-post="/play?position={{ item.position|urlencode }}"
+    hx-trigger="click,keyup[key='Enter']"
+    hx-swap="none"
+  >
     <div class="albumart">
       <img
         src="/art?path={{ item.file|urlencode }}"