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

a few more layout optimizations

Browse Source
This commit is contained in:
Yura
2026-02-10 04:13:48 -08:00
parent fc0f04f29c
commit e0d6e5bc32
1 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/components/player/PlayerDesktop.svelte
View File

@@ -14,21 +14,17 @@
class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full"
>
{#if player.currentTrack}
<div class="p-6 space-y-6 shrink-0">
<div class="p-6 space-y-4 shrink-0">
<!-- Track Info -->
<div class="space-y-1.5 text-center">
<h2 class="text-xl font-bold leading-tight line-clamp-2">
{player.currentTrack.title}
</h2>
<p
class="text-muted-foreground font-medium text-lg line-clamp-1"
>
<p class="text-muted-foreground font-medium text-lg line-clamp-1">
{player.currentTrack.artist}
</p>
<p class="text-xs text-muted-foreground/80">
{player.currentTrack.album ||
player.currentTrack.animeName ||
""}
{player.currentTrack.album || player.currentTrack.animeName || ""}
</p>
</div>
@@ -49,32 +45,31 @@
</div>
<!-- Controls -->
<div class="flex justify-center">
<div class="flex justify-center gap-4 divide-x divide-accent">
<Controls />
</div>
<!-- Volume -->
<div class="flex items-center gap-3 px-4">
<button
onclick={() => player.toggleMute()}
class="text-muted-foreground hover:text-foreground transition-colors"
title={player.isMuted ? "Unmute" : "Mute"}
>
{#if player.isMuted || player.volume === 0}
<VolumeX class="h-4 w-4" />
{:else if player.volume < 0.5}
<Volume1 class="h-4 w-4" />
{:else}
<Volume2 class="h-4 w-4" />
{/if}
</button>
<input
type="range"
bind:value={player.volume}
max={1}
step={0.05}
class="flex-1"
/>
<!-- Volume -->
<div class="flex items-center gap-3">
<button
onclick={() => player.toggleMute()}
class="text-muted-foreground hover:text-foreground transition-colors"
title={player.isMuted ? "Unmute" : "Mute"}
>
{#if player.isMuted || player.volume === 0}
<VolumeX class="h-4 w-4" />
{:else if player.volume < 0.5}
<Volume1 class="h-4 w-4" />
{:else}
<Volume2 class="h-4 w-4" />
{/if}
</button>
<input
type="range"
bind:value={player.volume}
max={1}
step={0.05}
class="flex-1"
/>
</div>
</div>
</div>
@@ -82,11 +77,9 @@
<div class="h-px bg-border mx-6"></div>
<!-- Queue (Scrollable) -->
<div class="flex-1 min-h-0 overflow-hidden relative p-4">
<div class="flex-1 overflow-hidden relative p-4">
<div class="absolute inset-0 p-4 pt-0">
<div
class="h-full overflow-hidden rounded-lg border bg-muted/20"
>
<div class="h-full overflow-hidden rounded-lg border bg-muted/20">
<Queue />
</div>
</div>