Admin
58eb670fed
Add src/lib/components/ui/Artwork.svelte and Avatar.svelte (B.3) and migrate every use of Cover, PlaylistArt, MixArt and ArtistAvatar (Sidebar, Queue, TrackInfo, TrackContextMenu, AlbumContextMenu, TrackTitleCell, AlbumCard, PlaylistCard, MixTile, AlbumHeader, PlaylistHeader, Home, Explore, mix, user profile, TopBar, MobileHeader). Remove the 4 old components. Artwork: size decides both dimension and radius automatically (cover-*/radius tokens from the earlier token pass); fallback chain is src -> mosaic (>=4 trackIds) -> first cover -> placeholder, cascading if each step fails (previously split across 3 components with slightly different logic each). Adds a 'fill' size (aspect-square w-full), not in the spec, needed for fluid grid cards until MediaCard lands later. TrackTitleCell's `coverSize` prop (free-form Tailwind classes) becomes `size: 'sm'|'lg'`, delegating to Artwork. SearchResultRow loses its `kind` prop and the per-type radius (now decided by Artwork/Avatar). Product decision (not blocking): remove the name under the profile avatar on /u/[id] since it duplicated the CollectionHeader title. Small radius/size deltas are documented in the plan's README (auto-radius by size replaces ad-hoc classes; see table B.1.1/B.1.2). Verified with npm run check/build; no authenticated visual QA (Docker unavailable this session).
55 lines
1.5 KiB
Svelte
55 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import Play from '@lucide/svelte/icons/play';
|
|
import Artwork from './Artwork.svelte';
|
|
import { player } from '$lib/player/player.svelte';
|
|
import { queueItemForTarget } from '$lib/tracks';
|
|
import { mixItemTarget, type Mix } from '$lib/mixes';
|
|
|
|
interface Props {
|
|
mix: Mix;
|
|
index?: number;
|
|
class?: string;
|
|
}
|
|
|
|
let { mix, index = 0, class: klass = '' }: Props = $props();
|
|
|
|
const trackIds = $derived(mix.items.map((item) => item.trackId));
|
|
|
|
function play(event: MouseEvent) {
|
|
event.preventDefault();
|
|
const items = mix.items.map((item) => queueItemForTarget(mixItemTarget(item)));
|
|
player.playQueue(items, 0);
|
|
}
|
|
</script>
|
|
|
|
<a
|
|
href="/mixes/{mix.id}"
|
|
class="group/tile animate-enter block cursor-pointer {klass}"
|
|
style="--i:{index}"
|
|
>
|
|
<Artwork
|
|
{trackIds}
|
|
size="fill"
|
|
alt={mix.title}
|
|
class="rounded-art transition duration-300 group-hover/tile:scale-105"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent from-45% to-scrim/40"
|
|
></div>
|
|
<button
|
|
type="button"
|
|
onclick={play}
|
|
aria-label="Reproducir {mix.title}"
|
|
class="absolute right-2.5 bottom-2.5 grid h-9.5 w-9.5 place-items-center rounded-full border border-on-art/12 bg-ink/76 text-fg opacity-0 backdrop-blur transition-opacity duration-150 group-hover/tile:opacity-100"
|
|
>
|
|
<Play class="h-3.5 w-3.5" fill="currentColor" />
|
|
</button>
|
|
</Artwork>
|
|
<div class="mt-3.25 truncate text-sm font-semibold text-fg">
|
|
{mix.title}
|
|
</div>
|
|
{#if mix.subtitle}
|
|
<div class="mt-1 truncate text-xs text-fg-3">{mix.subtitle}</div>
|
|
{/if}
|
|
</a>
|