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 @@