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 8c87d84f80
commit 6cc41d1d6f
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/VolumeControl.svelte
+34 -23
View File
@@ -2,33 +2,44 @@
import { player } from '$lib/player/player.svelte';
</script>
<div class="flex items-center gap-2">
<button
type="button"
onclick={() => player.toggleMute()}
aria-label={player.muted ? 'Activar sonido' : 'Silenciar'}
class="grid h-9 w-9 place-items-center rounded-full text-neutral-300 transition hover:text-white"
>
{#if player.muted || player.volume === 0}
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
<path d="M4 9v6h4l5 5V4L8 9H4z" />
<path d="M16 9l5 6M21 9l-5 6" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
{:else}
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
<path d="M4 9v6h4l5 5V4L8 9H4z" />
<path d="M16 8a5 5 0 0 1 0 8" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
{/if}
</button>
<div class="flex items-center justify-end gap-3.5">
<input
type="range"
min="0"
max="1"
step="0.01"
value={player.muted ? 0 : player.volume}
max="100"
value={player.volume}
oninput={(event) => player.setVolume(Number(event.currentTarget.value))}
aria-label="Volumen"
class="h-1 w-24 cursor-pointer accent-emerald-500"
class="mf-volume"
style="background:linear-gradient(to right, var(--mf-accent) {player.volume}%, var(--mf-track) {player.volume}%)"
/>
</div>
<style>
.mf-volume {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 4px;
border-radius: 100px;
outline: none;
cursor: pointer;
}
.mf-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--mf-text);
cursor: pointer;
}
.mf-volume::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--mf-text);
border: none;
cursor: pointer;
}
</style>