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

WIP: global player pt. 3 monstrosity

Browse Source
This commit is contained in:
Yura
2026-02-09 23:55:19 -08:00
parent f9fe6a2d11
commit a4cf9356a8
2 changed files with 117 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/player/PlayerMobile.svelte
View File

@@ -17,10 +17,9 @@
} }
</script> </script>
{#if player.currentTrack} <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
@@ -37,12 +36,12 @@
<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>
@@ -63,9 +62,9 @@
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 -->
@@ -86,16 +85,16 @@
<!-- 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>
@@ -131,5 +130,4 @@
</div> </div>
</div> </div>
</Drawer.Content> </Drawer.Content>
</Drawer.Root> </Drawer.Root>
{/if}

15
src/lib/components/player/PlayerRoot.svelte
View File

@@ -75,8 +75,19 @@
// ... existing effect for playback ... // ... existing effect for playback ...
$effect(() => { $effect(() => {
const track = player.currentTrack; const track = player.currentTrack;
if (track && audioEl) { if (audioEl) {
// ... if (track) {
const newSrc = track.src;
if (audioEl.src !== newSrc) {
audioEl.src = newSrc;
audioEl.play().catch((e) => {
console.warn("Autoplay blocked or failed", e);
});
}
} else {
audioEl.removeAttribute("src");
}
// Update MediaSession playback state // Update MediaSession playback state
if ("mediaSession" in navigator) { if ("mediaSession" in navigator) {
navigator.mediaSession.playbackState = audioEl.paused navigator.mediaSession.playbackState = audioEl.paused