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 = 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')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')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();
     });
+}