web-player: use playlist totals from the API, cache genres and parallelize explore requests

This commit is contained in:
2026-09-24 05:21:29 +02:00
parent b011ccdd5b
commit e89463fb83
10 changed files with 61 additions and 84 deletions
@@ -1,5 +1,6 @@
import type { PageServerLoad, Actions } from './$types';
import { apiFor, unwrapOrError } from '$lib/server/api';
import { getGenres } from '$lib/server/genres';
import { toAlbum, toPage, toTrack } from '$lib/server/mappers';
import { addAlbumToPlaylistAction, addTrackAction } from '$lib/server/playlistActions';
import { EXPLORE_ALBUMS_PAGE_SIZE, EXPLORE_PAGE_SIZE, EXPLORE_USERS_LIMIT } from '$lib/config';
@@ -12,20 +13,17 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
const user = locals.user;
const api = apiFor({ fetch, locals });
const genresRes = await api.GET('/genres');
const genres = genresRes.data ?? [];
const genre = genres.find((item) => item.genre === genreParam)?.genre ?? null;
const tracksPromise = api.GET('/tracks', {
params: {
query: {
name: query || undefined,
genre: genre ?? undefined,
pageNumber: page,
pageSize: EXPLORE_PAGE_SIZE
const tracksFor = (genre: string | null) =>
api.GET('/tracks', {
params: {
query: {
name: query || undefined,
genre: genre ?? undefined,
pageNumber: page,
pageSize: EXPLORE_PAGE_SIZE
}
}
}
});
});
const albumsPromise = query
? api.GET('/albums', {
@@ -39,11 +37,14 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
})
: Promise.resolve(null);
const [tracksRes, albumsRes, usersRes] = await Promise.all([
tracksPromise,
const [genres, firstTracksRes, albumsRes, usersRes] = await Promise.all([
getGenres(api),
tracksFor(genreParam),
albumsPromise,
usersPromise
]);
const genre = genres.find((item) => item.genre === genreParam)?.genre ?? null;
const tracksRes = genre === genreParam ? firstTracksRes : await tracksFor(genre);
const tracks = toPage(unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.'), (item) =>
toTrack(item.track)
@@ -1,8 +1,8 @@
import type { PageServerLoad, Actions } from './$types';
import { fail, redirect } from '@sveltejs/kit';
import { apiFor, authedAction, requireUser, unwrapOrError } from '$lib/server/api';
import { PLAYLISTS_PAGE_SIZE, PLAYLIST_SUMMARY_TRACKS_PAGE_SIZE } from '$lib/config';
import { toPlaylistSummary, toTrack } from '$lib/server/mappers';
import { PLAYLISTS_PAGE_SIZE } from '$lib/config';
import { toPlaylist } from '$lib/server/mappers';
import { parsePlaylistForm } from '$lib/server/forms/playlistForm';
import { uploadOptionalCover } from '$lib/server/upload';
@@ -13,32 +13,17 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: PLAYLISTS_PAGE_SIZE } }
});
const data = unwrapOrError(result, 'No se pudieron cargar tus playlists.');
const tracksByPlaylist = await Promise.all(
data.items.map((playlist) =>
api
.GET('/playlists/{playlistId}/tracks', {
params: {
path: { playlistId: playlist.id },
query: { pageNumber: 1, pageSize: PLAYLIST_SUMMARY_TRACKS_PAGE_SIZE }
}
})
.then((res) => (res.data?.items ?? []).map(toTrack))
)
);
const items = data.items.map((playlist, i) =>
toPlaylistSummary(playlist, tracksByPlaylist[i].length)
const playlists = unwrapOrError(result, 'No se pudieron cargar tus playlists.').items.map(
toPlaylist
);
const totals = {
playlistCount: items.length,
trackCount: items.reduce((sum, playlist) => sum + playlist.trackCount, 0),
durationSeconds: tracksByPlaylist.flat().reduce((sum, track) => sum + track.duration, 0)
playlistCount: playlists.length,
trackCount: playlists.reduce((sum, playlist) => sum + playlist.trackCount, 0),
durationSeconds: playlists.reduce((sum, playlist) => sum + playlist.durationSeconds, 0)
};
return { playlists: items, totals };
return { playlists, totals };
};
export const actions: Actions = {
@@ -1,7 +1,7 @@
import type { PageServerLoad, Actions } from './$types';
import { apiFor, optionalUser, unwrapOrError } from '$lib/server/api';
import { toPlaylistSummary } from '$lib/server/mappers';
import { COUNT_ONLY_PAGE_SIZE, PROFILE_PLAYLISTS_PAGE_SIZE } from '$lib/config';
import { toPlaylist } from '$lib/server/mappers';
import { PROFILE_PLAYLISTS_PAGE_SIZE } from '$lib/config';
import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
export const load: PageServerLoad = async ({ params, locals, url, fetch, parent }) => {
@@ -20,24 +20,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch, parent
]);
const profile = unwrapOrError(profileRes, 'Usuario no encontrado.', 404);
const playlistItems = playlistsRes.data?.items ?? [];
const tracksByPlaylist = await Promise.all(
playlistItems.map((playlist) =>
api
.GET('/playlists/{playlistId}/tracks', {
params: {
path: { playlistId: playlist.id },
query: { pageNumber: 1, pageSize: COUNT_ONLY_PAGE_SIZE }
}
})
.then((res) => Number(res.data?.totalItemCount ?? 0))
)
);
const playlists = playlistItems.map((playlist, i) =>
toPlaylistSummary(playlist, tracksByPlaylist[i])
);
const playlists = (playlistsRes.data?.items ?? []).map(toPlaylist);
const isOwnProfile = viewer !== null && viewer.sub === params.id;