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