2023-04-25 01:26:27 +00:00
|
|
|
{# Template #}
|
|
|
|
|
<!DOCTYPE html>
|
2023-04-27 13:41:28 +00:00
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
<ul>
|
2023-04-25 01:26:27 +00:00
|
|
|
{% for item in queue %}
|
2024-01-05 16:43:11 +00:00
|
|
|
<li
|
|
|
|
|
{% if item.playing %}class="playing"{% endif %}
|
|
|
|
|
hx-post="/play?position={{ item.position|urlencode }}"
|
|
|
|
|
hx-trigger="click,keyup[key='Enter']"
|
|
|
|
|
hx-swap="none"
|
|
|
|
|
>
|
2023-04-27 01:40:19 +00:00
|
|
|
<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-05-08 11:56:10 +00:00
|
|
|
onload="this.style.visibility = 'visible'"
|
2023-04-27 18:38:15 +00:00
|
|
|
alt="Album art"
|
|
|
|
|
>
|
2023-04-27 01:40:19 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="metadata">
|
2023-04-27 18:38:15 +00:00
|
|
|
<div class="song__name" title="Song name">{{ item.title }}</div>
|
2023-04-27 01:40:19 +00:00
|
|
|
{% if let Some(artist) = item.artist %}
|
2023-04-27 18:38:15 +00:00
|
|
|
<div class="song__artist" title="Artist">{{ artist }}</div>
|
2023-04-27 01:40:19 +00:00
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
2023-05-08 14:33:44 +00:00
|
|
|
<div class="remove">
|
|
|
|
|
<button class="material-symbols-outlined" title="Remove" hx-delete="/queue?id={{ item.id }}">close</button>
|
|
|
|
|
</div>
|
2023-04-25 01:26:27 +00:00
|
|
|
</li>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</ul>
|
2023-05-01 22:35:31 +00:00
|
|
|
|
|
|
|
|
<script>
|
2024-01-06 00:30:53 +00:00
|
|
|
htmx.onLoad(() => {
|
|
|
|
|
const scrollCurrentSongIntoView = () => {
|
|
|
|
|
const hoveredSong = document.querySelector(".queue li:hover");
|
|
|
|
|
if (hoveredSong === null) {
|
|
|
|
|
const currentSong = document.querySelector(".queue li.playing");
|
|
|
|
|
currentSong?.scrollIntoView({ block: "nearest" });
|
|
|
|
|
}
|
2024-01-05 04:19:40 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-01 22:35:31 +00:00
|
|
|
const isReduced = window
|
|
|
|
|
.matchMedia("(prefers-reduced-motion: reduce)")
|
|
|
|
|
.matches;
|
|
|
|
|
|
2023-05-07 00:51:34 +00:00
|
|
|
new Sortable(document.querySelector(".queue ul"), {
|
2023-05-01 22:35:31 +00:00
|
|
|
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}),
|
|
|
|
|
}),
|
|
|
|
|
});
|
2024-01-05 04:19:40 +00:00
|
|
|
|
|
|
|
|
scrollCurrentSongIntoView();
|
2023-05-01 22:35:31 +00:00
|
|
|
});
|
2023-05-06 19:07:51 +00:00
|
|
|
</script>
|
