Load bg thumbnail config from backend

dfc1688eb5f4070d5fec76d55985f92db6deb0af

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/backgrounds.js+9 -3 Viewed

  */
 const THUMBNAIL_BLOBS = new Map();
+const THUMBNAIL_CONFIG = {
+    width: 160,
+    height: 90,
+};
 /**
  * Global IntersectionObserver instance for lazy loading backgrounds
  * @type {IntersectionObserver|null}

+        }
         const imageBlob = await response.blob();
         const imageBase64 = await getBase64Async(imageBlob);
-        const thumbnailBase64 = await createThumbnail(imageBase64);
+        const thumbnailBase64 = await createThumbnail(imageBase64, THUMBNAIL_CONFIG.width, THUMBNAIL_CONFIG.height);
         const thumbnailBlob = await fetch(thumbnailBase64).then(res => res.blob());
         await THUMBNAIL_STORAGE.setItem(bg, thumbnailBlob);
         const blobUrl = URL.createObjectURL(thumbnailBlob);

         body: JSON.stringify({}),
     });
     if (response.ok) {
-        const getData = await response.json();
+        const { images, config } = await response.json();
+        Object.assign(THUMBNAIL_CONFIG, config);
         $('#bg_menu_content').children('div').remove();
-        for (const bg of getData) {
+        for (const bg of images) {
             const template = await getBackgroundFromTemplate(bg, false);
             $('#bg_menu_content').append(template);
+        }

src/endpoints/backgrounds.js+4 -3 Viewed

 import express from 'express';
 import sanitize from 'sanitize-filename';
-import { invalidateThumbnail } from './thumbnails.js';
+import { dimensions, invalidateThumbnail } from './thumbnails.js';
 import { getImages } from '../util.js';
 import { getFileNameValidationFunction } from '../middleware/validateFileName.js';
 export const router = express.Router();
 router.post('/all', function (request, response) {
-    var images = getImages(request.user.directories.backgrounds);
+    const images = getImages(request.user.directories.backgrounds);
-    response.send(JSON.stringify(images));
+    const config = { width: dimensions.bg[0], height: dimensions.bg[1] };
+    response.json({ images, config });
 });
 router.post('/delete', getFileNameValidationFunction('bg'), function (request, response) {

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

 const pngFormat = String(getConfigValue('thumbnails.format', 'jpg')).toLowerCase().trim() === 'png';
 /** @type {Record<string, number[]>} */
-const dimensions = {
+export const dimensions = {
     'bg': getConfigValue('thumbnails.dimensions.bg', [160, 90]),
     'avatar': getConfigValue('thumbnails.dimensions.avatar', [96, 144]),
 };