feat: use new simplified apple music lcp endpoint

Signed-off-by: Matt Gleich <git@mattglei.ch>

Author: gleich

src/lib/index/sections/music/music-section.svelte

@@ -65,8 +65,8 @@
 		<div>
 			<h3 class="header">Playlists</h3>
 			<div class="section playlists">
-				{#each music.data!.playlist_summaries as summary (summary.id)}
-					<Playlist {summary} />
+				{#each music.data!.playlists as playlist (playlist.id)}
+					<Playlist {playlist} />
 				{/each}
 			</div>
 		</div>

src/lib/index/sections/music/playlist.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { AppleMusicPlaylistSummary } from '$lib/lcp/applemusic.server';
+	import type { AppleMusicPlaylist } from '$lib/lcp/applemusic.server';
 	import { Card, Image } from '@gleich/ui';
 
-	const { summary }: { summary: AppleMusicPlaylistSummary } = $props();
+	const { playlist }: { playlist: AppleMusicPlaylist } = $props();
 </script>
 
-<a href={`/music/playlist/${summary.id}`} class="container">
+<a href={`/music/playlist/${playlist.id}`} class="container">
 	<Card padding="0">
 		<div class="collage-container">
 			<div class="collage">
-				{#each summary.first_four_tracks as track (track.id)}
+				{#each playlist.tracks.slice(0, 4) as track (track.id)}
 					<div class="collage-image">
 						<Image
 							src={track.album_art_preview_url}
@@ -22,10 +22,10 @@
 					</div>
 				{/each}
 			</div>
-			<p class="name">{summary.name}</p>
+			<p class="name">{playlist.name}</p>
 		</div>
 		<button class="view-more">
-			View {summary.track_count} tracks
+			View {playlist.tracks.length} tracks
 		</button>
 	</Card>
 </a>

src/lib/lcp/applemusic.server.ts

@@ -1,27 +1,6 @@
-import { LCP_TOKEN } from '$env/static/private';
-import type { SvelteFetch } from './lcp.server';
-
-export async function loadPlaylistFromLCP(
-	id: string,
-	fetch: SvelteFetch
-): Promise<AppleMusicPlaylist | null> {
-	try {
-		const res = await fetch(`https://lcp.mattglei.ch/applemusic/playlists/${id}`, {
-			method: 'GET',
-			cache: 'no-store',
-			headers: {
-				Authorization: `Bearer ${LCP_TOKEN}`
-			}
-		});
-		return await res.json();
-	} catch {
-		return null;
-	}
-}
-
 export interface CacheData {
 	recently_played: AppleMusicSong[];
-	playlist_summaries: AppleMusicPlaylistSummary[];
+	playlists: AppleMusicPlaylist[];
 }
 
 export interface AppleMusicSong {
@@ -36,13 +15,6 @@ export interface AppleMusicSong {
 	preview_audio_url: string | null;
 }
 
-export interface AppleMusicPlaylistSummary {
-	name: string;
-	id: string;
-	track_count: number;
-	first_four_tracks: AppleMusicSong[];
-}
-
 export interface AppleMusicPlaylist {
 	name: string;
 	id: string;

src/routes/music/playlist/[playlistID]/+page.server.ts

@@ -1,9 +1,9 @@
-import { loadPlaylistFromLCP, type AppleMusicPlaylist } from '$lib/lcp/applemusic.server';
-import { type SvelteFetch } from '$lib/lcp/lcp.server';
+import { type AppleMusicPlaylist, type CacheData } from '$lib/lcp/applemusic.server';
+import { Cache, loadFromLCP, type SvelteFetch } from '$lib/lcp/lcp.server';
 import type { PageServerLoad } from './$types';
 
 export interface PlaylistData {
-	playlist: AppleMusicPlaylist | null;
+	playlist: AppleMusicPlaylist | undefined;
 }
 
 export const load: PageServerLoad = async ({
@@ -13,5 +13,7 @@ export const load: PageServerLoad = async ({
 	params: Record<string, string>;
 	fetch: SvelteFetch;
 }) => ({
-	playlist: await loadPlaylistFromLCP(params.playlistID, fetch)
+	playlist: (await loadFromLCP<CacheData>(Cache.AppleMusic, fetch))?.data.playlists.find(
+		(p) => p.id === params.playlistID
+	)
 });

src/routes/music/playlist/[playlistID]/+page.svelte

@@ -5,7 +5,7 @@
 	import Since from '$lib/time/since.svelte';
 	import ViewButton from '$lib/view-button.svelte';
 	import { DynamicHead, Error } from '@gleich/ui';
-	import type { PlaylistData } from './proxy+page.server';
+	import type { PlaylistData } from './+page.server';
 
 	const { data }: { data: PlaylistData } = $props();
 </script>