feat(lightbox): medium-resolution preview tier (#492)

Adds an opt-in lightbox preview tier so guests open photos against an
aspect-preserved ~1920px JPEG (~200–500 KB) instead of the full original
(often 5–12 MB). Originals are still served on Download.

Backend:
  - imageProcessor: generatePreviewImage / isPreviewValid / ensurePreviewImage
    using fit:'inside' + withoutEnlargement (longEdge 1920, q85, mozjpeg)
  - migration 104: photos.preview_path + lightbox_preview_enabled setting
    (off by default, JSON-stringified for SQLite/Postgres parity)
  - GET /api/gallery/:slug/preview/:photoId — gallery-auth, lazy generation,
    ETag based on mtime+photoId+watermarkHash
  - preview_url surfaced in the photo response only when the toggle is on
  - admin /thumbnails/regenerate-previews mirrors regenerate-thumbnails,
    skipping videos
  - backup walk + archive cleanup + photo-delete now include previews/

Frontend:
  - PhotoLightbox uses photo.preview_url ?? photo.url (null-safe fallback)
  - ThumbnailsTab gets a Lightbox Preview Tier card: opt-in toggle +
    Regenerate All Previews button (gated until the toggle is on)
  - en/de locale strings; nl/pt/ru/fr fall back to en

Tested end-to-end: 11 MB / 4000×3000 source → 985 KB / 1920×1440 preview,
381 ms first call, 7 ms cached, ~91% byte reduction.
This commit is contained in:
Paul Nothaft
2026-05-14 22:30:39 +02:00
parent 4225cd153f
commit 61f1d13210
13 changed files with 578 additions and 8 deletions
@@ -137,6 +137,41 @@ describe.each(backendCases())('imageProcessor through $name', ({ setup }) => {
expect(await storage.exists(key)).toBe(true);
});
test('generatePreviewImage writes to /previews and skips enlargement of small originals', async () => {
const src = await makeSourceJpeg(tmpDir, 'preview-source.jpg');
const key = await imageProcessor.generatePreviewImage(src);
expect(key).toBe('previews/preview_preview-source.jpg');
expect(await storage.exists(key)).toBe(true);
if (storage.kind() === 'local') {
const meta = await sharp(storage.resolveLocalPath(key)).metadata();
expect(meta.format).toBe('jpeg');
// Source is 800x600 and default longEdge is 1920 with
// withoutEnlargement: true → preview must NOT be upscaled.
expect(meta.width).toBe(800);
expect(meta.height).toBe(600);
}
});
test('generatePreviewImage shrinks oversized images to fit longEdge while preserving aspect', async () => {
const src = await makeSourceJpeg(tmpDir, 'preview-shrink.jpg');
const key = await imageProcessor.generatePreviewImage(src, { longEdge: 400 });
expect(await storage.exists(key)).toBe(true);
if (storage.kind() === 'local') {
const meta = await sharp(storage.resolveLocalPath(key)).metadata();
// 800x600 → fit:'inside' inside 400×400 → 400×300.
expect(meta.width).toBe(400);
expect(meta.height).toBe(300);
}
});
test('isPreviewValid returns true for a real preview and false for a missing key', async () => {
const src = await makeSourceJpeg(tmpDir, 'preview-valid.jpg');
const key = await imageProcessor.generatePreviewImage(src);
expect(await imageProcessor.isPreviewValid(key)).toBe(true);
expect(await imageProcessor.isPreviewValid('previews/does-not-exist.jpg')).toBe(false);
});
test('isThumbnailValid returns true for a good thumbnail and false for nothing', async () => {
const src = await makeSourceJpeg(tmpDir, 'valid-check.jpg');
const key = await imageProcessor.generateThumbnail(src);