empede/templates/queue.html

43 lines
1.1 KiB
HTML

{# Template #}
<!DOCTYPE html>
<ul>
{% for item in queue %}
<li {% if item.playing %}class="playing"{% endif %}>
<div class="albumart">
<img
src="/art?path={{ item.file|urlencode }}"
onload="this.style.visibility = 'visible'"
alt="Album art"
>
</div>
<div class="metadata">
<div class="song__name" title="Song name">{{ item.title }}</div>
{% if let Some(artist) = item.artist %}
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
<div class="remove">
<button class="material-symbols-outlined" title="Remove" hx-delete="/queue?id={{ item.id }}">close</button>
</div>
</li>
{% endfor %}
</ul>
<script>
htmx.onLoad(() => {
const isReduced = window
.matchMedia("(prefers-reduced-motion: reduce)")
.matches;
new Sortable(document.querySelector(".queue ul"), {
animation: isReduced ? 0 : 100,
onEnd: (event) => fetch("/queue/move", {
method: "POST",
headers: {"content-type": "application/json"},
body: JSON.stringify({from: event.oldIndex, to: event.newIndex}),
}),
});
});
</script>