Release v2.5.4

src/data/admin.js

@@ -22,9 +22,10 @@ async function fetchAdminData(pool) {
     ORDER BY s.id DESC
   `);
   const [screens] = await pool.query(`
-    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name
+    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name, pl.public_base_url
     FROM d_screens s
     LEFT JOIN c_playlists p ON p.id = s.playlist_id
+    LEFT JOIN d_players pl ON pl.device_id = s.player_id
     ORDER BY s.id DESC
   `);
   const [playlistSlides] = await pool.query(`

src/data/qr-code.js

@@ -0,0 +1,36 @@
+const QRCode = require('qrcode');
+
+async function createQrCodeSvg(value) {
+  const text = String(value === undefined || value === null ? '' : value).trim();
+  if (!text) {
+    return '';
+  }
+
+  return QRCode.toString(text, {
+    type: 'svg',
+    margin: 1,
+    errorCorrectionLevel: 'M'
+  });
+}
+
+async function buildQrCodeContent(value) {
+  const text = String(value === undefined || value === null ? '' : value).trim();
+  const content = {
+    type: 'qr-code',
+    value: text
+  };
+
+  if (text) {
+    const svg = await createQrCodeSvg(text);
+    if (svg) {
+      content.qr_svg = svg;
+    }
+  }
+
+  return content;
+}
+
+module.exports = {
+  createQrCodeSvg,
+  buildQrCodeContent
+};

src/data/slides.js

@@ -2,6 +2,7 @@
 
 const { fetchTemplateById } = require('./templates');
 const { parseJsonSafe } = require('./utils');
+const { buildQrCodeContent } = require('./qr-code');
 
 const ALLOWED_RICH_TEXT_TAGS = ['b', 'strong', 'i', 'em', 'u', 'br', 'p', 'div', 'ul', 'ol', 'li'];
 const DEFAULT_FONT_SIZE = 32;
@@ -142,6 +143,14 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         type: 'webpage',
         value: submitted === undefined ? current : String(submitted || '').trim()
       };
+    } else if (region.region_type === 'qr-code') {
+      const submitted = body[`region_qr_code_${region.id}`];
+      const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+      const nextValue = submitted === undefined ? String(current.value !== undefined ? current.value : current.qr_code || '').trim() : String(submitted || '').trim();
+      content[region.region_key] = {
+        type: 'qr-code',
+        value: nextValue
+      };
     } else if (region.region_type === 'rtmp') {
       const submitted = body[`region_rtmp_${region.id}`];
       const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
@@ -202,7 +211,7 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         font_size: style.font_size,
         font_color: style.font_color
       };
-    } else if (!['text', 'image', 'video', 'webpage', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
+    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
       const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
       const suffix = '_' + region.id;
       const generic = {};
@@ -273,10 +282,22 @@ async function buildSlidePayload(pool, req, existingSlide) {
   }
 
   if (template) {
+    const content = buildTemplateContent(template, req.body, filesByField, existingContent);
+    await Promise.all(Object.keys(content).map(async function (regionKey) {
+      const region = template.regions.find(function (item) {
+        return String(item.region_key || '').trim() === regionKey;
+      });
+      if (!region || region.region_type !== 'qr-code') {
+        return;
+      }
+
+      content[regionKey] = await buildQrCodeContent(content[regionKey].value);
+    }));
+
     return {
       title,
       templateId: template.id,
-      contentJson: JSON.stringify(buildTemplateContent(template, req.body, filesByField, existingContent))
+      contentJson: JSON.stringify(content)
     };
   }
 

src/player/public/css/player.css

@@ -443,6 +443,14 @@ body.screen-blackout #app {
   overflow: hidden;
 }
 
+.template-region.qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  background: #fff;
+}
+
 .template-region.html iframe {
   width: 100%;
   height: 100%;

src/player/regions/qr-code.js

@@ -0,0 +1,16 @@
+// QR code region rendering for embedded URL-to-image output.
+
+var registry = window.pulsePlayerRegionTypes;
+
+function renderQrCodeRegion(region, regionContent) {
+  var svg = String(regionContent && regionContent.qr_svg || '').trim();
+  if (!svg) {
+    return '';
+  }
+
+  return '<div class="template-region qr-code" style="' + region.baseStyle + '"><img class="template-region-qr-code-image" src="data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg) + '" alt="QR code" /></div>';
+}
+
+registry.register('qr-code', {
+  renderRegion: renderQrCodeRegion
+});

src/web/lib/media/slide-thumbnails.js

@@ -114,6 +114,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
       : '';
   }
 
