lzstealth/pulse-signage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add multi-player and remote bridge support

Browse Source
This commit is contained in:
lzstealth
2026-08-07 02:58:18 +01:00
parent a4f8a807ff
commit 74318eb34e
58 changed files with 3785 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/bootstrap.js
Vendored
+12 -56
View File
@@ -9,6 +9,7 @@ function createWebBootstrap(options) {
const pool = options && options.pool;
const common = options && options.common;
const configuredPlayerInternalBaseUrl = String(options && options.playerInternalBaseUrl || '').replace(/\/$/, '');
const configuredThinClientBaseUrl = String(options && options.thinClientBaseUrl || process.env.THIN_CLIENT_BASE_URL || '').trim().replace(/\/$/, '');
const uploadDir = String(options && options.uploadDir || '').trim();
const dashboardRefreshIntervalMs = 5000;
const formatDashboardDate = options && options.formatDashboardDate;
@@ -25,49 +26,8 @@ function createWebBootstrap(options) {
const playerSnapshotSockets = new Map();
let dashboardRefreshInFlight = null;
let broadcastDashboardState = null;
let playerInternalBaseUrl = null;
let playerInternalBaseUrlPromise = null;
async function getPlayerInternalBaseUrl() {
if (playerInternalBaseUrl) {
return playerInternalBaseUrl;
}
if (playerInternalBaseUrlPromise) {
return playerInternalBaseUrlPromise;
}
playerInternalBaseUrlPromise = (async function () {
if (!pool) {
return configuredPlayerInternalBaseUrl || null;
}
try {
const [rows] = await pool.query(
`SELECT internal_base_url
FROM d_players
WHERE device_id = '1'
LIMIT 1`
);
const resolvedBaseUrl = String(rows && rows[0] && rows[0].internal_base_url || '').trim().replace(/\/$/, '');
return resolvedBaseUrl || configuredPlayerInternalBaseUrl || null;
} catch (_error) {
return configuredPlayerInternalBaseUrl || null;
}
})().then(function (baseUrl) {
playerInternalBaseUrl = baseUrl || null;
playerInternalBaseUrlPromise = null;
return playerInternalBaseUrl;
}, function () {
playerInternalBaseUrlPromise = null;
return configuredPlayerInternalBaseUrl || null;
});
return playerInternalBaseUrlPromise;
}
async function getPlayerSnapshotSocketUrl(slug) {
const resolvedPlayerInternalBaseUrl = await getPlayerInternalBaseUrl();
function getPlayerSnapshotSocketUrl(slug) {
const resolvedPlayerInternalBaseUrl = configuredThinClientBaseUrl || configuredPlayerInternalBaseUrl;
if (!resolvedPlayerInternalBaseUrl) {
throw new Error('Unable to resolve the player internal base URL.');
}
@@ -78,16 +38,6 @@ function createWebBootstrap(options) {
return url.toString();
}
function storePlayerSnapshot(slug, connections) {
const normalizedSlug = String(slug || '').trim();
const normalizedConnections = Array.isArray(connections) ? connections : [];
playerSnapshotCache.set(normalizedSlug, {
slug: normalizedSlug,
count: normalizedConnections.length,
connections: normalizedConnections
});
}
function clearPlayerSnapshotSocket(slug) {
const key = String(slug || '').trim();
playerSnapshotSockets.delete(key);
@@ -100,12 +50,12 @@ function createWebBootstrap(options) {
}
playerSnapshotSockets.set(key, null);
const socketUrlPromise = getPlayerSnapshotSocketUrl(key);
const authHeaders = createRequestAuthHeaders({
method: 'GET',
pathname: `/ws/screens/${encodeURIComponent(key)}/events`
});
socketUrlPromise.then(function (socketUrl) {
Promise.resolve(getPlayerSnapshotSocketUrl(key)).then(function (socketUrl) {
const socket = new WebSocket(socketUrl, {
headers: authHeaders
});
@@ -117,7 +67,11 @@ function createWebBootstrap(options) {
if (!payload || payload.type !== 'snapshot' || payload.slug !== key) {
return;
}
storePlayerSnapshot(key, payload.connections || []);
playerSnapshotCache.set(key, {
slug: key,
count: Array.isArray(payload.connections) ? payload.connections.length : 0,
connections: Array.isArray(payload.connections) ? payload.connections : []
});
if (broadcastDashboardState) {
broadcastDashboardState().catch(function (error) {
console.error(error);
@@ -151,6 +105,7 @@ function createWebBootstrap(options) {
const dashboardStateService = createDashboardStateService({
pool: pool,
common: common,
thinClientBaseUrl: configuredThinClientBaseUrl,
playerSnapshotCache: playerSnapshotCache,
playerSnapshotSockets: playerSnapshotSockets,
ensurePlayerSnapshotSubscription: ensurePlayerSnapshotSubscription,
@@ -259,6 +214,7 @@ function createWebBootstrap(options) {
return {
upload: upload,
uploadSyncService: uploadSyncService,
playerInternalBaseUrl: configuredPlayerInternalBaseUrl || null,
buildDashboardState: buildDashboardState,
collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
collectUploadReferencesFromTemplate: collectUploadReferencesFromTemplate,
src/web/lib/background-tasks/tasks-adhoc/thumbnail-refresh-slide.js
+17 -13
View File
@@ -1,16 +1,18 @@
const { resolvePlayerRegistration } = require('#src/data/player-registry');
const TASK = {
taskType: 'slide-thumbnail-refresh'
};
async function fetchPlayerInternalBaseUrl(pool) {
const [rows] = await pool.query(
`SELECT internal_base_url
FROM d_players
WHERE device_id = '1'
LIMIT 1`
);
async function fetchPlayerInternalBaseUrl(pool, configuredPlayerInternalBaseUrl) {
const configured = String(configuredPlayerInternalBaseUrl || '').trim().replace(/\/$/, '');
if (configured) {
return configured;
}
return String(rows && rows[0] && rows[0].internal_base_url || '').trim().replace(/\/$/, '') || null;
const { getConfiguredPlayerIdentifier } = require('#src/data/player-registry');
const player = await resolvePlayerRegistration(pool, getConfiguredPlayerIdentifier());
return String(player && player.internal_base_url || '').trim().replace(/\/$/, '') || null;
}
function registerSlideThumbnailRefreshTask(options) {
@@ -19,6 +21,7 @@ function registerSlideThumbnailRefreshTask(options) {
const pool = options && options.pool;
const common = options && options.common;
const mediaDir = String(options && options.mediaDir || '').trim();
const configuredWebBaseUrl = String(options && options.webBaseUrl || '').trim().replace(/\/$/, '');
if (!backgroundTaskQueue || typeof captureSlideThumbnail !== 'function' || !pool || !common || !mediaDir) {
throw new Error('registerSlideThumbnailRefreshTask requires the slide thumbnail dependencies.');
@@ -32,18 +35,19 @@ function registerSlideThumbnailRefreshTask(options) {
throw new Error('Slide id is required.');
}
const playerInternalBaseUrl = await fetchPlayerInternalBaseUrl(pool);
if (!playerInternalBaseUrl) {
throw new Error('Player internal base URL is required.');
const webBaseUrl = configuredWebBaseUrl || `http://127.0.0.1:${Number(process.env.WEB_PORT || 8080)}`;
if (!webBaseUrl) {
throw new Error('Web base URL is required.');
}
return captureSlideThumbnail({
pool: pool,
common: common,
mediaDir: mediaDir,
baseUrl: playerInternalBaseUrl,
baseUrl: webBaseUrl,
slideId: slideId,
previousThumbnailPath: payload.previousThumbnailPath || null
previousThumbnailPath: payload.previousThumbnailPath || null,
fontStylesheetHref: payload.fontStylesheetHref || ''
});
});
}
src/web/lib/background-tasks/tasks-adhoc/thumbnail-refresh-template.js
+15 -12
View File
@@ -1,16 +1,18 @@
const { resolvePlayerRegistration } = require('#src/data/player-registry');
const TASK = {
taskType: 'template-slide-thumbnail-refresh'
};
async function fetchPlayerInternalBaseUrl(pool) {
const [rows] = await pool.query(
`SELECT internal_base_url
FROM d_players
WHERE device_id = '1'
LIMIT 1`
);
async function fetchPlayerInternalBaseUrl(pool, configuredPlayerInternalBaseUrl) {
const configured = String(configuredPlayerInternalBaseUrl || '').trim().replace(/\/$/, '');
if (configured) {
return configured;
}
return String(rows && rows[0] && rows[0].internal_base_url || '').trim().replace(/\/$/, '') || null;
const { getConfiguredPlayerIdentifier } = require('#src/data/player-registry');
const player = await resolvePlayerRegistration(pool, getConfiguredPlayerIdentifier());
return String(player && player.internal_base_url || '').trim().replace(/\/$/, '') || null;
}
function registerTemplateSlideThumbnailRefreshTask(options) {
@@ -19,6 +21,7 @@ function registerTemplateSlideThumbnailRefreshTask(options) {
const pool = options && options.pool;
const common = options && options.common;
const mediaDir = String(options && options.mediaDir || '').trim();
const configuredWebBaseUrl = String(options && options.webBaseUrl || '').trim().replace(/\/$/, '');
if (!backgroundTaskQueue || typeof captureSlideThumbnail !== 'function' || !pool || !common || !mediaDir) {
throw new Error('registerTemplateSlideThumbnailRefreshTask requires the template thumbnail dependencies.');
@@ -32,9 +35,9 @@ function registerTemplateSlideThumbnailRefreshTask(options) {
throw new Error('Template id is required.');
}
const playerInternalBaseUrl = await fetchPlayerInternalBaseUrl(pool);
if (!playerInternalBaseUrl) {
throw new Error('Player internal base URL is required.');
const webBaseUrl = configuredWebBaseUrl || `http://127.0.0.1:${Number(process.env.WEB_PORT || 8080)}`;
if (!webBaseUrl) {
throw new Error('Web base URL is required.');
}
const [slides] = await pool.query(
@@ -52,7 +55,7 @@ function registerTemplateSlideThumbnailRefreshTask(options) {
pool: pool,
common: common,
mediaDir: mediaDir,
baseUrl: playerInternalBaseUrl,
baseUrl: webBaseUrl,
slideId: slideId,
previousThumbnailPath: slide && slide.thumbnail_path ? slide.thumbnail_path : null
});
src/web/lib/config.js
+4
View File
@@ -6,6 +6,8 @@ function createWebConfig() {
const thumbnailsDir = path.join(mediaDir, 'thumbnails');
const assetDir = path.join(__dirname, '..', 'public');
const playerInternalBaseUrl = (process.env.PLAYER_INTERNAL_BASE_URL || process.env.PLAYER_BASE_URL || 'http://player:8081').replace(/\/$/, '');
const thinClientBaseUrl = (process.env.THIN_CLIENT_BASE_URL || 'http://player-bridge:8090').replace(/\/$/, '');
const webBaseUrl = (process.env.WEB_BASE_URL || `http://127.0.0.1:${Number(process.env.WEB_PORT || 8080)}`).replace(/\/$/, '');
const sessionCookieName = 'digital_signage_session';
const sessionMaxAgeDays = Number(process.env.SESSION_MAX_AGE_DAYS || 14);
const sessionMaxAgeMs = (Number.isFinite(sessionMaxAgeDays) && sessionMaxAgeDays > 0 ? sessionMaxAgeDays : 14) * 24 * 60 * 60 * 1000;
@@ -19,6 +21,8 @@ function createWebConfig() {
thumbnailsDir: thumbnailsDir,
assetDir: assetDir,
playerInternalBaseUrl: playerInternalBaseUrl,
thinClientBaseUrl: thinClientBaseUrl,
webBaseUrl: webBaseUrl,
sessionCookieName: sessionCookieName,
sessionMaxAgeMs: sessionMaxAgeMs,
dataSourceStartupRefreshStaggerMs: dataSourceStartupRefreshStaggerMs
src/web/lib/dashboard-state.js
+68 -3
View File
@@ -6,6 +6,10 @@ function normalizeClientName(value) {
return String(value || '').trim();
}
function normalizePlayerBaseUrl(value) {
return String(value || '').trim().replace(/\/$/, '');
}
function enrichScreensWithConnections(screens, connectionsBySlug, onboardingNameBySlug, playerUrlsBySlug) {
return (screens || []).map(function (screen) {
const connectionState = connectionsBySlug[screen.slug] || { count: 0, connections: [] };
@@ -18,11 +22,12 @@ function enrichScreensWithConnections(screens, connectionsBySlug, onboardingName
});
}
function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, formatDashboardDate) {
function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, playerIdentifierByBaseUrl, formatDashboardDate) {
return (screens || []).flatMap(function (screen) {
const connectionState = connectionsBySlug[screen.slug] || { count: 0, connections: [] };
return (connectionState.connections || []).map(function (connection) {
const deviceId = String(connection.deviceId || '').trim();
const playerBaseUrl = normalizePlayerBaseUrl(connection.playerPublicBaseUrl);
return Object.assign({}, connection, {
screen_slug: screen.slug,
screen_name: screen.name,
@@ -30,12 +35,55 @@ function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboa
playlist_name: screen.playlist_name || null,
connectedAtLabel: formatDashboardDate(connection.connectedAt),
lastSeenAtLabel: formatDashboardDate(connection.lastSeenAt),
player_url: screen.player_url || String(connection.page || '').trim() || null
player_identifier: playerIdentifierByBaseUrl && playerBaseUrl ? (playerIdentifierByBaseUrl[playerBaseUrl] || null) : null,
player_url: playerBaseUrl || null
});
});
});
}
function isRecentPlayerRegistration(player, staleSeconds) {
const lastSeenAt = player && player.last_seen_at;
const lastSeenAtValue = lastSeenAt instanceof Date ? lastSeenAt.getTime() : new Date(lastSeenAt).getTime();
const cutoffTime = Date.now() - Math.max(30, Number(staleSeconds || 60)) * 1000;
return Number.isFinite(lastSeenAtValue) && lastSeenAtValue >= cutoffTime;
}
function buildKioskLauncherPlayers(playerRegistrations, staleSeconds) {
return (Array.isArray(playerRegistrations) ? playerRegistrations : [])
.filter(function (player) {
return Boolean(player && String(player.identifier || '').trim() && String(player.public_base_url || '').trim() && isRecentPlayerRegistration(player, staleSeconds));
})
.map(function (player) {
return {
player_identifier: String(player.identifier || '').trim(),
player_url: String(player.public_base_url || '').trim().replace(/\/$/, '')
};
});
}
async function fetchConnectedPlayerCount(pool, connectedPlayerCountStaleSeconds) {
const staleSeconds = Math.max(30, Number(connectedPlayerCountStaleSeconds || 60));
if (!pool || typeof pool.query !== 'function' || !Number.isFinite(staleSeconds)) {
return null;
}
try {
const [rows] = await pool.query(
`SELECT COUNT(*) AS connected_count
FROM d_players
WHERE last_seen_at IS NOT NULL
AND last_seen_at >= DATE_SUB(NOW(), INTERVAL ${staleSeconds} SECOND)`
);
const count = Number(rows && rows[0] && rows[0].connected_count);
return Number.isFinite(count) && count >= 0 ? count : null;
} catch (_error) {
return null;
}
}
function compareScreenNames(left, right) {
const leftName = String(left && left.name || '').trim();
const rightName = String(right && right.name || '').trim();
@@ -51,6 +99,7 @@ function compareScreenNames(left, right) {
function createDashboardStateService(options) {
const pool = options && options.pool;
const common = options && options.common;
const connectedPlayerCountStaleSeconds = options && options.connectedPlayerCountStaleSeconds;
const playerSnapshotCache = options && options.playerSnapshotCache;
const playerSnapshotSockets = options && options.playerSnapshotSockets;
const ensurePlayerSnapshotSubscription = options && options.ensurePlayerSnapshotSubscription;
@@ -63,9 +112,13 @@ function createDashboardStateService(options) {
async function buildDashboardState() {
const data = await common.fetchAdminData(pool);
const screensData = data.screens || [];
const connectedPlayersCount = await fetchConnectedPlayerCount(pool, connectedPlayerCountStaleSeconds);
const playerUrlsBySlug = typeof common.fetchScreenPlayerUrls === 'function'
? await common.fetchScreenPlayerUrls(pool)
: {};
const playerRegistrations = typeof common.fetchPlayerRegistrations === 'function'
? await common.fetchPlayerRegistrations(pool)
: [];
screensData.forEach(function (screen) {
ensurePlayerSnapshotSubscription(screen.slug);
});
@@ -91,6 +144,15 @@ function createDashboardStateService(options) {
}
});
const playerIdentifierByBaseUrl = {};
(Array.isArray(playerRegistrations) ? playerRegistrations : []).forEach(function (player) {
const baseUrl = normalizePlayerBaseUrl(player && player.public_base_url);
const identifier = normalizeClientName(player && player.identifier);
if (baseUrl && identifier) {
playerIdentifierByBaseUrl[baseUrl] = identifier;
}
});
const connectionsBySlug = {};
screensData.forEach(function (screen) {
const cached = playerSnapshotCache.get(String(screen.slug || '').trim());
@@ -106,7 +168,8 @@ function createDashboardStateService(options) {
});
})
.sort(compareScreenNames);
const clients = buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, formatDashboardDate);
const clients = buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, playerIdentifierByBaseUrl, formatDashboardDate);
const kioskPlayers = buildKioskLauncherPlayers(playerRegistrations, connectedPlayerCountStaleSeconds);
const playerServiceConnected = Array.from(playerSnapshotSockets.values()).some(function (socket) {
return socket && socket.readyState === WebSocket.OPEN;
});
@@ -115,8 +178,10 @@ function createDashboardStateService(options) {
playlists: data.playlists || [],
screens: screens,
clients: clients,
kioskPlayers: kioskPlayers,
slides: data.slides || [],
playerServiceConnected: playerServiceConnected,
connectedPlayersCount: connectedPlayersCount !== null ? connectedPlayersCount : 0,
connectedClientsCount: screens.reduce(function (total, screen) {
return total + Number(screen.player_connection_count || 0);
}, 0)
src/web/lib/media/index.js
+3 -1
View File
@@ -2,6 +2,8 @@
module.exports = {
createUploadSyncService: require('./upload-sync').createUploadSyncService,
captureSlideThumbnail: require('./slide-thumbnails').captureSlideThumbnail,
captureSlideThumbnail: function captureSlideThumbnail(options) {
return require('./slide-thumbnails').captureSlideThumbnail(options);
},
fontLibrary: require('./font-library')
};
src/web/lib/media/slide-thumbnail-preview.js
+156
View File
@@ -0,0 +1,156 @@
// Pure thumbnail preview payload helpers shared by routes and screenshot capture.
const {
escapeHtml,
renderEditorJsContent,
sanitizeFontFamily,
sanitizeFontSize,
sanitizeTextColor
} = require('#src/player/render-helpers');
function normalizeBaseUrl(baseUrl) {
return String(baseUrl || '').trim().replace(/\/$/, '');
}
function resolveAssetUrl(baseUrl, value) {
const raw = String(value || '').trim();
if (!raw) {
return '';
}
if (/^(?:https?:)?\/\//i.test(raw) || raw.startsWith('data:')) {
return raw;
}
const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
if (!normalizedBaseUrl) {
return raw;
}
if (raw.startsWith('/')) {
return normalizedBaseUrl + raw;
}
return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
}
function getThumbnailCanvasSize(slide) {
const template = slide && slide.template ? slide.template : null;
return {
width: Math.max(1, Number(template && template.canvas_size_width ? template.canvas_size_width : 1920)),
height: Math.max(1, Number(template && template.canvas_size_height ? template.canvas_size_height : 1080))
};
}
function getRegionContent(slide, region) {
const content = slide && slide.content && slide.content[region.region_key] ? slide.content[region.region_key] : {};
return content && typeof content === 'object' ? content : { value: content };
}
function buildThumbnailRegionStyle(region, canvasWidth, canvasHeight) {
const left = Number.isFinite(Number(region && region.x)) && canvasWidth > 0 ? (Number(region.x) / canvasWidth) * 100 : 0;
const top = Number.isFinite(Number(region && region.y)) && canvasHeight > 0 ? (Number(region.y) / canvasHeight) * 100 : 0;
const width = Number.isFinite(Number(region && region.width)) && canvasWidth > 0 ? (Number(region.width) / canvasWidth) * 100 : 0;
const height = Number.isFinite(Number(region && region.height)) && canvasHeight > 0 ? (Number(region.height) / canvasHeight) * 100 : 0;
return 'left:' + left + '%;top:' + top + '%;width:' + width + '%;height:' + height + '%;z-index:' + Number(region && region.z_index || 0) + ';';
}
function hasVisibleContent(html) {
return Boolean(String(html || '').replace(/<[^>]+>/g, '').trim());
}
function buildTextRegionMarkup(region, regionContent) {
const fontFamily = sanitizeFontFamily(regionContent.font_family || region.font_family);
const fontSize = sanitizeFontSize(regionContent.font_size || region.font_size);
const fontColor = sanitizeTextColor(regionContent.font_color || region.font_color);
const renderedBody = renderEditorJsContent(regionContent.value || '');
if (!hasVisibleContent(renderedBody)) {
return '';
}
return '<div class="slide-preview-region slide-preview-text-region" style="' + region.baseStyle + '"><div class="slide-preview-text-content" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;overflow:hidden;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
}
function buildRegionInnerHtml(region, regionContent, baseUrl) {
const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
if (regionType === 'image') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<div class="slide-preview-region slide-preview-image-region" style="' + region.baseStyle + '"><img class="slide-preview-image" src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'image') + '" /></div>'
: '';
}
if (regionType === 'video') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<div class="slide-preview-region slide-preview-video-region" style="' + region.baseStyle + '"><video class="slide-preview-video" src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'video') + '" muted playsinline preload="metadata"></video></div>'
: '';
}
if (regionType === 'webpage') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
: '';
}
if (regionType === 'qr-code') {
const src = String(regionContent.qr_preview || '').trim();
const borderRadius = Math.max(0, Math.round(Number(regionContent.qr_border_radius || 0)));
const radiusStyle = borderRadius > 0 ? ' style="border-radius:' + borderRadius + 'px;overflow:hidden;"' : '';
return src
? '<div class="slide-preview-region slide-preview-qr-code-region" style="' + region.baseStyle + radiusStyle + '"><img class="slide-preview-image" src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'qr code') + '" /></div>'
: '';
}
if (regionType === 'html') {
const html = String(rawValue || '').trim();
return html
? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
: '';
}
if (regionType === 'rtmp') {
const label = String(rawValue || '').trim() || 'RTMP source';
return '<div class="slide-preview-region slide-preview-rtmp-region" style="' + region.baseStyle + '"><div class="slide-preview-rtmp-placeholder">' + escapeHtml(label) + '</div></div>';
}
return buildTextRegionMarkup(region, regionContent);
}
function buildThumbnailPreviewMarkup(slide, baseUrl) {
const template = slide && slide.template ? slide.template : null;
if (!template) {
return '';
}
const canvasSize = getThumbnailCanvasSize(slide);
const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
return (Array.isArray(template.regions) ? template.regions : []).map(function (region) {
const regionContent = getRegionContent(slide, region);
const previewRegion = Object.assign({}, region, {
baseStyle: buildThumbnailRegionStyle(region, canvasSize.width, canvasSize.height),
pixelWidth: Math.max(1, Math.round(Number(region && region.width || 0) || 1)),
pixelHeight: Math.max(1, Math.round(Number(region && region.height || 0) || 1))
});
return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl);
}).join('');
}
function buildThumbnailPreviewPayload(slide, options) {
const template = slide && slide.template ? slide.template : null;
const canvasSize = getThumbnailCanvasSize(slide);
return {
thumbnailPreview: true,
canvasWidth: canvasSize.width,
canvasHeight: canvasSize.height,
backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl)
};
}
module.exports = {
buildThumbnailPreviewPayload: buildThumbnailPreviewPayload,
buildThumbnailPreviewMarkup: buildThumbnailPreviewMarkup
};
src/web/lib/media/slide-thumbnails.js
+91 -23
View File
@@ -2,14 +2,6 @@
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer-core');
const chromiumModule = require('@sparticuz/chromium');
const sharp = require('sharp');
const chromium = chromiumModule && typeof chromiumModule.executablePath === 'function'
? chromiumModule
: chromiumModule && chromiumModule.default && typeof chromiumModule.default.executablePath === 'function'
? chromiumModule.default
: chromiumModule;
const {
escapeHtml,
mediaKind,
@@ -73,6 +65,23 @@ function getRegionContent(slide, region) {
return content && typeof content === 'object' ? content : { value: content };
}
function getThumbnailCanvasSize(slide) {
const template = slide && slide.template ? slide.template : null;
return {
width: Math.max(1, Number(template && template.canvas_size_width ? template.canvas_size_width : 1920)),
height: Math.max(1, Number(template && template.canvas_size_height ? template.canvas_size_height : 1080))
};
}
function buildThumbnailRegionStyle(region, canvasWidth, canvasHeight) {
const left = Number.isFinite(Number(region && region.x)) && canvasWidth > 0 ? (Number(region.x) / canvasWidth) * 100 : 0;
const top = Number.isFinite(Number(region && region.y)) && canvasHeight > 0 ? (Number(region.y) / canvasHeight) * 100 : 0;
const width = Number.isFinite(Number(region && region.width)) && canvasWidth > 0 ? (Number(region.width) / canvasWidth) * 100 : 0;
const height = Number.isFinite(Number(region && region.height)) && canvasHeight > 0 ? (Number(region.height) / canvasHeight) * 100 : 0;
return 'left:' + left + '%;top:' + top + '%;width:' + width + '%;height:' + height + '%;z-index:' + Number(region && region.z_index || 0) + ';';
}
function hasVisibleContent(html) {
return Boolean(String(html || '').replace(/<[^>]+>/g, '').trim());
}
@@ -86,7 +95,7 @@ function buildTextRegionMarkup(region, regionContent) {
return '';
}
return '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
return '<div class="slide-preview-region slide-preview-text-region" style="' + region.baseStyle + '"><div class="slide-preview-text-content" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;overflow:hidden;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
}
function buildRegionInnerHtml(region, regionContent, baseUrl) {
@@ -96,21 +105,21 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
if (regionType === 'image') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<img src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'image') + '" />'
? '<div class="slide-preview-region slide-preview-image-region" style="' + region.baseStyle + '"><img class="slide-preview-image" src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'image') + '" /></div>'
: '';
}
if (regionType === 'video') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<video src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'video') + '" muted playsinline preload="metadata"></video>'
? '<div class="slide-preview-region slide-preview-video-region" style="' + region.baseStyle + '"><video class="slide-preview-video" src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'video') + '" muted playsinline preload="metadata"></video></div>'
: '';
}
if (regionType === 'webpage') {
const src = resolveAssetUrl(baseUrl, rawValue);
return src
? '<iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe>'
? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
: '';
}
@@ -119,26 +128,75 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
const borderRadius = Math.max(0, Math.round(Number(regionContent.qr_border_radius || 0)));
const radiusStyle = borderRadius > 0 ? ' style="border-radius:' + borderRadius + 'px;overflow:hidden;"' : '';
return src
? '<img src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'qr code') + '"' + radiusStyle + ' />'
? '<div class="slide-preview-region slide-preview-qr-code-region" style="' + region.baseStyle + radiusStyle + '"><img class="slide-preview-image" src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'qr code') + '" /></div>'
: '';
}
if (regionType === 'html') {
const html = String(rawValue || '').trim();
return html
? '<iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe>'
? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
: '';
}
if (regionType === 'rtmp') {
const label = String(rawValue || '').trim() || 'RTMP source';
return '<div class="template-region-rtmp-placeholder">' + escapeHtml(label) + '</div>';
return '<div class="slide-preview-region slide-preview-rtmp-region" style="' + region.baseStyle + '"><div class="slide-preview-rtmp-placeholder">' + escapeHtml(label) + '</div></div>';
}
return buildTextRegionMarkup(region, regionContent);
}
async function loadChromium() {
const chromiumModule = await import('@sparticuz/chromium');
const resolved = chromiumModule && chromiumModule.default ? chromiumModule.default : chromiumModule;
return resolved;
}
async function loadPuppeteer() {
return require('puppeteer-core');
}
function loadSharp() {
return require('sharp');
}
function buildThumbnailPreviewMarkup(slide, baseUrl) {
const template = slide && slide.template ? slide.template : null;
if (!template) {
return '';
}
const canvasSize = getThumbnailCanvasSize(slide);
const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
return (Array.isArray(template.regions) ? template.regions : []).map(function (region) {
const regionContent = getRegionContent(slide, region);
const previewRegion = Object.assign({}, region, {
baseStyle: buildThumbnailRegionStyle(region, canvasSize.width, canvasSize.height),
pixelWidth: Math.max(1, Math.round(Number(region && region.width || 0) || 1)),
pixelHeight: Math.max(1, Math.round(Number(region && region.height || 0) || 1))
});
return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl);
}).join('');
}
function buildThumbnailPreviewPayload(slide, options) {
const template = slide && slide.template ? slide.template : null;
const canvasSize = getThumbnailCanvasSize(slide);
return {
thumbnailPreview: true,
canvasWidth: canvasSize.width,
canvasHeight: canvasSize.height,
backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl)
};
}
async function launchBrowser() {
const puppeteer = await loadPuppeteer();
const chromium = await loadChromium();
let executablePath = SYSTEM_CHROMIUM_PATHS.find(function (candidate) {
return fs.existsSync(candidate);
}) || '';
@@ -178,6 +236,7 @@ async function launchBrowser() {
}
async function captureSlideThumbnail(options) {
const sharp = loadSharp();
const pool = options && options.pool;
const common = options && options.common;
const mediaDir = String(options && options.mediaDir || '').trim();
@@ -194,7 +253,6 @@ async function captureSlideThumbnail(options) {
throw new Error('Slide not found.');
}
const canvasSize = getCanvasSize(slide);
const thumbnailDir = path.join(mediaDir, 'thumbnails');
const thumbnailRelativePath = String(slide.thumbnail_path || '').trim() || '/media/thumbnails/slides/slide-' + slide.id + '.png';
const filePath = path.join(mediaDir, thumbnailRelativePath.replace(/^\/+media\//, ''));
@@ -206,11 +264,11 @@ async function captureSlideThumbnail(options) {
async function waitForThumbnailRender(page) {
await page.waitForFunction(function () {
return document.readyState === 'complete' && Boolean(document.querySelector('.slide-canvas'));
return document.readyState === 'complete' && Boolean(document.querySelector('#popup-preview-canvas'));
}, { timeout: 30000 });
await page.waitForFunction(function () {
var canvas = document.querySelector('.slide-canvas');
var canvas = document.querySelector('#popup-preview-canvas');
if (!canvas) {
return false;
}
@@ -244,18 +302,26 @@ async function captureSlideThumbnail(options) {
try {
const page = await browser.newPage();
try {
const previewPath = '/api/internal/slide-thumbnails/' + slide.id + '/preview';
const previewPath = '/api/internal/slide-thumbnails/' + slide.id + '/popup-preview';
const previewUrl = baseUrl + previewPath;
const previewPayload = buildThumbnailPreviewPayload(slide, {
baseUrl: baseUrl,
fontStylesheetHref: options && options.fontStylesheetHref ? options.fontStylesheetHref : ''
});
await page.setViewport({
width: Math.max(1, Number(previewPayload.canvasWidth || PLAYER_VIEWPORT.width)),
height: Math.max(1, Number(previewPayload.canvasHeight || PLAYER_VIEWPORT.height)),
deviceScaleFactor: 1
});
await page.setExtraHTTPHeaders(createRequestAuthHeaders({
method: 'GET',
pathname: previewPath
}));
await page.setViewport(PLAYER_VIEWPORT);
await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
await waitForThumbnailRender(page);
const canvas = await page.$('.slide-canvas');
const canvas = await page.$('#popup-preview-canvas');
if (!canvas) {
throw new Error('Player render did not produce a slide canvas.');
throw new Error('Popup preview did not produce a slide canvas.');
}
await canvas.screenshot({ path: fullSizePath });
} finally {
@@ -298,5 +364,7 @@ async function captureSlideThumbnail(options) {
}
module.exports = {
captureSlideThumbnail: captureSlideThumbnail
captureSlideThumbnail: captureSlideThumbnail,
buildThumbnailPreviewPayload: buildThumbnailPreviewPayload,
buildThumbnailPreviewMarkup: buildThumbnailPreviewMarkup
};
src/web/lib/media/upload-sync.js
+22 -13
View File
@@ -6,6 +6,7 @@ const crypto = require('crypto');
const multer = require('multer');
const { createRequestAuthHeaders } = require('#src/request-auth');
const { collectFontLibrarySyncOperations } = require('./font-library');
const { getConfiguredPlayerIdentifier, resolvePlayerRegistration } = require('#src/data/player-registry');
function normalizeUploadRoot(uploadDir) {
return path.resolve(String(uploadDir || '').trim());
@@ -48,21 +49,20 @@ function createUploadSyncService(options) {
}
try {
const [rows] = await pool.query(
`SELECT internal_base_url
FROM d_players
WHERE device_id = '1'
LIMIT 1`
);
const resolvedBaseUrl = String(rows && rows[0] && rows[0].internal_base_url || '').trim().replace(/\/$/, '');
return resolvedBaseUrl || configuredPlayerInternalBaseUrl || null;
const configuredPlayerIdentifier = getConfiguredPlayerIdentifier();
const player = await resolvePlayerRegistration(pool, configuredPlayerIdentifier);
const resolvedBaseUrl = String(player && player.internal_base_url || '').trim().replace(/\/$/, '');
if (resolvedBaseUrl) {
playerInternalBaseUrl = resolvedBaseUrl;
return resolvedBaseUrl;
}
} catch (_error) {
return configuredPlayerInternalBaseUrl || null;
}
return configuredPlayerInternalBaseUrl || null;
})().then(function (baseUrl) {
playerInternalBaseUrl = baseUrl || null;
playerInternalBaseUrlPromise = null;
return playerInternalBaseUrl;
return baseUrl || null;
}, function () {
playerInternalBaseUrlPromise = null;
return configuredPlayerInternalBaseUrl || null;
@@ -278,6 +278,11 @@ function createUploadSyncService(options) {
return Boolean(localUploadDir);
}
function isPlayerUnavailableError(error) {
const code = String(error && error.cause && error.cause.code || error && error.code || '').trim().toUpperCase();
return code === 'ENOTFOUND' || code === 'ECONNREFUSED' || code === 'EAI_AGAIN' || code === 'ETIMEDOUT';
}
function queuePlayerUploadSync(operation) {
if (!operation || !operation.uploadPath) {
return;
@@ -350,7 +355,9 @@ function createUploadSyncService(options) {
}
return true;
} catch (error) {
console.warn('Unable to sync upload to player:', relativePath, error);
if (!isPlayerUnavailableError(error)) {
console.warn('Unable to sync upload to player:', relativePath, error);
}
return false;
}
}
@@ -387,7 +394,9 @@ function createUploadSyncService(options) {
}
return true;
} catch (error) {
console.warn('Unable to remove upload from player:', relativePath, error);
if (!isPlayerUnavailableError(error)) {
console.warn('Unable to remove upload from player:', relativePath, error);
}
return false;
}
}
src/web/lib/player-actions.js
+15 -11
View File
@@ -1,4 +1,5 @@
const { createRequestAuthHeaders } = require('#src/request-auth');
const { getConfiguredPlayerIdentifier, resolvePlayerRegistration } = require('#src/data/player-registry');
function createPlayerActionService(options) {
const pool = options && options.pool;
@@ -13,6 +14,10 @@ function createPlayerActionService(options) {
let playerInternalBaseUrlPromise = null;
async function getPlayerInternalBaseUrl() {
if (configuredPlayerInternalBaseUrl) {
return configuredPlayerInternalBaseUrl;
}
if (playerInternalBaseUrl) {
return playerInternalBaseUrl;
}
@@ -27,21 +32,20 @@ function createPlayerActionService(options) {
}
try {
const [rows] = await pool.query(
`SELECT internal_base_url
FROM d_players
WHERE device_id = '1'
LIMIT 1`
);
const resolvedBaseUrl = String(rows && rows[0] && rows[0].internal_base_url || '').trim().replace(/\/$/, '');
return resolvedBaseUrl || configuredPlayerInternalBaseUrl || null;
const configuredPlayerIdentifier = getConfiguredPlayerIdentifier();
const player = await resolvePlayerRegistration(pool, configuredPlayerIdentifier);
const resolvedBaseUrl = String(player && player.internal_base_url || '').trim().replace(/\/$/, '');
if (resolvedBaseUrl) {
playerInternalBaseUrl = resolvedBaseUrl;
return resolvedBaseUrl;
}
} catch (_error) {
return configuredPlayerInternalBaseUrl || null;
}
return configuredPlayerInternalBaseUrl || null;
})().then(function (baseUrl) {
playerInternalBaseUrl = baseUrl || null;
playerInternalBaseUrlPromise = null;
return playerInternalBaseUrl;
return baseUrl || null;
}, function () {
playerInternalBaseUrlPromise = null;
return configuredPlayerInternalBaseUrl || null;
src/web/lib/web-startup.js
+1
View File
@@ -25,6 +25,7 @@ async function initializeWebServer(options) {
uploadSyncService: webBootstrap.uploadSyncService,
captureSlideThumbnail: captureSlideThumbnail,
mediaDir: mediaDir,
webBaseUrl: options && options.webBaseUrl ? options.webBaseUrl : null,
dataSourceStartupRefreshStaggerMs: dataSourceStartupRefreshStaggerMs
});
src/web/middleware.js
+1 -1
View File
@@ -29,7 +29,7 @@ module.exports = function registerMiddleware(app, deps) {
});
app.use(function (req, res, next) {
if (req.path === '/' || req.path === '/login' || req.path === '/logout' || req.path.indexOf('/api/internal/slide-thumbnails/') === 0) {
if (req.path === '/' || req.path === '/login' || req.path === '/logout' || req.path.indexOf('/api/internal/slide-thumbnails/') === 0 || req.path === '/api/internal/sync/player-media') {
return next();
}
src/web/public/js/dashboard/dashboard-page.js
+72 -25
View File
@@ -267,24 +267,20 @@
function renderScreenTile(screen) {
var clientCount = Number(screen.player_connection_count || 0);
var playerUrl = String(screen.player_url || '').trim();
var connectionLabel = clientCount ? clientCount + ' live' : 'No clients';
var connectionStateClass = clientCount ? 'is-live' : 'is-idle';
var playlistLabel = screen.playlist_name ? escapeHtml(screen.playlist_name) : 'Unassigned';
var connectionsLabel = clientCount ? clientCount + ' connected' : 'No clients connected';
return [
'<article class="dashboard-screen-tile" data-screen-key="' + escapeHtml(screen.id || '') + '">',
'<div class="dashboard-screen-tile-top">',
'<div class="dashboard-screen-tile-text">',
'<h4 class="dashboard-screen-name">' + escapeHtml(screen.name || '') + '</h4>',
'<a class="dashboard-screen-link" href="' + escapeHtml(playerUrl) + '" target="_blank">' + escapeHtml(playerUrl) + '</a>',
'</div>',
'<span class="dashboard-screen-pill ' + connectionStateClass + '">' + escapeHtml(connectionLabel) + '</span>',
'</div>',
'<dl class="dashboard-screen-meta">',
'<div><dt>Playlist</dt><dd>' + playlistLabel + '</dd></div>',
'<div><dt>Connections</dt><dd>' + escapeHtml(connectionsLabel) + '</dd></div>',
'</dl>',
'</article>'
].join('');
@@ -310,7 +306,7 @@
}
function updateStats(state) {
var clientCount = document.getElementById('dashboard-client-count');
var playerCount = document.getElementById('dashboard-player-count');
var screenCount = document.getElementById('dashboard-screen-count');
var slideCount = document.getElementById('dashboard-slide-count');
var playlistCount = document.getElementById('dashboard-playlist-count');
@@ -324,8 +320,8 @@
if (screenCount && Array.isArray(state.screens)) {
screenCount.textContent = String(state.screens.length);
}
if (clientCount) {
clientCount.textContent = String(Number(state.connectedClientsCount || 0));
if (playerCount) {
playerCount.textContent = String(Number(state.connectedPlayersCount || 0));
}
}
@@ -399,6 +395,62 @@
}
function updateKioskLauncherModal(state) {
var modal = document.getElementById('dashboard-kiosk-launcher-modal');
if (!modal) {
return;
}
var checkbox = modal.querySelector('[data-kiosk-launcher-confirm]');
var select = modal.querySelector('[data-kiosk-launcher-player-select]');
var downloadLinks = Array.prototype.slice.call(modal.querySelectorAll('[data-kiosk-launcher-download]'));
var playersState = state && Array.isArray(state.kioskPlayers)
? state.kioskPlayers
: (state && Array.isArray(state.clients) ? state.clients : []);
var players = playersState.filter(function (client) {
return Boolean(client && String(client.player_url || '').trim());
});
if (select && playersState.length) {
var currentValue = String(select.value || '').trim();
var options = ['<option value="">Select a player</option>'];
players.forEach(function (player) {
var playerUrl = String(player.player_url || '').trim();
var playerIdentifier = String(player.player_identifier || 'Connected player').trim();
if (!playerUrl) {
return;
}
options.push('<option value="' + escapeHtml(playerUrl) + '" data-player-identifier="' + escapeHtml(playerIdentifier) + '">' + escapeHtml(playerIdentifier + ' - ' + playerUrl) + '</option>');
});
select.innerHTML = options.join('');
if (currentValue) {
select.value = currentValue;
}
}
var selectedUrl = select ? String(select.value || '').trim() : '';
var canEnableDownloads = Boolean(checkbox && checkbox.checked && selectedUrl);
downloadLinks.forEach(function (link) {
if (!link) {
return;
}
var baseHref = String(link.getAttribute('data-kiosk-launcher-download-base') || link.getAttribute('href') || '').trim();
if (canEnableDownloads) {
link.setAttribute('href', baseHref + '?playerUrl=' + encodeURIComponent(selectedUrl));
link.classList.remove('disabled');
link.setAttribute('aria-disabled', 'false');
link.removeAttribute('tabindex');
} else {
link.removeAttribute('href');
link.classList.add('disabled');
link.setAttribute('aria-disabled', 'true');
link.setAttribute('tabindex', '-1');
}
});
}
function updateScreenGrid(state) {
var grid = document.getElementById('dashboard-screens-grid');
if (!grid || !Array.isArray(state.screens)) {
@@ -603,6 +655,7 @@
updateScreenGrid(state);
updateScreenCommandControls(state);
updateClientTable(state);
updateKioskLauncherModal(state);
updateDashboardQuickActions(state);
}
@@ -780,34 +833,28 @@
}
var checkbox = modal.querySelector('[data-kiosk-launcher-confirm]');
var select = modal.querySelector('[data-kiosk-launcher-player-select]');
var downloadLinks = Array.prototype.slice.call(modal.querySelectorAll('[data-kiosk-launcher-download]'));
function setDownloadsEnabled(enabled) {
downloadLinks.forEach(function (link) {
if (!link) {
return;
}
link.classList.toggle('disabled', !enabled);
link.setAttribute('aria-disabled', enabled ? 'false' : 'true');
if (enabled) {
link.removeAttribute('tabindex');
} else {
link.setAttribute('tabindex', '-1');
}
});
}
function resetModalState() {
if (checkbox) {
checkbox.checked = false;
}
setDownloadsEnabled(false);
if (select) {
select.value = '';
}
updateKioskLauncherModal(latestDashboardState);
}
if (checkbox) {
checkbox.addEventListener('change', function () {
setDownloadsEnabled(Boolean(checkbox.checked));
updateKioskLauncherModal(latestDashboardState || readScreenCommandStateFromDom());
});
}
if (select) {
select.addEventListener('change', function () {
updateKioskLauncherModal(latestDashboardState || readScreenCommandStateFromDom());
});
}
src/web/public/js/system-status.js
+10 -1
View File
@@ -1,4 +1,13 @@
(function () {
function buildLivePlayerFeedLabel(connectedPlayersCount) {
var count = Number(connectedPlayersCount || 0);
if (count <= 0) {
return 'Player feed online - no players connected';
}
return 'Live player feed - ' + count + ' player' + (count === 1 ? '' : 's') + ' connected';
}
function updateSidebarStatus(status, label) {
var dot = document.getElementById('sidebar-status-dot');
var text = document.getElementById('sidebar-status-text');
@@ -72,7 +81,7 @@
if (!screenCount) {
updateSidebarStatus('unknown', 'No screens configured');
} else {
updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), 'Live player feed');
updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), buildLivePlayerFeedLabel(payload.state && payload.state.connectedPlayersCount));
}
}
} catch (_error) {
src/web/routes/admin/client-commands.js
-4
View File
@@ -208,11 +208,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
}
const status = await commitDeviceBinding(pool, deviceId, resolvedClientName, targetScreenSlug, isClientNameAvailable, liveConnections);
const targetPlayerRecord = typeof common.fetchScreenPlayerRecord === 'function'
? await common.fetchScreenPlayerRecord(pool, targetScreenSlug)
: null;
const targetBaseUrl = String(
targetPlayerRecord && targetPlayerRecord.public_base_url ||
(typeof common.fetchPlayerPublicBaseUrl === 'function' ? await common.fetchPlayerPublicBaseUrl(pool) : '') ||
''
).trim().replace(/\/$/, '');
src/web/routes/admin/manage.js
+5 -10
View File
@@ -111,7 +111,7 @@ module.exports = function registerManageRoutes(app, deps) {
const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name));
const actorId = getAuditUserId(req);
const [result] = await pool.query('INSERT INTO d_screens (name, slug, playlist_id, player_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)', [name, slug, playlistId, '1', actorId, actorId]);
const [result] = await pool.query('INSERT INTO d_screens (name, slug, playlist_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, slug, playlistId, actorId, actorId]);
redirectAfterSave(req, res, '/screens?edit=' + result.insertId, {
closeUrl: '/screens',
newUrl: '/screens/new',
@@ -144,19 +144,14 @@ module.exports = function registerManageRoutes(app, deps) {
const previousPlaylistId = screen.playlist_id;
const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id);
const previousSlug = String(screen.slug || '').trim();
await pool.query('UPDATE d_screens SET name = ?, slug = ?, playlist_id = ?, player_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, '1', getAuditUserId(req), screen.id]);
await pool.query('UPDATE d_screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
if (previousPlaylistId !== playlistId && previousSlug) {
await notifyPlayerScreens([previousSlug], 'refresh');
}
if (previousSlug && previousSlug !== slug) {
const playerRecord = typeof common.fetchScreenPlayerRecord === 'function'
? await common.fetchScreenPlayerRecord(pool, previousSlug)
: null;
const playerBaseUrl = playerRecord && playerRecord.public_base_url
? String(playerRecord.public_base_url).replace(/\/$/, '')
: typeof common.fetchPlayerPublicBaseUrl === 'function'
? await common.fetchPlayerPublicBaseUrl(pool)
: '';
const playerBaseUrl = typeof common.fetchPlayerPublicBaseUrl === 'function'
? await common.fetchPlayerPublicBaseUrl(pool)
: '';
await forwardPlayerCommand(previousSlug, {
command: 'redirect',
url: playerBaseUrl ? `${playerBaseUrl}/screen/${encodeURIComponent(slug)}` : `/screen/${encodeURIComponent(slug)}`
src/web/routes/internal/sync.js
+33
View File
@@ -0,0 +1,33 @@
// Internal sync trigger routes for player-driven queue flushes.
const { verifyRequestAuth } = require('#src/request-auth');
function requireRequestAuth(req, res, next) {
if (!verifyRequestAuth(req)) {
return res.status(401).json({ error: 'Request authentication required.' });
}
next();
}
module.exports = function registerInternalSyncRoutes(app, deps) {
const uploadSyncService = deps && deps.uploadSyncService;
const mediaDir = String(deps && deps.mediaDir || '').trim();
if (!uploadSyncService || typeof uploadSyncService.flushPendingPlayerUploadSyncs !== 'function' || typeof uploadSyncService.runMediaSyncTask !== 'function' || !mediaDir) {
throw new Error('registerInternalSyncRoutes requires the sync dependencies.');
}
app.post('/api/internal/sync/player-media', requireRequestAuth, async function (_req, res, next) {
try {
await uploadSyncService.runMediaSyncTask({
mode: 'initial',
uploadDir: mediaDir
});
await uploadSyncService.flushPendingPlayerUploadSyncs();
res.json({ ok: true });
} catch (error) {
next(error);
}
});
};
src/web/routes/register.js
+17
View File
@@ -15,6 +15,8 @@ const registerRssFeedRoutes = require('./data-sources/rss-feeds/routes');
const registerTimetableRoutes = require('./data-sources/timetables/routes');
const registerSettingsRoutes = require('./settings/background-tasks');
const registerFontRoutes = require('./settings/fonts');
const registerInternalSyncRoutes = require('./internal/sync');
const registerScreensRoutes = require('./signage/screens/routes');
const { PERMISSIONS, normalizePermissionKeys } = require('#src/rbac');
function registerRoutes(app, deps) {
@@ -22,6 +24,21 @@ function registerRoutes(app, deps) {
registerAuthAndAccountRoutes(app, deps);
registerSignageRoutes(app, deps);
registerSettingsAndContentRoutes(app, deps);
registerInternalSyncRoutes(app, {
uploadSyncService: deps.uploadSyncService,
mediaDir: deps.mediaDir
});
registerScreensRoutes(app, {
pool: deps.pool,
common: deps.common,
pages: deps.pages,
mediaDir: deps.mediaDir,
buildDashboardState: deps.buildDashboardState,
fetchScreensByPlaylistId: deps.fetchScreensByPlaylistId,
requirePermission: deps.requirePermission,
getScreenDeleteBlockMessage: deps.playerActionService.getScreenDeleteBlockMessage,
getScreenConnections: deps.playerActionService.getScreenConnections,
});
}
function registerAuthAndAccountRoutes(app, deps) {
src/web/routes/signage/dashboard/index.js
+2
View File
@@ -21,8 +21,10 @@ module.exports = function renderDashboardPage(data, message, currentUser) {
playlists: data.playlists || [],
screens: data.screens || [],
clients: data.clients || [],
kioskPlayers: data.kioskPlayers || [],
slides: data.slides || [],
connectedClientsCount: Number(data.connectedClientsCount || 0),
connectedPlayersCount: Number(data.connectedPlayersCount || data.connectedClientsCount || 0),
primaryPlayerUrl: normalizeBaseUrl(primaryPlayerUrl) || null,
scripts: ['js/dashboard/dashboard-page.js']
});
src/web/routes/signage/screens/form-view-model.js
+2 -1
View File
@@ -4,7 +4,8 @@ function buildScreenFormViewModel(screen, data, message, currentUser, isEdit) {
const viewScreen = Object.assign({
name: '',
slug: '',
playlist_id: null
playlist_id: null,
player_urls: []
}, screen || {});
return {
src/web/routes/signage/screens/routes.js
+36 -20
View File
@@ -1,6 +1,7 @@
// Screen route registration and dashboard wiring.
const fs = require('fs');
const { screenPlayerUrl } = require('../../../routes/common');
module.exports = function registerScreensRoutes(app, deps) {
const pool = deps.pool;
@@ -19,6 +20,17 @@ module.exports = function registerScreensRoutes(app, deps) {
linux: '/downloads/kiosk/pulse-signage-kiosk.sh'
};
function normalizeTargetPlayerUrl(value) {
const normalized = String(value || '').trim().replace(/\/$/, '');
if (!normalized) {
return null;
}
if (!/^https?:\/\//i.test(normalized)) {
return null;
}
return normalized;
}
function requireQueryPermission(readPermissionKey, editPermissionKey) {
return function (req, res, next) {
const permissionKey = req.query && req.query.edit ? editPermissionKey : readPermissionKey;
@@ -58,7 +70,6 @@ module.exports = function registerScreensRoutes(app, deps) {
return Object.assign({}, screen, {
player_connection_count: playerConnectionCount,
player_url: dashboardScreen && dashboardScreen.player_url ? dashboardScreen.player_url : screen.player_url || null
});
});
}
@@ -71,6 +82,21 @@ module.exports = function registerScreensRoutes(app, deps) {
return common.fetchPlayerPublicBaseUrl(pool);
}
async function buildScreenPlayerUrls(screen) {
const playerRegistrations = typeof common.fetchPlayerRegistrations === 'function'
? await common.fetchPlayerRegistrations(pool)
: [];
return (Array.isArray(playerRegistrations) ? playerRegistrations : []).map(function (player) {
const baseUrl = String(player && player.public_base_url || '').trim().replace(/\/$/, '');
const playerUrl = screenPlayerUrl(screen && screen.slug ? screen.slug : '', baseUrl);
return Object.assign({}, player, {
public_base_url: baseUrl || null,
player_url: playerUrl || null
});
});
}
function buildLauncherContent(templatePath, playerUrl) {
const template = fs.readFileSync(templatePath, 'utf8');
const normalizedPlayerUrl = String(playerUrl || '').trim();
@@ -100,8 +126,8 @@ module.exports = function registerScreensRoutes(app, deps) {
if (!screen) {
return res.status(404).send('Screen not found');
}
screen.player_url = await buildPlayerUrl();
if (screen.player_url) {
screen.player_urls = await buildScreenPlayerUrls(screen);
if (screen.player_urls.length) {
screen.launcher_downloads = launcherDownloadPaths;
}
screen.inUse = Boolean(await getScreenDeleteBlockMessage(pool, screen, deps.getScreenConnections));
@@ -113,18 +139,9 @@ module.exports = function registerScreensRoutes(app, deps) {
const sort = common.getSortQuery(req);
const direction = common.getSortDirectionQuery(req);
const dashboardState = await buildDashboardState(pool);
const playerUrlsBySlug = typeof common.fetchScreenPlayerUrls === 'function'
? await common.fetchScreenPlayerUrls(pool)
: {};
const data = await common.fetchScreensPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
res.send(pages.renderScreensPage({
screens: applyConnectionCounts(data.screens || [], dashboardState.screens || []).map(function (screen) {
const slug = String(screen && screen.slug || '').trim();
const registryUrl = slug && playerUrlsBySlug[slug] ? String(playerUrlsBySlug[slug]).trim() : '';
return Object.assign({}, screen, {
player_url: screen.player_url || registryUrl || null
});
}),
screens: applyConnectionCounts(data.screens || [], dashboardState.screens || []),
pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'screens', 'Screen pages')
}, req.query.message ? String(req.query.message) : '', req.currentUser));
} catch (error) {
@@ -138,11 +155,8 @@ module.exports = function registerScreensRoutes(app, deps) {
if (!screen) {
return res.status(404).send('Screen not found');
}
const playerUrlsBySlug = typeof common.fetchScreenPlayerUrls === 'function'
? await common.fetchScreenPlayerUrls(pool)
: {};
screen.player_url = String(playerUrlsBySlug[screen.slug] || '').trim() || null;
if (screen.player_url) {
screen.player_urls = await buildScreenPlayerUrls(screen);
if (screen.player_urls.length) {
screen.launcher_downloads = launcherDownloadPaths;
}
screen.inUse = Boolean(await getScreenDeleteBlockMessage(pool, screen, deps.getScreenConnections));
@@ -155,7 +169,8 @@ module.exports = function registerScreensRoutes(app, deps) {
app.get('/downloads/kiosk/pulse-signage-kiosk.bat', requirePermission('screens.update'), async function (_req, res, next) {
try {
const playerUrl = await buildPlayerUrl();
const playerUrl = normalizeTargetPlayerUrl(_req.query && _req.query.playerUrl)
|| await buildPlayerUrl();
if (!playerUrl) {
return res.status(404).send('Player URL is not available yet.');
}
@@ -173,7 +188,8 @@ module.exports = function registerScreensRoutes(app, deps) {
app.get('/downloads/kiosk/pulse-signage-kiosk.sh', requirePermission('screens.update'), async function (_req, res, next) {
try {
const playerUrl = await buildPlayerUrl();
const playerUrl = normalizeTargetPlayerUrl(_req.query && _req.query.playerUrl)
|| await buildPlayerUrl();
if (!playerUrl) {
return res.status(404).send('Player URL is not available yet.');
}
src/web/routes/signage/slides/routes.js
+43
View File
@@ -1,14 +1,32 @@
// Slide route registration and pagination wiring.
const { renderFragment } = require('../../../view');
const path = require('path');
const { verifyRequestAuth } = require('#src/request-auth');
const { getFontStylesheetHref } = require('#src/web/lib/media/font-library');
const { buildThumbnailPreviewPayload } = require('#src/web/lib/media/slide-thumbnail-preview');
function safeJsonForScript(value) {
return JSON.stringify(value === undefined ? null : value).replace(/</g, '\\u003c');
}
module.exports = function registerSlidesRoutes(app, deps) {
const pages = deps.pages;
const common = deps.common;
const pool = deps.pool;
const mediaDir = String(deps.mediaDir || path.join(__dirname, '..', '..', '..', '..', 'media')).trim();
const webBaseUrl = String(deps.webBaseUrl || '').trim().replace(/\/$/, '');
const { buildPagination } = require('../../../lib/pagination');
const requirePermission = deps.requirePermission;
function requireRequestAuth(req, res, next) {
if (!verifyRequestAuth(req)) {
return res.status(401).json({ error: 'Request authentication required.' });
}
next();
}
const LIST_PAGE_SIZE = 25;
app.get('/slides', requirePermission('slides.read'), async function (req, res, next) {
@@ -35,5 +53,30 @@ module.exports = function registerSlidesRoutes(app, deps) {
frameBodyClass: 'slide-preview-popup-shell slide-preview-popup-body'
}));
});
app.get('/api/internal/slide-thumbnails/:id/popup-preview', async function (req, res, next) {
try {
const slide = await common.fetchSlideById(pool, Number(req.params.id));
if (!slide) {
return res.status(404).send('Slide not found');
}
const payload = buildThumbnailPreviewPayload(slide, {
baseUrl: webBaseUrl || (String(req.headers.host || '').trim() ? `${req.protocol}://${String(req.headers.host).trim()}` : ''),
fontStylesheetHref: getFontStylesheetHref(mediaDir)
});
res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
res.send(renderFragment('slides/popup-preview', {
title: 'Slide preview',
framePopupCard: true,
hideFrameHeader: true,
frameBodyClass: 'slide-preview-popup-shell slide-preview-popup-body',
popupPreviewPayloadJson: safeJsonForScript(payload)
}));
} catch (error) {
next(error);
}
});
};
src/web/views/signage/dashboard/index.hbs
+18 -15
View File
@@ -34,8 +34,8 @@
{{/if}}
{{#if (hasPermission currentUser "clients.read")}}
<div class="dashboard-hero-stat">
<span class="dashboard-hero-stat-value">{{connectedClientsCount}}</span>
<span class="dashboard-hero-stat-label">clients</span>
<span id="dashboard-player-count" class="dashboard-hero-stat-value">{{connectedPlayersCount}}</span>
<span class="dashboard-hero-stat-label">players</span>
</div>
{{/if}}
</div>
@@ -157,12 +157,25 @@
</div>
<p class="mb-0 mt-2 text-muted small">Check this box to enable the Windows and Linux downloads.</p>
</div>
<div class="d-grid gap-2">
<select class="form-select" id="dashboard-kiosk-launcher-player-select" data-kiosk-launcher-player-select>
<option value="">Select a player</option>
{{#each kioskPlayers}}
{{#if player_identifier}}
{{#if player_url}}
<option value="{{player_url}}" data-player-identifier="{{player_identifier}}">{{player_identifier}} - {{player_url}}</option>
{{/if}}
{{/if}}
{{/each}}
</select>
<p class="mb-0 text-muted small">The download will open the selected player's public URL when the kiosk starts.</p>
</div>
<div class="d-flex flex-column flex-sm-row gap-2">
<a class="btn btn-outline-primary btn-lg flex-fill disabled dashboard-kiosk-launcher-download" href="/downloads/kiosk/pulse-signage-kiosk.bat" data-kiosk-launcher-download aria-disabled="true" tabindex="-1">
<a class="btn btn-outline-primary btn-lg flex-fill disabled dashboard-kiosk-launcher-download" data-kiosk-launcher-download data-kiosk-launcher-download-base="/downloads/kiosk/pulse-signage-kiosk.bat" aria-disabled="true" tabindex="-1">
<i class="bi bi-windows me-2" aria-hidden="true"></i>
<span>Download for Windows</span>
</a>
<a class="btn btn-outline-secondary btn-lg flex-fill disabled dashboard-kiosk-launcher-download" href="/downloads/kiosk/pulse-signage-kiosk.sh" data-kiosk-launcher-download aria-disabled="true" tabindex="-1">
<a class="btn btn-outline-secondary btn-lg flex-fill disabled dashboard-kiosk-launcher-download" data-kiosk-launcher-download data-kiosk-launcher-download-base="/downloads/kiosk/pulse-signage-kiosk.sh" aria-disabled="true" tabindex="-1">
<i class="bi bi-terminal me-2" aria-hidden="true"></i>
<span>Download for Linux</span>
</a>
@@ -178,8 +191,7 @@
<div class="card-header dashboard-screen-card-header">
<div class="dashboard-card-heading">
<h3 class="card-title">Screen group snapshot</h3>
<p class="dashboard-card-subtitle">Player URL, playlist assignment,
and live connection count without the spreadsheet feel.</p>
<p class="dashboard-card-subtitle">Playlist assignment and live connection state without the spreadsheet feel.</p>
</div>
<a class="btn btn-sm btn-primary" href="/screens">Manage screen groups</a>
</div>
@@ -191,11 +203,6 @@
<div class="dashboard-screen-tile-top">
<div class="dashboard-screen-tile-text">
<h4 class="dashboard-screen-name">{{name}}</h4>
{{#if player_url}}
<a class="dashboard-screen-link" href="{{player_url}}" target="_blank">{{player_url}}</a>
{{else}}
<span class="dashboard-screen-link empty">Not available</span>
{{/if}}
</div>
<span class="dashboard-screen-pill {{#if player_connection_count}}is-live{{else}}is-idle{{/if}}">
{{#if player_connection_count}}
@@ -210,10 +217,6 @@
<dt>Playlist</dt>
<dd>{{#if playlist_name}}{{playlist_name}}{{else}}Unassigned{{/if}}</dd>
</div>
<div>
<dt>Connections</dt>
<dd>{{#if player_connection_count}}{{player_connection_count}} connected{{else}}No clients connected{{/if}}</dd>
</div>
</dl>
</article>
{{/each}}
src/web/views/signage/screens/form.hbs
+31 -6
View File
@@ -6,7 +6,7 @@
</div>
<div class="row g-4">
<div class="col-12 col-xl-8">
<div class="col-12 col-xl-6">
<div class="card card-outline card-primary admin-form-card h-100">
<div class="card-header">
<h3 class="card-title">Screen group details</h3>
@@ -40,16 +40,41 @@
</div>
</div>
<div class="col-12 col-xl-4">
<div class="col-12 col-xl-6">
<div class="card card-outline card-secondary admin-form-card h-100">
<div class="card-header">
<h3 class="card-title">Player URL</h3>
<h3 class="card-title">Player URLs</h3>
</div>
<div class="card-body">
{{#if screen.player_url}}
<p class="mb-0"><a href="{{screen.player_url}}" target="_blank">{{screen.player_url}}</a></p>
{{#if screen.player_urls.length}}
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th>Player</th>
<th>URL</th>
</tr>
</thead>
<tbody>
{{#each screen.player_urls}}
<tr>
<td>
<div class="fw-semibold">{{identifier}}</div>
</td>
<td>
{{#if player_url}}
<a href="{{player_url}}" target="_blank" rel="noreferrer">{{player_url}}</a>
{{else}}
<span class="text-muted">Not available</span>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{else}}
<p class="mb-0 text-muted">No player URL is available yet.</p>
<p class="mb-0 text-muted">No player URLs are available yet.</p>
{{/if}}
</div>
</div>
src/web/views/signage/screens/list.hbs
+1 -9
View File
@@ -23,7 +23,6 @@
<thead>
<tr>
<th data-table-sort-key="name">Name</th>
<th data-table-sort-key="url">Player URL</th>
<th data-table-sort-key="playlist">Playlist</th>
<th data-table-sort-key="player_connection_count">Connected</th>
<th>Actions</th>
@@ -34,13 +33,6 @@
{{#each screens}}
<tr data-table-search-row>
<td data-label="Name">{{name}}</td>
<td data-label="Player URL">
{{#if player_url}}
<a href="{{player_url}}" target="_blank">{{player_url}}</a>
{{else}}
<span class="empty">Not available</span>
{{/if}}
</td>
<td data-label="Playlist">{{playlist_name}}</td>
<td data-label="Connected clients">
{{#if (gt player_connection_count 0)}}
@@ -72,7 +64,7 @@
</tr>
{{/each}}
{{else}}
<tr data-table-search-empty-default><td colspan="5" class="empty">No screen groups yet.</td></tr>
<tr data-table-search-empty-default><td colspan="4" class="empty">No screen groups yet.</td></tr>
{{/if}}
</tbody>
</table>
src/web/views/signage/slides/popup-preview.hbs
+10
View File
@@ -58,6 +58,12 @@
<div class="slide-preview-popup-canvas" id="popup-preview-canvas"></div>
</div>
{{#if popupPreviewPayloadJson}}
<script>
window.__pulsePopupPreviewPayload = {{{popupPreviewPayloadJson}}};
</script>
{{/if}}
<script>
(function () {
function startPreviewVideoPlayback(root) {
@@ -127,6 +133,10 @@
var canvas = document.getElementById('popup-preview-canvas');
function readPayload() {
if (window.__pulsePopupPreviewPayload) {
return window.__pulsePopupPreviewPayload;
}
var hash = String(window.location.hash || '').replace(/^#/, '');
if (!hash) {
return null;