web-player: use playlist totals from the API, cache genres and parallelize explore requests
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user