Changes
This commit is contained in:
@@ -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)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user