This commit is contained in:
2026-07-25 01:46:59 +02:00
parent a58464d523
commit f54ebec0eb
66 changed files with 3245 additions and 416 deletions
@@ -18,7 +18,7 @@
</script>
<svelte:head>
<title>Álbumes · Musify</title>
<title>Álbumes</title>
<meta name="description" content="Los álbumes que has publicado con tu música subida." />
</svelte:head>
@@ -38,7 +38,9 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
(track) => track.source === 'Local' && !inAlbum.has(track.id)
);
return { album, tracks, library, isOwner: Number(album.ownerUserId) === Number(user.sub) };
const isOwner = Number(album.ownerUserId) === Number(user.sub);
return { album, tracks, library, isOwner, section: isOwner ? '/albums' : null };
};
export const actions: Actions = {
@@ -31,13 +31,12 @@
</script>
<svelte:head>
<title>{album.title} · Musify</title>
<meta name="description" content="Álbum {album.title} en Musify." />
<title>{album.title}</title>
<meta name="description" content="Álbum {album.title}." />
</svelte:head>
<Page>
<AlbumHeader
id={album.id}
title={album.title}
description={album.description ?? undefined}
releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
@@ -1,15 +1,13 @@
<script lang="ts">
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import SquarePencil from '@lucide/svelte/icons/square-pen';
import Trash from '@lucide/svelte/icons/trash';
import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
import BackLink from '$lib/components/ui/BackLink.svelte';
import Button from '$lib/components/ui/Button.svelte';
import { hueFor } from '$lib/theme/color';
interface Props {
id: string;
title: string;
description?: string;
releaseYear?: number;
@@ -22,7 +20,6 @@
}
let {
id,
title,
description,
releaseYear,
@@ -44,20 +41,14 @@
);
</script>
<a
href="/albums"
class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
>
<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
<ArrowLeft class="h-4 w-4" />
</span>
Volver a tus álbumes
</a>
<BackLink
href={isOwner ? '/albums' : '/'}
label={isOwner ? 'Volver a tus álbumes' : 'Volver al inicio'}
/>
<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
<PlaylistArt
{trackIds}
hue={hueFor(id)}
size="large"
class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
/>
@@ -7,7 +7,6 @@
toQueueItems,
type ApiTrackLike
} from '$lib/player/player.svelte';
import { hueFor } from '$lib/theme/color';
import { fmtTime } from '$lib/format';
import IconButton from '$lib/components/ui/IconButton.svelte';
import TrackTable from '$lib/components/ui/TrackTable.svelte';
@@ -43,7 +42,6 @@
trackId={track.id}
title={track.title}
artist={track.artist}
hue={hueFor(track.id)}
explicit={track.isExplicit}
onClick={() => playFrom(i)}
/>
@@ -2,7 +2,6 @@
import { enhance } from '$app/forms';
import Plus from '@lucide/svelte/icons/plus';
import { player, toQueueItems, type ApiTrackLike } from '$lib/player/player.svelte';
import { hueFor } from '$lib/theme/color';
import { fmtTime } from '$lib/format';
import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -34,7 +33,6 @@
trackId={track.id}
title={track.title}
artist={track.artist}
hue={hueFor(track.id)}
explicit={track.isExplicit}
onClick={() => playFrom(i)}
>
@@ -18,7 +18,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
const album = unwrapOrError(albumRes, 'No se pudo cargar el álbum de YouTube Music.', 404);
return { album, playlists: playlistsRes.data?.items ?? [] };
return { album, playlists: playlistsRes.data?.items ?? [], section: null };
};
export const actions: Actions = {
@@ -1,11 +1,10 @@
<script lang="ts">
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import { player, type QueueItem } from '$lib/player/player.svelte';
import { hueFor } from '$lib/theme/color';
import { fmtTime } from '$lib/format';
import Page from '$lib/components/ui/Page.svelte';
import BackLink from '$lib/components/ui/BackLink.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Cover from '$lib/components/ui/Cover.svelte';
import Alert from '$lib/components/ui/Alert.svelte';
@@ -73,26 +72,17 @@
</script>
<svelte:head>
<title>{album.title} · Musify</title>
<meta name="description" content="Álbum {album.title} de {album.artist} en YouTube Music." />
<title>{album.title}</title>
<meta name="description" content="Álbum {album.title} de {album.artist}," />
</svelte:head>
<Page>
<a
href="/explore"
class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
>
<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
<ArrowLeft class="h-4 w-4" />
</span>
Volver a explorar
</a>
<BackLink href="/explore" label="Volver a explorar" />
<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
<Cover
trackId={album.albumId}
src={album.thumbnailUrl}
hue={hueFor(album.albumId)}
size="large"
alt={album.title}
class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
@@ -100,7 +90,7 @@
/>
<div class="min-w-0 flex-1">
<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">
{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} · YouTube Music
{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'}
</p>
<h1
class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
@@ -154,7 +144,6 @@
title={track.title}
artist={album.artist}
coverSrc={album.thumbnailUrl}
hue={hueFor(track.videoId)}
explicit={track.isExplicit}
onClick={() => playFrom(i)}
/>