CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

player layout improvements

Browse Source
This commit is contained in:
Yura
2026-02-06 04:47:39 -08:00
parent f4e3c6eb08
commit d0efb3549b
1 changed files with 65 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/lib/components/GlobalPlayer.svelte
View File

@@ -597,9 +597,10 @@
</div> </div>
{#if snap.uiOpen} {#if snap.uiOpen}
<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3"> <div class="h-[65dvh] overflow-hidden border-t">
<div class="mx-auto max-w-4xl space-y-3"> <div class="mx-auto flex h-full max-w-4xl flex-col px-3 py-3">
<div class="flex flex-wrap items-center gap-2"> <!-- Controls stay visible while the queue scrolls -->
<div class="flex flex-wrap items-center gap-2 pb-3">
<button <button
class={[ class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors", "inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
@@ -683,67 +684,72 @@
</label> </label>
</div> </div>
<div class="space-y-1"> <!-- Scroll area: only the queue scrolls -->
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div> <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<div class="space-y-1">
<div class="text-sm font-semibold">
Queue ({snap.queue.length})
</div>
{#if snap.queue.length === 0} {#if snap.queue.length === 0}
<p class="text-sm text-muted-foreground">Queue is empty.</p> <p class="text-sm text-muted-foreground">Queue is empty.</p>
{:else} {:else}
<ul class="overflow-auto rounded border"> <ul class="rounded border">
{#each queueDisplay as item (item.track.id)} {#each queueDisplay as item (item.track.id)}
<li <li
class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0" class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
>
<button
class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
type="button"
onclick={() => {
jumpToTrack(item.track.id);
void syncAndAutoplay();
}}
> >
{#if item.isCurrent} <button
<span class="text-muted-foreground">▶ </span> class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
{/if} type="button"
<div class="min-w-0 flex-1"> onclick={() => {
<div jumpToTrack(item.track.id);
class="flex flex-wrap items-baseline gap-x-2 gap-y-1" void syncAndAutoplay();
> }}
{#if typeNumberLabel(item.track)} >
<span {#if item.isCurrent}
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground" <span class="text-muted-foreground">▶ </span>
> {/if}
{typeNumberLabel(item.track)} <div class="min-w-0 flex-1">
</span> <div
{/if} class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
<span class="truncate text-sm"
>{animeLabel(item.track)}</span
> >
</div> {#if typeNumberLabel(item.track)}
<span
class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
>
{typeNumberLabel(item.track)}
</span>
{/if}
<span class="truncate text-sm"
>{animeLabel(item.track)}</span
>
</div>
<div class="mt-1 text-foreground/80"> <div class="mt-1 text-foreground/80">
{(item.track.title ?? "").trim() || "Unknown title"} {(item.track.title ?? "").trim() || "Unknown title"}
<span class="text-sm text-muted-foreground"> <span class="text-sm text-muted-foreground">
— {(item.track.artist ?? "").trim() || — {(item.track.artist ?? "").trim() ||
"Unknown Artist"} "Unknown Artist"}
</span> </span>
</div>
</div> </div>
</div> </button>
</button>
<button <button
class="inline-flex h-8 w-8 items-center justify-center rounded border" class="inline-flex h-8 w-8 items-center justify-center rounded border"
type="button" type="button"
onclick={() => removeTrack(item.track.id)} onclick={() => removeTrack(item.track.id)}
aria-label="Remove from queue" aria-label="Remove from queue"
title="Remove from queue" title="Remove from queue"
> >
<ListX class="h-4 w-4" /> <ListX class="h-4 w-4" />
</button> </button>
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -753,12 +759,10 @@
<!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. --> <!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
<aside <aside
class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col" class="hidden lg:flex sticky top-12 h-[calc(100dvh-4rem)] overflow-hidden bg-background flex-col"
> >
<div class="flex items-center gap-2 border-b px-3 py-3"> <div class="flex items-center gap-2 border-b px-3 py-3">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="truncate text-sm font-semibold">Player</div>
{#if snap.currentTrack} {#if snap.currentTrack}
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1"> <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
{#if typeNumberLabel(snap.currentTrack)} {#if typeNumberLabel(snap.currentTrack)}