diff --git a/COMPLETED.md b/COMPLETED.md index d635738..934fb89 100644 --- a/COMPLETED.md +++ b/COMPLETED.md @@ -556,7 +556,7 @@ Eliminated `!important` declarations from track card CSS by replacing MudBlazor ## Track Detail Page (/track/{entryKey}) -**Status:** Landed on 2026-06-06 (branch `track-detail-page`, merged to dev). +**Status:** Landed on 2026-06-06 (branch `track-detail-page`, merged to dev). Cover art integration completed on 2026-06-08. A focused, editorial single-track view in `DeepDrftPublic.Client`. The track gallery answers "what is in the library"; this page answers "tell me about *this* track" — full metadata, cover art, and a single prominent play affordance, styled to feel like a record-sleeve back-cover rather than a form. Link-only for now (reached from a gallery card / Now Playing), not a top-level nav entry. @@ -573,7 +573,7 @@ A focused, editorial single-track view in `DeepDrftPublic.Client`. The track gal **UI layout:** 1. Subtle back-link `← All tracks` to `/tracks`, muted low-emphasis text affordance. -2. Large square cover art block — placeholder themed `MudPaper` with `Album` glyph when cover unavailable (default state pending 2.1 image-vault wiring); will display `` once 2.1 lands. +2. Large square cover art block — displays album art via a `MudPaper` div with `background-image: url('api/image/{entryKey}')` when `ImagePath` is present; falls back to placeholder themed `MudPaper` with `Album` glyph when cover unavailable. 3. Title (TrackName, display-serif h3) / artist (h6, primary accent) masthead. 4. Prominent **Play** button under masthead with state-reactive label ("Play" / "Pause" / "Resume" keyed to current track and playback state via `PlayerService` subscription). 5. `MudDivider` separator. @@ -584,6 +584,7 @@ A focused, editorial single-track view in `DeepDrftPublic.Client`. The track gal **CSS classes (`DeepDrftPublic/wwwroot/styles/deepdrft-styles.css` §14):** - `deepdrft-track-detail-container` — centered single column, max-width, auto-margins, vertical padding. - `deepdrft-track-detail-cover` — square aspect-ratio frame, rounded, subtle shadow/border (light/dark theme-aware), `overflow: hidden` for clean image crop. +- `deepdrft-track-detail-cover-art` — applied to `MudPaper` div; sets `background-size: cover`, `background-position: center` for responsive fill within the cover frame. - `deepdrft-track-detail-masthead` — title/artist spacing, display-serif via existing `deepdrft-` font classes. - `deepdrft-track-detail-meta` — metadata block rhythm, small-caps muted labels. - `deepdrft-track-detail-back` — back-link affordance, muted color, hover treatment. @@ -596,7 +597,7 @@ A focused, editorial single-track view in `DeepDrftPublic.Client`. The track gal - Render mode `InteractiveWebAssembly` (server prerender → WASM hydrate) mirrors `TracksView` consistency. - `TrackDetailViewModel` is scoped (per-instance), not singleton — navigating between `/track/A` and `/track/B` reuses the same scoped instance, so `Load` must fully reset state to prevent cross-navigation bleed. - Play button implements the same `PlayerService.StateChanged` subscription pattern as `TracksView` — mandatory for label coherence when the dock bar drives state. -- Cover-art default (placeholder) is intentional and designed to be the resting state, not degraded; the page ships immediately without waiting for 2.1 image-vault wiring. Once 2.1 lands and `api/image/{entryKey}` exists on `DeepDrftContent`, the `` binding swaps in without further component changes (the placeholder's `onerror` fallback ensures graceful degradation if a vault entry is missing). +- Cover-art integration (2026-06-08): the page now displays album art via a `MudPaper` div with `background-image: url('api/image/{entryKey}')` when `ImagePath` is present; a placeholder with the `Album` glyph renders when unavailable. CSS background rendering degrades gracefully (blank surface) if a vault entry is missing. - Page is link-only navigation (not in the header `MenuPages`); reachability depends on inbound links from `TrackCard` and Now Playing surfaces, which were wired simultaneously. ---