Fix APNG thumbnail handling and improve animated format detection (#5113) * check png for apng headers * isAnimated flag * refactor: centralize background animation extension checks * refactor: scope animated extension dedupe to backgrounds * remove precompute from startup * Fix animation preference not being loaded, fix type-check of customInputs * Fix eslint * Fix sort on removal type * Update metadata before returning from endpoint on CRUD operations * Remove race condition in metadata load * Load metadata after loading the list --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

8aaaab37b7b43381ca0867625ed07b839eba8c67

Lucas Scala <123923688+Vibecoder9000@users.noreply.github.com>

Signed

Parents: 45bf3a402a5f2306316e7aced14576e15381595c

public/scripts/backgrounds.js+37 -22 Viewed

     height: 90,
 };
+const ANIMATED_BACKGROUND_EXTENSIONS = ['mp4', 'webp', 'gif', 'apng'];
 /**
  * Cache for image metadata.
  * @type {Map<string, import('../../src/endpoints/image-metadata.js').ImageMetadata>}

 /**
  * Cache for the current list of system background filenames.
  * Used to re-sort backgrounds without refetching from the server.
- * @type {string[]}
+ * @type {Array<{filename: string, isAnimated: boolean}>}
  */
 let cachedSystemBackgrounds = [];

 /**
  * Creates a single thumbnail DOM element. The CSS now handles all sizing.
- * @param {object} imageData - Data for the image (filename, isCustom).
+ * @param {object} imageData - Data for the image (filename, isCustom, isAnimated).
  * @returns {HTMLElement} The created thumbnail element.
  */
 function createThumbnailElement(imageData) {
     const bg = imageData.filename;
     const isCustom = imageData.isCustom;
+    const isAnimated = imageData.isAnimated ?? false;
     const thumbnail = $('#background_template .bg_example').clone();

     thumbnail.attr('title', title);
     thumbnail.attr('bgfile', bg);
     thumbnail.attr('custom', String(isCustom));
+    thumbnail.attr('animated', String(isAnimated));
     thumbnail.data('url', url);
     titleElement.text(friendlyTitle);

+    }
     background_settings.thumbnailColumns = columns;
     background_settings.sortOrder = backgroundSettings.sortOrder;
+    background_settings.animation = backgroundSettings.animation;
     applyThumbnailColumns(background_settings.thumbnailColumns);
     setBackground(backgroundSettings.name, backgroundSettings.url);

     const url = bgToDelete.data('url');
     const isCustom = bgToDelete.attr('custom') === 'true';
     const deleteFromServerId = 'delete_bg_from_server';
