Add consume and shuffle buttons

src/main.rs

@@ -26,6 +26,29 @@ async fn post_next(_req: tide::Request<()>) -> tide::Result {
     Ok("".into())
 }
 
+async fn post_consume(_req: tide::Request<()>) -> tide::Result {
+    let mut mpd = mpd::get_instance().await;
+
+    let status = mpd.command("status").await?.into_hashmap();
+    let consume = status["consume"] == "1";
+
+    mpd.command(&format!("consume {}", if consume { 0 } else { 1 }))
+        .await?;
+    Ok("".into())
+}
+
+async fn post_shuffle(_req: tide::Request<()>) -> tide::Result {
+    let mut mpd = mpd::get_instance().await;
+
+    let status = mpd.command("status").await?.into_hashmap();
+    let random = status["random"] == "1";
+
+    mpd.command(&format!("random {}", if random { 0 } else { 1 }))
+        .await?;
+
+    Ok("".into())
+}
+
 async fn sse(_req: tide::Request<()>, sender: tide::sse::Sender) -> tide::Result<()> {
     // Update everything on connect
     sender.send("playlist", "", None).await?;
@@ -35,7 +58,9 @@ async fn sse(_req: tide::Request<()>, sender: tide::sse::Sender) -> tide::Result
     mpd.connect().await.unwrap();
 
     loop {
-        let systems = mpd.idle(&["playlist", "player", "database"]).await?;
+        let systems = mpd
+            .idle(&["playlist", "player", "database", "options"])
+            .await?;
         for system in systems {
             sender.send(&system, "", None).await?;
         }
@@ -68,6 +93,9 @@ async fn main() -> tide::Result<()> {
     app.at("/previous").post(post_previous);
     app.at("/next").post(post_next);
 
+    app.at("/consume").post(post_consume);
+    app.at("/shuffle").post(post_shuffle);
+
     app.at("/static").serve_dir("static/")?;
 
     let bind = std::env::var("EMPEDE_BIND").unwrap_or("0.0.0.0:8080".to_string());

src/routes/player.rs

@@ -8,6 +8,8 @@ struct PlayerTemplate<'a> {
     song: Option<&'a HashMap<String, String>>,
     name: Option<String>,
     state: &'a str,
+    consume: bool,
+    shuffle: bool,
     elapsed: f32,
     duration: f32,
 }
@@ -30,6 +32,8 @@ pub async fn get_player(_req: tide::Request<()>) -> tide::Result {
         song: if song.is_empty() { None } else { Some(&song) },
         name: None,
         state: &status["state"],
+        consume: status["consume"] == "1",
+        shuffle: status["random"] == "1",
         elapsed,
         duration,
     };

static/style.css

@@ -37,6 +37,9 @@ button {
 button .material-symbols-outlined {
   margin-right: 0.25rem;
 }
+.active {
+  color: #99f;
+}
 
 .browser {
   flex: 1;
@@ -242,7 +245,7 @@ ul.dir li .material-symbols-outlined {
   flex-flow: column;
   background-color: #334;
   border-radius: 0.25rem;
-  height: 10.0rem;
+  height: 13.0rem;
 }
 @media (prefers-contrast: more) {
   .player .nowplaying {

templates/index.html

@@ -33,7 +33,7 @@
     ></div>
 
     <div class="player">
-      <div class="nowplaying" hx-trigger="sse:player" hx-get="/player"></div>
+      <div class="nowplaying" hx-trigger="sse:player,sse:options" hx-get="/player"></div>
 
       <div class="queue-header">
         <div class="queue-next">Next in queue</div>

templates/player.html

@@ -52,6 +52,18 @@
   >skip_next</button>
 </div>
 
+<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
+  <button
+    hx-post="/consume"
+    class="control material-symbols-outlined {% if consume %}active{% endif %}" role="button" title="Consume"
+  >delete_sweep</button>
+
+  <button 
+    hx-post="/shuffle"
+    class="control material-symbols-outlined {% if shuffle %}active{% endif %}" role="button" title="Shuffle"
+  >shuffle</button>
+</div>
+
 <div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
 
 <script>