AdminandClaude Sonnet 5
5dec00faf1
MediaCard pasa a construir su propio arte (src/trackIds vía Artwork size="fill", o un snippet art a medida) y su botón de reproducir (onPlay, con scrim y PlayButton glass en hover) en vez de depender de que cada wrapper le pase un snippet. Sustituye a AlbumCard, PlaylistCard y MixTile, que se borran junto con MediaGrid.svelte (sus grids pasan a los @utility grid-cards/grid-cards-lg/grid-tiles/ grid-wide de P1). format.ts gana albumMeta() y playlistMeta() (antes cálculos ad-hoc dentro de cada tarjeta). El tile de género en Explorar pasa de un style= con el gradiente inline a la receta @utility genre-tile + --tile-hue. De paso, corrige la pluralización "seguidor/es" del perfil de usuario que quedó suelta. Delta documentado: el hover-zoom del arte y el scrim+PlayButton (antes exclusivos de MixTile) pasan a ser comportamiento de MediaCard condicionado a la prop onPlay — se aplicarían a cualquier tarjeta futura que la use, por consistencia. Verificado con npm run check/build; sin QA visual autenticada (Docker no disponible en esta sesión). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
62 lines
1.4 KiB
Svelte
62 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import Artwork from './Artwork.svelte';
|
|
import PlayButton from './PlayButton.svelte';
|
|
|
|
interface Props {
|
|
href: string;
|
|
title: string;
|
|
subtitle?: string | null;
|
|
src?: string | null;
|
|
trackIds?: (string | number)[];
|
|
onPlay?: (event: MouseEvent) => void;
|
|
art?: Snippet;
|
|
oncontextmenu?: (event: MouseEvent) => void;
|
|
index?: number;
|
|
}
|
|
|
|
let {
|
|
href,
|
|
title,
|
|
subtitle,
|
|
src,
|
|
trackIds = [],
|
|
onPlay,
|
|
art,
|
|
oncontextmenu,
|
|
index = 0
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<a {href} class="group animate-enter min-w-0 text-left" style="--i:{index}" {oncontextmenu}>
|
|
<div class="relative">
|
|
{#if art}
|
|
{@render art()}
|
|
{:else}
|
|
<Artwork
|
|
{src}
|
|
{trackIds}
|
|
size="fill"
|
|
alt={title}
|
|
class="rounded-art transition duration-300 group-hover:scale-105"
|
|
/>
|
|
{/if}
|
|
{#if onPlay}
|
|
<div
|
|
class="pointer-events-none absolute inset-0 rounded-art bg-linear-to-b from-transparent from-45% to-scrim/40"
|
|
></div>
|
|
<PlayButton
|
|
variant="glass"
|
|
size="sm"
|
|
onclick={onPlay}
|
|
label="Reproducir {title}"
|
|
class="absolute right-2.5 bottom-2.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
<div class="mt-2.5 truncate text-sm text-fg">{title}</div>
|
|
{#if subtitle}
|
|
<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>
|
|
{/if}
|
|
</a>
|