From 2eaca66ec2174d8450a02531caa53ceac44081df Mon Sep 17 00:00:00 2001 From: XShine555 Date: Tue, 14 Jul 2026 04:55:12 +0200 Subject: [PATCH] feat(frontend): rework home page with recent, latest and playlists Add SSR data loading for the home page and rebuild its layout (greeting hero, recently played, new releases, user playlists). --- frontend/src/routes/+page.server.ts | 33 ++++ frontend/src/routes/+page.svelte | 224 ++++++++++++++++++++-------- 2 files changed, 195 insertions(+), 62 deletions(-) create mode 100644 frontend/src/routes/+page.server.ts diff --git a/frontend/src/routes/+page.server.ts b/frontend/src/routes/+page.server.ts new file mode 100644 index 0000000..d6fa3c2 --- /dev/null +++ b/frontend/src/routes/+page.server.ts @@ -0,0 +1,33 @@ +import type { PageServerLoad } from './$types'; +import { createApiClient } from '$lib/server/api'; + +export const load: PageServerLoad = async ({ locals, fetch }) => { + const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined }); + + const latestPromise = api.GET('/tracks', { + params: { query: { pageNumber: 1, pageSize: 12 } } + }); + const playlistsPromise = locals.user + ? api.GET('/playlists/users/{userId}', { + params: { path: { userId: locals.user.sub }, query: { pageNumber: 1, pageSize: 8 } } + }) + : Promise.resolve({ data: undefined }); + + const [latest, playlists] = await Promise.all([latestPromise, playlistsPromise]); + const playlistItems = playlists.data?.items ?? []; + + const covers = await Promise.all( + playlistItems.map(async (playlist) => { + const { data: tracks } = await api.GET('/playlists/{playlistId}/tracks', { + params: { path: { playlistId: playlist.id }, query: { pageNumber: 1, pageSize: 4 } } + }); + return [playlist.id, tracks?.items.map((t) => t.id) ?? []] as const; + }) + ); + + return { + latest: latest.data?.items ?? [], + playlists: playlistItems, + trackIds: Object.fromEntries(covers) as Record + }; +}; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 578ca35..6e26884 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,76 +1,176 @@ - Musify · Tu música, en streaming - + Musify + -
+
- -
- - Ahora en beta - - -

- Tu música, en streaming. +
+

{greeting}

+

+ Tu música. Sin límites.

+
+

-

- Escucha, organiza y sube tus canciones. Musify es tu biblioteca musical, siempre contigo. -

- -
- - Empezar gratis - - - Explorar canciones - +{#if player.recentlyPlayed.length > 0} +
+

Escuchado recientemente

+
+ {#each player.recentlyPlayed as track (track.id)} + + {/each}
-
+
+{/if} + +
+

Novedades

+ {#if latest.length > 0} +
+ {#each latest as track, i (track.id)} + + {/each} +
+ {:else} +
+ +

Todavía no hay música

+

+ Sube una canción + y empieza a escuchar. +

+
+ {/if}
-
-
- {#each features as feature (feature.title)} -
-
{feature.icon}
-

{feature.title}

-

{feature.body}

-
- {/each} -
+
+

Tus listas

+ {#if playlists.length > 0} +
+ {#each playlists as playlist, i (playlist.id)} + + +
+ {playlist.name} +
+ + {/each} +
+ {:else} +
+

Todavía no tienes listas

+

+ Cuando crees listas, tus últimas aparecerán aquí. +

+
+ {/if}