diff --git a/src/ui/PodcastView/EpisodesPage.svelte b/src/ui/PodcastView/EpisodesPage.svelte index 395d9840..d4a11e58 100644 --- a/src/ui/PodcastView/EpisodesPage.svelte +++ b/src/ui/PodcastView/EpisodesPage.svelte @@ -131,7 +131,10 @@ border-radius: 8px; } + /* The text takes the rest of the row, so no space is left for a theme's auto + margins on images to move the cover into. */ > div { + flex: 1; min-width: 0; } diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte index 96faae67..59d4a2ee 100644 --- a/src/ui/PodcastView/PodcastView.svelte +++ b/src/ui/PodcastView/PodcastView.svelte @@ -320,6 +320,11 @@ --pn-surface: var(--background-primary); } + /* A mobile drawer has its own color. */ + .workspace-drawer & { + --pn-bg: var(--mobile-sidebar-background); + } + &.is-wide { --pn-pad: var(--size-4-6); --pn-head: 44px; diff --git a/tests/e2e/view-polish.test.ts b/tests/e2e/view-polish.test.ts index 18b3621f..a07a080f 100644 --- a/tests/e2e/view-polish.test.ts +++ b/tests/e2e/view-polish.test.ts @@ -23,6 +23,12 @@ const LONG: FixtureFeed = { artwork: false, episodes: [{ title: "First Steps", seconds: 60, pubDate: pubDate(0) }], }; +const SHORT: FixtureFeed = { + title: "Short Show", + slug: "short-show", + artwork: true, + episodes: [{ title: "First Steps", seconds: 60, pubDate: pubDate(0) }], +}; const PRIVATE = "Missing Address"; const SECRET_ID = "podnotes-feed-url-4b0c7e1a-2f6d-4c3b-9a8e-5d1f0e2c7b9a"; @@ -222,3 +228,60 @@ test("on a phone, the Escape that closes a row's menu in the right drawer leaves await eventually(obsidian, () => isShown(obsidian, ui.menuItem("Add to queue")), false), ).toBe(false); }); + +test("on a phone, a podcast's header keeps its cover at the left under a theme that centers images, over a search row in the color of the page behind it", async () => { + const context = getContext(); + const { obsidian } = context; + await asPhone(obsidian); + const server = await startFixtureServer([SHORT]); + onTestFinished(() => server.stop()); + await seedLibrary(context, server, { subscriptions: [SHORT] }); + + const headers: Record = {}; + for (const place of ["right drawer", "main area"] as const) { + await placePodNotes(obsidian, place); + await showLibrary(obsidian); + await click(obsidian, ui.podcastCard(SHORT.title)); + await waitUntilShown(obsidian, ui.podcastPage(SHORT.title)); + // A theme or snippet that centers every image, as on the phone in #506. + const shown = await obsidian.dev.evalJson>(`(() => { + const view = document.querySelector(${jsLiteral(PLAYER_VIEW)}); + const hero = view.querySelector(".pn-hero"); + const filter = view.querySelector(".pn-filter"); + const centered = document.head.appendChild(document.createElement("style")); + centered.textContent = "img { margin-inline: auto !important; }"; + const classes = document.body.className; + try { + return Object.fromEntries(["dark", "light"].map((theme) => { + document.body.classList.remove("theme-dark", "theme-light"); + document.body.classList.add("theme-" + theme); + const cover = hero.querySelector("img.pn-cover").getBoundingClientRect(); + let page = filter.parentElement; + while (getComputedStyle(page).backgroundColor === "rgba(0, 0, 0, 0)") page = page.parentElement; + return [${jsLiteral(place)} + ", " + theme, { + coverFromEdge: Math.round(cover.left - hero.getBoundingClientRect().left), + titleFromCover: Math.round(hero.querySelector("h1").getBoundingClientRect().left - cover.right), + band: getComputedStyle(filter).backgroundColor, + page: getComputedStyle(page).backgroundColor, + }]; + })); + } finally { + centered.remove(); + document.body.className = classes; + } + })()`); + Object.assign(headers, shown); + } + + const atLeft = { coverFromEdge: 0, titleFromCover: 12 }; + expect(headers).toEqual({ + "right drawer, dark": { ...atLeft, band: "rgb(30, 30, 30)", page: "rgb(30, 30, 30)" }, + "right drawer, light": { + ...atLeft, + band: "rgb(255, 255, 255)", + page: "rgb(255, 255, 255)", + }, + "main area, dark": { ...atLeft, band: "rgb(0, 0, 0)", page: "rgb(0, 0, 0)" }, + "main area, light": { ...atLeft, band: "rgb(255, 255, 255)", page: "rgb(255, 255, 255)" }, + }); +});