Allow clicking on queue items to change songs

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);
+        let position = Self::escape_str(position);
-        self.command(&format!(r#"add "{path}" "{pos}""#)).await?;
+        self.command(&format!(r#"add "{path}" "{position}""#))
+            .await?;
         Ok(())
     }
 
-    pub async fn play(&mut self) -> anyhow::Result<()> {
+    pub async fn play(&mut self, position: Option<&str>) -> anyhow::Result<()> {
-        self.command("play").await?;
+        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(),

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 {
+pub async fn post_play(query: web::Query<PostPlayQuery>) -> impl Responder {
-    mpd::command("play").await.unwrap();
+    let mut mpd = mpd::get_instance().await;
+    mpd.play(query.position.as_deref()).await.unwrap();
     HttpResponse::NoContent()
 }
 

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()

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;

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 }}"