feat(frontend): rework audio player and shared UI components

Expand the player store, split player controls (transport, seek, volume, track info), add Cover/PlaylistArt/NowPlaying UI primitives and a cover image proxy route.
This commit is contained in:
2026-07-14 04:54:51 +02:00
parent 458c20335e
commit 1f531ea70e
10 changed files with 430 additions and 166 deletions
@@ -0,0 +1,35 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { gradientForHue } from '$lib/theme/color';
interface Props {
trackId: string | number;
hue: number;
size?: 'small' | 'medium' | 'large';
alt?: string;
class?: string;
children?: Snippet;
}
let { trackId, hue, size = 'medium', alt = '', class: klass = '', children }: Props = $props();
let failed = $state(false);
let loaded = $state(false);
</script>
<div
class="relative overflow-hidden {klass}"
style={loaded && !failed ? undefined : `background:${gradientForHue(hue)}`}
>
{#if !failed}
<img
src="/api/tracks/{trackId}/cover?size={size}"
{alt}
loading="lazy"
onload={() => (loaded = true)}
onerror={() => (failed = true)}
class="h-full w-full object-cover"
/>
{/if}
{@render children?.()}
</div>