Changeset e67828e in Klonkt for src/services/ThumbnailService.js

Timestamp:

07/01/2026 10:38:02 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

0877771

Parents:

5e52448

Message:

fix(media): poster frames for remote videos (News feed + Circle tiles)

A remote video (Loops/PeerTube/Mastodon attachment) rendered as a black box until
played: the image proxy refused non-image content, so the tile/feed poster 302'd to
the raw mp4 and never displayed. The proxy now extracts a poster frame from remote
video too — via a bounded range fetch (first 4MB, enough for a faststart mp4's first
frame; moov-at-end files fall back to the old 302). The News feed's <video> gets a
poster so long videos show a frame instead of black. (>30s keeping controls instead
of autoplaying is by design — that was the reported "didn't load like the others".)

• src/services/ThumbnailService.js — getRemoteThumbnail accepts video/* via a 4MB ranged fetch + single-frame extract; animated-buf guard scoped to images.
• src/views/pages/news.ejs — feed videos carry poster=thumb(url, 1280).
• CHANGELOG(.nl/.de).md — under Fixed.

Closes prutfolio-src-k1q.

Co-Authored-By: Claude <noreply@…>

File:

• src/services/ThumbnailService.js (modified) (2 diffs)

src/services/ThumbnailService.js

@@ -185 +185 @@
   if (fs.existsSync(cached)) return cached;
 
-  let buf;
+  let buf, isVideo = false;
   try {
     const r = await safeFetch(url);
     if (!r.ok) return null;
-    if (!(r.headers.get('content-type') || '').startsWith('image/')) return null;
-    if (parseInt(r.headers.get('content-length') || '0', 10) > 12 * 1024 * 1024) return null;
-    buf = Buffer.from(await r.arrayBuffer());
+    const ct = r.headers.get('content-type') || '';
+    isVideo = ct.startsWith('video/');
+    if (!ct.startsWith('image/') && !isVideo) return null;
+    if (isVideo) {
+      // Remote video → poster frame (feed/tile posters). Don't buffer the whole file: re-fetch
+      // a bounded head (first 4MB) — enough for ffmpeg to decode the first frame of a faststart
+      // mp4 (the web-streaming norm). A moov-at-end file just fails → null → the route's 302
+      // fallback, same as before this path existed.
+      try { if (r.body && r.body.cancel) r.body.cancel(); } catch { /* ignore */ }
+      const rv = await safeFetch(url, { headers: { Range: 'bytes=0-4194303' } });
+      if (!rv.ok && rv.status !== 206) return null;
+      buf = Buffer.from(await rv.arrayBuffer());
+      if (!buf.length) return null;
+    } else {
+      if (parseInt(r.headers.get('content-length') || '0', 10) > 12 * 1024 * 1024) return null;
+      buf = Buffer.from(await r.arrayBuffer());
+    }
   } catch (e) {
     console.warn('[thumb-remote] fetch failed for', url, '-', e.message);
@@ -199 +213 @@
   // ffmpeg-static can't decode an animated WebP (the doomed downscale just logs an error), and a
   // flattened GIF/animated WebP loses its motion → skip it and let the route serve the ORIGINAL
-  // (keeps the animation; mirrors the local path's isAnimatedSrc guard).
-  if (isAnimatedBuf(buf)) return null;
+  // (keeps the animation; mirrors the local path's isAnimatedSrc guard). Video heads skip this
+  // (they're not webp/gif) and go straight to the single-frame extract.
+  if (!isVideo && isAnimatedBuf(buf)) return null;
 
   await fs.promises.mkdir(path.dirname(cached), { recursive: true });