feat(#21): support custom device dimensions

app/Jobs/GenerateScreenJob.php

@@ -29,6 +29,7 @@ class GenerateScreenJob implements ShouldQueue
      */
     public function handle(): void
     {
+        $device = Device::find($this->deviceId);
         $uuid = Uuid::uuid4()->toString();
         $pngPath = Storage::disk('public')->path('/images/generated/'.$uuid.'.png');
         $bmpPath = Storage::disk('public')->path('/images/generated/'.$uuid.'.bmp');
@@ -37,7 +38,7 @@ class GenerateScreenJob implements ShouldQueue
         try {
             Browsershot::html($this->markup)
                 ->setOption('args', config('app.puppeteer_docker') ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu'] : [])
-                ->windowSize(800, 480)
+                ->windowSize($device->width ?? 800, $device->height ?? 480)
                 ->save($pngPath);
         } catch (\Exception $e) {
             throw new \RuntimeException('Failed to generate PNG: '.$e->getMessage(), 0, $e);
@@ -48,7 +49,7 @@ class GenerateScreenJob implements ShouldQueue
         } catch (\ImagickException $e) {
             throw new \RuntimeException('Failed to convert image to BMP: '.$e->getMessage(), 0, $e);
         }
-        Device::find($this->deviceId)->update(['current_screen_image' => $uuid]);
+        $device->update(['current_screen_image' => $uuid]);
         \Log::info("Device $this->deviceId: updated with new image: $uuid");
 
         $this->cleanupFolder();

database/migrations/2025_05_05_151823_add_device_dimensions_to_devices_table.php

@@ -0,0 +1,23 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('devices', function (Blueprint $table) {
+            $table->integer('width')->nullable()->default(800)->after('api_key');
+            $table->integer('height')->nullable()->default(480)->after('width');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('devices', function (Blueprint $table) {
+            $table->dropColumn('width');
+            $table->dropColumn('height');
+        });
+    }
+};

resources/views/livewire/devices/configure.blade.php

@@ -13,6 +13,8 @@ new class extends Component {
     public $friendly_id;
     public $mac_address;
     public $default_refresh_interval;
+    public $width;
+    public $height;
 
     // Playlist properties
     public $playlists;
@@ -35,6 +37,8 @@ new class extends Component {
         $this->friendly_id = $device->friendly_id;
         $this->mac_address = $device->mac_address;
         $this->default_refresh_interval = $device->default_refresh_interval;
+        $this->width = $device->width;
+        $this->height = $device->height;
         $this->playlists = $device->playlists()->with('items.plugin')->orderBy('created_at')->get();
 
         return view('livewire.devices.configure', [
@@ -59,6 +63,8 @@ new class extends Component {
             'friendly_id' => 'required|string|max:255',
             'mac_address' => 'required|string|max:255',
             'default_refresh_interval' => 'required|integer|min:1',
+            'width' => 'required|integer|min:1',
+            'height' => 'required|integer|min:1',
         ]);
 
         $this->device->update([
@@ -66,6 +72,8 @@ new class extends Component {
             'friendly_id' => $this->friendly_id,
             'mac_address' => $this->mac_address,
             'default_refresh_interval' => $this->default_refresh_interval,
+            'width' => $this->width,
+            'height' => $this->height,
         ]);
 
         Flux::modal('edit-device')->close();
@@ -271,6 +279,10 @@ new class extends Component {
 
                         <flux:input label="Friendly ID" wire:model="friendly_id"/>
                         <flux:input label="MAC Address" wire:model="mac_address"/>
+                        <div class="flex gap-4">
+                            <flux:input label="Width (px)" wire:model="width" type="number" />
+                            <flux:input label="Height (px)" wire:model="height" type="number"/>
+                        </div>
                         <flux:input label="Default Refresh Interval (seconds)" wire:model="default_refresh_interval"
                                     type="number"/>