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

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}
 				/>