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

A lot of changes

Browse Source
This commit is contained in:
Admin
2026-07-17 18:56:23 +02:00
parent 673689278d
commit 72f42369a0
35 changed files with 2127 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/library/+page.svelte
+48 -31
View File
@@ -1,8 +1,9 @@
<script lang="ts">
import { enhance } from '$app/forms';
import Upload from '@lucide/svelte/icons/upload';
import Headphones from '@lucide/svelte/icons/headphones';
import Clock from '@lucide/svelte/icons/clock';
import { player } from '$lib/player/player.svelte';
import Play from '@lucide/svelte/icons/play';
import X from '@lucide/svelte/icons/x';
import { player, queueIdForTrack, toQueueItems } from '$lib/player/player.svelte';
import { HUES, fmtTime } from '$lib/theme/color';
import Cover from '$lib/components/ui/Cover.svelte';
import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
@@ -22,8 +23,8 @@
function togglePlay(index: number) {
const track = items[index];
if (player.current.id === track.id) player.toggle();
else player.playQueue(items, index);
if (player.current.id === queueIdForTrack(track)) player.toggle();
else player.playQueue(toQueueItems(items), index);
}
</script>
@@ -53,50 +54,66 @@
{#if items.length > 0}
<div class="mt-8">
<div
class="grid grid-cols-[1fr_120px_160px] items-center gap-6 border-b border-[var(--mf-border)] px-3 pb-3 text-xs font-semibold uppercase tracking-wide text-[var(--mf-text-3)]"
class="grid grid-cols-[32px_1fr_100px_100px_64px_36px] items-center gap-8 border-b border-white/10 px-3 pb-2 text-xs uppercase tracking-wide text-neutral-500"
>
<span class="text-center">#</span>
<span>Título</span>
<span class="flex items-center justify-end gap-1.5"><Clock class="h-3.5 w-3.5" /> Duración</span>
<span class="flex items-center gap-1.5"><Headphones class="h-3.5 w-3.5" /> Escuchas</span>
<span class="text-center">Subida</span>
<span class="text-center">Escuchas</span>
<span class="text-center">Duración</span>
<span></span>
</div>
<div class="mt-2 flex flex-col">
<div class="mt-1 flex flex-col">
{#each items as track, i (track.id)}
<div
class="group grid animate-enter grid-cols-[1fr_120px_160px] items-center gap-6 rounded-[10px] px-3 py-4 transition duration-100 hover:bg-[var(--mf-surface-hover)]"
style="animation-delay:{i * 35}ms"
class="group grid grid-cols-[32px_1fr_100px_100px_64px_36px] items-center gap-8 rounded-[10px] px-3 py-[9px] transition hover:bg-neutral-900/60"
>
<button
type="button"
onclick={() => togglePlay(i)}
class="flex min-w-0 items-center gap-3.5 text-left active:scale-[0.99]"
aria-label={player.current.id === track.id && player.playing ? 'Pausar' : 'Reproducir'}
class="relative grid h-8 w-8 place-items-center overflow-hidden rounded text-sm text-neutral-500"
>
{#if player.current.id === track.id}
<NowPlaying paused={!player.playing} />
{:else}
<span class="group-hover:hidden">{i + 1}</span>
<Play class="hidden h-3.5 w-3.5 text-white group-hover:block" fill="currentColor" />
{/if}
</button>
<button
type="button"
onclick={() => togglePlay(i)}
class="flex min-w-0 items-center gap-3.5 text-left"
>
<Cover
trackId={track.id}
hue={hueFor(track.id)}
size="small"
alt={track.title}
class="h-[46px] w-[46px] flex-shrink-0 rounded-md"
>
{#if player.current.id === track.id}
<NowPlaying paused={!player.playing} />
{/if}
</Cover>
<div class="min-w-0 flex-1">
<div class="truncate text-[14.5px] font-semibold text-[var(--mf-text)]">
{track.title}
</div>
<div class="truncate text-[12.5px] text-[var(--mf-text-3)]">
{dateFormatter.format(new Date(track.createdAt))}
</div>
</div>
class="h-[42px] w-[42px] flex-shrink-0 rounded-md"
/>
<div class="min-w-0 truncate text-[14.5px] font-semibold text-neutral-100">{track.title}</div>
</button>
<span class="text-right text-[12.5px] tabular-nums text-[var(--mf-text-3)]">
<div class="truncate text-center text-[12.5px] text-neutral-500">
{dateFormatter.format(new Date(track.createdAt))}
</div>
<span class="text-center text-[12.5px] tabular-nums text-neutral-500">
{Number(track.listensCount)}
</span>
<span class="text-center text-[12.5px] tabular-nums text-neutral-500">
{fmtTime(Number(track.duration))}
</span>
<div class="flex items-center gap-1.5 text-[12.5px] tabular-nums text-[var(--mf-text-3)]">
<Headphones class="h-3.5 w-3.5" />
{Number(track.listensCount)}
</div>
<form method="POST" action="?/deleteTrack" use:enhance={() => async ({ update }) => update()}>
<input type="hidden" name="trackId" value={track.id} />
<button
type="submit"
aria-label="Borrar canción"
class="grid h-7 w-7 place-items-center rounded-lg text-neutral-500 opacity-0 transition hover:bg-white/5 hover:text-white group-hover:opacity-100"
>
<X class="h-3.5 w-3.5" />
</button>
</form>
</div>
{/each}
</div>