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

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "mangalord-frontend",
"version": "0.124.24",
"version": "0.125.0",
"private": true,
"type": "module",
"scripts": {

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

4
frontend/src/lib/components/BookmarkList.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
import { thumbUrl } from '$lib/api/client';
import type { Bookmark } from '$lib/api/bookmarks';
import { overflowTooltip } from '$lib/actions/overflowTooltip';
import BookImage from '@lucide/svelte/icons/book-image';
@@ -19,7 +19,7 @@
<a href="/manga/{b.manga_id}" class="cover-link" aria-hidden="true" tabindex="-1">
{#if b.manga_cover_image_path}
<img
src={fileUrl(b.manga_cover_image_path)}
src={thumbUrl(b.manga_cover_image_path, 320)}
alt=""
class="cover"
loading="lazy"

4
frontend/src/lib/components/CollectionsGrid.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
import { thumbUrl } from '$lib/api/client';
import type { CollectionSummary } from '$lib/api/collections';
import FolderOpen from '@lucide/svelte/icons/folder-open';
@@ -22,7 +22,7 @@
{:else}
{#each c.sample_covers as cover (cover)}
<img
src={fileUrl(cover)}
src={thumbUrl(cover, 320)}
alt=""
class="collage-cover"
loading="lazy"

4
frontend/src/lib/components/ContinueReadingShelf.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
import { thumbUrl } from '$lib/api/client';
import { chapterLabel } from '$lib/api/chapters';
import { overflowTooltip } from '$lib/actions/overflowTooltip';
import type { ReadProgressSummary } from '$lib/api/read_progress';
@@ -47,7 +47,7 @@
<span class="cover-wrap">
{#if p.manga_cover_image_path}
<img
src={fileUrl(p.manga_cover_image_path)}
src={thumbUrl(p.manga_cover_image_path, 320)}
alt=""
class="cover"
loading="lazy"

6
frontend/src/lib/components/MangaCard.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
import { thumbUrl, thumbSrcset } from '$lib/api/client';
import type { Manga } from '$lib/api/client';
import type { AuthorRef, GenreRef } from '$lib/api/mangas';
import { overflowTooltip } from '$lib/actions/overflowTooltip';
@@ -48,7 +48,9 @@
<a href="/manga/{manga.id}" class="cover-link" aria-hidden="true" tabindex="-1">
{#if manga.cover_image_path}
<img
src={fileUrl(manga.cover_image_path)}
src={thumbUrl(manga.cover_image_path, 320)}
srcset={thumbSrcset(manga.cover_image_path, [160, 320, 480, 640])}
sizes="(max-width: 600px) 45vw, 200px"
alt=""
class="cover"
loading="lazy"

4
frontend/src/lib/components/TaggedMangaRow.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileUrl } from '$lib/api/client';
import { fileUrl, thumbUrl } from '$lib/api/client';
import type { TaggedMangaAggregate } from '$lib/api/page_tags';
/**
@@ -36,7 +36,7 @@
<li class="row" data-testid={testid}>
<a {href} class="cover-link" aria-hidden="true" tabindex="-1">
{#if primaryCover}
<img src={fileUrl(primaryCover)} alt="" class="cover" loading="lazy" decoding="async" />
<img src={thumbUrl(primaryCover, 320)} alt="" class="cover" loading="lazy" decoding="async" />
{:else}
<div class="cover cover-placeholder"></div>
{/if}