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:
parent
08a145b087
commit
724a068bec
7 changed files with 74 additions and 4 deletions
|
|
@ -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 });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue