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 {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, 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.indexOffindIndex(s => s.filename === bg);
             if (cacheIndex !== -1) {
                 cachedSystemBackgrounds.splice(cacheIndex, 1);
+            }

 /**
  * Renders the system backgrounds gallery.
  * @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.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, 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'), 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);
             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', 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);
             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', 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);
         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';
 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, isAnimatedApng, thumbnailDimensions as dimensions, isAnimatedApng } 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;