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

web-player: extract menu, paged list and play-all components from pages

Browse Source
This commit is contained in:
Admin
2026-09-24 11:51:14 +02:00
parent 8cb9386447
commit 1cad36b929
14 changed files with 306 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/(app)/albums/[id]/+page.svelte
+2 -14
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { albumCover } from '$lib/utils/hrefs';
import { player } from '$lib/player/player.svelte';
import { isQueueCurrent, playAllOrToggle } from '$lib/player/actions';
import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
import X from '@lucide/svelte/icons/x';
import Plus from '@lucide/svelte/icons/plus';
import Page from '$lib/components/ui/layout/Page.svelte';
@@ -27,12 +27,6 @@
let editing = $state(false);
let confirmingDelete = $state(false);
const isCurrentQueue = $derived(isQueueCurrent(tracks));
function playAll() {
playAllOrToggle(tracks);
}
function playTrackFrom(index: number) {
player.playOrToggle(tracks, index);
}
@@ -69,13 +63,7 @@
/>
{/snippet}
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
Pausar
{:else}
Reproducir
{/if}
</Button>
<PlayAllButton items={tracks} />
{#if isOwner}
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
web-player/src/routes/(app)/explore/+page.svelte
+35 -107
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import Music from '@lucide/svelte/icons/music';
import { player } from '$lib/player/player.svelte';
import { fetchAlbumTracks } from '$lib/data/albums';
import type { Track } from '$lib/types';
import type { Paged, Track } from '$lib/types';
import { fmtTime, fmtPlays, plural } from '$lib/utils/format';
import Page from '$lib/components/ui/layout/Page.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
@@ -19,12 +18,10 @@
import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
import { EXPLORE_PAGE_SIZE } from '$lib/config';
import { genreHref, playlistCover } from '$lib/utils/hrefs';
import { createTrackMenu } from '$lib/state/menus.svelte';
import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
import { contextMenuPosition } from '$lib/utils/menuPosition';
import ListPlus from '@lucide/svelte/icons/list-plus';
import ListEnd from '@lucide/svelte/icons/list-end';
import { appendUnique } from '$lib/utils/collections';
import { createMenu } from '$lib/state/menu.svelte';
import { createPagedList } from '$lib/state/pagedList.svelte';
import TrackContextMenu from '$lib/components/ui/overlay/TrackContextMenu.svelte';
import AlbumContextMenu from '$lib/components/ui/overlay/AlbumContextMenu.svelte';
import { genreInfo, genreTiles } from '$lib/data/genres';
import {
type SearchFilter,
@@ -37,8 +34,6 @@
findTopResult
} from '$lib/data/search';
type AlbumMenuState = { x: number; y: number; openLeft: boolean; albumId: string };
const TOP_RESULT_KIND_LABEL: Record<TopResult['kind'], string> = {
track: 'Canción',
album: 'Álbum',
@@ -48,25 +43,33 @@
let { data, form } = $props();
const trackMenu = createTrackMenu();
let albumMenu = $state<AlbumMenuState | null>(null);
const trackMenu = createMenu<Track>();
const albumMenu = createMenu<string>();
let sfilter = $state<SearchFilter>('all');
let localItems = $state<Track[]>([]);
let localPage = $state(1);
let hasMore = $state(false);
let loadingMore = $state(false);
const tracksList = createPagedList<Track>(
async (pageNumber) => {
const params = new URLSearchParams({
pageNumber: String(pageNumber),
pageSize: String(EXPLORE_PAGE_SIZE)
});
if (data.query) params.set('name', data.query);
if (data.genre) params.set('genre', data.genre);
const res = await fetch(`/api/tracks?${params}`);
if (!res.ok) throw new Error(String(res.status));
return (await res.json()) as Paged<Track>;
},
(track) => track.id
);
$effect(() => {
trackMenu.close();
albumMenu = null;
albumMenu.close();
sfilter = data.genre ? 'tracks' : 'all';
localItems = data.tracks.items;
localPage = data.tracks.pageNumber;
hasMore = data.tracks.hasNextPage;
tracksList.reset(data.tracks);
});
const items = $derived(localItems);
const items = $derived(tracksList.items);
const tiles = $derived(genreTiles(data.genres));
const activeGenre = $derived(data.genre ? genreInfo(data.genre) : null);
@@ -127,52 +130,6 @@
if (topResult.kind === 'playlist') return `/playlists/${topResult.playlist.id}`;
return `/user/${topResult.user.id}`;
});
function togglePlay(index: number) {
player.playOrToggle(items, index);
}
function openAlbumMenu(event: MouseEvent, albumId: string) {
event.preventDefault();
albumMenu = { ...contextMenuPosition(event), albumId };
}
async function albumPlayNext() {
if (!albumMenu) return;
const { albumId } = albumMenu;
albumMenu = null;
player.playNext(await fetchAlbumTracks(albumId));
}
async function albumAddToQueue() {
if (!albumMenu) return;
const { albumId } = albumMenu;
albumMenu = null;
player.appendToQueue(await fetchAlbumTracks(albumId));
}
async function loadMore() {
if (loadingMore) return;
loadingMore = true;
try {
const params = new URLSearchParams({
pageNumber: String(localPage + 1),
pageSize: String(EXPLORE_PAGE_SIZE)
});
if (data.query) params.set('name', data.query);
if (data.genre) params.set('genre', data.genre);
const res = await fetch(`/api/tracks?${params}`);
if (!res.ok) throw new Error(String(res.status));
const next = (await res.json()) as typeof data.tracks;
localItems = appendUnique(localItems, next.items, (track) => track.id);
localPage = next.pageNumber;
hasMore = next.hasNextPage;
} catch {
hasMore = false;
} finally {
loadingMore = false;
}
}
</script>
<svelte:head>
@@ -334,7 +291,7 @@
active={player.currentId === track.id}
size="lg"
trackId={track.id}
onclick={() => togglePlay(i)}
onclick={() => player.playOrToggle(items, i)}
oncontextmenu={(e) => trackMenu.open(e, track)}
>
{#snippet overlay()}
@@ -352,8 +309,13 @@
{/each}
</ul>
{#if sfilter === 'tracks' && hasMore}
<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
{#if sfilter === 'tracks' && tracksList.hasMore}
<InfiniteScroll
onLoadMore={() => tracksList.loadMore()}
hasMore={tracksList.hasMore}
loading={tracksList.loading}
error={tracksList.error}
/>
{/if}
{:else}
<EmptyState
@@ -377,7 +339,7 @@
href="/albums/{album.id}"
size="lg"
trackIds={album.coverTrackIds}
oncontextmenu={(e) => openAlbumMenu(e, album.id)}
oncontextmenu={(e) => albumMenu.open(e, album.id)}
>
{#snippet trailing()}
<span class="hidden shrink-0 text-xs text-fg-2 tabular-nums sm:block">
@@ -427,39 +389,5 @@
{/if}
</Page>
{#if trackMenu.state}
<ContextMenu
x={trackMenu.state.x}
y={trackMenu.state.y}
openLeft={trackMenu.state.openLeft}
onClose={() => trackMenu.close()}
items={[
{ icon: ListPlus, label: 'Reproducir a continuación', onclick: () => trackMenu.playNext() }
]}
playlistAction={{
action: '?/addTrack',
fields: { trackId: trackMenu.state.track.id },
label: 'Añadir a una playlist'
}}
playlists={data.userPlaylists}
/>
{/if}
{#if albumMenu}
<ContextMenu
x={albumMenu.x}
y={albumMenu.y}
openLeft={albumMenu.openLeft}
onClose={() => (albumMenu = null)}
items={[
{ icon: ListPlus, label: 'Reproducir a continuación', onclick: albumPlayNext },
{ icon: ListEnd, label: 'Añadir a la cola', onclick: albumAddToQueue }
]}
playlistAction={{
action: '?/addAlbumToPlaylist',
fields: { albumId: albumMenu.albumId },
label: 'Añadir álbum a una playlist'
}}
playlists={data.userPlaylists}
/>
{/if}
<TrackContextMenu menu={trackMenu} playlists={data.userPlaylists} />
<AlbumContextMenu menu={albumMenu} playlists={data.userPlaylists} />
web-player/src/routes/(app)/liked/+page.svelte
+2 -9
View File
@@ -2,7 +2,7 @@
import Heart from '@lucide/svelte/icons/heart';
import X from '@lucide/svelte/icons/x';
import { player } from '$lib/player/player.svelte';
import { isQueueCurrent, playAllOrToggle } from '$lib/player/actions';
import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
import { liked } from '$lib/player/liked.svelte';
import { plural } from '$lib/utils/format';
import Page from '$lib/components/ui/layout/Page.svelte';
@@ -13,15 +13,10 @@
const tracks = $derived(liked.list);
const listTracks = $derived(tracks.map((track) => ({ ...track, date: track.likedAt })));
const isCurrentQueue = $derived(isQueueCurrent(tracks));
function playFrom(index: number) {
player.playOrToggle(tracks, index);
}
function playAll() {
playAllOrToggle(tracks);
}
</script>
<svelte:head>
@@ -44,9 +39,7 @@
</div>
{/snippet}
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{isCurrentQueue && player.playing ? 'Pausar' : 'Reproducir'}
</Button>
<PlayAllButton items={tracks} />
{/snippet}
</PageHeader>
web-player/src/routes/(app)/mixes/[id]/+page.svelte
+9 -31
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import Shuffle from '@lucide/svelte/icons/shuffle';
import { player } from '$lib/player/player.svelte';
import { isQueueCurrent, playAllOrToggle, playShuffled } from '$lib/player/actions';
import { playShuffled } from '$lib/player/actions';
import { fmtTime, plural } from '$lib/utils/format';
import Page from '$lib/components/ui/layout/Page.svelte';
import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
@@ -10,9 +10,10 @@
import Artwork from '$lib/components/ui/media/Artwork.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
import TrackList from '$lib/components/ui/media/TrackList.svelte';
import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
import ListPlus from '@lucide/svelte/icons/list-plus';
import { createTrackMenu } from '$lib/state/menus.svelte';
import TrackContextMenu from '$lib/components/ui/overlay/TrackContextMenu.svelte';
import { createMenu } from '$lib/state/menu.svelte';
import type { Track } from '$lib/types';
import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
let { data, form } = $props();
@@ -20,9 +21,8 @@
const tracks = $derived(mix.tracks);
const totalSeconds = $derived(tracks.reduce((total, track) => total + track.duration, 0));
const isCurrentQueue = $derived(isQueueCurrent(tracks));
const trackMenu = createTrackMenu();
const trackMenu = createMenu<Track>();
function playFrom(index: number) {
player.playOrToggle(tracks, index);
@@ -52,13 +52,7 @@
/>
{/snippet}
{#snippet actions()}
<Button size="sm" onclick={() => playAllOrToggle(tracks)} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
Pausar
{:else}
Reproducir
{/if}
</Button>
<PlayAllButton items={tracks} />
<Button
variant="secondary"
size="sm"
@@ -79,24 +73,8 @@
{tracks}
columns={['plays']}
onPlay={playFrom}
oncontextmenu={(e, _track, i) => trackMenu.open(e, tracks[i])}
oncontextmenu={(e, track) => trackMenu.open(e, track)}
/>
</Page>
{#if trackMenu.state}
<ContextMenu
x={trackMenu.state.x}
y={trackMenu.state.y}
openLeft={trackMenu.state.openLeft}
onClose={() => trackMenu.close()}
items={[
{ icon: ListPlus, label: 'Reproducir a continuación', onclick: () => trackMenu.playNext() }
]}
playlistAction={{
action: '?/addTrack',
fields: { trackId: trackMenu.state.track.id },
label: 'Añadir a una playlist'
}}
playlists={data.userPlaylists}
/>
{/if}
<TrackContextMenu menu={trackMenu} playlists={data.userPlaylists} />
web-player/src/routes/(app)/playlists/[id]/+page.svelte
+2 -14
View File
@@ -3,7 +3,7 @@
import ListMusic from '@lucide/svelte/icons/list-music';
import X from '@lucide/svelte/icons/x';
import { player } from '$lib/player/player.svelte';
import { isQueueCurrent, playAllOrToggle } from '$lib/player/actions';
import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
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';
@@ -25,12 +25,6 @@
let editing = $state(false);
let confirmingDelete = $state(false);
const isCurrentQueue = $derived(isQueueCurrent(tracks));
function playAll() {
playAllOrToggle(tracks);
}
function playFrom(index: number) {
player.playOrToggle(tracks, index);
}
@@ -66,13 +60,7 @@
/>
{/snippet}
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
Pausar
{:else}
Reproducir
{/if}
</Button>
<PlayAllButton items={tracks} />
{#if isOwner}
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>Editar</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
+20 -30
View File
@@ -6,44 +6,29 @@
import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
import UserRow from '$lib/components/ui/media/UserRow.svelte';
import { appendUnique } from '$lib/utils/collections';
import { createPagedList } from '$lib/state/pagedList.svelte';
import { plural } from '$lib/utils/format';
let { data } = $props();
type ListUser = NonNullable<typeof data.users>['items'][number];
let items = $state<ListUser[]>([]);
let page = $state(1);
let hasMore = $state(false);
let loadingMore = $state(false);
const list = createPagedList<ListUser>(
async (pageNumber) => {
const res = await fetch(
`/api/users/${data.profile.id}/${data.list}?pageNumber=${pageNumber}`
);
if (!res.ok) throw new Error(String(res.status));
return (await res.json()) as NonNullable<typeof data.users>;
},
(user) => user.id
);
$effect(() => {
items = data.users?.items ?? [];
page = data.users?.pageNumber ?? 1;
hasMore = data.users?.hasNextPage ?? false;
});
$effect(() => list.reset(data.users));
const isFollowers = $derived(data.list === 'followers');
const title = $derived(isFollowers ? 'Seguidores' : 'Siguiendo');
const total = $derived(data.users?.totalItemCount ?? 0);
async function loadMore() {
if (loadingMore) return;
loadingMore = true;
try {
const res = await fetch(`/api/users/${data.profile.id}/${data.list}?pageNumber=${page + 1}`);
if (!res.ok) throw new Error(String(res.status));
const next = (await res.json()) as NonNullable<typeof data.users>;
items = appendUnique(items, next.items, (u) => u.id);
page = next.pageNumber;
hasMore = next.hasNextPage;
} catch {
hasMore = false;
} finally {
loadingMore = false;
}
}
</script>
<svelte:head>
@@ -67,7 +52,7 @@
title="Seguidores privados"
description="Solo puedes ver los seguidores de {data.profile.name} si os seguís mutuamente."
/>
{:else if items.length === 0}
{:else if list.items.length === 0}
<EmptyState
icon={Users}
title={isFollowers ? 'Sin seguidores' : 'No sigue a nadie'}
@@ -77,12 +62,17 @@
/>
{:else}
<ul class="flex flex-col gap-1">
{#each items as user (user.id)}
{#each list.items as user (user.id)}
<li>
<UserRow {user} />
</li>
{/each}
</ul>
<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
<InfiniteScroll
onLoadMore={() => list.loadMore()}
hasMore={list.hasMore}
loading={list.loading}
error={list.error}
/>
{/if}
</Page>