mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-03-14 12:23:33 +00:00
feat(#149): add css_name and css_variables to DeviceModel and update related views
This commit is contained in:
parent
89a2edfcbb
commit
d884ac0a58
15 changed files with 285 additions and 26 deletions
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue