added updating thumbnails

public/script.js

@@ -312,9 +312,40 @@ let SM = {
 
     toLocalISOString: (date) => {
         return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0') + 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0');
+    },
+
+    updateThumbnail: (name, element) => {
+        axios.get('/media/' + name)
+            .then(response => {
+                if(response.data.status === 'ready') {
+                    if(element instanceof HTMLImageElement) {
+                        element.src = response.data.thumbnail;
+                    } else if(typeof element === 'string') {
+                        const imgElement = document.querySelector(element);
+                        if(imgElement instanceof HTMLImageElement) {
+                            imgElement.src = response.data.thumbnail;
+                        }
+                    }
+                } else if(response.data.status === 'processing') {
+                    setTimeout(() => {
+                        SM.updateThumbnail(name, element);
+                    }, 5000);
+                }
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    },
+
+    updateAllThumbnails: () => {
+        const elements = document.querySelectorAll('img[data-thumbnail]');
+        elements.forEach(element => {
+            SM.updateThumbnail(element.getAttribute('data-thumbnail'), element);
+        });
     }
 };
 
 document.addEventListener('DOMContentLoaded', () => {
     SM.updateBillingAddress();
+    SM.updateAllThumbnails();
 });

resources/views/admin/media/index.blade.php

@@ -26,7 +26,7 @@
                     @foreach ($media as $medium)
                         <tr>
                             <td class="flex items-center">
-                                <img src="{{ $medium->thumbnail }}" class="max-h-12 max-w-12 -ml-2 -my-3 mr-3 inline rounded" alt="{{ $medium->title }}" />
+                                <img src="{{ $medium->thumbnail }}" class="max-h-12 max-w-12 -ml-2 -my-3 mr-3 inline rounded" alt="{{ $medium->title }}" {{ $medium->status === 'processing' ? 'data-thumbnail=' . $medium->name : '' }} />
                                 <div>
                                     <div class="whitespace-normal">{{ $medium->title }}{!! $medium->password !== null ? '<i class="fa-solid fa-lock text-xs text-gray-400 ml-0.5 -translate-y-1.5 scale-75"></i>': '' !!}</div>
                                     <div class="md:hidden text-xs text-gray-500">{{ $medium->file_type }}</div>

resources/views/components/ui/file.blade.php

@@ -36,6 +36,10 @@
         document.getElementById('{{ $name }}_name').innerText = media.name;
         document.getElementById('{{ $name }}_size').innerText = SM.bytesToString(media.size);
 
+        if(Object.keys(media).includes('status') && media.status === 'processing') {
+            SM.updateThumbnail(document.getElementById('{{ $name }}_preview'), media.name);
+        }
+
         if(!media.mime_type.startsWith('image/') && (!media.thumbnail || media.thumbnail.startsWith('data:'))) {
             const extension = media.name.split('.').pop();
             document.getElementById('{{ $name }}_preview').src = '/thumbnails/' + extension + '.webp';