Update

app/Models/MemeMedia.php

@@ -39,6 +39,7 @@ class MemeMedia extends Model
 
     protected $casts = [
         'embedding' => Vector::class,
+        'duration' => 'double',
     ];
 
     protected $fillable = [

database/migrations/2025_06_18_043427_add_media_dimensions_to_meme_medias_table.php

@@ -0,0 +1,30 @@
+<?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('meme_medias', function (Blueprint $table) {
+            $table->integer('media_width')->default(720);
+            $table->integer('media_height')->default(1280);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('meme_medias', function (Blueprint $table) {
+            $table->dropColumn('media_width');
+            $table->dropColumn('media_height');
+        });
+    }
+};

database/migrations/2025_06_18_043437_add_media_dimensions_to_background_medias_table.php

@@ -0,0 +1,30 @@
+<?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('background_medias', function (Blueprint $table) {
+            $table->integer('media_width')->default(720);
+            $table->integer('media_height')->default(720);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('background_medias', function (Blueprint $table) {
+            $table->dropColumn('media_width');
+            $table->dropColumn('media_height');
+        });
+    }
+};

resources/js/modules/editor/partials/editor-controls.jsx

@@ -28,7 +28,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
 
     return (
         <div className={cn('flex items-center justify-center gap-2', className)}>
-            <Button onClick={togglePlayPause} variant="default" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
+            <Button onClick={togglePlayPause} variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                 {videoIsPlaying ? <Square className="h-8 w-8" /> : <Play className="h-8 w-8" />}
             </Button>
 
@@ -46,7 +46,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
 
             <Button
                 id="edit"
-                variant={isEditActive ? 'default' : 'default'}
+                variant={isEditActive ? 'outline' : 'outline'}
                 size="icon"
                 className="h-12 w-12 rounded-full border shadow-sm"
                 onClick={onEditClick}
@@ -54,7 +54,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
                 <Edit3 className={`h-8 w-8 ${isEditActive ? 'text-white' : ''}`} />
             </Button>
 
-            <Button variant="default" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
+            <Button variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                 <Download className="h-8 w-8" />
             </Button>
         </div>

resources/js/modules/editor/templates/single_caption_meme_background.json

@@ -19,6 +19,8 @@
             "duration": 6,
             "x": 0,
             "y": 0,
+            "asset_width": 720,
+            "asset_height": 720,
             "width": 720,
             "height": 1280,
             "rotation": 0
@@ -36,6 +38,8 @@
             "duration": 6,
             "x": 0,
             "y": 0,
+            "asset_width": 720,
+            "asset_height": 1280,
             "width": 720,
             "height": 1280,
             "rotation": 0