Use Glass Stage icons for playlist and offline controls

This commit is contained in:
Jonathan Sykes
2026-10-03 20:14:19 +08:00
parent 79a3c28c8e
commit d93fc0d70f
4 changed files with 60 additions and 3 deletions

View File

@@ -44,3 +44,40 @@ for (const layout of ['glass-stage', 'classic']) for (const width of [390, 1440]
await before.close();
});
}
const beforeIcons = execFileSync('git', ['show', '79a3c28:frontend/glass-controls.js'], { encoding: 'utf8' });
async function sidebarFixture(page, layout) {
await openClassic(page, { populated: true, settings: { autoPreload: false } });
await page.addStyleTag({ content: '*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}' });
await page.evaluate(layout => {
data.settings.layout = layout; applyAppearance();
data.playlists[0].videos.forEach(v => cachedIds.add(v.id));
view = { type: 'playlist', id: 'studio' }; render(); openSidebar();
}, layout);
await page.evaluate(async () => { await document.fonts.ready; await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); });
}
for (const layout of ['glass-stage', 'classic']) for (const width of [390, 1440]) {
test(`${layout} playlist sidebar icons at ${width}`, async ({ page, context }) => {
await page.setViewportSize({ width, height: 900 });
const before = await context.newPage(); await before.setViewportSize({ width, height: 900 });
await before.route('**/glass-controls.js', route => route.fulfill({ contentType: 'text/javascript', body: beforeIcons }));
await sidebarFixture(before, layout);
const baseline = await before.screenshot({ path: `/tmp/ytplayer-done8-B-before-${layout}-${width}.png` });
await sidebarFixture(page, layout);
const result = await page.screenshot({ path: `/tmp/ytplayer-done8-B-after-${layout}-${width}.png` });
const badge = page.locator('.sidebar .pl-offline-badge.all').first();
if (layout === 'classic') {
expect(differentPixels(baseline, result)).toBeLessThanOrEqual(32);
await expect(badge).toHaveText('⬇');
} else {
await expect(badge.locator('svg')).toHaveCount(1);
expect(await badge.locator('svg').evaluate(el => getComputedStyle(el).strokeWidth)).toBe('1.9px');
await expect(page.locator('.home-pl-play svg').first()).toHaveCount(1);
await expect(page.locator('#listActions .la-primary svg')).toHaveCount(1);
await page.evaluate(() => { data.settings.layout = 'classic'; applyAppearance(); });
await expect(badge).toHaveText('⬇');
await expect(page.locator('.glass-control-icon')).toHaveCount(0);
}
await before.close();
});
}