added media status and retry loading thumbnails

app/Jobs/Media/GenerateVariants.php

@@ -109,5 +109,8 @@ class GenerateVariants implements ShouldQueue
                 $media->addVariant($variantName, 'image/webp', 'webp', $variantFile);
             }//end foreach
         }
+
+        $media->status = 'ready';
+        $media->save();
     }
 }

app/Models/Media.php

@@ -25,6 +25,7 @@ class Media extends Model
         'user_id',
         'hash',
         'password',
+        'status'
     ];
 
     /**
@@ -206,6 +207,8 @@ class Media extends Model
      */
     public function generateVariants(bool $overwrite = true): void
     {
+        $this->status = 'processing';
+        $this->save();
         dispatch(new GenerateVariants($this, $overwrite))->onQueue('media');
     }
 

database/migrations/2024_04_28_170824_add_status_to_media.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('media', function (Blueprint $table) {
+            $table->string('status')->default('ready');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('media', function (Blueprint $table) {
+            $table->dropColumn('status');
+        });
+    }
+};

resources/js/media-picker.js

@@ -84,7 +84,17 @@ const SMMediaPicker = {
                 Alpine.store('media').items = response.data.data;
 
                 Alpine.store('media').pagination = [];
-                console.log(response.data.links);
+
+                response.data.data.forEach((file) => {
+                    console.log(file.name, file.status);
+                    if(file.status === 'processing') {
+                        const fileName = file.name;
+                        setTimeout(() => {
+                            SMMediaPicker.updateThumbnail(fileName);
+                        }, 5000);
+                    }
+                });
+
                 Alpine.nextTick(() => {
                     Alpine.store('media').pagination = response.data.links;
                 }).then(r => {
@@ -258,6 +268,28 @@ const SMMediaPicker = {
             }
         })
     },
+
+    updateThumbnail: (name) => {
+        axios.get('/media/' + name)
+            .then(response => {
+                console.log(response.data.name, response.data.status);
+                const item = Alpine.store('media').items.find(i => i.name === name);
+                if(item) {
+                    if(response.data.status === 'ready') {
+                        item.thumbnail = response.data.thumbnail;
+                        item.status = response.data.status;
+                        item.variants = response.data.variants;
+                    } else if(response.data.status === 'processing') {
+                        setTimeout(() => {
+                            SMMediaPicker.updateThumbnail(name);
+                        }, 5000);
+                    }
+                }
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
 };
 
 window.SMMediaPicker = SMMediaPicker;