diff --git a/DeepDrftPublic.Client/Pages/MixDetail.razor b/DeepDrftPublic.Client/Pages/MixDetail.razor index a53db34..e827cba 100644 --- a/DeepDrftPublic.Client/Pages/MixDetail.razor +++ b/DeepDrftPublic.Client/Pages/MixDetail.razor @@ -46,6 +46,21 @@ else BackHref="/mixes" BackLabel="All mixes" ShowMeta="@(hasGenre || hasDate)"> + +
+ @if (!string.IsNullOrEmpty(release.ImagePath)) + { + + } + else + { + + + + } +
+
@if (hasGenre) { diff --git a/DeepDrftPublic.Client/Pages/MixDetail.razor.css b/DeepDrftPublic.Client/Pages/MixDetail.razor.css index b544b40..0f0b971 100644 --- a/DeepDrftPublic.Client/Pages/MixDetail.razor.css +++ b/DeepDrftPublic.Client/Pages/MixDetail.razor.css @@ -3,3 +3,13 @@ position: relative; z-index: 1; } + +/* Medium square cover — deliberately smaller than the 360px cut cover so the + waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */ +.mix-detail-cover { + aspect-ratio: 1 / 1; + max-width: 220px; + margin: 0 auto 2rem; + overflow: hidden; + box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent); +} diff --git a/DeepDrftPublic.Client/Pages/SessionDetail.razor b/DeepDrftPublic.Client/Pages/SessionDetail.razor index 10efeea..b83930d 100644 --- a/DeepDrftPublic.Client/Pages/SessionDetail.razor +++ b/DeepDrftPublic.Client/Pages/SessionDetail.razor @@ -37,6 +37,10 @@ else var heroKey = release.SessionMetadata?.HeroImageEntryKey; // Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder. var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath; + // Show the cover thumbnail only when it differs from what the hero displays. When there is no + // dedicated hero, the hero already falls back to release.ImagePath — rendering the cover too + // would duplicate the same image. + var showCover = !string.IsNullOrEmpty(release.ImagePath) && release.ImagePath != heroImage; var hasGenre = release.Genre is not null; var hasDate = release.ReleaseDate is not null; @@ -60,6 +64,13 @@ else } + @if (showCover) + { +
+ +
+ } @if (hasGenre) diff --git a/DeepDrftPublic.Client/Pages/SessionDetail.razor.css b/DeepDrftPublic.Client/Pages/SessionDetail.razor.css index 1c63a14..59aa8b4 100644 --- a/DeepDrftPublic.Client/Pages/SessionDetail.razor.css +++ b/DeepDrftPublic.Client/Pages/SessionDetail.razor.css @@ -12,3 +12,13 @@ background-position: center; background-repeat: no-repeat; } + +/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail, + smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */ +.session-detail-cover { + aspect-ratio: 1 / 1; + max-width: 220px; + margin: 0 auto 2rem; + overflow: hidden; + box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent); +}