mrwnslz
143950df94
Ein neuer Abschnitt (docs/sources.md, static/js/sources.js) für Podcasts, YouTube-Kanäle, Hörbücher, Nachrichten und Blogs: - ein Feld zum Hinzufügen: Adresse (Feed, Seite, YouTube) oder Name eines Podcasts; die Art ist wählbar (Podcast, Hörbuch, Nachrichten, Blog); /feeds/discover/ erkennt dafür Podcasts (Folgen mit Ton oder Video); - eine Liste aller Abos mit Filtern (auch „Probleme“) und Suche; - je Abo: Inhalt öffnen, Einstellungen (die vorhandenen Editoren), Art ändern, abbestellen; OPML-Import und -Export. In der Seitenleiste unten, auf dem Telefon im App-Menü; ⚙ in den Feeds führt hierher. Abschnitte, die beim Laden schon gezeigt werden, füllen sich jetzt auch (nav.js zeigt sie nach dem Laden aller Skripte noch einmal). Podcast-UI aus diora-android 50c6f9c. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
74 lines
4 KiB
JavaScript
74 lines
4 KiB
JavaScript
// The navigation (docs/navigation.md): Home, Lesen (Bücher, Zeitschriften, Nachrichten,
|
|
// Blogs), Hören (Hörbücher, Podcasts, Radio, Ambient), on the web page's own bar.
|
|
const { test, expect } = require('@playwright/test');
|
|
const path = require('path');
|
|
|
|
test.use({ storageState: path.join(__dirname, '.auth', 'user.json') });
|
|
|
|
const visiblePanel = page => page.evaluate(() =>
|
|
[...document.querySelectorAll('section.tab-panel')].filter(p => p.style.display !== 'none').map(p => p.id));
|
|
|
|
test('wide: every section in the bar under its group, each shows its panel and view', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto('/#books');
|
|
const wide = page.locator('#tabs .nav-wide');
|
|
await expect(wide.locator('.nav-group-label')).toHaveText(['Lesen', 'Hören']);
|
|
await expect(wide.locator('[data-nav]')).toHaveText(
|
|
['Home', 'Bücher', 'Zeitschriften', 'Nachrichten', 'Blogs', 'Hörbücher', 'Podcasts', 'Radio', 'Ambient', 'Fokus', 'Abos & Quellen']);
|
|
|
|
await wide.locator('[data-nav="blogs"]').click();
|
|
await expect(page).toHaveURL(/#blogs$/);
|
|
expect(await visiblePanel(page)).toEqual(['tab-feeds']);
|
|
expect(await page.evaluate(() => localStorage.getItem('diora_feeds_view'))).toBe('blogs');
|
|
await expect(page.locator('#tab-feeds .fd-seg')).toBeHidden(); // the bar chooses, not the tab
|
|
await expect(page.locator('#nav-segments')).toBeHidden();
|
|
|
|
await wide.locator('[data-nav="audiobooks"]').click();
|
|
expect(await visiblePanel(page)).toEqual(['tab-audiobooks']);
|
|
await expect(page.locator('#audiobook-shelf')).toBeVisible();
|
|
await expect(wide.locator('[data-nav="audiobooks"]')).toHaveClass(/active/);
|
|
});
|
|
|
|
test('narrow: three groups, the sections as a row on top, each group remembers its last', async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 800 });
|
|
await page.goto('/#news');
|
|
const narrow = page.locator('#tabs .nav-narrow');
|
|
await expect(narrow.locator('[data-nav]')).toHaveText(['Home', 'Lesen', 'Hören', '⚙']);
|
|
await expect(narrow.locator('[data-nav="lesen"]')).toHaveClass(/active/);
|
|
const segs = page.locator('#nav-segments');
|
|
await expect(segs.locator('[data-nav]')).toHaveText(['Bücher', 'Zeitschriften', 'Nachrichten', 'Blogs']);
|
|
await expect(segs.locator('[data-nav="news"]')).toHaveClass(/active/);
|
|
|
|
await narrow.locator('[data-nav="hoeren"]').click();
|
|
await segs.locator('[data-nav="radio"]').click();
|
|
expect(await visiblePanel(page)).toEqual(['tab-radio']);
|
|
await narrow.locator('[data-nav="lesen"]').click();
|
|
await expect(page).toHaveURL(/#news$/); // back where Lesen was left
|
|
await narrow.locator('[data-nav="hoeren"]').click();
|
|
await expect(page).toHaveURL(/#radio/);
|
|
});
|
|
|
|
test('old links and direct panel switches land in their section', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto('/#feeds');
|
|
expect(await visiblePanel(page)).toEqual(['tab-feeds']);
|
|
await expect(page.locator('#tabs .nav-wide [data-nav].active')).toHaveText(/Nachrichten|Blogs/);
|
|
await page.evaluate(() => showTab('podcasts'));
|
|
await expect(page.locator('#tabs [data-nav="podcasts"]')).toHaveClass(/active/);
|
|
await expect(page).toHaveURL(/#podcasts$/);
|
|
await page.reload();
|
|
expect(await visiblePanel(page)).toEqual(['tab-podcasts']); // remembered
|
|
});
|
|
|
|
test('Abos & Quellen: one page for every subscription, reached from the feeds too', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
await page.goto('/#news');
|
|
await page.locator('#tab-feeds [data-act="manage"]').first().click();
|
|
await expect(page).toHaveURL(/#sources$/);
|
|
const tab = page.locator('#tab-sources');
|
|
await expect(tab.locator('.src-h1')).toHaveText('Abos & Quellen');
|
|
await expect(tab.locator('.src-add-q')).toBeVisible();
|
|
await expect(tab.locator('.src-chip.on')).toContainText('Nachrichten'); // came from the news
|
|
await tab.locator('[data-filter="all"]').click();
|
|
await expect(tab.locator('.src-chip.on')).toContainText('Alle');
|
|
});
|