Release 2.19.3

src/web/public/css/theme-custom.css

@@ -3146,8 +3146,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #111;
-  color: #fff;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
   font-family: Arial, sans-serif;
 }
 
@@ -3156,7 +3156,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #111;
+  background: var(--bs-body-bg);
 }
 
 .slide-preview-popup-canvas {
@@ -4577,6 +4577,36 @@ table.table > :not(caption) > * > * {
   justify-content: center;
 }
 
+.slide-list-thumbnail-button {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+}
+
+.slide-list-thumbnail-button:focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+.slide-list-preview-frame {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: var(--slide-preview-aspect-ratio, 16 / 9);
+  border: 0;
+  background: var(--bs-body-bg);
+}
+
+#slide-preview-modal .modal-content {
+  overflow: hidden;
+}
+
+#slide-preview-modal .modal-dialog {
+  width: var(--slide-preview-modal-width, min(90vw, 1140px));
+  max-width: 90vw;
+}
+
 .card .table td[data-label="Thumbnail"] {
   width: 1%;
   padding-inline: 0.5rem;

src/web/public/js/regions/type/api.js

@@ -106,7 +106,7 @@
         var hasPreviewBounds = options && options.preview && imageConfig.width && imageConfig.height;
         if (hasPreviewBounds || imageConfig.verticalAlign) {
           var wrapperStyle = 'display:inline-flex;align-items:center;justify-content:center;';
-          var wrapperClass = hasPreviewBounds ? ' class="api-image-placeholder-bounds"' : '';
+          var wrapperClass = hasPreviewBounds ? ' class="api-image-placeholder-bounds slide-preview-image-placeholder-bounds"' : '';
           if (hasPreviewBounds) {
             wrapperStyle += 'box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;border:1px dashed rgba(120,120,120,.75);';
           }

src/web/public/js/regions/type/rss.js

@@ -141,13 +141,14 @@
         var hasPreviewBounds = options && options.preview && imageConfig.width && imageConfig.height;
         if (hasPreviewBounds || imageConfig.verticalAlign) {
           var wrapperStyle = 'display:inline-flex;align-items:center;justify-content:center;';
+          var wrapperClass = hasPreviewBounds ? ' class="slide-preview-image-placeholder-bounds"' : '';
           if (hasPreviewBounds) {
             wrapperStyle += 'box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;border:1px dashed rgba(120,120,120,.75);';
           }
           if (imageConfig.verticalAlign) {
             wrapperStyle += 'vertical-align:' + imageConfig.verticalAlign + ';';
           }
-          return '<span style="' + wrapperStyle + '">' + image + '</span>';
+          return '<span' + wrapperClass + ' style="' + wrapperStyle + '">' + image + '</span>';
         }
         return image;
       }

src/web/public/js/regions/type/weather.js

@@ -132,7 +132,7 @@
         var style = width ? ' style="display:block;font-size:' + width + 'px;line-height:1;width:' + width + 'px;height:' + height + 'px;"' : '';
         var icon = '<i class="bi ' + iconForCode(weatherCode) + '"' + style + ' aria-hidden="true"></i>';
         var verticalAlign = alignment === 'top' || alignment === 'bottom' ? alignment : 'middle';
-        return width ? '<span style="display:inline-flex;vertical-align:' + verticalAlign + ';align-items:center;justify-content:center;box-sizing:border-box;line-height:0;width:' + width + 'px;height:' + height + 'px;border:1px dashed rgba(120,120,120,.75);">' + icon + '</span>' : icon;
+        return width ? '<span class="slide-preview-image-placeholder-bounds" style="display:inline-flex;vertical-align:' + verticalAlign + ';align-items:center;justify-content:center;box-sizing:border-box;line-height:0;width:' + width + 'px;height:' + height + 'px;border:1px dashed rgba(120,120,120,.75);">' + icon + '</span>' : icon;
       }
       return escapeHtml(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(value, normalizeWeatherExpression(expression), { timeZone: value.timezone })));
     });

src/web/public/js/shared/slide-preview-renderer.js

@@ -0,0 +1,58 @@
+(function (root, factory) {
+  const renderer = factory(root);
+  if (typeof module === 'object' && module.exports) {
+    module.exports = renderer;
+  } else {
+    root.pulseSlidePreviewRenderer = renderer;
+  }
+}(typeof window !== 'undefined' ? window : globalThis, function (root) {
+  function renderRegionContent(region, content, context, registry) {
+    const regionType = String(region.region_type || content.type || 'text').trim().toLowerCase();
+    const definition = registry && typeof registry.get === 'function' ? registry.get(regionType) : null;
+    if (!definition || typeof definition.renderPreview !== 'function') {
+      return '';
+    }
+
+    if (regionType === 'rtmp') {
+      return definition.renderPreview(content, content.disable_audio);
+    }
+    if (regionType === 'time-date') {
+      return definition.renderPreview(region, content, content, 1);
+    }
+    if (regionType === 'text') {
+      return definition.renderPreview(region, content, content);
+    }
+    return definition.renderPreview(region, content, context);
+  }
+
+  function render(payload, registry) {
+    const settings = payload || {};
+    const activeRegistry = registry || root.pulseRegionTypes;
+    const context = {
+      existingContent: settings.existingContent || {},
+      sources: Array.isArray(settings.apiSources) ? settings.apiSources : [],
+      feeds: Array.isArray(settings.rssFeeds) ? settings.rssFeeds : [],
+      weatherLocations: Array.isArray(settings.weatherLocations) ? settings.weatherLocations : [],
+      timetableGroups: Array.isArray(settings.timetableGroups) ? settings.timetableGroups : []
+    };
+
+    return (Array.isArray(settings.regions) ? settings.regions : []).map(function (region) {
+      const content = region.content && typeof region.content === 'object' ? region.content : { value: region.content || '' };
+      const regionType = String(region.region_type || content.type || 'text').trim().toLowerCase();
+      const left = Math.max(0, Math.round(Number(region.x) || 0));
+      const top = Math.max(0, Math.round(Number(region.y) || 0));
+      const width = Math.max(1, Math.round(Number(region.width) || 1));
+      const height = Math.max(1, Math.round(Number(region.height) || 1));
+      const zIndex = Math.max(1, Number(region.z_index) || 1);
+      const regionKey = root.pulseRegionUtils && root.pulseRegionUtils.escapeHtml
+        ? root.pulseRegionUtils.escapeHtml(region.region_key || '')
+        : String(region.region_key || '').replace(/[&<>"']/g, function (character) {
+          return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[character];
+        });
+      const html = renderRegionContent(region, content, context, activeRegistry);
+      return '<div class="slide-preview-region slide-preview-' + regionType + '-region" data-region-key="' + regionKey + '" style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + height + 'px;z-index:' + zIndex + ';">' + html + '</div>';
+    }).join('');
+  }
+
+  return { render: render };
+}));

src/web/public/js/shared/weather-icons.js

@@ -26,7 +26,7 @@
     var iconWidth = width ? width + 'px' : '1em';
     var iconHeight = height ? height + 'px' : '1em';
     var verticalAlign = alignment === 'top' || alignment === 'bottom' ? alignment : 'middle';
-    return '<span style="display:inline-flex;vertical-align:' + verticalAlign + ';align-items:center;justify-content:center;box-sizing:border-box;line-height:0;width:' + iconWidth + ';height:' + iconHeight + ';"><img src="' + source + '" alt="" style="display:block;width:100%;height:100%;object-fit:contain;" /></span>';
+    return '<span class="slide-preview-image-placeholder-bounds" style="display:inline-flex;vertical-align:' + verticalAlign + ';align-items:center;justify-content:center;box-sizing:border-box;line-height:0;width:' + iconWidth + ';height:' + iconHeight + ';"><img src="' + source + '" alt="" style="display:block;width:100%;height:100%;object-fit:contain;" /></span>';
   }
   var api = { conditionForCode: conditionForCode, imageForCode: imageForCode, isNightForWeather: isNightForWeather, renderImage: renderImage };
   if (typeof module === 'object' && module.exports) module.exports = api;