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

Web Player Refactor #2

Merged
NotS1mp merged 50 commits from web-player-ref into master 2026-09-23 15:05:12 +00:00
Conversation 0 Commits 50 Files Changed 115
+11 -40
7 changed files with 11 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9064ef687c - Show all commits
web-player/src/lib/components/layout/Sidebar.svelte
+3 -7
View File
@@ -34,10 +34,6 @@
class="hidden shrink-0 flex-col border-r border-hairline bg-bg p-5 theme-transition lg:flex"
style="width:var(--mf-sidebar-w)"
>
<a href="/" class="px-3 pb-3">
<Logo size="sm" />
</a>
<nav class="flex flex-col gap-1">
{#each navLinks as link (link.href)}
{@const active = isActive(link.href)}
@@ -48,7 +44,7 @@
? 'bg-surface-2 text-fg'
: 'text-fg-2 hover:bg-hover hover:text-fg'}"
>
<link.icon class="size-4.5 shrink-0" strokeWidth={1.5} />
<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
<span class="flex-1 truncate">{link.label}</span>
{#if link.count}
<span class="text-xs text-muted tabular-nums">{link.count}</span>
@@ -68,12 +64,12 @@
size="xs"
onclick={() => createPlaylistModal.show()}
>
<Plus class="size-icon-sm" strokeWidth={1.25} />
<Plus class="size-icon-sm text-muted" strokeWidth={1.25} />
</IconButton>
{/if}
</div>
<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-4.5">
<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-icon-md">
{#each playlists as playlist (playlist.id)}
{@const active = page.url.pathname === `/playlists/${playlist.id}`}
<ListRow
web-player/src/lib/components/ui/primitives/Button.svelte
+3 -8
View File
@@ -3,7 +3,7 @@
import LoaderCircle from '@lucide/svelte/icons/loader-circle';
interface Props {
variant?: 'primary' | 'secondary' | 'glass' | 'accent' | 'strong' | 'danger';
variant?: 'primary' | 'secondary' | 'accent' | 'danger';
size?: 'sm' | 'md' | 'lg';
type?: 'button' | 'submit';
href?: string;
@@ -34,15 +34,10 @@
lg: 'px-6 py-3.5 text-sm'
};
const subtle = 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg';
const glass = 'font-normal bg-btn-glass text-fg-2 hover:bg-btn-glass-hover hover:text-fg';
const variants = {
primary: subtle,
secondary: subtle,
glass,
primary: 'bg-cta-strong text-ink hover:brightness-95',
secondary: 'bg-btn text-fg-2 hover:bg-btn-hover hover:text-fg',
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
strong: 'bg-cta-strong text-ink hover:brightness-95',
danger: 'bg-danger text-on-art hover:brightness-110'
};
web-player/src/lib/components/ui/primitives/Logo.svelte
+1 -1
View File
@@ -17,6 +17,6 @@
</script>
<span class="flex items-center gap-3">
<span class="{MARK[size]} bg-[image:var(--mf-logo-grad)]"></span>
<span class="{MARK[size]} bg-(image:--mf-logo-grad)"></span>
<span class={TEXT[size]}>Musify</span>
</span>
web-player/src/routes/(app)/albums/[id]/+page.svelte
-8
View File
@@ -2,10 +2,6 @@
import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
import X from '@lucide/svelte/icons/x';
import Plus from '@lucide/svelte/icons/plus';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import SquarePencil from '@lucide/svelte/icons/square-pen';
import Trash from '@lucide/svelte/icons/trash';
import Page from '$lib/components/ui/layout/Page.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
import Modal from '$lib/components/ui/overlay/Modal.svelte';
@@ -76,20 +72,16 @@
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
{#if isOwner}
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
<SquarePencil class="size-4" strokeWidth={1.5} />
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
<Trash class="size-4" strokeWidth={1.5} />
Eliminar
</Button>
{/if}
web-player/src/routes/(app)/mixes/[id]/+page.svelte
-4
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import Shuffle from '@lucide/svelte/icons/shuffle';
import {
player,
@@ -75,10 +73,8 @@
{#snippet actions()}
<Button size="sm" onclick={() => playAllOrToggle(queue)} disabled={queue.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
web-player/src/routes/(app)/playlists/[id]/+page.svelte
-8
View File
@@ -1,10 +1,6 @@
<script lang="ts">
import ListMusic from '@lucide/svelte/icons/list-music';
import X from '@lucide/svelte/icons/x';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import SquarePencil from '@lucide/svelte/icons/square-pen';
import Trash from '@lucide/svelte/icons/trash';
import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
import Page from '$lib/components/ui/layout/Page.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
@@ -66,19 +62,15 @@
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
<SquarePencil class="size-4" strokeWidth={1.5} />
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
<Trash class="size-4" strokeWidth={1.5} />
Eliminar
</Button>
{/snippet}
web-player/src/routes/+page.svelte
+4 -4
View File
@@ -151,12 +151,12 @@
</p>
<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
{#if spotlight}
<Button variant="strong" onclick={playSpotlight}>
<Button variant="primary" onclick={playSpotlight}>
{heroPlaying ? 'Pausar' : 'Reanudar'}
{spotlight.name}
</Button>
{/if}
<Button href="/explore" variant="glass">Explorar música</Button>
<Button href="/explore" variant="secondary">Explorar música</Button>
</div>
</div>
@@ -242,7 +242,7 @@
</p>
<div class="mt-5 flex gap-2.5">
<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
</div>
</div>
<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
@@ -314,7 +314,7 @@
trackId={track.id}
>
{#snippet leading()}
<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
<span class="flex h-3.5 w-icon-md shrink-0 items-end justify-center">
{#if isCurrent}
<EqBars size={13} paused={!player.playing} />
{:else}