Changeset 4d1aefb in Klonkt

Timestamp:

06/30/2026 03:16:22 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

28bf7f0

Parents:

98a1990

Message:

fix(thumbnails): serve animated WebP/GIF covers as-is (they were frozen to 1 frame)

The thumbnail pipeline runs ffmpeg with -frames:v 1, so an animated WebP/GIF cover showed up
frozen on the site. ffmpeg-static can't even decode an animated WebP to re-scale it ("image data
not found"), so a scaled animated thumbnail isn't possible — instead, detect an animated source
(WebP VP8X animation flag, or GIF) and skip the thumbnail (getThumbnail returns null) so the
/media/thumb route serves the original, which keeps animating. Static images thumbnail as before.

• src/services/ThumbnailService.js — isAnimatedSrc() + skip thumbnailing for animated sources

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

File:

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

src/services/ThumbnailService.js

@@ -65 +65 @@
 }
 
+// Is the source an animated image (animated WebP or GIF)? If so the thumbnail must keep ALL
+// frames (a downscaled animated WebP) instead of grabbing a single frame — otherwise an
+// animated cover shows up frozen on the site.
+function isAnimatedSrc(filePath) {
+  try {
+    const ext = path.extname(filePath).toLowerCase();
+    if (ext === '.gif') return true; // a flattened GIF would lose its animation too
+    if (ext !== '.webp') return false;
+    const fd = fs.openSync(filePath, 'r');
+    try {
+      const buf = Buffer.alloc(40);
+      const n = fs.readSync(fd, buf, 0, 40, 0);
+      // RIFF…WEBP, then a VP8X chunk (bytes 12-15) whose flags byte (20) has the animation bit.
+      return n >= 21 && buf.toString('ascii', 12, 16) === 'VP8X' && (buf[20] & 0x02) !== 0;
+    } finally { fs.closeSync(fd); }
+  } catch { return false; }
+}
+
 /**
  * Return the on-disk path of the cached thumbnail, generating it if needed.
@@ -78 +96 @@
   const cached = path.join(root, '.thumbs', String(width), rel) + '.webp';
   if (fs.existsSync(cached)) return cached;
+
+  // ffmpeg-static can't decode an animated WebP ("image data not found"), so we can't make a
+  // scaled animated thumbnail. Return null → the route serves the ORIGINAL instead, which keeps
+  // animating. (Animated covers are usually already small, so skipping the downscale is fine.)
+  if (isAnimatedSrc(orig)) return null;
 
   await fs.promises.mkdir(path.dirname(cached), { recursive: true });