diff --git a/web-player/src/lib/components/ui/ChipGroup.svelte b/web-player/src/lib/components/ui/ChipGroup.svelte new file mode 100644 index 0000000..277733b --- /dev/null +++ b/web-player/src/lib/components/ui/ChipGroup.svelte @@ -0,0 +1,57 @@ + + + + +
+ {#each options as option (option.value)} + {@const active = selected.includes(option.value)} + + {/each} +
diff --git a/web-player/src/lib/config.ts b/web-player/src/lib/config.ts index be98665..dfc0b7b 100644 --- a/web-player/src/lib/config.ts +++ b/web-player/src/lib/config.ts @@ -6,5 +6,6 @@ export const ALBUMS_PAGE_SIZE = 50; export const ALBUM_TRACKS_PAGE_SIZE = 200; export const ALBUM_EARLIEST_YEAR = 1877; export const LIBRARY_PICKER_PAGE_SIZE = 50; +export const EXPLORE_ALBUMS_PAGE_SIZE = 18; export const HOME_LATEST_PAGE_SIZE = 12; export const YOUTUBE_FILLER_LIMIT = 27; diff --git a/web-player/src/routes/(app)/explore/+page.server.ts b/web-player/src/routes/(app)/explore/+page.server.ts index 359e411..638123c 100644 --- a/web-player/src/routes/(app)/explore/+page.server.ts +++ b/web-player/src/routes/(app)/explore/+page.server.ts @@ -3,6 +3,7 @@ import { createApiClient, requireUser, unwrapOrError } from '$lib/server/api'; import { fetchYoutubeFiller } from '$lib/server/youtube'; import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions'; import { + EXPLORE_ALBUMS_PAGE_SIZE, EXPLORE_PAGE_SIZE as PAGE_SIZE, SEARCH_MIN_LENGTH, YOUTUBE_FILLER_LIMIT @@ -28,10 +29,17 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => { params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: 50 } } }); - const [tracksRes, searchRes, playlistsRes] = await Promise.all([ + const albumsPromise = query + ? api.GET('/albums', { + params: { query: { title: query, pageNumber: 1, pageSize: EXPLORE_ALBUMS_PAGE_SIZE } } + }) + : Promise.resolve(null); + + const [tracksRes, searchRes, playlistsRes, albumsRes] = await Promise.all([ tracksPromise, searchPromise, - playlistsPromise + playlistsPromise, + albumsPromise ]); const tracks = unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.'); @@ -39,6 +47,7 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => { return { query, tracks, + albums: albumsRes?.data?.items ?? [], ytResults: searchRes?.data ?? null, ytError: Boolean(searchRes?.error), youtubeFiller: query diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte index 7682fb5..8edc5d0 100644 --- a/web-player/src/routes/(app)/explore/+page.svelte +++ b/web-player/src/routes/(app)/explore/+page.svelte @@ -1,6 +1,8 @@