2023-04-25 14:32:51 +00:00
|
|
|
{# #}
|
|
|
|
|
<!DOCTYPE html>
|
2023-05-01 15:01:51 +00:00
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
<div class="current">
|
|
|
|
|
{% if let Some(song) = song %}
|
|
|
|
|
<div class="albumart">
|
2023-05-14 13:31:16 +00:00
|
|
|
<a href="/art?path={{ song["file"]|urlencode }}" target="_blank">
|
2023-05-08 11:56:10 +00:00
|
|
|
<img
|
2023-05-14 13:31:16 +00:00
|
|
|
src="/art?path={{ song["file"]|urlencode }}"
|
2023-05-08 11:56:10 +00:00
|
|
|
onload="this.style.visibility = 'visible'"
|
2023-05-07 00:51:34 +00:00
|
|
|
alt="Album art"
|
|
|
|
|
>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="metadata">
|
|
|
|
|
{% if let Some(name) = name %}
|
|
|
|
|
<div class="song__name" title="Song name">{{ name }}</div>
|
|
|
|
|
{% endif %}
|
2023-05-14 13:31:16 +00:00
|
|
|
{% if let Some(artist) = song.get("Artist") %}
|
2023-05-07 00:51:34 +00:00
|
|
|
<div class="song__artist" title="Artist">{{ artist }}</div>
|
2023-04-25 14:32:51 +00:00
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2023-05-07 00:51:34 +00:00
|
|
|
{% else %}
|
|
|
|
|
<div class="metadata idle">
|
|
|
|
|
Nothing playing right now
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2023-04-25 14:32:51 +00:00
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
|
|
|
|
|
<button
|
|
|
|
|
hx-post="/previous"
|
|
|
|
|
class="control material-symbols-outlined" role="button" title="Previous track"
|
|
|
|
|
>skip_previous</button>
|
2023-05-01 14:25:07 +00:00
|
|
|
|
2023-05-14 13:31:16 +00:00
|
|
|
{% if state == "play" %}
|
2023-05-07 00:51:34 +00:00
|
|
|
<button
|
|
|
|
|
hx-post="/pause"
|
|
|
|
|
class="control material-symbols-outlined" role="button" title="Pause"
|
|
|
|
|
>pause</button>
|
|
|
|
|
{% else %}
|
|
|
|
|
<button
|
|
|
|
|
hx-post="/play"
|
|
|
|
|
class="control material-symbols-outlined" role="button" title="Play"
|
|
|
|
|
>play_arrow</button>
|
|
|
|
|
{% endif %}
|
2023-05-01 15:01:51 +00:00
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
<button
|
|
|
|
|
hx-post="/next"
|
|
|
|
|
class="control material-symbols-outlined" role="button" title="Next track"
|
|
|
|
|
>skip_next</button>
|
2023-04-25 14:32:51 +00:00
|
|
|
</div>
|
2023-05-01 15:01:51 +00:00
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
<div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>
|
|
|
|
|
|
2023-05-01 15:01:51 +00:00
|
|
|
<script>
|
|
|
|
|
{% if let Some(name) = name %}
|
2023-05-14 13:31:16 +00:00
|
|
|
{% if state == "play" %}
|
2023-05-13 12:51:22 +00:00
|
|
|
document.title = "▶ " + {{ name|json|safe }} + " - Empede";
|
2023-05-07 00:12:45 +00:00
|
|
|
{% else %}
|
2023-05-13 12:51:22 +00:00
|
|
|
document.title = "⏸ " + {{ name|json|safe }} + " - Empede";
|
2023-05-07 00:12:45 +00:00
|
|
|
{% endif %}
|
2023-05-01 15:01:51 +00:00
|
|
|
{% else %}
|
|
|
|
|
document.title = "Empede";
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
2023-05-14 13:31:16 +00:00
|
|
|
{% if state == "play" %}
|
2023-05-01 15:01:51 +00:00
|
|
|
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);
|
2023-05-01 15:01:51 +00:00
|
|
|
progressBar.style.width = `${progress * 100}%`;
|
|
|
|
|
}, 1000);
|
2023-05-01 23:56:48 +00:00
|
|
|
{% endif %}
|
2023-05-06 19:48:53 +00:00
|
|
|
</script>
|
