empede/templates/player.html

58 lines
1.6 KiB
HTML

{# #}
<!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 %}
<div class="albumart">
<a href="/art?path={{ song.file }}" target="_blank">
<img
src="/art?path={{ song.file }}"
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</a>
</div>
<div class="metadata">
{% if let Some(name) = name %}
<div class="song__name" title="Song name">{{ name }}</div>
{% endif %}
{% if let Some(artist) = song.artist %}
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
{% else %}
<div class="metadata idle">
Nothing playing right now
</div>
{% endif %}
</div>
<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>
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</button>
<button
hx-post="/pause"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</button>
<button
hx-post="/next"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</button>
</div>
</div>