Upload 13 files

index.html

@@ -1666,21 +1666,19 @@
                     }
                     return;
                 }
-                if (Device.isMobile && item.image && item.image.startsWith('data:image') && item.image.length > 900000) {
-                    const reduced = await ImageHandler.reduceImageForMobile(item.image);
-                    if (reduced && reduced !== item.image) {
-                        ImageHandler.revokeDisplayUrl(item);
-                        item.image = reduced;
-                        Database.update(item.id, { image: reduced }).catch(() => {});
-                    }
-                }
-
-                const source = item.image || item.imageUrl;
-                const thumb = await ImageHandler.createThumbnail(source, maxWidth, quality);
-                if (thumb && thumb !== source) {
-                    item.thumb = thumb;
-                    Database.update(item.id, { thumb }).catch(() => {});
-                }
+                const source = item.image || item.imageUrl;
+                let sourceForThumb = source;
+                if (Device.isMobile && sourceForThumb && sourceForThumb.startsWith('data:image') && sourceForThumb.length > 900000) {
+                    const reduced = await ImageHandler.reduceImageForMobile(sourceForThumb);
+                    if (reduced) {
+                        sourceForThumb = reduced;
+                    }
+                }
+                const thumb = await ImageHandler.createThumbnail(sourceForThumb, maxWidth, quality);
+                if (thumb && thumb !== source) {
+                    item.thumb = thumb;
+                    Database.update(item.id, { thumb }).catch(() => {});
+                }
 
                 if ('requestIdleCallback' in window) {
                     requestIdleCallback(processNext);
@@ -1797,15 +1795,38 @@
                 }
             };
 
-            if (item.image && item.image.startsWith('data:image') && item.image.length > 1200000) {
-                ImageHandler.dataUrlToObjectUrlAsync(item.image).then((url) => {
-                    if (!url) return;
-                    item.displayUrl = url;
-                    if (AppState.currentModalItem === item) {
-                        this.imgEl.src = url;
+            const setFullFromBase64 = () => {
+                if (AppState.currentModalItem === item) {
+                    this.imgEl.src = item.image;
+                }
+            };
+
+            if (item.image && item.image.startsWith('data:image') && !fullUrl) {
+                if (item.image.length > 1200000) {
+                    ImageHandler.dataUrlToObjectUrlAsync(item.image).then((url) => {
+                        if (url) {
+                            item.displayUrl = url;
+                            if (AppState.currentModalItem === item) {
+                                this.imgEl.src = url;
+                            }
+                            return;
+                        }
+                        if ('requestIdleCallback' in window) {
+                            requestIdleCallback(setFullFromBase64);
+                        } else {
+                            setTimeout(setFullFromBase64, 0);
+                        }
+                    });
+                } else if (initialSrc !== item.image) {
+                    if ('requestIdleCallback' in window) {
+                        requestIdleCallback(setFullFromBase64);
+                    } else {
+                        setTimeout(setFullFromBase64, 0);
                     }
-                });
-            } else if (fullUrl && initialSrc !== fullUrl) {
+                }
+            }
+
+            if (fullUrl && initialSrc !== fullUrl) {
                 const preloader = new Image();
                 preloader.onload = () => {
                     if (AppState.currentModalItem === item) {
@@ -2382,19 +2403,18 @@
                     }
                     return;
                 }
-                if (item.image && item.image.startsWith('data:image') && item.image.length > 900000) {
-                    const reduced = await ImageHandler.reduceImageForMobile(item.image);
-                    if (reduced && reduced !== item.image) {
-                        ImageHandler.revokeDisplayUrl(item);
-                        item.image = reduced;
-                    }
-                }
-
-                const source = item.image || item.imageUrl;
-                const thumb = await ImageHandler.createThumbnail(source, maxWidth, quality);
-                if (thumb && thumb !== source) {
-                    item.thumb = thumb;
-                }
+                const source = item.image || item.imageUrl;
+                let sourceForThumb = source;
+                if (sourceForThumb && sourceForThumb.startsWith('data:image') && sourceForThumb.length > 900000) {
+                    const reduced = await ImageHandler.reduceImageForMobile(sourceForThumb);
+                    if (reduced) {
+                        sourceForThumb = reduced;
+                    }
+                }
+                const thumb = await ImageHandler.createThumbnail(sourceForThumb, maxWidth, quality);
+                if (thumb && thumb !== source) {
+                    item.thumb = thumb;
+                }
 
                 if ('requestIdleCallback' in window) {
                     requestIdleCallback(processNext);
@@ -3005,19 +3025,19 @@
                 if (Device.isMobile && previewImage.startsWith('data:image') && previewImage.length > 900000) {
                     const reduceTask = async () => {
                         try {
-                            const reduced = await ImageHandler.reduceImageForMobile(previewImage);
-                            if (reduced && reduced !== newItem.image) {
-                                ImageHandler.revokeDisplayUrl(newItem);
-                                newItem.image = reduced;
+                            let sourceForThumb = previewImage;
+                            const reduced = await ImageHandler.reduceImageForMobile(sourceForThumb);
+                            if (reduced) {
+                                sourceForThumb = reduced;
                             }
                             if (!newItem.thumb) {
-                                const newThumb = await ImageHandler.createThumbnail(newItem.image, 360, 0.6);
-                                if (newThumb && newThumb !== newItem.image) {
+                                const newThumb = await ImageHandler.createThumbnail(sourceForThumb, 360, 0.6);
+                                if (newThumb && newThumb !== sourceForThumb) {
                                     newItem.thumb = newThumb;
                                 }
                             }
                             if (AppState.db && newItem.id && !String(newItem.id).startsWith('temp-')) {
-                                Database.update(newItem.id, { image: newItem.image, thumb: newItem.thumb }).catch(() => {});
+                                Database.update(newItem.id, { thumb: newItem.thumb }).catch(() => {});
                             }
                             GalleryManager.render();
                         } catch (error) {