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.12",
                 "moment": "^2.30.1",
                 "morphdom": "^2.7.7",
                 "multer": "^2.0.2",

+            }
         },
         "node_modules/mime-types": {
             "version": "3.0.12",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.12.tgz",
             "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFDLbgzdk0h4juoQ9fCKXW4by0UJqj+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWAnOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
             "license": "MIT",
             "dependencies": {
                 "mime-db": "^1.54.0"
             },
             "engines": {
                 "node": ">= 0.618"
 +            },
 +            "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.12",
         "moment": "^2.30.1",
         "morphdom": "^2.7.7",
         "multer": "^2.0.2",

@@ -164,7 +164,7 @@
164	164	"@types/yargs": "^17.0.33",
165	165	"@types/yauzl": "^2.10.3",
166	166	"eslint": "^8.57.1",
167	167	"eslint-plugin-jsdocjest": "^4827.109.0",
168	168	"eslint-plugin-jestjsdoc": "^2748.910.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+44 -16 Viewed

     animation_easing,
 } from '../../../script.js';
 import { groups, selected_group } from '../../group-chats.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 = [];
 -        src: `user/images/${url}/${file}`,
++
 -        srct: `user/images/${url}/${file}`,
 +    for (const file of data) {
 -        title: '', // Optional title for each item
 +        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;
+}

@@ -165,7 +179,7 @@ async function getGalleryFolders() {
165	179	*/
166	180	async function deleteGalleryItem(url) {
167	181	const isDeleted = await deleteMediaFromServer(url, false);
168	182	if (isDeleted) {
169	183	toastr.success(t`Image deleted successfully.`);
170	184	}
171	185	}

  * @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/*,video/*';
     fileInput.multiple = true;
     fileInput.style.display = 'none';

     const newElement = document.importNode(template.content, true);
     // Step 2: Append the given image
     const imgElemmediaElement = document.createElementisVideo('img'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(imgElemmediaElement);
         // 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+84 -30 Viewed

  */
 export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>';
 export const localizePagination = function (container) {
     container.find('[title="Next page"]').attr('title', t`Next page`);
     container.find('[title="Previous page"]').attr('title', t`Previous page`);
     container.find('[title="First page"]').attr('title', t`First page`);

  * @param {number[]} sizeChangerOptions Array of page size options
  * @returns {string} The rendered dropdown element as a string
  */
 export const renderPaginationDropdown = function (pageSize, sizeChangerOptions) {
     const sizeSelect = document.createElement('select');
     sizeSelect.classList.add('J-paginationjs-size-select');

     return sizeSelect.outerHTML;
 };
 export const paginationDropdownChangeHandler = function (event, size) {
     let dropdown = $(event?.originalEvent?.currentTarget || event.delegateTarget).find('select');
     dropdown.find('[selected]').removeAttr('selected');
     dropdown.find(`[value=${size}]`).attr('selected', '');

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

@@ -2782,4 +2835,5 @@ export async function importFromExternalUrl(url, { preserveFileName = null } = {
2782	2835	break;
2783	2836	}
2784	2837	}
	2838	+
2785	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, 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	101	fs.mkdirSync(directoryPath, { recursive: true });
101	102	}
102	103
103	104	const images = getImages(directoryPath, sort, type);
104	105	if (order === 'desc') {
105	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, 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', type = MEDIA_REQUEST_TYPE.IMAGE) {
     function getSortFunction() {
         switch (sortBy) {
             case 'name':

+    }
     return fs
         .readdirSync(directoryPath, { withFileTypes: true })
 +        .filter(dirent => dirent.isFile())
 +        .map(dirent => dirent.name)
         .filter(file => {
             const typefileType = 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