Release v2.10.6

CHANGELOG.md

@@ -2,11 +2,62 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.10.6 - 2026-08-29
+
+### Changed
+
+- Refactored the player runtime into focused animation, media, transition, command, playback, and rendering modules.
+- Improved player slide transitions and video playback by preloading media, preserving precise durations, pausing outgoing videos during crossfades, and deferring expensive post-render setup.
+- Added resilient playlist recovery through cached browser and server snapshots, offline status reporting, and refresh handling that recovers after cached responses.
+
+### Fixed
+
+- Fixed remote player commands and media synchronization so they route through the bridge using the physical player device identity, including announcement and playlist refresh notifications.
+- Fixed player media handling for remote bridge uploads and deletes by using the bridge endpoint with explicit player-device authentication.
+- Fixed player service-worker caching so ranged media requests bypass stale cached responses and video playback remains reliable.
+
+## 2.10.5 - 2026-08-29
+
+### Fixed
+
+- Fixed intermittent pairing failures while player registration and pairing sessions propagate through the bridge by retrying transient resolution and completion requests.
+- Fixed the pairing page so transient submission failures retry automatically and pairing progress uses a single spinner without dimming the form.
+- Fixed the player onboarding page so it continues polling until the pairing code and QR code are available.
+
+## 2.10.4 - 2026-08-29
+
+### Fixed
+
+- Fixed remote client move commands so they route through the player bridge to the correct browser tab using the physical player identity and connection ID.
+- Removed the obsolete `PLAYER_BASE_URL` configuration fallback; command routing uses `PLAYER_INTERNAL_URL` locally or the player bridge remotely, while `PLAYER_PUBLIC_URL` remains available for kiosk launcher and direct player access.
+- Removed the player URL list from screen-group add/edit pages and expanded the remaining form card to full width.
+
+## 2.10.3 - 2026-08-28
+
+### Fixed
+
+- Fixed the weather edit preview so the daily forecast is shown initially, the 24-hour forecast is hidden until selected, and the redundant hourly heading is removed.
+- Fixed onboarding cleanup so incomplete pairings are retained for the 15-minute pairing-code lifetime while inactive completed bindings are pruned after 24 hours.
+- Fixed client-name handling so offline names can be reused, active collisions receive numeric suffixes, and reconnecting players resolve duplicate names consistently.
+- Fixed an internal server error when renaming clients by forwarding the available-name resolver to the client command routes.
+- Fixed remote client moves to resolve the paired browser client binding before changing its target screen.
+- Fixed remote player heartbeats to update the central onboarding bindings for active browser clients without treating the physical player registry ID as a client binding.
+- Fixed targeted commands after browser reconnects by falling back to the stable client ID when a transient connection ID is stale.
+- Fixed stale browser command connections remaining active indefinitely when the physical player heartbeat was still healthy.
+- Added periodic playlist polling so remote screens recover from missed refresh commands after bridge reconnects.
+- Added cached playlist snapshots so screens can continue displaying their last known playlist while the bridge or web service is temporarily unavailable.
+- Fixed media synchronization so generated player caches are excluded while remote image caches remain available to players.
+- Fixed weather screen notifications so changes in the fetched data or the current forecast hour trigger a refresh.
+- Fixed player runtime script loading and slide rendering so region modules, transitions, and cached playlists initialize consistently.
+- Fixed command delivery reporting to require acknowledgement from the receiving browser tab.
+- Fixed playlist refresh notifications to target the physical player hosting each screen instead of always targeting the local player.
+
 ## 2.10.2 - 2026-08-28
 
 ### Fixed
 
 - Fixed the weather forecast preview to show only its first-fetch message until a successful forecast is available.
+- Added persisted onboarding client heartbeats so records inactive for 24 hours can be pruned without relying on player connectivity after the fact.
 
 ## 2.10.1 - 2026-08-28
 

build/package.player.json

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

build/package.web.json

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

docker-compose/.env.example

@@ -1,9 +1,11 @@
-# Shared application settings
+# Container images
 PULSE_SIGNAGE_WEB_IMAGE="git.lzstealth.com/lzstealth/pulse-signage-web:latest"
 PULSE_SIGNAGE_PLAYER_IMAGE="git.lzstealth.com/lzstealth/pulse-signage-player:latest"
+
+# Shared security
 PULSE_SIGNAGE_SHARED_SECRET=""
 
-# Database settings for the web, player, and bridge services
+# Database
 DB_HOST="mysql"
 DB_PORT=3306
 DB_NAME="pulse-signage"
@@ -11,17 +13,19 @@ DB_USER="pulse-signage"
 DB_PASSWORD="signage_password"
 MYSQL_ROOT_PASSWORD="root_password"
 
-# Player settings
+# Web application
+WEB_PUBLIC_URL="http://localhost:8080"
+WEB_INTERNAL_URL="http://web:8080"
+
+# Player
 PLAYER_IDENTIFIER="player-local"
 PLAYER_PUBLIC_URL="http://localhost:8081"
 PLAYER_INTERNAL_URL="http://player:8081"
-WEB_PUBLIC_URL="http://localhost:8080"
 
-# Web app bootstrap settings
+# Player bridge
+BRIDGE_INTERNAL_URL="http://player-bridge:8090"
+
+# First-run administrator
 DEFAULT_ADMIN_USERNAME="admin"
 DEFAULT_ADMIN_NAME="Admin"
-DEFAULT_ADMIN_PASSWORD="password123!"
-
-# Bridge settings for the player-bridge service
-WEB_INTERNAL_URL="http://web:8080"
-BRIDGE_INTERNAL_URL="http://player-bridge:8090"
+DEFAULT_ADMIN_PASSWORD="password123!"

docker-compose/.env.remote.example

@@ -1,11 +1,16 @@
-# Shared application settings
+# Container image
 PULSE_SIGNAGE_PLAYER_IMAGE="git.lzstealth.com/lzstealth/pulse-signage-player:latest"
+
+# Shared security
 PULSE_SIGNAGE_SHARED_SECRET=""
 
-# Player settings
+# Remote player
 PLAYER_IDENTIFIER="player-remote"
-PLAYER_PUBLIC_URL="http://localhost:8081"
+
+# Optional URL used by the kiosk launcher when the remote player is directly reachable
+# PLAYER_PUBLIC_URL="http://remote-player.example.com:8081"
+
 PLAYER_AGENT_RECONNECT_DELAY_MS=5000
 
-# Remote player connectivity settings
+# Remote bridge connectivity
 BRIDGE_PUBLIC_URL="http://player-bridge.example.com:8090"

docker-compose/README.md

@@ -6,7 +6,7 @@ This folder contains the Docker Compose definitions for Pulse Signage, including
 
 - [docker-compose.yml](docker-compose.yml) - full public stack with web, player, player bridge, and MySQL.
 - [.env.example](.env.example) - sample environment values for the public stack.
-- [docker-compose.remote.yml](docker-compose.remote.yml) - remote player-only stack for machines that sit behind the player bridge.
+- [docker-compose.remote.yml](docker-compose.remote.yml) - remote player-only stack using a published player image.
 - [.env.remote.example](.env.remote.example) - sample environment values for the remote stack.
 
 ## Stack Overview
@@ -48,7 +48,6 @@ Key configuration:
 - `DEFAULT_ADMIN_USERNAME`
 - `DEFAULT_ADMIN_NAME`
 - `DEFAULT_ADMIN_PASSWORD`
-- `PASSWORD_HASH_ITERATIONS`
 
 ### `player`
 
@@ -57,15 +56,13 @@ The screen runtime that renders playlists and receives commands.
 Responsibilities:
 
 - serves the player UI on port `8081`
-- connects to MySQL in local mode
+- connects to MySQL in the public stack
 - connects to the bridge in remote mode through `BRIDGE_PUBLIC_URL`
 - registers live connections and accepts control commands
 
 Key configuration:
 
-- `PLAYER_PUBLIC_URL`
 - `PLAYER_INTERNAL_URL`
-- `BRIDGE_INTERNAL_URL`
 - `PLAYER_IDENTIFIER`
 - `BRIDGE_PUBLIC_URL` in remote mode
 - `PULSE_SIGNAGE_SHARED_SECRET`
@@ -115,15 +112,15 @@ Important values:
 - `PULSE_SIGNAGE_WEB_IMAGE` - image to run for the web app and bridge services, typically `.../pulse-signage-web:latest`
 - `PULSE_SIGNAGE_PLAYER_IMAGE` - image to run for the player services, typically `.../pulse-signage-player:latest`
 - `PULSE_SIGNAGE_SHARED_SECRET` - long random secret shared by the web, player, and bridge services for authenticated requests
-- `PLAYER_IDENTIFIER` - unique local player identifier
 - `DB_*` - MySQL credentials and database name for the stack
-- `PLAYER_PUBLIC_URL` - public URL the player advertises
+- `MYSQL_ROOT_PASSWORD` - root password for the local MySQL container
+- `WEB_PUBLIC_URL` - public URL of the web application
+- `WEB_INTERNAL_URL` - internal URL the bridge uses to call the web app directly
+- `PLAYER_IDENTIFIER` - unique local player identifier
+- `PLAYER_PUBLIC_URL` - URL used by the kiosk launcher and direct player access
 - `PLAYER_INTERNAL_URL` - internal URL the web app uses for local player calls
 - `BRIDGE_INTERNAL_URL` - bridge URL the web app uses for player snapshot and command forwarding
-- `WEB_INTERNAL_URL` - internal URL the bridge uses to call the web app directly
 - `DEFAULT_ADMIN_*` - bootstrap admin account values
-- `PASSWORD_HASH_ITERATIONS` - password hashing cost
-- `MYSQL_ROOT_PASSWORD` - root password for the local MySQL container
 
 ### `.env.remote.example`
 
@@ -134,7 +131,7 @@ Important values:
 - `PULSE_SIGNAGE_PLAYER_IMAGE` - image to run on the device, typically `.../pulse-signage-player:latest`
 - `PULSE_SIGNAGE_SHARED_SECRET` - must match the public stack and should be the same long random value used everywhere in the deployment
 - `PLAYER_IDENTIFIER` - unique remote player identifier
-- `PLAYER_PUBLIC_URL` - public URL for the remote player
+- `PLAYER_PUBLIC_URL` - optional URL used by the kiosk launcher when the remote player is directly reachable
 - `BRIDGE_PUBLIC_URL` - bridge URL the player connects back to
 - `PLAYER_AGENT_RECONNECT_DELAY_MS` - reconnect delay for the player agent
 
@@ -165,20 +162,20 @@ Leave it blank only if you intentionally want to run without request signing in
 | `DB_USER` | web, player, bridge, mysql | Database user. |
 | `DB_PASSWORD` | web, player, bridge, mysql | Database password. |
 | `MYSQL_ROOT_PASSWORD` | mysql | Root password for the local MySQL container. |
-| `DEFAULT_ADMIN_USERNAME` | web | Bootstrap admin username. |
-| `DEFAULT_ADMIN_NAME` | web | Bootstrap admin display name. |
-| `DEFAULT_ADMIN_PASSWORD` | web | Bootstrap admin password. |
-| `PASSWORD_HASH_ITERATIONS` | web | Password hashing cost. |
-| `PLAYER_INTERNAL_URL` | web, player | Internal player URL used by the dashboard and player runtime. |
-| `BRIDGE_INTERNAL_URL` | web | Bridge URL used by the web app for player snapshot and command forwarding. |
-| `WEB_INTERNAL_URL` | player-bridge | Internal web URL used by the bridge to call the dashboard app directly. |
-| `PLAYER_PUBLIC_URL` | player, remote player | Public URL advertised by the player. |
-| `BRIDGE_PUBLIC_URL` | player, remote player | URL of the bridge service. |
-| `PLAYER_IDENTIFIER` | player | Stable player identifier. |
-| `PLAYER_AGENT_RECONNECT_DELAY_MS` | remote player | Delay before reconnecting to the bridge. |
 | `MYSQL_DATABASE` | mysql | Database name used by the local MySQL container. |
 | `MYSQL_USER` | mysql | Database user used by the local MySQL container. |
 | `MYSQL_PASSWORD` | mysql | Database password used by the local MySQL container. |
+| `WEB_PUBLIC_URL` | web, player-bridge | Public URL of the web application. |
+| `WEB_INTERNAL_URL` | player-bridge | Internal web URL used by the bridge to call the dashboard app directly. |
+| `PLAYER_IDENTIFIER` | player | Stable player identifier. |
+| `PLAYER_PUBLIC_URL` | player, remote player | URL used by the kiosk launcher and direct player access; optional for bridge-only remote players. |
+| `PLAYER_INTERNAL_URL` | web, player | Internal player URL used by the dashboard and player runtime. |
+| `BRIDGE_INTERNAL_URL` | web | Bridge URL used by the web app for player snapshot and command forwarding. |
+| `DEFAULT_ADMIN_USERNAME` | web | Bootstrap admin username. |
+| `DEFAULT_ADMIN_NAME` | web | Bootstrap admin display name. |
+| `DEFAULT_ADMIN_PASSWORD` | web | Bootstrap admin password. |
+| `BRIDGE_PUBLIC_URL` | remote player | URL of the bridge service. |
+| `PLAYER_AGENT_RECONNECT_DELAY_MS` | remote player | Delay before reconnecting to the bridge. |
 
 ## Ports
 
@@ -209,7 +206,7 @@ Remote stack ports:
 Each compose file creates its own named network:
 
 - `pulse-signage` for the public stack
-- `pulse-signage-remote` for remote player deployment.
+- `pulse-signage-remote` for the remote player deployment.
 
 ## Notes
 
@@ -217,7 +214,7 @@ Each compose file creates its own named network:
 - A remote player must use the same `PULSE_SIGNAGE_SHARED_SECRET` as the bridge it connects to.
 - The bridge service is the dashboard-facing command path for connected remote players.
 - The remote player should point `BRIDGE_PUBLIC_URL` at the bridge, not at the public web endpoint.
-- The `PULSE_SIGNAGE_WEB_IMAGE` and `PULSE_SIGNAGE_PLAYER_IMAGE` tags default to the published `pulse-signage-web` and `pulse-signage-player` repositories with `latest` and `v1.2.3` style tags, but they can be overridden for local builds or custom releases.
+- The `PULSE_SIGNAGE_WEB_IMAGE` and `PULSE_SIGNAGE_PLAYER_IMAGE` tags default to the published `pulse-signage-web` and `pulse-signage-player` repositories with `latest` tags, but they can be overridden for custom releases.
 
 ## Recommended Setup
 

docker-compose/docker-compose.remote.yml

@@ -11,8 +11,8 @@ services:
       - "8081:8081"
     environment:
       PLAYER_IDENTIFIER: ${PLAYER_IDENTIFIER:-player-remote}
-      PLAYER_PUBLIC_URL: ${PLAYER_PUBLIC_URL:-http://localhost:8081}
-      BRIDGE_PUBLIC_URL: ${BRIDGE_PUBLIC_URL:-}
+      PLAYER_PUBLIC_URL: ${PLAYER_PUBLIC_URL:-}
+      BRIDGE_PUBLIC_URL: ${BRIDGE_PUBLIC_URL:?BRIDGE_PUBLIC_URL must be set to a routable bridge URL}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       PLAYER_AGENT_RECONNECT_DELAY_MS: ${PLAYER_AGENT_RECONNECT_DELAY_MS:-5000}
     volumes:

docs/schema.md

@@ -76,7 +76,8 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 
 ### `c_templates`
 
-- `id`, `name`, `canvas_size_id`, `background_image_path`, `background_color`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `canvas_size_id`, `background_image_path`, `background_color`, `background_gradient`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `background_gradient` stores normalized linear gradient settings as JSON text, including angle and colour stops.
 - Foreign key:
         - `canvas_size_id` -> `c_canvas_sizes.id` with `ON DELETE SET NULL`
 
@@ -170,7 +171,7 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 
 ### `i_rss_feeds`
 
-- `id`, `name`, `feed_url`, `update_interval_value`, `update_interval_unit`, `item_limit`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `feed_url`, `update_interval_value`, `update_interval_unit`, `item_limit`, `enabled`, `last_pulled_at`, `created_at`, `created_by`, `modified_at`, `modified_by`
 
 ### `i_rss_feed_items`
 
@@ -182,7 +183,12 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 
 ### `i_api_sources`
 
-- `id`, `name`, `api_url`, `auth_method`, `auth_username`, `auth_password`, `auth_bearer_token`, `auth_header_name`, `auth_header_value`, `items_path`, `update_interval_value`, `update_interval_unit`, `last_pulled_at`, `last_pull_error`, `last_response_status`, `last_response_content_type`, `last_response_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `api_url`, `auth_method`, `auth_username`, `auth_password`, `auth_bearer_token`, `auth_header_name`, `auth_header_value`, `items_path`, `update_interval_value`, `update_interval_unit`, `enabled`, `last_pulled_at`, `last_pull_error`, `last_response_status`, `last_response_content_type`, `last_response_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+
+### `i_weather_locations`
+
+- `id`, `name`, `location_label`, `latitude`, `longitude`, `timezone`, `provider`, `temperature_unit`, `wind_unit`, `precipitation_unit`, `update_interval_value`, `update_interval_unit`, `enabled`, `last_pulled_at`, `last_pull_error`, `last_response_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Stores configured weather locations and the most recent provider response used for forecast previews and weather regions.
 
 ### `i_timetable_groups`
 

package-lock.json

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

package.json

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

src/common.js

@@ -28,10 +28,13 @@ const data = require('#src/data');
 const player = require('#src/player/render');
 const listQuery = require('#src/web/lib/list-query');
 const { fetchPlaylistCanvasId } = require('#src/web/lib/helpers');
+const { findAvailableClientName } = require('#src/data/client-name-check');
 
 module.exports = {
   createPool: dbCommon.createPool,
   pruneStaleOnboardingDevices: dbCommon.pruneStaleOnboardingDevices,
+  touchOnboardingDeviceLastSeen: dbCommon.touchOnboardingDeviceLastSeen,
+  findAvailableClientName: findAvailableClientName,
   ensureSchema: db.ensureSchema,
   bootstrapDatabase: dbBootstrap.bootstrapDatabase,
   slugify: data.slugify,

src/data/announcement-icons.js

@@ -1,3 +1,5 @@
+// Load and expose the announcement icon catalog used by the editor and player.
+
 const fs = require('fs');
 const path = require('path');
 

src/data/app-settings.js

@@ -1,3 +1,5 @@
+// Application-wide settings defaults and persistence helpers.
+
 const { DEFAULT_ANNOUNCEMENT_ICON_KEYS } = require('./announcement-icons');
 
 const SETTING_DEFINITIONS = [
@@ -35,13 +37,13 @@ const SETTING_DEFINITIONS = [
   { key: 'announcements.suggested_icons', type: 'string_array', defaultValue: DEFAULT_ANNOUNCEMENT_ICON_KEYS.slice() },
   { key: 'player.default_slide_duration_seconds', type: 'integer', min: 1, defaultValue: 10 },
   { key: 'player.default_fade_between_slides', type: 'boolean', defaultValue: true },
-  { key: 'player.skip_unavailable_rtmp', type: 'boolean', defaultValue: true }
-  ,{ key: 'data-sources.rss_default_interval_value', type: 'integer', min: 1, defaultValue: 60 }
-  ,{ key: 'data-sources.rss_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
-  ,{ key: 'data-sources.api_default_interval_value', type: 'integer', min: 1, defaultValue: 60 }
-  ,{ key: 'data-sources.api_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
-  ,{ key: 'weather.open_meteo_api_key', type: 'string', defaultValue: '' }
-  ,{ key: 'weather.pirate_weather_api_key', type: 'string', defaultValue: '' }
+  { key: 'player.skip_unavailable_rtmp', type: 'boolean', defaultValue: true },
+  { key: 'data-sources.rss_default_interval_value', type: 'integer', min: 1, defaultValue: 60 },
+  { key: 'data-sources.rss_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' },
+  { key: 'data-sources.api_default_interval_value', type: 'integer', min: 1, defaultValue: 60 },
+  { key: 'data-sources.api_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' },
+  { key: 'weather.open_meteo_api_key', type: 'string', defaultValue: '' },
+  { key: 'weather.pirate_weather_api_key', type: 'string', defaultValue: '' }
 ];
 
 const DEFINITIONS_BY_KEY = new Map(SETTING_DEFINITIONS.map(function (definition) {

src/data/audit-log.js

@@ -1,3 +1,5 @@
+// Audit event definitions and data access helpers for administrative activity.
+
 const AUDIT_EVENT_CATEGORIES = Object.freeze({
   AUTHENTICATION: 'authentication',
   SECURITY: 'security',

src/data/client-name-check.js

@@ -23,6 +23,9 @@ async function isClientNameAvailable(pool, clientName, excludeDeviceId, liveConn
   const normalizedDeviceId = normalizeDeviceId(excludeDeviceId);
   const live = collectLiveConnections(liveConnections);
   const lowerName = normalizedName.toLowerCase();
+  const liveDeviceIds = new Set(live.map(function (connection) {
+    return normalizeDeviceId(connection && (connection.deviceId || connection.clientId));
+  }).filter(Boolean));
 
   try {
     if (pool) {
@@ -32,12 +35,13 @@ async function isClientNameAvailable(pool, clientName, excludeDeviceId, liveConn
          WHERE client_name IS NOT NULL
            AND TRIM(client_name) <> ''
            AND LOWER(TRIM(client_name)) = LOWER(TRIM(?))
-           AND device_id <> ?
-         LIMIT 1`,
+           AND device_id <> ?`,
         [normalizedName, normalizedDeviceId]
       );
 
-      if (deviceRows.length) {
+      if ((deviceRows || []).some(function (row) {
+        return liveDeviceIds.has(normalizeDeviceId(row && row.device_id));
+      })) {
         return false;
       }
     }
@@ -72,6 +76,22 @@ async function isClientNameAvailable(pool, clientName, excludeDeviceId, liveConn
   }
 }
 
+async function findAvailableClientName(pool, clientName, excludeDeviceId, liveConnections) {
+  const normalizedName = normalizeClientName(clientName);
+  if (!normalizedName) {
+    return '';
+  }
+
+  for (let suffix = 0; suffix < 1000; suffix += 1) {
+    const candidate = suffix === 0 ? normalizedName : `${normalizedName} (${suffix})`;
+    if (await isClientNameAvailable(pool, candidate, excludeDeviceId, liveConnections)) {
+      return candidate;
+    }
+  }
+
+  return '';
+}
+
 function buildClientNameLockName(clientName) {
   return `ps_client_name_${crypto.createHash('sha1').update(String(clientName || '').trim().toLowerCase()).digest('hex')}`;
 }
@@ -116,5 +136,6 @@ module.exports = {
   normalizeDeviceId: normalizeDeviceId,
   collectLiveConnections: collectLiveConnections,
   isClientNameAvailable: isClientNameAvailable,
+  findAvailableClientName: findAvailableClientName,
   withClientNameReservation: withClientNameReservation
 };

src/data/player-registry.js

@@ -1,3 +1,5 @@
+// Persistent player registration and heartbeat helpers shared by the web app and bridge.
+
 function normalizeDeviceId(value) {
   return String(value || '')
     .trim()

src/data/qr-code.js

@@ -1,3 +1,5 @@
+// QR code generation helpers for player onboarding and administrative links.
+
 const path = require('path');
 const QRCodeStyling = require(path.join(__dirname, '..', 'web', 'public', 'vendor', 'qr-code-styling', 'qr-code-styling.js'));
 const QR_PNG_WIDTH = 2048;

src/db/common.js

@@ -1,3 +1,5 @@
+// Database pool setup and lifecycle maintenance for persisted onboarding devices.
+
 const mysql = require('mysql2/promise');
 
 function createPool() {
@@ -15,14 +17,34 @@ function createPool() {
 }
 
 async function pruneStaleOnboardingDevices(pool) {
+  // Uncompleted pairings expire quickly; completed bindings use their persisted heartbeat instead.
   await pool.query(
     `DELETE FROM d_onboarding_devices
-     WHERE screen_id IS NULL
-       AND modified_at < (CURRENT_TIMESTAMP - INTERVAL 1 MINUTE)`
+     WHERE (screen_id IS NULL
+           AND modified_at < (CURRENT_TIMESTAMP - INTERVAL 15 MINUTE))
+        OR (last_seen_at IS NOT NULL
+            AND last_seen_at < (CURRENT_TIMESTAMP - INTERVAL 24 HOUR))`
+  );
+}
+
+async function touchOnboardingDeviceLastSeen(pool, deviceId) {
+  const deviceIds = (Array.isArray(deviceId) ? deviceId : [deviceId])
+    .map(function (value) { return String(value || '').trim(); })
+    .filter(Boolean);
+  if (!deviceIds.length) {
+    return;
+  }
+
+  await pool.query(
+    `UPDATE d_onboarding_devices
+        SET last_seen_at = CURRENT_TIMESTAMP
+      WHERE device_id IN (${deviceIds.map(function () { return '?'; }).join(', ')})`,
+    deviceIds
   );
 }
 
 module.exports = {
   createPool,
-  pruneStaleOnboardingDevices
+  pruneStaleOnboardingDevices,
+  touchOnboardingDeviceLastSeen
 };

src/db/index.js

@@ -1,3 +1,5 @@
+// Schema initialization, migration execution, and database bootstrap helpers.
+
 const { version: appVersion } = require('#root/package.json');
 const { compareVersions, detectSchemaVersion, getPendingMigrations, recordSchemaVersion, runMigrations } = require('./migrations');
 
@@ -331,6 +333,7 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
+      last_seen_at TIMESTAMP NULL,
       CONSTRAINT fk_player_onboarding_devices_screen FOREIGN KEY (screen_id) REFERENCES d_screens(id) ON DELETE SET NULL
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);

src/db/migrations.js

@@ -1,3 +1,5 @@
+// Ordered database migrations kept independent from the application version.
+
 const { version: appVersion } = require('#root/package.json');
 const TIMETABLE_TIME_ZONE = 'Europe/London';
 const APP_STATE_TABLE = 'o_app_state';
@@ -552,6 +554,13 @@ const VERSIONED_MIGRATIONS = [
     run: async function (pool) {
       await ensureColumn(pool, 'c_templates', 'background_gradient', 'LONGTEXT NULL', 'background_color');
     }
+  },
+  {
+    version: '2.10.2',
+    label: 'v2.10.2 onboarding client last-seen schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'd_onboarding_devices', 'last_seen_at', 'TIMESTAMP NULL', 'screen_id');
+    }
   }
 ];
 

src/player-bridge/index.js

@@ -1,3 +1,5 @@
+// Thin-client bridge for player registration, snapshots, commands, and heartbeats.
+
 const express = require('express');
 const crypto = require('crypto');
 const fs = require('fs');
@@ -8,7 +10,6 @@ const common = require('../common');
 const { verifyRequestAuth, createRequestAuthHeaders } = require('#src/request-auth');
 const { normalizeDeviceId, upsertPlayerRegistration, recordPlayerHeartbeat } = require('#src/data/player-registry');
 const { createPlayerPlaylistService } = require('../player/playlist');
-const { buildThumbnailPreviewData } = require('../player/thumbnail-preview');
 const { commitDeviceBinding, bindPlayerToScreen, getOnboardingStatus, getPlayerPublicBaseUrl } = require('../player/onboarding');
 const { createStyledQrCodeSvg } = require('../data/qr-code');
 const { verifyPageAuthToken } = require('#src/request-auth');
@@ -458,7 +459,21 @@ async function start() {
 
   function storeScreenSnapshot(slug, connections, deviceIds) {
     const key = String(slug || '').trim();
-    const normalizedConnections = Array.isArray(connections) ? connections : [];
+    const normalizedConnections = [];
+    const connectionIndexes = new Map();
+    (Array.isArray(connections) ? connections : []).forEach(function (connection) {
+      const identity = connection && typeof connection === 'object'
+        ? [String(connection.deviceId || '').trim(), String(connection.clientId || '').trim()].join('|')
+        : '';
+      if (!identity || !connectionIndexes.has(identity)) {
+        if (identity) {
+          connectionIndexes.set(identity, normalizedConnections.length);
+        }
+        normalizedConnections.push(connection);
+        return;
+      }
+      normalizedConnections[connectionIndexes.get(identity)] = connection;
+    });
     const normalizedDeviceIds = Array.isArray(deviceIds) ? deviceIds.map(function (value) {
       return normalizeDeviceId(value);
     }).filter(Boolean) : [];
@@ -654,6 +669,16 @@ async function start() {
         }, response && typeof response === 'object' ? response : {});
       }));
 
+      logBridge('Screen command result', {
+        screenSlug: slug,
+        command: command,
+        connectionId: connectionId || null,
+        targets: targetPlayers.map(function (target) { return target.deviceId; }),
+        results: results.map(function (result) {
+          return { playerIdentifier: result.playerIdentifier, ok: result.ok, status: result.status, error: result.error || null };
+        })
+      });
+
       res.json({
         ok: true,
         screenSlug: slug,
@@ -882,48 +907,6 @@ async function start() {
     }
   });
 
