NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Admin
2026-07-14 04:54:51 +02:00
parent 458c20335e
commit 1f531ea70e
10 changed files with 430 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/player/SeekBar.svelte
+26 -19
View File
@@ -1,26 +1,33 @@
<script lang="ts">
import { player } from '$lib/player/player.svelte';
import { fmtTime } from '$lib/theme/color';
function format(seconds: number) {
if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
const minutes = Math.floor(seconds / 60);
const rest = Math.floor(seconds % 60);
return `${minutes}:${rest.toString().padStart(2, '0')}`;
function seek(event: MouseEvent) {
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
player.seekFraction((event.clientX - rect.left) / rect.width);
}
</script>
<div class="flex w-full items-center gap-2">
<span class="w-10 text-right text-xs tabular-nums text-neutral-500">{format(player.currentTime)}</span>
<input
type="range"
min="0"
max={player.duration || 0}
step="0.1"
value={player.currentTime}
disabled={!player.duration}
oninput={(event) => player.seek(Number(event.currentTarget.value))}
aria-label="Progreso"
class="h-1 w-full cursor-pointer accent-emerald-500"
/>
<span class="w-10 text-xs tabular-nums text-neutral-500">{format(player.duration)}</span>
<div class="flex w-full max-w-[900px] items-center gap-[9px]">
<span class="w-8 text-right text-[11px] tabular-nums text-[var(--mf-text-4)]">
{fmtTime(player.progress)}
</span>
<button
type="button"
onclick={seek}
aria-label="Barra de progreso"
class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-[var(--mf-track)] transition-[height] hover:h-2"
>
<div
class="absolute inset-y-0 left-0 rounded-full bg-[var(--mf-accent)] transition-[width] duration-75 ease-linear group-hover:brightness-110"
style="width:{player.progressPercent}%"
></div>
<span
class="pointer-events-none absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 shadow-[0_1px_4px_rgba(0,0,0,0.5)] transition-[left,opacity] duration-75 ease-linear group-hover:opacity-100"
style="left:{player.progressPercent}%"
></span>
</button>
<span class="w-8 text-[11px] tabular-nums text-[var(--mf-text-4)]">
{fmtTime(player.current.duration)}
</span>
</div>