+  if (regionType === 'qr-code') {
+    const src = String(regionContent.qr_svg || rawValue || regionContent.qr_code || '').trim();
+    return src
+      ? '<img src="data:image/svg+xml;charset=utf-8,' + encodeURIComponent(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'qr code') + '" />'
+      : '';
+  }
+
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
     return html

src/web/middleware.js

@@ -2,6 +2,7 @@
 
 const express = require('express');
 const fs = require('fs');
+const path = require('path');
 
 module.exports = function registerMiddleware(app, deps) {
   const pool = deps.pool;
@@ -11,10 +12,12 @@ module.exports = function registerMiddleware(app, deps) {
   const uploadsDir = deps.UPLOADS_DIR;
   const thumbnailsDir = deps.THUMBNAILS_DIR;
   const assetDir = deps.ASSET_DIR;
+  const qrcodeGeneratorDir = path.join(__dirname, '..', '..', 'node_modules', 'qrcode-generator', 'dist');
 
   app.use(express.urlencoded({ extended: true }));
   app.use(express.json());
   app.use('/assets', express.static(assetDir));
+  app.use('/assets/vendor/qrcode-generator', express.static(qrcodeGeneratorDir));
   app.use('/media', express.static(mediaDir));
   fs.mkdirSync(uploadsDir, { recursive: true });
   fs.mkdirSync(thumbnailsDir, { recursive: true });

src/web/public/js/data-sources/api-source-form.js

@@ -9,6 +9,29 @@
   var methodSelect = form.querySelector('[data-api-source-auth-method]');
   var authDetailsSection = form.querySelector('[data-api-source-auth-details-section]');
   var panels = Array.prototype.slice.call(form.querySelectorAll('[data-api-source-auth-panel]'));
+  var bearerTokenInput = form.querySelector('[data-api-source-bearer-token-input]');
+  var bearerTokenToggle = form.querySelector('[data-api-source-bearer-token-toggle]');
+
+  function updateBearerTokenToggle() {
+    if (!bearerTokenInput || !bearerTokenToggle) {
+      return;
+    }
+
+    var isVisible = bearerTokenInput.type === 'text';
+    bearerTokenToggle.setAttribute('aria-pressed', String(isVisible));
+    bearerTokenToggle.setAttribute('aria-label', isVisible ? 'Hide bearer token' : 'Show bearer token');
+    bearerTokenToggle.innerHTML = '<i class="bi ' + (isVisible ? 'bi-eye-slash' : 'bi-eye') + '" aria-hidden="true"></i>';
+  }
+
+  function toggleBearerTokenVisibility() {
+    if (!bearerTokenInput) {
+      return;
+    }
+
+    bearerTokenInput.type = bearerTokenInput.type === 'password' ? 'text' : 'password';
+    updateBearerTokenToggle();
+    bearerTokenInput.focus();
+  }
 
   function updatePanels() {
     var method = String(methodSelect && methodSelect.value || 'none').trim();
@@ -28,5 +51,10 @@
     methodSelect.addEventListener('change', updatePanels);
   }
 
+  if (bearerTokenToggle && bearerTokenInput) {
+    bearerTokenToggle.addEventListener('click', toggleBearerTokenVisibility);
+    updateBearerTokenToggle();
+  }
+
   updatePanels();
 }());

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