-    const customInputs = [
+    /** @type {import('./popup.js').CustomPopupInput[]} */
-        {
+    const customInputs = [{
         type: 'checkbox',
         label: t`Also delete file from server`,
         id: deleteFromServerId,
         defaultState: true,
-        },
+    }];
-    ];
     let deleteFromServer = false;
     const confirm = await Popup.show.confirm(t`Delete the background?`, null, {
         customInputs: isCustom ? customInputs : [],

         if (!isCustom) {
             await delBackground(bg);
             // Remove from cache to prevent reappearing on sort change
-            const cacheIndex = cachedSystemBackgrounds.indexOf(bg);
+            const cacheIndex = cachedSystemBackgrounds.findIndex(s => s.filename === bg);
             if (cacheIndex !== -1) {
                 cachedSystemBackgrounds.splice(cacheIndex, 1);
+            }

 /**
  * Renders the system backgrounds gallery.
- * @param {string[]} [backgrounds] - Optional filtered list of backgrounds.
+ * @param {Array<{filename: string, isAnimated: boolean}>} [backgrounds] - Optional filtered list of backgrounds with metadata.
  */
 function renderSystemBackgrounds(backgrounds) {
     const sourceList = backgrounds || [];

     if (sourceList.length === 0) return;
-    const sortedList = sortBackgrounds(sourceList, false);
+    const sortedList = sortBackgrounds(sourceList.map(bg => bg.filename), false);
-    sortedList.forEach(bg => {
+    const metadataByFilename = new Map(sourceList.map(bg => [bg.filename, bg]));
-        const imageData = { filename: bg, isCustom: false };
+    sortedList.forEach(filename => {
+        const bg = metadataByFilename.get(filename);
+        const imageData = { filename, isCustom: false, isAnimated: bg?.isAnimated ?? false };
         const thumbnail = createThumbnailElement(imageData);
         container.append(thumbnail);
     });

     const sortedList = sortBackgrounds(sourceList, true);
     sortedList.forEach(bg => {
-        const imageData = { filename: bg, isCustom: true };
+        // For custom backgrounds, infer isAnimated from extension since we don't have server metadata
+        const isAnimated = isAnimatedBackgroundExtension(bg);
+        const imageData = { filename: bg, isCustom: true, isAnimated };
         const thumbnail = createThumbnailElement(imageData);
         container.append(thumbnail);
     });

+}
 export async function getBackgrounds() {
-    const metadataPromise = preloadImageMetadata();
     const response = await fetch('/api/backgrounds/all', {
         method: 'POST',
         headers: getRequestHeaders(),

     if (response.ok) {
         const { images, config } = await response.json();
         Object.assign(THUMBNAIL_CONFIG, config);
         cachedSystemBackgrounds = images;
+        await preloadImageMetadata();
-        await metadataPromise;
         renderSystemBackgrounds(images);
         highlightSelectedBackground();

                 if (parentThumbnail) {
                     const bg = parentThumbnail.getAttribute('bgfile');
                     const isCustom = parentThumbnail.getAttribute('custom') === 'true';
-                    resolveImageUrl(bg, isCustom)
+                    const isAnimated = parentThumbnail.getAttribute('animated') === 'true';
+                    resolveImageUrl(bg, isCustom, isAnimated)
                         .then(url => { clipper.style.backgroundImage = url; })
                         .catch(() => { clipper.style.backgroundImage = PLACEHOLDER_IMAGE; });
+                }

     return isCustom ? `url("${encodeURI(bg)}")` : `url("${getBackgroundPath(bg)}")`;
+}
+function isAnimatedBackgroundExtension(fileName) {
+    const fileExtension = fileName.split('.').pop().toLowerCase();
+    return ANIMATED_BACKGROUND_EXTENSIONS.includes(fileExtension);
+}
 /**
  * Resolves the image URL for the background.
  * @param {string} bg Background file name
  * @param {boolean} isCustom Is a custom background
+ * @param {boolean|null} [isAnimated=null] Is the background animated (from metadata). If null, infers from extension.
  * @returns {Promise<string>} CSS URL of the background
  */
-async function resolveImageUrl(bg, isCustom) {
+async function resolveImageUrl(bg, isCustom, isAnimated = null) {
-    const fileExtension = bg.split('.').pop().toLowerCase();
+    // If isAnimated is not provided (null), fall back to extension-based heuristic
-    const isAnimated = ['mp4', 'webp'].includes(fileExtension);
+    let animated = isAnimated;
-    const thumbnailUrl = isAnimated && !background_settings.animation
+    if (animated === null) {
+        animated = isAnimatedBackgroundExtension(bg);
+    }
+    const thumbnailUrl = animated && !background_settings.animation
         ? await getThumbnailFromStorage(bg, isCustom)
         : isCustom
             ? bg

src/endpoints/backgrounds.js+38 -8 Viewed

 export const router = express.Router();
 router.post('/all', async function (request, response) {
+    try {
         const images = getImages(request.user.directories.backgrounds);
         const config = { width: thumbnailDimensions.bg[0], height: thumbnailDimensions.bg[1] };
-    response.json({ images, config });
+        // Get metadata for all images to provide isAnimated flag to client
+        const relativePaths = images.map(img => path.join('backgrounds', img));
+        const { results: metadataMap } = await getOrGenerateMetadataBatch(request.user.directories.root, relativePaths, 'bg');
+        // Build response with metadata for each image
+        const imagesWithMetadata = images.map(img => {
+            const relativePath = path.join('backgrounds', img);
+            const metadata = metadataMap[relativePath];
+            return {
+                filename: img,
+                isAnimated: metadata?.isAnimated ?? false,
+            };
+        });
+        response.json({ images: imagesWithMetadata, config });
+    } catch (error) {
+        console.error('[Backgrounds] Error fetching backgrounds:', error);
+        response.status(500).json({ error: 'Failed to fetch backgrounds' });
+    }
 });
-router.post('/delete', getFileNameValidationFunction('bg'), function (request, response) {
+router.post('/delete', getFileNameValidationFunction('bg'), async function (request, response) {
+    try {
         if (!request.body) return response.sendStatus(400);
         if (request.body.bg !== sanitize(request.body.bg)) {

         // Remove metadata for deleted image
         const relativePath = path.join('backgrounds', request.body.bg);
-    removeMetadata(request.user.directories.root, relativePath).catch(err => {
+        await removeMetadata(request.user.directories.root, relativePath).catch(err => {
             console.warn('[Backgrounds] Failed to remove metadata:', err.message);
         });
         return response.send('ok');
+    } catch (err) {
+        console.error(err);
+        response.sendStatus(500);
+    }
 });
-router.post('/rename', function (request, response) {
+router.post('/rename', async function (request, response) {
+    try {
         if (!request.body) return response.sendStatus(400);
         const oldFileName = path.join(request.user.directories.backgrounds, sanitize(request.body.old_bg));

         // Update metadata for renamed image
         const oldRelativePath = path.join('backgrounds', request.body.old_bg);
         const newRelativePath = path.join('backgrounds', request.body.new_bg);
-    renameMetadata(request.user.directories.root, oldRelativePath, newRelativePath).catch(err => {
+        await renameMetadata(request.user.directories.root, oldRelativePath, newRelativePath).catch(err => {
             console.warn('[Backgrounds] Failed to rename metadata:', err.message);
         });
         return response.send('ok');
+    } catch (err) {
+        console.error(err);
+        response.sendStatus(500);
+    }
 });
-router.post('/upload', function (request, response) {
+router.post('/upload', async function (request, response) {
+    try {
         if (!request.body || !request.file) return response.sendStatus(400);
         const img_path = path.join(request.file.destination, request.file.filename);
         const filename = sanitize(request.file.originalname);
-    try {
         fs.copyFileSync(img_path, path.join(request.user.directories.backgrounds, filename));
         fs.unlinkSync(img_path);
         invalidateThumbnail(request.user.directories, 'bg', filename);
         // Generate metadata for the new image
         const relativePath = path.join('backgrounds', filename);
-        getOrGenerateMetadataBatch(request.user.directories.root, [relativePath], 'bg').catch(err => {
+        await getOrGenerateMetadataBatch(request.user.directories.root, [relativePath], 'bg').catch(err => {
             console.warn('[Backgrounds] Failed to generate metadata for upload:', err.message);
         });

src/endpoints/image-metadata.js+1 -46 Viewed

 import writeFileAtomic from 'write-file-atomic';
 import express from 'express';
 import { Jimp } from '../jimp.js';
-import { getConfigValue, getImages, isPathUnderParent } from '../util.js';
+import { getConfigValue, isPathUnderParent } from '../util.js';
 export const METADATA_FILE = 'image-metadata.json';

     return orphanedPaths;
+}
-/**
- * Initializes metadata for all images in a directory.
- * @param {string} userDataRoot - Path to the user data directory root
- * @param {string} subDirectory - Subdirectory relative to userDataRoot
- * @param {ThumbnailType} type - The thumbnail type for resolution calculation
- * @returns {Promise<number>} Number of images processed
- */
-export async function initializeMetadataForDirectory(userDataRoot, subDirectory, type) {
-    const fullDir = path.join(userDataRoot, subDirectory);
-    let images;
-    try {
-        images = getImages(fullDir);
-    } catch {
-        // Directory doesn't exist or can't be read
-        return 0;
-    }
-    // Convert to relative paths from userDataRoot
-    const relativePaths = images.map(img => path.join(subDirectory, img));
-    // Generate metadata for new images
-    const { results, generatedCount } = await getOrGenerateMetadataBatch(userDataRoot, relativePaths, type);
-    if (generatedCount > 0) {
-        console.log(`[ImageMetadata] Generated metadata for ${generatedCount} new images in ${subDirectory}`);
-    }
-    return Object.keys(results).length;
-}
-/**
- * Initializes image metadata for all users' background directories.
- * @param {Array<{root: string}>} userDirectories - List of user directory objects
- * @returns {Promise<void>}
- */
-export async function initializeAllUserMetadata(userDirectories) {
-    try {
-        for (const userDir of userDirectories) {
-            await initializeMetadataForDirectory(userDir.root, 'backgrounds', 'bg');
-        }
-    } catch (error) {
-        console.error('[ImageMetadata] Failed to initialize background metadata:', error.message);
-    }
-}
 export const router = express.Router();

src/endpoints/thumbnails.js+1 -1 Viewed

 import { imageSize as sizeOf } from 'image-size';
 import { getConfigValue, invalidateFirefoxCache } from '../util.js';
-import { getThumbnailResolution, isAnimatedWebP, thumbnailDimensions as dimensions, isAnimatedApng } from './image-metadata.js';
+import { getThumbnailResolution, isAnimatedWebP, isAnimatedApng, thumbnailDimensions as dimensions } from './image-metadata.js';
 import { ResizeStrategy } from '@jimp/plugin-resize';
 export const publicRouter = express.Router();

src/server-main.js+0 -4 Viewed

 import { diskCache } from './endpoints/characters.js';
 import { migrateFlatSecrets } from './endpoints/secrets.js';
 import { migrateGroupChatsMetadataFormat } from './endpoints/groups.js';
-import { initializeAllUserMetadata } from './endpoints/image-metadata.js';
 // Work around a node v20.0.0, v20.1.0, and v20.2.0 bug. The issue was fixed in v20.3.0.
 // https://github.com/nodejs/node/issues/47822#issuecomment-1564708870

     await settingsInit();
     await statsInit();
-    // Initialize image metadata
-    await initializeAllUserMetadata(directories);
     const pluginsDirectory = path.join(serverDirectory, 'plugins');
     const cleanupPlugins = await loadPlugins(app, pluginsDirectory);
     const consoleTitle = process.title;