Changeset 28bf7f0 in Klonkt

Timestamp:

06/30/2026 03:26:08 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

28f797d

Parents:

4d1aefb

Message:

fix(editor): animated WebP covers skip the crop editor (were flattened to a static frame)

The post editor's image editor (Cropper.js -> canvas) flattens an animated image to one frame.
Animated GIFs already bypassed it; animated WebP did not, so an animated WebP cover became static.
Detect an animated WebP (VP8X animation flag) client-side and upload it directly, like GIFs —
preserving the animation. Combined with the thumbnail fix, animated covers now move on-site.

• src/views/pages/post-edit.ejs — isAnimatedWebpFile() + bypass the crop editor for animated WebP

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

File:

• src/views/pages/post-edit.ejs (modified) (1 diff)

src/views/pages/post-edit.ejs

@@ -1206 +1206 @@
   }
 
+  // True for an animated WebP (VP8X chunk with the animation flag set) — like a GIF it must skip
+  // the canvas editor, otherwise it'd be flattened to a single static frame.
+  async function isAnimatedWebpFile(file) {
+    if (!file || file.type !== 'image/webp') return false;
+    try {
+      const b = new Uint8Array(await file.slice(0, 40).arrayBuffer());
+      return b.length >= 21 && String.fromCharCode(b[12], b[13], b[14], b[15]) === 'VP8X' && (b[20] & 0x02) !== 0;
+    } catch (_) { return false; }
+  }
+
   // Opens the editor for a chosen file; resolves with an edited File,
-  // or null if the user cancels. Animated GIFs are not sent through the
+  // or null if the user cancels. Animated images (GIF / animated WebP) are NOT sent through the
   // canvas editor (they would become static) — those upload directly.
   async function openImageEditor(file) {
     if (!file || !file.type || !file.type.startsWith('image/')) return file;
-    if (file.type === 'image/gif') return file; // preserve animation
+    if (file.type === 'image/gif') return file;               // preserve animation
+    if (await isAnimatedWebpFile(file)) return file;          // animated WebP → preserve animation
     try { await ensureCropper(); } catch (_) { return file; } // editor unavailable → upload directly