feat(#149): add css_name and css_variables to DeviceModel and update related views

This commit is contained in:
Benjamin Nussbaum 2026-02-17 21:10:54 +01:00
parent 89a2edfcbb
commit d884ac0a58
15 changed files with 285 additions and 26 deletions

View file

@ -184,7 +184,7 @@ class GenerateDefaultImagesCommand extends Command
};
// Determine device properties from DeviceModel
$deviceVariant = $deviceModel->name ?? 'og';
$deviceVariant = $deviceModel->css_name ?? $deviceModel->name ?? 'og';
$colorDepth = $deviceModel->color_depth ?? '1bit'; // Use the accessor method
$scaleLevel = $deviceModel->scale_level; // Use the accessor method
$darkMode = $imageType === 'sleep'; // Sleep mode uses dark mode, setup uses light mode
@ -196,6 +196,7 @@ class GenerateDefaultImagesCommand extends Command
'deviceVariant' => $deviceVariant,
'colorDepth' => $colorDepth,
'scaleLevel' => $scaleLevel,
'cssVariables' => $deviceModel->css_variables,
])->render();
}
}

View file

@ -12,8 +12,10 @@ use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Str;
final class FetchDeviceModelsJob implements ShouldQueue
{
@ -209,12 +211,41 @@ final class FetchDeviceModelsJob implements ShouldQueue
$attributes['palette_id'] = $firstPaletteId;
}
$attributes['css_name'] = $this->parseCssNameFromApi($modelData['css'] ?? null);
$attributes['css_variables'] = $this->parseCssVariablesFromApi($modelData['css'] ?? null);
DeviceModel::updateOrCreate(
['name' => $name],
$attributes
);
}
/**
* Extract css_name from API css payload (strip "screen--" prefix from classes.device).
*/
private function parseCssNameFromApi(mixed $css): ?string
{
$deviceClass = is_array($css) ? Arr::get($css, 'classes.device') : null;
return (is_string($deviceClass) ? Str::after($deviceClass, 'screen--') : null) ?: null;
}
/**
* Extract css_variables from API css payload (convert [[key, value], ...] to associative array).
*/
private function parseCssVariablesFromApi(mixed $css): ?array
{
$pairs = is_array($css) ? Arr::get($css, 'variables', []) : [];
if (! is_array($pairs)) {
return null;
}
$validPairs = Arr::where($pairs, fn (mixed $pair): bool => is_array($pair) && isset($pair[0], $pair[1]));
$variables = Arr::pluck($validPairs, 1, 0);
return $variables !== [] ? $variables : null;
}
/**
* Get the first palette ID from model data.
*/

View file

@ -27,6 +27,7 @@ final class DeviceModel extends Model
'offset_x' => 'integer',
'offset_y' => 'integer',
'published_at' => 'datetime',
'css_variables' => 'array',
];
public function getColorDepthAttribute(): ?string

View file

@ -140,8 +140,9 @@ class PlaylistItem extends Model
if (! $this->isMashup()) {
return view('trmnl-layouts.single', [
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'slot' => $this->plugin instanceof Plugin
? $this->plugin->render('full', false, $device)
: throw new Exception('Invalid plugin instance'),
@ -162,8 +163,9 @@ class PlaylistItem extends Model
return view('trmnl-layouts.mashup', [
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'mashupLayout' => $this->getMashupLayoutType(),
'slot' => implode('', $pluginMarkups),
])->render();

View file

@ -584,10 +584,11 @@ class Plugin extends Model
if ($size === 'full') {
return view('trmnl-layouts.single', [
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'noBleed' => $this->no_bleed,
'darkMode' => $this->dark_mode,
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'slot' => $renderedContent,
])->render();
}
@ -595,9 +596,10 @@ class Plugin extends Model
return view('trmnl-layouts.mashup', [
'mashupLayout' => $this->getPreviewMashupLayoutForSize($size),
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'darkMode' => $this->dark_mode,
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'slot' => $renderedContent,
])->render();
@ -617,10 +619,11 @@ class Plugin extends Model
if ($size === 'full') {
return view('trmnl-layouts.single', [
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'noBleed' => $this->no_bleed,
'darkMode' => $this->dark_mode,
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'slot' => $renderedView,
])->render();
}
@ -628,9 +631,10 @@ class Plugin extends Model
return view('trmnl-layouts.mashup', [
'mashupLayout' => $this->getPreviewMashupLayoutForSize($size),
'colorDepth' => $device?->colorDepth(),
'deviceVariant' => $device?->deviceVariant() ?? 'og',
'deviceVariant' => $device?->deviceModel?->css_name ?? $device?->deviceVariant() ?? 'og',
'darkMode' => $this->dark_mode,
'scaleLevel' => $device?->scaleLevel(),
'cssVariables' => $device?->deviceModel?->css_variables,
'slot' => $renderedView,
])->render();
}

View file

@ -514,7 +514,7 @@ class ImageGenerationService
};
// Determine device properties from DeviceModel or device settings
$deviceVariant = $device->deviceVariant();
$deviceVariant = $device->deviceModel?->css_name ?? $device->deviceVariant();
$deviceOrientation = $device->rotate > 0 ? 'portrait' : 'landscape';
$colorDepth = $device->colorDepth() ?? '1bit';
$scaleLevel = $device->scaleLevel();
@ -528,6 +528,7 @@ class ImageGenerationService
'deviceOrientation' => $deviceOrientation,
'colorDepth' => $colorDepth,
'scaleLevel' => $scaleLevel,
'cssVariables' => $device->deviceModel?->css_variables,
];
// Add plugin name for error screens