perf(web-player): take the cover track ids from the list response

web-player/src/lib/api/schema.d.ts

@@ -581,6 +581,7 @@ export interface components {
             createdAt: string;
             /** Format: date-time */
             updatedAt: string;
+            coverTrackIds: string[];
         };
         CreateAlbumRequest: {
             title: string;
@@ -708,6 +709,7 @@ export interface components {
             createdAt: string;
             /** Format: date-time */
             updatedAt: string;
+            coverTrackIds: string[];
         };
         PlayListPictureUploadResponse: {
             /** Format: uuid */

web-player/src/lib/server/api.ts

@@ -52,33 +52,3 @@ export function unwrapOrFail(
 ): ActionFailure<{ message: string }> | undefined {
 	return result.error ? fail(502, { message }) : undefined;
 }
-
-export async function albumCoverTrackIds(
-	api: ReturnType<typeof createApiClient>,
-	albumIds: string[]
-): Promise<Record<string, string[]>> {
-	const covers = await Promise.all(
-		albumIds.map(async (albumId) => {
-			const { data: tracks } = await api.GET('/albums/{albumId}/tracks', {
-				params: { path: { albumId }, query: { pageNumber: 1, pageSize: 4 } }
-			});
-			return [albumId, tracks?.items.map((t) => t.id) ?? []] as const;
-		})
-	);
-	return Object.fromEntries(covers);
-}
-
-export async function playlistCoverTrackIds(
-	api: ReturnType<typeof createApiClient>,
-	playlistIds: string[]
-): Promise<Record<string, string[]>> {
-	const covers = await Promise.all(
-		playlistIds.map(async (playlistId) => {
-			const { data: tracks } = await api.GET('/playlists/{playlistId}/tracks', {
-				params: { path: { playlistId }, query: { pageNumber: 1, pageSize: 4 } }
-			});
-			return [playlistId, tracks?.items.map((t) => t.id) ?? []] as const;
-		})
-	);
-	return Object.fromEntries(covers);
-}

web-player/src/routes/(app)/albums/+page.server.ts

@@ -1,7 +1,6 @@
 import type { PageServerLoad, Actions } from './$types';
 import { fail, redirect } from '@sveltejs/kit';
 import {
-	albumCoverTrackIds,
 	createApiClient,
 	requireAccessTokenAction,
 	requireUser,
@@ -19,12 +18,8 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 	});
 
 	const albums = unwrapOrError(result, 'No se pudieron cargar tus álbumes.');
-	const trackIds = await albumCoverTrackIds(
-		api,
-		albums.items.map((album) => album.id)
-	);
 
-	return { albums, trackIds };
+	return { albums };
 };
 
 export const actions: Actions = {

web-player/src/routes/(app)/albums/+page.svelte

@@ -13,7 +13,6 @@
 	let { data, form } = $props();
 
 	const items = $derived(data.albums.items);
-	const trackIds = $derived(data.trackIds);
 
 	let creating = $state(false);
 </script>
@@ -43,7 +42,7 @@
 					title={album.title}
 					releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
 					trackCount={Number(album.trackCount)}
-					trackIds={trackIds[album.id] ?? []}
+					trackIds={album.coverTrackIds}
 					index={i}
 				/>
 			{/each}

web-player/src/routes/(app)/playlists/+page.server.ts

@@ -2,7 +2,6 @@ import type { PageServerLoad, Actions } from './$types';
 import { fail, redirect } from '@sveltejs/kit';
 import {
 	createApiClient,
-	playlistCoverTrackIds,
 	requireAccessTokenAction,
 	requireUser,
 	unwrapOrError
@@ -19,12 +18,8 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 	});
 
 	const data = unwrapOrError(result, 'No se pudieron cargar tus playlists.');
-	const trackIds = await playlistCoverTrackIds(
-		api,
-		data.items.map((p) => p.id)
-	);
 
-	return { playlists: data, trackIds };
+	return { playlists: data };
 };
 
 export const actions: Actions = {

web-player/src/routes/(app)/playlists/+page.svelte

@@ -32,7 +32,6 @@
 	let { data, form } = $props();
 
 	const items = $derived(data.playlists.items);
-	const trackIds = $derived(data.trackIds);
 
 	let creating = $state(false);
 
@@ -65,7 +64,7 @@
 					id={playlist.id}
 					name={playlist.name}
 					description={playlist.description}
-					trackIds={trackIds[playlist.id] ?? []}
+					trackIds={playlist.coverTrackIds}
 					updatedAt={playlist.updatedAt}
 					index={i}
 				/>

web-player/src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad, Actions } from './$types';
-import { createApiClient, playlistCoverTrackIds, requireUser } from '$lib/server/api';
+import { createApiClient, requireUser } from '$lib/server/api';
 import { fetchYoutubeFiller } from '$lib/server/youtube';
 import { shuffle } from '$lib/collections';
 import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
@@ -28,10 +28,6 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 		recentlyPlayedPromise
 	]);
 	const playlistItems = playlists.data?.items ?? [];
-	const trackIds = await playlistCoverTrackIds(
-		api,
-		playlistItems.map((p) => p.id)
-	);
 
 	return {
 		greeting: pickGreeting(new Date().getHours()),
@@ -46,7 +42,6 @@ export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 		),
 		playlists: playlistItems,
 		mixes: mixes.data ?? [],
-		trackIds,
 		recentlyPlayed: recentlyPlayed.data ?? []
 	};
 };

web-player/src/routes/+page.svelte

@@ -108,7 +108,6 @@
 	}
 	const playlists = $derived(data.playlists);
 	const mixes = $derived(data.mixes);
-	const trackIds = $derived(data.trackIds);
 
 	function playLatest(index: number) {
 		player.playOrToggle(latest.map(queueItemForTarget), index);
@@ -246,7 +245,7 @@
 					id={playlist.id}
 					name={playlist.name}
 					description={playlist.description}
-					trackIds={trackIds[playlist.id] ?? []}
+					trackIds={playlist.coverTrackIds}
 					updatedAt={playlist.updatedAt}
 					index={i}
 				/>