Thumbnails: Added OOM handling and regen endpoint

[bookstack] / resources / js / components / image-manager.js

diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index 78abcf30d8b8c5465f360094f9a9d193be02dd5e..bc0493a88faddac4d1f400575285802cb86eba7e 100644 (file)
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -90,6 +90,15 @@ export class ImageManager extends Component {
             }
         });
 
+        // Rebuild thumbs click
+        onChildEvent(this.formContainer, '#image-manager-rebuild-thumbs', 'click', async (_, button) => {
+            button.disabled = true;
+            if (this.lastSelected) {
+                await this.rebuildThumbnails(this.lastSelected.id);
+            }
+            button.disabled = false;
+        });
+
         // Edit form submit
         this.formContainer.addEventListener('ajax-form-success', () => {
             this.refreshGallery();
@@ -268,4 +277,14 @@ export class ImageManager extends Component {
         return this.loadMore.querySelector('button') && !this.loadMore.hasAttribute('hidden');
     }
 
+    async rebuildThumbnails(imageId) {
+        try {
+            const response = await window.$http.put(`/images/${imageId}/rebuild-thumbnails`);
+            window.$events.success(response.data);
+            this.refreshGallery();
+        } catch (err) {
+            window.$events.showResponseError(err);
+        }
+    }
+
 }