Merge branch 'staging' into pin-styles

public/global.d.ts

@@ -55,4 +55,15 @@ declare global {
      * @param provider Translation provider
      */
     async function translate(text: string, lang: string, provider: string = null): Promise<string>;
+
+    interface ConvertVideoArgs {
+        buffer: Uint8Array;
+        name: string;
+    }
+
+    /**
+     * Converts a video file to an animated WebP format using FFmpeg.
+     * @param args - The arguments for the conversion function.
+     */
+    function convertVideoToAnimatedWebp(args: ConvertVideoArgs): Promise<Uint8Array>;
 }

public/index.html

@@ -4968,7 +4968,7 @@
                     <div id="bg_menu_content" class="bg_list">
                         <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <label class="input-file">
-                                <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
+                                <input type="file" id="add_bg_button" name="avatar" accept="image/*, video/*">
                                 <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                             </label>
                         </form>

public/script.js

@@ -9154,7 +9154,7 @@ function formatSwipeCounter(current, total) {
  * @param {string} [params.source] The source of the swipe event.
  * @param {boolean} [params.repeated] Is the swipe event repeated.
  */
-function swipe_left(_event, { source, repeated } = {}) {
+export function swipe_left(_event, { source, repeated } = {}) {
     if (chat.length - 1 === Number(this_edit_mes_id)) {
         closeMessageEditor();
     }
@@ -9302,7 +9302,7 @@ function swipe_left(_event, { source, repeated } = {}) {
  * @param {string} [params.source] The source of the swipe event.
  * @param {boolean} [params.repeated] Is the swipe event repeated.
  */
-function swipe_right(_event, { source, repeated } = {}) {
+export function swipe_right(_event, { source, repeated } = {}) {
     if (chat.length - 1 === Number(this_edit_mes_id)) {
         closeMessageEditor();
     }

public/scripts/backgrounds.js

@@ -1,7 +1,7 @@
 import { Fuse } from '../lib.js';
 
 import { callPopup, chat_metadata, eventSource, event_types, generateQuietPrompt, getCurrentChatId, getRequestHeaders, getThumbnailUrl, saveSettingsDebounced } from '../script.js';
-import { saveMetadataDebounced } from './extensions.js';
+import { openThirdPartyExtensionMenu, saveMetadataDebounced } from './extensions.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { flashHighlight, stringFormat } from './utils.js';
@@ -78,7 +78,7 @@ function getChatBackgroundsList() {
 }
 
 function getBackgroundPath(fileUrl) {
-    return `backgrounds/${fileUrl}`;
+    return `backgrounds/${encodeURIComponent(fileUrl)}`;
 }
 
 function highlightLockedBackground() {
@@ -218,7 +218,7 @@ async function onCopyToSystemBackgroundClick(e) {
     const formData = new FormData();
     formData.set('avatar', file);
 
-    uploadBackground(formData);
+    await uploadBackground(formData);
 
     const list = chat_metadata[LIST_METADATA_KEY] || [];
     const index = list.indexOf(bgNames.oldBg);
@@ -439,7 +439,7 @@ async function delBackground(bg) {
     });
 }
 
-function onBackgroundUploadSelected() {
+async function onBackgroundUploadSelected() {
     const form = $('#form_bg_download').get(0);
 
     if (!(form instanceof HTMLFormElement)) {
@@ -448,34 +448,82 @@ function onBackgroundUploadSelected() {
     }
 
     const formData = new FormData(form);
-    uploadBackground(formData);
+    await convertFileIfVideo(formData);
+    await uploadBackground(formData);
     form.reset();
 }
 
+/**
+ * Converts a video file to an animated webp format if the file is a video.
+ * @param {FormData} formData
+ * @returns {Promise<void>}
+ */
+async function convertFileIfVideo(formData) {
+    const file = formData.get('avatar');
+    if (!(file instanceof File)) {
+        return;
+    }
+    if (!file.type.startsWith('video/')) {
+        return;
+    }
+    if (typeof globalThis.convertVideoToAnimatedWebp !== 'function') {
+        toastr.warning(t`Click here to install the Video Background Loader extension`, t`Video background uploads require a downloadable add-on`, {
+            timeOut: 0,
+            extendedTimeOut: 0,
+            onclick: () => openThirdPartyExtensionMenu('https://github.com/SillyTavern/Extension-VideoBackgroundLoader'),
+        });
+        return;
+    }
+
+    let toastMessage = jQuery();
+    try {
+        toastMessage = toastr.info(t`Preparing video for upload. This may take several minutes.`, t`Please wait`, { timeOut: 0, extendedTimeOut: 0 });
+        const sourceBuffer = await file.arrayBuffer();
+        const convertedBuffer = await globalThis.convertVideoToAnimatedWebp({ buffer: new Uint8Array(sourceBuffer), name: file.name });
+        const convertedFileName = file.name.replace(/\.[^/.]+$/, '.webp');
+        const convertedFile = new File([convertedBuffer], convertedFileName, { type: 'image/webp' });
+        formData.set('avatar', convertedFile);
+        toastMessage.remove();
+    } catch (error) {
+        formData.delete('avatar');
+        toastMessage.remove();
+        console.error('Error converting video to animated webp:', error);
+        toastr.error(t`Error converting video to animated webp`);
+    }
+}
+
 /**
  * Uploads a background to the server
  * @param {FormData} formData
  */
-function uploadBackground(formData) {
-    jQuery.ajax({
-        type: 'POST',
-        url: '/api/backgrounds/upload',
-        data: formData,
-        beforeSend: function () {
-        },
-        cache: false,
-        contentType: false,
-        processData: false,
-        success: async function (bg) {
-            setBackground(bg, generateUrlParameter(bg, false));
-            await getBackgrounds();
-            highlightNewBackground(bg);
-        },
-        error: function (jqXHR, exception) {
-            console.log(exception);
-            console.log(jqXHR);
-        },
-    });
+async function uploadBackground(formData) {
+    try {
+        if (!formData.has('avatar')) {
+            console.log('No file provided. Background upload cancelled.');
+            return;
+        }
+
+        const headers = getRequestHeaders();
+        delete headers['Content-Type'];
+
+        const response = await fetch('/api/backgrounds/upload', {
+            method: 'POST',
+            headers: headers,
+            body: formData,
+            cache: 'no-cache',
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to upload background');
+        }
+
+        const bg = await response.text();
+        setBackground(bg, generateUrlParameter(bg, false));
+        await getBackgrounds();
+        highlightNewBackground(bg);
+    } catch (error) {
+        console.error('Error uploading background:', error);
+    }
 }
 
 /**

public/scripts/st-context.js

@@ -50,6 +50,8 @@ import {
     unshallowCharacter,
     deleteLastMessage,
     getCharacterCardFields,
+    swipe_right,
+    swipe_left,
 } from '../script.js';
 import {
     extension_settings,
@@ -196,6 +198,7 @@ export function getContext() {
         humanizedDateTime,
         updateMessageBlock,
         appendMediaToMessage,
+        swipe: { left: swipe_left, right: swipe_right },
         variables: {
             local: {
                 get: getLocalVariable,