feat: streaming files endpoint + reader pages + chapter pages metadata
Backend:
- Migration 0003_pages.sql adds a `pages` table (id, chapter_id,
page_number, storage_key, content_type) with a unique (chapter_id,
page_number). New table because chapter pages can have different MIME
types per page; reconstructing keys from a single template would
break the moment a chapter mixes png and jpg pages.
- `domain::Page` + `repo::page` (create + list_for_chapter).
- The chapter upload handler now inserts one page row per part as it
writes the bytes to storage.
- GET /api/v1/mangas/{id}/chapters/{n}/pages returns `{pages: [...]}`
with the storage_key clients need to construct image URLs. 404 if
the manga or chapter doesn't exist; reads are public.
Storage trait grows `get_stream(&str) -> StreamingFile` returning a
`Pin<Box<dyn Stream<Item = io::Result<Bytes>> + Send>>` + size. The
local backend implements via `tokio::fs::File` + `tokio_util::io::
ReaderStream` with a 64 KiB chunk size. GET /api/v1/files/*key now
streams via `axum::body::Body::from_stream` instead of buffering — the
test asserts a 200 KiB file emits >1 frame end-to-end through the
router.
Frontend:
- lib/api/client.ts gains `fileUrl(key)` so components don't
reconstruct the `/api/v1/files/...` path manually.
- lib/api/chapters.ts gains `ChapterPage` type + `getChapterPages` (the
type is named ChapterPage to avoid colliding with `Page` from
client.ts, which is the pagination envelope).
- /manga/[id]/+page.svelte: overview with cover, title, author,
description, chapter list, and a disabled bookmark control (real
bookmarking lands in feat/bookmarks). Responsive at 640 px.
- /manga/[id]/chapter/[n]/+page.svelte: paginated reader. Current page
loads eagerly; next page is preloaded in a hidden img so navigation
feels instant. Keyboard handler maps ArrowRight/j/Space → next,
ArrowLeft/k → prev, Home/End → first/last; skips when the user is
typing in an input. Focus ring on the prev/next buttons.
- SSR is disabled on both routes via `export const ssr = false` so the
client-only fetch flow doesn't need to be replicated server-side; the
routes are interactive features, not SEO surfaces.
- E2E (e2e/reader.spec.ts): overview shows the title/cover/chapter
list; reader pages through three pages via ArrowRight, j, k, and
ArrowLeft, and the preload img holds the page-2 src on initial load.
Lockstep version bump to 0.6.0.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
||||
afterEach,
|
||||
type MockInstance
|
||||
} from 'vitest';
|
||||
import { listChapters, getChapter } from './chapters';
|
||||
import { listChapters, getChapter, getChapterPages } from './chapters';
|
||||
|
||||
function ok(body: unknown): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
@@ -86,4 +86,25 @@ describe('chapters api client', () => {
|
||||
code: 'not_found'
|
||||
});
|
||||
});
|
||||
|
||||
it('getChapterPages unwraps the {pages} envelope into the array', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(
|
||||
ok({
|
||||
pages: [
|
||||
{
|
||||
id: 'p1',
|
||||
chapter_id: 'c1',
|
||||
page_number: 1,
|
||||
storage_key: 'mangas/m1/chapters/c1/pages/0001.png',
|
||||
content_type: 'image/png'
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
const pages = await getChapterPages('m1', 1);
|
||||
expect(pages).toHaveLength(1);
|
||||
expect(pages[0].storage_key).toContain('0001.png');
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/mangas\/m1\/chapters\/1\/pages$/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,3 +37,21 @@ export async function getChapter(mangaId: string, number: number): Promise<Chapt
|
||||
`/v1/mangas/${encodeURIComponent(mangaId)}/chapters/${number}`
|
||||
);
|
||||
}
|
||||
|
||||
export type ChapterPage = {
|
||||
id: string;
|
||||
chapter_id: string;
|
||||
page_number: number;
|
||||
storage_key: string;
|
||||
content_type: string;
|
||||
};
|
||||
|
||||
export async function getChapterPages(
|
||||
mangaId: string,
|
||||
number: number
|
||||
): Promise<ChapterPage[]> {
|
||||
const r = await request<{ pages: ChapterPage[] }>(
|
||||
`/v1/mangas/${encodeURIComponent(mangaId)}/chapters/${number}/pages`
|
||||
);
|
||||
return r.pages;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,15 @@
|
||||
|
||||
const BASE = import.meta.env?.VITE_API_BASE ?? '/api';
|
||||
|
||||
/**
|
||||
* Builds an absolute URL to the streaming `/files/{key}` endpoint so
|
||||
* components can use it directly in `<img src>` etc., without
|
||||
* reconstructing the API base in each call site.
|
||||
*/
|
||||
export function fileUrl(key: string): string {
|
||||
return `${BASE}/v1/files/${key}`;
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
public readonly status: number,
|
||||
|
||||
Reference in New Issue
Block a user