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