From 39fabc8d0d4d9966c8d856530287578a50a6a808 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Tue, 16 Jun 2026 21:08:14 -0400 Subject: [PATCH] =?UTF-8?q?docs(phase-10):=20record=20Mix=20hero-overlay?= =?UTF-8?q?=20landing=20=E2=80=94=20ReleaseHeroOverlay=20in=20CLAUDE.md,?= =?UTF-8?q?=20PLAN=E2=86=92COMPLETED,=20spec=20marked=20shipped?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- COMPLETED.md | 12 ++++++++++++ DeepDrftPublic.Client/CLAUDE.md | 3 ++- PLAN.md | 8 -------- product-notes/mix-detail-hero-overlay.md | 3 +-- 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/COMPLETED.md b/COMPLETED.md index 5d87e32..0b047b9 100644 --- a/COMPLETED.md +++ b/COMPLETED.md @@ -98,6 +98,18 @@ Newest entries at the top. Group by phase/wave header (mirroring `PLAN.md` / `CM --- +## Phase 10 — Mix detail Hero + MetaContent overlay (presentation only) + +**Landed:** 2026-06-16 on dev. + +- **What:** Extracted a shared **`ReleaseHeroOverlay`** presentational component (`DeepDrftPublic.Client/Controls/ReleaseHeroOverlay.razor` + `.razor.css`) that both Session detail and Mix detail now consume — one source of truth for the background-image hero with all metadata overlaid (genre/date + share top row; cover-thumb/title/artist + play bottom row). Mix detail's hero is now an overlaid ~600px square cover, replacing the stacked masthead + 220px cover + meta-divider block, freeing more canvas for the lava-lamp visualizer. The Phase 10 reframe top row (`TopRowCenter` controls + lava-lamp `TopRightAction`) is preserved unchanged. `ReleaseDetailScaffold` gained a `bool ShowHeader = true` gate (slot-consistent with `ShowMeta`/`ShowShareRow`) to suppress the duplicate masthead for Mix. The background-image surface is a plain `
` (no `MudPaper`). +- **Why:** The Mix detail page carried a stacked masthead + 220px cover + meta-divider block that kept the overlay aesthetic of Sessions from applying and wasted vertical canvas the lava-lamp visualizer could use. Extracting `ReleaseHeroOverlay` delivered the DRY win (one overlay, no duplication) and brought Mix into the same design family as Sessions, while the `ShowHeader` gate gave the scaffold a clean suppression mechanism rather than an empty-fragment hack. +- **Shape:** New `DeepDrftPublic.Client/Controls/ReleaseHeroOverlay.razor` (+ `.razor.css`) — the shared overlay, parameterized for `HeroImageKey`, `PlaceholderIcon`, `CoverThumbKey`, `Title`, `Artist`, `Genre`, `ReleaseDate`, `ShareContent` slot, `PlayContent` slot, `Class`. `SessionDetail.razor` — inline hero-overlay replaced by ``; behavior-preserving lift. `SessionDetail.razor.css` — overlay cascade moved to the shared component; page-specific rules remain. `MixDetail.razor` — old `.mix-detail-cover` `Hero` slot replaced with `` in the scaffold's `Hero` slot; `MetaContent` dropped (metadata now in the overlay); share row moved into the overlay's `ShareContent` slot; scaffold used with `ShowHeader="false"`. `MixDetail.razor.css` — `mix-hero` square/medium sizing override added; `.mix-detail-cover` removed. `ReleaseDetailScaffold.razor` — `bool ShowHeader = true` gate added around the default header region. + +Full design, DRY trade-offs, acceptance criteria, and the open questions resolved during implementation: `product-notes/mix-detail-hero-overlay.md`. + +--- + ## CMS Grid Refinements ### `CmsAlbumBrowser` special-action column promotion diff --git a/DeepDrftPublic.Client/CLAUDE.md b/DeepDrftPublic.Client/CLAUDE.md index 458db8d..4288d4f 100644 --- a/DeepDrftPublic.Client/CLAUDE.md +++ b/DeepDrftPublic.Client/CLAUDE.md @@ -10,7 +10,7 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream ## Actual structure -- `Pages/`: Routable components. `Home.razor` (hero/about), `TracksView.razor` (track gallery with pagination/sorting), `TrackDetail.razor` (single-track detail view with cover, metadata, play affordance), `SessionDetail.razor` (session detail — hero-dominant overlay composition: large background hero image with darkening gradient shim, cover thumbnail + title + play button overlaid near the hero's bottom, genre/date/share overlaid at the top; uses `MudContainer MaxWidth="Large"`; **does not compose `ReleaseDetailScaffold`** — diverges from TrackDetail/MixDetail, so `PlayTrack` is wired directly in its own `@code` block). **No demo pages** (`Counter.razor`, `Weather.razor` do not exist). +- `Pages/`: Routable components. `Home.razor` (hero/about), `TracksView.razor` (track gallery with pagination/sorting), `TrackDetail.razor` (single-track detail view with cover, metadata, play affordance), `SessionDetail.razor` (session detail — hero-dominant overlay composition rendered via ``: large background hero image with darkening gradient shim, cover thumbnail + title + play button overlaid near the hero's bottom, genre/date/share overlaid at the top; uses `MudContainer MaxWidth="Large"`; **does not compose `ReleaseDetailScaffold`** — `PlayTrack` is wired directly in its own `@code` block), `MixDetail.razor` (mix detail — composes `ReleaseDetailScaffold` with `TopRowCenter` controls + `TopRightAction` lava-lamp; hero+meta rendered via `` in the scaffold's `Hero` slot with `ShowHeader="false"` suppressing the duplicate masthead; square ~600px cover-as-background with metadata overlaid). **No demo pages** (`Counter.razor`, `Weather.razor` do not exist). - `Layout/`: `MainLayout.razor` (root layout, wraps in `AudioPlayerProvider`, hosts theme switcher), `DeepDrftMenu.razor` (branded menu bar), `NavMenu.razor` (nav list), `Pages.cs` (centralised nav index — `MenuPages` for header, `AllPages` for exhaustive list). - `Controls/`: Reusable components. - `TrackCard.razor`: Individual track display (image, name, artist, album, genre, release date). Play/pause icon controlled via `IsPaused` parameter. @@ -23,6 +23,7 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream - `AudioPlayerBar/PlayStateIcon.razor`: Icon button encapsulating service subscription + transport-state icon selection. Injects `IPlayerService`, subscribes to `StateChanged`, calls `PlaybackIcons.Resolve()` to determine icon and active state. - `AudioPlayerBar/LevelMeterFab.razor`: Floating-action button replacing the static FAB in the minimized dock. Renders a continuous vertical fill inside the music-note silhouette that tracks live audio level (0–100%), with fixed three-zone gradient (green 0–60%, yellow 60–85%, orange 85–100%). Note silhouette always visible at 25% opacity; idle when paused/stopped. Reuses spectrum-callback infrastructure. - `SpectrumVisualizer.razor`: Bar-graph spectrum display, driven by `getSpectrumData` JS callback. + - `ReleaseHeroOverlay.razor`: Shared presentational overlay shell consumed by both `SessionDetail` and `MixDetail`. Renders a background-image hero region with genre/date/share overlaid at the top and title/artist/play at the bottom. Parameters: `HeroImageKey`, `PlaceholderIcon`, `CoverThumbKey` (optional cover thumb in bottom row), `Title`, `Artist`, `Genre`, `ReleaseDate`, `ShareContent` (slot), `PlayContent` (slot), `Class` (per-page aspect/sizing override). Owns no player logic or data fetch; each consuming page passes its own play and share slots. Overlay shell is plain `
`s; background-image surface is a `
` (no `MudPaper`). - `Helpers/`: Utilities and mapper functions. - `PlaybackIcons.cs`: Static `Resolve(isPlaying, isPaused, trackId, currentTrackId)` method — the sole glyph-mapping source for transport icons across all surfaces. Returns `(Icon, IsActive, IsPaused)` tuple. - `Services/`: Audio player + dark-mode services. diff --git a/PLAN.md b/PLAN.md index 559a390..2e4fa8a 100644 --- a/PLAN.md +++ b/PLAN.md @@ -219,14 +219,6 @@ Heat→intensity and collision soft↔hard transfer functions are **staff-engine **Sequenced as four reframe waves.** `Wave R1 → Wave R2 → (Wave R3 ‖ Wave R4)`. Wave R1 (de-noise + dynamic footer clip + icon redraw) is a cheap unblock for a clean substrate. Wave R2 (wax-blob physics + 2D collision) is the load-bearing prerequisite — prove the lava before the color and the UI. Wave R3 (OKLab three-color gradient, the three motions) and Wave R4 (seven controls — including the new waveform-width knob — + NowPlaying-styled inline knob-bar + widened state to seven properties + extended bridge handle) both depend on Wave R2 but are independent of each other. **Both prior open Daniel calls are now decided:** controls-UI is an inline collapse/expand knob-bar (not popover/drawer); per-segment color is mix-time-keyed. -### Phase 10 — Mix detail Hero + MetaContent overlay (presentation only) - -A presentation pass over the **Mix detail Hero + MetaContent** that mirrors the already-shipped **Session detail** hero-overlay composition: the **cover art becomes a background image** with **all metadata overlaid** on top of a **max-medium square cover-art region**, replacing the stacked masthead + 220px cover + meta-divider block. Consolidates the view, frees more canvas for the lava-lamp visualizer, and brings Mix into the same design family as Sessions. **No renderer/state/bridge change; the Phase 10 reframe top row (`TopRowCenter` controls + lava-lamp `TopRightAction`) is preserved unchanged** — this touches only the region below it. - -**DRY recommendation (load-bearing, open for Daniel):** extract a shared **`ReleaseHeroOverlay`** presentational component (lifted from Sessions' current inline hero) that both pages consume — one source of truth for the overlay, divergence (Mix's visualizer backdrop, the square-medium aspect vs. Sessions' wide hero) riding parameters + a CSS class, per the standing "one source, multiple views" preference. Cost: edits the shipped Sessions page (regression surface — mitigated by a behavior-preserving lift + before/after visual check). Fallback: per-page copy in Mix (fast, zero Sessions risk, takes on duplication debt — recommended only if Sessions is considered too load-bearing to touch). **Plain-`
` overlay shell, no `MudCard`/`MudPaper` layout wrapper; `::deep` required on every class landing on a Mud child's native output.** - -Full design, the three DRY directions with trade-offs, the square/medium sizing, how the Phase 10 layout is preserved, acceptance criteria, and the open questions for Daniel: `product-notes/mix-detail-hero-overlay.md`. - --- ## Phase 11 — Public Site Enhancements diff --git a/product-notes/mix-detail-hero-overlay.md b/product-notes/mix-detail-hero-overlay.md index 9aae997..b4f2eea 100644 --- a/product-notes/mix-detail-hero-overlay.md +++ b/product-notes/mix-detail-hero-overlay.md @@ -1,7 +1,6 @@ # Mix Detail — Hero + MetaContent overlay rework (mirror the Sessions hero) — Design Spec -Status: **design-complete, implementation-ready.** Author: product-designer. Date: 2026-06-16. -**No code has been written by this doc.** +Status: **shipped on dev** (2026-06-16). Author: product-designer. Date: 2026-06-16. ## 0. Goal