Update screenshot

Add a progress bar to the now playing card
Fixes #5
2023-05-01 17:03:00 +02:00 · 2023-05-01 17:01:51 +02:00
5 changed files with 56 additions and 12 deletions
--- a/screenshots/screenshot.webp
+++ b/screenshots/screenshot.webp
--- a/src/main.rs
+++ b/src/main.rs
@ -37,17 +37,24 @@ struct PlayerTemplate {
    song: Option<mpdrs::Song>,
    name: Option<String>,
    state: mpdrs::State,
+    elapsed: f32,
+    duration: f32,
 }

 async fn get_player(_req: tide::Request<()>) -> tide::Result {
    let mut mpd = mpd::connect()?;
    let song = mpd.currentsong()?;
-    let state = mpd.status()?.state;
+    let status = mpd.status()?;
+
+    let elapsed = status.elapsed.map(|d| d.as_secs_f32()).unwrap_or(0.0);
+    let duration = status.duration.map(|d| d.as_secs_f32()).unwrap_or(0.0);

    let mut template = PlayerTemplate {
        song: song.clone(),
        name: None,
-        state,
+        state: status.state,
+        elapsed,
+        duration,
    };

    if let Some(song) = song {
--- a/static/style.css
+++ b/static/style.css
@ -200,10 +200,11 @@ ul.dir li .material-symbols-outlined {

 .player .nowplaying {
  display: flex;
+  position: relative;
  flex-flow: column;
  background-color: #334;
  border-radius: 0.25rem;
-  height: 9.5rem;
+  height: 10.0rem;
 }
@media (prefers-contrast: more) {
  .player .nowplaying {
@ -212,10 +213,21 @@ ul.dir li .material-symbols-outlined {
  }
 }

+.player .progress {
+  background-color: #99f;
+
+  height: 0.5rem;
+  border-radius: 0.25rem;
+
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
 .player .controls {
  display: flex;
  justify-content: space-around;
-  padding: 0.5rem;
+  padding: 0 0.5rem 1.0rem;
 }

 .player .control {
--- a/templates/index.html
+++ b/templates/index.html
@ -10,6 +10,13 @@

    <link rel="stylesheet" href="/static/style.css">
    <link href="/static/favicon.png" rel="icon" type="image/png">
+
+    <script>
+      let progressBar;
+      let elapsed;
+      let duration;
+      let progressInterval;
+    </script>
  </head>

  <body hx-ext="sse" sse-connect="/sse">
--- a/templates/player.html
+++ b/templates/player.html
@ -1,12 +1,6 @@
 {# #}
 <!DOCTYPE html>
-<script>
-  {% if let Some(name) = name %}
-  document.title = "{{ name }} - Empede";
-  {% else %}
-  document.title = "Empede";
-  {% endif %}
-</script>
+
 <div class="nowplaying">
  <div class="current">
    {% if let Some(song) = song %}
@ -53,10 +47,34 @@
      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"
    >skip_next</button>
  </div>
+
+  <div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
 </div>
+
+<script>
+  {% if let Some(name) = name %}
+  document.title = "{{ name }} - Empede";
+  {% else %}
+  document.title = "Empede";
+  {% endif %}
+
+  progressBar = document.querySelector(".nowplaying .progress");
+  elapsed = {{ elapsed }};
+  duration = {{ duration }};
+
+  if (progressInterval) {
+    window.clearInterval(progressInterval);
+  }
+
+  progressInterval = window.setInterval(() => {
+    elapsed += 1.0;
+    let progress = elapsed / duration;
+    progressBar.style.width = `${progress * 100}%`;
+  }, 1000);
+</script>
Author	SHA1	Message	Date
Sijmen	24cecab594	Update screenshot All checks were successful continuous-integration/drone/push Build is passing Details	2023-05-01 17:03:00 +02:00
Sijmen	2521de291d	Add a progress bar to the now playing card Fixes #5	2023-05-01 17:01:51 +02:00