Add video preview to clean-up dialog

b357e5d25e54bc9985d55d0cbe4d889365a6f42b

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

public/scripts/data-maid.js+16 -9 Viewed

             button.addEventListener('click', async () => {
                 const item = button.closest('.dataMaidItem');
                 const hash = item?.getAttribute('data-hash');
+                const itemName = items.find(i => i.hash === hash)?.name;
                 if (hash) {
-                    await this.view(prop, hash);
+                    await this.view(prop, hash, itemName);
+                }
             });
         });

      * Opens the item view for a specific hash.
      * @param {string} prop Property name for the category
      * @param {string} hash Item hash to view
+     * @param {string} name Name of the item to view
      * @private
      */
-    async view(prop, hash) {
+    async view(prop, hash, name) {
         const url = this.getViewUrl(hash);
         const isImage = ['images', 'avatarThumbnails', 'backgroundThumbnails'].includes(prop);
         const element = isImage
-            ? await this.getViewElement(url)
+            ? await this.getViewElement(url, name)
             : await this.getTextViewElement(url);
         await callGenericPopup(element, POPUP_TYPE.DISPLAY, '', { large: true, wide: true });
+    }

+    }
     /**
-     * Gets an image element for viewing images.
+     * Gets a media element for viewing images or videos.
      * @param {string} url View URL
+     * @param {string} name Name of the file
      * @returns {Promise<HTMLElement>} Image element
      * @private
      */
-    async getViewElement(url) {
+    async getViewElement(url, name) {
-        const img = document.createElement('img');
+        const isVideo = /\.(mp4|webm|ogg|avi|mov|3gp|flv|mkv|wmv)$/i.test(name);
-        img.src = url;
+        const mediaElement = document.createElement(isVideo ? 'video' : 'img');
-        img.classList.add('dataMaidImageView');
+        if (mediaElement instanceof HTMLVideoElement) {
-        return img;
+            mediaElement.controls = true;
+        }
+        mediaElement.src = url;
+        mediaElement.classList.add('dataMaidImageView');
+        return mediaElement;
+    }
     /**