Admin
478b90d75c
Albums previously had no cover concept at all: no picture upload
flow, no GET /albums/{id}/cover, and AlbumApplicationResponse's
image-key fields were plumbed but never populated. Description,
Pictures and TrackCount already lived on the shared Album base entity
for both local and external albums, so unifying the cover story only
required building the missing local-album picture pipeline.
Backend, cloning PlayList's existing async picture-processing
architecture exactly (MassTransit routing slip + saga), but making
the picture mandatory instead of optional (matching Track's pattern):
- AlbumPictures moves from all-nullable to required fields.
- New AlbumConfiguration (routes/sizes), deliberately without
PlayList's preset-picture fallback since a picture is now required
up front.
- CreateAlbum now takes a mandatory PictureIntentId, validates and
consumes the upload intent, and kicks off the same
copy-to-final -> resize -> upload -> update-entity routing slip
PlayLists use, via a new AlbumProcessingState saga that marks the
album Failed on a picture-processing failure.
- UpdateAlbum takes an optional NewPictureIntentId to replace the
cover later.
- New GET /albums/{id}/cover and POST /albums/upload-picture
endpoints, mirroring the playlist ones.
- New EF migration for the AlbumProcessingState saga table.
Frontend:
- AlbumForm gains a cover dropzone, required on create and optional
on edit (via ImageDropzone's new `required` prop), uploaded through
the same presigned-upload helper playlists use.
- New /api/albums/{id}/cover proxy route.
- PlaylistArt gains a generic coverUrl prop so AlbumHeader and the
album list/detail cards render the real uploaded cover instead of
only the track mosaic fallback.
Delete-time picture cleanup for albums is intentionally left as a
follow-up, matching the existing gap in playlist deletion.
94 lines
3.0 KiB
Svelte
94 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { player, queueIdForTrack, toQueueItems } from '$lib/player/player.svelte';
|
|
import Page from '$lib/components/ui/Page.svelte';
|
|
import Modal from '$lib/components/ui/Modal.svelte';
|
|
import Alert from '$lib/components/ui/Alert.svelte';
|
|
import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import AlbumHeader from './components/AlbumHeader.svelte';
|
|
import AlbumTrackTable from './components/AlbumTrackTable.svelte';
|
|
import LibraryPicker from './components/LibraryPicker.svelte';
|
|
|
|
let { data, form } = $props();
|
|
|
|
const album = $derived(data.album);
|
|
const tracks = $derived(data.tracks);
|
|
const library = $derived(data.library);
|
|
const isOwner = $derived(data.isOwner);
|
|
|
|
let editing = $state(false);
|
|
let confirmingDelete = $state(false);
|
|
|
|
const isCurrentQueue = $derived(
|
|
tracks.some((track) => queueIdForTrack(track) === player.current.id)
|
|
);
|
|
|
|
function playAll() {
|
|
if (tracks.length === 0) return;
|
|
if (isCurrentQueue) player.toggle();
|
|
else player.playQueue(toQueueItems(tracks), 0);
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{album.title}</title>
|
|
<meta name="description" content="Álbum {album.title}." />
|
|
</svelte:head>
|
|
|
|
<Page>
|
|
<AlbumHeader
|
|
title={album.title}
|
|
description={album.description ?? undefined}
|
|
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
|
|
trackIds={tracks.map((track) => track.id)}
|
|
coverUrl="/api/albums/{album.id}/cover?size=large"
|
|
playing={isCurrentQueue && player.playing}
|
|
{isOwner}
|
|
onPlayAll={playAll}
|
|
onEdit={() => (editing = true)}
|
|
onDelete={() => (confirmingDelete = true)}
|
|
/>
|
|
|
|
{#if form?.message}
|
|
<Alert tone="danger" class="mt-6">{form.message}</Alert>
|
|
{/if}
|
|
|
|
{#if tracks.length > 0}
|
|
<AlbumTrackTable {tracks} {isOwner} />
|
|
{/if}
|
|
|
|
{#if isOwner && library.length > 0}
|
|
<LibraryPicker {library} />
|
|
{/if}
|
|
</Page>
|
|
|
|
<Modal open={editing} onClose={() => (editing = false)} title="Editar álbum">
|
|
<AlbumForm
|
|
action="?/edit"
|
|
initialTitle={album.title}
|
|
initialDescription={album.description ?? ''}
|
|
initialReleaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
|
|
coverFallbackUrl="/api/albums/{album.id}/cover?size=medium"
|
|
formMessage={form?.message}
|
|
submitLabel="Guardar"
|
|
submittingLabel="Guardando…"
|
|
onCancel={() => (editing = false)}
|
|
onSuccess={() => (editing = false)}
|
|
/>
|
|
</Modal>
|
|
|
|
<Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
|
|
<h2 class="text-lg font-semibold tracking-tight text-fg">
|
|
¿Eliminar «{album.title}»?
|
|
</h2>
|
|
<p class="mt-2 text-base text-fg-3">
|
|
Esta acción no se puede deshacer. Las canciones que contiene seguirán en tu biblioteca.
|
|
</p>
|
|
<div class="mt-6 flex items-center justify-end gap-3">
|
|
<Button variant="secondary" onclick={() => (confirmingDelete = false)}>Cancelar</Button>
|
|
<form method="POST" action="?/delete">
|
|
<Button type="submit" variant="danger">Eliminar</Button>
|
|
</form>
|
|
</div>
|
|
</Modal>
|