_/empede
1
0
Fork 0
Code Issues Releases 18 Activity

Add a progress bar to the now playing card

Browse source 
Fixes #5
This commit is contained in:
Sijmen 2023-05-01 17:01:51 +02:00
parent 38a47a4a10
commit 2521de291d
Signed by: vijfhoek
GPG key ID: DAF7821E067D9C48
4 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/main.rs
View file

@ -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 {

16
static/style.css
View file

@ -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 {

7
templates/index.html
View file

@ -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">

34
templates/player.html
View file

@ -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>