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

Changes

Browse Source
This commit is contained in:
Admin
2026-07-18 23:29:57 +02:00
parent 4fed9bd059
commit 2dc544b2c0
109 changed files with 5134 additions and 2163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/player/PlayerBar.svelte
+2 -1
View File
@@ -6,7 +6,8 @@
</script>
<div
class="animate-enter fixed bottom-0 left-[264px] right-0 z-50 h-[92px] border-t border-[var(--mf-border)] bg-[var(--mf-bg)]"
class="animate-enter fixed bottom-0 right-0 z-50 h-[92px] border-t border-line bg-bg"
style="left:var(--mf-sidebar-w)"
>
<div
class="grid h-full items-center gap-5 px-8"
frontend/src/lib/components/player/SeekBar.svelte
+5 -5
View File
@@ -8,18 +8,18 @@
}
</script>
<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)]">
<div class="flex w-full max-w-172 items-center gap-3">
<span class="text-right text-xs tabular-nums text-muted">
{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"
class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
>
<div
class="absolute inset-y-0 left-0 rounded-full bg-[var(--mf-accent)] group-hover:brightness-110"
class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"
style="width:{player.progressPercent}%"
></div>
<span
@@ -27,7 +27,7 @@
style="left:{player.progressPercent}%"
></span>
</button>
<span class="w-8 text-[11px] tabular-nums text-[var(--mf-text-4)]">
<span class="text-xs tabular-nums text-(--mf-text-4)">
{fmtTime(player.current.duration)}
</span>
</div>
frontend/src/lib/components/player/TrackInfo.svelte
+9 -5
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { player } from '$lib/player/player.svelte';
import Cover from '$lib/components/ui/Cover.svelte';
import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
</script>
<div class="flex min-w-0 items-center gap-3">
@@ -11,18 +12,21 @@
hue={player.current.hue}
size="small"
alt={player.current.title}
class="h-[52px] w-[52px] flex-shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
class="h-13 w-13 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
/>
{:else}
<div
class="h-[52px] w-[52px] flex-shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
class="h-13 w-13 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
style="background:{player.artGradient}"
></div>
{/if}
<div class="min-w-0">
<div class="truncate text-[13.5px] font-semibold text-[var(--mf-text)]">
{player.current.title}
<div class="flex min-w-0 items-center gap-1.5">
{#if player.current.explicit}
<ExplicitBadge />
{/if}
<span class="truncate text-fg">{player.current.title}</span>
</div>
<div class="truncate text-xs text-[var(--mf-text-3)]">{player.current.artist || '—'}</div>
<div class="truncate text-sm text-muted">{player.current.artist || '—'}</div>
</div>
</div>
frontend/src/lib/components/player/TransportControls.svelte
+3 -3
View File
@@ -7,7 +7,7 @@
type="button"
onclick={() => player.previous()}
aria-label="Anterior"
class="flex text-[var(--mf-text)] opacity-70 transition hover:opacity-100 active:scale-90"
class="flex text-fg opacity-70 transition hover:opacity-100 active:scale-90"
>
<svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor">
<rect x="0" y="0" width="2.5" height="14" rx="1" />
@@ -19,7 +19,7 @@
type="button"
onclick={() => player.toggle()}
aria-label={player.playing ? 'Pausar' : 'Reproducir'}
class="grid h-[36px] w-[36px] place-items-center rounded-full bg-[var(--mf-text)] text-[var(--mf-bg)] shadow-lg transition duration-100 active:scale-95"
class="grid h-[36px] w-[36px] place-items-center rounded-full bg-fg text-bg shadow-lg transition duration-100 active:scale-95"
>
{#if player.playing}
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
@@ -37,7 +37,7 @@
type="button"
onclick={() => player.next()}
aria-label="Siguiente"
class="flex text-[var(--mf-text)] opacity-70 transition hover:opacity-100 active:scale-90"
class="flex text-fg opacity-70 transition hover:opacity-100 active:scale-90"
>
<svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor">
<path d="M1 0 11 7 1 14z" />
frontend/src/lib/components/player/VolumeControl.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
oninput={handleVolumeChange}
aria-label="Volumen"
class="mf-volume"
style="background:linear-gradient(to right, var(--mf-accent) {player.volume}%, var(--mf-track) {player.volume}%)"
style="background:linear-gradient(to right, var(--mf-accent-60) {player.volume}%, var(--mf-track) {player.volume}%)"
/>
</div>