diff --git a/web-player/docs/paginas.md b/web-player/docs/paginas.md
index 7c421d4..737aeae 100644
--- a/web-player/docs/paginas.md
+++ b/web-player/docs/paginas.md
@@ -12,7 +12,11 @@ src/routes/
+page.svelte / Home
explore/ /explore Search and genre discovery
liked/ /liked Liked songs
- library/ /library Your uploaded songs
+ library/ /library Manage music: your songs
+ albums/ /library/albums Your albums (grid)
+ new/ /library/albums/new Create an album
+ [id]/ /library/albums/:id Edit an album
+ uploads/ /library/uploads Upload queue
upload/ /upload Upload a song
albums/ /albums Your albums
[id]/ /albums/:id Album detail
@@ -32,7 +36,7 @@ Global chrome on every app page: sidebar (desktop) or tab bar (mobile), top bar
- **Home `/`**: a greeting, weekly listening stats, "continue listening" (recently played merged with the in-session history), the featured playlist with its first tracks (play and shuffle load the full list on demand), the user's mixes and playlists. Anonymous visitors are redirected to `/explore`.
- **Explore `/explore`**: genre tiles when there is no query, otherwise search results grouped by songs, albums, users and playlists with filter chips and counts taken from the API totals. Songs paginate with infinite scroll. Track and album context menus offer play next, add to queue and add to playlist.
- **Liked `/liked`**: the songs the user liked, newest first, with unlike per row.
-- **Library `/library`**: the songs the user uploaded, with a confirmed delete.
+- **Library `/library`, `/library/albums`, `/library/uploads`**: the manage-music area, one route per section behind shared tabs. Songs lists the user's uploads with a confirmed delete; Albums lists the user's albums and edits them at `/library/albums/new` and `/library/albums/:id`; Uploads is the upload queue.
- **Upload `/upload`**: audio, cover, title, genres (incompatible genres are blocked) and explicit flag. The server reserves presigned URLs, uploads both files and creates the track; processing happens asynchronously in the backend.
- **Albums `/albums`, `/albums/:id`**: list and create albums. The owner can edit, delete and add or remove tracks from their library.
- **Playlists `/playlists`, `/playlists/:id`**: list and create playlists. The owner can edit, delete and remove tracks; everyone else gets a read only view.
diff --git a/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte b/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte
deleted file mode 100644
index bcfedec..0000000
--- a/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-{#if editing}
-
- {#key editing.album?.id}
- (editing = null)}
- />
- {/key}
-
-{:else}
-
- (editing = { album: null })}
- />
- {#each albums as album, i (album.id)}
- {
- event.preventDefault();
- editing = { album };
- }}
- />
- {/each}
-
-{/if}
diff --git a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte
index 336b83d..ff1ee0a 100644
--- a/web-player/src/lib/components/music/library/LibraryTracksSection.svelte
+++ b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte
@@ -105,7 +105,7 @@
description="Sube la primera y aparecerá aquí lista para reproducir."
>
{#snippet actions()}
-
+
diff --git a/web-player/src/lib/components/music/library/UploadSettings.svelte b/web-player/src/lib/components/music/library/UploadSettings.svelte
index 180422f..dfefef3 100644
--- a/web-player/src/lib/components/music/library/UploadSettings.svelte
+++ b/web-player/src/lib/components/music/library/UploadSettings.svelte
@@ -73,7 +73,7 @@
Aplicar a esta subida
-
+
{#snippet extraItems({ close })}
@@ -26,4 +25,4 @@
{#if subtitle}
{subtitle}
{/if}
-
+
diff --git a/web-player/src/lib/components/ui/primitives/Tabs.svelte b/web-player/src/lib/components/ui/primitives/Tabs.svelte
new file mode 100644
index 0000000..4e86149
--- /dev/null
+++ b/web-player/src/lib/components/ui/primitives/Tabs.svelte
@@ -0,0 +1,29 @@
+
+
+
+ {#each tabs as tab (tab.href)}
+
+ {tab.label}
+
+ {/each}
+
diff --git a/web-player/src/lib/server/albums.ts b/web-player/src/lib/server/albums.ts
new file mode 100644
index 0000000..ef896fb
--- /dev/null
+++ b/web-player/src/lib/server/albums.ts
@@ -0,0 +1,133 @@
+import { fail, isActionFailure, redirect } from '@sveltejs/kit';
+import type { Album } from '$lib/types';
+import { toAlbum, toLibraryTrack, toPage } from '$lib/server/mappers';
+import { failOnError, unwrapOrError, type ApiClient } from '$lib/server/api';
+import { formFile, formString } from '$lib/server/forms/fields';
+import { parseAlbumForm } from '$lib/server/forms/albumForm';
+import { uploadOptionalCover } from '$lib/server/upload';
+import { authedAction, type ActionContext } from '$lib/server/actions/authedAction';
+import { ALBUMS_PAGE_SIZE, ALBUM_TRACKS_PAGE_SIZE, LIBRARY_PAGE_SIZE } from '$lib/config';
+
+export const ALBUMS_SECTION_URL = '/library/albums';
+
+export async function trackIdsByAlbum(
+ api: ApiClient,
+ albums: Album[]
+): Promise> {
+ const entries = await Promise.all(
+ albums.map(async (album) => {
+ const tracks = await api.GET('/albums/{id}/tracks', {
+ params: {
+ path: { id: album.id },
+ query: { pageNumber: 1, pageSize: ALBUM_TRACKS_PAGE_SIZE }
+ }
+ });
+ return [album.id, (tracks.data?.items ?? []).map((track) => track.id)] as const;
+ })
+ );
+ return Object.fromEntries(entries);
+}
+
+function albumTitleByTrackId(albums: Album[], trackIds: Record) {
+ return new Map(
+ albums.flatMap((album) => (trackIds[album.id] ?? []).map((id) => [id, album.title] as const))
+ );
+}
+
+export async function loadUserAlbums(api: ApiClient, userId: string) {
+ const result = await api.GET('/albums/users/{userId}', {
+ params: { path: { userId }, query: { pageNumber: 1, pageSize: ALBUMS_PAGE_SIZE } }
+ });
+ return toPage(unwrapOrError(result, 'No se pudieron cargar tus álbumes.'), toAlbum);
+}
+
+export async function loadLibraryTracks(api: ApiClient, userId: string) {
+ const [tracksResult, albums] = await Promise.all([
+ api.GET('/tracks/users/{userId}', {
+ params: { path: { userId }, query: { pageNumber: 1, pageSize: LIBRARY_PAGE_SIZE } }
+ }),
+ loadUserAlbums(api, userId)
+ ]);
+ const albumTitles = albumTitleByTrackId(albums.items, await trackIdsByAlbum(api, albums.items));
+ return toPage(unwrapOrError(tracksResult, 'No se pudo cargar tu biblioteca.'), (dto) =>
+ toLibraryTrack(dto, albumTitles.get(dto.id) ?? null)
+ );
+}
+
+export function formIds(form: FormData, key: string): string[] {
+ return formString(form, key).split(',').filter(Boolean);
+}
+
+export function tagged(action: string, handler: (context: ActionContext) => Promise) {
+ return authedAction(async (context) => {
+ const result = await handler(context);
+ return isActionFailure(result)
+ ? fail(result.status, { ...(result.data as Record | undefined), action })
+ : { ...result, action };
+ });
+}
+
+export const saveAlbum = tagged('saveAlbum', async ({ api, form }) => {
+ const parsed = parseAlbumForm(form);
+ if ('failMessage' in parsed) return fail(400, { message: parsed.failMessage });
+
+ const existingId = formString(form, 'albumId');
+ const cover = await uploadOptionalCover(api, '/albums/upload-picture', formFile(form, 'cover'));
+ if ('failMessage' in cover)
+ return fail(502, { message: cover.failMessage, detail: cover.detail });
+
+ let albumId = existingId;
+ if (existingId) {
+ const updated = await api.PUT('/albums/{id}', {
+ params: { path: { id: existingId } },
+ body: parsed.body
+ });
+ const failure = failOnError(updated, 'No se pudo actualizar el álbum.');
+ if (failure) return failure;
+
+ if (cover.intentId) {
+ const picture = await api.PUT('/albums/{id}/picture', {
+ params: { path: { id: existingId } },
+ body: { pictureIntentId: cover.intentId }
+ });
+ const pictureFailure = failOnError(picture, 'No se pudo actualizar la portada.');
+ if (pictureFailure) return pictureFailure;
+ }
+ } else {
+ if (!cover.intentId) return fail(400, { message: 'La portada es obligatoria.' });
+ const created = await api.POST('/albums', {
+ body: { ...parsed.body, pictureIntentId: cover.intentId }
+ });
+ if (created.error || !created.data) return fail(502, { message: 'No se pudo crear el álbum.' });
+ albumId = created.data.id;
+ }
+
+ const addIds = formIds(form, 'addTrackIds');
+ if (addIds.length > 0) {
+ const added = await api.POST('/albums/{id}/tracks', {
+ params: { path: { id: albumId } },
+ body: { trackIds: addIds }
+ });
+ const failure = failOnError(added, 'No se pudieron añadir las canciones.');
+ if (failure) return failure;
+ }
+
+ const removed = await Promise.all(
+ formIds(form, 'removeTrackIds').map((trackId) =>
+ api.DELETE('/albums/{id}/tracks/{trackId}', { params: { path: { id: albumId, trackId } } })
+ )
+ );
+ const removeFailed = removed.find((result) => result.error);
+ const failure = removeFailed && failOnError(removeFailed, 'No se pudieron quitar las canciones.');
+ return failure ?? { saved: true };
+});
+
+export const deleteAlbum = tagged('deleteAlbum', async ({ api, form }) => {
+ const albumId = formString(form, 'albumId');
+ if (!albumId) return fail(400, { message: 'Falta el álbum.' });
+
+ const result = await api.DELETE('/albums/{id}', { params: { path: { id: albumId } } });
+ const failure = failOnError(result, 'No se pudo eliminar el álbum.');
+ if (failure) return failure;
+ redirect(303, ALBUMS_SECTION_URL);
+});
diff --git a/web-player/src/lib/state/history.svelte.ts b/web-player/src/lib/state/history.svelte.ts
index 09c075c..d0db6e2 100644
--- a/web-player/src/lib/state/history.svelte.ts
+++ b/web-player/src/lib/state/history.svelte.ts
@@ -9,6 +9,8 @@ const LABELS: [RegExp, string][] = [
[/^\/playlists\/?$/, 'Volver a tus playlists'],
[/^\/albums\/[^/]+/, 'Volver al álbum'],
[/^\/albums\/?$/, 'Volver a tus álbumes'],
+ [/^\/library\/albums\/?$/, 'Volver a tus álbumes'],
+ [/^\/library\/uploads\/?$/, 'Volver a subir música'],
[/^\/library\/?$/, 'Volver a tus canciones'],
[/^\/upload\/?$/, 'Volver a subir música'],
[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
diff --git a/web-player/src/routes/(app)/library/+layout.svelte b/web-player/src/routes/(app)/library/+layout.svelte
new file mode 100644
index 0000000..8f931e1
--- /dev/null
+++ b/web-player/src/routes/(app)/library/+layout.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Gestionar música · {current.label}
+
+
+
+
diff --git a/web-player/src/routes/(app)/library/+page.server.ts b/web-player/src/routes/(app)/library/+page.server.ts
index 14b1b85..3cfab88 100644
--- a/web-player/src/routes/(app)/library/+page.server.ts
+++ b/web-player/src/routes/(app)/library/+page.server.ts
@@ -1,81 +1,15 @@
import type { PageServerLoad, Actions } from './$types';
-import { fail, isActionFailure, redirect } from '@sveltejs/kit';
-import type { Album } from '$lib/types';
-import { toAlbum, toLibraryTrack, toPage } from '$lib/server/mappers';
-import { apiFor, failOnError, unwrapOrError, type ApiClient } from '$lib/server/api';
+import { fail } from '@sveltejs/kit';
+import { apiFor, failOnError } from '$lib/server/api';
import { requireUser } from '$lib/server/guards';
-import { formFile, formString } from '$lib/server/forms/fields';
-import { parseAlbumForm } from '$lib/server/forms/albumForm';
-import { uploadOptionalCover } from '$lib/server/upload';
-import { authedAction } from '$lib/server/actions/authedAction';
-import { ALBUMS_PAGE_SIZE, ALBUM_TRACKS_PAGE_SIZE, LIBRARY_PAGE_SIZE } from '$lib/config';
-
-const ALBUMS_SECTION_URL = '/library?section=albums';
-
-async function trackIdsByAlbum(api: ApiClient, albums: Album[]): Promise> {
- const entries = await Promise.all(
- albums.map(async (album) => {
- const tracks = await api.GET('/albums/{id}/tracks', {
- params: {
- path: { id: album.id },
- query: { pageNumber: 1, pageSize: ALBUM_TRACKS_PAGE_SIZE }
- }
- });
- return [album.id, (tracks.data?.items ?? []).map((track) => track.id)] as const;
- })
- );
- return Object.fromEntries(entries);
-}
-
-function albumTitleByTrackId(albums: Album[], trackIds: Record) {
- return new Map(
- albums.flatMap((album) => (trackIds[album.id] ?? []).map((id) => [id, album.title] as const))
- );
-}
-
-function formIds(form: FormData, key: string): string[] {
- return formString(form, key).split(',').filter(Boolean);
-}
+import { formIds, loadLibraryTracks, tagged } from '$lib/server/albums';
export const load: PageServerLoad = async ({ locals, url, fetch }) => {
const user = requireUser(locals, url);
const api = apiFor({ fetch, locals });
- const [tracksResult, albumsResult, genresResult] = await Promise.all([
- api.GET('/tracks/users/{userId}', {
- params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: LIBRARY_PAGE_SIZE } }
- }),
- api.GET('/albums/users/{userId}', {
- params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: ALBUMS_PAGE_SIZE } }
- }),
- api.GET('/genres/available')
- ]);
-
- const albums = toPage(unwrapOrError(albumsResult, 'No se pudieron cargar tus álbumes.'), toAlbum);
- const albumTrackIds = await trackIdsByAlbum(api, albums.items);
- const albumTitles = albumTitleByTrackId(albums.items, albumTrackIds);
-
- return {
- tracks: toPage(unwrapOrError(tracksResult, 'No se pudo cargar tu biblioteca.'), (dto) =>
- toLibraryTrack(dto, albumTitles.get(dto.id) ?? null)
- ),
- albums,
- albumTrackIds,
- genres: genresResult.data ?? []
- };
+ return { tracks: await loadLibraryTracks(api, user.sub) };
};
-function tagged(
- action: string,
- handler: (event: Parameters[0]>[0]) => Promise
-) {
- return authedAction(async (event) => {
- const result = await handler(event);
- return isActionFailure(result)
- ? fail(result.status, { ...(result.data as Record | undefined), action })
- : { ...result, action };
- });
-}
-
export const actions: Actions = {
deleteTracks: tagged('deleteTracks', async ({ api, form }) => {
const trackIds = formIds(form, 'trackIds');
@@ -94,72 +28,5 @@ export const actions: Actions = {
: 'No se pudieron borrar todas las canciones.'
)) ?? { deleted: true }
);
- }),
-
- saveAlbum: tagged('saveAlbum', async ({ api, form }) => {
- const parsed = parseAlbumForm(form);
- if ('failMessage' in parsed) return fail(400, { message: parsed.failMessage });
-
- const existingId = formString(form, 'albumId');
- const cover = await uploadOptionalCover(api, '/albums/upload-picture', formFile(form, 'cover'));
- if ('failMessage' in cover)
- return fail(502, { message: cover.failMessage, detail: cover.detail });
-
- let albumId = existingId;
- if (existingId) {
- const updated = await api.PUT('/albums/{id}', {
- params: { path: { id: existingId } },
- body: parsed.body
- });
- const failure = failOnError(updated, 'No se pudo actualizar el álbum.');
- if (failure) return failure;
-
- if (cover.intentId) {
- const picture = await api.PUT('/albums/{id}/picture', {
- params: { path: { id: existingId } },
- body: { pictureIntentId: cover.intentId }
- });
- const pictureFailure = failOnError(picture, 'No se pudo actualizar la portada.');
- if (pictureFailure) return pictureFailure;
- }
- } else {
- if (!cover.intentId) return fail(400, { message: 'La portada es obligatoria.' });
- const created = await api.POST('/albums', {
- body: { ...parsed.body, pictureIntentId: cover.intentId }
- });
- if (created.error || !created.data)
- return fail(502, { message: 'No se pudo crear el álbum.' });
- albumId = created.data.id;
- }
-
- const addIds = formIds(form, 'addTrackIds');
- if (addIds.length > 0) {
- const added = await api.POST('/albums/{id}/tracks', {
- params: { path: { id: albumId } },
- body: { trackIds: addIds }
- });
- const failure = failOnError(added, 'No se pudieron añadir las canciones.');
- if (failure) return failure;
- }
-
- const removed = await Promise.all(
- formIds(form, 'removeTrackIds').map((trackId) =>
- api.DELETE('/albums/{id}/tracks/{trackId}', { params: { path: { id: albumId, trackId } } })
- )
- );
- const removeFailed = removed.find((result) => result.error);
- const failure =
- removeFailed && failOnError(removeFailed, 'No se pudieron quitar las canciones.');
- return failure ?? { saved: true };
- }),
-
- deleteAlbum: tagged('deleteAlbum', async ({ api, form }) => {
- const albumId = formString(form, 'albumId');
- if (!albumId) return fail(400, { message: 'Falta el álbum.' });
-
- const result = await api.DELETE('/albums/{id}', { params: { path: { id: albumId } } });
- const failure = failOnError(result, 'No se pudo eliminar el álbum.');
- if (failure) return failure;
- redirect(303, ALBUMS_SECTION_URL);
})
};
diff --git a/web-player/src/routes/(app)/library/+page.svelte b/web-player/src/routes/(app)/library/+page.svelte
index 45a4314..342fa72 100644
--- a/web-player/src/routes/(app)/library/+page.svelte
+++ b/web-player/src/routes/(app)/library/+page.svelte
@@ -1,82 +1,10 @@
-
-
-
- Gestionar música
-
-
-
-
- {#each SECTIONS as option (option.value)}
- selectSection(option.value)}
- size="sm"
- >
- {option.label}
-
- {/each}
-
-
- {#if section === 'tracks'}
-
+
+
diff --git a/web-player/src/routes/(app)/library/albums/[id]/+page.server.ts b/web-player/src/routes/(app)/library/albums/[id]/+page.server.ts
new file mode 100644
index 0000000..ca05cfe
--- /dev/null
+++ b/web-player/src/routes/(app)/library/albums/[id]/+page.server.ts
@@ -0,0 +1,19 @@
+import type { Actions, PageServerLoad } from './$types';
+import { apiFor, unwrapOrError } from '$lib/server/api';
+import { requireUser } from '$lib/server/guards';
+import { toAlbum } from '$lib/server/mappers';
+import { deleteAlbum, loadLibraryTracks, saveAlbum, trackIdsByAlbum } from '$lib/server/albums';
+
+export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
+ const user = requireUser(locals, url);
+ const api = apiFor({ fetch, locals });
+ const albumResult = await api.GET('/albums/{id}', { params: { path: { id: params.id } } });
+ const album = toAlbum(unwrapOrError(albumResult, 'Álbum no encontrado.', 404));
+ const [tracks, memberIds] = await Promise.all([
+ loadLibraryTracks(api, user.sub),
+ trackIdsByAlbum(api, [album])
+ ]);
+ return { album, tracks, memberIds: memberIds[album.id] ?? [] };
+};
+
+export const actions: Actions = { saveAlbum, deleteAlbum };
diff --git a/web-player/src/routes/(app)/library/albums/[id]/+page.svelte b/web-player/src/routes/(app)/library/albums/[id]/+page.svelte
new file mode 100644
index 0000000..dfd7151
--- /dev/null
+++ b/web-player/src/routes/(app)/library/albums/[id]/+page.svelte
@@ -0,0 +1,18 @@
+
+
+
+ {#key data.album.id}
+ goto('/library/albums')}
+ />
+ {/key}
+
diff --git a/web-player/src/routes/(app)/library/albums/new/+page.server.ts b/web-player/src/routes/(app)/library/albums/new/+page.server.ts
new file mode 100644
index 0000000..80c76b6
--- /dev/null
+++ b/web-player/src/routes/(app)/library/albums/new/+page.server.ts
@@ -0,0 +1,12 @@
+import type { Actions, PageServerLoad } from './$types';
+import { apiFor } from '$lib/server/api';
+import { requireUser } from '$lib/server/guards';
+import { loadLibraryTracks, saveAlbum } from '$lib/server/albums';
+
+export const load: PageServerLoad = async ({ locals, url, fetch }) => {
+ const user = requireUser(locals, url);
+ const api = apiFor({ fetch, locals });
+ return { tracks: await loadLibraryTracks(api, user.sub) };
+};
+
+export const actions: Actions = { saveAlbum };
diff --git a/web-player/src/routes/(app)/library/albums/new/+page.svelte b/web-player/src/routes/(app)/library/albums/new/+page.svelte
new file mode 100644
index 0000000..a145145
--- /dev/null
+++ b/web-player/src/routes/(app)/library/albums/new/+page.svelte
@@ -0,0 +1,16 @@
+
+
+
+ goto('/library/albums')}
+ />
+
diff --git a/web-player/src/routes/(app)/library/uploads/+page.server.ts b/web-player/src/routes/(app)/library/uploads/+page.server.ts
new file mode 100644
index 0000000..72c80ab
--- /dev/null
+++ b/web-player/src/routes/(app)/library/uploads/+page.server.ts
@@ -0,0 +1,10 @@
+import type { PageServerLoad } from './$types';
+import { apiFor } from '$lib/server/api';
+import { requireUser } from '$lib/server/guards';
+
+export const load: PageServerLoad = async ({ locals, url, fetch }) => {
+ requireUser(locals, url);
+ const api = apiFor({ fetch, locals });
+ const genres = await api.GET('/genres/available');
+ return { genres: genres.data ?? [] };
+};
diff --git a/web-player/src/routes/(app)/library/uploads/+page.svelte b/web-player/src/routes/(app)/library/uploads/+page.svelte
new file mode 100644
index 0000000..738fc66
--- /dev/null
+++ b/web-player/src/routes/(app)/library/uploads/+page.svelte
@@ -0,0 +1,7 @@
+
+
+