@@ -0,0 +1,118 @@
+// QR code region helpers for editor previews and defaults.
+
+(function () {
+  var registry = window.pulseRegionTypes;
+  var utils = window.pulseRegionUtils || {};
+
+  function escapeHtml(value) {
+    return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
+  }
+
+  function buildQrCodeUrl(value) {
+    var text = String(value && typeof value === 'object' ? (value.value !== undefined ? value.value : value.qr_code) : value || '').trim();
+    var svg = String(value && typeof value === 'object' && value.qr_svg ? value.qr_svg : '').trim();
+    if (svg) {
+      return svg;
+    }
+
+    if (!text || typeof window.qrcode !== 'function') {
+      return '';
+    }
+
+    try {
+      var code = window.qrcode(0, 'M');
+      code.addData(text);
+      code.make();
+      svg = code.createSvgTag(4, 1);
+      return svg || '';
+    } catch (_error) {
+      return '';
+    }
+  }
+
+  function normalizeQrSvg(svg) {
+    var markup = String(svg || '').trim();
+    if (!markup || markup.charAt(0) !== '<') {
+      return markup;
+    }
+
+    return markup.replace(/^<svg\b([^>]*)>/i, function (_match, attrText) {
+      var attrs = String(attrText || '');
+      if (!/\bwidth\s*=\s*/i.test(attrs)) {
+        attrs += ' width="95%"';
+      }
+      if (!/\bheight\s*=\s*/i.test(attrs)) {
+        attrs += ' height="95%"';
+      }
+      if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) {
+        attrs += ' preserveAspectRatio="xMidYMid meet"';
+      }
+      if (!/\bstyle\s*=\s*/i.test(attrs)) {
+        attrs += ' style="display:block;width:95%;height:95%;"';
+      }
+      return '<svg' + attrs + '>';
+    });
+  }
+
+  function renderPreview(region, value) {
+    var src = buildQrCodeUrl(value);
+    if (!src) {
+      return '<div class="slide-preview-placeholder">QR Code</div>';
+    }
+
+    if (String(src || '').trim().charAt(0) === '<') {
+      return '<div class="slide-preview-qr-code-frame" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;">' + normalizeQrSvg(src) + '</div>';
+    }
+
+    return '<img class="slide-preview-qr-code" src="' + escapeHtml(src) + '" alt="QR code preview" style="width:100%;height:100%;object-fit:contain;display:block;background:#fff;" />';
+  }
+
+  function renderEditorCard(context) {
+    var region = context.region;
+    var current = String(context.current || '');
+    return '' +
+      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
+        '<div class="card-header template-field-head">' +
+          '<strong>' + escapeHtml(region.label) + '</strong>' +
+          '<div class="template-field-actions">' +
+            '<span class="chip">QR Code</span>' +
+          '</div>' +
+        '</div>' +
+        '<div class="card-body p-3 d-grid gap-2">' +
+            '<input type="url" name="region_qr_code_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
+          '</label>' +
+          '<div class="muted slide-image-file">The QR code is generated from the URL above.</div>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function buildEditorCardContext(context, existingContent) {
+    var existing = existingContent && context && context.region && existingContent[context.region.region_key] ? existingContent[context.region.region_key] : null;
+    return {
+      region: context.region,
+      current: String(context.current || (existing && (existing.value !== undefined ? existing.value : existing.qr_code)) || ''),
+      qr_svg: existing && existing.qr_svg ? existing.qr_svg : ''
+    };
+  }
+
+  function buildPreviewRenderContext(region, card, existingContent) {
+    var current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+    var input = card && card.querySelector ? card.querySelector('input[type="url"][name="region_qr_code_' + region.id + '"]') : null;
+
+    return {
+      value: input ? input.value : (current && current.value !== undefined ? current.value : (current && current.qr_code !== undefined ? current.qr_code : '')),
+      existingContent: existingContent || {}
+    };
+  }
+
+  registry.register('qr-code', {
+    label: 'QR Code',
+    getDefaultRegionSize: function () {
+      return { width: 240, height: 240 };
+    },
+    renderPreview: renderPreview,
+    renderEditorCard: renderEditorCard,
+    buildEditorCardContext: buildEditorCardContext,
+    buildPreviewRenderContext: buildPreviewRenderContext
+  });
+}());

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

@@ -592,6 +592,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
           ? ' slide-preview-video-region'
         : region.region_type === 'webpage'
           ? ' slide-preview-webpage-region'
+          : region.region_type === 'qr-code'
+            ? ' slide-preview-qr-code-region'
           : region.region_type === 'rtmp'
             ? ' slide-preview-rtmp-region'
           : region.region_type === 'rss'

src/web/routes/signage/dashboard/index.js

@@ -2,7 +2,17 @@
 
 const { renderView } = require('../../../view');
 
+function normalizeBaseUrl(value) {
+  return String(value || '').trim().replace(/\/$/, '');
+}
+
 module.exports = function renderDashboardPage(data, message, currentUser) {
+  const primaryPlayerUrl = Array.isArray(data.screens)
+    ? String((data.screens.find(function (screen) {
+      return screen && String(screen.public_base_url || '').trim();
+    }) || {}).public_base_url || '').trim()
+    : '';
+
   return renderView('dashboard/index', {
     title: 'Dashboard',
     active: 'dashboard',
@@ -13,6 +23,7 @@ module.exports = function renderDashboardPage(data, message, currentUser) {
     clients: data.clients || [],
     slides: data.slides || [],
     connectedClientsCount: Number(data.connectedClientsCount || 0),
+    primaryPlayerUrl: normalizeBaseUrl(primaryPlayerUrl) || null,
     scripts: ['js/dashboard/dashboard-page.js']
   });
 };

src/web/routes/signage/slides/form-view-model.js

@@ -53,7 +53,7 @@ function buildSlideFormViewModel(data, slide, message, currentUser, isEdit) {
       existingContent: viewSlide && viewSlide.content ? viewSlide.content : {}
     },
     assetVersion: assetVersion,
-    slideEditorScripts: getRegionEditorScripts(assetVersion),
+    slideEditorScripts: ['vendor/qrcode-generator/qrcode.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion)),
     currentUser: currentUser || null
   };
 }

