empede/templates/player.html

83 lines
2.2 KiB
HTML
Raw Normal View History

2023-04-25 14:32:51 +00:00
{# #}
<!DOCTYPE html>
2023-04-25 14:32:51 +00:00
<div class="nowplaying">
<div class="current">
{% if let Some(song) = song %}
<div class="albumart">
2023-05-02 09:04:08 +00:00
<a href="/art?path={{ song.file|urlencode }}" target="_blank">
2023-04-27 18:38:15 +00:00
<img
2023-05-02 09:04:08 +00:00
src="/art?path={{ song.file|urlencode }}"
2023-04-27 18:38:15 +00:00
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</a>
</div>
2023-04-25 14:32:51 +00:00
<div class="metadata">
{% if let Some(name) = name %}
2023-04-27 18:38:15 +00:00
<div class="song__name" title="Song name">{{ name }}</div>
2023-04-25 14:32:51 +00:00
{% endif %}
{% if let Some(artist) = song.artist %}
2023-04-27 18:38:15 +00:00
<div class="song__artist" title="Artist">{{ artist }}</div>
2023-04-25 14:32:51 +00:00
{% endif %}
</div>
2023-04-25 16:58:34 +00:00
{% else %}
<div class="metadata idle">
Nothing playing right now
</div>
2023-04-25 14:32:51 +00:00
{% endif %}
</div>
2023-04-27 19:17:26 +00:00
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/previous"
2023-04-27 18:38:15 +00:00
class="control material-symbols-outlined" role="button" title="Previous track"
2023-04-27 19:17:26 +00:00
>skip_previous</button>
{% if state == mpdrs::State::Play %}
2023-04-27 19:17:26 +00:00
<button
hx-post="/pause"
2023-04-27 18:38:15 +00:00
class="control material-symbols-outlined" role="button" title="Pause"
2023-04-27 19:17:26 +00:00
>pause</button>
{% else %}
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</button>
{% endif %}
2023-04-27 19:17:26 +00:00
<button
hx-post="/next"
2023-04-27 18:38:15 +00:00
class="control material-symbols-outlined" role="button" title="Next track"
2023-04-27 19:17:26 +00:00
>skip_next</button>
2023-04-25 14:32:51 +00:00
</div>
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
2023-04-25 14:32:51 +00:00
</div>
<script>
{% if let Some(name) = name %}
2023-05-06 19:48:53 +00:00
document.title = decodeURI("{{ name|urlencode }} - Empede");
{% else %}
document.title = "Empede";
{% endif %}
2023-05-01 23:56:48 +00:00
{% if state == mpdrs::State::Play %}
progressBar = document.querySelector(".nowplaying .progress");
elapsed = {{ elapsed }};
duration = {{ duration }};
if (progressInterval) {
window.clearInterval(progressInterval);
}
progressInterval = window.setInterval(() => {
elapsed += 1.0;
2023-05-02 00:00:44 +00:00
let progress = Math.min(elapsed / duration, 1.0);
progressBar.style.width = `${progress * 100}%`;
}, 1000);
2023-05-01 23:56:48 +00:00
{% endif %}
2023-05-06 19:48:53 +00:00
</script>