fabi/Mangalord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: serve width-bounded thumbnail variants for image grids

Browse Source 
Add /files/{key}?w=<px>: the endpoint decodes JPEG/PNG sources, downscales to
a width snapped to a small allow-list (aspect-preserving, never upscaling),
caches the result under a thumbs/ prefix, and serves it — so cover grids
download ~KB instead of the 1–5 MB original. Cover handlers purge cached
variants when a cover (whose key is reused) is replaced or deleted. Frontend
grids use new thumbUrl/thumbSrcset helpers (MangaCard with responsive srcset).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-11 14:41:19 +02:00
parent 5b1ce581f3
commit 755417730f
13 changed files with 380 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/api/client.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach, afterEach, type MockInstance } from 'vitest';
import { ApiError, request, setOn401Hook, fileUrl } from './client';
import { ApiError, request, setOn401Hook, fileUrl, thumbUrl, thumbSrcset } from './client';
import { getManga } from './mangas';
describe('fileUrl', () => {
@@ -19,6 +19,21 @@ describe('fileUrl', () => {
});
});
describe('thumbUrl / thumbSrcset', () => {
it('appends the width query to the file URL', () => {
expect(thumbUrl('mangas/abc/cover.png', 320)).toBe(
'/api/v1/files/mangas/abc/cover.png?w=320'
);
});
it('builds a srcset over the given candidate widths', () => {
expect(thumbSrcset('mangas/abc/cover.png', [160, 320])).toBe(
'/api/v1/files/mangas/abc/cover.png?w=160 160w, ' +
'/api/v1/files/mangas/abc/cover.png?w=320 320w'
);
});
});
describe('request error envelope parsing', () => {
let fetchSpy: MockInstance<typeof globalThis.fetch>;

19
frontend/src/lib/api/client.ts
View File

@@ -19,6 +19,25 @@ export function fileUrl(key: string): string {
return `${BASE}/v1/files/${encoded}`;
}
/**
* URL to a width-bounded thumbnail variant of a stored image (the backend
* `/files/{key}?w=` endpoint). Grids use this so a cover downloads ~KB instead
* of the 1–5 MB original; the backend snaps `width` to a small allow-list and
* caches the result.
*/
export function thumbUrl(key: string, width: number): string {
return `${fileUrl(key)}?w=${width}`;
}
/**
* A `srcset` string over the candidate `widths` for `key`, e.g.
* `.../files/k?w=320 320w, .../files/k?w=480 480w`. Pair with a `sizes`
* attribute so the browser picks the right variant for the rendered size.
*/
export function thumbSrcset(key: string, widths: number[]): string {
return widths.map((w) => `${thumbUrl(key, w)} ${w}w`).join(', ');
}
/**
* Builds an API URL for non-`fetch` consumers (e.g. `EventSource` for SSE),
* applying the same `VITE_API_BASE` prefix as `request()`. `path` is the