From 9928840577150a423daa696ac5f50553a53f9c1e Mon Sep 17 00:00:00 2001 From: XShine555 Date: Fri, 25 Sep 2026 01:07:15 +0200 Subject: [PATCH] Add library manager with tracks, albums and uploads sections --- .../components/music/ManageTrackList.svelte | 143 +++++++++++++ .../music/library/LibraryAlbumEditor.svelte | 193 ++++++++++++++++++ .../music/library/LibraryAlbumsSection.svelte | 55 +++++ .../music/library/LibraryTracksSection.svelte | 124 +++++++++++ .../library/LibraryUploadsSection.svelte | 161 +++++++++++++++ .../music/library/TrackPickList.svelte | 38 ++++ .../music/library/UploadQueueList.svelte | 98 +++++++++ .../music/library/UploadSettings.svelte | 167 +++++++++++++++ .../src/lib/components/shell/TopBar.svelte | 39 +--- .../components/ui/forms/ImageDropzone.svelte | 7 +- .../lib/components/ui/media/MediaCard.svelte | 18 +- .../ui/media/MediaCreateCard.svelte | 29 +++ .../components/ui/media/StatusBadge.svelte | 21 ++ .../components/ui/primitives/Checkbox.svelte | 10 +- .../lib/components/ui/primitives/Chip.svelte | 1 + .../components/ui/primitives/ChipGroup.svelte | 30 +++ .../lib/components/ui/primitives/Input.svelte | 6 + .../ui/primitives/SearchInput.svelte | 55 +++++ web-player/src/lib/data/libraryTracks.test.ts | 42 ++++ web-player/src/lib/data/libraryTracks.ts | 41 ++++ web-player/src/lib/data/uploadQueue.test.ts | 45 ++++ web-player/src/lib/data/uploadQueue.ts | 98 +++++++++ web-player/src/lib/server/mappers.ts | 20 +- web-player/src/lib/types.ts | 9 + .../src/routes/(app)/albums/+page.svelte | 2 +- .../src/routes/(app)/library/+page.server.ts | 167 +++++++++++++-- .../src/routes/(app)/library/+page.svelte | 111 +++++----- web-player/src/routes/layout.css | 10 + 28 files changed, 1622 insertions(+), 118 deletions(-) create mode 100644 web-player/src/lib/components/music/ManageTrackList.svelte create mode 100644 web-player/src/lib/components/music/library/LibraryAlbumEditor.svelte create mode 100644 web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte create mode 100644 web-player/src/lib/components/music/library/LibraryTracksSection.svelte create mode 100644 web-player/src/lib/components/music/library/LibraryUploadsSection.svelte create mode 100644 web-player/src/lib/components/music/library/TrackPickList.svelte create mode 100644 web-player/src/lib/components/music/library/UploadQueueList.svelte create mode 100644 web-player/src/lib/components/music/library/UploadSettings.svelte create mode 100644 web-player/src/lib/components/ui/media/MediaCreateCard.svelte create mode 100644 web-player/src/lib/components/ui/media/StatusBadge.svelte create mode 100644 web-player/src/lib/components/ui/primitives/ChipGroup.svelte create mode 100644 web-player/src/lib/components/ui/primitives/SearchInput.svelte create mode 100644 web-player/src/lib/data/libraryTracks.test.ts create mode 100644 web-player/src/lib/data/libraryTracks.ts create mode 100644 web-player/src/lib/data/uploadQueue.test.ts create mode 100644 web-player/src/lib/data/uploadQueue.ts diff --git a/web-player/src/lib/components/music/ManageTrackList.svelte b/web-player/src/lib/components/music/ManageTrackList.svelte new file mode 100644 index 0000000..b5b72c4 --- /dev/null +++ b/web-player/src/lib/components/music/ManageTrackList.svelte @@ -0,0 +1,143 @@ + + + + +
+
+ allSelected, toggleAll} /> + Título + {#each COLUMNS as column (column.id)} + + {/each} + + +
+
+ {#each tracks as track, i (track.id)} + {@const active = player.currentId === track.id} +
+ selected.has(track.id), (checked) => toggle(track.id, checked)} + /> +
onPlay(i)} + class="flex min-w-0 flex-1 text-left" + > + + {#snippet overlay()} + {#if active} + + {/if} + {/snippet} + +
+ {#each COLUMNS as column (column.id)} + + {/each} + + {fmtTime(track.duration)} + + onDelete(track)}> + + +
+ {/each} +
+
diff --git a/web-player/src/lib/components/music/library/LibraryAlbumEditor.svelte b/web-player/src/lib/components/music/library/LibraryAlbumEditor.svelte new file mode 100644 index 0000000..b3aaaa9 --- /dev/null +++ b/web-player/src/lib/components/music/library/LibraryAlbumEditor.svelte @@ -0,0 +1,193 @@ + + + + +
+
{ + submitting = true; + return async ({ update, result }) => { + await update({ reset: false }); + submitting = false; + if (result.type === 'success') onClose(); + }; + }} + class="mt-6 grid gap-8 lg:grid-cols-[auto_1fr]" + > + + + + +
+ +

Las canciones del álbum usan esta portada.

+ + + + + + + + + + + + + + + + +
+ +
+
+
+

Canciones

+

+ {inAlbum.length > 0 ? plural(inAlbum.length, 'canción', 'canciones') : 'Sin canciones'} +

+
+ +
+ + {#if available.length > 0} +

Añadir desde tu biblioteca

+ + {/if} + +
+ {#if inAlbum.length > 0} +

En este álbum

+ + {:else} + + {/if} +
+ + {#if formMessage} + {formMessage} + {/if} + +
+ + {#if !isNew} + + {/if} +
+
+
+
+ +{#if album} + (confirmingDelete = false)} + title="¿Eliminar «{album.title}»?" + description="Las canciones no se borran: solo se elimina el álbum." + confirmLabel="Eliminar" + action="?/deleteAlbum" + fields={{ albumId: album.id }} + /> +{/if} diff --git a/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte b/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte new file mode 100644 index 0000000..bcfedec --- /dev/null +++ b/web-player/src/lib/components/music/library/LibraryAlbumsSection.svelte @@ -0,0 +1,55 @@ + + +{#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 new file mode 100644 index 0000000..336b83d --- /dev/null +++ b/web-player/src/lib/components/music/library/LibraryTracksSection.svelte @@ -0,0 +1,124 @@ + + +{#if errorMessage} + {errorMessage} +{/if} + +{#if tracks.length > 0} + {#if selectedIds.length > 0} +
+ {plural(selectedIds.length, 'seleccionada', 'seleccionadas')} + + +
+ {:else} +
+ + +
+ {/if} + + {#if visible.length > 0} + (pendingDelete = [track])} + /> + {:else} + + {/if} +{:else} + + {#snippet actions()} + + {/snippet} + +{/if} + + 0} + onClose={() => (pendingDelete = [])} + title="¿Borrar {pendingTitle}?" + description="Esta acción no se puede deshacer: se eliminarán de tu biblioteca, de tus álbumes y de las playlists donde estén." + confirmLabel="Borrar" + action="?/deleteTracks" + fields={{ trackIds: pendingDelete.map((track) => track.id).join(',') }} +/> diff --git a/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte b/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte new file mode 100644 index 0000000..78f4fc4 --- /dev/null +++ b/web-player/src/lib/components/music/library/LibraryUploadsSection.svelte @@ -0,0 +1,161 @@ + + +
+
+
{ + event.preventDefault(); + dragging = true; + }} + ondragleave={() => (dragging = false)} + ondrop={onDrop} + class="flex min-h-64 flex-col items-center justify-center rounded-panel border border-dashed p-6 text-center transition sm:p-10 {dragging + ? 'border-accent/60 bg-accent-tint' + : 'border-line-strong bg-surface'}" + > + + + +

+ Arrastra tus archivos aquí +

+

+ WAV, FLAC, AIFF o MP3 · hasta 500 MB por archivo · puedes soltar carpetas enteras +

+ + +
+ + single?.title ?? '', (value) => single && setTitle(single.id, value)} + titleDisabled={single === null} + /> +
+ +
+
+
+

Cola de subida

+

+ {queue.length > 0 ? queueMeta : 'Todavía no hay archivos'} +

+
+
+ {#if queue.length > 0} + + {/if} + +
+
+ {#if queue.length > 0} + + {:else} +

+ Los archivos que añadas aparecerán aquí. +

+ {/if} +
+
diff --git a/web-player/src/lib/components/music/library/TrackPickList.svelte b/web-player/src/lib/components/music/library/TrackPickList.svelte new file mode 100644 index 0000000..71ec02d --- /dev/null +++ b/web-player/src/lib/components/music/library/TrackPickList.svelte @@ -0,0 +1,38 @@ + + +
+ {#each tracks as track (track.id)} +
+ onPick(track)} + class="px-3 py-2" + > + {#snippet trailing()} + + {/snippet} + +
+ {/each} +
diff --git a/web-player/src/lib/components/music/library/UploadQueueList.svelte b/web-player/src/lib/components/music/library/UploadQueueList.svelte new file mode 100644 index 0000000..27f1665 --- /dev/null +++ b/web-player/src/lib/components/music/library/UploadQueueList.svelte @@ -0,0 +1,98 @@ + + + + +
+
+ Título + + + + + Estado + +
+
+ {#each items as item (item.id)} +
+
+ + {item.format} + +
+ onTitle(item.id, event.currentTarget.value)} + aria-label="Título de {item.file.name}" + class="w-full truncate rounded-tag bg-transparent text-sm text-fg transition-colors hover:bg-surface focus:bg-surface-2 focus:outline-none" + /> +

{item.file.name}

+
+
+ + + + + + {#if item.error} + + {:else} + + {/if} + + onRemove(item.id)}> + + +
+ {/each} +
+
diff --git a/web-player/src/lib/components/music/library/UploadSettings.svelte b/web-player/src/lib/components/music/library/UploadSettings.svelte new file mode 100644 index 0000000..180422f --- /dev/null +++ b/web-player/src/lib/components/music/library/UploadSettings.svelte @@ -0,0 +1,167 @@ + + + diff --git a/web-player/src/lib/components/shell/TopBar.svelte b/web-player/src/lib/components/shell/TopBar.svelte index 072d8a1..0491e4f 100644 --- a/web-player/src/lib/components/shell/TopBar.svelte +++ b/web-player/src/lib/components/shell/TopBar.svelte @@ -4,10 +4,9 @@ import type { SessionUser } from '$lib/types'; import { SEARCH_DEBOUNCE_MS, SEARCH_MIN_LENGTH } from '$lib/config'; import { searchHref } from '$lib/utils/hrefs'; - import Search from '@lucide/svelte/icons/search'; - import X from '@lucide/svelte/icons/x'; import ChevronLeft from '@lucide/svelte/icons/chevron-left'; import AccountMenu from '$lib/components/shell/AccountMenu.svelte'; + import SearchInput from '$lib/components/ui/primitives/SearchInput.svelte'; import IconButton from '$lib/components/ui/primitives/IconButton.svelte'; import Button from '$lib/components/ui/primitives/Button.svelte'; @@ -21,7 +20,6 @@ let query = $derived( page.url.pathname === '/explore' ? (page.url.searchParams.get('q') ?? '') : '' ); - let searchInput: HTMLInputElement | undefined = $state(); let searchTimeout: ReturnType | undefined; function runSearch(term: string) { @@ -33,16 +31,14 @@ }); } - function onInput() { + function oninput() { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => runSearch(query.trim()), SEARCH_DEBOUNCE_MS); } - function clearQuery() { - query = ''; + function onclear() { clearTimeout(searchTimeout); runSearch(''); - searchInput?.focus(); } function onSubmit(event: SubmitEvent) { @@ -58,29 +54,12 @@
- +
diff --git a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte index 2d30462..c3b59ba 100644 --- a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte +++ b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte @@ -8,7 +8,7 @@ required?: boolean; icon?: LucideIcon; gradient?: boolean; - size?: 'default' | 'hero'; + size?: 'default' | 'hero' | 'fill'; onselect?: (file: File) => void; class?: string; } @@ -24,9 +24,10 @@ class: klass = '' }: Props = $props(); - const SIZE: Record<'default' | 'hero', string> = { + const SIZE: Record<'default' | 'hero' | 'fill', string> = { default: 'size-40 sm:size-52 rounded-control', - hero: 'size-cover-hero rounded-art-lg' + hero: 'size-cover-hero rounded-art-lg', + fill: 'aspect-square w-full rounded-art-lg' }; let preview = $state(''); diff --git a/web-player/src/lib/components/ui/media/MediaCard.svelte b/web-player/src/lib/components/ui/media/MediaCard.svelte index 6f48180..a9fcdc0 100644 --- a/web-player/src/lib/components/ui/media/MediaCard.svelte +++ b/web-player/src/lib/components/ui/media/MediaCard.svelte @@ -9,6 +9,7 @@ subtitle?: string | null; src?: string | null; trackIds?: string[]; + onclick?: (event: MouseEvent) => void; onPlay?: (event: MouseEvent) => void; art?: Snippet; oncontextmenu?: (event: MouseEvent) => void; @@ -21,6 +22,7 @@ subtitle, src, trackIds = [], + onclick, onPlay, art, oncontextmenu, @@ -28,18 +30,18 @@ }: Props = $props(); - +
{#if art} {@render art()} {:else} - + {/if} {#if onPlay}
+ import Plus from '@lucide/svelte/icons/plus'; + + interface Props { + title: string; + subtitle?: string | null; + onclick: () => void; + index?: number; + } + + let { title, subtitle, onclick, index = 0 }: Props = $props(); + + + diff --git a/web-player/src/lib/components/ui/media/StatusBadge.svelte b/web-player/src/lib/components/ui/media/StatusBadge.svelte new file mode 100644 index 0000000..95e7b52 --- /dev/null +++ b/web-player/src/lib/components/ui/media/StatusBadge.svelte @@ -0,0 +1,21 @@ + + +{label} diff --git a/web-player/src/lib/components/ui/primitives/Checkbox.svelte b/web-player/src/lib/components/ui/primitives/Checkbox.svelte index 1cf27e2..d2de1e7 100644 --- a/web-player/src/lib/components/ui/primitives/Checkbox.svelte +++ b/web-player/src/lib/components/ui/primitives/Checkbox.svelte @@ -5,11 +5,12 @@ interface Props { checked?: boolean; name?: string; + label?: string; class?: string; - children: Snippet; + children?: Snippet; } - let { checked = $bindable(false), name, class: klass = '', children }: Props = $props(); + let { checked = $bindable(false), name, label, class: klass = '', children }: Props = $props(); diff --git a/web-player/src/lib/components/ui/primitives/Chip.svelte b/web-player/src/lib/components/ui/primitives/Chip.svelte index 6cdbc65..1853339 100644 --- a/web-player/src/lib/components/ui/primitives/Chip.svelte +++ b/web-player/src/lib/components/ui/primitives/Chip.svelte @@ -28,6 +28,7 @@ type={href ? undefined : 'button'} disabled={href ? undefined : disabled} onclick={href ? undefined : onclick} + aria-pressed={href ? undefined : selected} class={classes} > {@render children()} diff --git a/web-player/src/lib/components/ui/primitives/ChipGroup.svelte b/web-player/src/lib/components/ui/primitives/ChipGroup.svelte new file mode 100644 index 0000000..b19be29 --- /dev/null +++ b/web-player/src/lib/components/ui/primitives/ChipGroup.svelte @@ -0,0 +1,30 @@ + + +
+ {#each options as option (option.value)} + (value = option.value)} + > + {option.label} + + {/each} +
diff --git a/web-player/src/lib/components/ui/primitives/Input.svelte b/web-player/src/lib/components/ui/primitives/Input.svelte index 1ea8563..c9602a4 100644 --- a/web-player/src/lib/components/ui/primitives/Input.svelte +++ b/web-player/src/lib/components/ui/primitives/Input.svelte @@ -11,9 +11,11 @@ placeholder?: string; maxlength?: number; required?: boolean; + disabled?: boolean; autocomplete?: 'on' | 'off'; icon?: LucideIcon; oninput?: (event: Event) => void; + onkeydown?: (event: KeyboardEvent) => void; class?: string; } @@ -27,9 +29,11 @@ placeholder, maxlength, required = false, + disabled = false, autocomplete = 'off', icon: Icon, oninput, + onkeydown, class: klass = '' }: Props = $props(); @@ -49,8 +53,10 @@ {placeholder} {maxlength} {required} + {disabled} {autocomplete} {oninput} + {onkeydown} bind:value class="field-control {Icon ? 'pr-4 pl-11' : 'px-4'} {klass}" /> diff --git a/web-player/src/lib/components/ui/primitives/SearchInput.svelte b/web-player/src/lib/components/ui/primitives/SearchInput.svelte new file mode 100644 index 0000000..5ca19b0 --- /dev/null +++ b/web-player/src/lib/components/ui/primitives/SearchInput.svelte @@ -0,0 +1,55 @@ + + + diff --git a/web-player/src/lib/data/libraryTracks.test.ts b/web-player/src/lib/data/libraryTracks.test.ts new file mode 100644 index 0000000..842488c --- /dev/null +++ b/web-player/src/lib/data/libraryTracks.test.ts @@ -0,0 +1,42 @@ +import { describe, expect, it } from 'vitest'; +import type { LibraryTrack } from '$lib/types'; +import { filterLibraryTracks } from './libraryTracks'; + +function track(id: string, title: string, status: LibraryTrack['status']): LibraryTrack { + return { + id, + title, + artist: 'Artista', + ownerUserId: '1', + explicit: false, + duration: 60, + listensCount: 0, + date: '2026-01-01T00:00:00Z', + status, + genres: [], + albumTitle: null + }; +} + +const tracks = [ + track('1', 'Alba', 'Completed'), + track('2', 'Noche', 'Processing'), + track('3', 'Ruido', 'Pending'), + track('4', 'Roto', 'Failed') +]; + +describe('filterLibraryTracks', () => { + it('returns everything for the "all" filter without a query', () => { + expect(filterLibraryTracks(tracks, '', 'all')).toHaveLength(4); + }); + it('groups pending and processing tracks together', () => { + expect(filterLibraryTracks(tracks, '', 'processing').map((t) => t.id)).toEqual(['2', '3']); + }); + it('combines the status filter with the text query', () => { + expect(filterLibraryTracks(tracks, ' alb ', 'published').map((t) => t.id)).toEqual(['1']); + expect(filterLibraryTracks(tracks, 'alb', 'failed')).toEqual([]); + }); + it('matches the artist too', () => { + expect(filterLibraryTracks(tracks, 'artista', 'all')).toHaveLength(4); + }); +}); diff --git a/web-player/src/lib/data/libraryTracks.ts b/web-player/src/lib/data/libraryTracks.ts new file mode 100644 index 0000000..94405a5 --- /dev/null +++ b/web-player/src/lib/data/libraryTracks.ts @@ -0,0 +1,41 @@ +import type { LibraryTrack, TrackStatus } from '$lib/types'; + +export type TrackTone = 'success' | 'neutral' | 'danger'; + +export const TRACK_STATUS: Record = { + Completed: { label: 'Publicada', tone: 'success' }, + Processing: { label: 'Procesando', tone: 'neutral' }, + Pending: { label: 'En cola', tone: 'neutral' }, + Failed: { label: 'Con error', tone: 'danger' } +}; + +export const TRACK_FILTERS = [ + { value: 'all', label: 'Todas', statuses: null }, + { value: 'published', label: 'Publicadas', statuses: ['Completed'] }, + { value: 'processing', label: 'Procesando', statuses: ['Pending', 'Processing'] }, + { value: 'failed', label: 'Con error', statuses: ['Failed'] } +] as const satisfies readonly { + value: string; + label: string; + statuses: readonly TrackStatus[] | null; +}[]; + +export type TrackFilter = (typeof TRACK_FILTERS)[number]['value']; + +export function filterLibraryTracks( + tracks: LibraryTrack[], + query: string, + filter: TrackFilter +): LibraryTrack[] { + const statuses: readonly TrackStatus[] | null = + TRACK_FILTERS.find((option) => option.value === filter)?.statuses ?? null; + const needle = query.trim().toLowerCase(); + + return tracks.filter( + (track) => + (!statuses || statuses.includes(track.status)) && + (!needle || + track.title.toLowerCase().includes(needle) || + (track.artist ?? '').toLowerCase().includes(needle)) + ); +} diff --git a/web-player/src/lib/data/uploadQueue.test.ts b/web-player/src/lib/data/uploadQueue.test.ts new file mode 100644 index 0000000..153f0e9 --- /dev/null +++ b/web-player/src/lib/data/uploadQueue.test.ts @@ -0,0 +1,45 @@ +import { describe, expect, it } from 'vitest'; +import { + summarizeQueue, + titleFromFileName, + toQueuedUpload, + uploadError, + UPLOAD_MAX_BYTES +} from '$lib/data/uploadQueue'; + +function file(name: string, size = 1024) { + return new File([new Uint8Array(size)], name); +} + +describe('titleFromFileName', () => { + it('drops the extension and track number and humanizes underscores', () => { + expect(titleFromFileName('05_ultima_ola_master.wav')).toBe('Ultima ola master'); + expect(titleFromFileName('12 - Niebla.flac')).toBe('Niebla'); + }); + + it('keeps the base name when nothing is left after cleaning', () => { + expect(titleFromFileName('07.mp3')).toBe('07'); + }); +}); + +describe('uploadError', () => { + it('accepts supported formats', () => { + for (const name of ['a.wav', 'a.FLAC', 'a.mp3', 'a.aiff']) { + expect(uploadError(file(name))).toBeNull(); + } + }); + + it('rejects unsupported formats, empty and oversized files', () => { + expect(uploadError(file('portada.psd'))).toBe('Formato no compatible'); + expect(uploadError(file('a.wav', 0))).toBe('Archivo vacío'); + const big = { name: 'a.wav', size: UPLOAD_MAX_BYTES + 1 } as File; + expect(uploadError(big)).toBe('Supera 500 MB'); + }); +}); + +describe('summarizeQueue', () => { + it('counts ready and failed items', () => { + const items = [file('a.wav'), file('b.mp3'), file('c.psd')].map(toQueuedUpload); + expect(summarizeQueue(items)).toEqual({ ready: 2, failed: 1 }); + }); +}); diff --git a/web-player/src/lib/data/uploadQueue.ts b/web-player/src/lib/data/uploadQueue.ts new file mode 100644 index 0000000..2d73a99 --- /dev/null +++ b/web-player/src/lib/data/uploadQueue.ts @@ -0,0 +1,98 @@ +export const UPLOAD_MAX_BYTES = 500 * 1024 * 1024; +export const UPLOAD_FORMATS = ['wav', 'flac', 'aiff', 'aif', 'mp3']; + +export type Visibility = 'private' | 'public'; + +export interface QueuedUpload { + id: string; + file: File; + title: string; + format: string; + error: string | null; + duration: number | null; +} + +export function fileExtension(name: string): string { + const dot = name.lastIndexOf('.'); + return dot < 0 ? '' : name.slice(dot + 1).toLowerCase(); +} + +export function titleFromFileName(name: string): string { + const base = name.replace(/\.[^.]+$/, ''); + const cleaned = base + .replace(/^\d{1,3}\s*[-_.)]\s*/, '') + .replace(/[_]+/g, ' ') + .replace(/\s+/g, ' ') + .trim(); + if (cleaned === '') return base; + return cleaned.charAt(0).toUpperCase() + cleaned.slice(1); +} + +export function uploadError(file: File): string | null { + if (!UPLOAD_FORMATS.includes(fileExtension(file.name))) return 'Formato no compatible'; + if (file.size > UPLOAD_MAX_BYTES) return 'Supera 500 MB'; + if (file.size === 0) return 'Archivo vacío'; + return null; +} + +export function toQueuedUpload(file: File): QueuedUpload { + return { + id: crypto.randomUUID(), + file, + title: titleFromFileName(file.name), + format: fileExtension(file.name).toUpperCase() || '?', + error: uploadError(file), + duration: null + }; +} + +export function summarizeQueue(items: QueuedUpload[]): { ready: number; failed: number } { + const failed = items.filter((item) => item.error !== null).length; + return { ready: items.length - failed, failed }; +} + +async function readEntries(reader: FileSystemDirectoryReader): Promise { + const all: FileSystemEntry[] = []; + for (;;) { + const batch = await new Promise((resolve, reject) => + reader.readEntries(resolve, reject) + ); + if (batch.length === 0) return all; + all.push(...batch); + } +} + +async function filesFromEntry(entry: FileSystemEntry): Promise { + if (entry.isFile) { + const file = await new Promise((resolve, reject) => + (entry as FileSystemFileEntry).file(resolve, reject) + ); + return [file]; + } + if (!entry.isDirectory) return []; + const children = await readEntries((entry as FileSystemDirectoryEntry).createReader()); + return (await Promise.all(children.map(filesFromEntry))).flat(); +} + +export async function filesFromDrop(transfer: DataTransfer): Promise { + const entries = Array.from(transfer.items) + .map((item) => item.webkitGetAsEntry?.() ?? null) + .filter((entry): entry is FileSystemEntry => entry !== null); + if (entries.length === 0) return Array.from(transfer.files); + return (await Promise.all(entries.map(filesFromEntry))).flat(); +} + +export function readDuration(file: File): Promise { + return new Promise((resolve) => { + const url = URL.createObjectURL(file); + const audio = new Audio(); + const done = (value: number | null) => { + URL.revokeObjectURL(url); + resolve(value); + }; + audio.preload = 'metadata'; + audio.onloadedmetadata = () => done(Number.isFinite(audio.duration) ? audio.duration : null); + audio.onerror = () => done(null); + audio.src = url; + }); +} diff --git a/web-player/src/lib/server/mappers.ts b/web-player/src/lib/server/mappers.ts index 314c2db..6149532 100644 --- a/web-player/src/lib/server/mappers.ts +++ b/web-player/src/lib/server/mappers.ts @@ -1,5 +1,14 @@ import type { components } from '$lib/api/schema'; -import type { Album, LikedTrack, ListeningStats, Mix, Paged, Playlist, Track } from '$lib/types'; +import type { + Album, + LibraryTrack, + LikedTrack, + ListeningStats, + Mix, + Paged, + Playlist, + Track +} from '$lib/types'; type TrackDto = components['schemas']['TrackApplicationResponse']; type AlbumDto = components['schemas']['AlbumApplicationResponse']; @@ -30,6 +39,15 @@ export function toDatedTrack(dto: TrackDto): Track & { date: string } { return { ...toTrack(dto), date: dto.createdAt }; } +export function toLibraryTrack(dto: TrackDto, albumTitle: string | null): LibraryTrack { + return { + ...toDatedTrack(dto), + status: dto.audioStatus, + genres: dto.tags, + albumTitle + }; +} + export function toLikedTrack(dto: TrackDto): LikedTrack { return { ...toTrack(dto), likedAt: new Date(dto.createdAt).getTime() }; } diff --git a/web-player/src/lib/types.ts b/web-player/src/lib/types.ts index 5eedb54..35b2e81 100644 --- a/web-player/src/lib/types.ts +++ b/web-player/src/lib/types.ts @@ -17,6 +17,15 @@ export interface Track { listensCount: number; } +export type TrackStatus = 'Pending' | 'Processing' | 'Completed' | 'Failed'; + +export interface LibraryTrack extends Track { + date: string; + status: TrackStatus; + genres: string[]; + albumTitle: string | null; +} + export interface LikedTrack extends Track { likedAt: number; } diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte index 8d31a5a..5bb2990 100644 --- a/web-player/src/routes/(app)/albums/+page.svelte +++ b/web-player/src/routes/(app)/albums/+page.svelte @@ -36,7 +36,7 @@ {#if items.length > 0} -
+
{#each items as album, i (album.id)} > { + 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); +} export const load: PageServerLoad = async ({ locals, url, fetch }) => { const user = requireUser(locals, url); const api = apiFor({ fetch, locals }); - const result = await api.GET('/tracks/users/{userId}', { - params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: LIBRARY_PAGE_SIZE } } - }); + 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(result, 'No se pudo cargar tu biblioteca.'), toDatedTrack) + tracks: toPage(unwrapOrError(tracksResult, 'No se pudo cargar tu biblioteca.'), (dto) => + toLibraryTrack(dto, albumTitles.get(dto.id) ?? null) + ), + albums, + albumTrackIds, + genres: genresResult.data ?? [] }; }; -export const actions: Actions = { - deleteTrack: authedAction(async ({ api, form }) => { - const trackId = formString(form, 'trackId'); - if (!trackId) return fail(400, { message: 'Falta la canción.' }); +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 }; + }); +} - const result = await api.DELETE('/tracks/{id}', { - params: { path: { id: trackId } } - }); - return failOnError(result, 'No se pudo borrar la canción.') ?? { deleted: true }; +export const actions: Actions = { + deleteTracks: tagged('deleteTracks', async ({ api, form }) => { + const trackIds = formIds(form, 'trackIds'); + if (trackIds.length === 0) return fail(400, { message: 'Falta la canción.' }); + + const results = await Promise.all( + trackIds.map((id) => api.DELETE('/tracks/{id}', { params: { path: { id } } })) + ); + const failed = results.find((result) => result.error); + return ( + (failed && + failOnError( + failed, + trackIds.length === 1 + ? 'No se pudo borrar la canción.' + : '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 3b5ac1e..45a4314 100644 --- a/web-player/src/routes/(app)/library/+page.svelte +++ b/web-player/src/routes/(app)/library/+page.svelte @@ -1,81 +1,82 @@ + + - Tus canciones subidas + Gestionar música - {#snippet actions()} - {#if items.length > 0} - - {/if} - {/snippet} - + title="Gestionar música" + description="{plural(total, 'canción', 'canciones')} subida{total === 1 + ? '' + : 's'}. Puedes borrarlas o reproducirlas desde aquí." + /> - {#if items.length > 0} - + {#each SECTIONS as option (option.value)} + + {/each} +
+ + {#if section === 'tracks'} + (deleting = items.find((item) => item.id === track.id) ?? null), - icon: X, - label: 'Borrar canción' - }} + errorMessage={form?.action === 'deleteTracks' ? form.message : undefined} /> + {:else if section === 'albums'} + {#key resetKey} + + {/key} {:else} - - {#snippet actions()} - - {/snippet} - + {/if} - - (deleting = null)} - title="¿Borrar «{deleting?.title ?? ''}»?" - description="Esta acción no se puede deshacer, la canción se eliminará de tu biblioteca, de tus álbumes y de las playlists donde esté." - confirmLabel="Borrar" - action="?/deleteTrack" - fields={{ trackId: deleting?.id ?? '' }} -/> diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css index c6d0ea4..b2fa099 100644 --- a/web-player/src/routes/layout.css +++ b/web-player/src/routes/layout.css @@ -271,6 +271,16 @@ } @layer base { + input[type='number'] { + appearance: textfield; + } + + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + appearance: none; + margin: 0; + } + svg.lucide { stroke-width: 1.5; }