Preserve media playback state when running appendMediaToMessage (#4771) * Preserve media playback state when running appendMediaToMessage * Better selector specificity * Fix local variable name * Move typedef to global.d.ts * Check for readyState on save/restore * Only check for currentSrc on restoration callback

b10f6803719c16dc064d555531402956787c84a9

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

Signed

Parents: c7040d2be46324400c2098d2c58950c0036d9da0

public/global.d.ts+8 -0 Viewed

         captioned?: boolean;
+    }
+    /** Media playback state */
+    interface MediaState {
+        /** Current playback time */
+        currentTime: number;
+        /** Whether the media is paused */
+        paused: boolean;
+    }
     // Global namespace modules
     interface Window {
         ai: any;

public/script.js+62 -4 Viewed

 export function appendMediaToMessage(mes, messageElement, scrollBehavior = SCROLL_BEHAVIOR.ADJUST) {
     ensureMessageMediaIsArray(mes);
+    const fileWrapper = messageElement.find('.mes_file_wrapper');
+    const mediaWrapper = messageElement.find('.mes_media_wrapper');
     const hasMedia = Array.isArray(mes?.extra?.media) && mes.extra.media.length > 0;
     const hasFiles = Array.isArray(mes?.extra?.files) && mes.extra.files.length > 0;
-    const mediaDisplay = getMediaDisplay(mes);
+    const mediaDisplay = hasMedia ? getMediaDisplay(mes) : null;
     const hideMessageText = hasMedia && mes?.extra?.inline_image === false;
     const mediaBlocks = [];

         return appendImageAttachment(attachment, index);
+    }
+    /**
+     * Saves the current playback times of media elements in the message.
+     * @returns {Map<string, MediaState>} Media playback times by source URL
+     */
+    function saveMediaStates() {
+        const states = new Map();
+        const media = mediaWrapper.find('video, audio');
+        media.each((_, element) => {
+            if (element instanceof HTMLMediaElement) {
+                if (!element.currentSrc || element.readyState === HTMLMediaElement.HAVE_NOTHING) {
+                    return;
+                }
+                const state = { currentTime: element.currentTime, paused: element.paused };
+                states.set(element.currentSrc, state);
+            }
+        });
+        return states;
+    }
+    /**
+     * Restores the playback times of media elements in the message.
+     * @param {Map<string, MediaState>} states Media playback times by source URL
+     */
+    function restoreMediaStates(states) {
+        const media = mediaWrapper.find('video, audio');
+        media.each((_, element) => {
+            if (element instanceof HTMLMediaElement) {
+                const restoreState = () => {
+                    if (!states.has(element.currentSrc)) {
+                        return;
+                    }
+                    const state = states.get(element.currentSrc);
+                    element.currentTime = state.currentTime;
+                    if (!state.paused) {
+                        element.play();
+                    }
+                };
+                if (element.readyState < HTMLMediaElement.HAVE_METADATA) {
+                    element.addEventListener('loadedmetadata', () => restoreState(), { once: true });
+                } else {
+                    restoreState();
+                }
+            }
+        });
+    }
     // Add media gallery to message
     if (hasMedia && mediaDisplay === MEDIA_DISPLAY.GALLERY) {
         const mediaIndex = getMediaIndex(mes);

+    }
     // Remove existing file containers
-    messageElement.find('.mes_file_wrapper').empty();
+    fileWrapper.empty();
     // Add files to message
     if (hasFiles) {

             template.attr('data-index', index);
             template.find('.mes_file_name').text(file.name).attr('title', file.name);
             template.find('.mes_file_size').text(humanFileSize(file.size)).attr('title', file.size);
-            messageElement.find('.mes_file_wrapper').append(template);
+            fileWrapper.append(template);
+        }
+    }
+    // Early return if no media
+    if (!hasMedia) {
+        mediaWrapper.empty();
+        doAdjustScroll();
+        return;
+    }
     // TODO: Consider making this awaitable
     Promise.race([Promise.all(mediaPromises), delay(debounce_timeout.short)]).then(() => {
-        messageElement.find('.mes_media_wrapper').empty().append(mediaBlocks);
+        const states = saveMediaStates();
+        mediaWrapper.empty().append(mediaBlocks);
+        restoreMediaStates(states);
         doAdjustScroll();
     });
+}