make the queue a bit nicer
This commit is contained in:
@@ -1134,8 +1134,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="border-t pt-2">
|
<div class="border-t justify-between flex pt-2">
|
||||||
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
|
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
|
||||||
|
{#if snap.currentIndex !== null}
|
||||||
|
<button
|
||||||
|
class="btn text-sm text-muted-foreground hover:underline"
|
||||||
|
onclick={() => {
|
||||||
|
const currentEl = document.querySelector(
|
||||||
|
`[data-queue-id='${snap.currentTrack?.id}']`,
|
||||||
|
);
|
||||||
|
currentEl?.scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "center",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
title="Scroll to current track"
|
||||||
|
>
|
||||||
|
Scroll to current
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1148,12 +1165,14 @@
|
|||||||
<li
|
<li
|
||||||
class={[
|
class={[
|
||||||
"flex items-center gap-2 border-b px-2 py-2 last:border-b-0",
|
"flex items-center gap-2 border-b px-2 py-2 last:border-b-0",
|
||||||
|
item.isCurrent && "bg-primary/10",
|
||||||
// visual affordances
|
// visual affordances
|
||||||
draggableHint(item.track.id),
|
draggableHint(item.track.id),
|
||||||
dropIndicatorClass(item.track.id),
|
dropIndicatorClass(item.track.id),
|
||||||
]
|
]
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
|
data-queue-id={item.track.id}
|
||||||
ondragover={(e) => onDragOver(item.track.id, e)}
|
ondragover={(e) => onDragOver(item.track.id, e)}
|
||||||
ondrop={(e) => onDrop(item.track.id, e)}
|
ondrop={(e) => onDrop(item.track.id, e)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user