src/web/routes/signage/templates/form-view-model.js

@@ -63,7 +63,7 @@ function buildTemplateFormViewModel(template, message, canvasSizes, currentUser,
     deleteUrl: isEdit && current.id ? '/templates/' + current.id + '/delete' : '',
     canvasSizes: canvasSizes || [],
     animationPresets: animationPresets,
-    scripts: ['js/lib/modal.js?v=' + assetVersion, 'js/templates/animation-presets.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion), ['js/templates/template-designer-utils.js?v=' + assetVersion, 'js/templates/template-designer.js?v=' + assetVersion])
+    scripts: ['js/lib/modal.js?v=' + assetVersion, 'js/templates/animation-presets.js?v=' + assetVersion, 'vendor/qrcode-generator/qrcode.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion), ['js/templates/template-designer-utils.js?v=' + assetVersion, 'js/templates/template-designer.js?v=' + assetVersion])
   };
 }
 

src/web/views/data-sources/api-sources/form.hbs

@@ -59,7 +59,12 @@
         <div class="row g-3 mb-3" data-api-source-auth-panel="bearer" hidden>
           <div class="col-12">
             <label for="api-source-auth-bearer-token" class="form-label">Bearer token</label>
-            <input id="api-source-auth-bearer-token" name="auth_bearer_token" type="password" class="form-control" value="{{apiSource.authBearerToken}}" autocomplete="off" />
+            <div class="input-group">
+              <input id="api-source-auth-bearer-token" name="auth_bearer_token" type="password" class="form-control" value="{{apiSource.authBearerToken}}" autocomplete="off" spellcheck="false" autocapitalize="off" autocorrect="off" data-api-source-bearer-token-input />
+              <button type="button" class="btn btn-outline-secondary" aria-label="Show bearer token" aria-pressed="false" data-api-source-bearer-token-toggle>
+                <i class="bi bi-eye" aria-hidden="true"></i>
+              </button>
+            </div>
           </div>
         </div>
         <div class="row g-3 mb-3" data-api-source-auth-panel="api_key_header" hidden>

src/web/views/signage/dashboard/index.hbs

@@ -11,6 +11,13 @@
       <span class="dashboard-hero-kicker">Live overview</span>
       <h3 class="dashboard-hero-title">Keep the control surface focused on live state and actions.</h3>
       <p class="dashboard-hero-copy">Use the cards below for the current totals, then open the screen snapshot when you want a quick read on playlist assignment and live connections.</p>
+      {{#if primaryPlayerUrl}}
+        <div class="alert alert-info mb-0 mt-3 py-2">
+          <strong>Begin onboarding:</strong>
+          open <a href="{{primaryPlayerUrl}}" target="_blank" rel="noreferrer">{{primaryPlayerUrl}}</a>
+          on the public screen to get started.
+        </div>
+      {{/if}}
     </div>
     <div class="dashboard-hero-stats">
       {{#if (hasPermission currentUser "playlists.read")}}

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

@@ -120,6 +120,7 @@
 <textarea id="slide-editor-data" hidden>{{json slideEditorData}}</textarea>
 <script src="/assets/vendor/cropperjs/cropper.min.js"></script>
 <script src="/assets/vendor/tinymce/tinymce.min.js"></script>
+<script src="/assets/vendor/qrcode-generator/qrcode.js?v={{appVersion}}"></script>
 {{#each slideEditorScripts}}
 <script type="module" src="/assets/{{this}}?v={{../appVersion}}"></script>
 {{/each}}

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

@@ -125,6 +125,8 @@
 <form id="delete-template-form" method="post" action="/templates/{{template.id}}/delete" data-confirm-message="Delete this template?"></form>
 {{/if}}
 
+<script src="/assets/vendor/qrcode-generator/qrcode.js?v={{appVersion}}"></script>
+
 {{#> modal-shell modalId="region-add-modal" modalLabelId="region-add-modal-label" modalDialogClass="modal-dialog-centered"}}
   <div class="modal-header">
     <h2 class="modal-title fs-5" id="region-add-modal-label">Add region</h2>