parent
38a47a4a10
commit
2521de291d
4 changed files with 56 additions and 12 deletions
11
src/main.rs
11
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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue