a8004a9a · permissionBRICK/SillyTavern

package-lock.json+9 -5 Viewed

                 "is-docker": "^3.0.0",
                 "localforage": "^1.10.0",
                 "lodash": "^4.17.21",
-                "mime-types": "^3.0.1",
+                "mime-types": "^3.0.2",
                 "moment": "^2.30.1",
                 "morphdom": "^2.7.7",
                 "multer": "^2.0.2",

+            }
         },
         "node_modules/mime-types": {
-            "version": "3.0.1",
+            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-            "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
+            "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
             "license": "MIT",
             "dependencies": {
                 "mime-db": "^1.54.0"
             },
             "engines": {
-                "node": ">= 0.6"
+                "node": ">=18"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
         },
         "node_modules/mime-types/node_modules/mime-db": {

package.json+3 -3 Viewed

         "is-docker": "^3.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
-        "mime-types": "^3.0.1",
+        "mime-types": "^3.0.2",
         "moment": "^2.30.1",
         "morphdom": "^2.7.7",
         "multer": "^2.0.2",

@@ -164,7 +164,7 @@
164	"@types/yargs": "^17.0.33",	164	"@types/yargs": "^17.0.33",
165	"@types/yauzl": "^2.10.3",	165	"@types/yauzl": "^2.10.3",
166	"eslint": "^8.57.1",	166	"eslint": "^8.57.1",
167	"eslint-plugin-jsdoc": "^48.10.0",	167	"eslint-plugin-jest": "^27.9.0",
168	"eslint-plugin-jest": "^27.9.0"	168	"eslint-plugin-jsdoc": "^48.10.0"
169	}	169	}
170	}	170	}

public/scripts/constants.js+11 -0 Viewed

 };
 /**
+ * Bitwise flag-style media request types.
+ * @enum {number}
+ * @readonly
+ */
+export const MEDIA_REQUEST_TYPE = {
+    IMAGE: 0b001,
+    VIDEO: 0b010,
+    AUDIO: 0b100,
+};
+/**
  * Scroll behavior options when appending media to messages.
  * @enum {string}
  * @readonly

public/scripts/extensions/gallery/index.js+40 -12 Viewed

     animation_easing,
 } from '../../../script.js';
 import { groups, selected_group } from '../../group-chats.js';
-import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename, saveBase64AsFile, getFileExtension } from '../../utils.js';
+import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename, saveBase64AsFile, getFileExtension, getVideoThumbnail, clamp } from '../../utils.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';

 import { t, translate } from '../../i18n.js';
 import { Popup } from '../../popup.js';
 import { deleteMediaFromServer } from '../../chats.js';
+import { MEDIA_REQUEST_TYPE, VIDEO_EXTENSIONS } from '../../constants.js';
+const isVideo = (/** @type {string} */ url) => VIDEO_EXTENSIONS.some(ext => new RegExp(`.${ext}$`, 'i').test(url));
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;
 let firstTime = true;
 let deleteModeActive = false;
-// Exposed defaults for future tweaking
-let thumbnailHeight = 150;
-let paginationVisiblePages = 10;
-let paginationMaxLinesPerPage = 2;
-let galleryMaxRows = 3;
 // Remove all draggables associated with the gallery
 $('#movingDivs').on('click', '.dragClose', function () {

             folder: url,
             sortField: sortObj.field,
             sortOrder: sortObj.order,
+            type: MEDIA_REQUEST_TYPE.IMAGE | MEDIA_REQUEST_TYPE.VIDEO,
         }),
     });
     url = await getSanitizedFilename(url);
     const data = await response.json();
-    const items = data.map((file) => ({
+    const items = [];
+    for (const file of data) {
+        const item = {
             src: `user/images/${url}/${file}`,
             srct: `user/images/${url}/${file}`,
             title: '', // Optional title for each item
-    }));
+        };
+        if (isVideo(file)) {
+            try {
+                // 150px of max height with some allowance for various aspect ratios
+                const maxSide = Math.round(150 * 1.5);
+                item.srct = await getVideoThumbnail(item.src, maxSide, maxSide);
+            } catch (error) {
+                console.error('Failed to generate video thumbnail for gallery:', error);
+            }
+        }
+        items.push(item);
+    }
     return items;
+}

  * @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
  */
 async function initGallery(items, url) {
+    // Exposed defaults for future tweaking
+    const thumbnailHeight = 150;
+    const paginationVisiblePages = 5;
+    const paginationMaxLinesPerPage = 2;
+    const galleryMaxRows = clamp(Math.floor((window.innerHeight * 0.9 - 75) / thumbnailHeight), 1, 10);
     const nonce = `nonce-${Math.random().toString(36).substring(2, 15)}`;
     const gallery = $('#dragGallery');
     gallery.addClass(nonce);

         galleryMaxRows: galleryMaxRows,
         galleryPaginationTopButtons: false,
         galleryNavigationOverlayButtons: true,
+        galleryPaginationMode: 'rectangles',
         galleryTheme: {
             navigationBar: { background: 'none', borderTop: '', borderBottom: '', borderRight: '', borderLeft: '' },
             navigationBreadcrumb: { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '4px' },

     // Create a hidden file input
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*';
+    fileInput.accept = 'image/*,video/*';
     fileInput.multiple = true;
     fileInput.style.display = 'none';

     const newElement = document.importNode(template.content, true);
     // Step 2: Append the given image
-    const imgElem = document.createElement('img');
+    const mediaElement = isVideo(url)
-    imgElem.src = url;
+        ? document.createElement('video')
+        : document.createElement('img');
+    mediaElement.src = url;
+    if (mediaElement instanceof HTMLVideoElement) {
+        mediaElement.controls = true;
+        mediaElement.autoplay = true;
+    }
     let uniqueId = `draggable_${id}`;
     const draggableElem = /** @type {HTMLElement} */ (newElement.querySelector('.draggable'));
     if (draggableElem) {
-        draggableElem.appendChild(imgElem);
+        draggableElem.appendChild(mediaElement);
         // Find a unique id for the draggable element

public/scripts/extensions/gallery/style.css+4 -0 Viewed

     opacity: 1;
     filter: unset;
+}
+.galleryImageDraggable video {
+    width: 100%;
+}

public/scripts/utils.js+81 -27 Viewed

+}
 /**
+ * Gets a thumbnail image from a video URL.
+ * @param {string} videoUrl URL of the video
+ * @param {number|null} [maxWidth=null] Maximum width of the thumbnail
+ * @param {number|null} [maxHeight=null] Maximum height of the thumbnail
+ * @param {string} [type='image/jpeg'] MIME type of the thumbnail
+ * @returns {Promise<string>} Promise that resolves to a data URL of the video thumbnail
+ */
+export function getVideoThumbnail(videoUrl, maxWidth = null, maxHeight = null, type = 'image/jpeg') {
+    const video = document.createElement('video');
+    video.src = videoUrl;
+    return new Promise((resolve, reject) => {
+        video.onloadeddata = function () {
+            // Set the time to capture the thumbnail at the middle of the video
+            video.currentTime = video.duration / 2;
+        };
+        video.onseeked = function () {
+            // Create a canvas to draw the thumbnail
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const { thumbnailWidth, thumbnailHeight } = calculateThumbnailSize(video.videoWidth, video.videoHeight, maxWidth, maxHeight);
+            canvas.width = thumbnailWidth;
+            canvas.height = thumbnailHeight;
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.fillStyle = 'black';
+            ctx.fillRect(0, 0, thumbnailWidth, thumbnailHeight);
+            ctx.drawImage(video, 0, 0, thumbnailWidth, thumbnailHeight);
+            // Get the data URL of the thumbnail
+            const dataUrl = canvas.toDataURL(type);
+            resolve(dataUrl);
+        };
+        video.onerror = function () {
+            reject(new Error('Failed to load video'));
+        };
+    });
+}
+/**
+ * Calculates the thumbnail size for a media element while maintaining aspect ratio.
+ * @param {number} width Media width
+ * @param {number} height Media height
+ * @param {number?} maxWidth Max width (null = no limit)
+ * @param {number?} maxHeight Max height (null = no limit)
+ * @returns {{ thumbnailWidth: number, thumbnailHeight: number }} Thumbnail size
+ */
+export function calculateThumbnailSize(width, height, maxWidth, maxHeight) {
+    // Calculate the thumbnail dimensions while maintaining the aspect ratio
+    const aspectRatio = width / height;
+    let thumbnailWidth = maxWidth;
+    let thumbnailHeight = maxHeight;
+    if (maxWidth === null) {
+        thumbnailWidth = width;
+        maxWidth = width;
+    }
+    if (maxHeight === null) {
+        thumbnailHeight = height;
+        maxHeight = height;
+    }
+    // Do not upscale if image is already smaller than max dimensions
+    if (width <= maxWidth && height <= maxHeight) {
+        thumbnailWidth = width;
+        thumbnailHeight = height;
+    } else {
+        if (width > height) {
+            thumbnailHeight = maxWidth / aspectRatio;
+        } else {
+            thumbnailWidth = maxHeight * aspectRatio;
+        }
+    }
+    return { thumbnailWidth: Math.round(thumbnailWidth), thumbnailHeight: Math.round(thumbnailHeight) };
+}
+/**
  * Gets the duration of an audio from a data URL.
  * @param {string} dataUrl Audio data URL
  * @returns {Promise<number>} Duration in seconds

         img.onload = () => {
             const canvas = document.createElement('canvas');
             const ctx = canvas.getContext('2d');
+            const { thumbnailWidth, thumbnailHeight } = calculateThumbnailSize(img.width, img.height, maxWidth, maxHeight);
-            // Calculate the thumbnail dimensions while maintaining the aspect ratio
-            const aspectRatio = img.width / img.height;
-            let thumbnailWidth = maxWidth;
-            let thumbnailHeight = maxHeight;
-            if (maxWidth === null) {
-                thumbnailWidth = img.width;
-                maxWidth = img.width;
-            }
-            if (maxHeight === null) {
-                thumbnailHeight = img.height;
-                maxHeight = img.height;
-            }
-            // Do not upscale if image is already smaller than max dimensions
-            if (img.width <= maxWidth && img.height <= maxHeight) {
-                thumbnailWidth = img.width;
-                thumbnailHeight = img.height;
-            } else {
-                if (img.width > img.height) {
-                    thumbnailHeight = maxWidth / aspectRatio;
-                } else {
-                    thumbnailWidth = maxHeight * aspectRatio;
-                }
-            }
             // Set the canvas dimensions and draw the resized image
             canvas.width = thumbnailWidth;

@@ -2386,6 +2438,7 @@ export async function fetchFaFile(name) {
2386	.map(rule => rule.selectorText.split(/,\s*/).map(selector => selector.split('::').shift().slice(1)))	2438	.map(rule => rule.selectorText.split(/,\s*/).map(selector => selector.split('::').shift().slice(1)))
2387	;	2439	;
2388	}	2440	}
		2441
2389	export async function fetchFa() {	2442	export async function fetchFa() {
2390	return [...new Set((await Promise.all([	2443	return [...new Set((await Promise.all([
2391	fetchFaFile('fontawesome.min.css'),	2444	fetchFaFile('fontawesome.min.css'),

@@ -2782,4 +2835,5 @@ export async function importFromExternalUrl(url, { preserveFileName = null } = {
2782	break;	2835	break;
2783	}	2836	}
2784	}	2837	}
		2838
2785	export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);	2839	export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

src/constants.js+10 -0 Viewed

     'aiff',
 ];
+/**
+ * Bitwise flag-style media request types.
+ */
+export const MEDIA_REQUEST_TYPE = {
+    IMAGE: 0b001,
+    VIDEO: 0b010,
+    AUDIO: 0b100,
+};
 export const ZAI_ENDPOINT = {
     COMMON: 'common',
     CODING: 'coding',

src/endpoints/images.js+3 -2 Viewed

 import sanitize from 'sanitize-filename';
 import { clientRelativePath, removeFileExtension, getImages, isPathUnderParent } from '../util.js';
-import { MEDIA_EXTENSIONS } from '../constants.js';
+import { MEDIA_EXTENSIONS, MEDIA_REQUEST_TYPE } from '../constants.js';
 /**
  * Ensure the directory for the provided file path exists.

+        }
         const directoryPath = path.join(request.user.directories.userImages, sanitize(request.body.folder));
+        const type = Number(request.body.type ?? MEDIA_REQUEST_TYPE.IMAGE);
         const sort = request.body.sortField || 'date';
         const order = request.body.sortOrder || 'asc';

@@ -100,7 +101,7 @@ router.post('/list/:folder?', (request, response) => {
100	fs.mkdirSync(directoryPath, { recursive: true });	101	fs.mkdirSync(directoryPath, { recursive: true });
101	}	102	}
102		103
103	const images = getImages(directoryPath, sort);	104	const images = getImages(directoryPath, sort, type);
104	if (order === 'desc') {	105	if (order === 'desc') {
105	images.reverse();	106	images.reverse();
106	}	107	}

src/util.js+20 -5 Viewed

 import { default as simpleGit } from 'simple-git';
 import chalk from 'chalk';
 import bytes from 'bytes';
-import { LOG_LEVELS, CHAT_COMPLETION_SOURCES } from './constants.js';
+import { LOG_LEVELS, CHAT_COMPLETION_SOURCES, MEDIA_REQUEST_TYPE } from './constants.js';
 import { serverDirectory } from './server-directory.js';
 import { isFirefox } from './express-common.js';

  * Get a list of images in a directory.
  * @param {string} directoryPath Path to the directory containing the images
  * @param {'name' | 'date'} sortBy Sort images by name or date
+ * @param {number} type Bitwise flag representing media types to include
  * @returns {string[]} List of image file names
  */
-export function getImages(directoryPath, sortBy = 'name') {
+export function getImages(directoryPath, sortBy = 'name', type = MEDIA_REQUEST_TYPE.IMAGE) {
     function getSortFunction() {
         switch (sortBy) {
             case 'name':

+    }
     return fs
-        .readdirSync(directoryPath)
+        .readdirSync(directoryPath, { withFileTypes: true })
+        .filter(dirent => dirent.isFile())
+        .map(dirent => dirent.name)
         .filter(file => {
-            const type = mime.lookup(file);
+            const fileType = mime.lookup(file);
-            return type && type.startsWith('image/');
+            if (!fileType) {
+                return false;
+            }
+            if ((type & MEDIA_REQUEST_TYPE.IMAGE) && fileType.startsWith('image/')) {
+                return true;
+            }
+            if ((type & MEDIA_REQUEST_TYPE.VIDEO) && fileType.startsWith('video/')) {
+                return true;
+            }
+            if ((type & MEDIA_REQUEST_TYPE.AUDIO) && fileType.startsWith('audio/')) {
+                return true;
+            }
+            return false;
         })
         .sort(getSortFunction());
+}

Gallery: Add video uploads to gallery (#4796) * Gallery: Add video uploads to gallery * Improve thumbnailing logic * Add error handling to thumnailing process * Improve formatting in utils.js