Aero music: the button works on the podcast player

"The music thing button with the Frutiger Aero doesn't work on the podcasts."
The podcast page is a full-screen overlay at z-45 and the control sat at z-40:
visible through the transparent page, but every tap landed on the overlay.

The control now takes a data-raised="player" position on /podcast/[id] -
z-index 46, docked to the header's corner (top under the header pill, right
mirroring the max-w-3xl geometry) where neither the transport bar nor the
voice panel lives - and the transcript gained pt-32 so the episode card clears
it. Study/review/exam feeds keep their "steps aside" behaviour.

aero-music-test: a podcast section asserts the control exists, that
elementFromPoint at its centre hits the button, and that a tap expands the
credit bar. 31 checks. Version 0.7.9, SW v101.
This commit is contained in:
Martin Dvořák 2026-10-16 21:04:39 +00:00
commit 724a068bec
7 changed files with 74 additions and 4 deletions

View file

@ -208,6 +208,47 @@ async function stubSoundCloud(page) {
await context.close();
}
/* 4b. the podcast player: the control rides above that overlay -------- */
{
const { context, page } = await makePage(browser, { width: 390, height: 844, deviceScaleFactor: 1, isMobile: true, hasTouch: true });
await stubSoundCloud(page);
await seed(page, {
theme: "aero",
decks: [],
extra: {
"freezmo.podcasts.v1": JSON.stringify([
{
id: "pod_music",
title: "While you listen",
summary: "",
language: "English",
sourceText: "x",
createdAt: 1,
updatedAt: 1,
sections: [{ heading: "One", text: "Look up on a clear day." }],
},
]),
},
});
await page.goto(`${BASE}/podcast/pod_music`, { waitUntil: "networkidle" });
await page.waitForTimeout(1500);
const circle = page.getByRole("button", { name: "Frutiger Aero music" });
check("podcast: the music control is there while listening", (await circle.count()) === 1);
const reachable = await page.evaluate(() => {
const button = document.querySelector("[data-testid=aero-music] button");
if (!button) return "missing";
const box = button.getBoundingClientRect();
const top = document.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);
return button.contains(top) || top === button ? "on-top" : `covered by ${top?.className?.toString().slice(0, 40)}`;
});
check("podcast: nothing covers it (it rides above the overlay)", reachable === "on-top", reachable);
await circle.click();
await page.waitForTimeout(400);
check("podcast: tapping it expands the credit bar", (await page.getByText("SoundCloud ·", { exact: false }).count()) >= 1);
await context.close();
}
/* 5. immersive overlays step aside, the music keeps playing ----------- */
{
const { context, page } = await makePage(browser, { width: 1280, height: 731 });