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

WIP: global player refactor pt. 1

Browse Source
This commit is contained in:
Yura
2026-02-09 23:19:17 -08:00
parent 9126e34f38
commit aea41df214
20 changed files with 1045 additions and 2740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/lib/components/player/PlayerMobile.svelte Normal file
View File

@@ -0,0 +1,137 @@
<script lang="ts">
import { ChevronUp, Disc, X } from "@lucide/svelte";
import { Button } from "$lib/components/ui/button";
import * as Drawer from "$lib/components/ui/drawer";
import { Slider } from "$lib/components/ui/slider";
import { player } from "$lib/player/store.svelte";
import Controls from "./Controls.svelte";
import { getAudioContext } from "./ctx.svelte";
import Queue from "./Queue.svelte";
import { formatTime } from "./utils";
const audio = getAudioContext();
let open = $state(false);
function onSeek(v: number[]) {
audio.seek(v[0]);
}
</script>
{#if player.currentTrack}
<div
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"
onclick={() => (open = true)}
>
<!-- Mini Player Info -->
<div class="flex items-center gap-3 overflow-hidden flex-1">
<!-- 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 text-left">
<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>
</div>
<!-- Mini Controls -->
<div
class="flex items-center gap-1"
onclick={(e) => e.stopPropagation()}
>
<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>
</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>
<!-- 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>
<!-- Progress -->
<div class="space-y-2">
<Slider
value={[audio.currentTime]}
max={audio.duration || 100}
step={1}
onValueChange={onSeek}
type="multiple"
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>
<!-- 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>
{/if}