Compare commits
2 commits
38a47a4a10
...
24cecab594
| Author | SHA1 | Date | |
|---|---|---|---|
24cecab594
|
|||
|
2521de291d
|
5 changed files with 56 additions and 12 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 135 KiB |
11
src/main.rs
11
src/main.rs
|
|
@ -37,17 +37,24 @@ struct PlayerTemplate {
|
||||||
song: Option<mpdrs::Song>,
|
song: Option<mpdrs::Song>,
|
||||||
name: Option<String>,
|
name: Option<String>,
|
||||||
state: mpdrs::State,
|
state: mpdrs::State,
|
||||||
|
elapsed: f32,
|
||||||
|
duration: f32,
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn get_player(_req: tide::Request<()>) -> tide::Result {
|
async fn get_player(_req: tide::Request<()>) -> tide::Result {
|
||||||
let mut mpd = mpd::connect()?;
|
let mut mpd = mpd::connect()?;
|
||||||
let song = mpd.currentsong()?;
|
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 {
|
let mut template = PlayerTemplate {
|
||||||
song: song.clone(),
|
song: song.clone(),
|
||||||
name: None,
|
name: None,
|
||||||
state,
|
state: status.state,
|
||||||
|
elapsed,
|
||||||
|
duration,
|
||||||
};
|
};
|
||||||
|
|
||||||
if let Some(song) = song {
|
if let Some(song) = song {
|
||||||
|
|
|
||||||
|
|
@ -200,10 +200,11 @@ ul.dir li .material-symbols-outlined {
|
||||||
|
|
||||||
.player .nowplaying {
|
.player .nowplaying {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
background-color: #334;
|
background-color: #334;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
height: 9.5rem;
|
height: 10.0rem;
|
||||||
}
|
}
|
||||||
@media (prefers-contrast: more) {
|
@media (prefers-contrast: more) {
|
||||||
.player .nowplaying {
|
.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 {
|
.player .controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
padding: 0.5rem;
|
padding: 0 0.5rem 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player .control {
|
.player .control {
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,13 @@
|
||||||
|
|
||||||
<link rel="stylesheet" href="/static/style.css">
|
<link rel="stylesheet" href="/static/style.css">
|
||||||
<link href="/static/favicon.png" rel="icon" type="image/png">
|
<link href="/static/favicon.png" rel="icon" type="image/png">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let progressBar;
|
||||||
|
let elapsed;
|
||||||
|
let duration;
|
||||||
|
let progressInterval;
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body hx-ext="sse" sse-connect="/sse">
|
<body hx-ext="sse" sse-connect="/sse">
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
{# #}
|
{# #}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<script>
|
|
||||||
{% if let Some(name) = name %}
|
|
||||||
document.title = "{{ name }} - Empede";
|
|
||||||
{% else %}
|
|
||||||
document.title = "Empede";
|
|
||||||
{% endif %}
|
|
||||||
</script>
|
|
||||||
<div class="nowplaying">
|
<div class="nowplaying">
|
||||||
<div class="current">
|
<div class="current">
|
||||||
{% if let Some(song) = song %}
|
{% if let Some(song) = song %}
|
||||||
|
|
@ -59,4 +53,28 @@
|
||||||
class="control material-symbols-outlined" role="button" title="Next track"
|
class="control material-symbols-outlined" role="button" title="Next track"
|
||||||
>skip_next</button>
|
>skip_next</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
|
||||||
</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