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>
61 lines
1.7 KiB
Svelte
61 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
// The header of every page that is one collection of tracks, album and
|
|
// playlist (milestone 494): cover, title, a line or two of facts, then
|
|
// Play and Shuffle (PlayActions).
|
|
import type { Snippet } from 'svelte';
|
|
import PlayActions from './PlayActions.svelte';
|
|
import Cover from './Cover.svelte';
|
|
|
|
let {
|
|
title,
|
|
coverUrl,
|
|
coverAlt = '',
|
|
playDisabled = false,
|
|
onPlay,
|
|
onShuffle,
|
|
titleExtra,
|
|
tools,
|
|
children,
|
|
actions
|
|
}: {
|
|
title: string;
|
|
coverUrl: string | null | undefined;
|
|
coverAlt?: string;
|
|
playDisabled?: boolean;
|
|
onPlay: () => void;
|
|
onShuffle: () => void;
|
|
/** Beside the title, e.g. the album's like button. */
|
|
titleExtra?: Snippet;
|
|
/** Top right: refresh, link, edit, delete. */
|
|
tools?: Snippet;
|
|
/** The facts under the title. */
|
|
children?: Snippet;
|
|
/** After Play and Shuffle, e.g. an admin's Refetch cover. */
|
|
actions?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<header class="mb-6 flex items-start gap-4">
|
|
<div class="h-32 w-32 shrink-0 overflow-hidden rounded-md md:h-40 md:w-40">
|
|
<Cover src={coverUrl ?? undefined} alt={coverAlt} />
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1 space-y-2">
|
|
<div class="flex items-start gap-3">
|
|
<h1 class="min-w-0 truncate font-display text-2xl font-medium text-text-primary">{title}</h1>
|
|
{#if titleExtra}{@render titleExtra()}{/if}
|
|
{#if tools}
|
|
<div class="ml-auto flex shrink-0 items-center gap-1">{@render tools()}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if children}{@render children()}{/if}
|
|
|
|
<div class="pt-1">
|
|
<PlayActions name={title} disabled={playDisabled} {onPlay} {onShuffle}>
|
|
{#if actions}{@render actions()}{/if}
|
|
</PlayActions>
|
|
</div>
|
|
</div>
|
|
</header>
|