josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep the Glass Stage notes toolbar on one row at every player width

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-03 21:58:03 +08:00
parent 729e73e131
commit 49ba470740
4 changed files with 136 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
tests/glass-panel.spec.js
View File

@@ -103,3 +103,35 @@ for (const width of [390]) test(`iPhone bottom icons centered above labels with
await page.locator('#bottomNav').screenshot({ path: `/tmp/done9-nav-after-${info.project.name}-390.png` });
await context.close();
});
for (const width of [320, 360, 390, 430, 1440]) test(`Now Playing toolbar remains one row at ${width}`, async ({ page }, info) => {
await setup(page, width);
await page.evaluate(() => { document.getElementById('notesStatus').textContent = 'Verse · shared lyrics'; document.getElementById('markersCount').textContent = '12'; });
await page.locator('#notesPanel').scrollIntoViewIfNeeded();
if (!before) {
const metrics = await page.locator('.notes-tabs').evaluate(bar => {
const b = bar.getBoundingClientRect(), buttons = [...bar.querySelectorAll('button')].map(el => { const r = el.getBoundingClientRect(); return { top: r.top, bottom: r.bottom, left: r.left, right: r.right, width: r.width, height: r.height, label: el.getAttribute('aria-label') || el.getAttribute('title') }; });
return { bar: { left: b.left, right: b.right }, buttons, overflow: bar.scrollWidth - bar.clientWidth };
});
expect(Math.max(...metrics.buttons.map(b => b.top)) - Math.min(...metrics.buttons.map(b => b.top))).toBeLessThan(1);
expect(metrics.overflow).toBeLessThanOrEqual(1);
for (const b of metrics.buttons) { expect(b.width).toBeGreaterThanOrEqual(44); expect(b.height).toBeGreaterThanOrEqual(44); expect(b.left).toBeGreaterThanOrEqual(metrics.bar.left); expect(b.right).toBeLessThanOrEqual(metrics.bar.right); expect(b.label).toBeTruthy(); }
expect(metrics.buttons.at(-1).right).toBeGreaterThan(metrics.bar.right - 12);
}
await page.locator('#notesPanel .notes-tabs').screenshot({ path: `/tmp/done9-toolbar-${before ? 'before' : 'after'}-${info.project.name}-${width}.png` });
});
test('compact toolbar labels and accessible names restore on leaving Glass Stage', async ({ page }) => {
await setup(page, 390, 'classic');
const original = await page.locator('.notes-tab').evaluateAll(nodes => nodes.map(n => ({ html: n.innerHTML, label: n.getAttribute('aria-label'), title: n.getAttribute('title') })));
for (let i = 0; i < 2; i++) {
await page.evaluate(() => { data.settings.layout = 'glass-stage'; applyAppearance(); });
await expect(page.locator('.glass-tab-label')).toHaveCount(3);
for (const name of ['Lyrics', 'Chapters & bookmarks', 'Search']) await expect(page.getByRole('tab', { name, exact: true })).toHaveCount(1);
await page.evaluate(() => { data.settings.layout = 'classic'; applyAppearance(); });
await expect(page.locator('.glass-tab-label')).toHaveCount(0);
expect(await page.locator('.notes-tab').evaluateAll(nodes => nodes.map(n => ({ html: n.innerHTML, label: n.getAttribute('aria-label'), title: n.getAttribute('title') })))).toEqual(original);
await expect(page.locator('#sectionRail')).not.toHaveJSProperty('parentElement', null);
expect(await page.locator('#sectionRail').evaluate(n => n.parentElement.tagName)).toBe('BODY');
}
});