feat: continuous reader mode with persisted preference
Add a vertical-scroll continuous mode to the reader alongside the existing single-page mode. A segmented toggle in the reader top bar switches between them; in continuous mode a gap selector (None/Small/Medium/Large → 0/12/32/64px) controls the spacing between stacked pages. Settings page mirrors the same controls. Backend: new user_preferences table (one row per user, lazily inserted, ON DELETE CASCADE) and GET/PATCH /api/v1/auth/me/preferences gated by the existing CurrentUser extractor. Allowed values are enforced both by API validation and table-level CHECK constraints. Eight integration tests cover defaults, persistence, partial updates, validation errors, auth, per-user isolation, and cascade. Frontend: a new preferences store mirrors the theme-store pattern with a localStorage shadow so anonymous browsers get a consistent experience and logged-in users don't flash defaults while the server response is in flight. Server values that the frontend doesn't recognize (forward-compat) are ignored rather than poisoning the UI; non-401 PATCH errors revert the optimistic local update; logout clears the shadow so user A's settings don't follow user B on a shared browser. In continuous mode native scrolling handles Space/PageDown/arrows; Home/End remain wired and call scrollIntoView() so jumping to chapter bounds stays one keystroke. Single-page mode (chevrons, arrow-key pagination, next-page preload) is unchanged. Versions bumped 0.13.0 → 0.14.0 in lockstep. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
215
frontend/e2e/reader-mode.spec.ts
Normal file
215
frontend/e2e/reader-mode.spec.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { test, expect, type Page } from '@playwright/test';
|
||||
|
||||
const mangaId = '22222222-2222-2222-2222-222222222222';
|
||||
const mangaFixture = {
|
||||
id: mangaId,
|
||||
title: 'Vagabond',
|
||||
author: 'Takehiko Inoue',
|
||||
description: null,
|
||||
cover_image_path: null,
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
updated_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
const chapterFixture = {
|
||||
id: 'c1',
|
||||
manga_id: mangaId,
|
||||
number: 1,
|
||||
title: null,
|
||||
page_count: 3,
|
||||
created_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
const pagesFixture = [
|
||||
{
|
||||
id: 'p1',
|
||||
chapter_id: 'c1',
|
||||
page_number: 1,
|
||||
storage_key: 'mangas/m2/chapters/c1/pages/0001.png',
|
||||
content_type: 'image/png'
|
||||
},
|
||||
{
|
||||
id: 'p2',
|
||||
chapter_id: 'c1',
|
||||
page_number: 2,
|
||||
storage_key: 'mangas/m2/chapters/c1/pages/0002.png',
|
||||
content_type: 'image/png'
|
||||
},
|
||||
{
|
||||
id: 'p3',
|
||||
chapter_id: 'c1',
|
||||
page_number: 3,
|
||||
storage_key: 'mangas/m2/chapters/c1/pages/0003.png',
|
||||
content_type: 'image/png'
|
||||
}
|
||||
];
|
||||
|
||||
async function mockReaderApis(page: Page) {
|
||||
// Anonymous user — both `me` and preferences fall back to localStorage.
|
||||
await page.route('**/api/v1/auth/me', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/auth/me/preferences', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
|
||||
})
|
||||
);
|
||||
await page.route('**/api/v1/me/bookmarks*', (route) =>
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: { code: 'unauthenticated', message: '' } })
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mangaFixture)
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters?*`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [chapterFixture],
|
||||
page: { limit: 50, offset: 0, total: null }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
items: [chapterFixture],
|
||||
page: { limit: 50, offset: 0, total: null }
|
||||
})
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/1`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(chapterFixture)
|
||||
})
|
||||
);
|
||||
await page.route(`**/api/v1/mangas/${mangaId}/chapters/1/pages`, (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ pages: pagesFixture })
|
||||
})
|
||||
);
|
||||
const png = Buffer.from(
|
||||
'89504e470d0a1a0a0000000d49484452000000010000000108060000001f15c4890000000d49444154789c63000100000005000158a3b62a0000000049454e44ae426082',
|
||||
'hex'
|
||||
);
|
||||
await page.route('**/api/v1/files/**', (route) =>
|
||||
route.fulfill({ status: 200, contentType: 'image/png', body: png })
|
||||
);
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ context }) => {
|
||||
// Clear the localStorage shadow so each test starts in the default
|
||||
// single-page mode regardless of order.
|
||||
await context.clearCookies();
|
||||
await context.addInitScript(() => {
|
||||
try {
|
||||
localStorage.removeItem('mangalord-reader-mode');
|
||||
localStorage.removeItem('mangalord-reader-gap');
|
||||
} catch {
|
||||
// ignore — about:blank doesn't expose localStorage yet.
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test('switching to continuous mode stacks all pages and hides chevrons', async ({ page }) => {
|
||||
await mockReaderApis(page);
|
||||
await page.goto(`/manga/${mangaId}/chapter/1`);
|
||||
|
||||
// Default single-page mode is active.
|
||||
await expect(page.getByTestId('reader-page')).toBeVisible();
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText('Page 1 / 3');
|
||||
|
||||
await page.getByTestId('reader-mode-continuous').click();
|
||||
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-page-1')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-page-3')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-prev')).toHaveCount(0);
|
||||
await expect(page.getByTestId('reader-next')).toHaveCount(0);
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText('3 pages');
|
||||
});
|
||||
|
||||
test('arrow keys do not paginate while in continuous mode', async ({ page }) => {
|
||||
await mockReaderApis(page);
|
||||
await page.goto(`/manga/${mangaId}/chapter/1`);
|
||||
await page.getByTestId('reader-mode-continuous').click();
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.keyboard.press('j');
|
||||
|
||||
// Still in continuous mode, still showing every page.
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-page-1')).toBeVisible();
|
||||
await expect(page.getByTestId('reader-page-3')).toBeVisible();
|
||||
});
|
||||
|
||||
test('gap select updates the inline gap on the continuous container', async ({ page }) => {
|
||||
await mockReaderApis(page);
|
||||
await page.goto(`/manga/${mangaId}/chapter/1`);
|
||||
await page.getByTestId('reader-mode-continuous').click();
|
||||
|
||||
const container = page.getByTestId('reader-continuous');
|
||||
// Default gap is "none" → 0px.
|
||||
await expect(container).toHaveAttribute('style', /gap:\s*0px/);
|
||||
|
||||
await page.getByTestId('reader-gap').selectOption('medium');
|
||||
await expect(container).toHaveAttribute('style', /gap:\s*32px/);
|
||||
|
||||
await page.getByTestId('reader-gap').selectOption('large');
|
||||
await expect(container).toHaveAttribute('style', /gap:\s*64px/);
|
||||
});
|
||||
|
||||
test('reader-mode preference set on one page is honored when the reader opens', async ({
|
||||
page,
|
||||
context
|
||||
}) => {
|
||||
// Simulate a user who has already chosen continuous + medium on the
|
||||
// settings page (which writes through the preferences store to
|
||||
// localStorage). The reader should pick up that choice on first
|
||||
// render without any in-tab navigation.
|
||||
await context.addInitScript(() => {
|
||||
localStorage.setItem('mangalord-reader-mode', 'continuous');
|
||||
localStorage.setItem('mangalord-reader-gap', 'medium');
|
||||
});
|
||||
await mockReaderApis(page);
|
||||
|
||||
await page.goto(`/manga/${mangaId}/chapter/1`);
|
||||
await expect(page.getByTestId('reader-continuous')).toBeVisible();
|
||||
await expect(page.getByTestId('page-indicator')).toHaveText('3 pages');
|
||||
await expect(page.getByTestId('reader-continuous')).toHaveAttribute(
|
||||
'style',
|
||||
/gap:\s*32px/
|
||||
);
|
||||
});
|
||||
|
||||
test('settings page hides the gap picker while in single-page mode', async ({ page }) => {
|
||||
// Visually verifies the conditional render. The radio-click semantics
|
||||
// are exercised in src/lib/preferences.svelte.test.ts; the visible
|
||||
// mode toggle in the reader top bar covers the cross-route propagation
|
||||
// path in the test above.
|
||||
await mockReaderApis(page);
|
||||
await page.goto('/settings');
|
||||
|
||||
await expect(page.getByTestId('reader-mode-radio-single')).toBeAttached();
|
||||
await expect(page.getByTestId('reader-mode-radio-continuous')).toBeAttached();
|
||||
await expect(page.getByTestId('reader-gap-radio-medium')).toHaveCount(0);
|
||||
});
|
||||
Reference in New Issue
Block a user