Keep empty region previews blank

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.13.3 - 2026-09-13
+
+### Fixed
+
+- Fixed the template background image media picker Upload media button so it opens the file selector.
+- Fixed the template designer empty background message moving when the background image is removed.
+- Fixed cached API and RSS images not being served by the player after being downloaded.
+- Fixed blank time/date regions displaying the default clock format on the player.
+- Fixed the time/date placeholder popup omitting text and math transform help.
+- Fixed empty region previews displaying type labels instead of remaining blank.
+- Fixed empty weather regions displaying the default weather summary.
+
 ## 2.13.2 - 2026-09-11
 
 ### Changed

build/package.player.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "private": false,
   "description": "Pulse Signage player application bundle",
   "engines": {

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.13.2",
+      "version": "2.13.3",
       "dependencies": {
         "@sparticuz/chromium": "^149.0.0",
         "animate.css": "^4.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "engines": {

src/player/local-control.js

@@ -489,10 +489,6 @@ function createLocalControlService(options) {
     }
   }
 
-  app.use('/media/player-cache', function (_req, res) {
-    return res.sendStatus(404);
-  });
-
   app.get('/local-control', function (req, res) {
     res.set('Cache-Control', 'no-store');
     res.type('html').send(renderPageV2());

src/player/regions/time-date.js

@@ -2,7 +2,6 @@
 
 var registry = window.pulsePlayerRegionTypes;
 var placeholderUtils = window.placeholderUtils || {};
-var DEFAULT_FORMAT = '{{hh}}:{{mm}}';
 var DEFAULT_STYLE = {
   font_family: 'Arial',
   font_size: 32,
@@ -204,7 +203,7 @@ function getTimeDateFormattedParts(timeZone, date) {
     dddd: toTitleCase(getPart(weekdayLong, 'weekday')),
     MMM: toTitleCase(getPart(monthShort, 'month')),
     MMMM: toTitleCase(getPart(monthLong, 'month')),
-    a: toTitleCase(getPart(ampm, 'dayPeriod')),
+    a: String(getPart(ampm, 'dayPeriod') || '').toLowerCase(),
       tz: getPart(timezoneShort, 'timeZoneName'),
       tz_long: resolvedTimeZone,
     date: getPart(numericParts, 'year') + '-' + getPart(numericParts, 'month') + '-' + getPart(numericParts, 'day'),
@@ -223,7 +222,7 @@ function resolveTimeDateTemplatePlaceholder(values, expression) {
 }
 
 function renderTimeDateTemplate(format, timeZone, date) {
-  var template = String(format || '').trim() || DEFAULT_FORMAT;
+  var template = String(format || '').trim();
   var values = getTimeDateFormattedParts(timeZone, date);
   return template.replace(/\{\{\s*([a-zA-Z0-9_.()\-]+)\s*\}\}/g, function (_match, key) {
     return String(resolveTimeDateTemplatePlaceholder(values, key, { timeZone: timeZone }) || '');
@@ -243,7 +242,7 @@ function getTextStyle(regionContent, region) {
 
 function renderTimeDateRegion(region, regionContent) {
   var content = regionContent && typeof regionContent === 'object' ? regionContent : {};
-  var format = String(content.value !== undefined ? content.value : content.text || '').trim() || DEFAULT_FORMAT;
+  var format = String(content.value !== undefined ? content.value : content.text || '').trim();
   var timeZone = resolveTimeZone(content.timezone || content.time_zone || '');
   var style = getTextStyle(content, region);
   var fontFamily = style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '';
@@ -259,7 +258,7 @@ function updateTimeDateRegion(element) {
     return;
   }
 
-  var format = String(element.dataset.timeDateFormat || '').trim() || DEFAULT_FORMAT;
+  var format = String(element.dataset.timeDateFormat || '').trim();
   var timeZone = String(element.dataset.timeDateTimezone || '').trim();
   var scaleWrapper = element.querySelector('.template-region-text-scale');
   if (!scaleWrapper) {

src/player/regions/weather.js

@@ -69,6 +69,8 @@ function substituteWeatherVariables(html, value) {
 }
 
 function renderWeatherRegion(region, regionContent) {
+  var value = String(regionContent && regionContent.value || '');
+  if (!value.trim()) return '';
   var location = getWeatherLocation(regionContent && regionContent.weather_location_id);
   var snapshot = location && location.responseJson && typeof location.responseJson === 'object' ? location.responseJson : null;
   var width = Math.max(1, Math.round(Number(region && region.pixelWidth) || 1));
@@ -77,7 +79,6 @@ function renderWeatherRegion(region, regionContent) {
   var style = 'width:' + width + 'px;height:' + height + 'px;transform:scale(' + scale + ');transform-origin:top left;overflow:hidden;';
   if (!location || !snapshot) return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + '"></div></div>';
   var current = snapshot.current || {};
-  var value = String(regionContent && regionContent.value || '');
   if (value) {
     var weatherData = withWeatherUnits(snapshot, location);
     var fontSize = Math.max(8, Number(regionContent && regionContent.font_size || region && (region.font_size || region.fontSize) || 32) || 32);

src/web/public/js/media-picker.js

@@ -160,9 +160,16 @@
     if (!activeButton) {
       return null;
     }
+    var explicitInputId = activeButton.getAttribute('data-media-picker-file-input');
+    if (explicitInputId) {
+      var explicitInput = document.getElementById(explicitInputId);
+      if (explicitInput) {
+        return explicitInput;
+      }
+    }
     var hiddenKey = activeButton.getAttribute('data-media-picker-hidden');
     if (hiddenKey) {
-      var inputFromHidden = document.getElementById(hiddenKey.replace(/^existing_/, ''));
+      var inputFromHidden = document.getElementById(hiddenKey.replace(/^existing[-_]/, ''));
       if (inputFromHidden) {
         return inputFromHidden;
       }

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

@@ -44,7 +44,7 @@
   function renderPreview(region, value) {
     var html = normalizePreviewValue(value !== undefined ? value : region).trim();
     if (!html) {
-      return '<div class="slide-preview-placeholder">HTML</div>';
+      return '';
     }
     if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
       return '<iframe class="slide-preview-html-frame" sandbox="" allowtransparency="true" scrolling="no" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML preview" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';

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

@@ -21,7 +21,7 @@
     var content = value && typeof value === 'object' && value.value !== undefined ? value : null;
     var src = String(content ? content.value : value || '').trim();
     if (!src) {
-      return '<div class="slide-preview-placeholder">Image</div>';
+      return '';
     }
     return '<img class="slide-preview-image" src="' + escapeHtml(src) + '" alt="" style="width:100%;height:100%;object-fit:contain;display:block;" />';
   }

src/web/public/js/regions/type/qr-code.js

@@ -880,7 +880,7 @@
       src = svgSrc || buildStyledQrSvgMarkup(value);
     }
     if (!src) {
-      return '<div class="slide-preview-placeholder">QR Code</div>';
+      return '';
     }
     if (/^data:image\//i.test(src)) {
       return '<img class="slide-preview-qr-code" src="' + escapeHtml(src) + '" alt="QR code preview" style="' + imageStyle + '" />';

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

@@ -158,7 +158,7 @@
 
   function getPreviewFallback(item) {
     if (!item || typeof item !== 'object') {
-      return '<div class="slide-preview-placeholder">RSS item</div>';
+      return '';
     }
 
     var title = String(item.title || '').trim();
@@ -171,7 +171,7 @@
       summary.push('<p>' + sanitizePreviewHtml(description) + '</p>');
     }
     if (!summary.length) {
-      return '<div class="slide-preview-placeholder">RSS item</div>';
+      return '';
     }
     return summary.join('');
   }

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

@@ -11,7 +11,10 @@
   function renderPreview(value, disableAudio) {
     var content = value && typeof value === 'object' && value.value !== undefined ? value : null;
     var src = String(content ? content.value : value || '').trim();
-    var label = src ? 'RTMP' : 'RTMP stream';
+    if (!src) {
+      return '';
+    }
+    var label = 'RTMP';
     if (disableAudio) {
       label += ' (muted)';
     }

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

@@ -29,7 +29,7 @@
     var rawValue = value && typeof value === 'object' && value.value !== undefined ? value.value : value;
     var raw = String(rawValue || '');
     if (!raw) {
-      return '<div class="slide-preview-placeholder">Empty text</div>';
+      return '';
     }
 
     var style = styleOrContext && styleOrContext.style ? styleOrContext.style : styleOrContext || {};

src/web/public/js/regions/type/time-date.js

@@ -155,7 +155,7 @@
       dddd: toTitleCase(getPart(weekdayLong, 'weekday')),
       MMM: toTitleCase(getPart(monthShort, 'month')),
       MMMM: toTitleCase(getPart(monthLong, 'month')),
-      a: toTitleCase(getPart(ampm, 'dayPeriod')),
+      a: String(getPart(ampm, 'dayPeriod') || '').toLowerCase(),
       tz: getPart(getFormatter('tz-short:' + resolvedTimeZone, {
         timeZone: resolvedTimeZone,
         timeZoneName: 'short'
@@ -296,7 +296,10 @@
     var table = '<div class="table-responsive"><table class="table table-sm align-middle mb-0"><thead><tr><th>Placeholder</th><th>Output</th><th>Description</th></tr></thead><tbody>' + placeholders.map(function (item) {
       return '<tr><td><code>{{' + escapeHtml(item.token) + '}}</code></td><td>' + escapeHtml(item.output) + '</td><td>' + escapeHtml(item.description) + '</td></tr>';
     }).join('') + '</tbody></table></div>';
-    return window.placeholderInfo.render(regionId, 'Time and date placeholders', table);
+    var transforms = '' +
+      (typeof window.placeholderInfo.renderTextTransforms === 'function' ? window.placeholderInfo.renderTextTransforms() : '') +
+      (typeof window.placeholderInfo.renderMathTransforms === 'function' ? window.placeholderInfo.renderMathTransforms() : '');
+    return window.placeholderInfo.render(regionId, 'Time and date placeholders', table + transforms);
   }
 
   function renderEditorCard(context) {

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

@@ -26,7 +26,7 @@
     var content = value && typeof value === 'object' && value.value !== undefined ? value : null;
     var src = String(content ? content.value : value || '').trim();
     if (!src) {
-      return '<div class="slide-preview-placeholder">Video</div>';
+      return '';
     }
     return '<video class="slide-preview-video" src="' + escapeHtml(src) + '" autoplay loop muted playsinline preload="metadata" style="width:100%;height:100%;object-fit:contain;display:block;"></video>';
   }

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

@@ -148,10 +148,11 @@
 
   function renderPreview(region, content, context) {
     var locations = context && context.weatherLocations ? context.weatherLocations : [];
+    var value = String(content && content.value || '');
+    if (!value.trim()) return '';
     var location = getLocationById(content && content.weather_location_id, locations);
     var snapshot = getSnapshot(location);
-    var value = String(content && content.value || '');
-    if (!location || !snapshot) return '<div class="template-region weather"><div class="slide-preview-placeholder">Select a weather location with cached data</div></div>';
+    if (!location || !snapshot) return '';
     var weatherData = withWeatherUnits(snapshot, location);
     if (value) {
       var fontSize = Math.max(8, Number(content && content.font_size || region && (region.font_size || region.fontSize) || 32) || 32);

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

@@ -37,7 +37,7 @@
   function renderPreview(region, value) {
     var src = normalizePreviewValue(value !== undefined ? value : region).trim();
     if (!src) {
-      return '<div class="slide-preview-placeholder">Webpage</div>';
+      return '';
     }
     return '<iframe class="slide-preview-webpage-frame" src="' + escapeHtml(src) + '" title="Webpage preview" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe>';
   }

src/web/public/js/slides/slide-form-preview.js

@@ -187,7 +187,7 @@ export function createSlideFormPreviewHelpers(options) {
     }
     var raw = String(rawValue || '');
     if (!raw) {
-      return '<div class="slide-preview-placeholder">Empty text</div>';
+      return '';
     }
     return sanitizePreviewHtml(raw);
   }

src/web/public/js/slides/slide-form-regions.js

@@ -323,7 +323,7 @@ export function createSlideFormRegionHelpers(options) {
     }
 
     if (!item || typeof item !== 'object') {
-      return '<div class="slide-preview-placeholder">RSS item</div>';
+      return '';
     }
 
     var title = String(item.title || '').trim();
@@ -336,7 +336,7 @@ export function createSlideFormRegionHelpers(options) {
       summary.push('<p>' + sanitizePreviewHtml(description) + '</p>');
     }
     if (!summary.length) {
-      return '<div class="slide-preview-placeholder">RSS item</div>';
+      return '';
     }
     return summary.join('');
   }

src/web/public/js/templates/template-designer.js

@@ -1797,7 +1797,7 @@
       }
       backgroundPreview.removeAttribute('src');
       backgroundPreview.style.display = 'none';
-      backgroundEmpty.style.display = 'block';
+      backgroundEmpty.style.display = 'flex';
     });
   }
   if (animationAdvancedModal) {

src/web/views/signage/templates/animation-advanced-modal.hbs

@@ -7,7 +7,6 @@
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body d-grid gap-4">
-    <div class="alert alert-secondary mb-0">Changes here are saved into the region animation JSON and stay in sync with the preset dropdowns.</div>
     <div class="row g-3">
       <div class="col-12 col-lg-4">
         <div class="card border-secondary-subtle">

src/web/views/signage/templates/form.hbs

@@ -103,7 +103,7 @@
               <div class="row g-3">
                 <div class="col-12 col-md-4">
                   <input type="file" name="background_image" id="background-image" class="d-none" accept="image/*" />
-                  <button type="button" class="btn btn-outline-secondary w-100" data-media-picker data-media-picker-type="image" data-media-picker-hidden="existing-background-image-path"><i class="bi bi-images me-1" aria-hidden="true"></i>Choose</button>
+                  <button type="button" class="btn btn-outline-secondary w-100" data-media-picker data-media-picker-type="image" data-media-picker-hidden="existing-background-image-path" data-media-picker-file-input="background-image"><i class="bi bi-images me-1" aria-hidden="true"></i>Choose</button>
                 </div>
                 <div class="col-12 col-md-4">
                   <button type="button" class="btn btn-outline-secondary w-100" id="remove-background-image">Remove</button>

test/player-local-control.test.js

@@ -31,6 +31,25 @@ async function createTestService(options) {
   return { app, server, service, temporaryDirectory };
 }
 
+test('local control leaves cached player media available to the static media route', async () => {
+  const { app, server, temporaryDirectory } = await createTestService();
+  const cachedImagePath = path.join(temporaryDirectory, 'player-cache', 'remote-images', 'cached-image.png');
+  await fs.promises.mkdir(path.dirname(cachedImagePath), { recursive: true });
+  await fs.promises.writeFile(cachedImagePath, 'cached-image');
+  app.use('/media', express.static(temporaryDirectory));
+  const listener = app.listen(0);
+  try {
+    const address = listener.address();
+    const response = await fetch(`http://127.0.0.1:${address.port}/media/player-cache/remote-images/cached-image.png`);
+    assert.equal(response.status, 200);
+    assert.equal(await response.text(), 'cached-image');
+  } finally {
+    await new Promise((resolve) => listener.close(resolve));
+    server.close();
+    await fs.promises.rm(temporaryDirectory, { recursive: true, force: true });
+  }
+});
+
 test('local control authenticates only cached eligible users and scopes commands to local runtime', async () => {
   const { app, service, temporaryDirectory } = await createTestService();
   const password = hashPassword('CorrectHorseBatteryStaple!');

test/player-time-date-region.test.js

@@ -63,3 +63,47 @@ test('time/date region renders placeholder tokens on the player side', () => {
 
   assert.match(markup, /<p>\d{2}:\d{2}<\/p>/);
 });
+
+test('time/date lowercase day period renders in lowercase', () => {
+  const module = loadTimeDateModule();
+  const markup = module.renderRegion(
+    {
+      pixelWidth: 320,
+      pixelHeight: 180,
+      canvasScale: 1,
+      baseStyle: 'position:absolute;'
+    },
+    {
+      value: '{{a}}',
+      timezone: 'UTC'
+    }
+  );
+
+  assert.match(markup, /<p>(am|pm)<\/p>/);
+});
+
+test('time/date editor popup documents text and math transforms', () => {
+  const editorSource = fs.readFileSync(require.resolve('../src/web/public/js/regions/type/time-date.js'), 'utf8');
+
+  assert.match(editorSource, /renderTextTransforms\(\)/);
+  assert.match(editorSource, /renderMathTransforms\(\)/);
+});
+
+test('time/date region stays blank when its format is blank', () => {
+  const module = loadTimeDateModule();
+  const markup = module.renderRegion(
+    {
+      pixelWidth: 320,
+      pixelHeight: 180,
+      canvasScale: 1,
+      baseStyle: 'position:absolute;'
+    },
+    {
+      value: '',
+      timezone: 'UTC'
+    }
+  );
+
+  assert.match(markup, /data-time-date-format=""/);
+  assert.doesNotMatch(markup, /<p>\d{2}:\d{2}<\/p>/);
+});

test/templates.test.js

@@ -155,6 +155,9 @@ test('template create page renders the background remove control', () => {
 
   assert.match(html, /id="remove-background-image"/);
   assert.match(html, /name="remove_background_image"/);
+  assert.match(html, /data-media-picker-hidden="existing-background-image-path"/);
+  assert.match(html, /data-media-picker-file-input="background-image"/);
+  assert.match(html, /id="background-image"/);
   assert.match(html, /placeholder="type_1"/);
   assert.match(html, /Save and Close/);
   assert.match(html, /Save and New/);