-  app.get('/api/internal/slide-thumbnails/:id/preview', requireRequestAuth, 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 data = buildThumbnailPreviewData(slide);
-
-      if (typeof common.fetchRssFeedsData === 'function' && typeof common.fetchRssFeedItemsByFeedId === 'function') {
-        const rssData = await common.fetchRssFeedsData(pool);
-        data.rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
-          const items = await common.fetchRssFeedItemsByFeedId(pool, feed.id);
-          return Object.assign({}, feed, {
-            items: items.map(function (item) {
-              return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
-            })
-          });
-        }));
-      }
-
-      if (typeof common.fetchApiSourcesData === 'function') {
-        const apiData = await common.fetchApiSourcesData(pool);
-        data.apiSources = (apiData.apiSources || []).map(function (source) {
-          return Object.assign({}, source, {
-            responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
-          });
-        });
-      }
-
-      if (typeof common.fetchTimetablesData === 'function') {
-        const timetableData = await common.fetchTimetablesData(pool);
-        data.timetableGroups = Array.isArray(timetableData && timetableData.timetableGroups) ? timetableData.timetableGroups : [];
-      }
-
-      res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
-      res.send(common.renderPlayerPage('slide-thumbnail-preview-' + slide.id, data));
-    } catch (error) {
-      next(error);
-    }
-  });
-
   app.post('/api/players/:deviceId/commands', requireRequestAuth, async function (req, res, next) {
     try {
       const deviceId = normalizeDeviceId(req.params.deviceId);
@@ -933,8 +916,11 @@ async function start() {
         return res.status(404).json({ ok: false, error: 'Player is not connected.' });
       }
 
-      socket.send(JSON.stringify(payload));
-      res.json({ ok: true, deviceId: deviceId, sent: true });
+      const response = await sendPlayerCommandToSocket(socket, payload);
+      res.status(response && response.ok ? 200 : (response && response.status || 502)).json(Object.assign({
+        deviceId: deviceId,
+        connectionId: payload.connectionId || null
+      }, response && typeof response === 'object' ? response : { ok: false }));
     } catch (error) {
       next(error);
     }
@@ -989,7 +975,19 @@ async function start() {
         return;
       }
 
-      setScreenSnapshotSource(slug, deviceId, Array.isArray(payload.connections) ? payload.connections : []);
+      const snapshotPlayerPublicBaseUrl = String(payload.playerPublicBaseUrl || socket.publicBaseUrl || '').trim().replace(/\/$/, '');
+      const connections = Array.isArray(payload.connections) ? payload.connections.map(function (connection) {
+        if (!connection || typeof connection !== 'object' || !snapshotPlayerPublicBaseUrl) {
+          return connection && typeof connection === 'object'
+            ? Object.assign({}, connection, { playerDeviceId: deviceId })
+            : connection;
+        }
+        return Object.assign({}, connection, {
+          playerDeviceId: deviceId,
+          playerPublicBaseUrl: snapshotPlayerPublicBaseUrl
+        });
+      }) : [];
+      setScreenSnapshotSource(slug, deviceId, connections);
       return;
     }
 
@@ -1021,6 +1019,12 @@ async function start() {
         publicBaseUrl: payload.publicBaseUrl,
         internalBaseUrl: payload.internalBaseUrl
       });
+      if (typeof common.touchOnboardingDeviceLastSeen === 'function') {
+        const onboardingClientIds = (Array.isArray(payload.connections) ? payload.connections : []).map(function (connection) {
+          return connection && connection.clientId;
+        });
+        await common.touchOnboardingDeviceLastSeen(pool, onboardingClientIds);
+      }
 
       socket.send(JSON.stringify({ type: 'heartbeat-ack', ok: true, player: player }));
       return;

src/player.js

@@ -1,3 +1,5 @@
+// Player application bootstrap, media routes, websocket runtime, and onboarding wiring.
+
 const express = require('express');
 const fs = require('fs');
 const http = require('http');
@@ -10,8 +12,10 @@ const { createRtmpStreamService } = require('./player/modules/rtmp-streams');
 const { normalizeDeviceId, registerPlayerOnboardingRoutes, commitDeviceBinding } = require('./player/onboarding');
 const { createOnboardingStore } = require('./player/onboarding/store');
 const { registerPlayerRoutes } = require('./player/routes');
+const { getPlayerRuntimeScripts } = require('./player/render-helpers');
 const { ensureFontLibrary } = require('#src/web/lib/media/font-library');
 const { createRequestAuthHeaders } = require('#src/request-auth');
+const { withClientNameReservation } = require('#src/data/client-name-check');
 const { getConfiguredPlayerIdentifier, recordPlayerHeartbeat } = require('#src/data/player-registry');
 
 
@@ -20,11 +24,11 @@ async function start() {
   const app = express();
   const pool = String(process.env.BRIDGE_PUBLIC_URL || '').trim().replace(/\/$/, '') ? null : common.createPool();
   const PORT = Number(process.env.PLAYER_PORT || 8081);
-  const PLAYER_PUBLIC_URL = String(process.env.PLAYER_PUBLIC_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
+  const PLAYER_PUBLIC_URL = String(process.env.PLAYER_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const BRIDGE_PUBLIC_URL = String(process.env.BRIDGE_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const WEB_INTERNAL_URL = String(process.env.WEB_INTERNAL_URL || '').trim().replace(/\/$/, '');
   const isRemotePlayer = Boolean(BRIDGE_PUBLIC_URL);
-  const PLAYER_INTERNAL_URL = String(isRemotePlayer ? BRIDGE_PUBLIC_URL : (process.env.PLAYER_INTERNAL_URL || PLAYER_PUBLIC_URL || process.env.PLAYER_BASE_URL || '')).trim().replace(/\/$/, '');
+  const PLAYER_INTERNAL_URL = String(isRemotePlayer ? BRIDGE_PUBLIC_URL : (process.env.PLAYER_INTERNAL_URL || '')).trim().replace(/\/$/, '');
   const PLAYER_DEVICE_ID = getConfiguredPlayerIdentifier();
   const PLAYER_AGENT_RECONNECT_DELAY_MS = Number(process.env.PLAYER_AGENT_RECONNECT_DELAY_MS || 5000);
   const ASSET_DIR = path.join(__dirname, 'player', 'public');
@@ -52,11 +56,28 @@ async function start() {
         thinClientSocket.send(JSON.stringify({
           type: 'snapshot',
           deviceId: PLAYER_DEVICE_ID,
+          playerPublicBaseUrl: getPlayerPublicBaseUrl(),
           slug: snapshot && snapshot.slug ? String(snapshot.slug).trim() : '',
           connections: Array.isArray(snapshot && snapshot.connections) ? snapshot.connections : []
         }));
       } catch (_error) {
       }
+    },
+    persistClientName: async function (deviceId, clientName) {
+      if (!pool || !deviceId || !clientName) {
+        return;
+      }
+      await withClientNameReservation(pool, clientName, async function () {
+        await pool.query(
+          `UPDATE d_onboarding_devices
+              SET client_name = ?, modified_at = CURRENT_TIMESTAMP
+            WHERE device_id = ?`,
+          [clientName, deviceId]
+        );
+      });
+    },
+    touchClientLastSeen: async function (deviceId) {
+      await common.touchOnboardingDeviceLastSeen(pool, deviceId);
     }
   });
   const playerPlaylistService = isRemotePlayer
@@ -320,6 +341,14 @@ async function start() {
       }
     }
   });
+  app.get('/assets/player-script/:name.js', function (req, res) {
+    const script = getPlayerRuntimeScripts().find(function (entry) { return entry[0] === req.params.name; });
+    if (!script) {
+      return res.sendStatus(404);
+    }
+    res.set('Cache-Control', 'no-cache');
+    return res.type('application/javascript').send(script[1]);
+  });
   registerPlayerRoutes(app, {
     pool: pool,
     common: common,
@@ -328,6 +357,7 @@ async function start() {
     playerRuntime: playerRuntime,
     playerPlaylistService: playerPlaylistService,
     rtmpStreamService: rtmpStreamService,
+    snapshotDir: path.join(MEDIA_DIR, 'player-cache', 'screen-playlists'),
     playerInternalBaseUrl: PLAYER_INTERNAL_URL,
     bridgeBaseUrl: BRIDGE_PUBLIC_URL,
     playerDeviceId: PLAYER_DEVICE_ID,
@@ -391,7 +421,8 @@ async function start() {
           internalBaseUrl: PLAYER_INTERNAL_URL,
           pairingCode: activePairingCode,
           pairingCodes: activePairingCodes,
-          pairingSessions: activePairingSessions
+          pairingSessions: activePairingSessions,
+          connections: playerRuntime.snapshotAllConnections()
         }));
       }
 
@@ -439,6 +470,7 @@ async function start() {
           socket.send(JSON.stringify({
             type: 'snapshot',
             deviceId: PLAYER_DEVICE_ID,
+            playerPublicBaseUrl: getPlayerPublicBaseUrl(),
             slug: String(slug || '').trim(),
             connections: playerRuntime.snapshotConnections(slug)
           }));
@@ -565,10 +597,6 @@ async function start() {
         console.error(error);
       });
 
-      if (playerRuntime.snapshotAllConnections().length > 0) {
-        await common.pruneStaleOnboardingDevices(pool);
-      }
-
       await onboardingStore.flushBindings(function (entry) {
         return commitDeviceBinding(
           pool,

src/player/onboarding/index.js

@@ -2,7 +2,7 @@
 
 const express = require('express');
 const crypto = require('crypto');
-const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
+const { findAvailableClientName, withClientNameReservation } = require('#src/data/client-name-check');
 const { createStyledQrCodeSvg } = require('#src/data/qr-code');
 const { getSharedSecret, verifyPageAuthToken, verifyRequestAuth, createRequestAuthHeaders } = require('#src/request-auth');
 const { resolvePlayerRegistration, upsertPlayerRegistration: upsertPlayerRegistrationRecord } = require('#src/data/player-registry');
@@ -48,7 +48,7 @@ function getPublicBaseUrl(req, configuredUrl) {
     return `${protocol}://${host}`.replace(/\/$/, '');
   }
 
-  const configured = String(configuredUrl || process.env.PLAYER_PUBLIC_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
+  const configured = String(configuredUrl || process.env.PLAYER_PUBLIC_URL || '').trim().replace(/\/$/, '');
   return configured || null;
 }
 
@@ -75,7 +75,7 @@ function getPlayerPublicBaseUrl(req, configuredUrl) {
 }
 
 function getPlayerInternalBaseUrl(configuredUrl) {
-  const configured = String(configuredUrl || process.env.PLAYER_INTERNAL_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
+  const configured = String(configuredUrl || process.env.PLAYER_INTERNAL_URL || '').trim().replace(/\/$/, '');
   return configured || null;
 }
 
@@ -144,8 +144,8 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
     }
     const screen = screenRows[0];
 
-    const available = await isClientNameAvailable(pool, normalizedClientName, null, liveConnections);
-    if (!available) {
+    const selectedClientName = await findAvailableClientName(pool, normalizedClientName, normalizedDeviceId, liveConnections);
+    if (!selectedClientName) {
       const error = new Error('Client name already exists.');
       error.statusCode = 400;
       throw error;
@@ -153,9 +153,9 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
 
     await pool.query(
       `UPDATE d_onboarding_devices
-          SET client_name = ?, screen_id = ?, modified_at = CURRENT_TIMESTAMP
+          SET client_name = ?, screen_id = ?, last_seen_at = CURRENT_TIMESTAMP, modified_at = CURRENT_TIMESTAMP
         WHERE device_id = ?`,
-      [normalizedClientName, screen.id, normalizedDeviceId]
+      [selectedClientName, screen.id, normalizedDeviceId]
     );
     await pool.query(
       `INSERT INTO d_onboarding_devices (device_id, client_name, screen_id)
@@ -163,7 +163,7 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
         WHERE NOT EXISTS (
           SELECT 1 FROM d_onboarding_devices WHERE device_id = ?
         )`,
-      [normalizedDeviceId, normalizedClientName, screen.id, normalizedDeviceId]
+      [normalizedDeviceId, selectedClientName, screen.id, normalizedDeviceId]
     );
 
     return getOnboardingStatus(pool, normalizedDeviceId);
@@ -238,7 +238,7 @@ function registerPlayerOnboardingRoutes(app, options) {
   const common = options && options.common ? options.common : null;
   const playerRuntime = options && options.playerRuntime ? options.playerRuntime : null;
   const onboardingStore = options && options.onboardingStore ? options.onboardingStore : null;
-  const playerPublicUrl = String(options && options.playerPublicBaseUrl || process.env.PLAYER_PUBLIC_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
+  const playerPublicUrl = String(options && options.playerPublicBaseUrl || process.env.PLAYER_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const bridgeBaseUrl = String(options && options.bridgeBaseUrl || process.env.BRIDGE_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const playerDeviceId = normalizeDeviceId(options && options.playerDeviceId);
   const onPairingCode = options && typeof options.onPairingCode === 'function' ? options.onPairingCode : null;
@@ -581,6 +581,7 @@ function registerPlayerOnboardingRoutes(app, options) {
         }
         if (response.ok) {
           pairingSessions.delete(deviceId);
+          res.cookie('pulse-player-client-id', clientId, { path: '/', sameSite: 'lax' });
         }
         payload.playerUrl = payload && payload.screenSlug ? `${getPublicBaseUrl(req, playerPublicUrl)}/screen/${encodeURIComponent(payload.screenSlug)}` : `${getPublicBaseUrl(req, playerPublicUrl)}/screen/${encodeURIComponent(screenSlug)}`;
         return res.json(payload);
@@ -600,6 +601,7 @@ function registerPlayerOnboardingRoutes(app, options) {
       }
       const status = await bindDeviceToScreen(pool, clientId, clientName, screenSlug, playerRuntime.isClientNameAvailableOnScreen, playerRuntime, onboardingStore);
       pairingSessions.delete(deviceId);
+      res.cookie('pulse-player-client-id', clientId, { path: '/', sameSite: 'lax' });
       res.json({
         deviceId: deviceId,
         clientName: status ? status.client_name : clientName,

src/player/onboarding/player-onboarding-landing.script.html

@@ -44,6 +44,22 @@
         })
         .catch(function () { return null; });
     }
+    function keepPairingSessionLoaded(deviceId, clientId) {
+      var pairingSessionPoll = null;
+      function poll() {
+        loadPairingSession(deviceId, clientId).then(function (payload) {
+          if (payload && payload.pairingCode) {
+            loadQr(deviceId, clientId);
+            if (pairingSessionPoll) {
+              window.clearInterval(pairingSessionPoll);
+              pairingSessionPoll = null;
+            }
+          }
+        });
+      }
+      poll();
+      pairingSessionPoll = window.setInterval(poll, 1000);
+    }
     function getClientId() {
       var stored = getSessionStorageItem("pulse-signage-player-client-id");
       if (stored) { return stored; }
@@ -60,7 +76,7 @@
             if (payload.clientName) { setSessionStorageItem(clientNameKey, payload.clientName); }
             if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
             try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
-            window.location.replace("/screen/" + encodeURIComponent(payload.screenSlug) + "?clientId=" + encodeURIComponent(clientId));
+            window.location.replace("/screen/" + encodeURIComponent(payload.screenSlug));
             return true;
           }
           return false;
@@ -74,9 +90,7 @@
       if (qr && !qr.getAttribute("src")) {
         qr.src = qrPlaceholderSrc;
       }
-      loadPairingSession(deviceId, clientId).then(function () {
-          loadQr(deviceId, clientId);
-      });
+        keepPairingSessionLoaded(deviceId, clientId);
       window.setInterval(function () { redirectIfOnboarded(deviceId); }, 2000);
     });
   }());

src/player/player-page.script.html

@@ -1,41 +1,11 @@
+<!-- Player page bootstrap and browser-side playback lifecycle. -->
+
 <script>
   const slug = {{SLUG_JSON}};
   let initialData = {{INITIAL_DATA_JSON}};
   window.slug = slug;
   window.initialData = initialData;
   const app = document.getElementById('app');
-  (function () {
-    var root = window;
-    var registry = root.pulsePlayerRegionTypes && typeof root.pulsePlayerRegionTypes === 'object' ? root.pulsePlayerRegionTypes : {};
-
-    function normalizeType(type) {
-      return String(type || '').trim().toLowerCase();
-    }
-
-    function register(type, definition) {
-      registry[normalizeType(type)] = definition || {};
-      return registry[normalizeType(type)];
-    }
-
-    function get(type) {
-      return registry[normalizeType(type)] || null;
-    }
-
-    function list() {
-      return Object.keys(registry).map(function (type) {
-        return {
-          type: type,
-          definition: registry[type] || {}
-        };
-      });
-    }
-
-    root.pulsePlayerRegionTypes = {
-      register: register,
-      get: get,
-      list: list
-    };
-  }());
   let slides = Array.isArray(initialData && initialData.slides) ? initialData.slides.map(normalizeSlide) : [];
   let currentPlaylistSignature = '';
   let currentPlaylistEtag = '';
@@ -61,6 +31,7 @@
   let viewportRenderTimer = null;
   let refreshRetryTimer = null;
   let refreshRetryDelayMs = 0;
+  let playlistRefreshTimer = null;
   let commandClientId = null;
   let screenWakeLock = null;
   let screenWakeLockRequestPromise = null;
@@ -71,7 +42,8 @@
   let isBlackout = false;
   let pausedRemainingMs = null;
   let slideExpiresAt = null;
-  const slideFadeDurationMs = 560;
+  const slideFadeLengthMs = 560;
+  const slideFadeOffsetMs = slideFadeLengthMs / 2;
   const commandSocketPath = '/ws/screens/' + encodeURIComponent(slug);
   const commandClientStorageKey = 'pulse-signage-player-client-id';
   const playlistSnapshotStorageKey = 'pulse-signage-player-playlist-snapshot:' + slug;
@@ -93,16 +65,23 @@
 
   function logDebug(message, details, level) {
     var logger = level === 'error' ? console.error : console.info;
+    var timestamp = new Date().toISOString();
+    var timestampedMessage = '[' + timestamp + '] ' + String(message || '');
     if (details) {
-      logger(message, details);
+      logger(timestampedMessage, details);
     } else {
-      logger(message);
+      logger(timestampedMessage);
     }
   }
 
   // Render the empty-state message into the player root.
   function renderEmpty(message) {
-    app.innerHTML = '<div class="empty">' + escapeHtml(message) + '</div>';
+    var markup = '<div class="empty">' + escapeHtml(message) + '</div>';
+    if (currentPlaylistFadeBetweenSlides && typeof renderSlideMarkup === 'function') {
+      renderSlideMarkup(markup, true);
+      return;
+    }
+    app.innerHTML = markup;
   }
 
   // Announce the player to the command websocket.
@@ -204,10 +183,19 @@
     showCurrent();
     refresh();
   } else {
+    if (initialPlaylistSnapshot && applyPlaylistSnapshot(initialPlaylistSnapshot)) {
+      currentPlaylistSkipUnavailableRtmp = Boolean(initialPlaylistSnapshot.skipUnavailableRtmp);
+      showCurrent();
+    }
     syncBlackoutState();
     refresh();
   }
   syncOfflineBanner();
   syncScreenWakeLock();
+  playlistRefreshTimer = window.setInterval(function () {
+    if (document.visibilityState !== 'hidden') {
+      refresh();
+    }
+  }, 60 * 1000);
   connectCommandSocket();
 </script>

src/player/public/css/player.css

@@ -22,21 +22,6 @@ body.onboarding-page #app {
   display: none;
 }
 
-body.thumbnail-preview *,
-body.thumbnail-preview *::before,
-body.thumbnail-preview *::after {
-  animation: none !important;
-  animation-delay: 0s !important;
-  animation-duration: 0s !important;
-  animation-iteration-count: 1 !important;
-  transition: none !important;
-}
-
-body.thumbnail-preview .player-announcement-layer,
-body.thumbnail-preview .player-offline-banner {
-  display: none !important;
-}
-
 #app {
   width: 100%;
   height: 100%;

src/player/public/js/player-page-animation.js

@@ -0,0 +1,253 @@
+// Region animation configuration and lifecycle helpers.
+
+function normalizePlayerAnimationConfig(value) {
+  var raw = value;
+  if (typeof raw === 'string') {
+    var text = String(raw || '').trim();
+    if (!text) {
+      raw = null;
+    } else {
+      try {
+        raw = JSON.parse(text);
+      } catch (_error) {
+        raw = null;
+      }
+    }
+  }
+
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    raw = {};
+  }
+
+  return {
+    intro: normalizePlayerAnimationStep(raw.intro, 'none'),
+    outro: normalizePlayerAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+    loop: normalizePlayerAnimationStep(raw.loop, 'none')
+  };
+}
+
+function normalizePlayerAnimationStep(value, fallbackPreset) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return {
+      preset: String(value.preset || fallbackPreset || 'none').trim(),
+      duration_ms: Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null,
+      delay_ms: Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null,
+      iterations: Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null
+    };
+  }
+
+  return {
+    preset: String(typeof value === 'string' ? value : fallbackPreset || 'none').trim(),
+    duration_ms: null,
+    delay_ms: null,
+    iterations: null
+  };
+}
+
+function getAnimationStepTimingMs(step) {
+  if (!step) {
+    return 0;
+  }
+
+  var preset = String(step.preset || 'none').trim();
+  if (!preset || preset === 'none') {
+    return 0;
+  }
+
+  var durationMs = Number(step.duration_ms);
+  if (!Number.isFinite(durationMs) || durationMs <= 0) {
+    durationMs = 1000;
+  }
+
+  var delayMs = Number(step.delay_ms);
+  if (!Number.isFinite(delayMs) || delayMs < 0) {
+    delayMs = 0;
+  }
+
+  var iterations = Number(step.iterations);
+  if (!Number.isFinite(iterations) || iterations < 1) {
+    iterations = 1;
+  }
+
+  return delayMs + (durationMs * iterations);
+}
+
+function getRegionAnimationPhaseTimings(root, phase) {
+  if (!root) {
+    return [];
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var timings = [];
+  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
+    if (!element) {
+      return;
+    }
+
+    var config;
+    try {
+      config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
+    } catch (_error) {
+      config = null;
+    }
+
+    if (!config) {
+      return;
+    }
+
+    var timingMs = getAnimationStepTimingMs(normalizedPhase === 'outro' ? config.outro : config.intro);
+    if (timingMs > 0) {
+      timings.push({
+        element: element,
+        timingMs: timingMs
+      });
+    }
+  });
+
+  return timings;
+}
+
+function getRegionAnimationPhaseTimingMs(root, phase) {
+  return getRegionAnimationPhaseTimings(root, phase).reduce(function (maxTimingMs, entry) {
+    return Math.max(maxTimingMs, Number(entry && entry.timingMs || 0));
+  }, 0);
+}
+
+function clearRegionAnimationClasses(root) {
+  if (!root) {
+    return;
+  }
+
+  var elements = [];
+  if (typeof root.matches === 'function' && root.matches('[data-animation-json]')) {
+    elements.push(root);
+  }
+  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
+    elements.push(element);
+  });
+
+  elements.forEach(function (element) {
+    if (!element) {
+      return;
+    }
+    element.classList.remove('animate__animated', 'animate__infinite');
+    element.classList.remove('animate__repeat-1', 'animate__repeat-2', 'animate__repeat-3');
+    Array.prototype.slice.call(element.classList || []).forEach(function (className) {
+      if (String(className || '').indexOf('animate__') === 0) {
+        element.classList.remove(className);
+      }
+    });
+    element.style.removeProperty('--animate-duration');
+    element.style.removeProperty('--animate-delay');
+    element.style.removeProperty('--animate-repeat');
+  });
+}
+
+function isAttentionSeekerAnimation(preset) {
+  return ['bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat'].indexOf(String(preset || '').trim()) !== -1;
+}
+
+function applyAnimationStep(element, step, phase) {
+  if (!element || !step) {
+    return;
+  }
+
+  var preset = String(step.preset || 'none').trim();
+  if (!preset || preset === 'none') {
+    return;
+  }
+
+  element.classList.add('animate__animated', 'animate__' + preset);
+  element.style.setProperty('--animate-duration', String(Math.max(1, Number(step.duration_ms || 0) || 1000)) + 'ms');
+  if (Number(step.delay_ms || 0) > 0) {
+    element.style.setProperty('--animate-delay', String(Math.max(0, Number(step.delay_ms || 0))) + 'ms');
+  } else {
+    element.style.removeProperty('--animate-delay');
+  }
+
+  if (phase === 'loop') {
+    var repeatCount = Number(step.iterations);
+    if (!Number.isFinite(repeatCount) || repeatCount < 1) {
+      repeatCount = 1;
+    }
+    if (repeatCount > 1) {
+      element.classList.add('animate__repeat-1');
+    }
+    element.style.setProperty('--animate-repeat', String(repeatCount));
+    return;
+  }
+
+  if (isAttentionSeekerAnimation(preset) && Number(step.iterations || 0) > 1) {
+    element.style.setProperty('--animate-repeat', String(Math.max(1, Number(step.iterations || 1))));
+  }
+}
+
+function playRegionAnimation(element, phase) {
+  if (!element) {
+    return;
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var config;
+  try {
+    config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
+  } catch (_error) {
+    config = null;
+  }
+
+  if (!config) {
+    return;
+  }
+
+  element.dataset.animationPhase = normalizedPhase;
+  clearRegionAnimationClasses(element);
+
+  if (normalizedPhase === 'outro') {
+    applyAnimationStep(element, config.outro, 'outro');
+    return;
+  }
+
+  if (config.intro && String(config.intro.preset || '').trim() && String(config.intro.preset || '').trim() !== 'none') {
+    applyAnimationStep(element, config.intro, 'intro');
+    if (config.loop && String(config.loop.preset || '').trim() && String(config.loop.preset || '').trim() !== 'none') {
+      element.addEventListener('animationend', function handleAnimationEnd(event) {
+        if (event.target !== element) {
+          return;
+        }
+        if (String(element.dataset.animationPhase || '').trim() !== 'intro') {
+          return;
+        }
+        element.removeEventListener('animationend', handleAnimationEnd);
+        clearRegionAnimationClasses(element);
+        applyAnimationStep(element, config.loop, 'loop');
+      });
+    }
+    return;
+  }
+
+  applyAnimationStep(element, config.loop, 'loop');
+}
+
+function playRegionAnimations(root, phase) {
+  if (!root) {
+    return;
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var elements = Array.prototype.slice.call(root.querySelectorAll('[data-animation-json]'));
+  elements.forEach(function (element) {
+    playRegionAnimation(element, normalizedPhase);
+  });
+}

src/player/public/js/player-page-commands.js

@@ -6,7 +6,7 @@ function getCurrentViewport() {
   };
 }
 
-var slideOutroTimers = [];
+var commandHeartbeatTimer = null;
 
 // Command websocket and player-state helpers.
 // Send the current playback state to the command websocket.
@@ -61,103 +61,6 @@ function scheduleViewportRenderUpdate() {
   }, 150);
 }
 
