fix some ui
This commit is contained in:
@@ -11,107 +11,107 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
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}
|
||||
<div class="p-6 space-y-6 shrink-0">
|
||||
<!-- Artwork -->
|
||||
<div
|
||||
class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg border"
|
||||
>
|
||||
<Disc class="h-1/3 w-1/3 text-muted-foreground opacity-50" />
|
||||
<!-- Ideally use real album art if available -->
|
||||
</div>
|
||||
{#if player.currentTrack}
|
||||
<div class="p-6 space-y-6 shrink-0">
|
||||
<!-- Artwork -->
|
||||
<div
|
||||
class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg border"
|
||||
>
|
||||
<Disc class="h-1/3 w-1/3 text-muted-foreground opacity-50" />
|
||||
<!-- Ideally use real album art if available -->
|
||||
</div>
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
{player.currentTrack.artist}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground/80">
|
||||
{player.currentTrack.album ||
|
||||
player.currentTrack.animeName ||
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
<!-- 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"
|
||||
>
|
||||
{player.currentTrack.artist}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground/80">
|
||||
{player.currentTrack.album ||
|
||||
player.currentTrack.animeName ||
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
type="range"
|
||||
bind:value={audio.currentTime}
|
||||
max={audio.duration || 100}
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums px-1"
|
||||
>
|
||||
<span>{formatTime(audio.currentTime)}</span>
|
||||
<span>{formatTime(audio.duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress -->
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
type="range"
|
||||
bind:value={audio.currentTime}
|
||||
max={audio.duration || 100}
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums px-1"
|
||||
>
|
||||
<span>{formatTime(audio.currentTime)}</span>
|
||||
<span>{formatTime(audio.duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="flex justify-center">
|
||||
<Controls />
|
||||
</div>
|
||||
<!-- Controls -->
|
||||
<div class="flex justify-center">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-px bg-border mx-6"></div>
|
||||
<!-- Divider -->
|
||||
<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="absolute inset-0 p-4 pt-0">
|
||||
<div
|
||||
class="h-full overflow-hidden rounded-lg border bg-muted/20"
|
||||
>
|
||||
<Queue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4 p-8 text-center"
|
||||
>
|
||||
<div
|
||||
class="h-16 w-16 rounded-full bg-muted flex items-center justify-center"
|
||||
>
|
||||
<Disc class="h-8 w-8 opacity-50" />
|
||||
</div>
|
||||
<p>No track playing</p>
|
||||
<p class="text-xs max-w-xs opacity-70">
|
||||
Pick a song from the library to start listening.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Queue (Scrollable) -->
|
||||
<div class="flex-1 min-h-0 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"
|
||||
>
|
||||
<Queue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4 p-8 text-center"
|
||||
>
|
||||
<div
|
||||
class="h-16 w-16 rounded-full bg-muted flex items-center justify-center"
|
||||
>
|
||||
<Disc class="h-8 w-8 opacity-50" />
|
||||
</div>
|
||||
<p>No track playing</p>
|
||||
<p class="text-xs max-w-xs opacity-70">
|
||||
Pick a song from the library to start listening.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -12,114 +12,114 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
|
||||
class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
|
||||
>
|
||||
<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
|
||||
<!-- Mini Player Info -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
|
||||
onclick={() => (open = true)}
|
||||
>
|
||||
<!-- Placeholder Art -->
|
||||
<div
|
||||
class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
|
||||
>
|
||||
<Disc class="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
|
||||
<!-- Mini Player Info -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
|
||||
onclick={() => (open = true)}
|
||||
>
|
||||
<!-- Placeholder Art -->
|
||||
<div
|
||||
class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
|
||||
>
|
||||
<Disc class="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<div class="text-sm font-medium truncate leading-tight">
|
||||
{player.currentTrack?.title || "Unknown Title"}
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-muted-foreground truncate leading-tight"
|
||||
>
|
||||
{player.currentTrack?.artist || "Unknown Artist"}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<div class="text-sm font-medium truncate leading-tight">
|
||||
{player.currentTrack?.title || "Unknown Title"}
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-muted-foreground truncate leading-tight"
|
||||
>
|
||||
{player.currentTrack?.artist || "Unknown Artist"}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Mini Controls -->
|
||||
<div class="flex items-center gap-1">
|
||||
<Controls />
|
||||
<!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
|
||||
<!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
|
||||
<!-- Let's just use simplified controls here for now, or just Play/Pause -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mini Controls -->
|
||||
<div class="flex items-center gap-1">
|
||||
<Controls />
|
||||
<!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
|
||||
<!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
|
||||
<!-- Let's just use simplified controls here for now, or just Play/Pause -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar (thin line at top of bar) -->
|
||||
<div class="absolute top-0 left-0 right-0 h-1 bg-muted">
|
||||
<div
|
||||
class="h-full bg-primary transition-all duration-100 ease-linear"
|
||||
style="width: {(audio.currentTime / audio.duration) * 100}%"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Progress Bar (thin line at top of bar) -->
|
||||
<div class="absolute top-0 left-0 right-0 h-1 bg-muted">
|
||||
<div
|
||||
class="h-full bg-primary transition-all duration-100 ease-linear"
|
||||
style="width: {(audio.currentTime / audio.duration) * 100}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Drawer.Root bind:open>
|
||||
<Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
|
||||
<div class="mx-auto w-Full max-w-sm flex-1 flex flex-col p-4 gap-6">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-center pt-2">
|
||||
<div
|
||||
class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
|
||||
></div>
|
||||
</div>
|
||||
<Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
|
||||
<div class="mx-auto w-full max-w-sm flex-1 flex flex-col p-4 gap-6">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-center pt-2">
|
||||
<div
|
||||
class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Expanded Art -->
|
||||
<div
|
||||
class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<Disc class="h-24 w-24 text-muted-foreground" />
|
||||
<!-- If we had art, we'd show it here -->
|
||||
</div>
|
||||
<!-- Expanded Art -->
|
||||
<div
|
||||
class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<Disc class="h-24 w-24 text-muted-foreground" />
|
||||
<!-- If we had art, we'd show it here -->
|
||||
</div>
|
||||
|
||||
<!-- Track Info -->
|
||||
<div class="text-center space-y-1">
|
||||
<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"
|
||||
>
|
||||
{player.currentTrack?.artist}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground/80 mt-1">
|
||||
{player.currentTrack?.album ||
|
||||
player.currentTrack?.animeName}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Track Info -->
|
||||
<div class="text-center space-y-1">
|
||||
<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"
|
||||
>
|
||||
{player.currentTrack?.artist}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground/80 mt-1">
|
||||
{player.currentTrack?.album ||
|
||||
player.currentTrack?.animeName}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
type="range"
|
||||
bind:value={audio.currentTime}
|
||||
max={audio.duration || 100}
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
|
||||
>
|
||||
<span>{formatTime(audio.currentTime)}</span>
|
||||
<span>{formatTime(audio.duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress -->
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
type="range"
|
||||
bind:value={audio.currentTime}
|
||||
max={audio.duration || 100}
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
|
||||
>
|
||||
<span>{formatTime(audio.currentTime)}</span>
|
||||
<span>{formatTime(audio.duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Controls -->
|
||||
<div class="flex justify-center py-4">
|
||||
<Controls />
|
||||
</div>
|
||||
<!-- Main Controls -->
|
||||
<div class="flex justify-center py-4">
|
||||
<Controls />
|
||||
</div>
|
||||
|
||||
<!-- Volume? Or Queue toggle? -->
|
||||
<!-- Queue -->
|
||||
<div class="flex-1 overflow-hidden relative mt-auto">
|
||||
<div class="absolute inset-0">
|
||||
<Queue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
<!-- Volume? Or Queue toggle? -->
|
||||
<!-- Queue -->
|
||||
<div class="flex-1 overflow-hidden relative mt-auto">
|
||||
<div class="absolute inset-0">
|
||||
<Queue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer.Content>
|
||||
</Drawer.Root>
|
||||
|
||||
Reference in New Issue
Block a user