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