Add button to shuffle the queue

src/main.rs

@@ -37,7 +37,7 @@ async fn post_consume(_req: tide::Request<()>) -> tide::Result {
     Ok("".into())
 }
 
-async fn post_shuffle(_req: tide::Request<()>) -> tide::Result {
+async fn post_random(_req: tide::Request<()>) -> tide::Result {
     let mut mpd = mpd::get_instance().await;
 
     let status = mpd.command("status").await?.into_hashmap();
@@ -61,6 +61,24 @@ async fn post_repeat(_req: tide::Request<()>) -> tide::Result {
     Ok("".into())
 }
 
+async fn post_shuffle(_req: tide::Request<()>) -> tide::Result {
+    let mut mpd = mpd::get_instance().await;
+    mpd.command("shuffle").await?;
+    Ok("".into())
+}
+
+async fn post_single(_req: tide::Request<()>) -> tide::Result {
+    let mut mpd = mpd::get_instance().await;
+
+    let status = mpd.command("status").await?.into_hashmap();
+    let single = status["single"] == "1";
+
+    mpd.command(&format!("single {}", if single { 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?;
@@ -106,8 +124,10 @@ async fn main() -> tide::Result<()> {
     app.at("/next").post(post_next);
 
     app.at("/consume").post(post_consume);
-    app.at("/shuffle").post(post_shuffle);
+    app.at("/random").post(post_random);
     app.at("/repeat").post(post_repeat);
+    app.at("/single").post(post_single);
+    app.at("/shuffle").post(post_shuffle);
 
     app.at("/static").serve_dir("static/")?;
 

src/routes/player.rs

@@ -9,8 +9,9 @@ struct PlayerTemplate<'a> {
     name: Option<String>,
     state: &'a str,
     consume: bool,
-    shuffle: bool,
+    random: bool,
     repeat: bool,
+    single: bool,
     elapsed: f32,
     duration: f32,
 }
@@ -34,8 +35,9 @@ pub async fn get_player(_req: tide::Request<()>) -> tide::Result {
         name: None,
         state: &status["state"],
         consume: status["consume"] == "1",
-        shuffle: status["random"] == "1",
+        random: status["random"] == "1",
         repeat: status["repeat"] == "1",
+        single: status["single"] == "1",
         elapsed,
         duration,
     };

static/style.css

@@ -81,6 +81,10 @@ ul {
   align-items: center;
 }
 
+.queue-header button {
+  margin-left: 0.75rem;
+}
+
 .queue-next {
   font-weight: bold;
   flex: 1;
@@ -265,15 +269,19 @@ ul.dir li .material-symbols-outlined {
   bottom: 0;
 }
 
-.player .controls {
+.player .controls,
+.player .settings {
   display: flex;
   justify-content: space-around;
   padding: 0 0.5rem 1.0rem;
 }
 
-.player .control {
+.player .controls button {
   font-size: 40px;
 }
+.player .settings button {
+  font-size: 25px;
+}
 
 .player .current {
   display: flex;

templates/index.html

@@ -37,10 +37,14 @@
 
       <div class="queue-header">
         <div class="queue-next">Next in queue</div>
-        <button class="queue-clear" hx-delete="/queue" hx-swap="none">
+        <button hx-delete="/queue" hx-swap="none">
           <span class="material-symbols-outlined">playlist_remove</span>
           Clear
         </button>
+        <button hx-post="/shuffle" hx-swap="none">
+          <span class="material-symbols-outlined">shuffle</span>
+          Shuffle
+        </button>
       </div>
 
       <div class="queue" hx-trigger="sse:playlist,sse:player" hx-get="/queue"></div>

templates/player.html

@@ -52,21 +52,31 @@
   >skip_next</button>
 </div>
 
-<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
+<div class="settings" 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"
+    class="control material-symbols-outlined {% if consume %}active{% endif %}"
+    role="button" title="Consume"
+    style="font-size: 32px"
   >delete_sweep</button>
 
   <button 
-    hx-post="/shuffle"
+    hx-post="/random"
-    class="control material-symbols-outlined {% if shuffle %}active{% endif %}" role="button" title="Shuffle"
+    class="control material-symbols-outlined {% if random %}active{% endif %}"
+    role="button" title="Shuffle"
   >shuffle</button>
 
   <button 
     hx-post="/repeat"
-    class="control material-symbols-outlined {% if repeat %}active{% endif %}" role="button" title="Repeat"
+    class="control material-symbols-outlined {% if repeat %}active{% endif %}"
+    role="button" title="Repeat"
   >repeat</button>
+
+  <button 
+    hx-post="/single"
+    class="control material-symbols-outlined {% if single %}active{% endif %}"
+    role="button" title="Single"
+  >filter_1</button>
 </div>
 
 <div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>