empede/templates/queue.html

49 lines
1.2 KiB
HTML
Raw Normal View History

2023-04-25 01:26:27 +00:00
{# Template #}
<!DOCTYPE html>
2023-04-27 13:41:28 +00:00
<div class="queue-header">
<div class="queue-next">Next in queue</div>
<button class="queue-clear" hx-delete="/queue" hx-swap="none">
2023-04-27 13:41:28 +00:00
<span class="material-symbols-outlined">playlist_remove</span>
Clear
</div>
</div>
2023-04-25 01:26:27 +00:00
<ul class="queue">
{% for item in queue %}
<li {% if item.playing %}class="playing"{% endif %}>
<div class="albumart">
2023-04-27 18:38:15 +00:00
<img
2023-05-02 09:04:08 +00:00
src="/art?path={{ item.file|urlencode }}"
2023-04-27 18:38:15 +00:00
onerror="this.style.opacity = 0"
alt="Album art"
title="Album art"
>
</div>
<div class="metadata">
2023-04-27 18:38:15 +00:00
<div class="song__name" title="Song name">{{ item.title }}</div>
{% if let Some(artist) = item.artist %}
2023-04-27 18:38:15 +00:00
<div class="song__artist" title="Artist">{{ artist }}</div>
{% endif %}
</div>
2023-04-25 01:26:27 +00:00
</li>
{% endfor %}
</ul>
2023-05-01 22:35:31 +00:00
<script>
htmx.onLoad(() => {
const isReduced = window
.matchMedia("(prefers-reduced-motion: reduce)")
.matches;
new Sortable(document.querySelector(".queue"), {
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}),
}),
});
});
2023-05-06 19:07:51 +00:00
</script>