From 2521de291d7efbe603c4e7bb577d59d0682fcb8e Mon Sep 17 00:00:00 2001 From: Sijmen Date: Mon, 1 May 2023 17:01:51 +0200 Subject: [PATCH] Add a progress bar to the now playing card Fixes #5 --- src/main.rs | 11 +++++++++-- static/style.css | 16 ++++++++++++++-- templates/index.html | 7 +++++++ templates/player.html | 34 ++++++++++++++++++++++++++-------- 4 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/main.rs b/src/main.rs index da3736b..5ea418c 100644 --- a/src/main.rs +++ b/src/main.rs @@ -37,17 +37,24 @@ struct PlayerTemplate { song: Option, name: Option, 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 { diff --git a/static/style.css b/static/style.css index b8d456b..676fe3b 100644 --- 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 { diff --git a/templates/index.html b/templates/index.html index ef7ce6f..3276f54 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,6 +10,13 @@ + + diff --git a/templates/player.html b/templates/player.html index 7b8edd8..714bd54 100644 --- a/templates/player.html +++ b/templates/player.html @@ -1,12 +1,6 @@ {# #} - +
{% if let Some(song) = song %} @@ -53,10 +47,34 @@ class="control material-symbols-outlined" role="button" title="Play" >play_arrow {% endif %} - +
+ +
+ + \ No newline at end of file