bvandeusenandClaude Opus 5.5
918db27fec
release / govulncheck (push) Successful in 42s
release / web (push) Successful in 1m30s
release / go (push) Successful in 1m48s
release / integration (push) Successful in 5m51s
release / android (push) Successful in 6m53s
release / Build signed APK (releases and dev) (push) Successful in 7m14s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Successful in 1m29s
release / Verify release artifacts (tag releases only) (push) Skipped
- CollectionHeader holds cover, title, facts, then Play and Shuffle, for album and playlist. The playlist page gains Play and Shuffle; it had neither. The cover uses the shared Cover component, so the playlist header also gets the fallback image. - PlayActions is the one Play and Shuffle pair: filled Play, outlined Shuffle, on album, playlist and artist pages (operator, 2026-10-08). The artist page's round icon button said Play but shuffled; Play now keeps the server's order, and Shuffle shuffles. - PageColumn is the playlist page's centred column, now used by album, playlist, Liked, History and Search → Tracks. - The playlist page builds its queue with playlistTrackToRef, the shared converter, in place of its own copy. Its copy skipped only removed tracks, so a missing file (#2527) could still be queued from there. - shuffled() in lib/utils is the one shuffle, replacing three private copies (album page, artist page, ArtistCard). - The album's refetch error now uses text-error-fg. `text-oxblood` is not a colour in the theme, so it never rendered. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
74 lines
2.3 KiB
Svelte
74 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { shuffled } from '#lib/utils/shuffle.js';
|
|
import type { ArtistRef, TrackRef } from '#lib/api/types.js';
|
|
import { api } from '#lib/api/client.js';
|
|
import { playQueue, enqueueTracks } from '#lib/player/store.svelte.js';
|
|
import { Play } from 'lucide-svelte';
|
|
import ArtistMenu from './ArtistMenu.svelte';
|
|
import CardActionCluster from './CardActionCluster.svelte';
|
|
import Cover from './Cover.svelte';
|
|
import { listArtistTracks } from '#lib/api/artists.js';
|
|
|
|
let { artist }: { artist: ArtistRef } = $props();
|
|
|
|
let queueing = $state(false);
|
|
|
|
async function onPlayClick(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const tracks = await api.get<TrackRef[]>(`/api/artists/${artist.id}/tracks`);
|
|
if (tracks.length === 0) return;
|
|
playQueue(shuffled(tracks), 0);
|
|
}
|
|
|
|
async function onAddToQueue(e: MouseEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (queueing) return;
|
|
queueing = true;
|
|
try {
|
|
const tracks = await listArtistTracks(artist.id);
|
|
if (tracks.length > 0) enqueueTracks(tracks);
|
|
} finally {
|
|
queueing = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="card group relative">
|
|
<a
|
|
href={`/artists/${artist.id}`}
|
|
class="block rounded focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<div class="art-wrap relative mx-auto aspect-square w-full overflow-hidden rounded-full bg-surface-hover">
|
|
<Cover
|
|
src={artist.cover_url}
|
|
shape="round"
|
|
fallback="artist"
|
|
class="transition-transform group-hover:scale-[1.03]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-label={`Play ${artist.name}`}
|
|
onclick={onPlayClick}
|
|
class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full"
|
|
>
|
|
<Play size={24} strokeWidth={1.5} fill="currentColor" />
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 truncate text-center text-sm font-medium text-text-primary">{artist.name}</div>
|
|
</a>
|
|
<CardActionCluster
|
|
likeEntityType="artist"
|
|
likeEntityId={artist.id}
|
|
onAdd={onAddToQueue}
|
|
addLabel={`Add ${artist.name} to queue`}
|
|
addDisabled={queueing}
|
|
>
|
|
{#snippet menu()}
|
|
<ArtistMenu artistId={artist.id} artistName={artist.name} />
|
|
{/snippet}
|
|
</CardActionCluster>
|
|
</div>
|
|
|