Combine play and pause controls into one that changes depending on state

src/main.rs

@@ -33,18 +33,21 @@ async fn get_queue(_req: tide::Request<()>) -> tide::Result {
 
 #[derive(Template)]
 #[template(path = "player.html")]
-struct CurrentTemplate {
+struct PlayerTemplate {
     song: Option<mpdrs::Song>,
     name: Option<String>,
+    state: mpdrs::State,
 }
 
 async fn get_player(_req: tide::Request<()>) -> tide::Result {
     let mut mpd = mpd::connect()?;
     let song = mpd.currentsong()?;
+    let state = mpd.status()?.state;
 
-    let mut template = CurrentTemplate {
+    let mut template = PlayerTemplate {
         song: song.clone(),
         name: None,
+        state,
     };
 
     if let Some(song) = song {

templates/player.html

@@ -41,14 +41,19 @@
       hx-post="/previous"
       class="control material-symbols-outlined" role="button" title="Previous track"
     >skip_previous</button>
-    <button 
-      hx-post="/play"
-      class="control material-symbols-outlined" role="button" title="Play"
-    >play_arrow</button>
+
+    {% if state == mpdrs::State::Play %}
     <button
       hx-post="/pause"
       class="control material-symbols-outlined" role="button" title="Pause"
     >pause</button>
+    {% else %}
+    <button 
+      hx-post="/play"
+      class="control material-symbols-outlined" role="button" title="Play"
+    >play_arrow</button>
+    {% endif %}
+    
     <button 
       hx-post="/next"
       class="control material-symbols-outlined" role="button" title="Next track"