Add video preview to clean-up dialog
| @@ -217,8 +217,9 @@ class DataMaidDialog { | ||
| 217 | 217 | button.addEventListener('click', async () => { |
| 218 | 218 | const item = button.closest('.dataMaidItem'); |
| 219 | 219 | const hash = item?.getAttribute('data-hash'); |
| 220 | + const itemName = items.find(i => i.hash === hash)?.name; | |
| 220 | 221 | if (hash) { |
| 221 | 222 | await this.view(prop, hash, itemName); |
| 222 | 223 | } |
| 223 | 224 | }); |
| 224 | 225 | }); |
| @@ -304,13 +305,14 @@ class DataMaidDialog { | ||
| 304 | 305 | * Opens the item view for a specific hash. |
| 305 | 306 | * @param {string} prop Property name for the category |
| 306 | 307 | * @param {string} hash Item hash to view |
| 308 | + * @param {string} name Name of the item to view | |
| 307 | 309 | * @private |
| 308 | 310 | */ |
| 309 | 311 | async view(prop, hash, name) { |
| 310 | 312 | const url = this.getViewUrl(hash); |
| 311 | 313 | const isImage = ['images', 'avatarThumbnails', 'backgroundThumbnails'].includes(prop); |
| 312 | 314 | const element = isImage |
| 313 | 315 | ? await this.getViewElement(url, name) |
| 314 | 316 | : await this.getTextViewElement(url); |
| 315 | 317 | await callGenericPopup(element, POPUP_TYPE.DISPLAY, '', { large: true, wide: true }); |
| 316 | 318 | } |
| @@ -341,16 +343,21 @@ class DataMaidDialog { | ||
| 341 | 343 | } |
| 342 | 344 | |
| 343 | 345 | /** |
| 344 | 346 | * Gets ana imagemedia element for viewing images or videos. |
| 345 | 347 | * @param {string} url View URL |
| 348 | + * @param {string} name Name of the file | |
| 346 | 349 | * @returns {Promise<HTMLElement>} Image element |
| 347 | 350 | * @private |
| 348 | 351 | */ |
| 349 | 352 | async getViewElement(url, name) { |
| 350 | - const img = document.createElement('img'); | |
| 353 | + const isVideo = /\.(mp4|webm|ogg|avi|mov|3gp|flv|mkv|wmv)$/i.test(name); | |
| 351 | - img.src = url; | |
| 354 | + const mediaElement = document.createElement(isVideo ? 'video' : 'img'); | |
| 352 | - img.classList.add('dataMaidImageView'); | |
| 355 | + if (mediaElement instanceof HTMLVideoElement) { | |
| 353 | - return img; | |
| 356 | + mediaElement.controls = true; | |
| 357 | + } | |
| 358 | + mediaElement.src = url; | |
| 359 | + mediaElement.classList.add('dataMaidImageView'); | |
| 360 | + return mediaElement; | |
| 354 | 361 | } |
| 355 | 362 | |
| 356 | 363 | /** |