-// Cancel the current slide-advance timer.
-function clearSlideTimer() {
-  if (timer) {
-    window.clearTimeout(timer);
-    timer = null;
-  }
-  clearSlideOutroTimer();
-}
-
-// Cancel any pending outro triggers for the current slide.
-function clearSlideOutroTimer() {
-  if (!Array.isArray(slideOutroTimers) || !slideOutroTimers.length) {
-    slideOutroTimers = [];
-    return;
-  }
-
-  slideOutroTimers.forEach(function (timerId) {
-    window.clearTimeout(timerId);
-  });
-  slideOutroTimers = [];
-}
-
-// Return the rendered slide root that is currently on screen.
-function getCurrentSlideRoot() {
-  var shells = Array.prototype.slice.call(app ? app.querySelectorAll('.slide-shell') : []);
-  if (shells.length) {
-    return shells[shells.length - 1];
-  }
-  return app && app.firstElementChild ? app.firstElementChild : app;
-}
-
-// Schedule the outgoing slide animation for each region so it finishes before removal.
-function scheduleSlideOutro(holdDelayMs) {
-  clearSlideOutroTimer();
-
-  var currentRoot = getCurrentSlideRoot();
-  if (!currentRoot || typeof getRegionAnimationPhaseTimings !== 'function' || typeof playRegionAnimation !== 'function') {
-    return;
-  }
-
-  var regionTimings = getRegionAnimationPhaseTimings(currentRoot, 'outro');
-  if (!regionTimings.length) {
-    return;
-  }
-
-  var slideDurationMs = Math.max(1, Math.round(Number(holdDelayMs || 0)));
-  slideOutroTimers = regionTimings.map(function (entry) {
-    var timingMs = Math.max(0, Math.round(Number(entry && entry.timingMs || 0)));
-    var triggerDelayMs = Math.max(0, slideDurationMs - timingMs);
-    return window.setTimeout(function () {
-      if (!entry || !entry.element || !entry.element.isConnected) {
-        return;
-      }
-      playRegionAnimation(entry.element, 'outro');
-    }, triggerDelayMs);
-  });
-}
-
-// Schedule the next slide transition.
-function scheduleSlideAdvance(delayMs) {
-  clearSlideTimer();
-  var holdDelayMs = Math.max(1, Number(delayMs || 0));
-  slideExpiresAt = Date.now() + holdDelayMs;
-  scheduleSlideOutro(holdDelayMs);
-  timer = window.setTimeout(function () {
-    timer = null;
-    slideExpiresAt = null;
-    pausedRemainingMs = null;
-    clearSlideOutroTimer();
-    applyPendingPlaylistUpdate();
-    const activeSlides = getCurrentActiveSlides();
-    if (activeSlides.length < 2) {
-      showCurrent();
-      return;
-    }
-    if (index >= activeSlides.length) {
-      index = 0;
-    }
-    index = (index + 1) % activeSlides.length;
-    showCurrent();
-  }, holdDelayMs);
-}
-
-// Return the slide duration without shifting it for fade timing.
-function getSlideHoldDelay(delayMs) {
-  var holdDelayMs = Math.max(1, Number(delayMs || 0));
-  return holdDelayMs;
-}
-
-// Cancel any pending fade-transition cleanup.
-function clearSlideTransitionTimer() {
-  if (slideTransitionTimer) {
-    window.clearTimeout(slideTransitionTimer);
-    slideTransitionTimer = null;
-  }
-}
-
 function getPlayerRegionModules() {
   if (!window.pulsePlayerRegionTypes || typeof window.pulsePlayerRegionTypes.list !== 'function') {
     return [];
@@ -166,19 +69,11 @@ function getPlayerRegionModules() {
   return window.pulsePlayerRegionTypes.list();
 }
 
-function isThumbnailPreview() {
-  return Boolean(window.__pulseThumbnailPreview);
-}
-
 function runRegionLifecycle(root, lifecycleName) {
   if (!root) {
     return;
   }
 
-  if (isThumbnailPreview() && lifecycleName === 'initRegion') {
-    return;
-  }
-
   getPlayerRegionModules().forEach(function (entry) {
     var module = entry && entry.definition ? entry.definition : null;
     if (!module || typeof module[lifecycleName] !== 'function') {
@@ -202,65 +97,11 @@ function initializeRegionInstances(root) {
 }
 
 // Swap slide markup with optional fade animation.
-function renderSlideMarkup(markup, shouldFade) {
+function renderSlideMarkup(markup, shouldFade, mediaDelayMs) {
   clearSlideTransitionTimer();
   destroyRegionInstances(app);
-  if (typeof destroyRtmpRegions === 'function') {
-    destroyRtmpRegions(app);
-  }
-
-  function initializeRenderedVideoPlayback(root, delayMs) {
-    if (!root) {
-      return;
-    }
-
-    var startDelayMs = Math.max(0, Number(delayMs || 0));
-    var videos = root.querySelectorAll('.template-region.video video');
-    Array.prototype.forEach.call(videos, function (video) {
-      if (!video) {
-        return;
-      }
-
-      var playbackScheduled = false;
-
-      video.autoplay = true;
-      video.loop = true;
-  video.muted = !(video.dataset && video.dataset.disableAudio === '0');
-      video.playsInline = true;
-
-      function startPlayback() {
-        var playPromise = video.play && video.play();
-        if (playPromise && typeof playPromise.catch === 'function') {
-          playPromise.catch(function () {
-            return null;
-          });
-        }
-      }
-
-      function schedulePlaybackStart() {
-        if (playbackScheduled) {
-          return;
-        }
-        playbackScheduled = true;
-        if (startDelayMs > 0) {
-          window.setTimeout(startPlayback, startDelayMs);
-          return;
-        }
-        startPlayback();
-      }
-
-      if (video.readyState >= 2) {
-        schedulePlaybackStart();
-        return;
-      }
-
-      video.addEventListener('canplay', schedulePlaybackStart, { once: true });
-      video.addEventListener('loadedmetadata', function () {
-        if (video.readyState >= 2) {
-          schedulePlaybackStart();
-        }
-      }, { once: true });
-    });
+  if (typeof destroySlideMedia === 'function') {
+    destroySlideMedia(app);
   }
 
   function schedulePostRenderSetup(root, delayMs) {
@@ -272,16 +113,11 @@ function renderSlideMarkup(markup, shouldFade) {
       return;
     }
 
-    if (typeof syncRtmpRegions === 'function') {
-      syncRtmpRegions(root);
+    initializeRegionInstances(root);
+    if (typeof initializeSlideMedia === 'function') {
+      initializeSlideMedia(root, delayMs);
     }
 
-    if (!isThumbnailPreview()) {
-      initializeRegionInstances(root);
-    }
-
-    initializeRenderedVideoPlayback(root, delayMs);
-
     if (typeof playRegionAnimations === 'function') {
       playRegionAnimations(root, 'intro');
     }
@@ -307,52 +143,37 @@ function renderSlideMarkup(markup, shouldFade) {
     });
   }
 
-  function pauseRenderedVideoPlayback(root, delayMs) {
-    if (!root) {
-      return;
-    }
-
-    var pauseDelayMs = Math.max(0, Number(delayMs || 0));
-    var videos = root.querySelectorAll('.template-region.video video, .slide-media video');
-    Array.prototype.forEach.call(videos, function (video) {
-      if (!video || typeof video.pause !== 'function') {
-        return;
-      }
-
-      window.setTimeout(function () {
-        try {
-          video.pause();
-        } catch (_error) {
-          // Ignore pause errors from detached or unsupported media elements.
-        }
-      }, pauseDelayMs);
-    });
-  }
-
   var nextShell = document.createElement('div');
-  nextShell.className = 'slide-shell';
+  nextShell.className = 'slide-shell slide-shell-entering';
+  nextShell.style.zIndex = '0';
   nextShell.style.opacity = '0';
   nextShell.innerHTML = markup;
 
   if (!previousShell || (previousShell.classList && previousShell.classList.contains('empty'))) {
     app.innerHTML = '';
     nextShell.style.opacity = '1';
+    nextShell.classList.remove('slide-shell-entering');
+    nextShell.classList.add('is-visible');
     app.appendChild(nextShell);
-    schedulePostRenderSetup(nextShell, slideFadeDurationMs / 2);
+    schedulePostRenderSetup(nextShell, mediaDelayMs === undefined ? slideFadeOffsetMs : mediaDelayMs);
     return nextShell;
   }
 
   if (!previousShell.classList.contains('slide-shell')) {
     previousShell.classList.add('slide-shell');
   }
+  previousShell.classList.remove('is-visible');
+  previousShell.classList.add('is-exiting');
+  previousShell.style.zIndex = '1';
   previousShell.style.opacity = '1';
-  pauseRenderedVideoPlayback(previousShell, slideFadeDurationMs / 2);
 
   app.appendChild(nextShell);
   window.requestAnimationFrame(function () {
     nextShell.style.opacity = '1';
     previousShell.style.opacity = '0';
-    schedulePostRenderSetup(nextShell, slideFadeDurationMs / 2);
+    nextShell.classList.remove('slide-shell-entering');
+    nextShell.classList.add('is-visible');
+    schedulePostRenderSetup(nextShell, mediaDelayMs === undefined ? slideFadeOffsetMs : mediaDelayMs);
   });
 
   slideTransitionTimer = window.setTimeout(function () {
@@ -360,10 +181,13 @@ function renderSlideMarkup(markup, shouldFade) {
       previousShell.parentNode.removeChild(previousShell);
     }
     if (nextShell) {
+      nextShell.style.zIndex = '1';
       nextShell.style.opacity = '1';
+      nextShell.classList.remove('slide-shell-entering');
+      nextShell.classList.add('is-visible');
     }
     slideTransitionTimer = null;
-  }, slideFadeDurationMs);
+  }, slideFadeLengthMs);
 
   return nextShell;
 }
@@ -537,14 +361,28 @@ function handleCommandMessage(rawMessage) {
     handleClientIdConflict();
     return;
   }
+  if (payload && payload.type === 'client-name-updated') {
+    if (payload.clientName) {
+      applyOnboardingClientName(payload.clientName, commandSocket);
+    }
+    return;
+  }
 
   if (!payload || payload.type !== 'command') {
     return;
   }
 
+  if (payload.requestId && commandSocket && commandSocket.readyState === WebSocket.OPEN) {
+    commandSocket.send(JSON.stringify({
+      type: 'command-ack',
+      requestId: payload.requestId,
+      ok: true
+    }));
+  }
+
   switch (payload.command) {
     case 'refresh':
-      refresh();
+      refresh(true);
       return;
     case 'setclientname':
       if (payload.clientName) {
@@ -602,7 +440,6 @@ function handleCommandMessage(rawMessage) {
 function handleClientIdConflict() {
   var replacementClientId = regenerateCommandClientId();
   var onboardingUrl = new URL('/', window.location.origin);
-  onboardingUrl.searchParams.set('clientId', replacementClientId);
   window.location.replace(onboardingUrl.toString());
 }
 
@@ -629,6 +466,12 @@ function connectCommandSocket() {
   commandSocket = socket;
 
   socket.onopen = function () {
+    if (commandHeartbeatTimer) {
+      window.clearInterval(commandHeartbeatTimer);
+    }
+    commandHeartbeatTimer = window.setInterval(function () {
+      sendCommandState(lastRenderedSlide);
+    }, 60 * 1000);
     if (typeof syncOnboardingClientNameFromServer === 'function') {
       syncOnboardingClientNameFromServer(socket).then(function () {
         sendCommandState(socket);
@@ -643,6 +486,13 @@ function connectCommandSocket() {
   };
 
   socket.onclose = function (event) {
+    if (typeof logDebug === 'function') {
+      logDebug('Command websocket closed.', 'code=' + String(event && event.code || '') + ' reason=' + String(event && event.reason || ''), 'warn');
+    }
+    if (commandHeartbeatTimer) {
+      window.clearInterval(commandHeartbeatTimer);
+      commandHeartbeatTimer = null;
+    }
     commandSocket = null;
     if (event && event.code === 4009) {
       handleClientIdConflict();
@@ -651,7 +501,10 @@ function connectCommandSocket() {
     scheduleCommandReconnect();
   };
 
-  socket.onerror = function () {
+  socket.onerror = function (error) {
+    if (typeof logDebug === 'function') {
+      logDebug('Command websocket error.', error && error.message ? String(error.message) : 'Websocket transport error.', 'error');
+    }
     try {
       socket.close();
     } catch (_error) {

src/player/public/js/player-page-media.js

@@ -0,0 +1,94 @@
+// Slide media startup and teardown helpers.
+
+function initializeRenderedVideoPlayback(root, delayMs) {
+  if (!root) {
+    return;
+  }
+
+  var startDelayMs = Math.max(0, Number(delayMs || 0));
+  var videos = root.querySelectorAll('.template-region.video video');
+  Array.prototype.forEach.call(videos, function (video) {
+    if (!video) {
+      return;
+    }
+
+    var playbackScheduled = false;
+
+    video.autoplay = false;
+    video.loop = !(video.dataset && video.dataset.loop === '0');
+    video.muted = !(video.dataset && video.dataset.disableAudio === '0');
+    video.playsInline = true;
+
+    function startPlayback() {
+      var playPromise = video.play && video.play();
+      if (playPromise && typeof playPromise.catch === 'function') {
+        playPromise.catch(function () {
+          return null;
+        });
+      }
+    }
+
+    function schedulePlaybackStart() {
+      if (playbackScheduled) {
+        return;
+      }
+      playbackScheduled = true;
+      if (startDelayMs > 0) {
+        window.setTimeout(startPlayback, startDelayMs);
+        return;
+      }
+      startPlayback();
+    }
+
+    if (video.readyState >= 2) {
+      schedulePlaybackStart();
+      return;
+    }
+
+    video.addEventListener('canplay', schedulePlaybackStart, { once: true });
+    video.addEventListener('loadedmetadata', function () {
+      if (video.readyState >= 2) {
+        schedulePlaybackStart();
+      }
+    }, { once: true });
+  });
+}
+
+function pauseRenderedVideoPlayback(root, delayMs) {
+  if (!root) {
+    return;
+  }
+
+  var pauseDelayMs = Math.max(0, Number(delayMs || 0));
+  var videos = root.querySelectorAll('.template-region.video video, .slide-media video');
+  Array.prototype.forEach.call(videos, function (video) {
+    if (!video || typeof video.pause !== 'function') {
+      return;
+    }
+
+    window.setTimeout(function () {
+      try {
+        video.pause();
+      } catch (_error) {
+        return null;
+      }
+    }, pauseDelayMs);
+  });
+}
+
+function initializeSlideMedia(root, delayMs) {
+  if (!root || root.isConnected === false) {
+    return;
+  }
+
+  if (typeof syncRtmpRegions === 'function') {
+    syncRtmpRegions(root);
+  }
+  initializeRenderedVideoPlayback(root, delayMs);
+}
+
+function destroySlideMedia(root) {
+  if (typeof destroyRtmpRegions === 'function') {
+    destroyRtmpRegions(root);
+  }
+}

src/player/public/js/player-page-offline.js

@@ -1,8 +1,5 @@
 // Show or hide the offline status banner.
 function setOfflineBannerVisible(visible, message) {
-  if (window.__pulseThumbnailPreview) {
-    return;
-  }
   var normalizedVisible = Boolean(visible);
   var bannerMessage = String(message || 'Offline mode: using cached playlist.').trim();
   if (normalizedVisible) {
@@ -41,9 +38,6 @@ function setOfflineBannerVisible(visible, message) {
 
 // Update the offline banner based on connectivity or playlist availability.
 function syncOfflineBanner() {
-  if (window.__pulseThumbnailPreview) {
-    return;
-  }
   if (!window.navigator.onLine) {
     setOfflineBannerVisible(true, 'Offline mode: using cached playlist.');
     return;
@@ -63,9 +57,6 @@ function clearRefreshRetry() {
 
 // Retry playlist refresh with a short backoff while the player is offline.
 function scheduleRefreshRetry() {
-  if (window.__pulseThumbnailPreview) {
-    return;
-  }
   if (refreshRetryTimer) {
     return;
   }

src/player/public/js/player-page-playback.js

@@ -1,5 +1,5 @@
 // Render the slide at the requested index within the active set.
-async function renderSlideAtIndex(sourceSlides, targetIndex) {
+async function renderSlideAtIndex(sourceSlides, targetIndex, options) {
   const availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
   if (!availableSlides.length) {
     renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
@@ -53,18 +53,34 @@ async function renderSlideAtIndex(sourceSlides, targetIndex) {
 
   index = currentIndex;
   var markup = buildSlideMarkup(slide);
-  renderSlideMarkup(markup, currentPlaylistFadeBetweenSlides);
+  var shouldFade = !(options && options.skipFade) && currentPlaylistFadeBetweenSlides;
+  var mediaDelayMs = slide && slide.use_video_duration ? 0 : undefined;
+  renderSlideMarkup(markup, shouldFade, mediaDelayMs);
   if (typeof scheduleSlideMarkupPreload === 'function') {
     scheduleSlideMarkupPreload(availableSlides, currentIndex);
   }
   sendCommandState(slide);
   if (!isPaused) {
-    scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(slide.duration_seconds || 10)) * 1000));
+    scheduleSlideAdvance(getSlideAdvanceDelay(slide));
   }
   lastRenderedViewKey = getCurrentRenderKey(availableSlides);
   return true;
 }
 
+// Calculate the configured time from slide entry to the next transition.
+function getSlideAdvanceDelay(slide) {
+  var durationMs = Math.max(1, Number(slide && slide.duration_seconds || 10)) * 1000;
+  if (slide && slide.use_video_duration) {
+    return currentPlaylistFadeBetweenSlides
+      ? getSlideHoldDelay(Math.max(1, durationMs - slideFadeLengthMs))
+      : getSlideHoldDelay(durationMs);
+  }
+  if (currentPlaylistFadeBetweenSlides) {
+    return getSlideHoldDelay(Math.max(1, durationMs - slideFadeOffsetMs));
+  }
+  return getSlideHoldDelay(durationMs);
+}
+
 // Promote a deferred playlist update at the next safe point.
 function applyPendingPlaylistUpdate() {
   if (!pendingPlaylistUpdate) {
@@ -91,7 +107,7 @@ function applyPendingPlaylistUpdate() {
 }
 
 // Render the current active slide or the empty state.
-function showCurrent() {
+function showCurrent(options) {
   clearSlideTimer();
   const activeSlides = getCurrentActiveSlides();
   syncWebpagePreloads(activeSlides, index);
@@ -106,7 +122,7 @@ function showCurrent() {
     lastRenderedViewKey = getCurrentRenderKey(activeSlides);
     return;
   }
-  void renderSlideAtIndex(activeSlides, index);
+  void renderSlideAtIndex(activeSlides, index, options);
   lastRenderedViewKey = getCurrentRenderKey(activeSlides);
 }
 
@@ -148,7 +164,7 @@ function handleRtmpPlaybackFailure(message, options) {
 }
 
 // Fetch the latest playlist and queue any updates.
-function refresh() {
+function refresh(applyImmediately) {
   var request = new XMLHttpRequest();
   var url = window.location.origin + '/api/screens/' + encodeURIComponent(slug) + '/playlist?ts=' + Date.now();
   request.open('GET', url, true);
@@ -167,10 +183,16 @@ function refresh() {
       return;
     }
     if (request.status === 304) {
+      if (!initialData || !Array.isArray(initialData.apiSources) || !Array.isArray(initialData.weatherLocations)) {
+        currentPlaylistEtag = '';
+        refresh(applyImmediately);
+        return;
+      }
+      logDebug('Playlist refresh completed with no changes.');
       markRefreshHealthy();
       setOfflineBannerVisible(false);
       if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
+          scheduleSlideAdvance(getSlideAdvanceDelay(lastRenderedSlide));
       }
       return;
     }
@@ -192,10 +214,12 @@ function refresh() {
       const responseEtag = String(request.getResponseHeader('ETag') || '').trim();
       const data = JSON.parse(request.responseText || '{}');
       const nextSignature = getPlaylistRevision(data);
+      logDebug('Playlist refresh completed.', 'Revision: ' + nextSignature);
       const nextSlides = Array.isArray(data.slides) ? data.slides.map(normalizeSlide) : [];
       const nextActiveSlides = getActiveSlidesFrom(nextSlides);
       const nextFadeBetweenSlides = Boolean(data && data.playlist && data.playlist.fade_between_slides);
       const nextSkipUnavailableRtmp = Boolean(data && data.playlist && data.playlist.skip_unavailable_rtmp);
+      const hadSourceData = !(typeof window !== 'undefined' && window.initialData === null);
       var refreshedInitialData = Object.assign({},
         typeof initialData !== 'undefined' && initialData ? initialData : (window.initialData || {}), {
         screen: data.screen || null,
@@ -211,6 +235,11 @@ function refresh() {
         initialData = refreshedInitialData;
       }
       window.initialData = refreshedInitialData;
+      if (!hadSourceData) {
+        slideMarkupCache = Object.create(null);
+        templateLayoutCache = Object.create(null);
+        templateRenderPlanCache = Object.create(null);
+      }
       savePlaylistSnapshot({
         slides: nextSlides,
         signature: nextSignature,
@@ -235,8 +264,12 @@ function refresh() {
         return;
       }
       if (nextSignature === currentPlaylistSignature || (pendingPlaylistUpdate && nextSignature === pendingPlaylistUpdate.signature)) {
+        if (!hadSourceData) {
+          showCurrent({ skipFade: true });
+          return;
+        }
         if (currentActiveSlides.length < 2 && lastRenderedSlide) {
-          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
+            scheduleSlideAdvance(getSlideAdvanceDelay(lastRenderedSlide));
         }
         return;
       }
@@ -254,6 +287,11 @@ function refresh() {
           fadeBetweenSlides: nextFadeBetweenSlides,
           skipUnavailableRtmp: nextSkipUnavailableRtmp
         };
+        if (applyImmediately) {
+          applyPendingPlaylistUpdate();
+          showCurrent();
+          return;
+        }
         if (!isSlideInList(lastRenderedSlide, nextSlides)) {
           applyPendingPlaylistUpdate();
           showCurrent();
@@ -268,6 +306,11 @@ function refresh() {
         fadeBetweenSlides: nextFadeBetweenSlides,
         skipUnavailableRtmp: nextSkipUnavailableRtmp
       };
+      if (applyImmediately) {
+        applyPendingPlaylistUpdate();
+        showCurrent();
+        return;
+      }
       logDebug('Playlist update detected; applying on next slide transition.');
     } catch (_error) {
       logDebug(
@@ -288,7 +331,7 @@ function refresh() {
       setOfflineBannerVisible(true);
       scheduleRefreshRetry();
     if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
+        scheduleSlideAdvance(getSlideAdvanceDelay(lastRenderedSlide));
     }
   };
   request.ontimeout = function () {
@@ -300,7 +343,7 @@ function refresh() {
     setOfflineBannerVisible(true);
     scheduleRefreshRetry();
     if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
+        scheduleSlideAdvance(getSlideAdvanceDelay(lastRenderedSlide));
     }
   };
   request.send();

src/player/public/js/player-page-playlist.js

@@ -129,10 +129,6 @@ function getSlideMarkupPreloadSlides(sourceSlides, targetIndex) {
 }
 
 function scheduleSlideMarkupPreload(sourceSlides, targetIndex) {
-  if (window.__pulseThumbnailPreview) {
-    return;
-  }
-
   const preloadSlides = getSlideMarkupPreloadSlides(sourceSlides, targetIndex);
   if (!preloadSlides.length || typeof primeSlideMarkup !== 'function') {
     return;
@@ -236,6 +232,7 @@ function loadPlaylistSnapshot() {
       slides: parsed.slides.map(normalizeSlide),
       signature: String(parsed.signature || ''),
       fadeBetweenSlides: Boolean(parsed.fadeBetweenSlides),
+      skipUnavailableRtmp: Boolean(parsed.skipUnavailableRtmp),
       etag: String(parsed.etag || '')
     };
   } catch (_error) {

src/player/public/js/player-page-rendering.js

@@ -12,12 +12,10 @@ function normalizeStyleAttributeValue(value) {
     .replace(/'/g, "'");
 }
 
-// Clamp font size to the supported range.
 function sanitizeFontSize(value) {
   return Math.max(8, Number(value || 0) || 24);
 }
 
-// Validate a text color and fall back when needed.
 function sanitizeTextColor(value, fallback) {
   var raw = String(value || '').trim();
   if (/^#[0-9a-fA-F]{6}$/.test(raw) || /^#[0-9a-fA-F]{3}$/.test(raw)) {
@@ -26,7 +24,6 @@ function sanitizeTextColor(value, fallback) {
   return fallback || '#000000';
 }
 
-// Read the template's canvas dimensions with safe defaults.
 function getTemplateCanvasSize(template) {
   return {
     width: Math.max(1, Number(template.canvas_size_width || 1920)),
@@ -34,7 +31,6 @@ function getTemplateCanvasSize(template) {
   };
 }
 
-// Read the server-supplied playlist revision, or fall back to the ETag.
 function getPlaylistRevision(data) {
   if (data && data.revision) {
     return String(data.revision);
@@ -48,7 +44,6 @@ function getPlaylistRevision(data) {
   return String(Date.now());
 }
 
-// Scale a canvas to fit within the viewport.
 function fitCanvasSize(canvasWidth, canvasHeight, maxWidth, maxHeight) {
   var width = Math.max(1, Number(canvasWidth || 0) || 1920);
   var height = Math.max(1, Number(canvasHeight || 0) || 1080);
@@ -61,53 +56,10 @@ function fitCanvasSize(canvasWidth, canvasHeight, maxWidth, maxHeight) {
   };
 }
 
-function normalizePlayerAnimationStep(value, fallbackPreset) {
-  if (value && typeof value === 'object' && !Array.isArray(value)) {
-    return {
-      preset: String(value.preset || fallbackPreset || 'none').trim(),
-      duration_ms: Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null,
-      delay_ms: Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null,
-      iterations: Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null
-    };
-  }
-
-  return {
-    preset: String(typeof value === 'string' ? value : fallbackPreset || 'none').trim(),
-    duration_ms: null,
-    delay_ms: null,
-    iterations: null
-  };
-}
-
-function normalizePlayerAnimationConfig(value) {
-  var raw = value;
-  if (typeof raw === 'string') {
-    var text = String(raw || '').trim();
-    if (!text) {
-      raw = null;
-    } else {
-      try {
-        raw = JSON.parse(text);
-      } catch (_error) {
-        raw = null;
-      }
-    }
-  }
-
-  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
-    raw = {};
-  }
-
-  return {
-    intro: normalizePlayerAnimationStep(raw.intro, 'none'),
-    outro: normalizePlayerAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
-    loop: normalizePlayerAnimationStep(raw.loop, 'none')
-  };
-}
-
 function hasPlayerAnimation(config) {
   return Boolean(config && ['intro', 'outro', 'loop'].some(function (stepName) {
-    return String((config[stepName] && config[stepName].preset) || '').trim() && String((config[stepName] && config[stepName].preset) || '').trim() !== 'none';
+    var preset = String((config[stepName] && config[stepName].preset) || '').trim();
+    return preset && preset !== 'none';
   }));
 }
 
@@ -122,215 +74,6 @@ function decorateRegionMarkup(markup, region) {
   });
 }
 
-function clearRegionAnimationClasses(root) {
-  if (!root) {
-    return;
-  }
-
-  var elements = [];
-  if (typeof root.matches === 'function' && root.matches('[data-animation-json]')) {
-    elements.push(root);
-  }
-  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
-    elements.push(element);
-  });
-
-  elements.forEach(function (element) {
-    if (!element) {
-      return;
-    }
-    element.classList.remove('animate__animated', 'animate__infinite');
-    element.classList.remove('animate__repeat-1', 'animate__repeat-2', 'animate__repeat-3');
-    Array.prototype.slice.call(element.classList || []).forEach(function (className) {
-      if (String(className || '').indexOf('animate__') === 0) {
-        element.classList.remove(className);
-      }
-    });
-    element.style.removeProperty('--animate-duration');
-    element.style.removeProperty('--animate-delay');
-    element.style.removeProperty('--animate-repeat');
-  });
-}
-
-function isAttentionSeekerAnimation(preset) {
-  return ['bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat'].indexOf(String(preset || '').trim()) !== -1;
-}
-
-function applyAnimationStep(element, step, phase) {
-  if (!element || !step) {
-    return;
-  }
-
-  var preset = String(step.preset || 'none').trim();
-  if (!preset || preset === 'none') {
-    return;
-  }
-
-  element.classList.add('animate__animated', 'animate__' + preset);
-  element.style.setProperty('--animate-duration', String(Math.max(1, Number(step.duration_ms || 0) || 1000)) + 'ms');
-  if (Number(step.delay_ms || 0) > 0) {
-    element.style.setProperty('--animate-delay', String(Math.max(0, Number(step.delay_ms || 0))) + 'ms');
-  } else {
-    element.style.removeProperty('--animate-delay');
-  }
-
-  if (phase === 'loop') {
-    var repeatCount = Number(step.iterations);
-    if (!Number.isFinite(repeatCount) || repeatCount < 1) {
-      repeatCount = 1;
-    }
-    if (repeatCount > 1) {
-      element.classList.add('animate__repeat-1');
-    }
-    element.style.setProperty('--animate-repeat', String(repeatCount));
-    return;
-  }
-
-  if (isAttentionSeekerAnimation(preset) && Number(step.iterations || 0) > 1) {
-    element.style.setProperty('--animate-repeat', String(Math.max(1, Number(step.iterations || 1))));
-  }
-}
-
-function getAnimationStepTimingMs(step) {
-  if (!step) {
-    return 0;
-  }
-
-  var preset = String(step.preset || 'none').trim();
-  if (!preset || preset === 'none') {
-    return 0;
-  }
-
-  var durationMs = Number(step.duration_ms);
-  if (!Number.isFinite(durationMs) || durationMs <= 0) {
-    durationMs = 1000;
-  }
-
-  var delayMs = Number(step.delay_ms);
-  if (!Number.isFinite(delayMs) || delayMs < 0) {
-    delayMs = 0;
-  }
-
-  var iterations = Number(step.iterations);
-  if (!Number.isFinite(iterations) || iterations < 1) {
-    iterations = 1;
-  }
-
-  return delayMs + (durationMs * iterations);
-}
-
-function getRegionAnimationPhaseTimingMs(root, phase) {
-  var timings = getRegionAnimationPhaseTimings(root, phase);
-  return timings.reduce(function (maxTimingMs, entry) {
-    return Math.max(maxTimingMs, Number(entry && entry.timingMs || 0));
-  }, 0);
-}
-
-function getRegionAnimationPhaseTimings(root, phase) {
-  if (!root || isThumbnailPreview()) {
-    return [];
-  }
-
-  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
-  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
-    normalizedPhase = 'intro';
-  }
-
-  var timings = [];
-  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
-    if (!element) {
-      return;
-    }
-
-    var config;
-    try {
-      config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
-    } catch (_error) {
-      config = null;
-    }
-
-    if (!config) {
-      return;
-    }
-
-    var timingMs = getAnimationStepTimingMs(normalizedPhase === 'outro' ? config.outro : config.intro);
-    if (timingMs > 0) {
-      timings.push({
-        element: element,
-        timingMs: timingMs
-      });
-    }
-  });
-
-  return timings;
-}
-
-function playRegionAnimation(element, phase) {
-  if (!element || isThumbnailPreview()) {
-    return;
-  }
-
-  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
-  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
-    normalizedPhase = 'intro';
-  }
-
-  var config;
-  try {
-    config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
-  } catch (_error) {
-    config = null;
-  }
-
-  if (!config) {
-    return;
-  }
-
-  element.dataset.animationPhase = normalizedPhase;
-  clearRegionAnimationClasses(element);
-
-  if (normalizedPhase === 'outro') {
-    applyAnimationStep(element, config.outro, 'outro');
-    return;
-  }
-
-  if (config.intro && String(config.intro.preset || '').trim() && String(config.intro.preset || '').trim() !== 'none') {
-    applyAnimationStep(element, config.intro, 'intro');
-    if (config.loop && String(config.loop.preset || '').trim() && String(config.loop.preset || '').trim() !== 'none') {
-      element.addEventListener('animationend', function handleAnimationEnd(event) {
-        if (event.target !== element) {
-          return;
-        }
-        if (String(element.dataset.animationPhase || '').trim() !== 'intro') {
-          return;
-        }
-        element.removeEventListener('animationend', handleAnimationEnd);
-        clearRegionAnimationClasses(element);
-        applyAnimationStep(element, config.loop, 'loop');
-      });
-    }
-    return;
-  }
-
-  applyAnimationStep(element, config.loop, 'loop');
-}
-
-function playRegionAnimations(root, phase) {
-  if (!root || isThumbnailPreview()) {
-    return;
-  }
-
-  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
-  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
-    normalizedPhase = 'intro';
-  }
-
-  var elements = Array.prototype.slice.call(root.querySelectorAll('[data-animation-json]'));
-  elements.forEach(function (element) {
-    playRegionAnimation(element, normalizedPhase);
-  });
-}
-
 function setPlayerCanvasDimensions(canvasWidth, canvasHeight) {
   if (!document || !document.documentElement) {
     return;
@@ -600,6 +343,13 @@ function normalizeSlide(slide) {
   Object.keys(content).forEach(function (regionKey) {
     normalized.content[regionKey] = normalizeContentValue(content[regionKey]);
   });
+  if (normalized.use_video_duration && normalized.template && Array.isArray(normalized.template.regions)) {
+    normalized.template.regions.forEach(function (region) {
+      if (region && region.region_type === 'video' && normalized.content[region.region_key]) {
+        normalized.content[region.region_key].loop = false;
+      }
+    });
+  }
   return normalized;
 }
 
@@ -797,7 +547,7 @@ function buildBackdropStyle(backgroundColor, backgroundImagePath, backgroundGrad
   var gradient = '';
   try {
     var gradientData = typeof backgroundGradient === 'string' ? JSON.parse(backgroundGradient) : backgroundGradient;
-    if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+    if (gradientData && gradientData.type === 'linear' && ((Array.isArray(gradientData.stops) && gradientData.stops.length >= 2) || (Array.isArray(gradientData.colors) && gradientData.colors.length >= 2))) {
       var stops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
       stops = stops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
       if (stops.length >= 2) {
@@ -975,7 +725,7 @@ function notifyVideoRegionSourceReady() {
   }
   slideMarkupCache = Object.create(null);
   if (typeof showCurrent === 'function' && slides && slides.length) {
-    showCurrent();
+    showCurrent({ skipFade: true });
   }
 }
 

src/player/public/js/player-page-transition.js

@@ -0,0 +1,104 @@
+// Slide transition timing, cancellation, and outgoing animation coordination.
+
+var slideOutroTimers = [];
+
+// Cancel the current slide-advance timer.
+function clearSlideTimer() {
+  if (timer) {
+    window.clearTimeout(timer);
+    timer = null;
+  }
+  clearSlideOutroTimer();
+}
+
+// Cancel any pending outro triggers for the current slide.
+function clearSlideOutroTimer() {
+  if (!Array.isArray(slideOutroTimers) || !slideOutroTimers.length) {
+    slideOutroTimers = [];
+    return;
+  }
+
+  slideOutroTimers.forEach(function (timerId) {
+    window.clearTimeout(timerId);
+  });
+  slideOutroTimers = [];
+}
+
+// Return the rendered slide root that is currently on screen.
+function getCurrentSlideRoot() {
+  var shells = Array.prototype.slice.call(app ? app.querySelectorAll('.slide-shell') : []);
+  if (shells.length) {
+    return shells[shells.length - 1];
+  }
+  return app && app.firstElementChild ? app.firstElementChild : app;
+}
+
+// Schedule the outgoing slide animation for each region so it finishes before removal.
+function scheduleSlideOutro(holdDelayMs) {
+  clearSlideOutroTimer();
+
+  var currentRoot = getCurrentSlideRoot();
+  if (!currentRoot || typeof getRegionAnimationPhaseTimings !== 'function' || typeof playRegionAnimation !== 'function') {
+    return;
+  }
+
+  var regionTimings = getRegionAnimationPhaseTimings(currentRoot, 'outro');
+  if (!regionTimings.length) {
+    return;
+  }
+
+  var slideDurationMs = Math.max(1, Math.round(Number(holdDelayMs || 0)));
+  slideOutroTimers = regionTimings.map(function (entry) {
+    var timingMs = Math.max(0, Math.round(Number(entry && entry.timingMs || 0)));
+    var triggerDelayMs = Math.max(0, slideDurationMs - timingMs);
+    return window.setTimeout(function () {
+      if (!entry || !entry.element || !entry.element.isConnected) {
+        return;
+      }
+      playRegionAnimation(entry.element, 'outro');
+    }, triggerDelayMs);
+  });
+}
+
+// Schedule the next slide transition.
+function scheduleSlideAdvance(delayMs) {
+  clearSlideTimer();
+  var holdDelayMs = Math.max(1, Number(delayMs || 0));
+  slideExpiresAt = Date.now() + holdDelayMs;
+  scheduleSlideOutro(holdDelayMs);
+  timer = window.setTimeout(function () {
+    timer = null;
+    slideExpiresAt = null;
+    pausedRemainingMs = null;
+    clearSlideOutroTimer();
+    applyPendingPlaylistUpdate();
+    const activeSlides = getCurrentActiveSlides();
+    if (activeSlides.length < 2) {
+      showCurrent();
+      return;
+    }
+    if (index >= activeSlides.length) {
+      index = 0;
+    }
+    index = (index + 1) % activeSlides.length;
+    showCurrent();
+  }, holdDelayMs);
+}
+
+// Return the configured slide duration without shifting it for fade timing.
+function getSlideHoldDelay(delayMs) {
+  return Math.max(1, Number(delayMs || 0));
+}
+
+// Calculate the configured time from slide entry to the next transition.
+function getSlideAdvanceDelay(slide) {
+  return getSlideHoldDelay(Math.max(1, Number(slide && slide.duration_seconds || 10)) * 1000);
+}
+
+// Cancel any pending fade-transition cleanup.
+function clearSlideTransitionTimer() {
+  if (slideTransitionTimer) {
+    window.clearTimeout(slideTransitionTimer);
+    slideTransitionTimer = null;
+  }
+}

src/player/public/js/player-region-registry.js

@@ -0,0 +1,34 @@
+// Registry used by the player runtime to discover independently loaded region modules.
+
+(function () {
+  var root = window;
+  var registry = root.pulsePlayerRegionTypes && typeof root.pulsePlayerRegionTypes === 'object' ? root.pulsePlayerRegionTypes : {};
+
+  function normalizeType(type) {
+    return String(type || '').trim().toLowerCase();
+  }
+
+  function register(type, definition) {
+    registry[normalizeType(type)] = definition || {};
+    return registry[normalizeType(type)];
+  }
+
+  function get(type) {
+    return registry[normalizeType(type)] || null;
+  }
+
+  function list() {
+    return Object.keys(registry).map(function (type) {
+      return {
+        type: type,
+        definition: registry[type] || {}
+      };
+    });
+  }
+
+  root.pulsePlayerRegionTypes = {
+    register: register,
+    get: get,
+    list: list
+  };
+}());

src/player/public/sw.js

@@ -1,6 +1,6 @@
 // Service worker cache strategy for player pages, assets, media, and playlists.
 
-const CACHE_VERSION = 'v38';
+const CACHE_VERSION = new URL(self.location.href).searchParams.get('v') || 'development';
 const PAGE_CACHE = `pulse-signage-player-pages-${CACHE_VERSION}`;
 const ASSET_CACHE = `pulse-signage-player-assets-${CACHE_VERSION}`;
 const MEDIA_CACHE = `pulse-signage-player-media-${CACHE_VERSION}`;

src/player/regions/rtmp.js

@@ -1,3 +1,5 @@
+// RTMP region markup and playback lifecycle hooks.
+
 var registry = window.pulsePlayerRegionTypes;
 
 function renderRtmpRegion(region, regionContent) {

src/player/regions/video.js

@@ -112,6 +112,8 @@ function renderVideoRegion(region, regionContent) {
   var cachedSrc = regionKey ? String(videoRegionLastGoodSrcCache[regionKey] || '').trim() : '';
   var cachedSrcVersioned = appendCacheBust(cachedSrc, regionContent && regionContent.cache_bust);
   var disableAudio = regionContent && regionContent.disable_audio === undefined ? true : Boolean(regionContent && regionContent.disable_audio);
+  var shouldLoop = !(regionContent && regionContent.loop === false);
+  var loopMarkup = shouldLoop ? ' loop' : '';
 
   if (!requestedSrc) {
     return '';
@@ -122,7 +124,7 @@ function renderVideoRegion(region, regionContent) {
       videoRegionLastGoodSrcCache[regionKey] = requestedSrc;
     }
     setVideoSourceAvailability(requestedSrc, true);
-    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(requestedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})"></video></div>';
+    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(requestedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" data-loop="' + (shouldLoop ? '1' : '0') + '"' + (disableAudio ? ' muted' : '') + loopMarkup + ' playsinline preload="auto" disablepictureinpicture></video></div>';
   }
 
   var requestedState = getVideoSourceAvailability(requestedSrc);
@@ -132,7 +134,7 @@ function renderVideoRegion(region, regionContent) {
     if (regionKey) {
       videoRegionLastGoodSrcCache[regionKey] = requestedSrc;
     }
-    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(requestedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})"></video></div>';
+    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(requestedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" data-loop="' + (shouldLoop ? '1' : '0') + '"' + (disableAudio ? ' muted' : '') + loopMarkup + ' playsinline preload="auto" disablepictureinpicture></video></div>';
   }
 
   scheduleVideoSourceProbe(regionKey, requestedSrc, false);
@@ -141,7 +143,7 @@ function renderVideoRegion(region, regionContent) {
     if (cachedSrc !== requestedSrc) {
       logVideoRegionStatus('Keeping the previous playable video until the new mirrored file finishes transferring.', 'region=' + regionKey + ' old=' + cachedSrc + ' new=' + requestedSrc);
     }
-    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(cachedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})"></video></div>';
+    return '<div class="template-region video" style="' + region.baseStyle + '"><video src="' + escapeHtml(cachedSrcVersioned) + '" title="' + escapeHtml(region.label) + '" data-disable-audio="' + (disableAudio ? '1' : '0') + '" data-loop="' + (shouldLoop ? '1' : '0') + '"' + (disableAudio ? ' muted' : '') + loopMarkup + ' playsinline preload="auto" disablepictureinpicture></video></div>';
   }
 
   return '';

src/player/render-helpers.js

@@ -1,3 +1,5 @@
+// Assemble player HTML and inline runtime scripts from the server-side templates.
+
 const fs = require('fs');
 const path = require('path');
 const announcementIcons = require('#src/data/announcement-icons');
@@ -345,6 +347,9 @@ const playerPageTemplatePath = path.join(__dirname, 'player-page.template.html')
 const playerClientNameScriptPath = path.join(__dirname, 'player-client-name.script.html');
 const playerPageOfflineScriptPath = path.join(__dirname, 'public', 'js', 'player-page-offline.js');
 const playerPagePlaylistScriptPath = path.join(__dirname, 'public', 'js', 'player-page-playlist.js');
+const playerPageAnimationScriptPath = path.join(__dirname, 'public', 'js', 'player-page-animation.js');
+const playerPageMediaScriptPath = path.join(__dirname, 'public', 'js', 'player-page-media.js');
+const playerPageTransitionScriptPath = path.join(__dirname, 'public', 'js', 'player-page-transition.js');
 const playerPageCommandsScriptPath = path.join(__dirname, 'public', 'js', 'player-page-commands.js');
 const playerPageRenderingScriptPath = path.join(__dirname, 'public', 'js', 'player-page-rendering.js');
 const playerPagePlaybackScriptPath = path.join(__dirname, 'public', 'js', 'player-page-playback.js');
@@ -523,6 +528,35 @@ function getPlayerOnboardingFormScript() {
   return loadTemplate(playerOnboardingFormScriptPath, playerOnboardingFormScriptCache || (playerOnboardingFormScriptCache = {}));
 }
 
+function getPlayerRuntimeScripts() {
+  function getScriptBody(value) {
+    return String(value || '')
+      .replace(/^\s*<script(?:\s[^>]*)?>/i, '')
+      .replace(/<\/script>\s*$/i, '')
+      .trim();
+  }
+
+  return [
+    ['region-registry', fs.readFileSync(path.join(__dirname, 'public', 'js', 'player-region-registry.js'), 'utf8').trim()],
+    ['placeholder-utils', fs.readFileSync(path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'placeholder-utils.js'), 'utf8').trim()],
+    ['qr-code-svg', fs.readFileSync(path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'qr-code-svg.js'), 'utf8').trim()],
+    ['client-name', getScriptBody(getPlayerClientNameScript()())],
+    ['offline', getScriptBody(getPlayerPageOfflineScript()())],
+    ['playlist', getScriptBody(getPlayerPagePlaylistScript()())],
+    ['animation', fs.readFileSync(playerPageAnimationScriptPath, 'utf8').trim()],
+    ['media', fs.readFileSync(playerPageMediaScriptPath, 'utf8').trim()],
+    ['transition', fs.readFileSync(playerPageTransitionScriptPath, 'utf8').trim()],
+    ['commands', getScriptBody(getPlayerPageCommandsScript()())],
+    ['rendering', getScriptBody(getPlayerPageRenderingScript()())],
+    ['playback', getScriptBody(getPlayerPagePlaybackScript()())],
+    ['announcement-icons', getAnnouncementIconsDataScript()],
+    ['announcement-data', getPlayerAnnouncementTemplatesDataScript()],
+    ['announcement-templates', getScriptBody(getPlayerAnnouncementTemplatesScript())]
+  ].concat(getPlayerRegionScriptPaths().map(function (filePath, index) {
+    return ['region-' + index, fs.readFileSync(filePath, 'utf8').trim()];
+  })).filter(function (entry) { return entry[1]; });
+}
+
 module.exports = {
   mediaKind: mediaKind,
   escapeHtml: escapeHtml,
@@ -556,5 +590,6 @@ module.exports = {
   getPlayerPageScript: getPlayerPageScript,
   getPlayerRegionScripts: getPlayerRegionScripts,
   getPlayerOnboardingLandingScript: getPlayerOnboardingLandingScript,
-  getPlayerOnboardingFormScript: getPlayerOnboardingFormScript
+  getPlayerOnboardingFormScript: getPlayerOnboardingFormScript,
+  getPlayerRuntimeScripts: getPlayerRuntimeScripts
 };

src/player/render.js

@@ -2,8 +2,8 @@
 
 const Handlebars = require('handlebars');
 const path = require('path');
-const { mediaKind, safeJsonForScript, getPlayerPageTemplate, getPlayerClientNameScript, getPlayerPageOfflineScript, getPlayerPagePlaylistScript, getPlayerPageCommandsScript, getPlayerPageRenderingScript, getPlayerPagePlaybackScript, getAnnouncementIconsDataScript, getPlayerAnnouncementTemplatesDataScript, getPlayerAnnouncementTemplatesScript, getPlayerPageAnnouncementsScript, getPlayerPageScript, getPlayerRegionScripts, getPlayerOnboardingLandingScript, getPlayerOnboardingFormScript } = require('./render-helpers');
-const { createThumbnailPreviewBootstrapScript } = require('./thumbnail-preview');
+const packageMetadata = require('../../package.json');
+const { mediaKind, safeJsonForScript, getPlayerPageTemplate, getPlayerPageAnnouncementsScript, getPlayerPageScript, getPlayerOnboardingLandingScript, getPlayerOnboardingFormScript, getPlayerRuntimeScripts } = require('./render-helpers');
 const { createPageAuthBundle, createPageFetchAuthScript } = require('#src/request-auth');
 const { getFontStylesheetHref } = require('#src/web/lib/media/font-library');
 
@@ -23,11 +23,12 @@ function renderPage(template, options) {
 }
 
 function getPlayerServiceWorkerRegistrationScript() {
+  const releaseVersion = encodeURIComponent(String(packageMetadata.version || 'development'));
   return [
     '<script>',
     '  if ("serviceWorker" in navigator) {',
     '    window.addEventListener("load", function () {',
-      '      navigator.serviceWorker.register("/sw.js?v=38").catch(function () {',
+      '      navigator.serviceWorker.register("/sw.js?v=' + releaseVersion + '").catch(function () {',
     '        return null;',
     '      });',
     '    });',
@@ -110,30 +111,26 @@ function renderOnboardingFormScript(deviceId) {
 }
 
 function renderPlayerPage(slug, initialData) {
-  const onboardingScript = getPlayerClientNameScript()();
-  const offlineScript = getPlayerPageOfflineScript()();
-  const playlistScript = getPlayerPagePlaylistScript()();
-  const commandScript = getPlayerPageCommandsScript()();
-  const renderingScript = getPlayerPageRenderingScript()();
-  const playbackScript = getPlayerPagePlaybackScript()();
   const serviceWorkerScript = getPlayerServiceWorkerRegistrationScript();
   const template = getPlayerPageTemplate();
   const hlsScriptTag = '<script src="/assets/vendor/hls.min.js"></script>';
   const pageAuthToken = createPageAuthBundle({ scope: 'player', slug: String(slug || '').trim() });
   const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
-  const bodyClass = [initialData && initialData.thumbnailPreview ? 'thumbnail-preview' : '', ''].join(' ').trim();
-  const script = getPlayerPageScript()({
+  const bootstrapScript = getPlayerPageScript()({
     SLUG_JSON: new Handlebars.SafeString(JSON.stringify(slug)),
     INITIAL_DATA_JSON: new Handlebars.SafeString(safeJsonForScript(initialData || null)),
-    REGION_SCRIPTS: new Handlebars.SafeString(getPlayerRegionScripts())
+    REGION_SCRIPTS: ''
   });
+  const runtimeScriptTags = getPlayerRuntimeScripts().map(function (entry) {
+    return '<script src="/assets/player-script/' + encodeURIComponent(entry[0]) + '.js?v=' + encodeURIComponent(String(packageMetadata.version || 'development')) + '"></script>';
+  }).join('');
 
   return renderPage(template, {
     title: 'Screen ' + slug,
-    bodyClass: bodyClass,
+    bodyClass: '',
     body: '<div id="app"><div class="empty">Loading screen...</div></div>',
     stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
-    script: createPageFetchAuthScript(pageAuthToken, '/ws/screens/' + encodeURIComponent(slug || '')) + hlsScriptTag + serviceWorkerScript + createThumbnailPreviewBootstrapScript(initialData) + '<script>' + offlineScript + '</script>' + '<script>' + playlistScript + '</script>' + '<script>' + commandScript + '</script>' + '<script>' + renderingScript + '</script>' + '<script>' + playbackScript + '</script>' + '<script>' + getAnnouncementIconsDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesScript() + '</script>' + onboardingScript + script + '<script>' + getPlayerPageAnnouncementsScript()() + '</script>'
+    script: createPageFetchAuthScript(pageAuthToken, '/ws/screens/' + encodeURIComponent(slug || '')) + hlsScriptTag + serviceWorkerScript + runtimeScriptTags + bootstrapScript + '<script>' + getPlayerPageAnnouncementsScript()() + '</script>'
   });
 }
 

src/player/routes.js

@@ -5,7 +5,6 @@ const express = require('express');
 const path = require('path');
 const { getSharedSecret, createPageAuthBundle, verifyPageAuthToken, verifyRequestAuth, createRequestAuthHeaders } = require('#src/request-auth');
 const { getPlayerPublicBaseUrl } = require('./onboarding');
-const { buildThumbnailPreviewData } = require('./thumbnail-preview');
 
 const TRANSIENT_DB_ERROR_CODES = ['ECONNREFUSED', 'ECONNRESET', 'ETIMEDOUT', 'EPIPE', 'ENOTFOUND', 'PROTOCOL_CONNECTION_LOST', 'POOL_CLOSED', 'ERR_POOL_CLOSED'];
 
@@ -24,6 +23,23 @@ function isBridgeFetchError(error) {
   ));
 }
 
+function getRequestClientId(req) {
+  const headerClientId = String(req && req.headers && req.headers['x-pulse-client-id'] || '').trim();
+  if (headerClientId) {
+    return headerClientId;
+  }
+  const queryClientId = String(req && req.query && req.query.clientId || '').trim();
+  if (queryClientId) {
+    return queryClientId;
+  }
+  const cookieHeader = String(req && req.headers && req.headers.cookie || '');
+  const cookie = cookieHeader.split(';').map(function (part) {
+    const separator = part.indexOf('=');
+    return separator === -1 ? null : [part.slice(0, separator).trim(), part.slice(separator + 1).trim()];
+  }).filter(Boolean).find(function (entry) { return entry[0] === 'pulse-player-client-id'; });
+  return cookie ? decodeURIComponent(cookie[1]) : '';
+}
+
 function registerPlayerRoutes(app, options) {
   const pool = options && options.pool ? options.pool : null;
   const common = options && options.common ? options.common : null;
@@ -32,9 +48,10 @@ function registerPlayerRoutes(app, options) {
   const playerRuntime = options && options.playerRuntime ? options.playerRuntime : null;
   const playerPlaylistService = options && options.playerPlaylistService ? options.playerPlaylistService : null;
   const rtmpStreamService = options && options.rtmpStreamService ? options.rtmpStreamService : null;
-  const playerInternalUrl = String(options && options.playerInternalBaseUrl || process.env.PLAYER_INTERNAL_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
+  const playerInternalUrl = String(options && options.playerInternalBaseUrl || process.env.PLAYER_INTERNAL_URL || '').trim().replace(/\/$/, '');
   const bridgeBaseUrl = String(options && options.bridgeBaseUrl || process.env.BRIDGE_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const playerDeviceId = String(options && options.playerDeviceId || '').trim() || null;
+  const snapshotDir = options && options.snapshotDir ? path.resolve(String(options.snapshotDir)) : null;
   const onPlayerPublicBaseUrl = typeof options.onPlayerPublicBaseUrl === 'function' ? options.onPlayerPublicBaseUrl : null;
 
   if (!app || !common || !mediaDir || !assetDir || !playerRuntime || !rtmpStreamService) {
@@ -66,11 +83,16 @@ function registerPlayerRoutes(app, options) {
     if (requestHeaders['x-pulse-page-auth']) {
       headers['x-pulse-page-auth'] = String(requestHeaders['x-pulse-page-auth']).trim();
     }
-    if (requestHeaders['if-none-match']) {
+    if (requestHeaders['if-none-match'] && !requestOptions.skipIfNoneMatch) {
       headers['if-none-match'] = String(requestHeaders['if-none-match']).trim();
     }
     if (requestHeaders['x-pulse-client-id']) {
       headers['x-pulse-client-id'] = String(requestHeaders['x-pulse-client-id']).trim();
+    } else {
+      const clientId = getRequestClientId(req);
+      if (clientId) {
+        headers['x-pulse-client-id'] = clientId;
+      }
     }
     if (requestOptions.contentType) {
       headers['content-type'] = requestOptions.contentType;
@@ -130,7 +152,7 @@ function registerPlayerRoutes(app, options) {
   }
 
   async function isClientAuthorizedForScreen(req, requestedSlug) {
-    const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+    const clientId = getRequestClientId(req);
     if (!clientId) {
       return false;
     }
@@ -219,6 +241,32 @@ function registerPlayerRoutes(app, options) {
     return resolvedFilePath;
   }
 
+  function getSnapshotFilePath(slug) {
+    const normalizedSlug = String(slug || '').trim();
+    return snapshotDir && normalizedSlug ? path.join(snapshotDir, `${normalizedSlug}.json`) : null;
+  }
+
+  async function readPlaylistSnapshot(slug) {
+    const filePath = getSnapshotFilePath(slug);
+    if (!filePath) {
+      return null;
+    }
+    try {
+      return JSON.parse(await fs.promises.readFile(filePath, 'utf8'));
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  async function writePlaylistSnapshot(slug, payload) {
+    const filePath = getSnapshotFilePath(slug);
+    if (!filePath || !payload) {
+      return;
+    }
+    await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
+    await fs.promises.writeFile(filePath, JSON.stringify(payload, null, 2), 'utf8');
+  }
+
   app.use('/assets', express.static(assetDir));
   app.use('/assets/adminlte/bootstrap-icons', express.static(path.join(__dirname, '..', 'web', 'public', 'adminlte', 'bootstrap-icons')));
   app.use('/media', express.static(mediaDir));
@@ -371,7 +419,7 @@ function registerPlayerRoutes(app, options) {
   });
 
   app.get('/screen/:slug', async function (req, res, next) {
-    if (onPlayerPublicBaseUrl) {
+    if (onPlayerPublicBaseUrl && !bridgeBaseUrl) {
       try {
         onPlayerPublicBaseUrl(getPlayerPublicBaseUrl(req, null));
       } catch (_error) {
@@ -387,21 +435,25 @@ function registerPlayerRoutes(app, options) {
         headers: pageAuthToken ? { 'x-pulse-page-auth': pageAuthToken } : {}
       }).then(async function (response) {
         if (!response || response.status >= 400) {
+          const snapshot = await readPlaylistSnapshot(req.params.slug);
           res.set('X-Player-Offline', '1');
-          return res.send(common.renderPlayerPage(req.params.slug, null));
+          return res.send(common.renderPlayerPage(req.params.slug, snapshot));
         }
         const data = await readJsonResponse(response);
         if (!data) {
+          const snapshot = await readPlaylistSnapshot(req.params.slug);
           res.set('X-Player-Offline', '1');
-          return res.send(common.renderPlayerPage(req.params.slug, null));
+          return res.send(common.renderPlayerPage(req.params.slug, snapshot));
         }
+        await writePlaylistSnapshot(req.params.slug, data);
         res.send(common.renderPlayerPage(req.params.slug, null));
-      }).catch(function (error) {
+      }).catch(async function (error) {
         if (!isBridgeFetchError(error)) {
           console.error(error);
         }
+        const snapshot = await readPlaylistSnapshot(req.params.slug);
         res.set('X-Player-Offline', '1');
-        res.send(common.renderPlayerPage(req.params.slug, null));
+        res.send(common.renderPlayerPage(req.params.slug, snapshot));
       });
       return;
     }
@@ -415,61 +467,6 @@ function registerPlayerRoutes(app, options) {
     });
   });
 
-  app.get('/api/internal/slide-thumbnails/:id/preview', requireRequestAuth, async function (req, res, next) {
-    try {
-      if (bridgeBaseUrl) {
-        const response = await fetchBridge(req, '/api/internal/slide-thumbnails/' + encodeURIComponent(req.params.id) + '/preview', {
-          method: 'GET'
-        });
-        if (!response) {
-          return res.status(502).send('Thin client unavailable');
-        }
-        res.status(response.status);
-        res.set('Cache-Control', response.headers.get('cache-control') || 'no-store, no-cache, must-revalidate, proxy-revalidate');
-        res.type(response.headers.get('content-type') || 'text/html; charset=utf-8');
-        return res.send(await response.text());
-      }
-
-      const slide = await common.fetchSlideById(pool, Number(req.params.id));
-      if (!slide) {
-        return res.status(404).send('Slide not found');
-      }
-
-      const data = buildThumbnailPreviewData(slide);
-
-      if (typeof common.fetchRssFeedsData === 'function' && typeof common.fetchRssFeedItemsByFeedId === 'function') {
-        const rssData = await common.fetchRssFeedsData(pool);
-        data.rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
-          const items = await common.fetchRssFeedItemsByFeedId(pool, feed.id);
-          return Object.assign({}, feed, {
-            items: items.map(function (item) {
-              return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
-            })
-          });
-        }));
-      }
-
-      if (typeof common.fetchApiSourcesData === 'function') {
-        const apiData = await common.fetchApiSourcesData(pool);
-        data.apiSources = (apiData.apiSources || []).map(function (source) {
-          return Object.assign({}, source, {
-            responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
-          });
-        });
-      }
-
-      if (typeof common.fetchTimetablesData === 'function') {
-        const timetableData = await common.fetchTimetablesData(pool);
-        data.timetableGroups = Array.isArray(timetableData && timetableData.timetableGroups) ? timetableData.timetableGroups : [];
-      }
-
-      res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
-      res.send(common.renderPlayerPage('slide-thumbnail-preview-' + slide.id, data));
-    } catch (error) {
-      next(error);
-    }
-  });
-
   app.get('/api/screens/:slug/playlist', requirePageAuth(['player']), async function (req, res, next) {
     try {
       if (playerDeviceId && !(await isClientAuthorizedForScreen(req, req.params.slug))) {
@@ -480,7 +477,13 @@ function registerPlayerRoutes(app, options) {
           method: 'GET'
         });
         if (!response) {
-          return res.status(502).json({ error: 'Thin client unavailable.' });
+          const snapshot = await readPlaylistSnapshot(req.params.slug);
+          if (!snapshot) {
+            return res.status(502).json({ error: 'Thin client unavailable.' });
+          }
+          res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+          res.set('ETag', '"' + String(snapshot.revision || '') + '"');
+          return res.json(snapshot);
         }
         res.status(response.status);
         const etag = response.headers.get('etag');
@@ -492,10 +495,29 @@ function registerPlayerRoutes(app, options) {
           res.set('Cache-Control', cacheControl);
         }
         if (response.status === 304) {
-          return res.end();
+          const cachedSnapshot = await readPlaylistSnapshot(req.params.slug);
+          if (cachedSnapshot) {
+            return res.end();
+          }
+
+          const refreshedResponse = await fetchBridge(req, '/api/screens/' + encodeURIComponent(req.params.slug) + '/playlist', {
+            method: 'GET',
+            skipIfNoneMatch: true
+          });
+          const refreshedData = await readJsonResponse(refreshedResponse);
+          if (!refreshedResponse || refreshedResponse.status >= 400 || !refreshedData) {
+            return res.status(502).json({ error: 'Thin client playlist cache unavailable.' });
+          }
+          await writePlaylistSnapshot(req.params.slug, refreshedData);
+          return res.json(refreshedData);
         }
         res.type(response.headers.get('content-type') || 'application/json');
-        return res.send(await response.text());
+        const responseText = await response.text();
+        try {
+          await writePlaylistSnapshot(req.params.slug, JSON.parse(responseText));
+        } catch (_error) {
+        }
+        return res.send(responseText);
       }
 
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');

src/player/runtime.js

@@ -2,7 +2,7 @@
 
 const crypto = require('crypto');
 const { WebSocketServer, WebSocket } = require('ws');
-const { isClientNameAvailable } = require('#src/data/client-name-check');
+const { findAvailableClientName, isClientNameAvailable } = require('#src/data/client-name-check');
 const { verifyPageAuthToken, verifyRequestAuth } = require('#src/request-auth');
 const PAGE_AUTH_COOKIE_NAME = 'pulse_page_auth';
 
@@ -22,6 +22,8 @@ function normalizePlayerPublicBaseUrl(pageUrl) {
 function createPlayerRuntime(options) {
   const pool = options && options.pool ? options.pool : null;
   const notifySnapshot = typeof options.notifySnapshot === 'function' ? options.notifySnapshot : null;
+  const persistClientName = typeof options.persistClientName === 'function' ? options.persistClientName : null;
+  const touchClientLastSeen = typeof options.touchClientLastSeen === 'function' ? options.touchClientLastSeen : null;
   const normalizeDeviceId = typeof options.normalizeDeviceId === 'function'
     ? options.normalizeDeviceId
     : function (value) {
@@ -30,7 +32,11 @@ function createPlayerRuntime(options) {
   const connectionsBySlug = new Map();
   const dashboardListenersBySlug = new Map();
   const announcementListenersBySlug = new Map();
+  const pendingCommandAcks = new Map();
   const wss = new WebSocketServer({ noServer: true });
+  const staleConnectionMs = Number(options && options.staleConnectionMs) > 0
+    ? Number(options.staleConnectionMs)
+    : 3 * 60 * 1000;
 
   function hasActiveClientId(clientId, currentConnection) {
     const normalizedClientId = String(clientId || '').trim();
@@ -180,6 +186,57 @@ function createPlayerRuntime(options) {
     }
   }
 
+  function removeStaleConnections() {
+    const cutoff = Date.now() - staleConnectionMs;
+    for (const [slug, bucket] of connectionsBySlug.entries()) {
+      for (const [connectionId, connection] of bucket.entries()) {
+        if (connection.lastSeenAt && connection.lastSeenAt.getTime() > cutoff) {
+          continue;
+        }
+        removeConnection(slug, connectionId);
+        try {
+          connection.socket.close(1000, 'Connection heartbeat expired.');
+        } catch (_error) {
+        }
+        broadcastConnectionSnapshot(slug);
+      }
+    }
+  }
+
+  const staleConnectionSweep = setInterval(removeStaleConnections, Math.min(staleConnectionMs, 60 * 1000));
+  if (typeof staleConnectionSweep.unref === 'function') {
+    staleConnectionSweep.unref();
+  }
+
+  function checkWebsocketHealth() {
+    for (const [slug, bucket] of connectionsBySlug.entries()) {
+      for (const [connectionId, connection] of bucket.entries()) {
+        if (!connection.isAlive) {
+          removeConnection(slug, connectionId);
+          try {
+            connection.socket.terminate();
+          } catch (_error) {
+          }
+          broadcastConnectionSnapshot(slug);
+          continue;
+        }
+
+        connection.isAlive = false;
+        try {
+          connection.socket.ping();
+        } catch (_error) {
+          removeConnection(slug, connectionId);
+          broadcastConnectionSnapshot(slug);
+        }
+      }
+    }
+  }
+
+  const websocketHealthCheck = setInterval(checkWebsocketHealth, 30 * 1000);
+  if (typeof websocketHealthCheck.unref === 'function') {
+    websocketHealthCheck.unref();
+  }
+
   function getDashboardListenerBucket(slug) {
     const key = String(slug || '').trim();
     if (!key) {
@@ -370,7 +427,10 @@ function createPlayerRuntime(options) {
       return 0;
     }
 
-    const target = bucket.get(String(connectionId || '').trim());
+    const normalizedConnectionId = String(connectionId || '').trim();
+    const target = bucket.get(normalizedConnectionId) || Array.from(bucket.values()).find(function (connection) {
+      return String(connection && connection.clientId || '').trim() === normalizedConnectionId;
+    });
     if (!target || target.socket.readyState !== WebSocket.OPEN) {
       return 0;
     }
@@ -382,8 +442,28 @@ function createPlayerRuntime(options) {
     payload.targetConnectionId = target.id;
     payload.sentAt = new Date().toISOString();
 
+    const requestId = String(payload.requestId || '').trim();
+    if (!requestId) {
+      target.socket.send(JSON.stringify(payload));
+      return 1;
+    }
+
+    const acknowledgement = new Promise(function (resolve) {
+      const timeout = setTimeout(function () {
+        pendingCommandAcks.delete(requestId);
+        resolve(0);
+      }, 5000);
+      pendingCommandAcks.set(requestId, {
+        connection: target,
+        resolve: function (acknowledged) {
+          clearTimeout(timeout);
+          pendingCommandAcks.delete(requestId);
+          resolve(acknowledged ? 1 : 0);
+        }
+      });
+    });
     target.socket.send(JSON.stringify(payload));
-    return 1;
+    return await acknowledgement;
   }
 
   async function broadcastCommand(slug, commandOrPayload) {
@@ -527,6 +607,7 @@ function createPlayerRuntime(options) {
       connectedAt: new Date(),
       lastSeenAt: new Date()
     };
+    connection.isAlive = true;
     const bucket = getConnectionBucket(slug);
 
     if (!bucket) {
@@ -536,7 +617,11 @@ function createPlayerRuntime(options) {
 
     bucket.set(connectionId, connection);
 
-    socket.on('message', function (rawMessage) {
+    socket.on('pong', function () {
+      connection.isAlive = true;
+    });
+
+    socket.on('message', async function (rawMessage) {
       connection.lastSeenAt = new Date();
       let payload = null;
       try {
@@ -546,6 +631,13 @@ function createPlayerRuntime(options) {
       }
 
       if (!payload || payload.type !== 'state') {
+        if (payload && payload.type === 'command-ack') {
+          const requestId = String(payload.requestId || '').trim();
+          const pendingAck = pendingCommandAcks.get(requestId);
+          if (pendingAck && pendingAck.connection === connection) {
+            pendingAck.resolve(payload.ok !== false);
+          }
+        }
         return;
       }
 
@@ -561,6 +653,26 @@ function createPlayerRuntime(options) {
       if (!connection.clientName && connection.clientId) {
         connection.clientName = connection.clientId;
       }
+      if (connection.clientName) {
+        const connectionIdentity = connection.deviceId || connection.clientId;
+        const selectedClientName = await findAvailableClientName(pool, connection.clientName, connectionIdentity, snapshotAllConnections());
+        if (selectedClientName && selectedClientName !== connection.clientName) {
+          connection.clientName = selectedClientName;
+          if (persistClientName) {
+            await persistClientName(connection.deviceId, selectedClientName);
+          }
+          if (socket.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({ type: 'client-name-updated', clientName: selectedClientName }));
+          }
+        }
+      }
+      if (touchClientLastSeen) {
+        try {
+          await touchClientLastSeen(connection.clientId);
+        } catch (_error) {
+          // A heartbeat failure must not interrupt playback or websocket state.
+        }
+      }
       connection.userAgent = payload.userAgent ? String(payload.userAgent).trim() : connection.userAgent;
       connection.viewport = payload.viewport && typeof payload.viewport === 'object' ? payload.viewport : connection.viewport;
       connection.page = payload.page ? String(payload.page).trim() : connection.page;
@@ -581,12 +693,24 @@ function createPlayerRuntime(options) {
       broadcastConnectionSnapshot(slug);
     });
 
-    socket.on('close', function () {
+    socket.on('close', function (code, reason) {
+      pendingCommandAcks.forEach(function (pendingAck, requestId) {
+        if (pendingAck.connection === connection) {
+          pendingAck.resolve(false);
+          pendingCommandAcks.delete(requestId);
+        }
+      });
       removeConnection(slug, connectionId);
       broadcastConnectionSnapshot(slug);
     });
 
     socket.on('error', function () {
+      pendingCommandAcks.forEach(function (pendingAck, requestId) {
+        if (pendingAck.connection === connection) {
+          pendingAck.resolve(false);
+          pendingCommandAcks.delete(requestId);
+        }
+      });
       removeConnection(slug, connectionId);
       broadcastConnectionSnapshot(slug);
     });

src/player/thumbnail-preview.js

@@ -1,30 +0,0 @@
-// Thumbnail preview data and bootstrap script helpers for slide thumbnails.
-
-function buildThumbnailPreviewData(slide) {
-  return {
-    thumbnailPreview: true,
-    screen: {
-      id: slide.id,
-      name: slide.title,
-      slug: 'slide-thumbnail-preview-' + slide.id,
-      playlist_id: null
-    },
-    playlist: {
-      fade_between_slides: false
-    },
-    slides: [slide],
-    rssFeeds: [],
-    apiSources: [],
-    timetableGroups: [],
-    revision: String(slide.modified_at || slide.id || Date.now())
-  };
-}
-
-function createThumbnailPreviewBootstrapScript(initialData) {
-  return initialData && initialData.thumbnailPreview ? '<script>window.__pulseThumbnailPreview = true;</script>' : '';
-}
-
-module.exports = {
-  buildThumbnailPreviewData: buildThumbnailPreviewData,
-  createThumbnailPreviewBootstrapScript: createThumbnailPreviewBootstrapScript
-};

src/web.js

@@ -67,7 +67,13 @@ async function start() {
     playerInternalBaseUrl: webConfig.playerInternalUrl,
     bridgeInternalBaseUrl: webConfig.bridgeInternalUrl
   });
-  const notifyPlayerScreens = createNotifyPlayerScreens(playerActionService.forwardPlayerCommand);
+  const notifyPlayerScreens = createNotifyPlayerScreens(
+    playerActionService.forwardPlayerCommand,
+    playerActionService.getScreenConnections,
+    playerActionService.forwardPlayerCommandToBaseUrl,
+    playerActionService.resolvePlayerBaseUrlForPublicUrl,
+    playerActionService.forwardPlayerCommandToDevice
+  );
 
   // Centralized dashboard/player bootstrap.
   const webBootstrap = createWebBootstrap({
@@ -165,6 +171,7 @@ async function start() {
     playerActionService: playerActionService,
     playerInternalBaseUrl: webConfig.playerInternalUrl,
     isClientNameAvailable: isClientNameAvailable,
+    findAvailableClientName: common.findAvailableClientName,
     withClientNameReservation: withClientNameReservation,
     requirePermission: function (permissionKey, options) {
       return createRequirePermission(permissionKey, Object.assign({ setAuthMessageCookie: setAuthMessageCookie }, options));

src/web/bootstrap.js

@@ -121,6 +121,7 @@ function createWebBootstrap(options) {
     pool: pool,
     common: common,
     playerInternalBaseUrl: configuredPlayerInternalUrl,
+    bridgeInternalBaseUrl: configuredBridgeInternalUrl,
     playerSnapshotCache: playerSnapshotCache,
     notifyPlayerScreens: notifyPlayerScreens,
     backgroundTaskQueue: backgroundTaskQueue

src/web/lib/background-tasks/tasks-scheduled/data-source-refresh.js

@@ -68,7 +68,7 @@ function registerRecurringDataSourceRefreshes(options) {
         category: TASK.category,
         intervalMs: normalizeIntervalMs(location.update_interval_value, location.update_interval_unit),
         metadata: { sourceType: 'weather-location', sourceId: Number(location.id), sourceName: location.name },
-        run: function () { return refreshWeatherLocation(pool, common, location, null, options.notifyPlayerScreens); }
+        run: function () { return refreshWeatherLocation(pool, common, location.id, null, options.notifyPlayerScreens); }
       });
     });
   })();

src/web/lib/config.js

@@ -5,7 +5,7 @@ function createWebConfig() {
   const uploadsDir = path.join(mediaDir, 'uploads');
   const thumbnailsDir = path.join(mediaDir, 'thumbnails');
   const assetDir = path.join(__dirname, '..', 'public');
-  const playerInternalUrl = (process.env.PLAYER_INTERNAL_URL || process.env.PLAYER_BASE_URL || 'http://player:8081').replace(/\/$/, '');
+  const playerInternalUrl = (process.env.PLAYER_INTERNAL_URL || 'http://player:8081').replace(/\/$/, '');
   const bridgeInternalUrl = (process.env.BRIDGE_INTERNAL_URL || 'http://player-bridge:8090').replace(/\/$/, '');
   const webInternalUrl = (process.env.WEB_INTERNAL_URL || `http://127.0.0.1:${Number(process.env.WEB_PORT || 8080)}`).replace(/\/$/, '');
   const sessionCookieName = 'digital_signage_session';

src/web/lib/data-source-refresh.js

@@ -1,3 +1,5 @@
+// Refresh data sources and notify only the screens whose rendered data changed.
+
 async function getAffectedScreenSlugs(connection, common, slideMatchKey, sourceId) {
   const [slideRows] = await connection.query('SELECT id, content_json FROM c_slides WHERE content_json IS NOT NULL');
   const slideIds = [];
@@ -106,6 +108,24 @@ function hasApiSourceChanged(apiSource, responseDetails) {
   return normalizeSnapshotValue(apiSource && apiSource.last_response_json) !== normalizeSnapshotValue(responseDetails && responseDetails.responseJson);
 }
 
+function isDifferentHour(previousPulledAt, currentPulledAt) {
+  const previous = new Date(previousPulledAt);
+  const current = new Date(currentPulledAt);
+  if (!Number.isFinite(previous.getTime())) {
+    return false;
+  }
+
+  return previous.getFullYear() !== current.getFullYear()
+    || previous.getMonth() !== current.getMonth()
+    || previous.getDate() !== current.getDate()
+    || previous.getHours() !== current.getHours();
+}
+
+function hasWeatherLocationChanged(location, responseDetails, refreshedAt) {
+  return normalizeSnapshotValue(location && location.last_response_json) !== normalizeSnapshotValue(responseDetails && responseDetails.responseJson)
+    || isDifferentHour(location && location.last_pulled_at, refreshedAt);
+}
+
 async function refreshApiSource(pool, common, apiSourceOrId, actorId, notifyPlayerScreens) {
   const connection = await pool.getConnection();
   try {
@@ -169,16 +189,17 @@ async function refreshWeatherLocation(pool, common, weatherLocationOrId, actorId
       pullError = String(error && error.message ? error.message : 'Unable to load weather forecast.');
     }
 
+    const refreshedAt = new Date();
     await connection.beginTransaction();
     await connection.query(
       'UPDATE i_weather_locations SET last_pulled_at = ?, last_pull_error = ?, last_response_json = COALESCE(?, last_response_json), modified_by = ? WHERE id = ?',
-      [new Date(), pullError || null, result ? result.responseJson : null, actorId, location.id]
+      [refreshedAt, pullError || null, result ? result.responseJson : null, actorId, location.id]
     );
     await connection.commit();
 
     if (pullError) {
       console.error('[data-source-refresh] Weather location refresh completed with an error for location ' + location.id + ': ' + pullError);
-    } else if (typeof notifyAffectedScreens === 'function') {
+    } else if (hasWeatherLocationChanged(location, result, refreshedAt) && typeof notifyPlayerScreens === 'function') {
       try {
         await notifyAffectedScreens(connection, common, notifyPlayerScreens, 'weather_location_id', location.id);
       } catch (notifyError) {

src/web/lib/media/upload-sync.js

@@ -36,22 +36,6 @@ function normalizeBaseUrl(value) {
   return String(value || '').trim().replace(/\/$/, '');
 }
 
-function appendPlayerDeviceIdToUrl(baseUrl, playerIdentifier) {
-  const targetBaseUrl = normalizeBaseUrl(baseUrl);
-  const deviceId = String(playerIdentifier || '').trim();
-  if (!targetBaseUrl || !deviceId) {
-    return targetBaseUrl;
-  }
-
-  try {
-    const url = new URL(targetBaseUrl);
-    url.searchParams.set('deviceId', deviceId);
-    return url.toString().replace(/\/$/, '');
-  } catch (_error) {
-    return targetBaseUrl;
-  }
-}
-
 function normalizePlayerRowBaseUrl(player) {
   return normalizeBaseUrl(player && player.internal_base_url);
 }
@@ -68,6 +52,7 @@ function createUploadSyncService(options) {
   const pool = options && options.pool;
   const common = options && options.common;
   const configuredPlayerInternalBaseUrl = String(options && options.playerInternalBaseUrl || '').replace(/\/$/, '');
+  const configuredBridgeInternalBaseUrl = String(options && options.bridgeInternalBaseUrl || '').trim().replace(/\/$/, '');
   const playerSnapshotCache = options && options.playerSnapshotCache;
   const notifyPlayerScreens = options && options.notifyPlayerScreens;
   const backgroundTaskQueue = options && options.backgroundTaskQueue;
@@ -389,6 +374,9 @@ function createUploadSyncService(options) {
       }
 
       const filePath = resolveUploadFilePath(uploadDir, uploadPath);
+      if (String(uploadPath || '').startsWith('/media/player-cache/')) {
+        continue;
+      }
       try {
         await fs.promises.unlink(filePath);
       } catch (error) {
@@ -432,10 +420,6 @@ function createUploadSyncService(options) {
         const nextRelativePath = relativeDir ? path.posix.join(relativeDir, entryName) : entryName;
         const nextAbsolutePath = path.join(currentDir, entryName);
 
-        if (!relativeDir && entryName === 'player-cache') {
-          continue;
-        }
-
         if (entry.isDirectory && entry.isDirectory()) {
           await walkDirectory(nextAbsolutePath, nextRelativePath);
           continue;
@@ -445,7 +429,11 @@ function createUploadSyncService(options) {
           continue;
         }
 
-        uploadPaths.push('/media/uploads/' + nextRelativePath.replace(/\\/g, '/'));
+        const normalizedRelativePath = nextRelativePath.replace(/\\/g, '/');
+        if (normalizedRelativePath.startsWith('player-cache/') && !normalizedRelativePath.startsWith('player-cache/remote-images/')) {
+          continue;
+        }
+        uploadPaths.push((normalizedRelativePath.startsWith('player-cache/') ? '/media/' : '/media/uploads/') + normalizedRelativePath);
       }
     }
 
@@ -542,6 +530,9 @@ function createUploadSyncService(options) {
     }
 
     const playerMetadata = await getPlayerTaskMetadata(preferredPlayerIdentifier, targetBaseUrl);
+    const mediaBaseUrl = playerMetadata && playerMetadata.playerIdentifier && !isLocalLikeBaseUrl(targetBaseUrl) && configuredBridgeInternalBaseUrl
+      ? configuredBridgeInternalBaseUrl
+      : targetBaseUrl;
     const relativePath = getUploadRelativePath(uploadPath);
     const sourcePath = resolveUploadFilePath(localUploadDir, uploadPath);
     if (!relativePath || !sourcePath) {
@@ -563,11 +554,13 @@ function createUploadSyncService(options) {
         pathname: `/api/media/${encodeURIComponent(relativePath)}`,
         body: fileBuffer
       });
-      const mediaUploadUrl = appendPlayerDeviceIdToUrl(`${targetBaseUrl}/api/media/${encodeURIComponent(relativePath)}`, playerMetadata && playerMetadata.playerIdentifier);
+      const mediaUploadUrl = `${mediaBaseUrl}/api/media/${encodeURIComponent(relativePath)}`;
+      const playerDeviceId = String(playerMetadata && playerMetadata.playerIdentifier || '').trim();
       const response = await fetch(mediaUploadUrl, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/octet-stream',
+          ...(playerDeviceId ? { 'x-pulse-player-device-id': playerDeviceId } : {}),
           ...authHeaders
         },
         body: fileBuffer
@@ -598,6 +591,9 @@ function createUploadSyncService(options) {
     }
 
     const playerMetadata = await getPlayerTaskMetadata(preferredPlayerIdentifier, targetBaseUrl);
+    const mediaBaseUrl = playerMetadata && playerMetadata.playerIdentifier && !isLocalLikeBaseUrl(targetBaseUrl) && configuredBridgeInternalBaseUrl
+      ? configuredBridgeInternalBaseUrl
+      : targetBaseUrl;
     const relativePath = getUploadRelativePath(uploadPath);
     if (!relativePath) {
       return false;
@@ -607,11 +603,13 @@ function createUploadSyncService(options) {
         method: 'DELETE',
         pathname: `/api/media/${encodeURIComponent(relativePath)}`
       });
-      const mediaDeleteUrl = appendPlayerDeviceIdToUrl(`${targetBaseUrl}/api/media/${encodeURIComponent(relativePath)}`, playerMetadata && playerMetadata.playerIdentifier);
+      const mediaDeleteUrl = `${mediaBaseUrl}/api/media/${encodeURIComponent(relativePath)}`;
+      const playerDeviceId = String(playerMetadata && playerMetadata.playerIdentifier || '').trim();
       const response = await fetch(mediaDeleteUrl, {
         method: 'DELETE',
         headers: {
           Accept: 'application/json',
+          ...(playerDeviceId ? { 'x-pulse-player-device-id': playerDeviceId } : {}),
           ...authHeaders
         }
       });
@@ -930,6 +928,12 @@ function createUploadSyncService(options) {
         });
       });
       const fontLibraryOperations = collectFontLibrarySyncOperations(uploadDir);
+      const generatedCachePaths = await collectUploadPathsFromDirectory(uploadDir);
+      generatedCachePaths.filter(function (uploadPath) {
+        return String(uploadPath || '').startsWith('/media/player-cache/remote-images/');
+      }).forEach(function (uploadPath) {
+        uploadRefs.add(uploadPath);
+      });
       Array.from(uploadRefs).forEach(function (uploadPath) {
         queuePlayerUploadSync({
           type: 'put',
@@ -957,8 +961,12 @@ function createUploadSyncService(options) {
     if (mode === 'playlist') {
       const operation = normalizePlaylistUploadSyncOperation(taskPayload.operation || taskPayload);
 
-      if (operation.nextUploadRefs.length) {
-        await syncUploadRefsToPlayer(operation.nextUploadRefs, operation.localUploadDir, taskPayload.playerIdentifier, taskPayload.playerInternalBaseUrl);
+      const generatedCachePaths = await collectUploadPathsFromDirectory(operation.localUploadDir);
+      const nextUploadRefs = operation.nextUploadRefs.concat(generatedCachePaths.filter(function (uploadPath) {
+        return String(uploadPath || '').startsWith('/media/player-cache/remote-images/');
+      }));
+      if (nextUploadRefs.length) {
+        await syncUploadRefsToPlayer(nextUploadRefs, operation.localUploadDir, taskPayload.playerIdentifier, taskPayload.playerInternalBaseUrl);
       }
 
       if (operation.previousUploadRefs.length) {

src/web/lib/notify-player-screens.js

@@ -1,4 +1,6 @@
-function createNotifyPlayerScreens(forwardPlayerCommand) {
+// Route screen refresh commands to the physical player hosting each screen.
+
+function createNotifyPlayerScreens(forwardPlayerCommand, getScreenConnections, forwardPlayerCommandToBaseUrl, resolvePlayerBaseUrl, forwardPlayerCommandToDevice) {
   if (typeof forwardPlayerCommand !== 'function') {
     throw new Error('createNotifyPlayerScreens requires a player command sender.');
   }
@@ -12,12 +14,47 @@ function createNotifyPlayerScreens(forwardPlayerCommand) {
       return Promise.resolve(0);
     }
 
-    return Promise.allSettled(uniqueSlugs.map(function (slug) {
+    return Promise.allSettled(uniqueSlugs.map(async function (slug) {
+      // A screen may have connections on multiple players after a remote move or reconnect.
+      if (typeof getScreenConnections === 'function' && typeof forwardPlayerCommandToBaseUrl === 'function') {
+        const screenState = await getScreenConnections(slug);
+        const connections = Array.isArray(screenState && screenState.connections) ? screenState.connections : [];
+        const deviceIds = Array.from(new Set(connections.map(function (connection) {
+          return String(connection && connection.playerDeviceId || '').trim();
+        }).filter(Boolean)));
+        const playerBaseUrls = Array.from(new Set(connections.map(function (connection) {
+          if (String(connection && connection.playerDeviceId || '').trim()) {
+            return '';
+          }
+          return String(connection && connection.playerPublicBaseUrl || '').trim().replace(/\/$/, '');
+        }).filter(Boolean)));
+        const deviceResults = deviceIds.length && typeof forwardPlayerCommandToDevice === 'function'
+          ? await Promise.all(deviceIds.map(function (deviceId) {
+            return forwardPlayerCommandToDevice(deviceId, {
+              command: commandOrPayload || 'refresh',
+              screenSlug: slug
+            });
+          }))
+          : [];
+        let baseUrlResults = [];
+        if (playerBaseUrls.length) {
+          const resolvedPlayerBaseUrls = typeof resolvePlayerBaseUrl === 'function'
+            ? await Promise.all(playerBaseUrls.map(function (playerBaseUrl) { return resolvePlayerBaseUrl(playerBaseUrl); }))
+            : playerBaseUrls;
+          baseUrlResults = await Promise.all(resolvedPlayerBaseUrls.filter(Boolean).map(function (playerBaseUrl) {
+            return forwardPlayerCommandToBaseUrl(playerBaseUrl, slug, commandOrPayload || 'refresh');
+          }));
+        }
+        if (deviceResults.length || baseUrlResults.length) {
+          return deviceResults.concat(baseUrlResults);
+        }
+      }
       return forwardPlayerCommand(slug, commandOrPayload || 'refresh');
     })).then(function (results) {
-      return results.filter(function (result) {
-        return result.status === 'fulfilled';
+      const successful = results.filter(function (result) {
+        return result.status === 'fulfilled' && (!result.value || result.value.ok !== false);
       }).length;
+      return successful;
     });
   };
 }

src/web/lib/player-actions.js

@@ -1,3 +1,5 @@
+// Commands and synchronization actions forwarded from the web app to players.
+
 const { createRequestAuthHeaders } = require('#src/request-auth');
 const { getConfiguredPlayerIdentifier } = require('#src/data/player-registry');
 
@@ -215,7 +217,49 @@ function createPlayerActionService(options) {
     return forwardPlayerCommandToBaseUrl(resolvedPlayerInternalBaseUrl, slug, commandOrPayload, connectionId);
   }
 
+  async function resolvePlayerBaseUrlForPublicUrl(playerPublicBaseUrl) {
+    const normalizedPublicBaseUrl = normalizeBaseUrl(playerPublicBaseUrl);
+    if (!normalizedPublicBaseUrl) {
+      return '';
+    }
+
+    try {
+      const players = await fetchPlayerRegistrations(pool);
+      const matchedPlayer = (Array.isArray(players) ? players : []).find(function (player) {
+        return normalizeBaseUrl(player && player.public_base_url) === normalizedPublicBaseUrl;
+      });
+      const registeredInternalBaseUrl = normalizeBaseUrl(matchedPlayer && matchedPlayer.internal_base_url);
+      if (registeredInternalBaseUrl) {
+        return registeredInternalBaseUrl;
+      }
+    } catch (_error) {
+    }
+
+    if (isLocalLikeBaseUrl(normalizedPublicBaseUrl) && configuredPlayerInternalBaseUrl) {
+      return configuredPlayerInternalBaseUrl;
+    }
+
+    return normalizedPublicBaseUrl;
+  }
+
   async function forwardAnnouncementRefresh(slug) {
+    try {
+      const screenState = await getScreenConnections(slug);
+      const deviceIds = Array.from(new Set((screenState && Array.isArray(screenState.connections) ? screenState.connections : []).map(function (connection) {
+        return String(connection && connection.playerDeviceId || '').trim();
+      }).filter(Boolean)));
+      if (deviceIds.length) {
+        const deviceResults = await Promise.all(deviceIds.map(function (deviceId) {
+          return forwardPlayerCommandToDevice(deviceId, {
+            command: 'announcement-refresh',
+            screenSlug: slug
+          });
+        }));
+        return deviceResults;
+      }
+    } catch (_error) {
+    }
+
     const resolvedPlayerInternalBaseUrl = await getPlayerInternalBaseUrl();
     const targetBaseUrls = Array.from(new Set([
       resolvedPlayerInternalBaseUrl,
@@ -367,6 +411,7 @@ function createPlayerActionService(options) {
 
   return {
     forwardPlayerCommand: forwardPlayerCommand,
+    resolvePlayerBaseUrlForPublicUrl: resolvePlayerBaseUrlForPublicUrl,
     forwardAnnouncementRefresh: forwardAnnouncementRefresh,
     getScreenConnections: getScreenConnections,
     forwardPlayerCommandToBaseUrl: forwardPlayerCommandToBaseUrl,

src/web/lib/region-scripts.js

@@ -1,3 +1,5 @@
+// Load and normalize browser region scripts for server-rendered player pages.
+
 const fs = require('fs');
 const path = require('path');
 

src/web/lib/web-startup.js

@@ -1,3 +1,5 @@
+// Start background services, scheduled tasks, and web application dependencies.
+
 async function initializeWebServer(options) {
   const common = options && options.common;
   const pool = options && options.pool;

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

@@ -901,10 +901,6 @@
   padding: 0.75rem 1rem;
 }
 
-.onboarding-pairing-card.is-pairing .card-body > :not(.onboarding-pairing-progress) {
-  opacity: 0.55;
-}
-
 .onboarding-pairing-progress {
   display: flex;
   align-items: center;

src/web/public/js/admin/admin-page.js

@@ -969,8 +969,11 @@
       }
 
       if (typeof rawJson !== 'string' || !rawJson.trim()) {
-        if (button) {
-          button.classList.add('d-none');
+        if (collapseButton) {
+          collapseButton.classList.add('d-none');
+        }
+        if (expandButton) {
+          expandButton.classList.add('d-none');
         }
         return;
       }
@@ -979,8 +982,11 @@
       try {
         parsedJson = JSON.parse(rawJson);
       } catch (_error) {
-        if (button) {
-          button.classList.add('d-none');
+        if (collapseButton) {
+          collapseButton.classList.add('d-none');
+        }
+        if (expandButton) {
+          expandButton.classList.add('d-none');
         }
         return;
       }

src/web/public/js/dashboard/dashboard-page.js

@@ -35,7 +35,7 @@
   function getSelectedScreenClients(state) {
     var select = getScreenCommandSelect();
     var selectedSlug = select ? String(select.value || '').trim() : '';
-    var clients = Array.isArray(state && state.clients) ? state.clients : [];
+    var clients = state && Array.isArray(state.clients) ? state.clients : [];
 
     if (!selectedSlug || selectedSlug === '__all__') {
       return clients;
@@ -336,15 +336,16 @@
     var blackoutButtonLabel = blackout ? 'Restore client' : 'Blackout client';
     var blackoutButtonText = blackout ? 'Restore' : 'Blackout';
     var reloadConfirmMessage = 'Reloading will restart the player page. Continue?';
+    var commandTargetId = client.clientId || client.id || '';
 
     return [
       '<div class="actions justify-content-end">',
-      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-confirm-message="' + escapeHtml(reloadConfirmMessage) + '" data-async-command><input type="hidden" name="command" value="reload" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-danger" data-action="reload" aria-label="Reload client" title="Reload client"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-confirm-message="' + escapeHtml(reloadConfirmMessage) + '" data-async-command><input type="hidden" name="command" value="reload" /><input type="hidden" name="connectionId" value="' + escapeHtml(commandTargetId) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-danger" data-action="reload" aria-label="Reload client" title="Reload client"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></button></form>',
       '<button type="button" class="btn btn-sm btn-danger" data-action="move-screen" aria-label="Move client to another screen" title="Move client to another screen"><i class="bi bi-display" aria-hidden="true"></i></button>',
-      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="previous" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="previous" aria-label="Previous slide" title="Previous slide"><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></button></form>',
-      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="next" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="next" aria-label="Next slide" title="Next slide"><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></button></form>',
-      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="pause" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="' + pauseButtonClass + '" data-action="pause" aria-label="' + pauseButtonLabel + '" title="' + pauseButtonLabel + '"><i class="bi ' + pauseButtonIcon + ' me-1" aria-hidden="true"></i>' + pauseButtonText + '</button></form>',
-      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="blackout" /><input type="hidden" name="blackout" value="' + (blackout ? 'false' : 'true') + '" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="' + blackoutButtonClass + '" data-action="blackout" aria-label="' + blackoutButtonLabel + '" title="' + blackoutButtonLabel + '"><i class="bi ' + blackoutButtonIcon + ' me-1" aria-hidden="true"></i>' + blackoutButtonText + '</button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="previous" /><input type="hidden" name="connectionId" value="' + escapeHtml(commandTargetId) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="previous" aria-label="Previous slide" title="Previous slide"><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="next" /><input type="hidden" name="connectionId" value="' + escapeHtml(commandTargetId) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="next" aria-label="Next slide" title="Next slide"><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="pause" /><input type="hidden" name="connectionId" value="' + escapeHtml(commandTargetId) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="' + pauseButtonClass + '" data-action="pause" aria-label="' + pauseButtonLabel + '" title="' + pauseButtonLabel + '"><i class="bi ' + pauseButtonIcon + ' me-1" aria-hidden="true"></i>' + pauseButtonText + '</button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="blackout" /><input type="hidden" name="blackout" value="' + (blackout ? 'false' : 'true') + '" /><input type="hidden" name="connectionId" value="' + escapeHtml(commandTargetId) + '" /><input type="hidden" name="playerBaseUrl" value="' + escapeHtml(client.player_url || '') + '" /><button type="submit" class="' + blackoutButtonClass + '" data-action="blackout" aria-label="' + blackoutButtonLabel + '" title="' + blackoutButtonLabel + '"><i class="bi ' + blackoutButtonIcon + ' me-1" aria-hidden="true"></i>' + blackoutButtonText + '</button></form>',
       '</div>'
     ].join('');
   }
@@ -368,7 +369,7 @@
     }
 
     var currentScreenSlug = String(row.getAttribute('data-client-screen-slug') || '').trim();
-    var connectionId = String(row.getAttribute('data-client-id') || '').trim();
+    var connectionId = String(row.getAttribute('data-client-client-id') || row.getAttribute('data-client-id') || '').trim();
     var clientId = String(row.getAttribute('data-client-client-id') || '').trim();
     var playerBaseUrl = String(row.getAttribute('data-client-player-base-url') || '').trim();
     var clientNameCell = row.querySelector('td[data-label="Client"] > div');
@@ -428,7 +429,7 @@
       }
       var connectionInput = pauseForm.querySelector('input[name="connectionId"]');
       if (connectionInput) {
-        connectionInput.value = client.id || '';
+        connectionInput.value = client.clientId || client.id || '';
       }
       var playerBaseUrlInput = pauseForm.querySelector('input[name="playerBaseUrl"]');
       if (playerBaseUrlInput) {
@@ -447,7 +448,7 @@
       if (reloadForm) {
         var reloadInput = reloadForm.querySelector('input[name="connectionId"]');
         if (reloadInput) {
-          reloadInput.value = client.id || '';
+          reloadInput.value = client.clientId || client.id || '';
         }
         var reloadPlayerBaseUrlInput = reloadForm.querySelector('input[name="playerBaseUrl"]');
         if (reloadPlayerBaseUrlInput) {
@@ -483,7 +484,7 @@
       }
       var blackoutConnectionInput = blackoutForm.querySelector('input[name="connectionId"]');
       if (blackoutConnectionInput) {
-        blackoutConnectionInput.value = client.id || '';
+        blackoutConnectionInput.value = client.clientId || client.id || '';
       }
       var blackoutPlayerBaseUrlInput = blackoutForm.querySelector('input[name="playerBaseUrl"]');
       if (blackoutPlayerBaseUrlInput) {
@@ -508,7 +509,7 @@
       }
       var previousConnectionInput = previousForm.querySelector('input[name="connectionId"]');
       if (previousConnectionInput) {
-        previousConnectionInput.value = client.id || '';
+        previousConnectionInput.value = client.clientId || client.id || '';
       }
       var previousPlayerBaseUrlInput = previousForm.querySelector('input[name="playerBaseUrl"]');
       if (previousPlayerBaseUrlInput) {
@@ -533,7 +534,7 @@
       }
       var nextConnectionInput = nextForm.querySelector('input[name="connectionId"]');
       if (nextConnectionInput) {
-        nextConnectionInput.value = client.id || '';
+        nextConnectionInput.value = client.clientId || client.id || '';
       }
       var nextPlayerBaseUrlInput = nextForm.querySelector('input[name="playerBaseUrl"]');
       if (nextPlayerBaseUrlInput) {

src/web/public/js/onboarding/pair.js

@@ -44,6 +44,27 @@
     lines.push(new Date().toISOString().slice(11, 19) + ' ' + value);
     scannerDebugOutput.textContent = lines.slice(-8).join('\n');
   }
+  function wait(milliseconds) {
+    return new Promise(function (resolve) { window.setTimeout(resolve, milliseconds); });
+  }
+  function submitPairing(body, attempt) {
+    return fetch(form.action, {
+      method: 'POST',
+      headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+      body: body
+    }).then(function (response) {
+      return response.text().then(function (text) {
+        var payload = null;
+        try { payload = JSON.parse(text); } catch (_error) {}
+        var transientCodeError = response.status === 401 && payload && String(payload.error || '').indexOf('valid kiosk pairing code') !== -1;
+        var transientTransportError = [502, 503, 504].indexOf(response.status) !== -1;
+        if ((!response.ok && (transientCodeError || transientTransportError)) && attempt < 2) {
+          return wait(300 * (attempt + 1)).then(function () { return submitPairing(body, attempt + 1); });
+        }
+        return { response: response, payload: payload };
+      });
+    });
+  }
 
   var codeInputs = codeInputsContainer ? Array.prototype.slice.call(codeInputsContainer.querySelectorAll('[data-pairing-code-input]')) : [];
   function normalizeCode(value) {
@@ -321,28 +342,21 @@
       if (firstEmptyInput) { firstEmptyInput.focus(); }
       return;
     }
-    message.className = 'alert alert-info';
-    message.textContent = 'Pairing player...';
+    message.className = 'alert d-none';
+    message.textContent = '';
     var pairingBody = new URLSearchParams(new FormData(form)).toString();
     if (pairingCard) { pairingCard.classList.add('is-pairing'); }
     if (pairingProgress) { pairingProgress.classList.remove('d-none'); }
     Array.prototype.slice.call(form.elements).forEach(function (element) {
       if (element !== anotherButton && element !== manualButton) { element.disabled = true; }
     });
-    fetch(form.action, {
-      method: 'POST',
-      headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
-      body: pairingBody
-    }).then(function (response) {
-      return response.text().then(function (text) {
-        var payload = null;
-        try { payload = JSON.parse(text); } catch (_error) {}
+    submitPairing(pairingBody, 0).then(function (result) {
+        var response = result.response;
+        var payload = result.payload;
         if (!response.ok) {
           throw new Error(payload && payload.error ? payload.error : 'Unable to pair player.');
         }
         if (payload && payload.queued) {
-          message.className = 'alert alert-info';
-          message.textContent = 'Pairing is still being completed. Keep this page open and wait for confirmation.';
           return;
         }
         message.className = 'alert alert-success';
@@ -363,7 +377,6 @@
         }
         if (anotherButtonLabel) { anotherButtonLabel.classList.remove('d-none'); }
         if (manualButton) { manualButton.classList.remove('d-none'); }
-      });
     }).catch(function (error) {
       if (pairingCard) { pairingCard.classList.remove('is-pairing'); }
       if (pairingProgress) { pairingProgress.classList.add('d-none'); }

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

@@ -93,8 +93,22 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     }
 
     var color = String(backgroundColor || '#111111').trim() || '#111111';
+    var gradient = '';
+    try {
+      var gradientData = typeof backgroundGradient === 'string' ? JSON.parse(backgroundGradient) : backgroundGradient;
+      if (gradientData && gradientData.type === 'linear' && ((Array.isArray(gradientData.stops) && gradientData.stops.length >= 2) || (Array.isArray(gradientData.colors) && gradientData.colors.length >= 2))) {
+        var stops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (stopColor, index, colors) { return { color: stopColor, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
+        stops = stops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
+        if (stops.length >= 2) {
+          var angle = Number(gradientData.angle);
+          gradient = 'linear-gradient(' + (Number.isFinite(angle) ? Math.max(0, Math.min(360, angle)) : 90) + 'deg,' + stops.map(function (stop) { return stop.color + ' ' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '%'; }).join(',') + ')';
+        }
+      }
+    } catch (_error) {
+      gradient = '';
+    }
     element.style.backgroundColor = color;
-    element.style.backgroundImage = backgroundImagePath ? 'url("' + encodeURI(String(backgroundImagePath)) + '")' : 'none';
+    element.style.backgroundImage = [backgroundImagePath ? 'url("' + encodeURI(String(backgroundImagePath)) + '")' : '', gradient].filter(Boolean).join(',') || 'none';
     element.style.backgroundPosition = 'center';
     element.style.backgroundSize = 'cover';
     element.style.backgroundRepeat = 'no-repeat';
@@ -110,7 +124,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     var gradient = '';
     try {
       var gradientData = typeof backgroundGradient === 'string' ? JSON.parse(backgroundGradient) : backgroundGradient;
-      if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+      if (gradientData && gradientData.type === 'linear' && ((Array.isArray(gradientData.stops) && gradientData.stops.length >= 2) || (Array.isArray(gradientData.colors) && gradientData.colors.length >= 2))) {
         var stops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
         stops = stops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
         if (stops.length >= 2) {

src/web/public/js/web-ui-helpers.js

@@ -187,163 +187,8 @@
     return ip;
   }
 
-  window.escapeHtml = escapeHtml;
   initializeUrlValidation();
 
-  var defaultQrOptions = window.defaultQrOptions || {
-    width: 1000,
-    height: 1000,
-    type: 'canvas',
-    margin: 10,
-    qrOptions: {},
-    dotsOptions: {
-      color: '#000000',
-      type: 'square'
-    },
-    cornersSquareOptions: {
-      color: '#000000',
-      type: 'square'
-    },
-    cornersDotOptions: {
-      color: '#000000',
-      type: 'square'
-    },
-    backgroundOptions: {
-      color: '#ffffff'
-    }
-  };
-  var qrDotTypes = window.qrDotTypes || [
-    { value: 'square', label: 'Square' },
-    { value: 'dots', label: 'Dots' },
-    { value: 'rounded', label: 'Rounded' },
-    { value: 'extra-rounded', label: 'Extra rounded' },
-    { value: 'classy', label: 'Classy' },
-    { value: 'classy-rounded', label: 'Classy rounded' }
-  ];
-  var qrCornerSquareTypes = window.qrCornerSquareTypes || [
-    { value: 'square', label: 'Square' },
-    { value: 'dot', label: 'Dot' },
-    { value: 'rounded', label: 'Rounded' },
-    { value: 'extra-rounded', label: 'Extra rounded' },
-    { value: 'dots', label: 'Dots' },
-    { value: 'classy', label: 'Classy' },
-    { value: 'classy-rounded', label: 'Classy rounded' }
-  ];
-  var qrCornerDotTypes = window.qrCornerDotTypes || [
-    { value: 'square', label: 'Square' },
-    { value: 'dot', label: 'Dot' },
-    { value: 'rounded', label: 'Rounded' },
-    { value: 'extra-rounded', label: 'Extra rounded' },
-    { value: 'classy', label: 'Classy' },
-    { value: 'classy-rounded', label: 'Classy rounded' }
-  ];
-
-  function getOptionValue(option) {
-    if (option && typeof option === 'object' && option.value !== undefined && option.value !== null) {
-      return String(option.value).trim();
-    }
-
-    return String(option === undefined || option === null ? '' : option).trim();
-  }
-
-  function normalizeMarginValue(value, fallback) {
-    var parsed = Number(value);
-    return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : fallback;
-  }
-
-  function normalizeHexColorValue(value, fallback) {
-    var raw = String(value === undefined || value === null ? '' : value).trim();
-    return raw || fallback;
-  }
-
-  function normalizeBooleanValue(value, fallback) {
-    if (value === undefined || value === null || value === '') {
-      return Boolean(fallback);
-    }
-    if (typeof value === 'boolean') {
-      return value;
-    }
-    var text = String(value).trim().toLowerCase();
-    if (text === 'true' || text === '1' || text === 'yes' || text === 'on') {
-      return true;
-    }
-    if (text === 'false' || text === '0' || text === 'no' || text === 'off') {
-      return false;
-    }
-    return Boolean(value);
-  }
-
-  function normalizeOptionValue(value, options, fallback) {
-    var text = String(value === undefined || value === null ? '' : value).trim();
-    for (var index = 0; index < options.length; index += 1) {
-      if (getOptionValue(options[index]) === text) {
-        return text;
-      }
-    }
-
-    return fallback;
-  }
-
-  function normalizeRatioValue(value, fallback) {
-    var parsed = Number(value);
-    return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
-  }
-
-  function normalizeGradientTypeValue(value, fallback) {
-    var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
-    return text === 'radial' ? 'radial' : 'linear';
-  }
-
-  function normalizeGradientRotationValue(value, fallback) {
-    var parsed = Number(value);
-    return Number.isFinite(parsed) ? Math.round(parsed) : fallback;
-  }
-
-  function normalizeColorModeValue(value, fallback) {
-    var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
-    return text === 'gradient' ? 'gradient' : 'single';
-  }
-
-  function normalizeColorValue(value, fallback) {
-    return normalizeHexColorValue(value, fallback);
-  }
-
-  function renderSelectOptions(options, currentValue) {
-    return options.map(function (option) {
-      var optionValue = getOptionValue(option);
-      var optionLabel = option && typeof option === 'object' && option.label !== undefined ? option.label : optionValue;
-      return '<option value="' + escapeHtml(optionValue) + '"' + (String(optionValue) === String(currentValue) ? ' selected' : '') + '>' + escapeHtml(optionLabel) + '</option>';
-    }).join('');
-  }
-
-  function normalizeSvgMarkup(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 normalizeQrSvg(svg) {
-    return normalizeSvgMarkup(svg);
-  }
-
   async function blobToText(blob) {
     if (!blob) {
       return '';
@@ -369,23 +214,8 @@
     return '';
   }
 
-  window.defaultQrOptions = defaultQrOptions;
-  window.qrDotTypes = qrDotTypes;
-  window.qrCornerSquareTypes = qrCornerSquareTypes;
-  window.qrCornerDotTypes = qrCornerDotTypes;
-  window.normalizeMarginValue = normalizeMarginValue;
-  window.normalizeHexColorValue = normalizeHexColorValue;
-  window.normalizeBooleanValue = normalizeBooleanValue;
-  window.normalizeOptionValue = normalizeOptionValue;
-  window.normalizeRatioValue = normalizeRatioValue;
-  window.normalizeGradientTypeValue = normalizeGradientTypeValue;
-  window.normalizeGradientRotationValue = normalizeGradientRotationValue;
-  window.normalizeColorModeValue = normalizeColorModeValue;
-  window.normalizeColorValue = normalizeColorValue;
-  window.renderSelectOptions = renderSelectOptions;
-  window.normalizeSvgMarkup = normalizeSvgMarkup;
-  window.normalizeQrSvg = normalizeQrSvg;
   window.blobToText = blobToText;
+  window.escapeHtml = escapeHtml;
   window.pendingByRegionId = window.pendingByRegionId || Object.create(null);
 
   window.webUiHelpers = {

src/web/routes/admin/client-commands.js

@@ -7,8 +7,10 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
   const common = deps.common;
   const forwardPlayerCommand = deps.forwardPlayerCommand;
   const forwardPlayerCommandToBaseUrl = deps.forwardPlayerCommandToBaseUrl;
+  const forwardPlayerCommandToDevice = deps.forwardPlayerCommandToDevice;
   const getScreenConnections = deps.getScreenConnections;
   const isClientNameAvailable = deps.isClientNameAvailable;
+  const findAvailableClientName = deps.findAvailableClientName;
   const withClientNameReservation = deps.withClientNameReservation;
   const broadcastDashboardState = deps.broadcastDashboardState;
   const requirePermission = deps.requirePermission;
@@ -103,12 +105,51 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
   }
 
   async function forwardPlayerCommandForConnections(screenSlug, connections, commandPayload, connectionId, deviceId) {
-    const targetBaseUrls = await resolvePlayerBaseUrlsForConnections(connections);
+    const connectionList = Array.isArray(connections) ? connections : [];
+    const targetedConnections = connectionId
+      ? connectionList.filter(function (connection) {
+        const candidateConnectionId = String(connection && connection.id || '').trim();
+        const candidateClientId = String(connection && connection.clientId || '').trim();
+        const candidateDeviceId = String(connection && connection.deviceId || '').trim();
+        return candidateConnectionId === connectionId
+          || candidateClientId === connectionId
+          || candidateDeviceId === connectionId;
+      })
+      : (deviceId
+        ? connectionList.filter(function (connection) {
+          return String(connection && connection.deviceId || '').trim() === String(deviceId).trim();
+        })
+        : connectionList);
+    const remoteConnections = targetedConnections.filter(function (connection) {
+      return String(connection && connection.playerDeviceId || '').trim();
+    });
+    const localConnections = targetedConnections.filter(function (connection) {
+      return !String(connection && connection.playerDeviceId || '').trim();
+    });
+    const deviceTargets = Array.from(new Set(remoteConnections.map(function (connection) {
+      return String(connection && connection.playerDeviceId || '').trim();
+    }).filter(Boolean)));
+    const results = [];
+    if (deviceTargets.length && typeof forwardPlayerCommandToDevice === 'function') {
+      const remoteResults = await Promise.allSettled(deviceTargets.map(function (targetDeviceId) {
+        const payload = Object.assign({ screenSlug: screenSlug }, commandPayload || {});
+        if (connectionId) {
+          payload.connectionId = connectionId;
+        }
+        return forwardPlayerCommandToDevice(targetDeviceId, payload);
+      }));
+      results.push.apply(results, remoteResults);
+    }
+
+    const targetBaseUrls = await resolvePlayerBaseUrlsForConnections(localConnections);
     if (targetBaseUrls.length && typeof forwardPlayerCommandToBaseUrl === 'function') {
-      const results = await Promise.allSettled(targetBaseUrls.map(function (targetBaseUrl) {
+      const localResults = await Promise.allSettled(targetBaseUrls.map(function (targetBaseUrl) {
         return forwardPlayerCommandToBaseUrl(targetBaseUrl, screenSlug, commandPayload, connectionId || deviceId || undefined);
       }));
+      results.push.apply(results, localResults);
+    }
 
+    if (results.length) {
       return {
         ok: true,
         sent: results.filter(function (result) {
@@ -297,8 +338,8 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
             liveConnections = [];
           }
 
-          const available = await isClientNameAvailable(pool, clientName, bindingDeviceId, liveConnections);
-          if (!available) {
+          const selectedClientName = await findAvailableClientName(pool, clientName, bindingDeviceId, liveConnections);
+          if (!selectedClientName) {
             return res.status(409).json({ error: 'Client name already exists.' });
           }
 
@@ -306,14 +347,14 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
             if (playerBaseUrl) {
               await forwardPlayerCommandForPlayerBaseUrl(slug, playerBaseUrl, {
                 command: command,
-                clientName: clientName,
+                clientName: selectedClientName,
                 clientId: connectionId || deviceId || null,
                 deviceId: deviceId || null
               }, connectionId || deviceId || undefined, deviceId || null);
             } else {
               await forwardPlayerCommandForConnections(slug, liveConnections, {
                 command: command,
-                clientName: clientName,
+                clientName: selectedClientName,
                 clientId: connectionId || deviceId || null,
                 deviceId: deviceId || null
               }, connectionId || deviceId || undefined, deviceId || null);
@@ -329,7 +370,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
               command: command,
               connectionId: connectionId || null,
               deviceId: deviceId,
-              clientName: clientName,
+              clientName: selectedClientName,
               ok: true,
               liveOnly: true
             });
@@ -339,7 +380,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
             `UPDATE d_onboarding_devices
              SET client_name = ?, modified_at = CURRENT_TIMESTAMP
              WHERE device_id = ?`,
-            [clientName, bindingDeviceId]
+            [selectedClientName, bindingDeviceId]
           );
           if (!updateResult.affectedRows) {
             return res.status(404).json({ error: 'Client not found' });
@@ -351,7 +392,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
             command: command,
             connectionId: connectionId || null,
             deviceId: deviceId,
-            clientName: clientName,
+            clientName: selectedClientName,
             ok: true
           });
         });
@@ -360,42 +401,71 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
       if (command === 'moveclient') {
         const legacyDeviceId = String((req.body && req.body.deviceId) || req.query.deviceId || '').trim();
         let physicalPlayerId = '';
+        let registeredPlayerBaseUrl = '';
         const tabClientId = String((req.body && req.body.clientId) || req.query.clientId || '').trim();
         const clientName = String((req.body && req.body.clientName) || req.query.clientName || '').trim();
         const targetScreenSlug = String((req.body && (req.body.targetScreenSlug || req.body.screenSlug)) || req.query.targetScreenSlug || req.query.screenSlug || '').trim();
         const submittedPlayerBaseUrl = normalizeExplicitPlayerBaseUrl(playerBaseUrl);
+        const liveConnections = await fetchScreenConnections(slug);
+        const liveConnection = liveConnections.find(function (connection) {
+          const candidateConnectionId = String(connection && connection.id || '').trim();
+          const candidateClientId = String(connection && connection.clientId || '').trim();
+          return candidateConnectionId === connectionId || candidateClientId === connectionId;
+        }) || null;
+        const liveDeviceId = String(liveConnection && liveConnection.deviceId || '').trim();
+        const livePlayerDeviceId = String(liveConnection && liveConnection.playerDeviceId || '').trim();
+        const livePlayerBaseUrl = normalizeExplicitPlayerBaseUrl(liveConnection && liveConnection.playerPublicBaseUrl);
 
-        if (!connectionId && !submittedPlayerBaseUrl && !legacyDeviceId) {
+        if (!connectionId && !submittedPlayerBaseUrl && !legacyDeviceId && !liveDeviceId) {
           return res.status(400).json({ error: 'Client connection is required' });
         }
         if (!targetScreenSlug) {
           return res.status(400).json({ error: 'Target screen is required' });
         }
 
-        if (submittedPlayerBaseUrl) {
+        if (livePlayerDeviceId) {
+          physicalPlayerId = livePlayerDeviceId;
+        } else if (livePlayerBaseUrl || submittedPlayerBaseUrl) {
           const [playerRows] = await pool.query(
-            'SELECT identifier FROM d_players WHERE public_base_url = ? LIMIT 1',
-            [submittedPlayerBaseUrl]
+            'SELECT identifier, public_base_url FROM d_players WHERE public_base_url = ? LIMIT 1',
+            [livePlayerBaseUrl || submittedPlayerBaseUrl]
           );
-          const registeredPlayerId = String(playerRows[0] && playerRows[0].identifier || '').trim();
-          if (registeredPlayerId) {
-            physicalPlayerId = registeredPlayerId;
-          }
+          const registeredPlayer = playerRows[0] || null;
+          physicalPlayerId = String(registeredPlayer && registeredPlayer.identifier || '').trim();
+          registeredPlayerBaseUrl = normalizeExplicitPlayerBaseUrl(registeredPlayer && registeredPlayer.public_base_url);
+        } else if (legacyDeviceId || liveDeviceId) {
+          const [playerRows] = await pool.query(
+            'SELECT identifier, public_base_url FROM d_players WHERE identifier = ? LIMIT 1',
+            [legacyDeviceId || liveDeviceId]
+          );
+          const registeredPlayer = playerRows[0] || null;
+          physicalPlayerId = String(registeredPlayer && registeredPlayer.identifier || '').trim();
+          registeredPlayerBaseUrl = normalizeExplicitPlayerBaseUrl(registeredPlayer && registeredPlayer.public_base_url);
         }
-
-        physicalPlayerId = physicalPlayerId || legacyDeviceId;
         if (!physicalPlayerId) {
           return res.status(400).json({ error: 'Registered player identity is required' });
         }
 
-        const [currentRows] = await pool.query(
-          `SELECT d.client_name, s.slug AS current_screen_slug
-           FROM d_onboarding_devices d
-           LEFT JOIN d_screens s ON s.id = d.screen_id
-           WHERE d.device_id = ?
-           LIMIT 1`,
-          [physicalPlayerId]
-        );
+        let [currentRows] = tabClientId
+          ? await pool.query(
+            `SELECT d.client_name, s.slug AS current_screen_slug
+             FROM d_onboarding_devices d
+             LEFT JOIN d_screens s ON s.id = d.screen_id
+             WHERE d.device_id = ?
+             LIMIT 1`,
+            [tabClientId]
+          )
+          : [[]];
+        if (!currentRows.length && physicalPlayerId && physicalPlayerId !== tabClientId) {
+          [currentRows] = await pool.query(
+            `SELECT d.client_name, s.slug AS current_screen_slug
+             FROM d_onboarding_devices d
+             LEFT JOIN d_screens s ON s.id = d.screen_id
+             WHERE d.device_id = ?
+             LIMIT 1`,
+            [physicalPlayerId]
+          );
+        }
         const onboardingRow = currentRows[0] || null;
         const resolvedClientName = String(clientName || onboardingRow && onboardingRow.client_name || '').trim();
         const currentScreenSlug = String(onboardingRow && onboardingRow.current_screen_slug || '').trim();
@@ -418,7 +488,6 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           });
         }
 
-        const liveConnections = await fetchScreenConnections(slug);
         let status = null;
         if (onboardingRow) {
           const [targetRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ? LIMIT 1', [targetScreenSlug]);
@@ -485,14 +554,20 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           };
         }
         let targetPlayerUrl = '';
-        const liveConnection = Array.isArray(liveConnections)
+        const matchedLiveConnection = Array.isArray(liveConnections)
           ? liveConnections.find(function (connection) {
-              const candidateConnectionId = String(connection && (connection.id || connection.clientId) || '').trim();
+              const candidateConnectionId = String(connection && connection.id || '').trim();
+              const candidateClientId = String(connection && connection.clientId || '').trim();
               const candidateDeviceId = String(connection && connection.deviceId || '').trim();
-              return candidateConnectionId === connectionId || candidateConnectionId === physicalPlayerId || candidateDeviceId === physicalPlayerId;
+              return candidateConnectionId === connectionId
+                || candidateClientId === connectionId
+                || candidateConnectionId === physicalPlayerId
+                || candidateClientId === physicalPlayerId
+                || candidateDeviceId === physicalPlayerId;
             }) || liveConnections[0] || null
           : null;
-        const sourcePlayerBaseUrl = normalizeExplicitPlayerBaseUrl(playerBaseUrl || (liveConnection && liveConnection.playerPublicBaseUrl) || '');
+        const sourcePlayerBaseUrl = livePlayerDeviceId ? '' : registeredPlayerBaseUrl
+          || normalizeExplicitPlayerBaseUrl(matchedLiveConnection && matchedLiveConnection.playerPublicBaseUrl);
         if (sourcePlayerBaseUrl) {
           targetPlayerUrl = `${sourcePlayerBaseUrl}/screen/${encodeURIComponent(targetScreenSlug)}`;
         }
@@ -505,8 +580,14 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           connectionId: connectionId || null,
           screenSlug: targetScreenSlug
         });
-        if (playerBaseUrl) {
-          await forwardPlayerCommandForPlayerBaseUrl(slug, playerBaseUrl, {
+        if (livePlayerDeviceId) {
+          await forwardPlayerCommandForConnections(slug, liveConnections, {
+            command: 'redirect',
+            url: targetPlayerUrl,
+            moveToken: moveToken || null
+          }, connectionId || physicalPlayerId || undefined, physicalPlayerId || null);
+        } else if (sourcePlayerBaseUrl) {
+          await forwardPlayerCommandForPlayerBaseUrl(slug, sourcePlayerBaseUrl, {
             command: 'redirect',
             url: targetPlayerUrl,
             moveToken: moveToken || null
@@ -544,9 +625,21 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
       }
 
       const liveConnections = await fetchScreenConnections(slug);
-      const result = playerBaseUrl
-        ? await forwardPlayerCommandForPlayerBaseUrl(slug, playerBaseUrl, commandPayload, connectionId, null)
-        : await forwardPlayerCommandForConnections(slug, liveConnections, commandPayload, connectionId, null);
+      const liveConnection = connectionId
+        ? liveConnections.find(function (connection) {
+            const candidateConnectionId = String(connection && connection.id || '').trim();
+            const candidateClientId = String(connection && connection.clientId || '').trim();
+            return candidateConnectionId === connectionId || candidateClientId === connectionId;
+          })
+        : null;
+      const livePlayerBaseUrl = normalizeExplicitPlayerBaseUrl(liveConnection && liveConnection.playerPublicBaseUrl);
+      const targetPlayerBaseUrl = livePlayerBaseUrl || playerBaseUrl;
+      const liveDeviceId = String(liveConnection && liveConnection.playerDeviceId || '').trim();
+      const result = liveDeviceId && typeof forwardPlayerCommandToDevice === 'function'
+        ? await forwardPlayerCommandToDevice(liveDeviceId, Object.assign({ screenSlug: slug }, commandPayload, connectionId ? { connectionId: connectionId } : {}))
+        : targetPlayerBaseUrl
+          ? await forwardPlayerCommandForPlayerBaseUrl(slug, targetPlayerBaseUrl, commandPayload, connectionId, null)
+          : await forwardPlayerCommandForConnections(slug, liveConnections, commandPayload, connectionId, null);
 
       if (typeof broadcastDashboardState === 'function') {
         await broadcastDashboardState();

src/web/routes/admin/manage.js

@@ -15,6 +15,7 @@ module.exports = function registerManageRoutes(app, deps) {
   const getScreenConnections = deps.getScreenConnections;
   const forwardPlayerCommand = deps.forwardPlayerCommand;
   const forwardPlayerCommandToBaseUrl = deps.forwardPlayerCommandToBaseUrl;
+  const forwardPlayerCommandToDevice = deps.forwardPlayerCommandToDevice;
   const requirePermission = deps.requirePermission;
 
   const SCREEN_NAME_MAX_LENGTH = 255;
@@ -88,12 +89,30 @@ module.exports = function registerManageRoutes(app, deps) {
   }
 
   async function forwardPlayerCommandForConnections(slug, connections, commandPayload) {
-    const targetBaseUrls = await resolvePlayerBaseUrlsForConnections(connections);
+    const connectionList = Array.isArray(connections) ? connections : [];
+    const remoteDeviceIds = Array.from(new Set(connectionList.map(function (connection) {
+      return String(connection && connection.playerDeviceId || '').trim();
+    }).filter(Boolean)));
+    const localConnections = connectionList.filter(function (connection) {
+      return !String(connection && connection.playerDeviceId || '').trim();
+    });
+    const results = [];
+    if (remoteDeviceIds.length && typeof forwardPlayerCommandToDevice === 'function') {
+      const remoteResults = await Promise.allSettled(remoteDeviceIds.map(function (deviceId) {
+        return forwardPlayerCommandToDevice(deviceId, Object.assign({ screenSlug: slug }, commandPayload || {}));
+      }));
+      results.push.apply(results, remoteResults);
+    }
+
+    const targetBaseUrls = await resolvePlayerBaseUrlsForConnections(localConnections);
     if (targetBaseUrls.length && typeof forwardPlayerCommandToBaseUrl === 'function') {
-      const results = await Promise.allSettled(targetBaseUrls.map(function (targetBaseUrl) {
+      const localResults = await Promise.allSettled(targetBaseUrls.map(function (targetBaseUrl) {
         return forwardPlayerCommandToBaseUrl(targetBaseUrl, slug, commandPayload);
       }));
+      results.push.apply(results, localResults);
+    }
 
+    if (results.length) {
       return {
         ok: true,
         sent: results.filter(function (result) {

src/web/routes/onboarding.js

@@ -1,7 +1,15 @@
+// Web routes for pairing players and completing onboarding device bindings.
+
 const { createRequestAuthHeaders } = require('#src/request-auth');
 const { fetchPlayerRegistrations } = require('#src/data/player-registry');
 const { renderView } = require('../view');
 
+function wait(milliseconds) {
+  return new Promise(function (resolve) {
+    setTimeout(resolve, milliseconds);
+  });
+}
+
 module.exports = function registerOnboardingRoutes(app, deps) {
   const pool = deps.pool;
   const playerInternalBaseUrl = String(deps.playerInternalBaseUrl || '').replace(/\/$/, '');
@@ -40,11 +48,19 @@ module.exports = function registerOnboardingRoutes(app, deps) {
       {
         const resolvePath = '/api/onboarding/resolve?pairingCode=' + encodeURIComponent(pairingCode);
         const resolveAuthHeaders = createRequestAuthHeaders({ method: 'GET', pathname: '/api/onboarding/resolve' });
-        const resolveResponse = await fetch(`${targetBaseUrl}${resolvePath}`, {
-          method: 'GET',
-          headers: Object.assign({ Accept: 'application/json' }, resolveAuthHeaders)
-        });
-        const resolveBody = await resolveResponse.text();
+        let resolveResponse = null;
+        let resolveBody = '';
+        for (let attempt = 0; attempt < 5; attempt += 1) {
+          resolveResponse = await fetch(`${targetBaseUrl}${resolvePath}`, {
+            method: 'GET',
+            headers: Object.assign({ Accept: 'application/json' }, resolveAuthHeaders)
+          });
+          resolveBody = await resolveResponse.text();
+          if (resolveResponse.status !== 401 || resolveBody.indexOf('valid kiosk pairing code') === -1 || attempt === 4) {
+            break;
+          }
+          await wait(200 * (attempt + 1));
+        }
         let resolved = null;
         try { resolved = JSON.parse(resolveBody); } catch (_error) {}
         if (!resolveResponse.ok || !resolved || !resolved.deviceId) {
@@ -59,11 +75,19 @@ module.exports = function registerOnboardingRoutes(app, deps) {
           for (const remoteRegistration of remoteRegistrations) {
             targetBaseUrl = String(remoteRegistration.internal_base_url).replace(/\/$/, '');
             const bridgeResolveHeaders = createRequestAuthHeaders({ method: 'GET', pathname: '/api/onboarding/resolve' });
-            const bridgeResolveResponse = await fetch(`${targetBaseUrl}/api/onboarding/resolve?pairingCode=${encodeURIComponent(pairingCode)}`, {
-              method: 'GET',
-              headers: Object.assign({ Accept: 'application/json' }, bridgeResolveHeaders)
-            });
-            const bridgeResolveBody = await bridgeResolveResponse.text();
+            let bridgeResolveResponse = null;
+            let bridgeResolveBody = '';
+            for (let attempt = 0; attempt < 5; attempt += 1) {
+              bridgeResolveResponse = await fetch(`${targetBaseUrl}/api/onboarding/resolve?pairingCode=${encodeURIComponent(pairingCode)}`, {
+                method: 'GET',
+                headers: Object.assign({ Accept: 'application/json' }, bridgeResolveHeaders)
+              });
+              bridgeResolveBody = await bridgeResolveResponse.text();
+              if (bridgeResolveResponse.status !== 401 || bridgeResolveBody.indexOf('valid kiosk pairing code') === -1 || attempt === 4) {
+                break;
+              }
+              await wait(200 * (attempt + 1));
+            }
             try { resolved = JSON.parse(bridgeResolveBody); } catch (_error) { resolved = null; }
             if (bridgeResolveResponse.ok && resolved && resolved.deviceId) {
               break;
@@ -84,12 +108,20 @@ module.exports = function registerOnboardingRoutes(app, deps) {
       }
       const payload = { clientId: resolvedClientId, pairingCode: pairingCode, clientName: clientName, screenSlug: screenSlug };
       const authHeaders = createRequestAuthHeaders({ method: 'POST', pathname: '/api/onboarding', body: payload });
-      const response = await fetch(`${targetBaseUrl}/api/onboarding`, {
-        method: 'POST',
-        headers: Object.assign({ 'Content-Type': 'application/json', Accept: 'application/json' }, authHeaders),
-        body: JSON.stringify(payload)
-      });
-      const responseBody = await response.text();
+      let response = null;
+      let responseBody = '';
+      for (let attempt = 0; attempt < 5; attempt += 1) {
+        response = await fetch(`${targetBaseUrl}/api/onboarding`, {
+          method: 'POST',
+          headers: Object.assign({ 'Content-Type': 'application/json', Accept: 'application/json' }, authHeaders),
+          body: JSON.stringify(payload)
+        });
+        responseBody = await response.text();
+        if (response.status !== 401 || responseBody.indexOf('valid kiosk pairing code') === -1 || attempt === 4) {
+          break;
+        }
+        await wait(200 * (attempt + 1));
+      }
       res.status(response.status).type(response.headers.get('content-type') || 'application/json').send(responseBody);
     } catch (error) {
       res.status(502).json({ error: error && error.message ? error.message : 'Player unavailable.' });

src/web/routes/register.js

@@ -180,8 +180,10 @@ function registerSignageRoutes(app, deps) {
     common: deps.common,
     forwardPlayerCommand: deps.playerActionService.forwardPlayerCommand,
     forwardPlayerCommandToBaseUrl: deps.playerActionService.forwardPlayerCommandToBaseUrl,
+    forwardPlayerCommandToDevice: deps.playerActionService.forwardPlayerCommandToDevice,
     getScreenConnections: deps.playerActionService.getScreenConnections,
     isClientNameAvailable: deps.isClientNameAvailable,
+    findAvailableClientName: deps.findAvailableClientName,
     withClientNameReservation: deps.withClientNameReservation,
     broadcastDashboardState: deps.broadcastDashboardState,
     requirePermission: deps.requirePermission

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

@@ -4,8 +4,7 @@ function buildScreenFormViewModel(screen, data, message, currentUser, isEdit) {
   const viewScreen = Object.assign({
     name: '',
     slug: '',
-    playlist_id: null,
-    player_urls: []
+    playlist_id: null
   }, screen || {});
 
   return {

src/web/routes/signage/screens/routes.js

@@ -1,7 +1,6 @@
 // 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;
@@ -12,14 +11,6 @@ module.exports = function registerScreensRoutes(app, deps) {
   const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
-  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;
-  }
-
   const LIST_PAGE_SIZE = 25;
   const batTemplatePath = require.resolve('#root/scripts/pulse-signage-kiosk.bat');
   const shTemplatePath = require.resolve('#root/scripts/pulse-signage-kiosk.sh');
@@ -90,26 +81,6 @@ 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 : []).filter(function (player) {
-      return isRecentPlayerRegistration(player, 60);
-    }).map(function (player) {
-      const baseUrl = String(player && player.public_base_url || '').trim().replace(/\/$/, '');
-      const playerUrl = screenPlayerUrl(screen && screen.slug ? screen.slug : '', baseUrl);
-      return {
-        identifier: String(player && player.identifier || '').trim(),
-        public_base_url: baseUrl || null,
-        player_url: playerUrl || null
-      };
-    }).sort(function (left, right) {
-      return String(left && left.identifier || '').localeCompare(String(right && right.identifier || ''), undefined, { sensitivity: 'base', numeric: true });
-    });
-  }
-
   function buildLauncherContent(templatePath, playerUrl) {
     const template = fs.readFileSync(templatePath, 'utf8');
     const normalizedPlayerUrl = String(playerUrl || '').trim();
@@ -139,10 +110,6 @@ module.exports = function registerScreensRoutes(app, deps) {
         if (!screen) {
           return res.status(404).send('Screen not found');
         }
-        screen.player_urls = await buildScreenPlayerUrls(screen);
-        if (screen.player_urls.length) {
-          screen.launcher_downloads = launcherDownloadPaths;
-        }
         screen.inUse = Boolean(await getScreenDeleteBlockMessage(pool, screen, deps.getScreenConnections));
         const editData = await common.fetchScreenEditData(pool);
         return res.send(pages.renderScreenEditPage(screen, editData, req.query.message ? String(req.query.message) : '', req.currentUser));
@@ -168,10 +135,6 @@ module.exports = function registerScreensRoutes(app, deps) {
       if (!screen) {
         return res.status(404).send('Screen not found');
       }
-      screen.player_urls = await buildScreenPlayerUrls(screen);
-      if (screen.player_urls.length) {
-        screen.launcher_downloads = launcherDownloadPaths;
-      }
       screen.inUse = Boolean(await getScreenDeleteBlockMessage(pool, screen, deps.getScreenConnections));
       const editData = await common.fetchScreenEditData(pool);
       return res.send(pages.renderScreenEditPage(screen, editData, req.query.message ? String(req.query.message) : '', req.currentUser));

src/web/views/data-sources/weather/forecast-preview.hbs

@@ -3,7 +3,7 @@
   <div class="card-body">
     {{#if weatherPreview.hasSnapshot}}
       <div id="weather-daily-forecast" class="weather-daily-forecast">{{#each weatherPreview.forecast}}<div class="border rounded p-2 h-100 text-center"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><div class="small mb-2">{{condition}}</div><strong>{{high}}°</strong><span class="text-body-secondary ms-2">{{low}}°</span><div class="small text-body-secondary mt-2"><i class="bi bi-droplet me-1"></i>{{rain}} rain</div></div>{{/each}}</div>
-      <div id="weather-hourly-forecast"><div class="small text-body-secondary mb-2">Hourly forecast · next 24 hours</div><div class="d-flex gap-2 overflow-auto pb-2">{{#each weatherPreview.hourly}}<div class="border rounded p-2 text-center flex-shrink-0 weather-preview-hourly-item"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><strong>{{temperature}}°</strong><div class="small text-body-secondary mt-1"><i class="bi bi-droplet me-1"></i>{{rain}}</div></div>{{/each}}</div></div>
+      <div id="weather-hourly-forecast" class="d-none"><div class="d-flex gap-2 overflow-auto pb-2">{{#each weatherPreview.hourly}}<div class="border rounded p-2 text-center flex-shrink-0 weather-preview-hourly-item"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><strong>{{temperature}}°</strong><div class="small text-body-secondary mt-1"><i class="bi bi-droplet me-1"></i>{{rain}}</div></div>{{/each}}</div></div>
     {{else}}
       <div class="small text-body-secondary">Daily and hourly forecasts will appear here after the first successful fetch.</div>
     {{/if}}

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

@@ -1,12 +1,12 @@
 <div class="page-header">
   <div>
     <h2>{{#if isEdit}}Edit screen group - {{screen.name}}{{else}}Add screen group{{/if}}</h2>
-    <p>{{#if isEdit}}Update the display name and assigned playlist.{{else}}Register a player endpoint and connect it to a playlist.{{/if}}</p>
+    <p>{{#if isEdit}}Update the display name and assigned playlist.{{else}}Create a screen group and connect it to a playlist.{{/if}}</p>
   </div>
 </div>
 
 <div class="row g-4">
-  <div class="col-12 col-xl-6">
+  <div class="col-12">
     <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,39 +40,4 @@
     </div>
   </div>
 
-  <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 URLs</h3>
-      </div>
-      <div class="card-body table-responsive p-0">
-        {{#if screen.player_urls.length}}
-          <table class="table table-striped w-100 mb-0" data-table-searchable>
-            <thead>
-              <tr>
-                <th>Player</th>
-                <th>URL</th>
-              </tr>
-            </thead>
-            <tbody>
-              {{#each screen.player_urls}}
-                <tr>
-                  <td data-label="Player" class="text-break">{{identifier}}</td>
-                  <td class="text-break">
-                    {{#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>
-        {{else}}
-          <p class="mb-0 p-3 text-muted">No player URLs are available yet.</p>
-        {{/if}}
-      </div>
-    </div>
-  </div>
 </div>

src/web/views/signage/slides/popup-preview.hbs

@@ -183,7 +183,7 @@
       var backgroundGradient = '';
       try {
         var gradientData = typeof payload.backgroundGradient === 'string' ? JSON.parse(payload.backgroundGradient) : payload.backgroundGradient;
-        if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+        if (gradientData && gradientData.type === 'linear' && ((Array.isArray(gradientData.stops) && gradientData.stops.length >= 2) || (Array.isArray(gradientData.colors) && gradientData.colors.length >= 2))) {
           var gradientStops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
           gradientStops = gradientStops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
           if (gradientStops.length >= 2) {

test/admin-client-commands.test.js

@@ -37,6 +37,9 @@ test('move client rebinding redirects the live player to the target screen', asy
         if (sql.includes('SELECT id, name, slug FROM d_screens WHERE slug = ?') && params && params[0] === 'target-screen') {
           return [[{ id: 27, name: 'Target Screen', slug: 'target-screen' }]];
         }
+        if (sql.includes('SELECT identifier, public_base_url FROM d_players WHERE public_base_url = ?')) {
+          return [[{ identifier: 'player-a', public_base_url: 'http://remote-player.example' }]];
+        }
         if (sql.includes('INSERT INTO d_onboarding_devices')) {
           return [{ affectedRows: 1 }];
         }
@@ -152,6 +155,149 @@ test('move client rebinding redirects the live player to the target screen', asy
   assert.equal(calls.some((entry) => entry.kind === 'forwardPlayerCommandToBaseUrl' && entry.baseUrl === 'http://remote-player.example'), true);
 });
 
+test('move client requires a registered player identity', async () => {
+  const { app, handlers } = createHandlers();
+
+  registerScreenCommandRoutes(app, {
+    pool: {
+      async query(sql) {
+        if (sql.includes('SELECT id, name, slug FROM d_screens WHERE slug = ?')) {
+          return [[{ id: 12, name: 'Source Screen', slug: 'source-screen' }]];
+        }
+        return [[]];
+      }
+    },
+    common: { fetchPlayerRegistrations: async () => [] },
+    forwardPlayerCommand: async () => ({ ok: true }),
+    forwardPlayerCommandToBaseUrl: async () => ({ ok: true }),
+    getScreenConnections: async () => ({ connections: [] }),
+    isClientNameAvailable: async () => true,
+    withClientNameReservation: async (_pool, _name, callback) => callback(),
+    broadcastDashboardState: async () => {},
+    requirePermission() {
+      return function (_req, _res, next) {
+        next();
+      };
+    }
+  });
+
+  const response = {
+    statusCode: 200,
+    body: null,
+    status(code) {
+      this.statusCode = code;
+      return this;
+    },
+    json(value) {
+      this.body = value;
+      return this;
+    }
+  };
+
+  await handlers['/clients/:slug/commands'][1]({
+    params: { slug: 'source-screen' },
+    body: {
+      command: 'moveclient',
+      deviceId: 'unregistered-device',
+      clientName: 'Lobby Client',
+      targetScreenSlug: 'target-screen',
+      playerBaseUrl: 'http://unregistered-player.example'
+    },
+    query: {}
+  }, response, () => {});
+
+  assert.equal(response.statusCode, 400);
+  assert.equal(response.body.error, 'Registered player identity is required');
+});
+
+test('move client routes a remote connection through its bridge player identity', async () => {
+  const calls = [];
+  const { app, handlers } = createHandlers();
+
+  registerScreenCommandRoutes(app, {
+    pool: {
+      async query(sql, params) {
+        if (sql.includes('SELECT id, name, slug FROM d_screens WHERE slug = ?') && params[0] === 'source-screen') {
+          return [[{ id: 12, name: 'Source Screen', slug: 'source-screen' }]];
+        }
+        if (sql.includes('SELECT d.client_name, s.slug AS current_screen_slug')) {
+          return [[{ client_name: 'Remote Client', current_screen_slug: 'source-screen' }]];
+        }
+        if (sql.includes('SELECT id, name, slug FROM d_screens WHERE slug = ?') && params[0] === 'target-screen') {
+          return [[{ id: 27, name: 'Target Screen', slug: 'target-screen' }]];
+        }
+        return [[]];
+      }
+    },
+    common: { fetchPlayerRegistrations: async () => [] },
+    forwardPlayerCommand() {
+      throw new Error('direct player fallback should not be used');
+    },
+    forwardPlayerCommandToBaseUrl() {
+      throw new Error('public URL routing should not be used');
+    },
+    forwardPlayerCommandToDevice(deviceId, payload) {
+      calls.push({ deviceId, payload });
+      return { ok: true };
+    },
+    getScreenConnections: async () => ({
+      connections: [{
+        id: 'connection-1',
+        clientId: 'connection-1',
+        deviceId: 'browser-tab-1',
+        playerDeviceId: 'remote-player-1',
+        playerPublicBaseUrl: null
+      }]
+    }),
+    isClientNameAvailable: async () => true,
+    withClientNameReservation: async (_pool, _name, callback) => callback(),
+    broadcastDashboardState: async () => {},
+    requirePermission() {
+      return function (_req, _res, next) {
+        next();
+      };
+    }
+  });
+
+  const response = {
+    statusCode: 200,
+    body: null,
+    status(code) {
+      this.statusCode = code;
+      return this;
+    },
+    json(value) {
+      this.body = value;
+      return this;
+    }
+  };
+
+  await handlers['/clients/:slug/commands'][1]({
+    params: { slug: 'source-screen' },
+    body: {
+      command: 'moveclient',
+      clientId: 'browser-tab-1',
+      clientName: 'Remote Client',
+      targetScreenSlug: 'target-screen',
+      connectionId: 'connection-1'
+    },
+    query: {}
+  }, response, (error) => { throw error; });
+
+  assert.equal(response.statusCode, 200);
+  assert.equal(response.body.ok, true);
+  assert.deepEqual(calls, [{
+    deviceId: 'remote-player-1',
+    payload: {
+      screenSlug: 'source-screen',
+      command: 'redirect',
+      url: '/screen/target-screen',
+      moveToken: calls[0] && calls[0].payload.moveToken,
+      connectionId: 'connection-1'
+    }
+  }]);
+});
+
 test('screen control commands can target all screens', async () => {
   const calls = [];
   const { app, handlers } = createHandlers();

test/client-commands-route.test.js

@@ -195,3 +195,56 @@ test('client command route forwards a single screen command', async () => {
   assert.equal(calls[0].connectionId, undefined);
   assert.equal(response.body.ok, true);
 });
+
+test('client command route uses the bridge device route without a public player URL', async () => {
+  const { app, handlers } = createAppHarness();
+  const calls = [];
+  registerScreenCommandRoutes(app, {
+    pool: {
+      async query(sql) {
+        if (String(sql).includes('SELECT id, name, slug FROM d_screens WHERE slug = ?')) {
+          return [[{ id: 1, name: 'Lobby', slug: 'lobby' }]];
+        }
+        return [[]];
+      }
+    },
+    common: { async fetchPlayerRegistrations() { return []; } },
+    forwardPlayerCommand() {
+      throw new Error('direct player fallback should not be used');
+    },
+    forwardPlayerCommandToBaseUrl() {
+      throw new Error('public URL fallback should not be used');
+    },
+    forwardPlayerCommandToDevice(deviceId, payload) {
+      calls.push({ deviceId, payload });
+      return { ok: true };
+    },
+    getScreenConnections: async () => ({
+      connections: [{ id: 'connection-1', deviceId: 'browser-tab-1', playerDeviceId: 'remote-player-1', playerPublicBaseUrl: null }]
+    }),
+    isClientNameAvailable() { return true; },
+    withClientNameReservation() {},
+    broadcastDashboardState() {},
+    requirePermission() {
+      return function (_req, _res, next) { next(); };
+    }
+  });
+
+  const response = {
+    statusCode: 200,
+    body: null,
+    status(code) { this.statusCode = code; return this; },
+    json(payload) { this.body = payload; return this; }
+  };
+  await handlers['/clients/:slug/commands'][1]({
+    params: { slug: 'lobby' },
+    body: { command: 'pause', connectionId: 'connection-1' },
+    query: {}
+  }, response, () => {});
+
+  assert.equal(response.statusCode, 200);
+  assert.deepEqual(calls, [{
+    deviceId: 'remote-player-1',
+    payload: { screenSlug: 'lobby', command: 'pause', connectionId: 'connection-1' }
+  }]);
+});

test/client-name-check.test.js

@@ -4,6 +4,7 @@ const crypto = require('node:crypto');
 
 const {
   collectLiveConnections,
+  findAvailableClientName,
   isClientNameAvailable,
   normalizeClientName,
   normalizeDeviceId,
@@ -22,7 +23,7 @@ test('collectLiveConnections returns an array safely', () => {
   assert.deepEqual(collectLiveConnections([{ clientName: 'A' }]), [{ clientName: 'A' }]);
 });
 
-test('isClientNameAvailable rejects matching db rows and live connections', async () => {
+test('isClientNameAvailable ignores stored names for offline devices', async () => {
   const pool = {
     async query(sql, params) {
       assert.match(sql, /FROM d_onboarding_devices/);
@@ -31,12 +32,28 @@ test('isClientNameAvailable rejects matching db rows and live connections', asyn
     }
   };
 
-  assert.equal(await isClientNameAvailable(pool, ' Screen A ', 'device-01', []), false);
+  assert.equal(await isClientNameAvailable(pool, ' Screen A ', 'device-01', []), true);
+  assert.equal(await isClientNameAvailable(pool, 'Screen A', 'device-01', [{ clientName: 'screen a', deviceId: 'device-99' }]), false);
   assert.equal(await isClientNameAvailable(null, 'Screen A', 'device-01', [{ clientName: 'screen a', clientId: 'device-99' }]), false);
   assert.equal(await isClientNameAvailable(null, 'Screen A', 'device-01', [{ clientName: 'screen a', clientId: 'device-01' }]), true);
   assert.equal(await isClientNameAvailable(null, '   ', 'device-01', []), false);
 });
 
+test('findAvailableClientName adds the first free numeric suffix', async () => {
+  const occupiedNames = new Set(['Lobby', 'Lobby (1)']);
+  const pool = {
+    async query(_sql, params) {
+      const name = params[0];
+      return [[occupiedNames.has(name) ? { device_id: 'active-device' } : undefined].filter(Boolean)];
+    }
+  };
+
+  assert.equal(
+    await findAvailableClientName(pool, 'Lobby', 'new-device', [{ deviceId: 'active-device' }]),
+    'Lobby (2)'
+  );
+});
+
 test('withClientNameReservation acquires and releases locks around the handler', async () => {
   const calls = [];
   const lockName = `ps_client_name_${crypto.createHash('sha1').update('screen a').digest('hex')}`;

test/data-source-refresh.test.js

@@ -1,7 +1,7 @@
 const test = require('node:test');
 const assert = require('node:assert/strict');
 
-const { refreshApiSource, refreshRssFeed } = require('../src/web/lib/data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../src/web/lib/data-source-refresh');
 
 function createConnection(options) {
   const state = Object.assign({
@@ -178,3 +178,86 @@ test('refreshRssFeed skips notifications when the RSS items are unchanged', asyn
 
   assert.deepEqual(notifyCalls, []);
 });
+
+test('refreshWeatherLocation notifies players when the forecast changes', async () => {
+  const connection = createConnection({
+    slideRows: [{ id: 12, content_json: JSON.stringify({ weather_location_id: 4 }) }],
+    screenRows: [{ slug: 'screen-c' }]
+  });
+  const notifyCalls = [];
+  const pool = { async getConnection() { return connection; } };
+  const common = {
+    async fetchWeatherLocationForecast() {
+      return { responseJson: JSON.stringify({ temperature: 21 }) };
+    },
+    parseJsonSafe(value) {
+      return JSON.parse(value);
+    }
+  };
+
+  await refreshWeatherLocation(pool, common, {
+    id: 4,
+    last_pulled_at: new Date(),
+    last_response_json: JSON.stringify({ temperature: 20 })
+  }, 42, async function (slugs, payload) {
+    notifyCalls.push({ slugs, payload });
+  });
+
+  assert.deepEqual(notifyCalls, [{ slugs: ['screen-c'], payload: 'refresh' }]);
+});
+
+test('refreshWeatherLocation skips notifications when the forecast is unchanged within the hour', async () => {
+  const connection = createConnection({
+    slideRows: [{ id: 12, content_json: JSON.stringify({ weather_location_id: 4 }) }],
+    screenRows: [{ slug: 'screen-c' }]
+  });
+  const notifyCalls = [];
+  const pool = { async getConnection() { return connection; } };
+  const snapshot = JSON.stringify({ temperature: 20 });
+  const common = {
+    async fetchWeatherLocationForecast() {
+      return { responseJson: snapshot };
+    },
+    parseJsonSafe(value) {
+      return JSON.parse(value);
+    }
+  };
+
+  await refreshWeatherLocation(pool, common, {
+    id: 4,
+    last_pulled_at: new Date(),
+    last_response_json: snapshot
+  }, 42, async function (slugs, payload) {
+    notifyCalls.push({ slugs, payload });
+  });
+
+  assert.deepEqual(notifyCalls, []);
+});
+
+test('refreshWeatherLocation notifies when an unchanged forecast crosses into a new hour', async () => {
+  const connection = createConnection({
+    slideRows: [{ id: 12, content_json: JSON.stringify({ weather_location_id: 4 }) }],
+    screenRows: [{ slug: 'screen-c' }]
+  });
+  const notifyCalls = [];
+  const pool = { async getConnection() { return connection; } };
+  const snapshot = JSON.stringify({ temperature: 20 });
+  const common = {
+    async fetchWeatherLocationForecast() {
+      return { responseJson: snapshot };
+    },
+    parseJsonSafe(value) {
+      return JSON.parse(value);
+    }
+  };
+
+  await refreshWeatherLocation(pool, common, {
+    id: 4,
+    last_pulled_at: new Date('2000-01-01T00:00:00.000Z'),
+    last_response_json: snapshot
+  }, 42, async function (slugs, payload) {
+    notifyCalls.push({ slugs, payload });
+  });
+
+  assert.deepEqual(notifyCalls, [{ slugs: ['screen-c'], payload: 'refresh' }]);
+});

test/notify-player-screens.test.js

@@ -0,0 +1,69 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const { createNotifyPlayerScreens } = require('../src/web/lib/notify-player-screens');
+
+test('playlist notifications use the player URL reported by the screen connection', async () => {
+  const calls = [];
+  const notify = createNotifyPlayerScreens(
+    async function () {
+      calls.push({ type: 'fallback' });
+      return { ok: true };
+    },
+    async function () {
+      return {
+        connections: [{ playerPublicBaseUrl: 'http://192.168.0.80:8082' }]
+      };
+    },
+    async function (baseUrl, slug, command) {
+      calls.push({ baseUrl, slug, command });
+      return { ok: true };
+    },
+    async function () {
+      return 'http://player:8081';
+    }
+  );
+
+  const count = await notify(['test'], 'refresh');
+
+  assert.equal(count, 1);
+  assert.deepEqual(calls, [{
+    baseUrl: 'http://player:8081',
+    slug: 'test',
+    command: 'refresh'
+  }]);
+});
+
+test('playlist notifications use the bridge device route for remote player connections', async () => {
+  const calls = [];
+  const notify = createNotifyPlayerScreens(
+    async function () {
+      calls.push({ type: 'fallback' });
+      return { ok: true };
+    },
+    async function () {
+      return {
+        connections: [{ playerDeviceId: 'remote-player-1', playerPublicBaseUrl: 'https://remote.example' }]
+      };
+    },
+    async function () {
+      calls.push({ type: 'base-url' });
+      return { ok: true };
+    },
+    async function () {
+      return 'http://player:8081';
+    },
+    async function (deviceId, payload) {
+      calls.push({ deviceId, payload });
+      return { ok: true };
+    }
+  );
+
+  const count = await notify(['remote-screen'], 'refresh');
+
+  assert.equal(count, 1);
+  assert.deepEqual(calls, [{
+    deviceId: 'remote-player-1',
+    payload: { command: 'refresh', screenSlug: 'remote-screen' }
+  }]);
+});

test/onboarding-device-prune.test.js

@@ -14,7 +14,27 @@ test('prunes old unbound onboarding devices without deleting completed bindings'
 
   await pruneStaleOnboardingDevices(pool);
 
-  assert.match(queryText, /modified_at < \(CURRENT_TIMESTAMP - INTERVAL 1 MINUTE\)/);
-  assert.match(queryText, /WHERE screen_id IS NULL/);
+  assert.match(queryText, /screen_id IS NULL/);
+  assert.match(queryText, /modified_at < \(CURRENT_TIMESTAMP - INTERVAL 15 MINUTE\)/);
+  assert.match(queryText, /last_seen_at < \(CURRENT_TIMESTAMP - INTERVAL 24 HOUR\)/);
   assert.doesNotMatch(queryText, /d_players\.identifier = d_onboarding_devices\.device_id/);
+});
+
+test('updates an onboarding device last-seen timestamp by device id', async () => {
+  let queryText = '';
+  let queryParams = null;
+  const pool = {
+    async query(sql, params) {
+      queryText = sql;
+      queryParams = params;
+      return [[]];
+    }
+  };
+
+  const { touchOnboardingDeviceLastSeen } = require('../src/db/common');
+  await touchOnboardingDeviceLastSeen(pool, ['device-123', 'client-123']);
+
+  assert.match(queryText, /SET last_seen_at = CURRENT_TIMESTAMP/);
+  assert.match(queryText, /WHERE device_id IN \(\?, \?\)/);
+  assert.deepEqual(queryParams, ['device-123', 'client-123']);
 });

test/player-page-commands-performance.test.js

@@ -5,9 +5,15 @@ const test = require('node:test');
 const assert = require('node:assert/strict');
 
 function loadCommandsScript(sandbox) {
+  const animationPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-animation.js');
+  const mediaPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-media.js');
+  const transitionPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-transition.js');
   const commandsPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-commands.js');
+  const animationScript = fs.readFileSync(animationPath, 'utf8');
+  const mediaScript = fs.readFileSync(mediaPath, 'utf8');
+  const transitionScript = fs.readFileSync(transitionPath, 'utf8');
   const commandsScript = fs.readFileSync(commandsPath, 'utf8');
-  vm.runInNewContext(commandsScript, sandbox, { filename: commandsPath });
+  vm.runInNewContext(animationScript + '\n' + mediaScript + '\n' + transitionScript + '\n' + commandsScript, sandbox, { filename: commandsPath });
 }
 
 function createSandbox() {
@@ -77,7 +83,8 @@ function createSandbox() {
     templateRenderPlanCache: Object.create(null),
     renderCacheViewportKey: '',
     slideTransitionTimer: null,
-    slideFadeDurationMs: 560,
+    slideFadeLengthMs: 560,
+    slideFadeOffsetMs: 280,
     slideExpiresAt: null,
     pausedRemainingMs: null,
     timer: null,
@@ -119,6 +126,9 @@ function createSandbox() {
 test('renderSlideMarkup runs post-render setup immediately', () => {
   const { sandbox, calls, rafCallbacks, app } = createSandbox();
   loadCommandsScript(sandbox);
+  sandbox.playRegionAnimations = function () {
+    calls.playRegionAnimations += 1;
+  };
 
   const returned = sandbox.renderSlideMarkup('<div class="slide">visible</div>', false);
 

test/player-page-playback.test.js

@@ -149,6 +149,125 @@ test('playlist refresh queues updates until the next slide transition', async ()
   assert.equal(calls.logDebug.some((entry) => entry.includes('applying on next slide transition')), true);
 });
 
+test('playlist refresh reloads source data after a cached snapshot receives 304', async () => {
+  const requests = [];
+  const sandbox = {
+    window: null,
+    location: { origin: 'http://localhost' },
+    Date,
+    JSON,
+    Math,
+    Number,
+    String,
+    Boolean,
+    Array,
+    Object,
+    Promise,
+    setTimeout,
+    clearTimeout,
+    console,
+    slug: 'test',
+    initialData: null,
+    currentPlaylistEtag: '"cached-etag"',
+    currentPlaylistSignature: 'cached-signature',
+    currentPlaylistFadeBetweenSlides: false,
+    currentPlaylistSkipUnavailableRtmp: false,
+    pendingPlaylistUpdate: null,
+    slides: [{ id: 1, duration_seconds: 10 }],
+    lastRenderedSlide: null,
+    activeSlidesCacheKey: '',
+    activeSlidesCacheValue: [],
+    slideMarkupCache: Object.create(null),
+    templateLayoutCache: Object.create(null),
+    templateRenderPlanCache: Object.create(null),
+    getCurrentActiveSlides() { return sandbox.slides; },
+    getPlaylistRevision(data) { return data.signature; },
+    normalizeSlide(slide) { return slide; },
+    getActiveSlidesFrom(slideList) { return slideList; },
+    savePlaylistSnapshot() {},
+    markRefreshHealthy() {},
+    setOfflineBannerVisible() {},
+    scheduleRefreshRetry() {},
+    syncWebpagePreloads() {},
+    syncRtmpWarmups() {},
+    showCurrent() {},
+    sendCommandState() {},
+    scheduleSlideAdvance() {},
+    logDebug() {}
+  };
+  sandbox.window = sandbox;
+
+  class XhrStub {
+    open(method, url) {
+      this.method = method;
+      this.url = url;
+      requests.push(this);
+    }
+
+    setRequestHeader(name, value) {
+      this.headers = this.headers || {};
+      this.headers[name] = value;
+    }
+
+    getResponseHeader() { return ''; }
+
+    send() {
+      this.readyState = 4;
+      if (requests.length === 1) {
+        this.status = 304;
+        this.responseText = '';
+      } else {
+        this.status = 200;
+        this.responseText = JSON.stringify({
+          signature: 'fresh-signature',
+          slides: [{ id: 1, duration_seconds: 10 }],
+          rssFeeds: [],
+          apiSources: [{ id: 1 }],
+          timetableGroups: [],
+          weatherLocations: [{ id: 1 }],
+          playlist: { fade_between_slides: false, skip_unavailable_rtmp: false }
+        });
+      }
+      this.onreadystatechange();
+    }
+  }
+
+  sandbox.XMLHttpRequest = XhrStub;
+  const scriptPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-playback.js');
+  vm.runInNewContext(fs.readFileSync(scriptPath, 'utf8'), sandbox, { filename: scriptPath });
+
+  await sandbox.refresh();
+
+  assert.equal(requests.length, 2);
+  assert.equal(requests[1].headers && requests[1].headers['If-None-Match'], undefined);
+  assert.deepEqual(sandbox.initialData.apiSources, [{ id: 1 }]);
+  assert.deepEqual(sandbox.initialData.weatherLocations, [{ id: 1 }]);
+});
+
+test('centralized slide advance timing preserves the configured slide duration', () => {
+  const sandbox = {
+    window: null,
+    currentPlaylistFadeBetweenSlides: false,
+    slideFadeLengthMs: 560,
+    slideFadeOffsetMs: 280,
+    getSlideHoldDelay(value) {
+      return value;
+    }
+  };
+  sandbox.window = sandbox;
+
+  const scriptPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-playback.js');
+  const script = fs.readFileSync(scriptPath, 'utf8');
+  vm.runInNewContext(script, sandbox, { filename: scriptPath });
+
+  assert.equal(sandbox.getSlideAdvanceDelay({ duration_seconds: 12 }), 12000);
+  sandbox.currentPlaylistFadeBetweenSlides = true;
+  assert.equal(sandbox.getSlideAdvanceDelay({ duration_seconds: 10 }), 9720);
+  assert.equal(sandbox.getSlideAdvanceDelay({ duration_seconds: 10, use_video_duration: true }), 9440);
+  assert.equal(sandbox.getSlideAdvanceDelay({ duration_seconds: 12 }), 11720);
+  assert.equal(sandbox.getSlideAdvanceDelay({ duration_seconds: 12, use_video_duration: true }), 11440);
+});
+
 test('single-slide playlists re-render the active slide instead of refreshing after a queued update', async () => {
   const calls = {
     showCurrent: 0,
@@ -247,8 +366,10 @@ test('single-slide playlists re-render the active slide instead of refreshing af
   sandbox.XMLHttpRequest = XhrStub;
 
   const scriptPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-playback.js');
+  const transitionPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-transition.js');
   const commandsPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-commands.js');
   const playbackScript = fs.readFileSync(scriptPath, 'utf8');
+  const transitionScript = fs.readFileSync(transitionPath, 'utf8');
   const commandsScript = fs.readFileSync(commandsPath, 'utf8');
   const prelude = `
     var pendingPlaylistUpdate = null;
@@ -270,7 +391,7 @@ test('single-slide playlists re-render the active slide instead of refreshing af
     var templateLayoutCache = Object.create(null);
     var templateRenderPlanCache = Object.create(null);
   `;
-  vm.runInNewContext(prelude + '\n' + playbackScript + '\n' + commandsScript, sandbox, { filename: scriptPath });
+  vm.runInNewContext(prelude + '\n' + transitionScript + '\n' + playbackScript + '\n' + commandsScript, sandbox, { filename: scriptPath });
   sandbox.showCurrent = function () {
     calls.showCurrent += 1;
   };

test/player-runtime.test.js

@@ -96,6 +96,52 @@ test('player runtime snapshots websocket state and checks live names', async ()
   }
 });
 
+test('player runtime suffixes a reconnecting client name already in use', async () => {
+  process.env.PULSE_SIGNAGE_SHARED_SECRET = 'runtime-secret';
+
+  const persistedNames = [];
+  const runtime = createPlayerRuntime({
+    pool: {
+      async query(_sql, params) {
+        return [[params[0] === 'Lobby' && params[1] !== 'device-a' ? { device_id: 'device-a' } : undefined].filter(Boolean)];
+      }
+    },
+    persistClientName(deviceId, clientName) {
+      persistedNames.push({ deviceId, clientName });
+      return Promise.resolve();
+    }
+  });
+  const server = http.createServer();
+  runtime.installWebsocket(server);
+
+  await new Promise((resolve) => server.listen(0, resolve));
+  const { port } = server.address();
+  const token = createPageAuthToken({ scope: 'player', slug: 'reconnect-test' });
+  const clientA = new WebSocket(`ws://127.0.0.1:${port}/ws/screens/reconnect-test?auth=${encodeURIComponent(token)}`);
+  const clientB = new WebSocket(`ws://127.0.0.1:${port}/ws/screens/reconnect-test?auth=${encodeURIComponent(token)}`);
+
+  try {
+    await Promise.all([
+      new Promise((resolve, reject) => { clientA.once('open', resolve); clientA.once('error', reject); }),
+      new Promise((resolve, reject) => { clientB.once('open', resolve); clientB.once('error', reject); })
+    ]);
+    clientA.send(JSON.stringify({ type: 'state', clientId: 'client-a', clientName: 'Lobby', deviceId: 'device-a' }));
+    await waitFor(() => runtime.snapshotConnections('reconnect-test').some((connection) => connection.clientName === 'Lobby'));
+    clientB.send(JSON.stringify({ type: 'state', clientId: 'client-b', clientName: 'Lobby', deviceId: 'device-b' }));
+
+    await waitFor(() => {
+      const connections = runtime.snapshotConnections('reconnect-test');
+      return connections.length === 2 && connections.some((connection) => connection.clientName === 'Lobby (1)');
+    });
+
+    assert.deepEqual(persistedNames, [{ deviceId: 'device-b', clientName: 'Lobby (1)' }]);
+  } finally {
+    clientA.close();
+    clientB.close();
+    await new Promise((resolve) => server.close(resolve));
+  }
+});
+
 test('player runtime accepts websocket auth from cookies', async () => {
   process.env.PULSE_SIGNAGE_SHARED_SECRET = 'runtime-secret';
 
@@ -198,4 +244,30 @@ test('player runtime sends targeted and broadcast commands to live sockets', asy
     clientB.close();
     await new Promise((resolve) => server.close(resolve));
   }
+});
+
+test('player runtime removes browser connections that stop sending state', async () => {
+  process.env.PULSE_SIGNAGE_SHARED_SECRET = 'runtime-secret';
+
+  const runtime = createPlayerRuntime({ pool: null, staleConnectionMs: 50 });
+  const server = http.createServer();
+  runtime.installWebsocket(server);
+
+  await new Promise((resolve) => server.listen(0, resolve));
+  const { port } = server.address();
+  const token = createPageAuthToken({ scope: 'player', slug: 'stale-test' });
+  const client = new WebSocket(`ws://127.0.0.1:${port}/ws/screens/stale-test?auth=${encodeURIComponent(token)}`);
+
+  try {
+    await new Promise((resolve, reject) => {
+      client.once('open', resolve);
+      client.once('error', reject);
+    });
+    client.send(JSON.stringify({ type: 'state', clientId: 'stale-client', clientName: 'Stale Player' }));
+    await waitFor(() => runtime.snapshotConnections('stale-test').length === 1);
+    await waitFor(() => runtime.snapshotConnections('stale-test').length === 0, 1000);
+  } finally {
+    client.close();
+    await new Promise((resolve) => server.close(resolve));
+  }
 });

test/schema-update-log.test.js

@@ -44,7 +44,7 @@ test('pending migrations are empty when the schema already matches the app versi
     }
   ]);
 
-  const pendingMigrations = await getPendingMigrations(pool, { currentVersion: '2.10.1' });
+  const pendingMigrations = await getPendingMigrations(pool, { currentVersion: '2.10.2' });
 
   assert.equal(pendingMigrations.length, 0);
 });

test/upload-sync.test.js

@@ -99,7 +99,8 @@ test('fqdn player registration wins over a local configured player target for me
 
     assert.equal(success, true);
     assert.equal(fetchCalls.length, 1);
-    assert.equal(fetchCalls[0].url, 'https://pulse-dev-bridge.lzstealth.com/api/media/uploads%2Fsample.bin?deviceId=player-remote');
+    assert.equal(fetchCalls[0].url, 'https://pulse-dev-bridge.lzstealth.com/api/media/uploads%2Fsample.bin');
+    assert.equal(fetchCalls[0].init.headers['x-pulse-player-device-id'], 'player-remote');
   } finally {
     global.fetch = originalFetch;
     fs.rmSync(uploadDir, { recursive: true, force: true });
@@ -453,9 +454,46 @@ test('slide update sync queues one media task per live player and targets each p
     assert.deepEqual(fetchCalls.map(function (call) {
       return call.url;
     }).sort(), [
-      'http://player-one:8081/api/media/uploads%2Fsample.bin?deviceId=player-one',
-      'http://player-two:8081/api/media/uploads%2Fsample.bin?deviceId=player-two'
+      'http://player-one:8081/api/media/uploads%2Fsample.bin',
+      'http://player-two:8081/api/media/uploads%2Fsample.bin'
     ].sort());
+    assert.deepEqual(fetchCalls.map(function (call) {
+      return call.init.headers['x-pulse-player-device-id'];
+    }).sort(), ['player-one', 'player-two']);
+  } finally {
+    global.fetch = originalFetch;
+    fs.rmSync(uploadDir, { recursive: true, force: true });
+  }
+});
+
+test('remote media sync uses the bridge device route', async () => {
+  const uploadDir = fs.mkdtempSync(path.join(os.tmpdir(), 'pulse-signage-upload-bridge-'));
+  fs.mkdirSync(path.join(uploadDir, 'uploads'), { recursive: true });
+  fs.writeFileSync(path.join(uploadDir, 'uploads', 'sample.bin'), Buffer.from('hello world'));
+  const activeLastSeenAt = new Date(Date.now() - 10_000).toISOString();
+  const fetchCalls = [];
+  const originalFetch = global.fetch;
+  global.fetch = async function (url, init) {
+    fetchCalls.push({ url, init });
+    return { ok: true, status: 200, statusText: 'OK', headers: { get() { return null; } }, async text() { return ''; } };
+  };
+
+  const uploadSyncService = createUploadSyncService({
+    common: {},
+    bridgeInternalBaseUrl: 'http://player-bridge:8090',
+    pool: {
+      async query() {
+        return [[{ identifier: 'player-remote', internal_base_url: 'https://remote-player.example', last_seen_at: activeLastSeenAt }]];
+      }
+    },
+    playerSnapshotCache: new Map(),
+    notifyPlayerScreens: async () => {}
+  });
+
+  try {
+    assert.equal(await uploadSyncService.pushUploadFileToPlayer('/media/uploads/sample.bin', uploadDir), true);
+    assert.equal(fetchCalls[0].url, 'http://player-bridge:8090/api/media/uploads%2Fsample.bin');
+    assert.equal(fetchCalls[0].init.headers['x-pulse-player-device-id'], 'player-remote');
   } finally {
     global.fetch = originalFetch;
     fs.rmSync(uploadDir, { recursive: true, force: true });

test/weather-forecast.test.js

@@ -35,5 +35,8 @@ test('weather forecast preview only shows the fetch hint without a snapshot', ()
   const template = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'views', 'data-sources', 'weather', 'forecast-preview.hbs'), 'utf8');
 
   assert.match(template, /\{\{#if weatherPreview\.hasSnapshot\}\}[\s\S]*weather-daily-forecast[\s\S]*weather-hourly-forecast[\s\S]*\{\{\/if\}\}/);
+  assert.match(template, /id="weather-daily-forecast" class="weather-daily-forecast"/);
+  assert.match(template, /id="weather-hourly-forecast" class="d-none"/);
+  assert.doesNotMatch(template, /Hourly forecast · next 24 hours/);
   assert.match(template, /Daily and hourly forecasts will appear here after the first successful fetch\./);
 });

test/web-screens-routes.test.js

@@ -6,7 +6,7 @@ require('../src/common');
 const registerScreensRoutes = require('../src/web/routes/signage/screens/routes');
 const { renderScreenEditPage } = require('../src/web/pages');
 
-test('screen edit page includes shared launcher downloads and base player url', async () => {
+test('screen edit page omits player URL data', async () => {
   const handlers = {};
   const app = {
     get(path, ...routeHandlers) {
@@ -88,25 +88,11 @@ test('screen edit page includes shared launcher downloads and base player url',
   await handler[1]({ params: { id: '7' }, query: {}, currentUser: { id: 1 } }, res, () => {});
 
   assert.equal(res.body, 'ok');
-  assert.deepEqual(renderedArgs.screen.player_urls, [
-    {
-      identifier: 'player-alpha',
-      public_base_url: 'http://alpha.example',
-      player_url: 'http://alpha.example/screen/demo-conference'
-    },
-    {
-      identifier: 'player-beta',
-      public_base_url: 'http://beta.example',
-      player_url: 'http://beta.example/screen/demo-conference'
-    }
-  ]);
-  assert.deepEqual(renderedArgs.screen.launcher_downloads, {
-    windows: '/downloads/kiosk/pulse-signage-kiosk.bat',
-    linux: '/downloads/kiosk/pulse-signage-kiosk.sh'
-  });
+  assert.equal(Object.prototype.hasOwnProperty.call(renderedArgs.screen, 'player_urls'), false);
+  assert.equal(Object.prototype.hasOwnProperty.call(renderedArgs.screen, 'launcher_downloads'), false);
 });
 
-test('screen edit query route includes player urls for every registration', async () => {
+test('screen edit query route omits player URLs', async () => {
   const handlers = {};
   const app = {
     get(path, ...routeHandlers) {
@@ -172,20 +158,11 @@ test('screen edit query route includes player urls for every registration', asyn
   await handler[1]({ query: { edit: '7' }, currentUser: { id: 1 } }, res, () => {});
 
   assert.equal(res.body, 'ok');
-  assert.deepEqual(renderedArgs.screen.player_urls, [
-    {
-      identifier: 'player-alpha',
-      public_base_url: 'http://alpha.example',
-      player_url: 'http://alpha.example/screen/demo-conference'
-    }
-  ]);
-  assert.deepEqual(renderedArgs.screen.launcher_downloads, {
-    windows: '/downloads/kiosk/pulse-signage-kiosk.bat',
-    linux: '/downloads/kiosk/pulse-signage-kiosk.sh'
-  });
+  assert.equal(Object.prototype.hasOwnProperty.call(renderedArgs.screen, 'player_urls'), false);
+  assert.equal(Object.prototype.hasOwnProperty.call(renderedArgs.screen, 'launcher_downloads'), false);
 });
 
-test('screen edit page hides stale player registrations', async () => {
+test('screen edit page does not load player URL registrations', async () => {
   const handlers = {};
   const app = {
     get(path, ...routeHandlers) {
@@ -258,22 +235,10 @@ test('screen edit page hides stale player registrations', async () => {
   await handler[1]({ params: { id: '7' }, query: {}, currentUser: { id: 1 } }, res, () => {});
 
   assert.equal(res.body, 'ok');
-  assert.deepEqual(renderedArgs.screen.player_urls.map(function (player) {
-    return {
-      identifier: player.identifier,
-      public_base_url: player.public_base_url,
-      player_url: player.player_url
-    };
-  }), [
-    {
-      identifier: 'player-recent',
-      public_base_url: 'http://recent.example',
-      player_url: 'http://recent.example/screen/demo-conference'
-    }
-  ]);
+  assert.equal(Object.prototype.hasOwnProperty.call(renderedArgs.screen, 'player_urls'), false);
 });
 
-test('screen edit page renders player urls as an adminlte table', async () => {
+test('screen edit page does not render a player URL table', async () => {
   const html = renderScreenEditPage(
     {
       id: 7,
@@ -282,24 +247,14 @@ test('screen edit page renders player urls as an adminlte table', async () => {
       playlist_id: null,
       slug_update_confirm_live_connection_count: 2,
       slug_update_confirm_message: 'Are you sure you want to update the slug? This will refresh all screens using this slug.',
-      player_urls: [
-        {
-          identifier: 'player-alpha',
-          public_base_url: 'http://alpha.example',
-          player_url: 'http://alpha.example/screen/demo-conference'
-        }
-      ]
     },
     { playlists: [] },
     '',
     { id: 1 }
   );
 
-  assert.match(html, /Player URLs/);
-  assert.match(html, /<table/i);
-  assert.match(html, /card-body table-responsive p-0/);
-  assert.match(html, /table table-striped w-100 mb-0/);
-  assert.match(html, /player-alpha/);
+  assert.doesNotMatch(html, /Player URLs/);
+  assert.doesNotMatch(html, /player-alpha/);
   assert.match(html, /<input[^>]+id="screen-slug"[^>]+disabled/);
   assert.match(html, /Slug cannot be changed after creation/);
 });