Keep empty region previews blank

# Conflicts:
#	CHANGELOG.md
#	build/package.player.json
#	build/package.web.json
#	package-lock.json
#	package.json

CHANGELOG.md

@@ -2,12 +2,279 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.13.3 - 2026-09-13
+
+### Fixed
+
+- Fixed the template background image media picker Upload media button so it opens the file selector.
+- Fixed the template designer empty background message moving when the background image is removed.
+- Fixed cached API and RSS images not being served by the player after being downloaded.
+- Fixed blank time/date regions displaying the default clock format on the player.
+- Fixed the time/date placeholder popup omitting text and math transform help.
+- Fixed empty region previews displaying type labels instead of remaining blank.
+- Fixed empty weather regions displaying the default weather summary.
+
+## 2.13.2 - 2026-09-11
+
+### Changed
+
+- Refined the Media Library upload flow with a compact Add media modal, clearer toolbar controls, full-height scrolling, and more obvious selection feedback for media that is already in use.
+
+## 2.13.1 - 2026-09-11
+
+### Added
+
+- Added the shared Media Library to slide region controls and template editors, preserving existing media paths while providing safe private uploads, responsive four-row server-side batching, and card-only scrolling with Load more pagination.
+
+### Changed
+
+- Added a font preview column to the Managed fonts table so each uploaded font can be viewed in its own typeface.
+- Updated the WYSIWYG editor, slide image/video/QR-code region controls, and template editors to use the shared Media Library.
+- Improved image cropper loading feedback by showing a spinner and hiding the crop surface until the image editor is ready.
+
+## 2.12.0 - 2026-09-11
+
+### Added
+
+- Added offline-capable Local Control for central users with `clients.allow`, scoped to each player and its connected clients, with responsive client actions, current slide titles, and live WebSocket updates for pause and blackout state changes.
+- Added player-specific HTTP-only sessions, minimized cached authentication data with hashed usernames, immediate session and socket revocation when authorization changes, and login throttling after repeated failures.
+- Added web-owned authorization synchronization: connected remote players refresh every fifteen minutes and receive the current authorization state immediately after reconnecting, while the configured local player is excluded from remote fanout.
+
+## 2.11.3 - 2026-09-08
+
+### Fixed
+
+- Added the reload confirmation prompt to individual client actions in the mobile clients view.
+
+## 2.11.2 - 2026-09-05
+
+### Changed
+
+- Refreshed the vendored AdminLTE assets to 4.9.1, including the print-layout fixes and extended palette updates.
+- Added independently configurable verification, password-reset, and invitation email expiry periods, with an `[[expiry_time]]` template variable.
+- Updated default account email templates with inline formatting, action buttons, and links, and improved rendering when both button and URL placeholders are used.
+- Shortened user-agent labels across audit logs and account session lists, and removed red/green change highlighting from audit entries.
+
+## 2.11.1 - 2026-09-02
+
+### Added
+
+- Secure administrator invitations that create accounts only after the recipient accepts the invitation.
+- Configurable API progress-bar placeholders with AdminLTE and announcement palette colors, custom colors, striped and animated variants, and quoted numeric literals.
+- An optional `textless` progress-bar modifier to hide the visible percentage while retaining progress accessibility metadata.
+- Configurable progress-bar radius options including `square`, `pill`, `rounded`, and validated `radius(...)` values.
+- Arithmetic API placeholder transforms for adding, subtracting, multiplying, and dividing numeric values.
+- Time-based progress bars using start and end date/time fields to show elapsed timetable-item progress.
+- Audit events for invitation sending and acceptance, email verification, password-reset requests, and account email changes.
+- A pending invitations page with invitation-specific Read, Create, Delete, and Allow permissions.
+- Invitation deletion and resend actions with confirmation prompts.
+- An opt-in Weather audit category for weather-location changes and manually queued refreshes.
+- Opt-in per-command Screen Controls auditing, with forward and back navigation grouped together and disabled by default.
+- The pending invitations list now supports pagination, search, and sorting, with Users, Roles, and Invitations grouped under expandable User management navigation.
+- API progress calculations now support object-wrapped amounts.
+
+### Changed
+
+- Updated the invitation registration page to show fields only for valid tokens, use the themed failure state for invalid links, and pre-fill the invited email and display name.
+- Made the invited email visibly disabled, kept the display name editable and required, and aligned invitation actions with the existing user forms.
+- Added bold, italic, and underline formatting controls to the user invitation email message template editor.
+- Fixed application-settings cleanup SQL so media and icon saves preserve all supported settings and no longer fail with MariaDB placeholder errors.
+- Updated API progress bars to inherit the surrounding WYSIWYG text size and text color, preserve rounded corners, and render consistently in the editor preview, player, and thumbnails.
+
+## 2.11.0 - 2026-09-02
+
+### Added
+
+- Optional account emails with administrator verification bypass, email verification, password recovery, and confirmed email changes.
+- SMTP configuration and mail delivery for account notifications.
+- Autofill restrictions for Bitwarden, LastPass, and 1Password on account profile and new-password fields while preserving current-password autofill.
+
+### Changed
+
+- Updated account email templates and previews to support both line breaks and paragraph spacing.
+
+## 2.10.7 - 2026-09-02
+
+### Added
+
+- API token authentication now reuses access tokens until their expiry and can renew them with a refresh token, including refresh-token rotation.
+- API sources can configure a refresh URL, JSON request body, and refresh-token response path.
+- Client status badges now show Live, Paused, and Blackout states in the responsive Connected clients view.
+
+### Changed
+
+- Reorganized the API source editor into compact Connection, Authentication, and Latest response cards, with authentication collapsed by default on edit pages.
+- Redesigned the Connected clients page for responsive mobile cards with compact controls, expandable search, pairing access, two-line detail clamping, and aligned desktop screen-group controls.
+
+### Fixed
+
+- Fixed client screen moves from mobile cards so the next move disables the client’s current screen group rather than its previous one.
+- Removed unused Bootstrap Icons font preloads that triggered browser warnings on pages where icons were not rendered.
+
+## 2.10.6 - 2026-08-29
+
+### Added
+
+- Playlist recovery now uses cached browser and server snapshots, reports offline status, and recovers after cached responses.
+
+### 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.
+
+### 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
+
+### Added
+
+- Remote screens now poll periodically to recover from missed refresh commands after bridge reconnects.
+- Screens now use cached playlist snapshots while the bridge or web service is temporarily unavailable.
+
+### 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.
+- 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
+
+### Added
+
+- Onboarding client heartbeats are now persisted so records inactive for 24 hours can be pruned without relying on player connectivity after the fact.
+
+### Fixed
+
+- Fixed the weather forecast preview to show only its first-fetch message until a successful forecast is available.
+
+## 2.10.1 - 2026-08-28
+
+### Added
+
+- Linear gradient backgrounds to templates, including multiple colours and angle control.
+- A visual gradient stop editor with draggable stops, click-to-add support, and stop reordering.
+
+## 2.10.0 - 2026-08-28
+
+### Added
+
+- Secure kiosk onboarding with QR-first and manual pairing flows.
+- Browser-specific pairing sessions with expiring pairing codes.
+- Circular QR presentation and a compatible QR scanner with decoder fallbacks.
+- Responsive player onboarding and a post-pair option to connect another player.
+- Stable player identity bindings for paired players and moved-client aliases.
+- Per-tab client identities backed by browser session storage for commands, pairing, and screen moves.
+- RBAC protection for player pairing through the `pairing.allow` permission.
+- A dedicated web onboarding workflow for pairing and managing player setup.
+- Pairing entry points now appear in the dashboard and connected clients workflows.
+- A mobile-friendly connected clients link is now shown after successful pairing.
+- Player keyboard feedback now includes slide navigation, plus `P` pause/unpause and `B` blackout toggles.
+
+### Changed
+
+- Restricted direct screen URLs to the player configured for the requested screen.
+- Made pairing QR codes easier to scan by encoding only the short pairing code.
+- Made connected-client controls and player pairing UI render independently according to their permissions.
+- Removed client identities from onboarding and screen-move URLs; authorized player data now loads after the tab identity handshake.
+- Updated connected-client commands and screen moves to resolve tab and registered-player identities reliably.
+
+## 2.9.0 - 2026-08-28
+
+### Added
+
+- API sources, RSS feeds, and weather locations can be enabled or disabled without deleting their cached data.
+- Weather slide regions with current, daily, and hourly placeholders, date/time transforms, and Bootstrap weather icon transforms.
+- Multiple saved weather locations with provider, coordinate, unit, and refresh settings.
+- Separate Allow permissions for manually refreshing API sources, RSS feeds, and weather locations.
+- Announcement colour choices and player rendering now include the AdminLTE extended palette colours.
+
+### Changed
+
+- API, RSS, and Weather refresh jobs now skip disabled sources across scheduled, startup, queued, and manual refresh paths, while re-enabling a source resumes refresh scheduling.
+- Weather placeholders now show all current fields, or all fields for the first daily/hourly entry before the remaining entries in a Show more section.
+- Weather previews, player playback, and slide thumbnails now use cached Weather data and consistent text/icon sizing.
+- API, RSS, and Weather lists now show enabled status and their forms provide action-oriented Enable/Disable controls.
+- Enable/Disable actions on API, RSS, and Weather forms now run asynchronously without reloading unsaved form changes.
+- Weather locations can now be duplicated from the weather list.
+- Startup data-source refreshes now respect each API, RSS, and weather source's configured repull interval.
+- RSS feeds now persist their last collection timestamp.
+- Refreshed the vendored AdminLTE assets to 4.8.5.
+- Removed Digital Signage Subheading and top padding.
+- API and RSS source saves now preserve cached data without pulling; added explicit manual refresh actions.
+
+## 2.8.7 - 2026-08-22
+
+### Added
+
+- Configurable JSON POST requests and two-step login-then-token authentication for API sources.
+
+## 2.8.6 - 2026-08-18
+
+### Added
+
+- URL fields now provide live validation with inline feedback and explicit HTTP or HTTPS scheme enforcement.
+
+### Fixed
+
+- Prevented Enter in slide editor inputs from implicitly saving the slide.
+- Collapsed nested API response JSON sections by default while keeping the root response visible.
+
+## 2.8.5 - 2026-08-17
+
+### Fixed
+
+- Fixed thumbnail capture timing so video assets are ready before the preview canvas is captured.
+- Replaced unavailable webpage thumbnails with a subdued placeholder while keeping live webpage previews intact.
+
+## 2.8.4 - 2026-08-17
+
+### Added
+
+- Local caching for API and RSS image placeholders under `player-cache/remote-images` for offline player playback.
+- Reconciliation of cached remote images so files no longer referenced by slides are removed.
+
+### Fixed
+
+- Fixed popup preview authentication for background thumbnail capture.
+- Fixed thumbnails so they use the same popup-preview canvas and resolve API/RSS placeholders, fonts, styles, and cached images correctly.
+- Fixed manual scheduled-task run notifications so they use task-neutral wording.
+
 ## 2.8.3 - 2026-08-17
 
 ### Added
 
-- Added API, RSS, Timetable, and Time / Date placeholder help panels with shared transform and date-token documentation.
+- API, RSS, Timetable, and Time / Date placeholder help panels with shared transform and date-token documentation.
-- Added render-time API and RSS image placeholders with proportional sizing and preview-only bounding boxes.
+- Render-time API and RSS image placeholders with proportional sizing and preview-only bounding boxes.
 
 ### Changed
 
@@ -52,6 +319,7 @@ All notable changes to this project will be documented in this file.
 - A permissions-gated System Settings page for announcement icon suggestions, media upload limits and MIME types, session lifetime, and password-change policies.
 - Configurable forced password changes for newly created users and administrator password resets.
 - The database foundation for key-based application settings, including typed defaults and validation.
+- All tables now use numeric auto-increment identifiers while retaining natural or relationship keys as unique constraints.
 
 ### Changed
 
@@ -66,7 +334,6 @@ All notable changes to this project will be documented in this file.
 - Replaced password strength presets with customizable length, category, and character requirements.
 - Session expiration now uses the configured system setting, and user and role administration is grouped under the Settings area.
 - Renamed the system settings permissions to the `system-settings.*` namespace and migrated existing role assignments.
-- Added numeric auto-increment identifiers to every table and retained natural or relationship keys as unique constraints.
 
 ## 2.7.6 - 2026-08-15
 
@@ -364,7 +631,7 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 
-- Added branded Windows and Linux kiosk launcher downloads on the dashboard, with updated copy that explains the launcher behavior more clearly.
+- Branded Windows and Linux kiosk launcher downloads on the dashboard, with updated copy that explains the launcher behavior more clearly.
 - Kiosk launchers now start the browser in kiosk mode, suppress notifications for Chromium-based browsers, and use the correct Firefox kiosk flag.
 
 
@@ -662,13 +929,13 @@ All notable changes to this project will be documented in this file.
 ### Added
 
 - Screen and dashboard player links now render the full player URL instead of only the player base host.
+- Notes near the singleton-player code paths to make the future multi-player migration work easier to revisit.
 
 ### Changed
 
 - The player registry now uses a singleton `d_players` row and `d_screens.player_id` points at that shared player record.
 - Player startup is now responsible for creating the shared player record, while onboarding and state polling no longer create extra player rows.
 - The screen/player binding path was simplified so opening a screen binds it to the shared player record without trying to re-register the player.
-- Added notes near the singleton-player code paths to make the future multi-player migration work easier to revisit.
 - Managed fonts now have dedicated editor/player sync handling, including a scheduled font sweep, sorted font-family lists, the TinyMCE fullscreen button, and shared font stylesheet loading in the WYSIWYG editor.
 - Text and RSS region types now own their own default style and fallback behavior instead of relying on shared slide helper fallbacks.
 - Image and video region handling was also pushed further into modular per-type modules, keeping their editor, preview, and player logic closer to the region itself instead of the shared slide helper layer.
@@ -941,9 +1208,12 @@ All notable changes to this project will be documented in this file.
 
 ## 1.3.3 - 2026-07-21
 
+### Added
+
+- The first round of modular admin-page work, including a shared admin route layer and refreshed dashboard/list rendering.
+
 ### Changed
 
-- Added the first round of modular admin-page work, including a shared admin route layer and refreshed dashboard/list rendering.
 - Updated the admin shell styling and layout handling for the newer page structure.
 - Adjusted package metadata and lockfile state to match the release.
 

README.md

@@ -25,15 +25,14 @@ It gives you one place to publish playlists, slides, announcements, and live upd
 
 Docker Compose is the recommended way to deploy Pulse Signage. It keeps the web app, player, bridge, and database together in a predictable setup.
 
-If you want the details, start with the [Compose guide](docker-compose/README.md).
+For a complete installation, follow the [public stack setup](docker-compose/README.md#public-stack-setup). For screens on separate devices, use the [remote player setup](docker-compose/README.md#remote-player-setup).
 
 ## Docs
 
-- [Documentation home](docs/README.md) - the technical reference index.
+- [Documentation home](docs/README.md) - the index for user and technical guides.
-- [API reference](docs/api.md) - the player HTTP surface and onboarding endpoints.
+- [User guides](docs/user/README.md) - dashboard workflows, publishing, players, and Local Control.
-- [Database schema](docs/schema.md) - the tables and data model the app maintains.
+- [Technical guides](docs/technical/README.md) - API, database, and WebSocket references.
-- [WebSocket reference](docs/websocket.md) - the live player and snapshot channels.
+- [Docker Compose guide](docker-compose/README.md) - deployment, service configuration, and remote-player setup.
-- [Compose guide](docker-compose/README.md) - deployment options and service layout.
 - [Changelog](CHANGELOG.md) - release history and notable changes.
 
 ## Explore The Docs

build/package.player.json

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

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.8.3",
+  "version": "2.13.3",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {
@@ -18,8 +18,10 @@
     "handlebars": "^4.7.8",
     "multer": "^2.2.0",
     "mysql2": "^3.23.3",
+    "nodemailer": "^9.1.1",
     "puppeteer-core": "^25.7.0",
     "sharp": "^0.35.3",
+    "jsqr": "^1.4.0",
     "ws": "^8.21.3"
   }
 }

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,16 +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 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"

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

@@ -2,11 +2,26 @@
 
 This folder contains the Docker Compose definitions for Pulse Signage, including the public stack and the remote player stack.
 
+## Contents
+
+- [Files](#files)
+- [Stack Overview](#stack-overview)
+- [Services](#services)
+- [Environment Files](#environment-files)
+- [Public Stack Setup](#public-stack-setup)
+- [Remote Player Setup](#remote-player-setup)
+- [Shared Secret](#shared-secret)
+- [Ports](#ports)
+- [Volumes](#volumes)
+- [Networks](#networks)
+- [Notes](#notes)
+- [Deployment Checklist](#deployment-checklist)
+
 ## Files
 
 - [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
@@ -45,10 +60,11 @@ Key configuration:
 
 - `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASSWORD`
 - `PULSE_SIGNAGE_SHARED_SECRET`
+- `WEB_PUBLIC_URL`
+- `BRIDGE_INTERNAL_URL`
 - `DEFAULT_ADMIN_USERNAME`
 - `DEFAULT_ADMIN_NAME`
 - `DEFAULT_ADMIN_PASSWORD`
-- `PASSWORD_HASH_ITERATIONS`
 
 ### `player`
 
@@ -57,7 +73,7 @@ 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
 
@@ -65,11 +81,11 @@ Key configuration:
 
 - `PLAYER_PUBLIC_URL`
 - `PLAYER_INTERNAL_URL`
-- `BRIDGE_INTERNAL_URL`
 - `PLAYER_IDENTIFIER`
 - `BRIDGE_PUBLIC_URL` in remote mode
 - `PULSE_SIGNAGE_SHARED_SECRET`
-- database settings in local mode
+- `WEB_PUBLIC_URL`
+- `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASSWORD` in local mode
 
 ### `player-bridge`
 
@@ -99,46 +115,106 @@ Responsibilities:
 
 Key configuration:
 
-- `MYSQL_DATABASE`
+- `DB_NAME`
-- `MYSQL_USER`
+- `DB_USER`
-- `MYSQL_PASSWORD`
+- `DB_PASSWORD`
 - `MYSQL_ROOT_PASSWORD`
 
 ## Environment Files
 
-### `.env.example`
+| File | Used by | How it is loaded |
+| --- | --- | --- |
+| `.env.example` | Public stack | Copy to `.env`; Compose loads it automatically, or pass it with `--env-file`. |
+| `.env.remote.example` | Published remote player | Copy to `.env.remote`; pass it with `--env-file .env.remote`. |
 
-Use this file as a starting point for the public compose stack.
+The example files are templates. Copy the appropriate file, review its defaults, and replace secrets or placeholder URLs before deploying.
+
+### Public stack: `.env.example`
+
+Use this file as a starting point for the public Compose stack.
 
 Important values:
 
-- `PULSE_SIGNAGE_WEB_IMAGE` - image to run for the web app and bridge services, typically `.../pulse-signage-web:latest`
+| Variable | Purpose | Default |
-- `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
+| `PULSE_SIGNAGE_WEB_IMAGE` | Image for the web app and bridge services. | `git.lzstealth.com/lzstealth/pulse-signage-web:latest` |
-- `PLAYER_IDENTIFIER` - unique local player identifier
+| `PULSE_SIGNAGE_PLAYER_IMAGE` | Image for the player services. | `git.lzstealth.com/lzstealth/pulse-signage-player:latest` |
-- `DB_*` - MySQL credentials and database name for the stack
+| `PULSE_SIGNAGE_SHARED_SECRET` | Shared request-signing secret. | Blank; set this for a secured deployment. |
-- `PLAYER_PUBLIC_URL` - public URL the player advertises
+| `DB_HOST` | MySQL host name. | `mysql` |
-- `PLAYER_INTERNAL_URL` - internal URL the web app uses for local player calls
+| `DB_PORT` | MySQL port. | `3306` |
-- `BRIDGE_INTERNAL_URL` - bridge URL the web app uses for player snapshot and command forwarding
+| `DB_NAME` | MySQL database name. | `pulse-signage` |
-- `WEB_INTERNAL_URL` - internal URL the bridge uses to call the web app directly
+| `DB_USER` | MySQL user name. | `pulse-signage` |
-- `DEFAULT_ADMIN_*` - bootstrap admin account values
+| `DB_PASSWORD` | MySQL user password. | `signage_password` |
-- `PASSWORD_HASH_ITERATIONS` - password hashing cost
+| `MYSQL_ROOT_PASSWORD` | Local MySQL root password. | `root_password` |
-- `MYSQL_ROOT_PASSWORD` - root password for the local MySQL container
+| `WEB_PUBLIC_URL` | Public URL of the web application. | `http://localhost:8080` |
+| `WEB_INTERNAL_URL` | Internal URL the bridge uses to call the web app. | `http://web:8080` |
+| `PLAYER_INTERNAL_URL` | Internal URL used for local player calls. | `http://player:8081` |
+| `PLAYER_IDENTIFIER` | Unique local player identifier. | `player-local` |
+| `PLAYER_PUBLIC_URL` | URL used by the kiosk launcher and direct player access. | `http://localhost:8081` |
+| `BRIDGE_INTERNAL_URL` | Bridge URL used for snapshots and command forwarding. | `http://player-bridge:8090` |
+| `DEFAULT_ADMIN_USERNAME` | Bootstrap admin username. | `admin` |
+| `DEFAULT_ADMIN_NAME` | Bootstrap admin display name. | `Admin` |
+| `DEFAULT_ADMIN_PASSWORD` | Bootstrap admin password. | `password123!` |
 
-### `.env.remote.example`
+### Remote player: `.env.remote.example`
 
-Use this file on a remote player device.
+Use this file as the starting point for a remote player device. The production remote Compose file reads values from Compose's environment, so pass the copied file explicitly with `--env-file`.
 
 Important values:
 
-- `PULSE_SIGNAGE_PLAYER_IMAGE` - image to run on the device, typically `.../pulse-signage-player:latest`
+| Variable | Purpose | Default |
-- `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
+| `PULSE_SIGNAGE_PLAYER_IMAGE` | Image to run on the device. | `git.lzstealth.com/lzstealth/pulse-signage-player:latest` |
-- `PLAYER_PUBLIC_URL` - public URL for the remote player
+| `PULSE_SIGNAGE_SHARED_SECRET` | Shared request-signing secret; must match the public stack. | Blank; set it to the public stack's secret. |
-- `BRIDGE_PUBLIC_URL` - bridge URL the player connects back to
+| `PLAYER_IDENTIFIER` | Unique remote player identifier. | `player-remote` |
-- `PLAYER_AGENT_RECONNECT_DELAY_MS` - reconnect delay for the player agent
+| `PLAYER_PUBLIC_URL` | Optional URL for direct player access. | `http://remote-player.example.com:8081` |
+| `BRIDGE_PUBLIC_URL` | Bridge URL the player connects back to. | `http://player-bridge.example.com:8090`; replace this placeholder. |
+| `PLAYER_AGENT_RECONNECT_DELAY_MS` | Delay before reconnecting to the bridge. | `5000` |
 
-### `PULSE_SIGNAGE_SHARED_SECRET`
+## Public Stack Setup
+
+Install Docker Engine with Docker Compose, then run the public stack from this directory:
+
+```sh
+cp .env.example .env
+docker compose -f docker-compose.yml up -d
+```
+
+The command pulls the published images, creates the network and volumes, and starts the web app, local player, player bridge, and MySQL services. Check the installation with:
+
+```sh
+docker compose -f docker-compose.yml ps
+docker compose -f docker-compose.yml logs -f web
+```
+
+## Remote Player Setup
+
+A remote deployment has two parts:
+
+- the public stack runs the web app, database, and player bridge
+- each remote device runs only the player and connects back to the bridge
+
+The remote player does not need database credentials. Set `BRIDGE_PUBLIC_URL` to the externally reachable bridge URL, including its port when required. It must point to the bridge service, not the web dashboard URL. The bridge must be reachable from the device and allow both HTTP requests and the player websocket connection at `/ws/players`.
+
+### Published remote player
+
+On the remote device:
+
+```sh
+cp .env.remote.example .env.remote
+docker compose --env-file .env.remote -f docker-compose.remote.yml up -d
+```
+
+The published remote stack exposes the player on host port `8081`. Check its connection and startup output with:
+
+```sh
+docker compose --env-file .env.remote -f docker-compose.remote.yml ps
+docker compose --env-file .env.remote -f docker-compose.remote.yml logs -f player
+```
+
+Start the public stack and confirm that its bridge is reachable before starting the remote player. Once the player connects, it should appear in the dashboard's Connected clients view. If it does not, verify the bridge URL, shared secret, firewall or reverse-proxy websocket support, and the player logs.
+
+## Shared Secret
 
 This secret is the shared signing key for requests between the services. Use a single value for every service that needs to talk to the same stack, including the web app, player, bridge, and any remote player that connects back to that bridge.
 
@@ -152,34 +228,6 @@ If you want a quick local value, generate one with a password manager or a comma
 
 Leave it blank only if you intentionally want to run without request signing in a throwaway local setup.
 
-## Main Configuration Variables
-
-| Variable | Used By | Purpose |
-| --- | --- | --- |
-| `PULSE_SIGNAGE_WEB_IMAGE` | web, bridge | Docker image to run for the web app and bridge services. |
-| `PULSE_SIGNAGE_PLAYER_IMAGE` | player, remote player | Docker image to run for the player services. |
-| `PULSE_SIGNAGE_SHARED_SECRET` | web, player, bridge, remote player | Shared secret for authenticated requests between services. |
-| `DB_HOST` | web, player, bridge | Database host name. |
-| `DB_PORT` | web, player, bridge | Database port. |
-| `DB_NAME` | web, player, bridge, mysql | Database name. |
-| `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. |
-
 ## Ports
 
 Public stack ports:
@@ -209,20 +257,20 @@ 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
 
-- The public stack expects the app services and MySQL to share the same `PULSE_SIGNAGE_SHARED_SECRET`.
+- The public stack expects the web, player, and bridge services to share the same `PULSE_SIGNAGE_SHARED_SECRET`.
 - 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
+## Deployment Checklist
 
-1. Copy `.env.example` to a local `.env` file for the public stack.
+1. Follow [Public Stack Setup](#public-stack-setup) to start the public stack with Docker Compose.
-2. Copy `.env.remote.example` to a device-specific `.env` file for the remote player.
+2. Set the same `PULSE_SIGNAGE_SHARED_SECRET` in the public and remote environments.
-3. Make sure `PULSE_SIGNAGE_SHARED_SECRET` matches everywhere.
+3. Set `BRIDGE_PUBLIC_URL` to the externally reachable bridge URL.
-4. Start the public stack first, then start the remote player after the bridge is reachable.
+4. Start the published remote player with the workflow above.
 5. Verify that the player appears in Connected clients before testing screen commands.

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}
+      PLAYER_PUBLIC_URL: ${PLAYER_PUBLIC_URL:-}
-      BRIDGE_PUBLIC_URL: ${BRIDGE_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:

docker-compose/docker-compose.yml

@@ -15,6 +15,7 @@ services:
       DB_USER: ${DB_USER:-pulse-signage}
       DB_PASSWORD: ${DB_PASSWORD:-signage_password}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       BRIDGE_INTERNAL_URL: ${BRIDGE_INTERNAL_URL:-http://player-bridge:8090}
       DEFAULT_ADMIN_USERNAME: ${DEFAULT_ADMIN_USERNAME:-admin}
       DEFAULT_ADMIN_NAME: ${DEFAULT_ADMIN_NAME:-Admin}
@@ -38,6 +39,7 @@ services:
       PLAYER_INTERNAL_URL: ${PLAYER_INTERNAL_URL:-http://player:8081}
       PLAYER_IDENTIFIER: ${PLAYER_IDENTIFIER:-player-local}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}
       DB_NAME: ${DB_NAME:-pulse-signage}
@@ -59,6 +61,7 @@ services:
       - "8090:8090"
     environment:
       WEB_INTERNAL_URL: ${WEB_INTERNAL_URL:-http://web:8080}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}

docs/README.md

@@ -1,13 +1,13 @@
 # Documentation
 
-This folder contains the technical reference material for Pulse Signage.
+This folder contains user guides and technical references for Pulse Signage.
 
 ## What’s Here
 
-- [API reference](api.md) - the player HTTP surface and onboarding endpoints.
+- [User guides](user/README.md) - using the dashboard, publishing content, operating players, and Local Control.
-- [Database schema](schema.md) - the tables and data model used by the app.
+- [Technical guides](technical/README.md) - API, database, and WebSocket references.
-- [WebSocket reference](websocket.md) - the live player and snapshot channels.
+- [Compose guide](../docker-compose/README.md) - Docker Compose deployment and service configuration.
 
 ## How To Read It
 
-If you want the big picture first, start with the main [project README](../README.md). It gives a plain overview of what Pulse Signage does, while the pages in this folder explain how the pieces work.
+If you want the big picture first, start with the main [project README](../README.md). Use the user guides for everyday work and the technical guides for integration, deployment, and maintenance.

docs/technical/README.md

@@ -0,0 +1,9 @@
+# Technical Guides
+
+These references describe the service interfaces and internal data model used to integrate with, deploy, and maintain Pulse Signage.
+
+- [API reference](api.md) - player HTTP endpoints and onboarding integration.
+- [Database schema](schema.md) - application tables and relationships.
+- [WebSocket reference](websocket.md) - player control and snapshot channels.
+
+For service configuration and deployment, see the [Compose guide](../../docker-compose/README.md).

docs/technical/api.md

@@ -6,7 +6,7 @@ Player service base URL: `http://localhost:8081`
 
 This document covers the player HTTP surface only. The admin dashboard exposes its own routes for screen commands and onboarding management.
 
-Access note: most player endpoints are unauthenticated because they are meant to run inside a trusted deployment network. Anything that mutates state or writes files should be treated as internal-only unless you add your own auth layer in front of it.
+Access note: when `PULSE_SIGNAGE_SHARED_SECRET` is set, player-page endpoints require a valid `x-pulse-page-auth` token with the appropriate scope, and server-to-server endpoints require the signed request headers. When the secret is unset, these checks are disabled for compatibility, so the player service should remain inside a trusted deployment network. Pairing uses a short-lived random PIN displayed by the kiosk; the PIN is accepted only through the authenticated Web UI pairing flow.
 
 When `PULSE_SIGNAGE_SHARED_SECRET` is set, the player pages sign same-origin API fetches with `x-pulse-page-auth`, and the web app signs server-to-player requests with `x-pulse-request-timestamp` plus `x-pulse-request-signature`. Page tokens auto-renew before expiry while the page stays active, and signed server requests are only accepted when their timestamp is fresh. If the secret is unset, those checks stay disabled for compatibility.
 
@@ -17,32 +17,59 @@ Returns the player onboarding landing page.
 Access: public within the trusted player deployment.
 
 ### `GET /onboard`
-Returns the onboarding form page.
+Redirects to the authenticated Web UI pairing page for compatibility with older QR codes.
-Access: public within the trusted player deployment.
+Access: the Web UI pairing page requires a logged-in Web UI session.
 
 ### `GET /screen/{slug}`
 Returns the rendered player page for a screen.
-Access: public within the trusted player deployment.
+Access: the configured player may load only its persisted paired screen. An unpaired player is redirected to `/`; a different screen slug is rejected. The route is public within the trusted player deployment, but it no longer changes the player's binding.
 
 ### `GET /api/onboarding/status`
 Returns the persisted onboarding status for a device.
-Access: public within the trusted player deployment.
+Access: requires a page-auth token with the `onboarding` or `player` scope when shared-secret authentication is enabled.
 
 Query fields:
 
-- `deviceId` required
+- `deviceId` optional; the player device ID is used when omitted
 
 ### `GET /api/onboarding/screens`
 Returns the list of screens available for onboarding.
-Access: public within the trusted player deployment.
+Access: requires a page-auth token with the `onboarding` scope when shared-secret authentication is enabled.
 
 ### `GET /api/onboarding/qr`
 Returns an SVG QR code that points to the onboarding form.
-Access: public within the trusted player deployment.
+Access: public on the player service; the bridge version requires a signed server request when shared-secret authentication is enabled.
 
 Query fields:
 
-- `deviceId` required
+- `deviceId` optional; the player device ID is used when omitted
+
+### `GET /api/onboarding/resolve`
+Resolves a short-lived kiosk pairing code to its device and client identifiers.
+Access: requires an onboarding page token or signed server request when shared-secret authentication is enabled.
+
+Query fields:
+
+- `pairingCode` required
+
+Response fields:
+
+- `deviceId`
+- `clientId`
+
+### `GET /api/onboarding/session`
+Returns the current pairing session for the player page.
+Access: requires an onboarding page-auth token when shared-secret authentication is enabled.
+
+Query fields:
+
+- `deviceId` optional
+- `clientId` optional
+
+Response fields:
+
+- `deviceId`
+- `pairingCode`
 
 ### `POST /api/auth/page`
 Renews the current page-auth token before it expires.
@@ -54,15 +81,28 @@ Response fields:
 - `issuedAt`
 - `expiresAt`
 
+### `POST /api/screen-move-authorize`
+Stores a short-lived screen-move authorization token in an HTTP-only cookie.
+Access: requires a valid screen-move page-auth token in the request body.
+
+Accepted request fields:
+
+- `moveToken` required
+
+Response fields:
+
+- `ok`
+
 ### `POST /api/onboarding`
 Binds a device to a screen and client name.
-Access: internal-only. Protect this endpoint if the player service is reachable outside your trusted network.
+Access: internal-only. Requires an onboarding page-auth token or signed request when shared-secret authentication is enabled, plus a valid short-lived kiosk pairing code. Browser submissions must go through the authenticated Web UI pairing page.
 
 Accepted request fields:
 
-- `deviceId` required
 - `clientName` required
 - `screenSlug` required
+- `pairingCode` required
+- `clientId` required
 
 Response fields:
 
@@ -76,7 +116,7 @@ Response fields:
 
 ### `GET /api/media/config`
 Returns the upload directory configured for the player service.
-Access: internal-only.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled.
 
 Response fields:
 
@@ -85,15 +125,15 @@ Response fields:
 
 ### `PUT /api/media/{filename}`
 Writes an uploaded file into the player upload directory.
-Access: internal-only and write-protected behind your deployment boundary.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled.
 
 ### `DELETE /api/media/{filename}`
 Deletes a file from the player upload directory.
-Access: internal-only and write-protected behind your deployment boundary.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled.
 
 ### `GET /api/rtmp/session`
 Creates or reuses an RTMP-to-HLS session for a source URL.
-Access: internal-only.
+Access: requires a page-auth token with the `player` scope when shared-secret authentication is enabled.
 
 Query fields:
 
@@ -118,7 +158,7 @@ Access: internal-only.
 
 ### `GET /api/screens/{slug}/playlist`
 Returns the current playlist payload for a screen.
-Access: public within the trusted player deployment.
+Access: requires a page-auth token with the `player` scope when shared-secret authentication is enabled. The player also checks that the browser is authorized for the requested screen.
 
 Response fields:
 
@@ -130,10 +170,19 @@ Response fields:
 - `timetableGroups`
 - `revision`
 
+### `GET /api/screens/{slug}/announcement`
+Returns the active announcement for a screen.
+Access: requires a page-auth token with the `player` scope when shared-secret authentication is enabled. The player also checks that the browser is authorized for the requested screen.
+
+Response fields:
+
+- `announcement`
+- `revision`
+
 ### `GET /api/screens/{slug}/connections`
 ### `GET /api/screens/{slug}/clients`
 Returns the live player connection snapshot for a screen.
-Access: public within the trusted player deployment, but it exposes live connection state.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled; it exposes live connection state.
 
 Response fields:
 
@@ -143,9 +192,19 @@ Response fields:
 - `connections`
 - `degraded`
 
+### `POST /api/screens/{slug}/announcements/refresh`
+Notifies connected players that the active announcement should be refreshed.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled.
+
+Response fields:
+
+- `ok`
+- `screenSlug`
+- `sent`
+
 ### `POST /api/screens/{slug}/commands`
 Sends a command to the player connections for a screen.
-Access: internal-only. The admin dashboard should remain the protected control surface for commands.
+Access: internal-only and requires signed request headers when shared-secret authentication is enabled. The admin dashboard should remain the protected control surface for commands.
 
 Accepted request fields:
 

docs/technical/schema.md

@@ -13,12 +13,34 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 - `a_role_permissions` - many-to-many mapping between roles and permissions.
 - `a_user_roles` - many-to-many mapping between users and roles.
 - `a_sessions` - persisted admin session tokens.
+- `a_account_tokens` - short-lived account verification and password-reset tokens.
+- `a_user_invitations` - pending user invitations and assigned role ids.
+- `a_login_attempts` - login rate-limit and lockout state.
 
 ### `a_users`
 
-- `id`, `name`, `username`, `password_hash`, `password_salt`, `password_iterations`, `must_change_password`, `account_locked`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `username`, `email`, `email_verified_at`, `pending_email`, `pending_email_token_hash`, `pending_email_expires_at`, `password_hash`, `password_salt`, `password_iterations`, `must_change_password`, `account_locked`, `last_login_at`, `last_login_ip`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - `username` is unique.
 
+### `a_account_tokens`
+
+- `id`, `user_id`, `token_type`, `token_hash`, `expires_at`, `used_at`, `created_at`
+- `token_hash` is unique.
+- Foreign key:
+        - `user_id` -> `a_users.id` with `ON DELETE CASCADE`
+- Indexed by `(token_type, token_hash, expires_at)` and `(user_id, token_type)`.
+
+### `a_user_invitations`
+
+- `id`, `email`, `name`, `role_ids_json`, `token_hash`, `expires_at`, `used_at`, `created_at`, `created_by`
+- `token_hash` is unique.
+- Indexed by `(email, used_at, expires_at)` and `(created_by, created_at)`.
+
+### `a_login_attempts`
+
+- `id`, `rate_key`, `failed_count`, `last_failed_at`, `locked_until`, `created_at`, `modified_at`
+- `rate_key` is unique.
+
 ### `a_roles`
 
 - `id`, `role_key`, `name`, `description`, `created_at`, `created_by`, `modified_at`, `modified_by`
@@ -60,6 +82,7 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 - `c_templates` - slide templates with canvas and background settings.
 - `c_template_regions` - template region layout and metadata.
 - `c_slides` - slide records with template binding, JSON content, and thumbnail path.
+- `c_media_assets` - reusable uploaded media files referenced by slides and templates.
 - `c_playlist_slides` - ordered playlist items and timing.
 - `c_playlist_slide_schedule_rules` - rule rows attached to playlist slides.
 
@@ -76,7 +99,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`
 
@@ -92,6 +116,12 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 - Foreign key:
         - `template_id` -> `c_templates.id` with `ON DELETE SET NULL`
 
+### `c_media_assets`
+
+- `id`, `media_path`, `original_name`, `media_type`, `mime_type`, `file_size`, `is_published`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `media_path` is unique.
+- Indexed by `media_type` and `created_at`.
+
 ### `c_playlist_slides`
 
 - `id`, `playlist_id`, `slide_id`, `position`, `duration_seconds`, `use_video_duration`, `disable_audio`, `created_at`, `created_by`, `modified_at`, `modified_by`
@@ -133,7 +163,7 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 
 ### `d_onboarding_devices`
 
-- `id`, `device_id`, `client_name`, `screen_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `device_id`, `client_name`, `screen_id`, `created_at`, `created_by`, `modified_at`, `modified_by`, `last_seen_at`
 - `device_id` is unique.
 - Foreign key:
         - `screen_id` -> `d_screens.id` with `ON DELETE SET NULL`
@@ -165,12 +195,13 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 - `i_rss_feeds` - RSS feed definitions and refresh cadence.
 - `i_rss_feed_items` - cached RSS feed items.
 - `i_api_sources` - API source definitions and last response snapshot.
+- `i_weather_locations` - configured weather locations and last response snapshot.
 - `i_timetable_groups` - grouped timetable definitions used by the timetable region.
 - `i_timetable_entries` - dated entries that belong to a timetable group.
 
 ### `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 +213,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`, `token_url`, `token_request_body_json`, `token_response_path`, `token_refresh_url`, `token_refresh_request_body_json`, `token_refresh_response_path`, `token_header_name`, `token_header_prefix`, `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`
 
@@ -231,6 +267,7 @@ Tables generally use a numeric auto-increment `id` primary key. The relationship
 - The schema is initialized with `CREATE TABLE IF NOT EXISTS`, so new installs can start from an empty database.
 - `src/db/bootstrap.js` seeds the canvas size defaults, default permissions, and the default administrator role.
 - `src/db/migrations.js` records the current schema version in `o_app_state` during startup so later launches can tell whether an update is happening.
+- The ER diagram shows declared foreign keys and the logical audit actor association; player registry and JSON-based references are intentionally not shown as foreign-key relationships.
 
 ```mermaid
 erDiagram
@@ -246,6 +283,12 @@ erDiagram
         }
         A_SESSIONS {
         }
+        A_ACCOUNT_TOKENS {
+        }
+        A_USER_INVITATIONS {
+        }
+        A_LOGIN_ATTEMPTS {
+        }
         C_CANVAS_SIZES {
         }
         C_PLAYLISTS {
@@ -256,6 +299,8 @@ erDiagram
         }
         C_SLIDES {
         }
+        C_MEDIA_ASSETS {
+        }
         C_PLAYLIST_SLIDES {
         }
         C_PLAYLIST_SLIDE_SCHEDULE_RULES {
@@ -276,6 +321,8 @@ erDiagram
         }
         I_API_SOURCES {
         }
+        I_WEATHER_LOCATIONS {
+        }
         I_TIMETABLE_GROUPS {
         }
         I_TIMETABLE_ENTRIES {
@@ -294,18 +341,21 @@ erDiagram
         A_ROLES ||--o{ A_ROLE_PERMISSIONS : has
         A_PERMISSIONS ||--o{ A_ROLE_PERMISSIONS : granted_to
         A_USERS ||--o{ A_SESSIONS : owns
-        A_USERS ||--o{ O_AUDIT_EVENTS : acts
+        A_USERS ||--o{ A_ACCOUNT_TOKENS : has
+        A_USERS o|--o{ O_AUDIT_EVENTS : acts
 
-        C_CANVAS_SIZES ||--o{ C_TEMPLATES : used_by
+        C_CANVAS_SIZES o|--o{ C_TEMPLATES : used_by
-        C_CANVAS_SIZES ||--o{ C_PLAYLISTS : used_by
+        C_CANVAS_SIZES o|--o{ C_PLAYLISTS : used_by
         C_TEMPLATES ||--o{ C_TEMPLATE_REGIONS : contains
-        C_TEMPLATES ||--o{ C_SLIDES : used_by
+        C_TEMPLATES o|--o{ C_SLIDES : used_by
+        C_MEDIA_ASSETS }o..o{ C_SLIDES : referenced_by
+        C_MEDIA_ASSETS o{..o| C_TEMPLATES : background_for
         C_PLAYLISTS ||--o{ C_PLAYLIST_SLIDES : contains
         C_SLIDES ||--o{ C_PLAYLIST_SLIDES : included_in
         C_PLAYLIST_SLIDES ||--o{ C_PLAYLIST_SLIDE_SCHEDULE_RULES : has_rules
 
-        C_PLAYLISTS ||--o{ D_SCREENS : uses
+        C_PLAYLISTS o|--o{ D_SCREENS : uses
-        D_SCREENS ||--o{ D_ONBOARDING_DEVICES : binds
+        D_SCREENS o|--o{ D_ONBOARDING_DEVICES : binds
         D_ANNOUNCEMENTS ||--o{ D_ANNOUNCEMENT_SCREENS : targets
         D_SCREENS ||--o{ D_ANNOUNCEMENT_SCREENS : receives
 

docs/user/README.md

@@ -0,0 +1,36 @@
+# User Guides
+
+These guides explain how to use Pulse Signage to create content, publish it to screens, monitor players, and operate displays.
+
+- [Web guide](guide-web.md) - content creation, publishing, screens, players, and everyday web workflows.
+- [Local Control guide](guide-local-control.md) - player-specific offline controls, synchronization, and troubleshooting.
+- [Data Sources guide](guide-data-sources.md) - configuring, refreshing, and troubleshooting changing data.
+- [Administration guide](guide-admin.md) - accounts and fonts.
+
+## How Pulse Signage Fits Together
+
+The main content objects have a simple relationship:
+
+- A **template** defines the structure and appearance of a slide.
+- A **slide** is a piece of finished content built from that structure.
+- A **playlist** arranges slides into a sequence.
+- A **screen** is the display destination for a playlist.
+- A **player** runs the screen and reports its connected clients.
+
+You can reuse a template across many slides, reuse a slide across many playlists, and change a playlist without rebuilding the slides inside it. This separation lets you update one part of a signage setup without recreating everything around it.
+
+## Typical Publishing Workflow
+
+For a new piece of signage, work through the application in this order:
+
+1. Decide the screen size or aspect ratio and create a matching [canvas size](guide-web.md#canvas-sizes) if one does not already exist.
+2. Choose an existing [slide template](guide-web.md#slide-templates), or create one when the design needs a new structure.
+3. Build a [slide](guide-web.md#slides), add its content, and preview it at the intended size.
+4. Add the slide to a [playlist](guide-web.md#playlists) and place it in the correct order.
+5. Assign the playlist to a [screen](guide-web.md#screens).
+6. Check [connected clients](guide-web.md#connected-clients) to confirm the player is online and displaying the expected content.
+7. Use an [announcement](guide-web.md#announcements) or [data source](guide-web.md#data-sources) when the information needs to change independently of the playlist.
+
+The web application is the main place where content and screen assignments are managed. Once a change is saved, the relevant players receive the updated state.
+
+For deployment and service setup, see the [Compose guide](../../docker-compose/README.md).

docs/user/guide-admin.md

@@ -0,0 +1,133 @@
+# Administration Guide
+
+This guide covers the administrative tasks that support a Pulse Signage deployment: managing accounts and installing fonts. Administrative changes can affect many users or designs, so confirm the target before saving or deleting anything.
+
+## Accounts and Access
+
+Your account determines which parts of the web application are available to you. Administrators can invite users, create or edit accounts, assign roles, reset passwords, and remove accounts that are no longer needed.
+
+### Inviting a User
+
+Use the invitation workflow when the person should create their own account:
+
+1. Enter the recipient's email address and display name.
+2. Select the roles the person should receive after accepting the invitation.
+3. Send the invitation.
+4. Ask the recipient to follow the invitation message and complete account setup.
+
+Assign the smallest role set that allows the person to do their work. Review the selected roles before sending because the invitation applies them when the account is accepted. If there are no roles available, create a suitable role before sending the invitation.
+
+### Managing Existing Users
+
+The users page shows usernames, display names, roles, and account status. Use it to:
+
+- Edit a user's name or assigned roles.
+- Reset a password when the user cannot sign in.
+- Delete an account that is no longer needed.
+- Search the user list when the deployment has many accounts.
+
+The current administrator account is protected from actions that would remove or accidentally disable the account being used. When access changes, the web application remains the authority; you do not need to create separate users on each player.
+
+If you cannot see a feature or action described in the user guides, ask an administrator to check your account rather than assuming the feature is unavailable.
+
+## Fonts
+
+Managed fonts are uploaded once to the deployment and can then be enabled for the editor and players. They are separate from slide media and are intended for font-family choices in text and data regions.
+
+### Adding a Font
+
+The Fonts page accepts WOFF2, WOFF, TTF, and OTF files. Provide the family name used by the design, choose the font file, and upload it. Use a name that clearly identifies the family and weight when several variants are installed.
+
+After uploading a font:
+
+1. Confirm it appears in the managed-font list.
+2. Enable it if it is disabled.
+3. Select it in a text, RSS, timetable, weather, or other text-rendering region.
+4. Preview the slide at the target canvas size.
+5. Check a connected player after font synchronization.
+
+Disable a font when it should no longer be offered without deleting it. A font that is still in use cannot be deleted until the templates or slides no longer depend on it. Removing a font can change line wrapping and the height of text, so check affected content after any font change.
+
+## System Settings
+
+System Settings controls defaults, integrations, upload policies, security behavior, and diagnostics for the deployment. Change these values deliberately because a single setting can affect new content, multiple data sources, or every player.
+
+### Application Defaults
+
+Application defaults provide starting values for new content and player behavior, including:
+
+- Default slide duration.
+- Whether slides fade between one another by default.
+- Whether unavailable RTMP streams are skipped.
+- Default announcement icon and duration.
+- Default RSS and API refresh intervals.
+
+Defaults help keep new content consistent. They do not necessarily rewrite values that were already set on an existing slide, playlist, announcement, or source. Check the affected feature after saving a default change.
+
+### Media Uploads
+
+Media upload settings control the maximum image, video, and rich-text image sizes, along with the allowed image and video MIME types. Keep these limits large enough for the intended displays but small enough to avoid unnecessary storage and synchronization time.
+
+Changing allowed types or size limits affects future uploads and may not change files that are already referenced. Test an upload after changing the policy, then check a player can synchronize the resulting file.
+
+### Icon Suggestions
+
+Icon Suggestions controls which announcement icons appear first in the icon picker. Select up to 48 suggestions and reorder them so the icons used most often are easy to find. This changes the picker order, not the icon already saved on an existing announcement.
+
+### Weather Providers
+
+Weather Providers stores shared credentials for the configured weather services. A provider may work without an API key or may require one before it can be selected for a weather location. Configure the provider here before creating locations that depend on it, and avoid placing provider credentials in source names, slide content, or public documentation.
+
+### Security and Sessions
+
+Security and Sessions contains deployment-wide controls for authentication and session behavior. Review these settings when changing login policy, session lifetime, or security controls. Test the change with a non-administrator account where possible so an overly restrictive setting does not prevent normal users from working.
+
+### Email Delivery and Templates
+
+Email Delivery configures SMTP for messages such as password recovery and account verification. Check the SMTP host, port, security mode, and enabled state before relying on invitations or recovery emails.
+
+Email Templates controls the messages sent by the application. Keep the wording clear and verify links and sender details after changing a template. Send a test invitation or recovery message when the deployment's email settings change.
+
+### Audit Logging and Diagnostics
+
+Audit Logging controls the recording of authentication, security, and session events. Diagnostics provide information useful when investigating application behavior or background work. Limit diagnostic changes to the period needed for investigation and review the resulting activity afterward.
+
+## Background Tasks
+
+Background Tasks shows queued work that runs in the web process. Tasks can be queued, running, completed, failed, or canceled. The list includes the task name, category, timestamps, source, and any error message.
+
+Use the task search and status filters to find work for a particular source or operation. A failed task's error message is the first place to look when a refresh, synchronization, cleanup, or notification did not complete. Finished tasks can be cleared after they have been reviewed; clearing the list does not undo the work that completed.
+
+When a task remains queued, check whether the web process is running and whether earlier work is blocking the queue. When a task fails repeatedly, fix the underlying source, credential, file, or service problem before running the operation again.
+
+## Scheduled Tasks
+
+Scheduled Tasks shows recurring work such as source refreshes, player synchronization, and cleanup. For each task, review its interval, next run, last run, last result, and source when available.
+
+Use **Run now** when an administrator needs an immediate refresh or synchronization rather than waiting for the next scheduled run. Check the last result after it completes. A failed scheduled run can leave the source or player state unchanged even though the recurring task remains registered.
+
+Scheduled tasks are service operations, not content settings. Change a source's own update interval when the source should refresh at a different cadence; use the scheduled-task page to inspect or manually trigger the registered operation.
+
+## Audit Log
+
+The Audit Log records authentication, security, session, and other important administrative events. Filter by category or event type, search by event, actor, or target, and review the time, source address, user agent, and recorded changes.
+
+Use the audit log to answer questions such as:
+
+- Who changed a user, setting, source, or player-related value?
+- When did a login, session, or security event occur?
+- Which value changed, and what was it before the change?
+- Did an unexpected update come from the web application or another source?
+
+Export filtered results when they need to be retained for an investigation or shared with an administrator. Treat exported logs as sensitive operational information because they can contain account and network details.
+
+## Administrative Checks
+
+Before making a broad change:
+
+- Check which slides, templates, users, sources, players, or defaults will be affected.
+- Confirm the replacement content or account has been tested.
+- Review the audit log before and after sensitive changes.
+- Review task status when a synchronization change takes longer than expected.
+
+See the [Local Control guide](guide-local-control.md) for player-specific offline controls.

docs/user/guide-data-sources.md

@@ -0,0 +1,100 @@
+# Data Sources Guide
+
+Data sources let slides show information that changes without requiring someone to edit the slide each time. Configure a source once, allow it to refresh on its schedule, and use the current values in the appropriate slide region.
+
+The source page is where you configure and test the connection or data. The template and slide editors are where you decide how that data appears on screen.
+
+## Choosing a Source
+
+Use the source type that matches the data you need:
+
+- **RSS feeds:** headlines and other syndicated feed content.
+- **API sources:** JSON data returned by a configured web service.
+- **Timetables:** schedules made from named groups and entries.
+- **Weather locations:** current or forecast weather for a saved location.
+
+Create separate sources when the refresh cadence, authentication, location, or presentation needs are different. Give each source a clear name that identifies its purpose rather than only its URL.
+
+## RSS Feeds
+
+An RSS feed needs a name, a feed URL, an update interval, and the number of items to pull. The latest pulled items are shown on the feed page so you can verify the title, link, publication date, description, author, identifier, and comments fields before using them in a slide.
+
+Use the item limit to keep the stored feed focused on the number of recent items your slides need. If the feed contains more items than the limit, older or excess items are not useful for the source's slide regions.
+
+When an RSS feed fails, open the latest-items preview and check the reported pull error. Confirm the URL returns an RSS or compatible feed, then use **Refresh now** after correcting the source.
+
+## API Sources
+
+An API source connects to a JSON endpoint and can use either GET or POST:
+
+- **GET:** retrieve data directly from the API URL.
+- **POST:** send a JSON request body with the request.
+
+Use **Items path** when the records needed by a slide are nested inside the response. Enter a dot-separated path such as `items` or `results.data` to identify the array that should be treated as the source items.
+
+API authentication supports:
+
+- No authentication.
+- Basic username and password authentication.
+- A bearer token.
+- An API key sent in a named header.
+- A login-then-token flow for services that issue a token from a login request.
+
+For a login-then-token source, configure the login URL, JSON login body, token response path, and token header. If the service supports token refresh, configure the refresh URL, refresh-token response path, refresh body, and token prefix as required by that service. Keep credentials and tokens out of slide content and request examples that will be shared with other users.
+
+After a pull, review the latest response details, including the last-pulled time, HTTP status, content type, and stored JSON response. Use the response structure to choose the item number, items path, and fields used by an API region.
+
+## Timetables
+
+A timetable group contains the events that a timetable region displays. Configure:
+
+- A group name and optional short description.
+- The IANA time zone used by the group, such as `Europe/Berlin`.
+- One or more entries with a title, optional description, start time, and optional end time.
+
+Use the group timezone consistently with the people and screens that will read the schedule. An entry without an end time can represent an item with an open-ended or display-only start time. Remove old entries rather than leaving expired events mixed with current ones.
+
+## Weather Locations
+
+A weather location is a saved place that weather regions can use. Search for a town, city, or postcode and choose a result so the application fills the coordinates and timezone. Coordinates can be edited manually when the lookup result needs adjustment.
+
+Configure the provider and display units for each location:
+
+- Temperature: Celsius or Fahrenheit.
+- Wind: km/h, mph, or m/s.
+- Precipitation: millimetres or inches.
+- Update interval: minutes or hours, within the available limits.
+
+The weather page provides a current preview and forecast preview. Use them to confirm the location, units, and provider before adding the location to a slide. A provider that is unavailable because its service credentials are not configured cannot be selected until the deployment is set up for it.
+
+## Using Sources in Slides
+
+Configure the source before selecting it in a template or slide region. The available region types include RSS, API, Timetable, and Weather, as well as Time / Date for values based on a timezone.
+
+When designing a data-backed region:
+
+- Leave enough width and height for the longest expected value.
+- Decide which item, field, or forecast mode the region should show.
+- Use the preview to check missing values, long titles, dates, and line wrapping.
+- Keep the playlist stable when the changing information belongs in a source rather than in slide text.
+
+Changing a source can affect every slide and screen that uses it. Check the source's existing usage before changing its field structure or meaning.
+
+## Refreshing Data
+
+Each source has an update interval and unit. Available intervals depend on the source type; RSS and API sources support seconds, minutes, or hours, while weather locations use minutes or hours. A source can also be refreshed manually when you need the latest values immediately.
+
+Use **Disable** when a source should stop updating temporarily without deleting its configuration. Re-enable it when the source is ready to be used again. Deleting a source is a larger change because regions that depend on it may no longer have current values.
+
+## Troubleshooting
+
+When a data-backed slide is stale or empty, check in this order:
+
+1. Open the source page and check whether it is enabled.
+2. Check the last refresh time, latest response, or preview data.
+3. Use **Refresh now** and read any returned error.
+4. Confirm the source URL, authentication, response format, or location coordinates.
+5. Check the region's selected source, item, field, path, or forecast mode.
+6. Confirm the player is connected and has received the refreshed state.
+
+An online source with a successful response can still produce an empty region when the selected item or field no longer exists. An online source can also appear stale on a player that has not yet reconnected or refreshed.

docs/user/guide-local-control.md

@@ -0,0 +1,146 @@
+# Local Control
+
+Local Control is a small control page hosted by an individual player. It lets an authorized user operate the clients connected to that player when the main web application is unavailable or inconvenient to reach.
+
+Open Local Control at:
+
+```text
+http://player-address:8081/local-control
+```
+
+Use the address and port exposed by the player in your deployment. Local Control controls only the player that served the page; it does not show or control every player in the installation.
+
+## When To Use It
+
+The normal web application remains the main place to manage content, screens, playlists, users, and player assignments. Local Control is for immediate, player-specific operations such as:
+
+- Reloading a client that is stuck or displaying an old page.
+- Moving to the previous or next slide while checking playback.
+- Pausing or resuming a client.
+- Temporarily blacking out a client or restoring its display.
+- Checking which client is connected and what it is currently showing.
+
+Use the web application when you need to change a playlist, edit a slide, send commands to several screen groups, pair a player, or manage the signage setup.
+
+## Signing In
+
+Local Control uses the central account information supplied by the web application. There are no separate player user accounts to create or manage.
+
+Enter the same username and password used for the central web application. Email addresses are not accepted in place of the username. The player checks the cached authorization data before creating a local session.
+
+The login session is stored in a player-specific, HTTP-only cookie. The cookie is limited to the Local Control path and uses `SameSite=Lax`, so it is not intended to be shared with another player or another part of the application.
+
+### Failed Logins
+
+Repeated failed attempts are temporarily throttled to slow down guessing:
+
+- Five failed attempts are allowed within a fifteen-minute window.
+- Further attempts are rejected with a temporary lockout response.
+- The lockout lasts until the oldest failed attempt falls outside the window, so it can be less than fifteen minutes after the last failed attempt.
+- A successful login clears the failed-attempt record for that username and client address.
+- The limiter is held in memory on the player and resets if the player restarts.
+
+The login response does not reveal whether a username exists. This keeps invalid usernames and incorrect passwords on the same authentication path.
+
+## What You See
+
+After signing in, Local Control shows the clients currently connected to the player. Each client row can include:
+
+- The client name.
+- The screen name.
+- The current slide title, when available.
+- The available action buttons.
+- Pause or blackout state when the client is in one of those states.
+
+If no clients are connected, the page remains available but there are no client actions to send. Connect or restart the player client, then reload the Local Control page to check again.
+
+## Client Actions
+
+Actions apply to the selected client only.
+
+### Reload
+
+Reloads the client page. Use this when the page is stale, an asset did not load, or a player-side display needs to restart without changing its content assignment.
+
+### Previous and Next
+
+Moves the selected client to the previous or next slide in its current playlist. These actions are useful for checking a playlist or temporarily moving past a slide without editing the playlist.
+
+### Pause and Resume
+
+Pauses the selected client on its current state. The same control resumes playback when the client is paused.
+
+### Blackout and Restore
+
+Temporarily hides the selected client's display without changing its playlist. The same control restores the display. Use blackout for short operational interruptions; use screen or playlist changes when the content assignment itself needs to change.
+
+## Live Updates
+
+Local Control opens an authenticated WebSocket after login. When the player reports a state change, the page can update the affected client row without a manual refresh.
+
+Live state can include:
+
+- Current slide title.
+- Pause state.
+- Blackout state.
+- Client connection and disconnection changes.
+
+If the live connection is interrupted, the page attempts to reconnect. The underlying player state and commands are still scoped to the local player. If a browser cannot use WebSockets, the page falls back to periodic state requests.
+
+## Offline Authorization Cache
+
+The web application is the source of Local Control authorization. To support player-specific operation when the web application cannot be reached, each player stores a small local cache containing only the information needed to verify an eligible login:
+
+- A hashed username.
+- A password hash.
+- A password salt.
+
+Plain usernames, email addresses, display names, user IDs, and password iteration settings are not stored in this cache.
+
+Cached authorization is considered usable for up to 72 hours after the last successful synchronization. Once that period expires, Local Control rejects login attempts until the player receives a fresh synchronization.
+
+The cache is written with restricted file permissions and is not intended to be edited manually. Editing it does not provide a supported way to create local users.
+
+## Authorization Updates
+
+Authorization is managed centrally by the web application and delivered to players through authenticated service connections.
+
+- Connected remote players receive a scheduled refresh every fifteen minutes.
+- A remote player receives the current authorization state immediately after it reconnects to the bridge.
+- The configured local player is not included in the remote-player fanout because it is refreshed through its local service path.
+- When the synchronized authorization changes, existing Local Control sessions on that player are closed.
+- A user removed from central access cannot continue using an existing Local Control session after the change reaches the player.
+
+A player that remains disconnected can continue using its last valid cache until the cache expires. Once it reconnects, it receives the current central state.
+
+## Scope and Limitations
+
+Local Control is intentionally narrower than the web application:
+
+- It controls only clients connected to the current player.
+- It does not edit slides, templates, playlists, screens, or announcements.
+- It does not pair players or move clients between screen groups.
+- It does not provide local user administration.
+- It does not replace the web application as the source of content or authorization.
+
+## Troubleshooting
+
+### The login page says authorization is unavailable
+
+The cached authorization is missing or older than 72 hours. Restore the player's connection to the web service or bridge and wait for synchronization to complete. Restarting the player does not create a fresh authorization cache.
+
+### A correct password is rejected
+
+Confirm that you are using the central username rather than an email address. If several failed attempts were made, wait for the temporary login throttle to expire. Also check whether the account's central access has changed.
+
+### A client is not listed
+
+Confirm that the client is connected to the player serving Local Control. A client connected to another player will appear only in that player's Local Control page. Check the player connection and reload the page after the client reconnects.
+
+### An action reports that the client is unavailable
+
+The client may have disconnected between the time the page loaded and the time the action was sent. Reload the page and check the current client list before trying again.
+
+### Changes from the web application are not visible
+
+Check that the player can reach the web application or bridge and that its registration connection is healthy. A disconnected player can use its existing cache temporarily, but it cannot receive central authorization changes until it reconnects.

docs/user/guide-web.md

@@ -0,0 +1,308 @@
+# Web Guide
+
+Pulse Signage brings content creation, publishing, screen management, and live operations into one web application. This guide explains what each area is for, how the areas work together, and when to use each one.
+
+## Overview
+
+### Dashboard
+
+The dashboard is the starting point for everyday work. It summarizes the parts of the system that matter most when you are publishing or checking displays, including screens, playlists, slides, templates, and active clients.
+
+Use the dashboard to:
+
+- See whether the system has content ready to publish.
+- Move quickly to the content or screen area that needs attention.
+- Check high-level counts and current activity.
+- Identify whether a display problem is likely to be content-related or connection-related.
+
+The dashboard is an overview rather than a replacement for the detailed pages. Use the dedicated feature pages when you need to edit content or investigate a specific connection.
+
+## Screens and Players
+
+### Screens
+
+A screen represents a display destination in Pulse Signage. It gives a playlist somewhere to play and provides the link between your content and a physical display.
+
+When setting up a screen, choose a clear name and stable slug so other people can recognize it. Assign the playlist that should normally play there, then associate the screen with the appropriate player during setup.
+
+Use the screen area when you need to:
+
+- Add a new display destination.
+- Change the playlist shown on a display.
+- Review which player is associated with a screen.
+- Update screen details after a display is moved or renamed.
+- Remove a display that is no longer part of the signage setup.
+
+If a screen exists but is not showing the expected content, first check its assigned playlist, then check the player and client status.
+
+Keep screen names specific to their physical location or purpose. The screen assignment is the publishing boundary: changing the playlist changes what that destination plays, while reusing a playlist lets several screens share the same experience.
+
+### Connected Clients
+
+A connected client is an active browser or player connection reporting to a screen. A single screen can have more than one connection over time as players restart, browsers reconnect, or replacement devices come online.
+
+The clients page helps you distinguish content problems from runtime problems. It shows information such as:
+
+- The client name and screen group.
+- The current slide title, when one is available.
+- The client viewport size.
+- When the connection was established or last updated.
+- Whether the client is paused or blacked out.
+
+From this page, available controls can reload a client, move to the previous or next slide, pause playback, or toggle blackout. Commands apply to the selected connection, so confirm the client and screen before sending one.
+
+If a client is missing, check that the player is running and connected before changing the playlist. If the client is present but showing the wrong content, check the screen's playlist and the playlist order.
+
+Use client information to separate three common problems:
+
+- A missing client usually indicates a player, network, bridge, or pairing problem.
+- A connected client showing the wrong slide usually indicates a screen assignment or playlist problem.
+- A connected client showing a broken region usually indicates a slide value, asset, source, or external stream problem.
+
+### Client Pairing and Remote Players
+
+Pairing connects a player device to a screen or screen group. The web application pairing workflow uses the player's six-character PIN and a client name.
+
+A typical setup is:
+
+1. Start the web application, database, and player bridge.
+2. Open the pairing workflow from the web application.
+3. Read the six-character PIN shown by the player, or scan its QR code.
+4. Enter a name that identifies the physical player, such as `Lobby player`.
+5. Select the screen the player should display.
+6. Connect the player and wait for the pairing confirmation.
+7. Confirm the player appears among connected clients.
+8. Assign or verify the playlist for the selected screen.
+
+Use a new client name when pairing a replacement device so the client list remains understandable. If the PIN is rejected or expires, return to the player and start the pairing display again before retrying.
+
+A local player can run alongside the main application, while a remote player connects back to the player bridge from another location. Remote players need a working connection to the bridge and the web service.
+
+If a remote player does not appear:
+
+- Check the bridge address and shared connection settings.
+- Confirm firewall rules allow the required traffic.
+- Confirm WebSocket traffic is allowed through any reverse proxy.
+- Check that the player can resolve and reach the service from its network.
+- Check the connected clients page after the player reconnects.
+
+The web application remains the main control source. Screen assignments, player commands, media synchronization, fonts, and access updates are delivered to players through the service connections. A player being offline does not make it an independent administration surface; it receives the current state when it reconnects.
+
+## Content
+
+### Slide Templates
+
+A slide template is a reusable design definition. It sets the canvas, background, regions, layout, and animation defaults that editors use when creating slides. A template defines the visual structure; a slide fills that structure with a particular message or set of values.
+
+Templates are useful when you want consistency. For example, an event announcement template can give every editor the same title, date, image, and background fields without asking them to rebuild the layout each time.
+
+#### Template Details and Canvas
+
+When creating or editing a template:
+
+- Give the template a descriptive name based on its purpose.
+- Choose the canvas size that matches the target display orientation and resolution.
+- Use a landscape canvas for wide screens, a portrait canvas for vertical displays, and a custom size when the hardware needs one.
+- Treat the canvas as the coordinate system for every region. A layout made for one aspect ratio may need a separate template for another.
+- Preview the template at the canvas size where it will be used before publishing it.
+
+Existing templates may lock their canvas size after slides have been created from them. If the design needs a different aspect ratio, create a separate template rather than distorting a template that is already in use.
+
+#### Backgrounds
+
+The template background is behind every region. It can be built from:
+
+- A solid background colour.
+- An uploaded background image.
+- A linear gradient with an adjustable angle and multiple colour stops.
+
+Use an image for a branded or photographic background, a colour for a simple consistent surface, and a gradient when the design needs depth without another media asset. Keep important details away from region boundaries and check text contrast against the final background. Removing a background image does not remove the regions placed above it.
+
+#### Regions and Layout
+
+A region is a named area of the canvas that provides one content slot on a slide. Add a region, choose its type, give it a stable name, and place it on the canvas. Regions can overlap; the Z-Index determines which region is drawn in front when they do.
+
+Each region has layout controls for:
+
+- **X and Y:** the region's position on the canvas.
+- **Width and Height:** the region's size.
+- **Lock ratio:** an optional ratio such as `16:9` that keeps the shape consistent while resizing.
+- **Z-Index:** the stacking order for overlapping regions.
+- **Region name:** the stable field name used to identify the content slot.
+
+Use names such as `headline`, `hero_image`, `event_time`, or `room_schedule` instead of generic names. Stable names make slides easier to edit and make template changes easier to understand. Keep regions large enough for their longest expected value; a region that fits a short title may clip a longer announcement.
+
+#### Region Types
+
+The available region types cover fixed content, uploaded media, live data, and external content:
+
+- **Text:** rich text content with font family, font size, font colour, and normal editorial formatting. Use it for headings, labels, paragraphs, and other copy that editors change per slide.
+- **Image:** an uploaded image in the media library. The editor supports PNG, JPG, GIF, WebP, and SVG images, with cropping to the region ratio when needed.
+- **Video:** an uploaded MP4, WebM, or Ogg video. Videos preview in the region and loop during playback.
+- **HTML:** HTML content rendered inside a sandboxed preview. Use it for controlled custom markup when an ordinary text region cannot express the design.
+- **Webpage:** a URL displayed in an embedded webpage region. Use it for a page that should be shown inside the slide, and verify that the destination permits embedding.
+- **QR Code:** a generated QR code with configurable code content and visual styling. Use it for links, tickets, instructions, or other information that viewers can scan.
+- **RSS:** a selected RSS feed item. Choose the feed and item, then map the available feed fields into the region.
+- **API:** a value from a configured API source. Select the source, identify the item or path when required, and use the returned value in the slide.
+- **Timetable:** schedule information from configured timetable groups and entries. Use it for room bookings, events, departures, or other structured schedules.
+- **Weather:** current or forecast weather for a configured location. Select the location and forecast mode, then format the region to leave room for changing values.
+- **Time / Date:** a clock or date display using a chosen timezone. Use it for local time, event dates, or location-specific schedules.
+- **RTMP:** a live RTMP stream URL. Use it for a live video source and check that the player can reach the stream from its network.
+
+Live region types depend on their configured source. Configure the RSS feed, API source, timetable, weather location, or other source before trying to use it in a slide.
+
+#### Region Animations
+
+Animations are configured per region and are saved with the template. They have three independent phases:
+
+- **Intro:** how the region enters when the slide starts.
+- **Outro:** how the region leaves when the slide ends.
+- **Attention seekers:** a repeating animation while the slide is visible, useful for drawing attention to a status, alert, or call to action.
+
+The basic choices include fades, slides, zooms, and attention effects such as pulse, flash, bounce, shake, swing, and heartbeat. Choose **None** when movement would distract from the content. Use the advanced animation settings when the basic choices do not provide the required direction, speed, delay, duration, or repeat behaviour. The template preview can play the intro, outro, or attention animation so you can check the result before saving.
+
+Avoid animating every region at once. Staggered or limited motion is easier to read, especially for information-heavy slides and live data.
+
+When working with templates:
+
+- Keep fields focused on the content an editor is expected to change.
+- Consider existing slides before changing a template, because layout changes can affect every slide built from it.
+- Create a separate template when two designs are conceptually different instead of forcing one template to handle unrelated layouts.
+- Use the preview controls to check backgrounds, overlapping regions, text wrapping, media cropping, and animations together.
+
+Templates provide structure; they do not decide which slides play or which screen receives them.
+
+### Slides
+
+A slide is an individual piece of signage content. It is normally created from a template, filled with content, previewed, and then placed into one or more playlists.
+
+Slides can contain ordinary editorial content such as text, images, video, HTML, QR codes, and webpages, as well as content that changes over time through announcements or data sources. This lets a playlist remain stable while the information inside a slide stays current.
+
+When filling a slide, work through each region in the template rather than trying to redesign the layout in the slide editor. Enter text in text regions, upload or select media in media regions, and choose configured sources in live-data regions. The template's region names and layout remain the reference for how the slide is intended to look.
+
+For media regions, check the crop and aspect ratio before saving. For text and live data, check the longest likely value, line wrapping, font size, and contrast. For webpages and streams, confirm the player network can reach the external address.
+
+A useful slide workflow is:
+
+1. Select the template that matches the intended design.
+2. Fill in the visible content and any optional fields.
+3. Preview the slide at the target canvas size.
+4. Check text wrapping, image cropping, animation, and contrast.
+5. Save the slide and add it to a playlist.
+6. Recheck the live client after publishing.
+
+If a slide is reused in multiple playlists, an edit can affect every place where it appears. Create a separate slide when the content needs to vary between destinations.
+
+### Playlists
+
+A playlist is the sequence a screen plays. It controls which slides appear, the order in which they appear, how long they remain visible, and how transitions behave.
+
+Use playlists to organize content by destination, audience, or purpose. A lobby playlist, for example, may combine welcome messages, schedules, announcements, and a repeating information slide without changing the underlying templates.
+
+When editing a playlist:
+
+- Add only the slides that belong to that display experience.
+- Reorder slides to establish the intended viewing sequence.
+- Review each slide's duration and the overall rhythm of the sequence.
+- Configure transitions where a change in visual pacing is useful.
+- Decide how unavailable streams should be handled if the playlist uses live media.
+- Save the playlist before checking the player.
+
+The order is significant: viewers see slides from top to bottom and then return to the beginning. Use longer durations for slides with more text or live data, and use shorter durations for simple notices. A transition changes how one slide gives way to the next; it does not change the region animations inside either slide.
+
+A playlist change affects the screens using that playlist. A slide change can affect every playlist that includes that slide, so choose the object that matches the scope of the change you intend to make.
+
+### Canvas Sizes
+
+Canvas sizes describe the dimensions or aspect ratios a design is meant to use. They help templates and slides stay predictable when a display has a known resolution or orientation.
+
+Create a canvas size when your organization has a recurring display format, such as a landscape lobby screen, a portrait information board, or a wide event display. Use a consistent name that makes the intended hardware obvious.
+
+Before publishing a design, preview it at the target canvas size. A slide designed for a wide screen may need different spacing, font sizes, or image treatment on a portrait display.
+
+## Data and Live Content
+
+### Announcements
+
+Announcements are messages that can be sent to selected screens without rebuilding a regular playlist. They are useful for temporary information such as room changes, service notices, event reminders, alerts, or time-sensitive instructions.
+
+An announcement normally includes:
+
+- The message or content to display.
+- How long it should remain visible.
+- Its visual treatment, such as color or icon.
+- The screens that should receive it.
+
+Use an announcement when the message is temporary or targeted. Use a playlist slide when the content is part of the normal repeating experience.
+
+After changing an announcement, connected players receive a refresh and update their displayed state. If a target screen is offline, it will receive the current state when it reconnects and refreshes its content.
+
+Before sending an announcement, verify the target screens and the expiry or display duration. A broad target selection can interrupt many displays at once. Keep urgent messages short enough to read in the available time and use the visual treatment consistently so viewers can distinguish an announcement from normal scheduled content.
+
+### Data Sources
+
+See the [Data Sources guide](guide-data-sources.md) for supported source types, refresh behavior, and troubleshooting.
+
+## Media
+
+Media is added where it is needed in a template or slide. Image and video regions provide their own upload controls, while template backgrounds are uploaded from the template options. An upload in one slide or template is not automatically a reusable selection in every other slide, so add the file to each region or template where it is required.
+
+### Images
+
+Images can be used as template backgrounds or as content in image regions. Supported image formats are PNG, JPG, GIF, WebP, and SVG, subject to the deployment's upload policy.
+
+When adding an image:
+
+- Choose a file that suits the target canvas size and region shape.
+- Keep important subjects away from the edges when the region may crop the image.
+- Check the crop and scaling in the slide preview before publishing.
+- Use a transparent PNG or SVG when the design needs the background to show through.
+- Remember that animated image formats may be altered if they are cropped or transformed.
+
+### Videos
+
+Videos can be uploaded into video regions and used in playlists that support live media. The editor accepts MP4, WebM, and Ogg video formats, subject to the deployment's upload policy. Videos preview in their region and loop during playback.
+
+Use a video that the target players can decode reliably, keep the file size appropriate for the available network, and check the first and last frames in the slide preview. If a video is unavailable during playback, review the playlist behavior for unavailable media and the player's connection.
+
+### Template Backgrounds
+
+Template backgrounds are separate from image-region content. A background can be a solid colour, an uploaded image, or a linear gradient. A background image belongs to the template, while an image region belongs to the slide content placed in that region.
+
+### Media Library
+
+The Media Library stores image and video files for reuse across slides, templates, and player content. Search by filename, filter by media type or usage, and sort by name, date, or file size. Results load in batches; use **Load more** to browse a larger library.
+
+The image, video, and template background editors use the same media picker, so you can select an existing asset instead of uploading another copy. In the Media Library, use selection mode to choose multiple assets for deletion. Assets referenced by slides or templates are marked as in use and cannot be deleted.
+
+### Uploads and Synchronization
+
+Upload limits and allowed image or video types are controlled in [Administration settings](guide-admin.md#media-uploads). A file uploaded in one slide or template is referenced by that content; it is not automatically copied into other slides.
+
+Players receive referenced media through the service synchronization process. A newly uploaded or changed file may need a short time to reach every player, especially when a player is offline. Check the player after synchronization before treating a missing file as a slide-design problem. Remove or replace media only after checking which templates or slides still reference it.
+
+## Operations
+
+### Background Updates
+
+Pulse Signage performs routine work in the background so the web application does not need to wait for every refresh or cleanup operation. This includes refreshing data sources, synchronizing media and fonts, removing expired information, and keeping player state current.
+
+Most background work happens automatically. If content appears stale, use the relevant feature page to check the source or player state first. A player that is offline cannot receive new media, fonts, slides, or commands until it reconnects.
+
+When investigating stale content, check in this order:
+
+1. Confirm the connected client is online and reporting the expected screen.
+2. Confirm the screen points to the intended playlist.
+3. Confirm the playlist contains the current slide in the expected order.
+4. Check the source or asset used by the affected region.
+5. Allow time for the player to refresh or synchronize after the change.
+
+The task and system pages can help administrators investigate work that is delayed or failed.
+
+### System Settings and Activity
+
+System settings provide defaults and integrations used across the application. Depending on the deployment, they can include player behavior, announcement defaults, data-source refresh settings, email templates, and external service providers.
+
+Activity history records important account and system changes. It is useful when you need to understand when a setting changed, investigate an unexpected update, or review recent administrative activity.
+
+Change system-wide settings carefully because they can affect multiple screens, users, sources, or players. Use activity history to confirm what changed and when, especially after a display or synchronization problem begins.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.8.3",
+  "version": "2.13.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.8.3",
+      "version": "2.13.3",
       "dependencies": {
         "@sparticuz/chromium": "^149.0.0",
         "animate.css": "^4.1.1",
@@ -16,14 +16,19 @@
         "express": "^5.2.1",
         "handlebars": "^4.7.8",
         "hls.js": "^1.7.0",
+        "jsqr": "^1.4.0",
         "multer": "^2.2.0",
         "mysql2": "^3.23.3",
+        "nodemailer": "^9.1.1",
         "puppeteer-core": "^25.7.0",
         "sharp": "^0.35.3",
         "ws": "^8.21.3"
       },
       "devDependencies": {
         "nodemon": "^3.1.10"
+      },
+      "engines": {
+        "node": ">=26.0.0"
       }
     },
     "node_modules/@emnapi/runtime": {
@@ -1794,6 +1799,12 @@
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "license": "MIT"
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
@@ -1979,6 +1990,15 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-9.1.1.tgz",
+      "integrity": "sha512-izw9mVKFix6YSnC9eLgV6g1opl9DUlRio9ZNcq+Wu9Ujn2UwF+8Nl0B8nz22kEC+CTZCvinkxwJ0DeFbb6NwcQ==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.14",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.8.3",
+  "version": "2.13.3",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "engines": {
@@ -28,8 +28,10 @@
     "express": "^5.2.1",
     "handlebars": "^4.7.8",
     "hls.js": "^1.7.0",
+    "jsqr": "^1.4.0",
     "multer": "^2.2.0",
     "mysql2": "^3.23.3",
+    "nodemailer": "^9.1.1",
     "puppeteer-core": "^25.7.0",
     "sharp": "^0.35.3",
     "ws": "^8.21.3"

scripts/pulse-signage-kiosk.bat

@@ -53,9 +53,12 @@ if not defined BROWSER_PATH (
   exit /b 1
 )
 
+set "KIOSK_PROFILE=%LocalAppData%\PulseSignage\kiosk-browser-profile"
+if not exist "!KIOSK_PROFILE!" mkdir "!KIOSK_PROFILE!"
+
 echo Launching !BROWSER_KIND! in kiosk mode: !TARGET_URL!
 if /I "!BROWSER_KIND!"=="firefox" (
-  start "" "!BROWSER_PATH!" -kiosk "!TARGET_URL!"
+  start "" "!BROWSER_PATH!" -no-remote -profile "!KIOSK_PROFILE!" -new-window -kiosk "!TARGET_URL!"
 ) else (
-  start "" "!BROWSER_PATH!" --disable-notifications --kiosk "!TARGET_URL!"
+  start "" "!BROWSER_PATH!" --disable-notifications --no-first-run --no-default-browser-check --new-window --kiosk --user-data-dir="!KIOSK_PROFILE!" "!TARGET_URL!"
 )

scripts/pulse-signage-kiosk.sh

@@ -35,13 +35,16 @@ else
   exit 1
 fi
 
+kiosk_profile="${XDG_DATA_HOME:-$HOME/.local/share}/pulse-signage/kiosk-browser-profile"
+mkdir -p "$kiosk_profile"
+
 echo "Launching ${browser_kind} in kiosk mode: ${target_url}"
 
 case "$browser_kind" in
   firefox)
-    exec "$browser" -kiosk "$target_url"
+    exec "$browser" -no-remote -profile "$kiosk_profile" -new-window -kiosk "$target_url"
     ;;
   edge|chrome)
-    exec "$browser" --disable-notifications --kiosk "$target_url"
+    exec "$browser" --disable-notifications --no-first-run --no-default-browser-check --new-window --kiosk --user-data-dir="$kiosk_profile" "$target_url"
     ;;
 esac

src/auth.js

@@ -2,11 +2,15 @@
 
 const crypto = require('crypto');
 
-const PASSWORD_ITERATIONS = Number(process.env.PASSWORD_HASH_ITERATIONS || 310000);
+const PASSWORD_ITERATIONS = 310000;
 const PASSWORD_KEY_LENGTH = 32;
 const PASSWORD_DIGEST = 'sha256';
 const SESSION_BYTES = 32;
 
+function createOneTimeToken() {
+  return crypto.randomBytes(32).toString('hex');
+}
+
 function validatePasswordStrength(password, options) {
   const value = String(password || '');
   const requirements = options && options.policy
@@ -91,5 +95,6 @@ module.exports = {
   verifyPassword,
   validatePasswordStrength,
   createSessionToken,
-  hashSessionToken
+  hashSessionToken,
+  createOneTimeToken
 };

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,
@@ -82,6 +85,12 @@ module.exports = {
   buildRssFeedPayload: data.buildRssFeedPayload,
   fetchRssFeedItems: data.fetchRssFeedItems,
   replaceRssFeedItems: data.replaceRssFeedItems,
+  fetchWeatherLocationsData: data.fetchWeatherLocationsData,
+  fetchWeatherLocationsPage: data.fetchWeatherLocationsPage,
+  fetchWeatherLocationById: data.fetchWeatherLocationById,
+  fetchWeatherLocationSuggestions: data.fetchWeatherLocationSuggestions,
+  fetchWeatherLocationForecast: data.fetchWeatherLocationForecast,
+  buildWeatherLocationPayload: data.buildWeatherLocationPayload,
   fetchScreenById: data.fetchScreenById,
   fetchScreenEditData: data.fetchScreenEditData,
   fetchScreenPlayerUrls: data.fetchScreenPlayerUrls,

src/data/account-email-templates.js

@@ -0,0 +1,54 @@
+const DEFAULT_ACCOUNT_EMAIL_TEMPLATES = {
+  verificationSubject: 'Verify your Pulse Signage email address',
+  verificationBody: 'Hello [b][[display_name]][/b]!\n[[action_button]]\nThis [u]link[/u] expires in [i][[expiry_time]][/i].\nConfirm this email address: [[url]]',
+  resetSubject: 'Reset your Pulse Signage password',
+  resetBody: 'Hello [b][[display_name]][/b]!\n[[action_button]]\nThis [u]link[/u] expires in [i][[expiry_time]][/i].\nChoose a new password: [[url]]'
+};
+
+function formatAccountEmailExpiry(value, unit) {
+  const amount = Number(value);
+  const normalizedAmount = Number.isFinite(amount) && amount > 0 ? Math.round(amount) : 30;
+  const normalizedUnit = unit === 'hours' ? 'hour' : 'minute';
+  return normalizedAmount + ' ' + normalizedUnit + (normalizedAmount === 1 ? '' : 's');
+}
+
+function renderAccountEmailTemplate(subject, body, variables) {
+  const values = variables || {};
+  const replaceVariables = function (value) {
+    return String(value || '').replace(/\[\[([a-z_]+)\]\]/g, function (_match, key) {
+      return Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : _match;
+    });
+  };
+  const renderedSubject = replaceVariables(subject);
+  const renderedText = replaceVariables(body);
+  const plainText = renderedText.replace(/\[(?:b|i|u)\]([\s\S]*?)\[\/(?:b|i|u)\]/gi, '$1');
+  const escapedBody = renderedText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\[b\]([\s\S]*?)\[\/b\]/gi, '<strong>$1</strong>').replace(/\[i\]([\s\S]*?)\[\/i\]/gi, '<em>$1</em>').replace(/\[u\]([\s\S]*?)\[\/u\]/gi, '<u>$1</u>');
+  const actionLabel = String(values.action_label || 'Continue').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const actionUrl = values.url ? String(values.url).replace(/&/g, '&amp;').replace(/"/g, '&quot;') : '';
+  const actionAlignment = values.action_alignment === 'left' || values.action_alignment === 'right' ? values.action_alignment : 'center';
+  const actionButton = actionUrl ? '<a href="' + actionUrl + '" style="display:inline-block;background:#111827;color:#ffffff;padding:12px 22px;text-decoration:none;border-radius:4px;font-weight:600;">' + actionLabel + '</a>' : '';
+  const actionBlock = actionButton ? '<div style="margin:24px 0;text-align:' + actionAlignment + ';">' + actionButton + '</div>' : '';
+  const plainLink = actionUrl ? '<a href="' + actionUrl + '">' + actionUrl + '</a>' : '';
+  const escapedBodyUrl = values.url ? String(values.url).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') : '';
+  const hasButtonPlaceholder = escapedBody.indexOf('[[action_button]]') !== -1;
+  const hasUrlPlaceholder = String(body || '').indexOf('[[url]]') !== -1;
+  const bodyWithAction = hasButtonPlaceholder
+    ? escapedBody.split(escapedBodyUrl).join(plainLink).replace(/\[\[action_button\]\]/g, actionBlock).replace(/\[\[action_link\]\]/g, plainLink)
+    : hasUrlPlaceholder
+      ? escapedBody.split(actionUrl).join(actionBlock + plainLink)
+      : escapedBody.replace(/\[\[action_link\]\]/g, plainLink).replace(actionUrl, plainLink);
+  const bodyHtml = bodyWithAction.split(/\r?\n(?:[ \t]*\r?\n)+/).map(function (paragraph) {
+    const paragraphHtml = paragraph.replace(/\r?\n/g, '<br>');
+    if (paragraphHtml.indexOf(actionBlock) !== -1 && actionBlock) {
+      return paragraphHtml.split(actionBlock).map(function (part, index, parts) {
+        const text = part ? '<p style="margin:0 0 16px;">' + part + '</p>' : '';
+        return text + (index < parts.length - 1 ? actionBlock : '');
+      }).join('');
+    }
+    return paragraphHtml ? '<p style="margin:0 0 16px;">' + paragraphHtml + '</p>' : '';
+  }).join('');
+  const html = '<!doctype html><html><body style="margin:0;background:#f4f4f5;font-family:Arial,sans-serif;color:#27364b;"><div style="padding:24px 12px;"><div style="max-width:560px;margin:0 auto;text-align:center;color:#111827;font-size:20px;font-weight:700;padding:0 0 16px;">Pulse Signage</div><div style="max-width:560px;margin:0 auto;background:#ffffff;padding:32px;border-radius:4px;text-align:left;">' + bodyHtml + '</div></div></body></html>';
+  return { subject: renderedSubject, text: plainText, html: html };
+}
+
+module.exports = { DEFAULT_ACCOUNT_EMAIL_TEMPLATES, formatAccountEmailExpiry, renderAccountEmailTemplate };

src/data/admin.js

@@ -6,7 +6,7 @@ async function fetchAdminData(pool) {
   const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM c_playlists ORDER BY id DESC');
   const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC');
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -112,7 +112,7 @@ async function fetchSlidesPage(pool, page, pageSize, searchTerm, sortKey, sortDi
 
 async function fetchTemplatesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    selectSql: `SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height,
         (SELECT COUNT(*) FROM c_template_regions str WHERE str.template_id = st.id) AS region_count,
            (SELECT COUNT(*) FROM c_slides s WHERE s.template_id = st.id) AS slide_count

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/announcements.js

@@ -11,7 +11,11 @@ const { validateMaxLength } = require('./utils');
 const SHORT_LABEL_MAX_LENGTH = 255;
 
 const ANNOUNCEMENT_TYPES = ['lower-third', 'fullscreen', 'top-banner'];
-const ANNOUNCEMENT_COLORS = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];
+const ANNOUNCEMENT_COLORS = [
+  'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+  'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+  'navy', 'steel', 'slate', 'graphite', 'midnight'
+];
 
 function normalizeAnnouncementType(value) {
   const normalized = String(value || '').trim().toLowerCase();

src/data/api-sources.js

@@ -8,6 +8,12 @@ const NAME_MAX_LENGTH = 255;
 const URL_MAX_LENGTH = 1024;
 const AUTH_MAX_LENGTH = 255;
 const ITEMS_PATH_MAX_LENGTH = 255;
+const REQUEST_BODY_MAX_LENGTH = 1000000;
+const TOKEN_URL_MAX_LENGTH = 1024;
+const TOKEN_RESPONSE_PATH_MAX_LENGTH = 255;
+const TOKEN_HEADER_PREFIX_MAX_LENGTH = 64;
+const tokenCache = new Map();
+const tokenRequests = new Map();
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -19,7 +25,11 @@ function normalizeUpdateIntervalUnit(value) {
 
 function normalizeAuthMethod(value) {
   const method = String(value || '').trim().toLowerCase();
-  return ['basic', 'bearer', 'api_key_header'].includes(method) ? method : 'none';
+  return ['basic', 'bearer', 'api_key_header', 'token_login'].includes(method) ? method : 'none';
+}
+
+function normalizeRequestMethod(value) {
+  return String(value || '').trim().toUpperCase() === 'POST' ? 'POST' : 'GET';
 }
 
 function buildAuthHeaders(source) {
@@ -50,7 +60,7 @@ function buildAuthHeaders(source) {
 
 async function fetchApiSourcesData(pool) {
   const [apiSources] = await pool.query(
-    'SELECT 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, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_refresh_url, token_refresh_request_body_json, token_refresh_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC'
   );
 
   return { apiSources: apiSources };
@@ -58,7 +68,7 @@ async function fetchApiSourcesData(pool) {
 
 async function fetchApiSourcesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT 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, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_refresh_url, token_refresh_request_body_json, token_refresh_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC',
     countSql: 'SELECT COUNT(*) AS count FROM i_api_sources',
     searchColumns: ['name', 'api_url', 'last_pull_error'],
     searchTerm: searchTerm,
@@ -82,7 +92,7 @@ async function fetchApiSourcesPage(pool, page, pageSize, searchTerm, sortKey, so
 
 async function fetchApiSourceById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT 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, modified_at, created_by, modified_by FROM i_api_sources WHERE id = ?',
+    'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_refresh_url, token_refresh_request_body_json, token_refresh_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources WHERE id = ?',
     [id]
   );
 
@@ -91,13 +101,18 @@ async function fetchApiSourceById(pool, id) {
 
 async function loadUrlText(urlValue, requestOptions) {
   const extraHeaders = requestOptions && requestOptions.headers ? requestOptions.headers : {};
-  if (typeof fetch === 'function') {
+  const method = String(requestOptions && requestOptions.method || 'GET').toUpperCase();
-    const response = await fetch(urlValue, {
+  const body = requestOptions && requestOptions.body !== undefined ? requestOptions.body : undefined;
-      headers: Object.assign({
+  const headers = Object.assign({
     Accept: 'application/json, text/plain;q=0.9, */*;q=0.8',
     'User-Agent': 'Pulse Signage API Reader'
-      }, extraHeaders)
+  }, extraHeaders);
-    });
+  if (typeof fetch === 'function') {
+    const fetchOptions = { method: method, headers: headers };
+    if (body !== undefined && method !== 'GET' && method !== 'HEAD') {
+      fetchOptions.body = body;
+    }
+    const response = await fetch(urlValue, fetchOptions);
 
     return {
       statusCode: response.status,
@@ -110,12 +125,9 @@ async function loadUrlText(urlValue, requestOptions) {
   return await new Promise(function (resolve, reject) {
     const url = new URL(urlValue);
     const transport = url.protocol === 'https:' ? https : http;
-    const requestHeaders = Object.assign({
+    const request = transport.request(url, Object.assign({}, requestOptions || {}, {
-      Accept: 'application/json, text/plain;q=0.9, */*;q=0.8',
+      method: method,
-      'User-Agent': 'Pulse Signage API Reader'
+      headers: headers
-    }, extraHeaders);
-    const request = transport.get(url, Object.assign({}, requestOptions || {}, {
-      headers: requestHeaders
     }), function (response) {
       response.setEncoding('utf8');
       let body = '';
@@ -133,15 +145,232 @@ async function loadUrlText(urlValue, requestOptions) {
       response.on('error', reject);
     });
 
+    if (body !== undefined && method !== 'GET' && method !== 'HEAD') {
+      request.write(body);
+    }
+    request.end();
     request.on('error', reject);
   });
 }
 
+function parseJsonRequestBody(value, fieldName) {
+  const text = String(value || '').trim();
+  if (!text) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(text);
+  } catch (_error) {
+    const error = new Error(fieldName + ' must contain valid JSON.');
+    error.statusCode = 400;
+    throw error;
+  }
+}
+
+function resolveResponsePath(value, responsePath) {
+  let current = value;
+  String(responsePath || '').split('.').forEach(function (segment) {
+    if (current === undefined || current === null) {
+      current = undefined;
+      return;
+    }
+    current = current[segment];
+  });
+  return current;
+}
+
+function getTokenCacheKey(source) {
+  return JSON.stringify([
+    source && source.id || '',
+    source && (source.token_url || source.tokenUrl) || '',
+    source && (source.token_request_body_json || source.tokenRequestBodyJson) || '',
+    source && (source.token_response_path || source.tokenResponsePath) || 'access_token',
+    source && (source.token_refresh_url || source.tokenRefreshUrl) || '',
+    source && (source.token_refresh_request_body_json || source.tokenRefreshRequestBodyJson) || '',
+    source && (source.token_refresh_response_path || source.tokenRefreshResponsePath) || 'refresh_token',
+    source && (source.token_header_name || source.tokenHeaderName) || 'Authorization',
+    source && (source.token_header_prefix || source.tokenHeaderPrefix) || 'Bearer'
+  ]);
+}
+
+function clearCachedToken(source) {
+  tokenCache.delete(getTokenCacheKey(source));
+}
+
+function replaceRefreshToken(value, refreshToken) {
+  if (typeof value === 'string') {
+    return value.split('{{refresh_token}}').join(refreshToken);
+  }
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return replaceRefreshToken(item, refreshToken);
+    });
+  }
+  if (value && typeof value === 'object') {
+    return Object.keys(value).reduce(function (result, key) {
+      result[key] = replaceRefreshToken(value[key], refreshToken);
+      return result;
+    }, {});
+  }
+  return value;
+}
+
+function resolveTokenExpiry(parsed, token) {
+  const expiresIn = Number(parsed && (parsed.expires_in || parsed.expiresIn));
+  if (Number.isFinite(expiresIn) && expiresIn > 0) {
+    return { lifetimeMs: expiresIn * 1000 };
+  }
+
+  const explicitExpiry = parsed && (parsed.expires_at || parsed.expiresAt);
+  if (explicitExpiry !== undefined && explicitExpiry !== null) {
+    const expiryNumber = Number(explicitExpiry);
+    const expiryMs = Number.isFinite(expiryNumber)
+      ? (expiryNumber < 100000000000 ? expiryNumber * 1000 : expiryNumber)
+      : Date.parse(String(explicitExpiry));
+    if (Number.isFinite(expiryMs) && expiryMs > Date.now()) {
+      return { expiresAt: expiryMs };
+    }
+  }
+
+  const tokenParts = String(token).split('.');
+  if (tokenParts.length === 3) {
+    try {
+      const payload = JSON.parse(Buffer.from(tokenParts[1], 'base64url').toString('utf8'));
+      const expiryMs = Number(payload.exp) * 1000;
+      if (Number.isFinite(expiryMs) && expiryMs > Date.now()) {
+        return { expiresAt: expiryMs };
+      }
+    } catch (_error) {
+      // Opaque tokens do not contain a readable JWT expiry.
+    }
+  }
+
+  return { lifetimeMs: 300000 };
+}
+
+function cacheTokenResponse(source, parsed, previousRefreshToken) {
+  const tokenPath = source.token_response_path || source.tokenResponsePath || 'access_token';
+  const token = resolveResponsePath(parsed, tokenPath);
+  if (token === undefined || token === null || String(token).trim() === '') {
+    throw new Error('Token response did not contain a token at the configured path.');
+  }
+
+  const refreshPath = source.token_refresh_response_path || source.tokenRefreshResponsePath || 'refresh_token';
+  const responseRefreshToken = resolveResponsePath(parsed, refreshPath);
+  const refreshToken = responseRefreshToken === undefined || responseRefreshToken === null || String(responseRefreshToken).trim() === ''
+    ? previousRefreshToken
+    : String(responseRefreshToken);
+  const expiry = resolveTokenExpiry(parsed, token);
+  const expiresAt = expiry.expiresAt || Date.now() + Math.max(1000, expiry.lifetimeMs - Math.min(60000, expiry.lifetimeMs * 0.1));
+  const record = { value: String(token), refreshToken: refreshToken, expiresAt: expiresAt };
+  tokenCache.set(getTokenCacheKey(source), record);
+  return record;
+}
+
+async function parseTokenResponse(response, source, previousRefreshToken) {
+  if (!response.ok) {
+    return null;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(String(response.bodyText || '').trim());
+  } catch (_error) {
+    throw new Error('Token response was not valid JSON.');
+  }
+  return cacheTokenResponse(source, parsed, previousRefreshToken);
+}
+
+async function refreshLoginToken(source, cached) {
+  const refreshUrl = source.token_refresh_url || source.tokenRefreshUrl || source.token_url || source.tokenUrl;
+  if (!cached || !cached.refreshToken) {
+    return null;
+  }
+  const configuredBody = parseJsonRequestBody(source.token_refresh_request_body_json || source.tokenRefreshRequestBodyJson, 'Refresh request body');
+  const refreshBody = configuredBody === undefined
+    ? { grant_type: 'refresh_token', refresh_token: cached.refreshToken }
+    : replaceRefreshToken(configuredBody, cached.refreshToken);
+  const response = await loadUrlText(refreshUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(refreshBody)
+  });
+  return parseTokenResponse(response, source, cached.refreshToken);
+}
+
+async function fetchLoginTokenUncached(source) {
+  const cacheKey = getTokenCacheKey(source);
+  const cached = tokenCache.get(cacheKey);
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached;
+  }
+
+  if (cached && cached.refreshToken) {
+    const refreshed = await refreshLoginToken(source, cached);
+    if (refreshed) {
+      return refreshed;
+    }
+  }
+
+  const tokenUrl = source.token_url || source.tokenUrl;
+  const tokenBody = parseJsonRequestBody(source.token_request_body_json || source.tokenRequestBodyJson, 'Login request body');
+  const tokenHeaders = { 'Content-Type': 'application/json' };
+  const response = await loadUrlText(tokenUrl, {
+    method: 'POST',
+    headers: tokenHeaders,
+    body: tokenBody === undefined ? undefined : JSON.stringify(tokenBody)
+  });
+  const record = await parseTokenResponse(response, source, cached && cached.refreshToken);
+  if (!record) {
+    throw new Error(`Unable to obtain API token (${response.statusCode}).`);
+  }
+  return record;
+}
+
+async function fetchLoginToken(source) {
+  const cacheKey = getTokenCacheKey(source);
+  const cached = tokenCache.get(cacheKey);
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.value;
+  }
+  if (!tokenRequests.has(cacheKey)) {
+    tokenRequests.set(cacheKey, fetchLoginTokenUncached(source).finally(function () {
+      tokenRequests.delete(cacheKey);
+    }));
+  }
+  return (await tokenRequests.get(cacheKey)).value;
+}
+
+async function buildRequestHeaders(source) {
+  const method = normalizeAuthMethod(source && (source.auth_method || source.authMethod));
+  if (method !== 'token_login') {
+    return buildAuthHeaders(source);
+  }
+
+  const token = await fetchLoginToken(source);
+  const headerName = String(source.token_header_name || source.tokenHeaderName || 'Authorization').trim() || 'Authorization';
+  const prefix = String(source.token_header_prefix || source.tokenHeaderPrefix || 'Bearer').trim();
+  return { [headerName]: prefix ? prefix + ' ' + token : token };
+}
+
 async function fetchApiSourceResponse(apiSource) {
   const source = apiSource && typeof apiSource === 'object' ? apiSource : { api_url: apiSource };
-  const response = await loadUrlText(source.api_url, {
+  const requestMethod = normalizeRequestMethod(source.request_method || source.requestMethod);
-    headers: buildAuthHeaders(source)
+  const requestBody = parseJsonRequestBody(source.request_body_json || source.requestBodyJson, 'API request body');
+  let response;
+  let tokenRetry = false;
+  do {
+    response = await loadUrlText(source.api_url || source.apiUrl, {
+      method: requestMethod,
+      headers: Object.assign({}, await buildRequestHeaders(source), requestBody === undefined ? {} : { 'Content-Type': 'application/json' }),
+      body: requestBody === undefined ? undefined : JSON.stringify(requestBody)
     });
+    if (response.statusCode === 401 && normalizeAuthMethod(source.auth_method || source.authMethod) === 'token_login' && !tokenRetry) {
+      clearCachedToken(source);
+      tokenRetry = true;
+    } else {
+      break;
+    }
+  } while (true);
   if (!response.ok) {
     throw new Error(`Unable to load API response (${response.statusCode}).`);
   }
@@ -178,11 +407,21 @@ function buildApiSourcePayload(req, existingApiSource) {
   const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'API source name');
   const apiUrl = validateMaxLength(req.body.api_url || req.body.apiUrl || fallback.api_url || '', URL_MAX_LENGTH, 'API source URL');
   const authMethod = normalizeAuthMethod(readBodyValue('auth_method', readBodyValue('authMethod', fallback.auth_method || 'none')));
+  const requestMethod = normalizeRequestMethod(readBodyValue('request_method', readBodyValue('requestMethod', fallback.request_method || 'GET')));
+  const requestBodyJson = validateMaxLength(readBodyValue('request_body_json', readBodyValue('requestBodyJson', fallback.request_body_json || '')) || '', REQUEST_BODY_MAX_LENGTH, 'API request body');
   const authUsername = validateMaxLength(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '', AUTH_MAX_LENGTH, 'API source username');
   const authPassword = validateMaxLength(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || '', AUTH_MAX_LENGTH, 'API source password');
   const authBearerToken = validateMaxLength(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '', AUTH_MAX_LENGTH, 'API source bearer token');
   const authHeaderName = validateMaxLength(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key', AUTH_MAX_LENGTH, 'API source header name') || 'X-API-Key';
   const authHeaderValue = validateMaxLength(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '', AUTH_MAX_LENGTH, 'API source header value');
+  const tokenUrl = validateMaxLength(readBodyValue('token_url', readBodyValue('tokenUrl', fallback.token_url || '')) || '', TOKEN_URL_MAX_LENGTH, 'API token URL');
+  const tokenRequestBodyJson = validateMaxLength(readBodyValue('token_request_body_json', readBodyValue('tokenRequestBodyJson', fallback.token_request_body_json || '')) || '', REQUEST_BODY_MAX_LENGTH, 'Login request body');
+  const tokenResponsePath = validateMaxLength(readBodyValue('token_response_path', readBodyValue('tokenResponsePath', fallback.token_response_path || 'access_token')) || 'access_token', TOKEN_RESPONSE_PATH_MAX_LENGTH, 'Token response path');
+  const tokenRefreshUrl = validateMaxLength(readBodyValue('token_refresh_url', readBodyValue('tokenRefreshUrl', fallback.token_refresh_url || '')) || '', TOKEN_URL_MAX_LENGTH, 'API refresh URL');
+  const tokenRefreshRequestBodyJson = validateMaxLength(readBodyValue('token_refresh_request_body_json', readBodyValue('tokenRefreshRequestBodyJson', fallback.token_refresh_request_body_json || '')) || '', REQUEST_BODY_MAX_LENGTH, 'Refresh request body');
+  const tokenRefreshResponsePath = validateMaxLength(readBodyValue('token_refresh_response_path', readBodyValue('tokenRefreshResponsePath', fallback.token_refresh_response_path || 'refresh_token')) || 'refresh_token', TOKEN_RESPONSE_PATH_MAX_LENGTH, 'Refresh token response path');
+  const tokenHeaderName = validateMaxLength(readBodyValue('token_header_name', readBodyValue('tokenHeaderName', fallback.token_header_name || 'Authorization')) || 'Authorization', AUTH_MAX_LENGTH, 'Token header name');
+  const tokenHeaderPrefix = validateMaxLength(readBodyValue('token_header_prefix', readBodyValue('tokenHeaderPrefix', fallback.token_header_prefix || 'Bearer')) || '', TOKEN_HEADER_PREFIX_MAX_LENGTH, 'Token prefix');
   const itemsPath = validateMaxLength(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '', ITEMS_PATH_MAX_LENGTH, 'API source items path');
   const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60));
   const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes');
@@ -238,15 +477,65 @@ function buildApiSourcePayload(req, existingApiSource) {
     throw error;
   }
 
+  parseJsonRequestBody(requestBodyJson, 'API request body');
+  parseJsonRequestBody(tokenRequestBodyJson, 'Login request body');
+  parseJsonRequestBody(tokenRefreshRequestBodyJson, 'Refresh request body');
+
+  if (authMethod === 'token_login') {
+    if (!tokenUrl) {
+      const error = new Error('Token login requires a login URL.');
+      error.statusCode = 400;
+      throw error;
+    }
+    try {
+      const tokenParsedUrl = new URL(tokenUrl);
+      if (tokenParsedUrl.protocol !== 'http:' && tokenParsedUrl.protocol !== 'https:') {
+        throw new Error('invalid protocol');
+      }
+    } catch (_error) {
+      const error = new Error('Enter a valid API token URL.');
+      error.statusCode = 400;
+      throw error;
+    }
+    if (!tokenRequestBodyJson) {
+      const error = new Error('Token login requires a JSON request body.');
+      error.statusCode = 400;
+      throw error;
+    }
+  }
+
+  if (tokenRefreshUrl) {
+    try {
+      const refreshParsedUrl = new URL(tokenRefreshUrl);
+      if (refreshParsedUrl.protocol !== 'http:' && refreshParsedUrl.protocol !== 'https:') {
+        throw new Error('invalid protocol');
+      }
+    } catch (_error) {
+      const error = new Error('Enter a valid API refresh URL.');
+      error.statusCode = 400;
+      throw error;
+    }
+  }
+
   return {
     name: name,
     apiUrl: parsedUrl.toString(),
+    requestMethod: requestMethod,
+    requestBodyJson: requestBodyJson,
     authMethod: authMethod,
     authUsername: authUsername,
     authPassword: authPassword,
     authBearerToken: authBearerToken,
     authHeaderName: authHeaderName,
     authHeaderValue: authHeaderValue,
+    tokenUrl: tokenUrl,
+    tokenRequestBodyJson: tokenRequestBodyJson,
+    tokenResponsePath: tokenResponsePath,
+    tokenRefreshUrl: tokenRefreshUrl,
+    tokenRefreshRequestBodyJson: tokenRefreshRequestBodyJson,
+    tokenRefreshResponsePath: tokenRefreshResponsePath,
+    tokenHeaderName: tokenHeaderName,
+    tokenHeaderPrefix: tokenHeaderPrefix,
     itemsPath: itemsPath,
     updateIntervalValue: Math.floor(updateIntervalValue),
     updateIntervalUnit: updateIntervalUnit

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 = [
@@ -19,8 +21,33 @@ const SETTING_DEFINITIONS = [
   { key: 'security.login_max_attempts', type: 'integer', min: 1, defaultValue: 5 },
   { key: 'security.login_lockout_minutes', type: 'integer', min: 1, defaultValue: 15 },
   { key: 'security.login_rate_limit_scope', type: 'enum', values: ['both', 'username', 'ip'], defaultValue: 'both' },
+  { key: 'security.allow_admin_email_verification_bypass', type: 'boolean', defaultValue: true },
+  { key: 'email.smtp_enabled', type: 'boolean', defaultValue: false },
+  { key: 'email.smtp_host', type: 'string', defaultValue: '' },
+  { key: 'email.smtp_port', type: 'integer', min: 1, defaultValue: 587 },
+  { key: 'email.smtp_security', type: 'enum', values: ['none', 'starttls', 'tls'], defaultValue: 'starttls' },
+  { key: 'email.smtp_username', type: 'string', defaultValue: '' },
+  { key: 'email.smtp_password', type: 'string', defaultValue: '' },
+  { key: 'email.from_address', type: 'string', defaultValue: '' },
+  { key: 'email.from_name', type: 'string', defaultValue: 'Pulse Signage' },
+  { key: 'email.verification_expiry_minutes', type: 'integer', min: 1, defaultValue: 30 },
+  { key: 'email.reset_expiry_minutes', type: 'integer', min: 1, defaultValue: 30 },
+  { key: 'email.invitation_expiry_hours', type: 'integer', min: 1, defaultValue: 24 },
+  { key: 'email.verification_subject', type: 'string', defaultValue: 'Verify your Pulse Signage email address' },
+  { key: 'email.verification_body', type: 'string', defaultValue: 'Hello [b][[display_name]][/b]!\n[[action_button]]\nThis [u]link[/u] expires in [i][[expiry_time]][/i].\nConfirm this email address: [[url]]' },
+  { key: 'email.reset_subject', type: 'string', defaultValue: 'Reset your Pulse Signage password' },
+  { key: 'email.reset_body', type: 'string', defaultValue: 'Hello [b][[display_name]][/b]!\n[[action_button]]\nThis [u]link[/u] expires in [i][[expiry_time]][/i].\nChoose a new password: [[url]]' },
+  { key: 'email.verification_button_alignment', type: 'enum', values: ['left', 'center', 'right'], defaultValue: 'center' },
+  { key: 'email.verification_button_text', type: 'string', defaultValue: 'Verify email address' },
+  { key: 'email.reset_button_alignment', type: 'enum', values: ['left', 'center', 'right'], defaultValue: 'center' },
+  { key: 'email.reset_button_text', type: 'string', defaultValue: 'Reset password' },
+  { key: 'email.invitation_subject', type: 'string', defaultValue: 'You have been invited to Pulse Signage' },
+  { key: 'email.invitation_body', type: 'string', defaultValue: 'Hello [b][[display_name]][/b]!\n[[action_button]]\nThis [u]invitation link[/u] expires in [i][[expiry_time]][/i].\nCreate your account: [[url]]' },
+  { key: 'email.invitation_button_alignment', type: 'enum', values: ['left', 'center', 'right'], defaultValue: 'center' },
+  { key: 'email.invitation_button_text', type: 'string', defaultValue: 'Accept invitation' },
   { key: 'audit.enabled', type: 'boolean', defaultValue: true },
   { key: 'audit.categories', type: 'string_array', defaultValue: ['authentication', 'security', 'sessions', 'users', 'roles', 'system-settings'] },
+  { key: 'audit.screen_control_commands', type: 'string_array', defaultValue: [] },
   { key: 'audit.include_request_metadata', type: 'boolean', defaultValue: true },
   { key: 'audit.retention_days', type: 'integer', min: 0, defaultValue: 180 },
   { key: 'uploads.image_max_bytes', type: 'integer', min: 1, defaultValue: 100 * 1024 * 1024 },
@@ -35,11 +62,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: '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_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.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_value', type: 'integer', min: 1, defaultValue: 60 },
-  ,{ key: 'data-sources.api_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
+  { 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',
@@ -13,7 +15,9 @@ const AUDIT_EVENT_CATEGORIES = Object.freeze({
   CANVAS_SIZES: 'canvas-sizes',
   API_SOURCES: 'api-sources',
   RSS_FEEDS: 'rss-feeds',
-  TIMETABLES: 'timetables'
+  TIMETABLES: 'timetables',
+  WEATHER: 'weather',
+  SCREEN_CONTROLS: 'screen-controls'
 });
 const AUDIT_CATEGORY_KEYS = Object.freeze(Object.values(AUDIT_EVENT_CATEGORIES));
 const AUDIT_CATEGORY_LABELS = Object.freeze({
@@ -31,10 +35,42 @@ const AUDIT_CATEGORY_LABELS = Object.freeze({
   'canvas-sizes': 'Canvas Sizes',
   'api-sources': 'API Sources',
   'rss-feeds': 'RSS Feeds',
-  timetables: 'Timetables'
+  timetables: 'Timetables',
+  weather: 'Weather',
+  'screen-controls': 'Screen Controls'
+});
+const SCREEN_CONTROL_COMMAND_KEYS = Object.freeze(['pause', 'blackout', 'reload', 'navigation', 'moveclient', 'setclientname']);
+const SCREEN_CONTROL_COMMAND_LABELS = Object.freeze({
+  pause: 'Pause / Resume',
+  blackout: 'Blackout / Restore',
+  reload: 'Reload',
+  navigation: 'Forward / Back',
+  moveclient: 'Move client',
+  setclientname: 'Rename client'
 });
 const { fetchAppSettings } = require('./app-settings');
 
+function formatUserAgentLabel(userAgent) {
+  const value = String(userAgent || '').trim();
+  if (!value) return '';
+  const browserMatch = value.match(/(?:Edg|OPR|Chrome|Firefox|Version|Electron)\/([\d.]+)/i);
+  let browser = '';
+  if (/Edg\//i.test(value)) browser = 'Edge';
+  else if (/OPR\//i.test(value)) browser = 'Opera';
+  else if (/Electron\//i.test(value)) browser = 'Electron';
+  else if (/Chrome\//i.test(value)) browser = 'Chrome';
+  else if (/Firefox\//i.test(value)) browser = 'Firefox';
+  else if (/Version\/.*Safari\//i.test(value)) browser = 'Safari';
+  const browserLabel = browserMatch && browser ? browser + ' ' + browserMatch[1] : browser;
+  let operatingSystem = '';
+  if (/Windows NT/i.test(value)) operatingSystem = 'Windows';
+  else if (/Macintosh|Mac OS X/i.test(value)) operatingSystem = 'macOS';
+  else if (/Android/i.test(value)) operatingSystem = 'Android';
+  else if (/iPhone|iPad|iPod/i.test(value)) operatingSystem = 'iOS';
+  else if (/Linux/i.test(value)) operatingSystem = 'Linux';
+  return [browserLabel, operatingSystem].filter(Boolean).join(' on ') || value;
+}
+
 function normalizeDetails(details) {
   if (details === undefined || details === null) {
     return null;
@@ -99,6 +135,14 @@ async function recordRequestAuditEvent(pool, req, event) {
     if (!settings['audit.enabled'] || !enabledCategories.includes(category)) {
       return;
     }
+    if (category === 'screen-controls') {
+      const command = String(event && event.eventType || '').replace(/^screen-control\./, '').trim().toLowerCase();
+      const commandGroup = command === 'previous' || command === 'next' ? 'navigation' : command;
+      const enabledCommands = Array.isArray(settings['audit.screen_control_commands']) ? settings['audit.screen_control_commands'] : [];
+      if (!enabledCommands.includes(commandGroup)) {
+        return;
+      }
+    }
     const metadata = settings['audit.include_request_metadata'] ? getRequestMetadata(req) : {};
     await recordAuditEvent(pool, Object.assign({}, event, metadata));
   } catch (error) {
@@ -111,6 +155,9 @@ module.exports = {
   AUDIT_EVENT_CATEGORIES,
   AUDIT_CATEGORY_KEYS,
   AUDIT_CATEGORY_LABELS,
+  SCREEN_CONTROL_COMMAND_KEYS,
+  SCREEN_CONTROL_COMMAND_LABELS,
+  formatUserAgentLabel,
   getRequestMetadata,
   buildAuditChanges,
   recordAuditEvent,

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 <> ?
+           AND device_id <> ?`,
-         LIMIT 1`,
         [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/index.js

@@ -7,6 +7,7 @@ const { fetchPlaylistById } = require('./playlists');
 const { normalizeDisplayMode, fetchTimetablesData, fetchTimetableGroupsPage, fetchTimetableGroupById, fetchTimetableEntriesByGroupId, buildTimetableGroupPayload } = require('./timetables');
 const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
 const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
+const { fetchWeatherLocationsData, fetchWeatherLocationsPage, fetchWeatherLocationById, fetchWeatherLocationSuggestions, fetchWeatherLocationForecast, buildWeatherLocationPayload } = require('./weather');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchPlayerPublicBaseUrl, fetchScreenPlayerRecord, fetchPlayerRecordByIdentifier } = require('./screens');
 const { fetchPlayerRegistrations } = require('./player-registry');
 const { fetchTemplateById, fetchTemplatesData, extractTemplateRegions, buildTemplatePayload } = require('./templates');
@@ -59,6 +60,12 @@ module.exports = {
   buildRssFeedPayload,
   fetchRssFeedItems,
   replaceRssFeedItems,
+  fetchWeatherLocationsData,
+  fetchWeatherLocationsPage,
+  fetchWeatherLocationById,
+  fetchWeatherLocationSuggestions,
+  fetchWeatherLocationForecast,
+  buildWeatherLocationPayload,
   fetchScreenById,
   fetchScreenEditData,
   fetchScreenPlayerUrls,

src/data/mailer.js

@@ -0,0 +1,43 @@
+// SMTP delivery for account notifications.
+
+const nodemailer = require('nodemailer');
+
+function getSmtpConfig(settings) {
+  return {
+    enabled: Boolean(settings['email.smtp_enabled']),
+    host: String(settings['email.smtp_host'] || '').trim(),
+    port: Number(settings['email.smtp_port']) || 587,
+    security: String(settings['email.smtp_security'] || 'starttls'),
+    username: String(settings['email.smtp_username'] || '').trim(),
+    password: String(settings['email.smtp_password'] || ''),
+    fromAddress: String(settings['email.from_address'] || '').trim(),
+    fromName: String(settings['email.from_name'] || '').trim()
+  };
+}
+
+function createMailTransport(settings) {
+  const config = getSmtpConfig(settings);
+  if (!config.enabled || !config.host || !config.fromAddress) {
+    return null;
+  }
+  return nodemailer.createTransport({
+    host: config.host,
+    port: config.port,
+    secure: config.security === 'tls',
+    requireTLS: config.security === 'starttls',
+    auth: config.username ? { user: config.username, pass: config.password } : undefined
+  });
+}
+
+async function sendAccountEmail(settings, message) {
+  const transport = createMailTransport(settings);
+  if (!transport) {
+    throw new Error('Email delivery is not configured.');
+  }
+  const config = getSmtpConfig(settings);
+  return transport.sendMail(Object.assign({}, message, {
+    from: config.fromName ? '"' + config.fromName.replace(/"/g, '') + '" <' + config.fromAddress + '>' : config.fromAddress,
+  }));
+}
+
+module.exports = { getSmtpConfig, createMailTransport, sendAccountEmail };

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/data/rss-feeds.js

@@ -17,7 +17,7 @@ function normalizeUpdateIntervalUnit(value) {
 
 async function fetchRssFeedsData(pool) {
   const [rssFeeds] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC'
   );
 
   return { rssFeeds: rssFeeds };
@@ -25,7 +25,7 @@ async function fetchRssFeedsData(pool) {
 
 async function fetchRssFeedsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC',
     countSql: 'SELECT COUNT(*) AS count FROM i_rss_feeds',
     searchColumns: ['name', 'feed_url'],
     searchTerm: searchTerm,
@@ -48,7 +48,7 @@ async function fetchRssFeedsPage(pool, page, pageSize, searchTerm, sortKey, sort
 
 async function fetchRssFeedById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds WHERE id = ?',
+    'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds WHERE id = ?',
     [id]
   );
 

src/data/slides.js

@@ -101,7 +101,22 @@ function stripEditorOnlyMarkup(value) {
 }
 
 function normalizeEditorMarkup(value) {
-  return String(value === undefined || value === null ? '' : value).trim();
+  return String(value === undefined || value === null ? '' : value)
+    .replace(/https?:\/\/[^"'\s<>]+(\/media\/[^"'\s<>)]*)/gi, '$1')
+    .trim();
+}
+
+function normalizeEditorMediaReferences(value) {
+  if (Array.isArray(value)) {
+    return value.map(normalizeEditorMediaReferences);
+  }
+  if (value && typeof value === 'object') {
+    Object.keys(value).forEach((key) => {
+      value[key] = normalizeEditorMediaReferences(value[key]);
+    });
+    return value;
+  }
+  return typeof value === 'string' ? normalizeEditorMarkup(value) : value;
 }
 
 async function fetchSlideById(pool, id) {
@@ -444,7 +459,22 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
         font_size: style.font_size,
         font_color: style.font_color
       };
-    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
+    } else if (region.region_type === 'weather') {
+      const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+      const locationId = body[`region_weather_location_id_${region.id}`];
+      const submittedForecastMode = body[`region_weather_forecast_mode_${region.id}`];
+      const forecastMode = ['current', 'hourly'].includes(submittedForecastMode) ? submittedForecastMode : 'daily';
+      const style = getTextRegionStyle(body, region, existingContent);
+      content[region.region_key] = {
+        type: 'weather',
+        value: body[`region_text_${region.id}`] !== undefined ? String(body[`region_text_${region.id}`] || '') : String(current.value || ''),
+        weather_location_id: locationId === undefined || locationId === null ? (current.weather_location_id || null) : (locationId === '' ? null : Number(locationId)),
+        forecast_mode: body[`region_weather_forecast_mode_${region.id}`] === undefined ? (['current', 'hourly'].includes(current.forecast_mode) ? current.forecast_mode : 'daily') : forecastMode,
+        font_family: style.font_family,
+        font_size: style.font_size,
+        font_color: style.font_color
+      };
+    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api', 'weather'].includes(String(region.region_type || '').trim())) {
       const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
       const suffix = '_' + region.id;
       const generic = {};
@@ -492,7 +522,7 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
       };
     }
   }
-  return content;
+  return normalizeEditorMediaReferences(content);
 }
 
 async function buildSlidePayload(pool, req, existingSlide) {

src/data/templates.js

@@ -14,6 +14,39 @@ function sanitizeBackgroundColor(value) {
   return '#111111';
 }
 
+function normalizeBackgroundGradient(value) {
+  let gradient = value;
+  if (typeof gradient === 'string') {
+    try {
+      gradient = JSON.parse(gradient);
+    } catch (_error) {
+      gradient = null;
+    }
+  }
+  if (!gradient || typeof gradient !== 'object' || Array.isArray(gradient)) {
+    return null;
+  }
+  const sourceStops = Array.isArray(gradient.stops) && gradient.stops.length
+    ? gradient.stops
+    : (Array.isArray(gradient.colors) ? gradient.colors.map((color, index, colors) => ({
+      color,
+      position: colors.length > 1 ? Math.round((index / (colors.length - 1)) * 100) : 0
+    })) : []);
+  const stops = sourceStops.slice(0, 12).map((stop) => ({
+    color: sanitizeBackgroundColor(stop && stop.color),
+    position: Math.max(0, Math.min(100, Number.isFinite(Number(stop && stop.position)) ? Number(stop.position) : 0))
+  }));
+  if (stops.length < 2) {
+    return null;
+  }
+  const angle = Number(gradient.angle);
+  return JSON.stringify({
+    type: 'linear',
+    stops,
+    angle: Number.isFinite(angle) ? Math.max(0, Math.min(360, angle)) : 90
+  });
+}
+
 function normalizeTemplateRegionType(value) {
   const rawType = String(value || 'text').trim();
   return rawType || 'text';
@@ -106,7 +139,7 @@ function ensureUniqueTemplateRegionNames(regions) {
 
 async function fetchTemplateById(pool, id) {
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -123,7 +156,7 @@ async function fetchTemplateById(pool, id) {
 
 async function fetchTemplatesData(pool) {
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -212,6 +245,10 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
   const backgroundImage = filesByField.background_image;
   const removeBackgroundImage = Boolean(req.body.remove_background_image);
   const backgroundColor = sanitizeBackgroundColor(req.body.background_color || (existingTemplate && existingTemplate.background_color));
+  const submittedBackgroundGradient = Object.prototype.hasOwnProperty.call(req.body, 'background_gradient')
+    ? req.body.background_gradient
+    : existingTemplate && existingTemplate.background_gradient;
+  const backgroundGradient = normalizeBackgroundGradient(submittedBackgroundGradient);
   const backgroundImagePath = backgroundImage
     ? `/media/uploads/${backgroundImage.filename}`
     : removeBackgroundImage
@@ -256,6 +293,7 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
     canvasSizeHeight: canvasHeight,
     backgroundImagePath,
     backgroundColor,
+    backgroundGradient,
     regions
   };
 }
@@ -265,5 +303,6 @@ module.exports = {
   fetchTemplatesData,
   extractTemplateRegions,
   buildTemplatePayload,
+  normalizeBackgroundGradient,
   parseJsonSafe
 };

src/data/weather-units.js

@@ -0,0 +1,67 @@
+// Convert cached weather snapshots for display without refetching.
+
+function convertTemperature(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const converted = toUnit === 'fahrenheit' ? number * 9 / 5 + 32 : (number - 32) * 5 / 9;
+  return Math.round(converted * 10) / 10;
+}
+
+function convertWind(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const metresPerSecond = fromUnit === 'mph' ? number * 0.44704 : fromUnit === 'kmh' ? number / 3.6 : number;
+  const converted = toUnit === 'mph' ? metresPerSecond / 0.44704 : toUnit === 'kmh' ? metresPerSecond * 3.6 : metresPerSecond;
+  return Math.round(converted * 10) / 10;
+}
+
+function convertPrecipitation(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const converted = toUnit === 'inch' ? number / 25.4 : number * 25.4;
+  return Math.round(converted * 100) / 100;
+}
+
+function temperatureUnitFromLabel(label) {
+  return /f/i.test(String(label || '')) ? 'fahrenheit' : 'celsius';
+}
+
+function windUnitFromLabel(label) {
+  const value = String(label || '').toLowerCase();
+  return value.includes('mph') ? 'mph' : value.includes('m/s') ? 'ms' : 'kmh';
+}
+
+function precipitationUnitFromLabel(label) {
+  return /in/i.test(String(label || '')) ? 'inch' : 'mm';
+}
+
+function convertField(data, fields, converter, fromUnit, toUnit) {
+  fields.forEach(function (field) {
+    if (data[field] === undefined || data[field] === null) return;
+    data[field] = Array.isArray(data[field])
+      ? data[field].map(function (value) { return converter(value, fromUnit, toUnit); })
+      : converter(data[field], fromUnit, toUnit);
+  });
+}
+
+function convertWeatherSnapshot(snapshot, targetUnits) {
+  const source = snapshot && typeof snapshot === 'object' ? snapshot : {};
+  const target = Object.assign({ temperature: 'celsius', wind: 'kmh', precipitation: 'mm' }, targetUnits || {});
+  const result = JSON.parse(JSON.stringify(source));
+  const currentUnits = source.current_units || {};
+  const hourlyUnits = source.hourly_units || currentUnits;
+  const dailyUnits = source.daily_units || currentUnits;
+
+  convertField(result.current || {}, ['temperature_2m', 'apparent_temperature'], convertTemperature, temperatureUnitFromLabel(currentUnits.temperature_2m), target.temperature);
+  convertField(result.current || {}, ['wind_speed_10m'], convertWind, windUnitFromLabel(currentUnits.wind_speed_10m), target.wind);
+  convertField(result.current || {}, ['precipitation', 'rain'], convertPrecipitation, precipitationUnitFromLabel(currentUnits.precipitation), target.precipitation);
+  convertField(result.hourly || {}, ['temperature_2m'], convertTemperature, temperatureUnitFromLabel(hourlyUnits.temperature_2m), target.temperature);
+  convertField(result.hourly || {}, ['wind_speed_10m'], convertWind, windUnitFromLabel(hourlyUnits.wind_speed_10m), target.wind);
+  convertField(result.hourly || {}, ['precipitation'], convertPrecipitation, precipitationUnitFromLabel(hourlyUnits.precipitation), target.precipitation);
+  convertField(result.daily || {}, ['temperature_2m_max', 'temperature_2m_min'], convertTemperature, temperatureUnitFromLabel(dailyUnits.temperature_2m_max), target.temperature);
+  convertField(result.daily || {}, ['wind_speed_10m_max'], convertWind, windUnitFromLabel(dailyUnits.wind_speed_10m_max), target.wind);
+  convertField(result.daily || {}, ['precipitation_sum'], convertPrecipitation, precipitationUnitFromLabel(dailyUnits.precipitation_sum), target.precipitation);
+  return result;
+}
+
+module.exports = { convertWeatherSnapshot };

src/data/weather.js

@@ -0,0 +1,138 @@
+// Weather location data access and form normalization.
+
+const { fetchPagedRows, validateMaxLength } = require('./utils');
+const { fetchAppSettings } = require('./app-settings');
+
+const NAME_MAX_LENGTH = 255;
+const LOCATION_MAX_LENGTH = 255;
+const TIMEZONE_MAX_LENGTH = 128;
+const PROVIDERS = ['open-meteo', 'pirate-weather'];
+const TEMPERATURE_UNITS = ['celsius', 'fahrenheit'];
+const WIND_UNITS = ['kmh', 'mph', 'ms'];
+const PRECIPITATION_UNITS = ['mm', 'inch'];
+
+async function fetchWeatherLocationSuggestions(query) {
+  const search = validateMaxLength(query, LOCATION_MAX_LENGTH, 'Location search');
+  if (!search) {
+    return [];
+  }
+
+  const response = await fetch('https://geocoding-api.open-meteo.com/v1/search?name=' + encodeURIComponent(search) + '&count=8&language=en&format=json', {
+    headers: { Accept: 'application/json', 'User-Agent': 'Pulse Signage weather location lookup' }
+  });
+  if (!response.ok) {
+    throw new Error('Weather location lookup failed.');
+  }
+  const data = await response.json();
+  return (Array.isArray(data.results) ? data.results : []).map(function (result) {
+    return {
+      label: [result.name, result.admin1, result.country].filter(Boolean).join(', '),
+      latitude: Number(result.latitude),
+      longitude: Number(result.longitude),
+      timezone: String(result.timezone || '')
+    };
+  }).filter(function (result) {
+    return result.label && Number.isFinite(result.latitude) && Number.isFinite(result.longitude) && result.timezone;
+  });
+}
+
+function normalizeChoice(value, choices, fallback) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return choices.includes(normalized) ? normalized : fallback;
+}
+
+async function fetchWeatherLocationsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
+  const paged = await fetchPagedRows(pool, {
+    selectSql: 'SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, created_at, modified_at FROM i_weather_locations ORDER BY modified_at DESC, id DESC',
+    countSql: 'SELECT COUNT(*) AS count FROM i_weather_locations',
+    searchColumns: ['name', 'location_label', 'timezone', 'provider'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      location: 'location_label',
+      provider: 'provider',
+      interval: ['update_interval_value', 'update_interval_unit'],
+      last_pulled: 'last_pulled_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    page: page,
+    pageSize: pageSize
+  });
+  return Object.assign({ weatherLocations: paged.rows }, paged);
+}
+
+async function fetchWeatherLocationsData(pool) {
+  const [rows] = await pool.query('SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_json, created_at, modified_at FROM i_weather_locations ORDER BY modified_at DESC, id DESC');
+  return { weatherLocations: rows };
+}
+
+async function fetchWeatherLocationById(pool, id) {
+  const [rows] = await pool.query('SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_json, created_at, modified_at, created_by, modified_by FROM i_weather_locations WHERE id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function fetchWeatherLocationForecast(pool, location) {
+  const source = location || {};
+  const settings = await fetchAppSettings(pool);
+  const latitude = Number(source.latitude);
+  const longitude = Number(source.longitude);
+  const temperatureUnit = source.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius';
+  const windUnit = source.wind_unit === 'mph' ? 'mph' : source.wind_unit === 'ms' ? 'ms' : 'kmh';
+  const precipitationUnit = source.precipitation_unit === 'inch' ? 'inch' : 'mm';
+  let url;
+  let headers = { Accept: 'application/json', 'User-Agent': 'Pulse Signage weather reader' };
+
+  if (source.provider === 'pirate-weather') {
+    const apiKey = String(settings['weather.pirate_weather_api_key'] || '').trim();
+    if (!apiKey) throw new Error('Pirate Weather API key is not configured.');
+    url = 'https://api.pirateweather.net/forecast/' + encodeURIComponent(apiKey) + '/' + latitude + ',' + longitude + '?units=' + (temperatureUnit === 'fahrenheit' ? 'us' : 'si');
+  } else {
+    const params = new URLSearchParams({ latitude: String(latitude), longitude: String(longitude), timezone: String(source.timezone || 'auto'), forecast_days: '7', forecast_hours: '24', current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,rain,weather_code,wind_speed_10m,wind_direction_10m,uv_index,cloud_cover', hourly: 'temperature_2m,precipitation_probability,precipitation,weather_code,wind_speed_10m,uv_index,cloud_cover', daily: 'weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_probability_max,precipitation_sum,wind_speed_10m_max,uv_index_max,cloud_cover_mean', temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+    const apiKey = String(settings['weather.open_meteo_api_key'] || '').trim();
+    if (apiKey) params.set('apikey', apiKey);
+    url = 'https://api.open-meteo.com/v1/forecast?' + params.toString();
+  }
+
+  const response = await fetch(url, { headers: headers });
+  if (!response.ok) throw new Error('Weather provider returned HTTP ' + response.status + '.');
+  const snapshot = await response.json();
+  return { snapshot: snapshot, responseJson: JSON.stringify(snapshot), fetchedAt: new Date() };
+}
+
+function buildWeatherLocationPayload(req, existingLocation) {
+  const body = req && req.body ? req.body : {};
+  const fallback = existingLocation || {};
+  const name = validateMaxLength(body.name || fallback.name || '', NAME_MAX_LENGTH, 'Weather location name');
+  const locationLabel = validateMaxLength(body.location_label || fallback.location_label || '', LOCATION_MAX_LENGTH, 'Location label');
+  const latitude = Number(body.latitude !== undefined ? body.latitude : fallback.latitude);
+  const longitude = Number(body.longitude !== undefined ? body.longitude : fallback.longitude);
+  const timezone = validateMaxLength(body.timezone || fallback.timezone || '', TIMEZONE_MAX_LENGTH, 'Timezone');
+  const provider = normalizeChoice(body.provider || fallback.provider, PROVIDERS, 'open-meteo');
+  const temperatureUnit = normalizeChoice(body.temperature_unit || fallback.temperature_unit, TEMPERATURE_UNITS, 'celsius');
+  const windUnit = normalizeChoice(body.wind_unit || fallback.wind_unit, WIND_UNITS, 'kmh');
+  const precipitationUnit = normalizeChoice(body.precipitation_unit || fallback.precipitation_unit, PRECIPITATION_UNITS, 'mm');
+  const updateIntervalValue = Number(body.update_interval_value || fallback.update_interval_value || 30);
+  const updateIntervalUnit = normalizeChoice(body.update_interval_unit || fallback.update_interval_unit, ['minutes', 'hours'], 'minutes');
+
+  if (!name || !locationLabel || !timezone) {
+    const error = new Error('Name, location label, and timezone are required.');
+    error.statusCode = 400;
+    throw error;
+  }
+  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90 || !Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
+    const error = new Error('Latitude must be between -90 and 90, and longitude must be between -180 and 180.');
+    error.statusCode = 400;
+    throw error;
+  }
+  if (!Number.isInteger(updateIntervalValue) || updateIntervalValue < 1 || updateIntervalValue > 1440) {
+    const error = new Error('Update interval must be a whole number between 1 and 1440.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  return { name, locationLabel, latitude, longitude, timezone, provider, temperatureUnit, windUnit, precipitationUnit, updateIntervalValue, updateIntervalUnit };
+}
+
+module.exports = { fetchWeatherLocationsData, fetchWeatherLocationsPage, fetchWeatherLocationById, fetchWeatherLocationSuggestions, fetchWeatherLocationForecast, buildWeatherLocationPayload, PROVIDERS, TEMPERATURE_UNITS, WIND_UNITS, PRECIPITATION_UNITS };

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,13 +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 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');
 
@@ -57,6 +59,7 @@ async function ensureSchema(pool, options) {
       canvas_size_id INT NULL,
       background_image_path VARCHAR(512) NULL,
       background_color VARCHAR(32) NULL,
+      background_gradient LONGTEXT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -100,6 +103,24 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS c_media_assets (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      media_path VARCHAR(512) NOT NULL UNIQUE,
+      original_name VARCHAR(255) NOT NULL,
+      media_type VARCHAR(16) NOT NULL,
+      mime_type VARCHAR(128) NOT NULL,
+      file_size BIGINT UNSIGNED NOT NULL DEFAULT 0,
+      is_published TINYINT(1) NOT NULL DEFAULT 1,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      created_by INT NULL,
+      modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+      modified_by INT NULL,
+      INDEX idx_c_media_assets_type (media_type),
+      INDEX idx_c_media_assets_created_at (created_at)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS c_playlist_slides (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -203,9 +224,11 @@ async function ensureSchema(pool, options) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       feed_url VARCHAR(1024) NOT NULL,
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
       update_interval_value INT NOT NULL DEFAULT 60,
       update_interval_unit VARCHAR(10) NOT NULL DEFAULT 'minutes',
       item_limit INT NOT NULL DEFAULT 1,
+      last_pulled_at DATETIME NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -233,6 +256,24 @@ async function ensureSchema(pool, options) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       api_url VARCHAR(1024) NOT NULL,
+      request_method VARCHAR(10) NOT NULL DEFAULT 'GET',
+      request_body_json MEDIUMTEXT NULL,
+      auth_method VARCHAR(32) NOT NULL DEFAULT 'none',
+      auth_username VARCHAR(255) NULL,
+      auth_password MEDIUMTEXT NULL,
+      auth_bearer_token MEDIUMTEXT NULL,
+      auth_header_name VARCHAR(255) NULL,
+      auth_header_value MEDIUMTEXT NULL,
+      token_url VARCHAR(1024) NULL,
+      token_request_body_json MEDIUMTEXT NULL,
+      token_response_path VARCHAR(255) NULL DEFAULT 'access_token',
+      token_refresh_url VARCHAR(1024) NULL,
+      token_refresh_request_body_json MEDIUMTEXT NULL,
+      token_refresh_response_path VARCHAR(255) NULL DEFAULT 'refresh_token',
+      token_header_name VARCHAR(255) NULL DEFAULT 'Authorization',
+      token_header_prefix VARCHAR(64) NULL DEFAULT 'Bearer',
+      items_path VARCHAR(255) NULL,
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
       update_interval_value INT NOT NULL DEFAULT 60,
       update_interval_unit VARCHAR(10) NOT NULL DEFAULT 'minutes',
       last_pulled_at TIMESTAMP NULL,
@@ -247,6 +288,32 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS i_weather_locations (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(255) NOT NULL UNIQUE,
+      location_label VARCHAR(255) NOT NULL,
+      latitude DECIMAL(9,6) NOT NULL,
+      longitude DECIMAL(9,6) NOT NULL,
+      timezone VARCHAR(128) NOT NULL,
+      provider VARCHAR(32) NOT NULL DEFAULT 'open-meteo',
+      temperature_unit VARCHAR(16) NOT NULL DEFAULT 'celsius',
+      wind_unit VARCHAR(16) NOT NULL DEFAULT 'kmh',
+      precipitation_unit VARCHAR(16) NOT NULL DEFAULT 'mm',
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
+      update_interval_value INT NOT NULL DEFAULT 30,
+      update_interval_unit VARCHAR(16) NOT NULL DEFAULT 'minutes',
+      last_pulled_at DATETIME NULL,
+      last_pull_error VARCHAR(1024) NULL,
+      last_response_json MEDIUMTEXT NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      created_by INT NULL,
+      modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+      modified_by INT NULL,
+      INDEX idx_weather_locations_modified_at (modified_at)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS i_timetable_groups (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -287,6 +354,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
   `);
@@ -296,11 +364,18 @@ async function ensureSchema(pool, options) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NULL,
       username VARCHAR(255) NOT NULL UNIQUE,
+      email VARCHAR(320) NULL,
+      email_verified_at DATETIME NULL,
+      pending_email VARCHAR(320) NULL,
+      pending_email_token_hash CHAR(64) NULL,
+      pending_email_expires_at DATETIME NULL,
       password_hash CHAR(64) NOT NULL,
       password_salt VARCHAR(64) NOT NULL,
       password_iterations INT NOT NULL,
       must_change_password TINYINT(1) NOT NULL DEFAULT 0,
       account_locked TINYINT(1) NOT NULL DEFAULT 0,
+      last_login_at DATETIME NULL,
+      last_login_ip VARCHAR(255) NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -308,6 +383,37 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS a_account_tokens (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      user_id INT NOT NULL,
+      token_type VARCHAR(32) NOT NULL,
+      token_hash CHAR(64) NOT NULL UNIQUE,
+      expires_at DATETIME NOT NULL,
+      used_at DATETIME NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      CONSTRAINT fk_account_tokens_user FOREIGN KEY (user_id) REFERENCES a_users(id) ON DELETE CASCADE,
+      INDEX idx_account_tokens_lookup (token_type, token_hash, expires_at),
+      INDEX idx_account_tokens_user_type (user_id, token_type)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS a_user_invitations (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      email VARCHAR(320) NOT NULL,
+      name VARCHAR(255) NULL,
+      role_ids_json TEXT NOT NULL,
+      token_hash CHAR(64) NOT NULL UNIQUE,
+      expires_at DATETIME NOT NULL,
+      used_at DATETIME NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      created_by INT NULL,
+      INDEX idx_user_invitations_email (email, used_at, expires_at),
+      INDEX idx_user_invitations_created_by (created_by, created_at)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS a_roles (
       id INT AUTO_INCREMENT PRIMARY KEY,

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';
@@ -492,6 +494,164 @@ const VERSIONED_MIGRATIONS = [
             AND permissions.permission_key = 'audit-log.allow'`
       );
     }
+  },
+  {
+    version: '2.8.7',
+    label: 'v2.8.7 API request and token authentication schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'i_api_sources', 'request_method', "VARCHAR(10) NOT NULL DEFAULT 'GET'", 'api_url');
+      await ensureColumn(pool, 'i_api_sources', 'request_body_json', 'MEDIUMTEXT NULL', 'request_method');
+      await ensureColumn(pool, 'i_api_sources', 'token_url', 'VARCHAR(1024) NULL', 'auth_header_value');
+      await ensureColumn(pool, 'i_api_sources', 'token_request_body_json', 'MEDIUMTEXT NULL', 'token_url');
+      await ensureColumn(pool, 'i_api_sources', 'token_response_path', "VARCHAR(255) NULL DEFAULT 'access_token'", 'token_request_body_json');
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_url', 'VARCHAR(1024) NULL', 'token_response_path');
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_request_body_json', 'MEDIUMTEXT NULL', 'token_refresh_url');
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_response_path', "VARCHAR(255) NULL DEFAULT 'refresh_token'", 'token_refresh_request_body_json');
+      await ensureColumn(pool, 'i_api_sources', 'token_header_name', "VARCHAR(255) NULL DEFAULT 'Authorization'", 'token_refresh_response_path');
+      await ensureColumn(pool, 'i_api_sources', 'token_header_prefix', "VARCHAR(64) NULL DEFAULT 'Bearer'", 'token_header_name');
+    }
+  },
+  {
+    version: '2.8.8',
+    label: 'v2.8.8 weather locations and RSS collection timestamps schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS i_weather_locations (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          name VARCHAR(255) NOT NULL UNIQUE,
+          location_label VARCHAR(255) NOT NULL,
+          latitude DECIMAL(9,6) NOT NULL,
+          longitude DECIMAL(9,6) NOT NULL,
+          timezone VARCHAR(128) NOT NULL,
+          provider VARCHAR(32) NOT NULL DEFAULT 'open-meteo',
+          temperature_unit VARCHAR(16) NOT NULL DEFAULT 'celsius',
+          wind_unit VARCHAR(16) NOT NULL DEFAULT 'kmh',
+          precipitation_unit VARCHAR(16) NOT NULL DEFAULT 'mm',
+          update_interval_value INT NOT NULL DEFAULT 30,
+          update_interval_unit VARCHAR(16) NOT NULL DEFAULT 'minutes',
+          last_pulled_at DATETIME NULL,
+          last_pull_error VARCHAR(1024) NULL,
+          last_response_json MEDIUMTEXT NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          created_by INT NULL,
+          modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+          modified_by INT NULL,
+          INDEX idx_weather_locations_modified_at (modified_at)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+      await ensureColumn(pool, 'i_rss_feeds', 'last_pulled_at', 'DATETIME NULL', 'item_limit');
+    }
+  },
+  {
+    version: '2.8.9',
+    label: 'v2.8.9 data source enablement schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'i_api_sources', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'api_url');
+      await ensureColumn(pool, 'i_rss_feeds', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'feed_url');
+      await ensureColumn(pool, 'i_weather_locations', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'precipitation_unit');
+    }
+  },
+  {
+    version: '2.10.1',
+    label: 'v2.10.1 template background gradient schema',
+    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');
+    }
+  },
+  {
+    version: '2.10.7',
+    label: 'v2.10.7 API token refresh settings schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_url', 'VARCHAR(1024) NULL', 'token_response_path');
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_request_body_json', 'MEDIUMTEXT NULL', 'token_refresh_url');
+      await ensureColumn(pool, 'i_api_sources', 'token_refresh_response_path', "VARCHAR(255) NULL DEFAULT 'refresh_token'", 'token_refresh_request_body_json');
+    }
+  },
+  {
+    version: '2.11.0',
+    label: 'v2.11.0 account email and password reset schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'a_users', 'email', 'VARCHAR(320) NULL', 'username');
+      await ensureColumn(pool, 'a_users', 'email_verified_at', 'DATETIME NULL', 'email');
+      await ensureColumn(pool, 'a_users', 'pending_email', 'VARCHAR(320) NULL', 'email_verified_at');
+      await ensureColumn(pool, 'a_users', 'pending_email_token_hash', 'CHAR(64) NULL', 'pending_email');
+      await ensureColumn(pool, 'a_users', 'pending_email_expires_at', 'DATETIME NULL', 'pending_email_token_hash');
+      await ensureColumn(pool, 'a_users', 'last_login_at', 'DATETIME NULL', 'modified_by');
+      await ensureColumn(pool, 'a_users', 'last_login_ip', 'VARCHAR(255) NULL', 'last_login_at');
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS a_account_tokens (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          user_id INT NOT NULL,
+          token_type VARCHAR(32) NOT NULL,
+          token_hash CHAR(64) NOT NULL UNIQUE,
+          expires_at DATETIME NOT NULL,
+          used_at DATETIME NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          CONSTRAINT fk_account_tokens_user FOREIGN KEY (user_id) REFERENCES a_users(id) ON DELETE CASCADE,
+          INDEX idx_account_tokens_lookup (token_type, token_hash, expires_at),
+          INDEX idx_account_tokens_user_type (user_id, token_type)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+    }
+  },
+  {
+    version: '2.11.1',
+    label: 'v2.11.1 user invitations schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS a_user_invitations (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          email VARCHAR(320) NOT NULL,
+          name VARCHAR(255) NULL,
+          role_ids_json TEXT NOT NULL,
+          token_hash CHAR(64) NOT NULL UNIQUE,
+          expires_at DATETIME NOT NULL,
+          used_at DATETIME NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          created_by INT NULL,
+          INDEX idx_user_invitations_email (email, used_at, expires_at),
+          INDEX idx_user_invitations_created_by (created_by, created_at)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+    }
+  },
+  {
+    version: '2.13.0',
+    label: 'v2.13.0 media library schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS c_media_assets (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          media_path VARCHAR(512) NOT NULL UNIQUE,
+          original_name VARCHAR(255) NOT NULL,
+          media_type VARCHAR(16) NOT NULL,
+          mime_type VARCHAR(128) NOT NULL,
+          file_size BIGINT UNSIGNED NOT NULL DEFAULT 0,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          created_by INT NULL,
+          modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+          modified_by INT NULL,
+          INDEX idx_c_media_assets_type (media_type),
+          INDEX idx_c_media_assets_created_at (created_at)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+    }
+  },
+  {
+    version: '2.13.1',
+    label: 'v2.13.1 pending media upload visibility',
+    run: async function (pool) {
+      if (!(await columnExists(pool, 'c_media_assets', 'is_published'))) {
+        await pool.query('ALTER TABLE c_media_assets ADD COLUMN is_published TINYINT(1) NOT NULL DEFAULT 1 AFTER file_size');
+      }
+    }
   }
 ];
 

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,10 +10,11 @@ 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');
+const { collectLocalControlUsers } = require('../web/lib/local-control-users');
+
 
 function createThinClientConfig() {
   return {
@@ -184,9 +187,11 @@ async function start() {
   const server = http.createServer(app);
   const pool = common.createPool();
   const config = createThinClientConfig();
+  const localPlayerInternalUrl = String(process.env.LOCAL_PLAYER_INTERNAL_URL || process.env.PLAYER_INTERNAL_URL || '').trim().replace(/\/$/, '');
   const playerPlaylistService = createPlayerPlaylistService({
     pool: pool,
     common: common,
+    mediaDir: config.mediaDir,
     snapshotDir: path.join(config.mediaDir, 'player-cache', 'screen-playlists')
   });
   app.use(express.json());
@@ -353,6 +358,27 @@ async function start() {
     return socket && socket.playerDeviceId ? String(socket.playerDeviceId).trim() : '';
   }
 
+  function findPlayerByPairingCode(pairingCode) {
+    const normalizedCode = String(pairingCode || '').trim().toUpperCase();
+    if (!normalizedCode) {
+      return null;
+    }
+    for (const [deviceId, socket] of playerSockets.entries()) {
+      const pairingCodes = socket && Array.isArray(socket.pairingSessions)
+        ? socket.pairingSessions.map(function (entry) { return entry.code; })
+        : (socket && Array.isArray(socket.pairingCodes) ? socket.pairingCodes : [socket && socket.pairingCode]);
+      if (socket && pairingCodes.some(function (code) {
+        return String(code || '').trim().toUpperCase() === normalizedCode;
+      })) {
+        const session = socket.pairingSessions && socket.pairingSessions.find(function (entry) {
+          return String(entry.code || '').trim().toUpperCase() === normalizedCode;
+        });
+        return { deviceId: deviceId, socket: socket, clientId: session && session.clientId ? session.clientId : null, code: normalizedCode };
+      }
+    }
+    return null;
+  }
+
   function removeConnectedPlayerSocket(socket) {
     if (!socket || !socket.playerDeviceId) {
       return false;
@@ -392,6 +418,18 @@ async function start() {
     return sendPlayerCommandToSocket(socket, commandPayload);
   }
 
+  async function syncLocalControlOnRegistration(socket, player) {
+    const playerInternalUrl = String(player && player.internal_base_url || '').trim().replace(/\/$/, '');
+    if (localPlayerInternalUrl && playerInternalUrl === localPlayerInternalUrl) {
+      return;
+    }
+    const users = await collectLocalControlUsers(pool);
+    await sendPlayerCommandToSocket(socket, {
+      command: 'sync-local-control',
+      users: users
+    });
+  }
+
   function sendPlayerCommandToSocket(socket, commandPayload) {
     if (!socket || socket.readyState !== WebSocket.OPEN) {
       return Promise.resolve({ ok: false, status: 503, error: 'Player is not connected.' });
@@ -435,7 +473,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) : [];
@@ -513,6 +565,21 @@ async function start() {
     };
   }
 
+  function requireOnboardingAuth(req, res, next) {
+    const token = String(req.headers['x-pulse-page-auth'] || '').trim();
+    const payload = verifyPageAuthToken(token);
+    if (payload && ['onboarding', 'player'].indexOf(String(payload.scope || '').trim()) !== -1) {
+      req.playerPageAuth = payload;
+      return next();
+    }
+
+    if (verifyRequestAuth(req)) {
+      return next();
+    }
+
+    return res.status(401).json({ error: 'Onboarding authentication required.' });
+  }
+
   app.get('/api/media/config', requireRequestAuth, function (_req, res) {
     res.json({
       mediaDir: config.mediaDir,
@@ -616,6 +683,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,
@@ -629,12 +706,45 @@ async function start() {
     }
   });
 
+  app.post('/api/screens/:slug/announcements/refresh', requireRequestAuth, function (req, res) {
+    const slug = String(req.params.slug || '').trim();
+    if (!slug) {
+      return res.status(400).json({ error: 'Screen slug is required.' });
+    }
+
+    const targetPlayers = Array.from(playerSockets.values()).filter(function (socket) {
+      return socket && socket.readyState === WebSocket.OPEN;
+    }).map(function (socket) {
+      return { socket: socket };
+    });
+    let sent = 0;
+    targetPlayers.forEach(function (target) {
+      if (!target || !target.socket || target.socket.readyState !== WebSocket.OPEN) {
+        return;
+      }
+
+      try {
+        target.socket.send(JSON.stringify({
+          type: 'command',
+          command: 'announcement-refresh',
+          screenSlug: slug,
+          sentAt: new Date().toISOString()
+        }));
+        sent += 1;
+      } catch (_error) {
+      }
+    });
+
+    return res.json({ ok: true, screenSlug: slug, sent: sent });
+  });
+
   app.get('/api/onboarding/status', async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || getConnectedPlayerDeviceId();
+      const requestedDeviceId = normalizeDeviceId(req.query.deviceId);
+      const deviceId = requestedDeviceId;
       const status = await getOnboardingStatus(pool, deviceId);
       res.json({
-        deviceId: normalizeDeviceId(deviceId),
+        deviceId: requestedDeviceId,
         onboarded: Boolean(status && status.screen_id),
         clientName: status ? status.client_name : null,
         screenId: status ? status.screen_id : null,
@@ -647,6 +757,58 @@ async function start() {
     }
   });
 
+  app.get('/api/onboarding/resolve', requireRequestAuth, function (req, res) {
+    const pairing = findPlayerByPairingCode(req.query.pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    res.json({
+      deviceId: pairing.deviceId,
+      clientId: pairing.clientId || null,
+    });
+  });
+
+  app.get('/api/onboarding/url', requireRequestAuth, function (req, res) {
+    const pairing = findPlayerByPairingCode(req.query.pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    const webBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '');
+    if (!webBaseUrl) {
+      return res.status(503).json({ error: 'WEB_PUBLIC_URL is not configured on the bridge.' });
+    }
+    res.json({ url: `${webBaseUrl}/pairing?code=${encodeURIComponent(pairing.code)}` });
+  });
+
+  app.get('/api/onboarding/qr', requireRequestAuth, async function (req, res, next) {
+    try {
+      const pairing = findPlayerByPairingCode(req.query.pairingCode);
+      if (!pairing) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+      }
+      const webBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '');
+      if (!webBaseUrl) {
+        return res.status(503).json({ error: 'WEB_PUBLIC_URL is not configured on the bridge.' });
+      }
+      const svg = await createStyledQrCodeSvg({
+        value: `${webBaseUrl}/pairing?code=${encodeURIComponent(pairing.code)}`,
+        qr_margin: 20,
+        qr_dots_type: 'dots',
+        qr_dots_color: '#f4f8f5',
+        qr_corners_square_type: 'dot',
+        qr_corners_square_color: '#f4f8f5',
+        qr_corners_dot_type: 'dot',
+        qr_corners_dot_color: '#f0bd70',
+        qr_background_transparent: true
+      });
+      res.set('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.set('Cache-Control', 'no-store');
+      res.send(svg);
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/api/onboarding/screens', requirePageAuth(['onboarding', 'player']), async function (_req, res, next) {
     try {
       const [rows] = await pool.query('SELECT id, name, slug FROM d_screens ORDER BY name ASC, id ASC');
@@ -656,25 +818,18 @@ async function start() {
     }
   });
 
-  app.get('/api/onboarding/qr', async function (req, res, next) {
+  app.post('/api/onboarding', express.json(), requireOnboardingAuth, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || getConnectedPlayerDeviceId();
+      const pairingCode = String(req.body && req.body.pairingCode || '').trim().toUpperCase();
-      if (!deviceId) {
+      const pairing = findPlayerByPairingCode(pairingCode);
-        return res.status(400).json({ error: 'Device ID is required' });
+      const clientId = normalizeDeviceId(req.body && req.body.clientId);
+      if (!pairing) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
       }
-      const onboardingUrl = `${getPlayerPublicBaseUrl(req)}/onboard?deviceId=${encodeURIComponent(deviceId)}`;
+      if (!clientId) {
-      const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 });
+        return res.status(400).json({ error: 'Client ID is required.' });
-      res.set('Content-Type', 'image/svg+xml; charset=utf-8');
-      res.set('Cache-Control', 'no-store');
-      res.send(svg);
-    } catch (error) {
-      next(error);
       }
-  });
+      const deviceId = pairing.deviceId;
-
-  app.post('/api/onboarding', requirePageAuth(['onboarding', 'player']), express.json(), async function (req, res, next) {
-    try {
-      const deviceId = normalizeDeviceId(req.body && req.body.deviceId) || getConnectedPlayerDeviceId();
       const clientName = String((req.body && req.body.clientName) || '').trim();
       const screenSlug = String((req.body && req.body.screenSlug) || '').trim();
       if (!deviceId) {
@@ -687,8 +842,13 @@ async function start() {
         return res.status(400).json({ error: 'Screen is required' });
       }
 
-      const status = await commitDeviceBinding(pool, deviceId, clientName, screenSlug, null, []);
+      const status = await commitDeviceBinding(pool, clientId, clientName, screenSlug, null, []);
       await bindPlayerToScreen(pool, deviceId, screenSlug);
+      await sendPlayerCommandToSocket(pairing.socket, {
+        command: 'redirect',
+        url: `${String(pairing.socket.publicBaseUrl || getPlayerPublicBaseUrl(req)).replace(/\/$/, '')}/screen/${encodeURIComponent(screenSlug)}`,
+        clientId: clientId
+      });
       res.json({
         deviceId: deviceId,
         clientName: status ? status.client_name : clientName,
@@ -708,6 +868,11 @@ async function start() {
 
   app.get('/api/screens/:slug/playlist', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+      const status = await getOnboardingStatus(pool, clientId);
+      if (!clientId || !status || String(status.screen_slug || '').trim() !== String(req.params.slug || '').trim()) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
       const data = await playerPlaylistService.buildScreenPlaylist(req.params.slug);
       if (!data.screen) {
@@ -728,6 +893,11 @@ async function start() {
 
   app.get('/api/screens/:slug/announcement', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+      const status = await getOnboardingStatus(pool, clientId);
+      if (!clientId || !status || String(status.screen_slug || '').trim() !== String(req.params.slug || '').trim()) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
       const announcement = typeof common.fetchActiveAnnouncement === 'function'
         ? await common.fetchActiveAnnouncement(pool, req.params.slug)
@@ -751,48 +921,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);
@@ -802,8 +930,11 @@ async function start() {
         return res.status(404).json({ ok: false, error: 'Player is not connected.' });
       }
 
-      socket.send(JSON.stringify(payload));
+      const response = await sendPlayerCommandToSocket(socket, payload);
-      res.json({ ok: true, deviceId: deviceId, sent: true });
+      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);
     }
@@ -840,6 +971,17 @@ async function start() {
     }
 
     socket.playerDeviceId = deviceId;
+    socket.pairingSessions = Array.isArray(payload.pairingSessions) ? payload.pairingSessions.map(function (entry) {
+      return {
+        deviceId: normalizeDeviceId(entry && entry.deviceId),
+        clientId: normalizeDeviceId(entry && entry.clientId),
+        code: String(entry && entry.code || '').trim().toUpperCase()
+      };
+    }).filter(function (entry) { return entry.deviceId && entry.code; }) : [];
+    socket.pairingCodes = Array.from(new Set((Array.isArray(payload.pairingCodes) ? payload.pairingCodes : [payload.pairingCode]).map(function (value) {
+      return String(value || '').trim().toUpperCase();
+    }).filter(Boolean)));
+    socket.pairingCode = socket.pairingCodes[0] || '';
 
     if (messageType === 'snapshot') {
       const slug = String(payload.slug || '').trim();
@@ -847,29 +989,59 @@ 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;
     }
 
     if (messageType === 'register') {
+      socket.publicBaseUrl = String(payload.publicBaseUrl || '').trim().replace(/\/$/, '');
       const player = await upsertPlayerRegistration(pool, {
         deviceId: deviceId,
         publicBaseUrl: payload.publicBaseUrl,
         internalBaseUrl: payload.internalBaseUrl
       });
 
+      const previousSocket = playerSockets.get(deviceId);
       playerSockets.set(deviceId, socket);
+      if (previousSocket && previousSocket !== socket && previousSocket.readyState !== WebSocket.CLOSED) {
+        try {
+          previousSocket.close(1000, 'Replaced by a newer player connection.');
+        } catch (_error) {
+        }
+      }
       logBridge(`Player ${formatPlayerConnectionLabel(deviceId)} has connected`);
       socket.send(JSON.stringify({ type: 'registered', ok: true, player: player }));
+      syncLocalControlOnRegistration(socket, player).catch(function (error) {
+        logBridge(`Unable to synchronize Local Control authorization for ${formatPlayerConnectionLabel(deviceId)}`, error);
+      });
       return;
     }
 
     if (messageType === 'heartbeat') {
+      socket.publicBaseUrl = String(payload.publicBaseUrl || socket.publicBaseUrl || '').trim().replace(/\/$/, '');
       const player = await recordPlayerHeartbeat(pool, {
         deviceId: deviceId,
         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;
@@ -927,15 +1099,15 @@ async function start() {
     });
 
     socket.on('close', function () {
-      clearPlayerSnapshotSources(socket.playerDeviceId);
       if (removeConnectedPlayerSocket(socket)) {
+        clearPlayerSnapshotSources(socket.playerDeviceId);
         logPlayerDisconnect(socket);
       }
     });
 
     socket.on('error', function () {
-      clearPlayerSnapshotSources(socket.playerDeviceId);
       if (removeConnectedPlayerSocket(socket)) {
+        clearPlayerSnapshotSources(socket.playerDeviceId);
         logPlayerDisconnect(socket);
       }
     });
@@ -1172,6 +1344,44 @@ async function start() {
     }
   });
 
+  app.post('/api/internal/sync/player-control', requireRequestAuth, async function (_req, res, next) {
+    try {
+      logBridge('Relaying player control sync request to web');
+      const webBaseUrl = resolveWebBaseUrl(_req);
+      if (!webBaseUrl) {
+        return res.status(502).json({ error: 'Web base URL is not configured.' });
+      }
+
+      const requestBody = _req.body && typeof _req.body === 'object' && !Array.isArray(_req.body)
+        ? Object.assign({}, _req.body)
+        : {};
+      const response = await fetch(`${webBaseUrl}/api/internal/sync/player-control`, {
+        method: 'POST',
+        headers: Object.assign({
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        }, createRequestAuthHeaders({
+          method: 'POST',
+          pathname: '/api/internal/sync/player-control',
+          body: requestBody
+        })),
+        body: JSON.stringify(requestBody)
+      });
+
+      res.status(response.status);
+      const contentType = response.headers.get('content-type');
+      if (contentType) {
+        res.type(contentType);
+      }
+      res.send(await response.text());
+    } catch (error) {
+      logBridge('Player control sync relay failed', {
+        error: error && error.message ? error.message : String(error)
+      });
+      next(error);
+    }
+  });
+
   fs.mkdirSync(config.mediaDir, { recursive: true });
 
   server.listen(config.port, function () {

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,9 +12,12 @@ 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');
+const { createLocalControlService } = require('./player/local-control');
 
 
 // Player runtime, media API, and websocket wiring.
@@ -20,11 +25,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');
@@ -37,6 +42,9 @@ async function start() {
   let lastDisconnectAt = 0;
   let playerPublicBaseUrl = PLAYER_PUBLIC_URL || null;
   let refreshThinClientRegistration = null;
+  let activePairingCode = '';
+  let activePairingCodes = [];
+  let activePairingSessions = [];
   const playerRuntime = createPlayerRuntime({
     pool: pool,
     normalizeDeviceId: normalizeDeviceId,
@@ -49,11 +57,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
@@ -61,6 +86,7 @@ async function start() {
     : createPlayerPlaylistService({
         pool: pool,
         common: common,
+        mediaDir: MEDIA_DIR,
         snapshotDir: path.join(MEDIA_DIR, 'player-cache', 'screen-playlists')
       });
   const rtmpStreamService = createRtmpStreamService({
@@ -69,6 +95,15 @@ async function start() {
   const server = http.createServer(app);
   playerRuntime.installWebsocket(server);
   app.use(express.json());
+  const localControlService = createLocalControlService({
+    app: app,
+    server: server,
+    pool: pool,
+    playerRuntime: playerRuntime,
+    playerIdentifier: PLAYER_DEVICE_ID,
+    cachePath: path.join(MEDIA_DIR, 'player-cache', 'local-control-users.json'),
+    cacheMaxAgeMs: Number(process.env.LOCAL_CONTROL_CACHE_MAX_AGE_MS || 72 * 60 * 60 * 1000)
+  });
 
   let hasLoggedPlayerStartup = false;
 
@@ -261,7 +296,7 @@ async function start() {
           }
           response.ok = true;
         }
-      } else if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname'].indexOf(command) !== -1) {
+      } else if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname', 'announcement-refresh'].indexOf(command) !== -1) {
         const screenSlug = String(payload.screenSlug || payload.slug || '').trim();
         if (!screenSlug) {
           response.error = 'Screen slug is required.';
@@ -304,7 +339,25 @@ async function start() {
     playerPublicBaseUrl: getPlayerPublicBaseUrl(),
     playerInternalBaseUrl: PLAYER_INTERNAL_URL,
     bridgeBaseUrl: BRIDGE_PUBLIC_URL,
-    playerDeviceId: PLAYER_DEVICE_ID
+    playerDeviceId: PLAYER_DEVICE_ID,
+    onPairingCode: function (code, codes) {
+      activePairingCode = String(code || '').trim().toUpperCase();
+      activePairingSessions = Array.isArray(codes) ? codes.map(function (entry) {
+        return { deviceId: String(entry && entry.deviceId || '').trim(), clientId: String(entry && entry.clientId || '').trim(), code: String(entry && entry.code || '').trim().toUpperCase() };
+      }).filter(function (entry) { return entry.deviceId && entry.code; }) : [];
+      activePairingCodes = activePairingSessions.map(function (entry) { return entry.code; });
+      if (typeof refreshThinClientRegistration === 'function') {
+        refreshThinClientRegistration();
+      }
+    }
+  });
+  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,
@@ -314,12 +367,15 @@ 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,
     onPlayerPublicBaseUrl: setPlayerPublicBaseUrl
   });
 
+  await localControlService.loadCache();
+
   function createThinClientWebSocketUrl() {
     if (!BRIDGE_PUBLIC_URL) {
       return null;
@@ -374,7 +430,11 @@ async function start() {
           type: 'heartbeat',
           deviceId: PLAYER_DEVICE_ID,
           publicBaseUrl: getPlayerPublicBaseUrl(),
-          internalBaseUrl: PLAYER_INTERNAL_URL
+          internalBaseUrl: PLAYER_INTERNAL_URL,
+          pairingCode: activePairingCode,
+          pairingCodes: activePairingCodes,
+          pairingSessions: activePairingSessions,
+          connections: playerRuntime.snapshotAllConnections()
         }));
       }
 
@@ -422,6 +482,7 @@ async function start() {
           socket.send(JSON.stringify({
             type: 'snapshot',
             deviceId: PLAYER_DEVICE_ID,
+            playerPublicBaseUrl: getPlayerPublicBaseUrl(),
             slug: String(slug || '').trim(),
             connections: playerRuntime.snapshotConnections(slug)
           }));
@@ -438,7 +499,10 @@ async function start() {
           type: 'register',
           deviceId: PLAYER_DEVICE_ID,
           publicBaseUrl: getPlayerPublicBaseUrl(),
-          internalBaseUrl: PLAYER_INTERNAL_URL
+          internalBaseUrl: PLAYER_INTERNAL_URL,
+          pairingCode: activePairingCode,
+          pairingCodes: activePairingCodes,
+          pairingSessions: activePairingSessions
         }));
 
         playerRuntime.snapshotSlugs().forEach(function (slug) {
@@ -545,10 +609,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/local-control.js

@@ -0,0 +1,579 @@
+// Player-local control login, cache, and command routes.
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const { WebSocketServer, WebSocket } = require('ws');
+const { verifyPassword, createSessionToken, hashSessionToken } = require('#src/auth');
+const { verifyRequestAuth } = require('#src/request-auth');
+
+const DEFAULT_CACHE_MAX_AGE_MS = 24 * 60 * 60 * 1000;
+const DEFAULT_LOGIN_RATE_LIMIT_WINDOW_MS = 15 * 60 * 1000;
+const DEFAULT_LOGIN_RATE_LIMIT_MAX_ATTEMPTS = 5;
+const LOCAL_COMMANDS = new Set(['reload', 'previous', 'next', 'pause', 'blackout']);
+
+function parseCookies(value) {
+  return String(value || '').split(';').reduce(function (cookies, part) {
+    const separator = part.indexOf('=');
+    if (separator === -1) {
+      return cookies;
+    }
+    const name = decodeURIComponent(part.slice(0, separator).trim());
+    const cookieValue = decodeURIComponent(part.slice(separator + 1).trim());
+    if (name) {
+      cookies[name] = cookieValue;
+    }
+    return cookies;
+  }, {});
+}
+
+function serializeCookie(name, value, maxAgeMs) {
+  return `${encodeURIComponent(name)}=${encodeURIComponent(value)}; Max-Age=${Math.max(0, Math.trunc(Number(maxAgeMs) / 1000))}; Path=/local-control; HttpOnly; SameSite=Lax`;
+}
+
+function fingerprintUsername(username) {
+  return crypto.createHash('sha256').update(String(username || '').trim()).digest('hex');
+}
+
+function getSessionCookieName(playerIdentifier) {
+  const suffix = String(playerIdentifier || '').trim().replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 128) || 'default';
+  return `pulse_local_control_${suffix}_session`;
+}
+
+function createLocalControlService(options) {
+  const app = options && options.app;
+  const server = options && options.server;
+  const playerRuntime = options && options.playerRuntime;
+  const pool = options && options.pool;
+  const cachePath = path.resolve(String(options && options.cachePath || 'player-cache/local-control-users.json'));
+  const sessionCookieName = getSessionCookieName(options && options.playerIdentifier);
+  const cacheMaxAgeMs = Number(options && options.cacheMaxAgeMs) > 0
+    ? Number(options.cacheMaxAgeMs)
+    : DEFAULT_CACHE_MAX_AGE_MS;
+  const loginRateLimitWindowMs = Number(options && options.loginRateLimitWindowMs) > 0
+    ? Number(options.loginRateLimitWindowMs)
+    : DEFAULT_LOGIN_RATE_LIMIT_WINDOW_MS;
+  const loginRateLimitMaxAttempts = Number(options && options.loginRateLimitMaxAttempts) > 0
+    ? Math.trunc(Number(options.loginRateLimitMaxAttempts))
+    : DEFAULT_LOGIN_RATE_LIMIT_MAX_ATTEMPTS;
+  const sessions = new Map();
+  const loginFailures = new Map();
+  const localControlSockets = new Set();
+  const localControlWs = new WebSocketServer({ noServer: true });
+  let cache = { syncedAt: null, users: [] };
+
+  function normalizeUsers(users) {
+    return (Array.isArray(users) ? users : []).map(function (user) {
+      return {
+        username_hash: String(user && (user.username_hash || fingerprintUsername(user.username)) || '').trim(),
+        password_hash: String(user && user.password_hash || '').trim(),
+        password_salt: String(user && user.password_salt || '').trim()
+      };
+    }).filter(function (user) {
+      return Boolean(user.username_hash && user.password_hash && user.password_salt);
+    });
+  }
+
+  async function loadCache() {
+    try {
+      const payload = JSON.parse(await fs.promises.readFile(cachePath, 'utf8'));
+      cache = {
+        syncedAt: String(payload && payload.syncedAt || '').trim() || null,
+        users: normalizeUsers(payload && payload.users)
+      };
+    } catch (_error) {
+      cache = { syncedAt: null, users: [] };
+    }
+    return cache;
+  }
+
+  async function saveUsers(users) {
+    const nextCache = {
+      syncedAt: new Date().toISOString(),
+      users: normalizeUsers(users)
+    };
+    const usersChanged = JSON.stringify(nextCache.users) !== JSON.stringify(cache.users);
+    await fs.promises.mkdir(path.dirname(cachePath), { recursive: true, mode: 0o700 });
+    const temporaryPath = `${cachePath}.${process.pid}.tmp`;
+    await fs.promises.writeFile(temporaryPath, JSON.stringify(nextCache, null, 2), { encoding: 'utf8', mode: 0o600 });
+    await fs.promises.chmod(temporaryPath, 0o600);
+    await fs.promises.rename(temporaryPath, cachePath);
+    await fs.promises.chmod(cachePath, 0o600);
+    cache = nextCache;
+    if (usersChanged) {
+      sessions.clear();
+      localControlSockets.forEach(function (socket) {
+        try {
+          socket.terminate();
+        } catch (_error) {
+          localControlSockets.delete(socket);
+        }
+      });
+    }
+    return cache;
+  }
+
+  function isCacheUsable() {
+    const syncedAt = new Date(cache.syncedAt || 0).getTime();
+    return Boolean(cache.users.length && Number.isFinite(syncedAt) && Date.now() - syncedAt <= cacheMaxAgeMs);
+  }
+
+  function getLoginRateLimitKey(req, username) {
+    const remoteAddress = String(req && req.socket && req.socket.remoteAddress || '').trim();
+    return `${remoteAddress}:${fingerprintUsername(username)}`;
+  }
+
+  function getLoginFailureTimestamps(key, now) {
+    const cutoff = now - loginRateLimitWindowMs;
+    const timestamps = (loginFailures.get(key) || []).filter(function (timestamp) {
+      return timestamp > cutoff;
+    });
+    if (timestamps.length) {
+      loginFailures.set(key, timestamps);
+    } else {
+      loginFailures.delete(key);
+    }
+    return timestamps;
+  }
+
+  function getLoginRateLimitRetryAfter(req, username) {
+    const now = Date.now();
+    const timestamps = getLoginFailureTimestamps(getLoginRateLimitKey(req, username), now);
+    if (timestamps.length < loginRateLimitMaxAttempts) {
+      return 0;
+    }
+    return Math.max(1, Math.ceil((timestamps[0] + loginRateLimitWindowMs - now) / 1000));
+  }
+
+  function recordLoginFailure(req, username) {
+    const key = getLoginRateLimitKey(req, username);
+    const timestamps = getLoginFailureTimestamps(key, Date.now());
+    timestamps.push(Date.now());
+    loginFailures.set(key, timestamps);
+  }
+
+  function clearLoginFailures(req, username) {
+    loginFailures.delete(getLoginRateLimitKey(req, username));
+  }
+
+  function getUserFromRequest(req) {
+    const cookies = parseCookies(req && req.headers && req.headers.cookie);
+    const token = String(cookies[sessionCookieName] || '').trim();
+    if (!token) {
+      return null;
+    }
+    const session = sessions.get(hashSessionToken(token));
+    if (!session || session.expiresAt <= Date.now()) {
+      sessions.delete(hashSessionToken(token));
+      return null;
+    }
+    return session.user;
+  }
+
+  function requireLocalAuth(req, res, next) {
+    const user = getUserFromRequest(req);
+    if (!user) {
+      return res.status(401).json({ error: 'Local control login required.' });
+    }
+    req.localControlUser = user;
+    return next();
+  }
+
+  async function getScreenNames(slugs) {
+    if (!pool || !Array.isArray(slugs) || !slugs.length) {
+      return new Map();
+    }
+    try {
+      const [rows] = await pool.query('SELECT slug, name FROM d_screens WHERE slug IN (?)', [slugs]);
+      return new Map((Array.isArray(rows) ? rows : []).map(function (row) {
+        return [String(row && row.slug || '').trim(), String(row && row.name || '').trim()];
+      }));
+    } catch (_error) {
+      return new Map();
+    }
+  }
+
+  async function getState() {
+    const slugs = playerRuntime.snapshotSlugs();
+    const screenNames = await getScreenNames(slugs);
+    return {
+      screens: slugs.map(function (slug) {
+        return { slug: slug, name: screenNames.get(slug) || slug, connections: playerRuntime.snapshotConnections(slug) };
+      }),
+      syncedAt: cache.syncedAt
+    };
+  }
+
+  function sendState(socket, state) {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: 'local-control-state', state: state }));
+    }
+  }
+
+  function broadcastState() {
+    if (!localControlSockets.size) {
+      return;
+    }
+    getState().then(function (state) {
+      localControlSockets.forEach(function (socket) { sendState(socket, state); });
+    }).catch(function () {});
+  }
+
+  function renderPage() {
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Local control</title><style>body{font-family:system-ui,sans-serif;background:#18212b;color:#f3f6f8;margin:0;padding:2rem}main{max-width:58rem;margin:auto}section{background:#24313d;border:1px solid #405160;padding:1rem;margin:1rem 0;border-radius:6px}input,button{font:inherit;padding:.55rem;margin:.25rem 0}input{width:100%;box-sizing:border-box;background:#16202a;color:#fff;border:1px solid #607384}button{cursor:pointer}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:.6rem;border-bottom:1px solid #405160}#message{min-height:1.4rem}</style></head><body><main><h1>Local control</h1><section id="login"><form id="login-form"><label>Username<input name="username" autocomplete="username" required></label><label>Password<input name="password" type="password" autocomplete="current-password" required></label><button type="submit">Sign in</button></form></section><section id="controls" hidden><p id="message"></p><button id="logout" type="button">Sign out</button><table><thead><tr><th>Client</th><th>Screen</th><th>Actions</th></tr></thead><tbody id="clients"></tbody></table></section></main><script>(function(){var login=document.getElementById('login');var controls=document.getElementById('controls');var message=document.getElementById('message');var clients=document.getElementById('clients');function request(url,options){return fetch(url,options||{}).then(function(response){return response.json().catch(function(){return {};}).then(function(body){if(!response.ok){throw new Error(body.error||'Request failed.');}return body;});});}function showError(error){message.textContent=error.message||String(error);}function sendCommand(screen,connection,command){return request('/local-control/api/commands',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({slug:screen.slug,connectionId:connection.id,command:command})}).then(function(){message.textContent='Command sent.';}).catch(showError);}function render(state){login.hidden=true;controls.hidden=false;clients.textContent='';(state.screens||[]).forEach(function(screen){(screen.connections||[]).forEach(function(connection){var row=document.createElement('tr');[connection.clientName||connection.label||connection.clientId||'Client',screen.name||screen.slug].forEach(function(value){var cell=document.createElement('td');cell.textContent=value;row.appendChild(cell);});var cell=document.createElement('td');['Reload','Previous','Next','Pause','Blackout'].forEach(function(label){var action=document.createElement('button');action.type='button';action.textContent=label;action.addEventListener('click',function(){sendCommand(screen,connection,label.toLowerCase());});cell.appendChild(action);});row.appendChild(cell);clients.appendChild(row);});});}function load(){request('/local-control/api/state').then(render).catch(function(error){if(error.message.indexOf('login')!==-1){login.hidden=false;controls.hidden=true;}else{showError(error);}});}document.getElementById('login-form').addEventListener('submit',function(event){event.preventDefault();var data=new FormData(event.currentTarget);request('/local-control/api/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:data.get('username'),password:data.get('password')})}).then(load).catch(showError);});document.getElementById('logout').addEventListener('click',function(){request('/local-control/api/logout',{method:'POST'}).then(function(){location.reload();}).catch(showError);});load();setInterval(load,10000);}());</script></body></html>`;
+  }
+
+  function renderPageV2() {
+    return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Local Control</title>
+  <style>
+    :root { color-scheme: dark; --page: #111a22; --panel: #1c2934; --panel-soft: #223442; --line: #3a4b59; --text: #f3f6f8; --muted: #aab8c2; --accent: #72c7b8; }
+    * { box-sizing: border-box; }
+    body { margin: 0; min-width: 320px; padding: 1.25rem; background: var(--page) radial-gradient(circle at top, #243847 0, var(--page) 42rem) no-repeat; background-size: 100% 42rem; color: var(--text); font-family: system-ui, sans-serif; }
+    main { width: min(100%, 66rem); margin: 0 auto; }
+    header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 30rem); margin: 0 auto; padding: .25rem 0 1.25rem; }
+    header.wide { width: 100%; }
+    h1 { margin: 0; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: .01em; }
+    section { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1rem 2rem rgb(0 0 0 / 12%); }
+    #login { max-width: 30rem; margin: 0 auto; padding: 1.25rem; }
+    form { display: grid; gap: .8rem; }
+    label { display: grid; gap: .35rem; color: var(--muted); font-size: .9rem; }
+    input, button { font: inherit; }
+    input { width: 100%; padding: .7rem .75rem; border: 1px solid #607384; border-radius: 6px; background: #13202a; color: var(--text); }
+    button { min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid #6d8797; border-radius: 6px; background: var(--panel-soft); color: var(--text); cursor: pointer; }
+    button:hover, button:focus-visible { border-color: var(--accent); outline: 2px solid rgb(114 199 184 / 25%); outline-offset: 1px; }
+    #logout { flex: 0 0 auto; }
+    #controls { overflow: hidden; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: .85rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
+    th { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
+    tbody tr:last-child td { border-bottom: 0; }
+    td:first-child { width: 31%; font-weight: 650; }
+    .client-cell { position: relative; padding-right: 6rem !important; }
+    td:nth-child(2) { width: 22%; color: var(--muted); }
+    td:nth-child(3) { width: 22%; color: var(--muted); }
+    .actions { display: grid; gap: .3rem; min-width: 14rem; }
+    .action-row { display: flex; flex-wrap: nowrap; gap: .3rem; }
+    .action-row button { flex: 1 1 0; margin: 0; min-height: 2.1rem; padding: .35rem .55rem; border: 0; font-size: .84rem; white-space: nowrap; }
+    .btn-danger { background: #dc3545; color: #fff; }
+    .btn-warning { background: #ffc107; color: #111; }
+    .btn-info { background: #0dcaf0; color: #111; }
+    .btn-secondary { background: #6c757d; color: #fff; }
+    .btn-success { background: #198754; color: #fff; }
+    .button-icon { display: inline-flex; width: 1rem; height: 1rem; margin-right: .35rem; vertical-align: -.15rem; }
+    .button-icon svg { width: 100%; height: 100%; fill: currentColor; }
+    .state-badge { position: absolute; top: .85rem; right: 1rem; padding: .2rem .45rem; border: 1px solid #d8a95b; border-radius: 999px; color: #ffd98b; font-size: .72rem; font-weight: 650; letter-spacing: .03em; }
+    .state-badge.blackout { border-color: #9aa7b2; color: #d9e0e5; }
+    @media (max-width: 600px) {
+      body { padding: .75rem; }
+      header { padding-bottom: 1rem; }
+      #login { padding: 1rem; }
+      table, thead, tbody, tr, td { display: block; }
+      thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      tbody { padding: .55rem; }
+      tr { margin: .55rem 0; padding: .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
+      td, td:first-child, td:nth-child(2), td:nth-child(3) { width: auto; padding: .15rem 0; border: 0; }
+      .client-cell { padding-right: 5.5rem !important; }
+      .client-cell .state-badge { top: .15rem; right: 0; }
+      td::before { display: block; margin-bottom: .15rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; content: attr(data-label); }
+      td:first-child { font-size: 1.05rem; }
+      td:nth-child(2) { margin-top: .6rem; }
+      td:last-child { margin-top: .8rem; }
+      .actions { gap: .25rem; overflow-x: auto; padding-bottom: .2rem; }
+      .action-row { gap: .25rem; }
+      .action-row button { padding: .35rem .5rem; font-size: .76rem; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header id="page-header"><h1>Local control</h1><button id="logout" type="button" hidden>Sign out</button></header>
+    <section id="login"><form id="login-form"><label>Username<input name="username" autocomplete="username" required></label><label>Password<input name="password" type="password" autocomplete="current-password" required></label><button type="submit">Sign in</button></form></section>
+    <section id="controls" hidden><table><thead><tr><th>Client</th><th>Screen</th><th>Current Slide</th><th>Actions</th></tr></thead><tbody id="clients"></tbody></table></section>
+  </main>
+  <script>
+    (function () {
+      var login = document.getElementById('login');
+      var controls = document.getElementById('controls');
+      var pageHeader = document.getElementById('page-header');
+      var logout = document.getElementById('logout');
+      var clients = document.getElementById('clients');
+      var socket = null;
+      var reconnectTimer = null;
+      function request(url, options) {
+        return fetch(url, options || {}).then(function (response) {
+          return response.json().catch(function () { return {}; }).then(function (body) {
+            if (!response.ok) { throw new Error(body.error || 'Request failed.'); }
+            return body;
+          });
+        });
+      }
+      function showError(error) { console.error(error); }
+      function getActionClass(command, connection) {
+        if (command === 'reload') { return 'btn-danger'; }
+        if (command === 'previous' || command === 'next') { return 'btn-warning'; }
+        if (command === 'pause') { return 'btn-info'; }
+        return connection.blackout ? 'btn-success' : 'btn-secondary';
+      }
+      function getActionContent(command, connection) {
+        var icons = {
+          reload: '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>',
+          previous: '<path d="M.5 3.5A.5.5 0 0 0 0 4v8a.5.5 0 0 0 1 0V8.753l6.267 3.636c.54.313 1.233-.066 1.233-.697v-2.94l6.267 3.636c.54.314 1.233-.065 1.233-.696V4.308c0-.63-.693-1.01-1.233-.696L8.5 7.248v-2.94c0-.63-.692-1.01-1.233-.696L1 7.248V4a.5.5 0 0 0-.5-.5"/>',
+          next: '<path d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.753l-6.267 3.636c-.54.313-1.233-.066-1.233-.697v-2.94l-6.267 3.636C.693 12.703 0 12.324 0 11.693V4.308c0-.63.693-1.01 1.233-.696L7.5 7.248v-2.94c0-.63.693-1.01 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5"/>',
+          pause: connection.paused ? '<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>' : '<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/>',
+          blackout: connection.blackout ? '<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>' : '<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/><path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>'
+        };
+        var text = command === 'pause' ? (connection.paused ? 'Resume' : 'Pause') : command === 'blackout' ? (connection.blackout ? 'Restore' : 'Blackout') : '';
+        return '<span class="button-icon" aria-hidden="true"><svg viewBox="0 0 16 16" focusable="false">' + icons[command] + '</svg></span>' + text;
+      }
+      function addStateBadge(clientCell, connection) {
+        if (!connection.paused && !connection.blackout) { return; }
+        var badge = document.createElement('span');
+        badge.className = 'state-badge' + (connection.blackout ? ' blackout' : '');
+        badge.textContent = connection.blackout ? 'Blackout' : 'Paused';
+        badge.setAttribute('aria-label', connection.blackout ? 'Blackout' : 'Paused');
+        clientCell.appendChild(badge);
+      }
+      function updateConnectionRow(row, connection) {
+        var clientCell = row.children[0];
+        var stateBadge = clientCell.querySelector('.state-badge');
+        if (stateBadge) { stateBadge.remove(); }
+        addStateBadge(clientCell, connection);
+        var pauseButton = row.querySelector('button[data-command="pause"]');
+        pauseButton.className = 'local-action ' + getActionClass('pause', connection);
+        pauseButton.innerHTML = getActionContent('pause', connection);
+        pauseButton.setAttribute('aria-label', connection.paused ? 'Resume client' : 'Pause client');
+        pauseButton.title = connection.paused ? 'Resume client' : 'Pause client';
+        var blackoutButton = row.querySelector('button[data-command="blackout"]');
+        blackoutButton.className = 'local-action ' + getActionClass('blackout', connection);
+        blackoutButton.innerHTML = getActionContent('blackout', connection);
+        blackoutButton.setAttribute('aria-label', connection.blackout ? 'Restore client' : 'Blackout client');
+        blackoutButton.title = connection.blackout ? 'Restore client' : 'Blackout client';
+      }
+      function sendCommand(screen, connection, command, row) {
+        return request('/local-control/api/commands', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ slug: screen.slug, connectionId: connection.id, command: command }) })
+          .then(function () {
+            if (command === 'pause') { connection.paused = !connection.paused; }
+            if (command === 'blackout') { connection.blackout = !connection.blackout; }
+            updateConnectionRow(row, connection);
+          })
+          .catch(showError);
+      }
+      function render(state) {
+        login.hidden = true;
+        controls.hidden = false;
+        logout.hidden = false;
+        pageHeader.className = 'wide';
+        clients.textContent = '';
+        (state.screens || []).forEach(function (screen) {
+          (screen.connections || []).forEach(function (connection) {
+            var row = document.createElement('tr');
+            var clientCell = document.createElement('td');
+            clientCell.className = 'client-cell';
+            clientCell.dataset.label = 'Client';
+            clientCell.textContent = connection.clientName || connection.label || connection.clientId || 'Client';
+            addStateBadge(clientCell, connection);
+            row.appendChild(clientCell);
+            var screenCell = document.createElement('td');
+            screenCell.dataset.label = 'Screen';
+            screenCell.textContent = screen.name || screen.slug;
+            row.appendChild(screenCell);
+            var slideCell = document.createElement('td');
+            slideCell.dataset.label = 'Current Slide';
+            slideCell.textContent = connection.currentSlideTitle || 'No slide currently showing';
+            row.appendChild(slideCell);
+            var actionCell = document.createElement('td');
+            actionCell.dataset.label = 'Actions';
+            actionCell.className = 'actions';
+            [['Reload', 'Previous', 'Next'], ['Pause', 'Blackout']].forEach(function (labels) {
+              var actionRow = document.createElement('div');
+              actionRow.className = 'action-row';
+              labels.forEach(function (label) {
+                var action = document.createElement('button');
+                action.type = 'button';
+                action.dataset.command = label.toLowerCase();
+                action.className = 'local-action ' + getActionClass(label.toLowerCase(), connection);
+                action.innerHTML = getActionContent(label.toLowerCase(), connection);
+                action.setAttribute('aria-label', label + ' client');
+                action.title = label + ' client';
+                action.addEventListener('click', function () { sendCommand(screen, connection, label.toLowerCase(), row); });
+                actionRow.appendChild(action);
+              });
+              actionCell.appendChild(actionRow);
+            });
+            row.appendChild(actionCell);
+            clients.appendChild(row);
+          });
+        });
+      }
+      function load() {
+        request('/local-control/api/state').then(function (state) {
+          render(state);
+          connectSocket();
+        }).catch(function (error) {
+          if (error.message.indexOf('login') !== -1) { login.hidden = false; controls.hidden = true; logout.hidden = true; pageHeader.className = ''; }
+          else { showError(error); }
+        });
+      }
+      function scheduleReconnect() {
+        if (reconnectTimer || login.hidden === false) { return; }
+        reconnectTimer = window.setTimeout(function () {
+          reconnectTimer = null;
+          connectSocket();
+        }, 5000);
+      }
+      function connectSocket() {
+        if (!window.WebSocket || !login.hidden || (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING))) { return; }
+        var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        socket = new WebSocket(protocol + '//' + window.location.host + '/local-control/ws');
+        socket.onmessage = function (event) {
+          try {
+            var payload = JSON.parse(String(event.data || '{}'));
+            if (payload && payload.type === 'local-control-state') { render(payload.state); }
+          } catch (_error) {
+          }
+        };
+        socket.onclose = function () { socket = null; scheduleReconnect(); };
+        socket.onerror = function () { try { socket.close(); } catch (_error) {} };
+      }
+      document.getElementById('login-form').addEventListener('submit', function (event) {
+        event.preventDefault();
+        var data = new FormData(event.currentTarget);
+        request('/local-control/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: data.get('username'), password: data.get('password') }) }).then(load).catch(showError);
+      });
+      logout.addEventListener('click', function () { request('/local-control/api/logout', { method: 'POST' }).then(function () { location.reload(); }).catch(showError); });
+      load();
+      if (!window.WebSocket) { setInterval(load, 10000); }
+    }());
+  </script>
+</body>
+</html>`;
+  }
+
+  if (!app || !playerRuntime) {
+    throw new Error('createLocalControlService requires app and playerRuntime.');
+  }
+
+  if (server) {
+    server.on('upgrade', function (request, socket, head) {
+      let pathname = '';
+      try {
+        pathname = new URL(request.url, 'http://localhost').pathname;
+      } catch (_error) {
+        socket.destroy();
+        return;
+      }
+      if (pathname !== '/local-control/ws') {
+        return;
+      }
+      if (!getUserFromRequest(request)) {
+        socket.destroy();
+        return;
+      }
+      localControlWs.handleUpgrade(request, socket, head, function (ws) {
+        localControlWs.emit('connection', ws, request);
+      });
+    });
+    localControlWs.on('connection', function (socket) {
+      localControlSockets.add(socket);
+      getState().then(function (state) { sendState(socket, state); }).catch(function () {});
+      socket.on('close', function () { localControlSockets.delete(socket); });
+      socket.on('error', function () { localControlSockets.delete(socket); });
+    });
+    if (typeof playerRuntime.subscribeSnapshot === 'function') {
+      playerRuntime.subscribeSnapshot(broadcastState);
+    }
+  }
+
+  app.get('/local-control', function (req, res) {
+    res.set('Cache-Control', 'no-store');
+    res.type('html').send(renderPageV2());
+  });
+
+  app.post('/local-control/api/login', async function (req, res, next) {
+    try {
+      await loadCache();
+      if (!isCacheUsable()) {
+        return res.status(503).json({ error: 'Local control authorization is unavailable.' });
+      }
+      const username = String(req.body && req.body.username || '').trim();
+      const retryAfter = getLoginRateLimitRetryAfter(req, username);
+      if (retryAfter) {
+        res.set('Retry-After', String(retryAfter));
+        return res.status(429).json({ error: 'Too many local control login attempts. Try again later.' });
+      }
+      const user = cache.users.find(function (candidate) {
+        return candidate.username_hash === fingerprintUsername(username);
+      });
+      if (!user || !verifyPassword(String(req.body && req.body.password || ''), user)) {
+        recordLoginFailure(req, username);
+        return res.status(401).json({ error: 'Invalid local control credentials.' });
+      }
+      clearLoginFailures(req, username);
+      const token = createSessionToken();
+      sessions.set(hashSessionToken(token), { user: { id: user.id, name: user.name, username: user.username }, expiresAt: Date.now() + 12 * 60 * 60 * 1000 });
+      res.set('Set-Cookie', serializeCookie(sessionCookieName, token, 12 * 60 * 60 * 1000));
+      return res.json({ ok: true });
+    } catch (error) {
+      return next(error);
+    }
+  });
+
+  app.post('/local-control/api/logout', function (req, res) {
+    const cookies = parseCookies(req.headers && req.headers.cookie);
+    sessions.delete(hashSessionToken(String(cookies[sessionCookieName] || '').trim()));
+    res.set('Set-Cookie', serializeCookie(sessionCookieName, '', 0));
+    return res.json({ ok: true });
+  });
+
+  app.get('/local-control/api/state', requireLocalAuth, async function (_req, res, next) {
+    try {
+      return res.json(await getState());
+    } catch (error) {
+      return next(error);
+    }
+  });
+
+  app.post('/local-control/api/commands', requireLocalAuth, async function (req, res, next) {
+    try {
+      const body = req.body && typeof req.body === 'object' ? req.body : {};
+      const command = String(body.command || '').trim().toLowerCase();
+      const slug = String(body.slug || '').trim();
+      const connectionId = String(body.connectionId || '').trim();
+      if (!LOCAL_COMMANDS.has(command) || !slug || !connectionId) {
+        return res.status(400).json({ error: 'A valid local client command is required.' });
+      }
+      const sent = await playerRuntime.sendCommandToConnection(slug, connectionId, { command: command, screenSlug: slug, connectionId: connectionId });
+      if (!sent) {
+        return res.status(409).json({ error: 'Local client is not connected.' });
+      }
+      return res.json({ ok: true });
+    } catch (error) {
+      return next(error);
+    }
+  });
+
+  app.post('/api/internal/sync/player-control', function (req, res) {
+    if (!verifyRequestAuth(req)) {
+      return res.status(401).json({ error: 'Request authentication required.' });
+    }
+    return saveUsers(req.body && req.body.users).then(function () {
+      return res.json({ ok: true, syncedAt: cache.syncedAt, userCount: cache.users.length });
+    }).catch(function (error) {
+      return res.status(500).json({ error: error.message || 'Unable to save local control users.' });
+    });
+  });
+
+  return {
+    loadCache: loadCache,
+    saveUsers: saveUsers,
+    isCacheUsable: isCacheUsable,
+    getUserFromRequest: getUserFromRequest
+  };
+}
+
+module.exports = { createLocalControlService: createLocalControlService };

src/player/onboarding/index.js

@@ -1,20 +1,44 @@
 // Player onboarding routes and signup flow helpers.
 
 const express = require('express');
-const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
+const crypto = require('crypto');
+const { findAvailableClientName, withClientNameReservation } = require('#src/data/client-name-check');
 const { createStyledQrCodeSvg } = require('#src/data/qr-code');
-const { getSharedSecret, verifyPageAuthToken, createRequestAuthHeaders } = require('#src/request-auth');
+const { getSharedSecret, verifyPageAuthToken, verifyRequestAuth, createRequestAuthHeaders } = require('#src/request-auth');
 const { resolvePlayerRegistration, upsertPlayerRegistration: upsertPlayerRegistrationRecord } = require('#src/data/player-registry');
 const { isTransientDbError } = require('./store');
 
 const ONBOARDING_SIGNUP_LIMIT_WINDOW_MS = 5 * 60 * 1000;
 const ONBOARDING_SIGNUP_LIMIT_MAX_ATTEMPTS = 8;
+const PAIRING_CODE_LENGTH = 6;
+const PAIRING_CODE_TTL_MS = 15 * 60 * 1000;
+const PAIRING_CODE_ALPHABET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
 const onboardingSignupAttempts = new Map();
 
 function normalizeDeviceId(value) {
   return String(value || '').trim().replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 128);
 }
 
+function createPairingCode() {
+  const bytes = crypto.randomBytes(PAIRING_CODE_LENGTH);
+  let code = '';
+  for (let index = 0; index < PAIRING_CODE_LENGTH; index += 1) {
+    code += PAIRING_CODE_ALPHABET[bytes[index] % PAIRING_CODE_ALPHABET.length];
+  }
+  return code;
+}
+
+function createPairingSession(deviceId, clientId) {
+  return { deviceId: normalizeDeviceId(deviceId), clientId: normalizeDeviceId(clientId), code: createPairingCode(), expiresAt: Date.now() + PAIRING_CODE_TTL_MS };
+}
+
+function isValidOnboardingPairingCode(pairingSession, pairingCode, now) {
+  const suppliedCode = Buffer.from(String(pairingCode || '').trim().toUpperCase());
+  const expectedCode = Buffer.from(String(pairingSession && pairingSession.code || '').trim());
+  const currentTime = Number(now || Date.now());
+  return Boolean(pairingSession && pairingSession.deviceId && pairingSession.expiresAt > currentTime && suppliedCode.length === expectedCode.length && suppliedCode.length > 0 && crypto.timingSafeEqual(suppliedCode, expectedCode));
+}
+
 function getPublicBaseUrl(req, configuredUrl) {
   const forwardedProto = String(req.headers['x-forwarded-proto'] || '').trim().split(',')[0];
   const protocol = forwardedProto || (req.socket && req.socket.encrypted ? 'https' : 'http');
@@ -24,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;
 }
 
@@ -51,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;
 }
 
@@ -120,8 +144,8 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
     }
     const screen = screenRows[0];
 
-    const available = await isClientNameAvailable(pool, normalizedClientName, normalizedDeviceId, liveConnections);
+    const selectedClientName = await findAvailableClientName(pool, normalizedClientName, normalizedDeviceId, liveConnections);
-    if (!available) {
+    if (!selectedClientName) {
       const error = new Error('Client name already exists.');
       error.statusCode = 400;
       throw error;
@@ -129,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)
@@ -139,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);
@@ -214,9 +238,41 @@ 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;
+  const pairingSessions = new Map();
+
+  function getPairingSession(deviceId, clientId) {
+    const normalizedDeviceId = normalizeDeviceId(deviceId) || playerDeviceId;
+    if (!normalizedDeviceId) {
+      return null;
+    }
+    const sessionKey = `${normalizedDeviceId}:${normalizeDeviceId(clientId) || 'default'}`;
+    let pairingSession = pairingSessions.get(sessionKey);
+    if (!isValidOnboardingPairingCode(pairingSession, pairingSession && pairingSession.code)) {
+      pairingSession = createPairingSession(normalizedDeviceId, clientId);
+      pairingSessions.set(sessionKey, pairingSession);
+    }
+    if (onPairingCode) {
+      onPairingCode(pairingSession.code, Array.from(pairingSessions.entries()).filter(function (entry) {
+        return isValidOnboardingPairingCode(entry[1], entry[1] && entry[1].code);
+      }).map(function (entry) {
+                return { deviceId: entry[1].deviceId, clientId: entry[1].clientId || null, code: entry[1].code };
+      }));
+    }
+    return pairingSession;
+  }
+
+  function findPairingSession(pairingCode) {
+    for (const [deviceId, pairingSession] of pairingSessions.entries()) {
+      if (isValidOnboardingPairingCode(pairingSession, pairingCode)) {
+        return { deviceId: pairingSession.deviceId, session: pairingSession };
+      }
+    }
+    return null;
+  }
 
   if (!app || !common) {
     throw new Error('registerPlayerOnboardingRoutes requires app and common.');
@@ -289,15 +345,71 @@ function registerPlayerOnboardingRoutes(app, options) {
     next();
   }
 
-  app.get('/', function (_req, res) {
+  function requireOnboardingAuth(req, res, next) {
+    if (!sharedSecret) {
+      return next();
+    }
+
+    const pageToken = String(req.headers['x-pulse-page-auth'] || '').trim();
+    const pagePayload = verifyPageAuthToken(pageToken);
+    if (pagePayload && String(pagePayload.scope || '').trim() === 'onboarding') {
+      req.playerPageAuth = pagePayload;
+      return next();
+    }
+
+    if (verifyRequestAuth(req)) {
+      return next();
+    }
+
+    return res.status(401).json({ error: 'Onboarding authentication required.' });
+  }
+
+  app.get('/', async function (req, res, next) {
     res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
-    res.send(common.renderPlayerOnboardingLandingPage());
+    try {
+      const deviceId = normalizeDeviceId(req.query && req.query.clientId);
+      let status = null;
+      if (deviceId) {
+        if (bridgeBaseUrl) {
+          const response = await fetchThinClient(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(deviceId), {
+            method: 'GET'
+          });
+          status = await readJsonResponse(response);
+        } else {
+          status = await getOnboardingStatus(pool, deviceId);
+        }
+      }
+      const screenId = status && (status.screen_id || status.screenId);
+      const screenSlug = status && (status.screen_slug || status.screenSlug);
+      if (screenId && screenSlug) {
+        return res.redirect('/screen/' + encodeURIComponent(screenSlug));
+      }
+      res.send(common.renderPlayerOnboardingLandingPage({ pairingCode: '' }));
+    } catch (error) {
+      next(error);
+    }
   });
 
   app.get('/onboard', async function (req, res, next) {
     res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
     try {
-      res.send(common.renderPlayerOnboardingFormPage(String(req.query.deviceId || playerDeviceId || '').trim()));
+      const deviceId = playerDeviceId;
+      const onboardingBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '') || getPublicBaseUrl(req, playerPublicUrl);
+      const clientId = normalizeDeviceId(req.query.clientId);
+      const pairingSession = getPairingSession(deviceId, clientId);
+      const pairingParams = [];
+      if (pairingSession && pairingSession.code) {
+        pairingParams.push(`code=${encodeURIComponent(pairingSession.code)}`);
+      }
+      const pairingQuery = pairingParams.length ? `?${pairingParams.join('&')}` : '';
+      if (bridgeBaseUrl && pairingSession && pairingSession.code) {
+        const response = await fetchThinClient(req, `/api/onboarding/url?pairingCode=${encodeURIComponent(pairingSession.code)}`);
+        const payload = await readJsonResponse(response);
+        if (payload && payload.url) {
+          return res.redirect(String(payload.url));
+        }
+      }
+      return res.redirect(`${onboardingBaseUrl}/pairing${pairingQuery}`);
     } catch (error) {
       next(error);
     }
@@ -315,7 +427,7 @@ function registerPlayerOnboardingRoutes(app, options) {
     next();
   }, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+      const deviceId = normalizeDeviceId(req.query.deviceId || req.query.clientId);
       if (bridgeBaseUrl) {
         const response = await fetchThinClient(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(deviceId || ''), {
           method: 'GET'
@@ -347,6 +459,26 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
+  app.get('/api/onboarding/resolve', requireOnboardingAuth, function (req, res) {
+    const pairingCode = String(req.query.pairingCode || '').trim();
+    const pairing = findPairingSession(pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    res.json({ deviceId: pairing.deviceId, clientId: pairing.session.clientId || null });
+  });
+
+  app.get('/api/onboarding/session', requireOnboardingPageAuth, function (req, res) {
+    const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+    const clientId = normalizeDeviceId(req.query.clientId);
+    const pairingSession = getPairingSession(deviceId, clientId);
+    if (!pairingSession) {
+      return res.status(503).json({ error: 'Player identity is unavailable.' });
+    }
+    res.set('Cache-Control', 'no-store');
+    res.json({ deviceId: deviceId, pairingCode: pairingSession.code });
+  });
+
   app.get('/api/onboarding/screens', requireOnboardingPageAuth, async function (_req, res, next) {
     try {
       if (bridgeBaseUrl) {
@@ -366,14 +498,40 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
+
   app.get('/api/onboarding/qr', async function (req, res, next) {
     try {
       const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+      const clientId = normalizeDeviceId(req.query.clientId);
       if (!deviceId) {
         return res.status(400).json({ error: 'Device ID is required' });
       }
-      const onboardingUrl = `${getPublicBaseUrl(req, playerPublicUrl)}/onboard?deviceId=${encodeURIComponent(deviceId)}`;
+      const pairingSession = getPairingSession(deviceId, clientId);
-      const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 });
+      if (!pairingSession) {
+        return res.status(503).json({ error: 'Pairing session is unavailable.' });
+      }
+      if (bridgeBaseUrl) {
+        const response = await fetchThinClient(req, `/api/onboarding/qr?pairingCode=${encodeURIComponent(pairingSession.code)}`);
+        if (response && response.ok) {
+          const svg = await response.text();
+          res.set('Content-Type', response.headers.get('content-type') || 'image/svg+xml; charset=utf-8');
+          res.set('Cache-Control', 'no-store');
+          return res.send(svg);
+        }
+      }
+      const onboardingBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '') || getPublicBaseUrl(req, playerPublicUrl);
+      const onboardingUrl = `${onboardingBaseUrl}/pairing?code=${encodeURIComponent(pairingSession.code)}`;
+      const svg = await createStyledQrCodeSvg({
+        value: onboardingUrl,
+        qr_margin: 20,
+        qr_dots_type: 'dots',
+        qr_dots_color: '#f4f8f5',
+        qr_corners_square_type: 'dot',
+        qr_corners_square_color: '#f4f8f5',
+        qr_corners_dot_type: 'dot',
+        qr_corners_dot_color: '#f0bd70',
+        qr_background_transparent: true
+      });
       res.set('Content-Type', 'image/svg+xml; charset=utf-8');
       res.set('Cache-Control', 'no-store');
       res.send(svg);
@@ -382,20 +540,28 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
-  app.post('/api/onboarding', requireOnboardingPageAuth, express.json(), async function (req, res, next) {
+  app.post('/api/onboarding', express.json(), requireOnboardingAuth, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.body && req.body.deviceId) || playerDeviceId;
+      const deviceId = playerDeviceId;
       const clientName = String((req.body && req.body.clientName) || '').trim();
       const screenSlug = String((req.body && req.body.screenSlug) || '').trim();
+      const pairingCode = String((req.body && req.body.pairingCode) || '').trim();
+      const clientId = normalizeDeviceId(req.body && req.body.clientId);
       const retryAfterSeconds = isOnboardingSignupRateLimited(req, deviceId);
       if (retryAfterSeconds) {
         res.set('Retry-After', String(retryAfterSeconds));
         return res.status(429).json({ error: 'Too many onboarding attempts. Please try again later.' });
       }
 
+      const pairing = findPairingSession(pairingCode);
+      const pairingSession = pairing && pairing.session;
+      if (!isValidOnboardingPairingCode(pairingSession, pairingCode)) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+      }
+
       if (bridgeBaseUrl) {
         const forwardedBody = Object.assign({}, req.body || {}, {
-          deviceId: deviceId
+          clientId: clientId || null
         });
         const response = await fetch(new URL('/api/onboarding', bridgeBaseUrl).toString(), {
           method: 'POST',
@@ -413,6 +579,10 @@ function registerPlayerOnboardingRoutes(app, options) {
         if (!payload) {
           return res.status(502).json({ error: 'Player bridge returned an invalid response.' });
         }
+        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);
       }
@@ -426,8 +596,12 @@ function registerPlayerOnboardingRoutes(app, options) {
         return res.status(400).json({ error: 'Screen is required' });
       }
 
-      const status = await bindDeviceToScreen(pool, deviceId, clientName, screenSlug, playerRuntime.isClientNameAvailableOnScreen, playerRuntime, onboardingStore);
+      if (!clientId) {
-      await bindPlayerToScreen(pool, deviceId, screenSlug);
+        return res.status(400).json({ error: 'Client ID is required' });
+      }
+      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,
@@ -456,5 +630,6 @@ module.exports = {
   upsertPlayerRegistration: upsertPlayerRegistration,
   bindPlayerToScreen: bindPlayerToScreen,
   bindDeviceToScreen: bindDeviceToScreen,
+  isValidOnboardingPairingCode: isValidOnboardingPairingCode,
   registerPlayerOnboardingRoutes: registerPlayerOnboardingRoutes
 };

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

@@ -65,10 +65,11 @@
       var formData = new FormData(form);
       var clientName = String(formData.get("clientName") || "").trim();
       var screenSlug = String(formData.get("screenSlug") || "").trim();
+      var pairingCode = String(formData.get("pairingCode") || "").trim();
       if (!clientName) { setMessage("Client name is required."); return; }
       if (!screenSlug) { setMessage("Screen is required."); return; }
       setMessage("Saving client...");
-      var payload = { clientName: clientName, screenSlug: screenSlug };
+      var payload = { clientName: clientName, screenSlug: screenSlug, pairingCode: pairingCode };
       if (deviceId) {
         payload.deviceId = deviceId;
       }

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

@@ -13,23 +13,12 @@
     }
     var screenKey = "pulse-signage-player-screen-slug";
     var qr = document.getElementById("onboarding-qr");
-    var status = document.getElementById("onboarding-status");
+    var pairingCodeElement = document.getElementById("onboarding-pairing-code");
-    var localForm = document.getElementById("onboarding-local-form");
-    var localMessage = document.getElementById("onboarding-message");
-    var localScreenSelect = document.getElementById("onboarding-screen-select");
     var qrPlaceholderSrc = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E";
-    function parseResponseError(response) {
-      return response.text().then(function (text) {
-        var fallbackMessage = text && text.trim() ? text.trim() : "Unable to save onboarding.";
-        try {
-          var payload = JSON.parse(text);
-          return payload && payload.error ? payload.error : fallbackMessage;
-        } catch (_error) {
-          return fallbackMessage;
-        }
-      });
-    }
     function getDeviceId() {
+      var configuredDeviceId = document.getElementById("onboarding-shell");
+      configuredDeviceId = configuredDeviceId ? String(configuredDeviceId.getAttribute("data-player-device-id") || "").trim() : "";
+      if (configuredDeviceId) { return configuredDeviceId; }
       var stored = "";
       try { stored = window.sessionStorage.getItem(deviceKey) || ""; } catch (_error) { stored = ""; }
       if (stored) { return stored; }
@@ -37,71 +26,50 @@
       try { window.sessionStorage.setItem(deviceKey, next); } catch (_error2) {}
       return next;
     }
-    function setStatus(message) { if (status) { status.textContent = message; } }
+    function loadQr(deviceId, clientId) {
-    function setLocalMessage(message) { if (localMessage) { localMessage.textContent = message || ""; } }
-    function setSelectOptions(select, screens, selectedSlug) {
-      if (!select) { return; }
-      while (select.firstChild) { select.removeChild(select.firstChild); }
-      var placeholder = document.createElement("option");
-      placeholder.value = "";
-      placeholder.textContent = "Select a screen";
-      select.appendChild(placeholder);
-      (Array.isArray(screens) ? screens : []).forEach(function (screen) {
-        var option = document.createElement("option");
-        option.value = String(screen && screen.slug ? screen.slug : "");
-        option.textContent = String(screen && (screen.name || screen.slug) ? (screen.name || screen.slug) : "Screen");
-        if (selectedSlug && String(option.value) === String(selectedSlug)) {
-          option.selected = true;
-        }
-        select.appendChild(option);
-      });
-    }
-    function loadScreens(selectedSlug) {
-      return fetch("/api/onboarding/screens", { cache: "no-store" })
-        .then(function (response) { return response.ok ? response.json() : null; })
-        .then(function (payload) {
-          var screens = payload && Array.isArray(payload.screens) ? payload.screens : [];
-          setSelectOptions(localScreenSelect, screens, selectedSlug);
-          return screens;
-        })
-        .catch(function () { setSelectOptions(localScreenSelect, [], selectedSlug); return []; });
-    }
-    function loadQr(deviceId) {
       if (!qr) { return; }
       qr.onerror = function () {
         qr.src = qrPlaceholderSrc;
       };
-      qr.src = "/api/onboarding/qr?deviceId=" + encodeURIComponent(deviceId);
+      qr.src = "/api/onboarding/qr?deviceId=" + encodeURIComponent(deviceId) + "&clientId=" + encodeURIComponent(clientId);
     }
-    function submitOnboarding(deviceId, clientName, screenSlug) {
+    function loadPairingSession(deviceId, clientId) {
-      return fetch("/api/onboarding", {
+      return fetch("/api/onboarding/session?deviceId=" + encodeURIComponent(deviceId) + "&clientId=" + encodeURIComponent(clientId), { cache: "no-store" })
-        method: "POST",
+        .then(function (response) { return response.ok ? response.json() : null; })
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify({ deviceId: deviceId, clientName: clientName, screenSlug: screenSlug })
-      })
-        .then(function (response) {
-          if (response.ok) {
-            return response.json();
-          }
-          return parseResponseError(response).then(function (messageText) {
-            throw new Error(messageText);
-          });
-        })
         .then(function (payload) {
-          if (!payload || !payload.screenSlug) { throw new Error("Unable to save onboarding."); }
+          if (payload && payload.pairingCode && pairingCodeElement) {
-          if (payload.clientName) { setSessionStorageItem(clientNameKey, payload.clientName); }
+            pairingCodeElement.textContent = payload.pairingCode;
-          if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
+          }
-          try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
+          return payload;
-          setLocalMessage("Onboarding complete.");
+        })
-          if (localForm) {
+        .catch(function () { return null; });
-            Array.prototype.slice.call(localForm.querySelectorAll("input, select, button")).forEach(function (control) {
+    }
-              control.disabled = true;
+    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; }
+      var next = (window.crypto && window.crypto.randomUUID ? window.crypto.randomUUID() : "client-" + Date.now() + "-" + Math.random().toString(16).slice(2));
+      setSessionStorageItem("pulse-signage-player-client-id", next);
+      return next;
+    }
     function redirectIfOnboarded(deviceId) {
-      return fetch("/api/onboarding/status?deviceId=" + encodeURIComponent(deviceId), { cache: "no-store" })
+      var bindingId = getClientId() || deviceId;
+      return fetch("/api/onboarding/status?deviceId=" + encodeURIComponent(bindingId), { cache: "no-store" })
         .then(function (response) { return response.ok ? response.json() : null; })
         .then(function (payload) {
           if (payload && payload.onboarded && payload.screenSlug) {
@@ -115,37 +83,14 @@
         })
         .catch(function () { return false; });
     }
+    var clientId = getClientId();
     var deviceId = getDeviceId();
-    if (localForm) {
-      localForm.addEventListener("submit", function (event) {
-        event.preventDefault();
-        var formData = new FormData(localForm);
-        var clientName = String(formData.get("clientName") || "").trim();
-        var screenSlug = String(formData.get("screenSlug") || "").trim();
-        if (!clientName) { setLocalMessage("Client name is required."); return; }
-        if (!screenSlug) { setLocalMessage("Screen is required."); return; }
-        setLocalMessage("Saving client...");
-        submitOnboarding(deviceId, clientName, screenSlug).catch(function (error) {
-          setLocalMessage(error && error.message ? error.message : "Unable to save onboarding.");
-        });
-      });
-    }
-    loadScreens().then(function () {
-      try {
-        var storedClientName = getSessionStorageItem(clientNameKey) || "";
-        if (storedClientName && localForm) {
-          var clientNameInput = localForm.querySelector("input[name=\"clientName\"]");
-          if (clientNameInput) { clientNameInput.value = storedClientName; }
-        }
-      } catch (_error) {}
-    });
     redirectIfOnboarded(deviceId).then(function (redirected) {
       if (redirected) { return; }
       if (qr && !qr.getAttribute("src")) {
         qr.src = qrPlaceholderSrc;
       }
-      loadQr(deviceId);
+        keepPairingSessionLoaded(deviceId, clientId);
-      setStatus("Waiting for onboarding to finish.");
       window.setInterval(function () { redirectIfOnboarded(deviceId); }, 2000);
     });
   }());

src/player/player-client-name.script.html

@@ -90,7 +90,7 @@
       });
     }).then(function (payload) {
       var serverName = payload && payload.clientName ? String(payload.clientName).trim() : '';
-      if (serverName) {
+      if (serverName && !getOnboardingClientName()) {
         applyOnboardingClientName(serverName, null);
       }
       return onboardingClientName || getOnboardingClientName();

src/player/player-page-announcements.js

@@ -131,6 +131,9 @@
     if (window.__pulsePageAuthToken) {
       request.setRequestHeader('x-pulse-page-auth', window.__pulsePageAuthToken);
     }
+    if (typeof getCommandClientId === 'function') {
+      request.setRequestHeader('x-pulse-client-id', getCommandClientId());
+    }
     if (announcementEtag) {
       request.setRequestHeader('If-None-Match', announcementEtag);
     }

src/player/player-page.script.html

@@ -1,41 +1,11 @@
+<!-- Player page bootstrap and browser-side playback lifecycle. -->
+
 <script>
   const slug = {{SLUG_JSON}};
-  const initialData = {{INITIAL_DATA_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,9 +42,10 @@
   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:' + slug;
+  const commandClientStorageKey = 'pulse-signage-player-client-id';
   const playlistSnapshotStorageKey = 'pulse-signage-player-playlist-snapshot:' + slug;
   const initialPlaylistSnapshot = loadPlaylistSnapshot();
   let offlineBanner = null;
@@ -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.
@@ -181,10 +160,6 @@
     releaseScreenWakeLock();
   });
 
-  if (initialPlaylistSnapshot && initialPlaylistSnapshot.slides.length) {
-    applyPlaylistSnapshot(initialPlaylistSnapshot);
-  }
-
   if (slides.length) {
     if (!currentPlaylistSignature) {
       currentPlaylistSignature = getPlaylistRevision(initialData && initialData.slides ? initialData : { slides: slides });
@@ -208,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/playlist.js

@@ -1,6 +1,7 @@
 // Player playlist assembly, snapshot persistence, and playlist revision helpers.
 
 const crypto = require('crypto');
+const { convertWeatherSnapshot } = require('#src/data/weather-units');
 const fs = require('fs');
 const path = require('path');
 const { createStyledQrCodeDataUrl } = require('../data/qr-code');
@@ -9,6 +10,8 @@ function createPlayerPlaylistService(options) {
   const pool = options && options.pool ? options.pool : null;
   const common = options && options.common ? options.common : null;
   const snapshotDir = options && options.snapshotDir ? options.snapshotDir : null;
+  const mediaDir = options && options.mediaDir ? path.resolve(String(options.mediaDir)) : null;
+  const remoteImageCacheDir = mediaDir ? path.join(mediaDir, 'player-cache', 'remote-images') : null;
 
   if (!pool) {
     throw new Error('pool is required');
@@ -61,11 +64,110 @@ function createPlayerPlaylistService(options) {
     return createStyledQrCodeDataUrl(value);
   }
 
+  function getPlaceholderImageExpressions(value, output) {
+    const expressions = output || [];
+    const source = String(value || '');
+    const pattern = /\{\{\s*([^{}]*?\.image\s*\([^{}]*\)[^{}]*?)\s*\}\}/gi;
+    let match = null;
+    while ((match = pattern.exec(source))) {
+      expressions.push(String(match[1] || '').trim());
+    }
+    return expressions;
+  }
+
+  function resolvePathValue(value, expression) {
+    const parsed = String(expression || '').replace(/\.image\s*\([^)]*\)\s*$/i, '').trim();
+    return parsed.split('.').reduce(function (current, segment) {
+      return current === undefined || current === null ? '' : current[segment];
+    }, value);
+  }
+
+  function getApiItems(responseJson, itemsPath) {
+    let current = responseJson;
+    const pathValue = String(itemsPath || '').trim();
+    if (pathValue) {
+      pathValue.split('.').forEach(function (segment) {
+        current = current === undefined || current === null ? '' : current[segment];
+      });
+      return Array.isArray(current) ? current : [];
+    }
+    if (Array.isArray(responseJson)) return responseJson;
+    if (responseJson && Array.isArray(responseJson.items)) return responseJson.items;
+    if (responseJson && Array.isArray(responseJson.results)) return responseJson.results;
+    if (responseJson && Array.isArray(responseJson.data)) return responseJson.data;
+    return responseJson ? [responseJson] : [];
+  }
+
+  async function cacheRemoteImage(url) {
+    const remoteUrl = String(url || '').trim();
+    if (!remoteImageCacheDir || !/^https?:\/\//i.test(remoteUrl)) return '';
+    const hash = crypto.createHash('sha256').update(remoteUrl).digest('hex');
+    await fs.promises.mkdir(remoteImageCacheDir, { recursive: true });
+    const existing = (await fs.promises.readdir(remoteImageCacheDir)).find(function (name) { return name.startsWith(hash + '.'); });
+    if (existing) return '/media/player-cache/remote-images/' + existing;
+    try {
+      const response = await fetch(remoteUrl, { signal: AbortSignal.timeout(15000) });
+      if (!response.ok || !String(response.headers.get('content-type') || '').toLowerCase().startsWith('image/')) return '';
+      const bytes = Buffer.from(await response.arrayBuffer());
+      if (bytes.length > 10 * 1024 * 1024) return '';
+      const contentType = String(response.headers.get('content-type') || '').toLowerCase();
+      const extension = contentType.includes('svg') ? '.svg' : contentType.includes('png') ? '.png' : contentType.includes('webp') ? '.webp' : contentType.includes('gif') ? '.gif' : '.jpg';
+      const fileName = hash + extension;
+      const filePath = path.join(remoteImageCacheDir, fileName);
+      await fs.promises.writeFile(filePath, bytes);
+      return '/media/player-cache/remote-images/' + fileName;
+    } catch (_error) {
+      return '';
+    }
+  }
+
+  async function cachePlaceholderImages(slides, rssFeeds, apiSources) {
+    if (!remoteImageCacheDir) return;
+    const usedPaths = new Set();
+    const allSlideRows = await pool.query('SELECT content_json FROM c_slides').then(function (result) { return result[0] || []; });
+    const allContents = allSlideRows.map(function (row) { return common.parseJsonSafe(row.content_json) || {}; });
+    const sourceContent = allContents.concat((slides || []).map(function (slide) { return slide.content || {}; }));
+    const cacheSource = async function (source, item, expressions) {
+      if (!source || !item) return;
+      for (const expression of expressions) {
+        const remoteUrl = String(resolvePathValue(item, expression) || '').trim();
+        const localPath = await cacheRemoteImage(remoteUrl);
+        if (localPath) {
+          source.imageCache = source.imageCache || {};
+          source.imageCache[remoteUrl] = localPath;
+          usedPaths.add(localPath);
+        }
+      }
+    };
+    for (const content of sourceContent) {
+      for (const key of Object.keys(content || {})) {
+        const region = content[key];
+        if (!region || typeof region !== 'object') continue;
+        const expressions = getPlaceholderImageExpressions(region.value, []);
+        if (!expressions.length) continue;
+        const itemNumber = Math.max(1, Number(region.item_number || 1)) - 1;
+        if (String(region.type || '').toLowerCase() === 'api') {
+          const source = (apiSources || []).find(function (entry) { return Number(entry.id) === Number(region.source_id); });
+          const items = source ? getApiItems(source.responseJson, region.items_path) : [];
+          await cacheSource(source, items[itemNumber], expressions);
+        }
+        if (String(region.type || '').toLowerCase() === 'rss') {
+          const feed = (rssFeeds || []).find(function (entry) { return Number(entry.id) === Number(region.feed_id); });
+          await cacheSource(feed, feed && feed.items && feed.items[itemNumber], expressions);
+        }
+      }
+    }
+    const files = await fs.promises.readdir(remoteImageCacheDir).catch(function () { return []; });
+    await Promise.all(files.filter(function (file) { return !usedPaths.has('/media/player-cache/remote-images/' + file); }).map(function (file) {
+      return fs.promises.unlink(path.join(remoteImageCacheDir, file)).catch(function () {});
+    }));
+  }
+
   async function buildScreenPlaylist(slug) {
     try {
       const [screenRows] = await pool.query('SELECT id, name, slug, playlist_id, created_at, modified_at, created_by, modified_by FROM d_screens WHERE slug = ?', [slug]);
       if (!screenRows.length) {
-        return { screen: null, playlist: null, slides: [], rssFeeds: [], apiSources: [], timetableGroups: [] };
+        return { screen: null, playlist: null, slides: [], rssFeeds: [], apiSources: [], timetableGroups: [], weatherLocations: [] };
       }
 
       const screen = screenRows[0];
@@ -77,6 +179,7 @@ function createPlayerPlaylistService(options) {
           rssFeeds: [],
           apiSources: [],
           timetableGroups: [],
+          weatherLocations: [],
           revision: getPlaylistRevision(screen, null, [], [], [], [], [], [])
         };
         await writeSnapshot(slug, payloadWithoutPlaylist);
@@ -120,7 +223,7 @@ function createPlayerPlaylistService(options) {
       let regionRows = [];
       if (templateIds.length) {
         [templateRows] = await pool.query(`
-                SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+                SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
                  cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height, cs.width AS canvas_width, cs.height AS canvas_height
           FROM c_templates st
           LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -241,8 +344,25 @@ function createPlayerPlaylistService(options) {
         timetableGroups = Array.isArray(timetableData && timetableData.timetableGroups) ? timetableData.timetableGroups : [];
       }
 
-      const revision = getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups);
+      let weatherLocations = [];
-      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, timetableGroups: timetableGroups, revision: revision };
+      if (typeof common.fetchWeatherLocationsData === 'function') {
+        const weatherData = await common.fetchWeatherLocationsData(pool);
+        weatherLocations = (weatherData.weatherLocations || []).map(function (location) {
+          const responseJson = common.parseJsonSafe ? common.parseJsonSafe(location.last_response_json) : null;
+          return Object.assign({}, location, {
+            responseJson: convertWeatherSnapshot(responseJson, {
+              temperature: location.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius',
+              wind: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'ms' : 'kmh',
+              precipitation: location.precipitation_unit === 'inch' ? 'inch' : 'mm'
+            })
+          });
+        });
+      }
+
+      await cachePlaceholderImages(slides, rssFeeds, apiSources);
+
+      const revision = getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups, weatherLocations);
+      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, timetableGroups: timetableGroups, weatherLocations: weatherLocations, revision: revision };
       await writeSnapshot(slug, payload);
       return payload;
     } catch (error) {
@@ -259,7 +379,7 @@ function createPlayerPlaylistService(options) {
     hash.update('\0');
   }
 
-  function getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups) {
+  function getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups, weatherLocations) {
     const hash = crypto.createHash('sha1');
 
     updatePlaylistRevisionHash(hash, screen && screen.id);
@@ -302,6 +422,8 @@ function createPlayerPlaylistService(options) {
       updatePlaylistRevisionHash(hash, template.canvas_size_height);
       updatePlaylistRevisionHash(hash, template.background_image_path);
       updatePlaylistRevisionHash(hash, template.background_color);
+      updatePlaylistRevisionHash(hash, template.background_gradient);
+      updatePlaylistRevisionHash(hash, template.background_gradient);
       updatePlaylistRevisionHash(hash, template.modified_at);
     });
 
@@ -323,6 +445,7 @@ function createPlayerPlaylistService(options) {
     updatePlaylistRevisionHash(hash, JSON.stringify(rssFeeds || []));
     updatePlaylistRevisionHash(hash, JSON.stringify(apiSources || []));
     updatePlaylistRevisionHash(hash, JSON.stringify(timetableGroups || []));
+    updatePlaylistRevisionHash(hash, JSON.stringify(weatherLocations || []));
 
     return hash.digest('hex');
   }

src/player/public/css/player.css

@@ -11,9 +11,9 @@ body {
 
 body.onboarding-page {
   background:
-    radial-gradient(circle at top, rgba(82, 144, 255, 0.28), transparent 32%),
+    radial-gradient(circle at 78% 20%, rgba(55, 195, 178, 0.16), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.18), transparent 26%),
+    radial-gradient(circle at 12% 90%, rgba(237, 177, 89, 0.12), transparent 30%),
-    linear-gradient(160deg, #09111f 0%, #0b1323 52%, #111827 100%);
+    linear-gradient(145deg, #07131b 0%, #0b2028 58%, #10252a 100%);
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -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%;
@@ -47,15 +32,83 @@ body.thumbnail-preview .player-offline-banner {
   position: relative;
 }
 
+.api-progress {
+  --bs-progress-height: 1rem;
+  --bs-progress-font-size: 0.75rem;
+  --bs-border-radius: 0.375rem;
+  --bs-progress-border-radius: 0.375rem;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--bs-progress-height);
+  overflow: hidden;
+  font-size: var(--bs-progress-font-size);
+  border-radius: var(--bs-progress-border-radius);
+}
+
+.api-progress > .progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #0d6efd;
+}
+
+.api-progress > .progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: var(--bs-progress-height) var(--bs-progress-height);
+}
+
+.api-progress > .progress-bar-animated {
+  animation: api-progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes api-progress-bar-stripes {
+  from { background-position-x: var(--bs-progress-height); }
+  to { background-position-x: 0; }
+}
+
 .onboarding-shell {
-  min-height: 100vh;
+  min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: clamp(16px, 3vw, 40px);
+  padding: clamp(24px, 5vw, 72px);
   box-sizing: border-box;
 }
 
+.onboarding-stage {
+  width: min(100%, 1160px);
+}
+
+.onboarding-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 10px;
+}
+
+.onboarding-brand-mark {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 13px;
+  background: #f0bd70;
+  color: #10252a;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.onboarding-label {
+  margin: 3px 0 0;
+  color: #8faeb0;
+  font-size: 0.88rem;
+}
+
 .onboarding-card {
   width: min(100%, 1040px);
   padding: clamp(20px, 3vw, 40px);
@@ -73,14 +126,35 @@ body.thumbnail-preview .player-offline-banner {
   line-height: 1.05;
 }
 
+.onboarding-stage h1 {
+  max-width: 560px;
+  font-size: clamp(2.5rem, 5vw, 5rem);
+  letter-spacing: 0;
+}
+
+.onboarding-stage--landing h1 {
+  max-width: 500px;
+  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
+  line-height: 1.08;
+}
+
 .onboarding-kicker {
   margin: 0 0 12px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
-  color: #8ab4ff;
+  color: #f0bd70;
   font-size: 0.82rem;
 }
 
+.onboarding-step {
+  margin: 0 0 18px;
+  color: #70d0c2;
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 .onboarding-copy {
   margin: 0 0 28px;
   color: #cbd5e1;
@@ -90,36 +164,123 @@ body.thumbnail-preview .player-offline-banner {
 
 .onboarding-layout {
   display: grid;
-  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
+  grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr);
   gap: clamp(20px, 3vw, 32px);
   align-items: stretch;
 }
 
+.onboarding-copy-panel {
+  display: flex;
+  grid-column: 1;
+  grid-row: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.onboarding-instructions {
+  display: grid;
+  gap: 14px;
+  max-width: 440px;
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: setup-step;
+}
+
+.onboarding-instructions li {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 10px;
+  color: #b7cccd;
+  font-size: 0.96rem;
+  line-height: 1.35;
+  counter-increment: setup-step;
+}
+
+.onboarding-instructions li::before {
+  content: counter(setup-step);
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(112, 208, 194, 0.55);
+  border-radius: 50%;
+  color: #70d0c2;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.onboarding-pin-block {
+  margin-top: 28px;
+}
+
+.onboarding-pin-label {
+  display: block;
+  margin-bottom: 10px;
+  color: #8faeb0;
+  font-size: 0.92rem;
+}
+
+.onboarding-pin-label strong { color: #f0bd70; }
+
+.onboarding-pin {
+  display: block;
+  color: #f4f8f5;
+  font-size: clamp(1.7rem, 3vw, 2.8rem);
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  line-height: 1;
+}
+
 .onboarding-qr-pane {
   display: grid;
-  gap: 16px;
+  width: min(100%, 420px);
+  grid-column: 2;
+  grid-row: 1;
+  gap: 0;
   align-content: start;
+  justify-self: center;
 }
 
 .onboarding-qr-frame {
   display: flex;
+  width: min(100%, 420px);
+  aspect-ratio: 1;
+  box-sizing: border-box;
   justify-content: center;
-  padding: 22px;
+  align-items: center;
-  border-radius: 26px;
+  justify-self: center;
-  background: rgba(255, 255, 255, 0.04);
+  padding: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 22px;
+  background: rgba(7, 19, 27, 0.7);
+  border: 1px solid rgba(244, 248, 245, 0.42);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
 }
 
 .onboarding-qr-frame img {
-  width: min(100%, 320px);
+  width: min(100%, 390px);
   aspect-ratio: 1;
   display: block;
-  background: #fff;
+  background: transparent;
-  border-radius: 18px;
+  border-radius: 16px;
-  padding: 16px;
+  padding: 12px;
   box-sizing: border-box;
 }
 
+.onboarding-qr-caption {
+  margin: 6px 0 0;
+  color: #8faeb0;
+  font-size: 0.92rem;
+  text-align: center;
+}
+
+.onboarding-brand-title {
+  margin-bottom: 10px;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
 .onboarding-form {
   display: grid;
   gap: 14px;
@@ -181,14 +342,14 @@ body.thumbnail-preview .player-offline-banner {
 }
 
 .onboarding-status {
-  margin-top: 8px;
+  margin-top: clamp(32px, 6vh, 56px);
   min-height: 1.4em;
-  color: #cbd5e1;
+  color: #8faeb0;
   font-size: 0.96rem;
 }
 
 .onboarding-card--landing .onboarding-status {
-  text-align: center;
+  text-align: left;
 }
 
 @media (max-width: 860px), (orientation: portrait) {
@@ -200,12 +361,45 @@ body.thumbnail-preview .player-offline-banner {
     grid-template-columns: 1fr;
   }
 
+  .onboarding-copy-panel,
+  .onboarding-qr-pane {
+    grid-column: 1;
+  }
+
+  .onboarding-copy-panel {
+    grid-row: 1;
+  }
+
+  .onboarding-qr-pane {
+    grid-row: 2;
+  }
+
   .onboarding-card {
     width: 100%;
   }
 
   .onboarding-qr-frame img {
-    width: min(100%, 280px);
+    width: min(100%, 390px);
+  }
+
+  .onboarding-qr-frame {
+    width: min(100%, 420px);
+  }
+
+  .onboarding-qr-pane {
+    width: min(100%, 420px);
+  }
+
+  .onboarding-stage--landing h1 {
+    font-size: clamp(2rem, 7vw, 3rem);
+  }
+
+  .onboarding-header {
+    margin-bottom: 38px;
+  }
+
+  .onboarding-pin {
+    font-size: clamp(1.7rem, 9vw, 2.8rem);
   }
 }
 
@@ -239,6 +433,29 @@ body.screen-blackout #app {
   opacity: 0;
 }
 
+.player-keyboard-feedback {
+  position: fixed;
+  top: 1.5rem;
+  left: 50%;
+  z-index: 10000;
+  padding: 0.65rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: 0.4rem;
+  background: rgba(15, 23, 42, 0.88);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -0.5rem);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.player-keyboard-feedback.is-visible {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 .player-announcement-layer {
   position: fixed;
   left: 50%;

src/player/public/js/player-announcement-templates.js

@@ -22,7 +22,11 @@
 
   function normalizeAnnouncementColor(value) {
     var normalized = String(value || '').trim().toLowerCase();
-    if (['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'].indexOf(normalized) !== -1) {
+    if ([
+      'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+      'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+      'navy', 'steel', 'slate', 'graphite', 'midnight'
+    ].indexOf(normalized) !== -1) {
       return normalized;
     }
     return 'primary';
@@ -42,7 +46,21 @@
       warning: { accent: '#ffc107', foreground: '#201400', glow: 'rgba(255, 193, 7, 0.30)' },
       danger: { accent: '#dc3545', foreground: '#ffffff', glow: 'rgba(220, 53, 69, 0.34)' },
       dark: { accent: '#212529', foreground: '#ffffff', glow: 'rgba(33, 37, 41, 0.34)' },
-      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' }
+      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' },
+      orange: { accent: '#c84e10', foreground: '#ffffff', glow: 'rgba(200, 78, 16, 0.34)' },
+      amber: { accent: '#a56710', foreground: '#ffffff', glow: 'rgba(165, 103, 16, 0.34)' },
+      olive: { accent: '#5f7f0f', foreground: '#ffffff', glow: 'rgba(95, 127, 15, 0.34)' },
+      teal: { accent: '#12827d', foreground: '#ffffff', glow: 'rgba(18, 130, 125, 0.34)' },
+      sky: { accent: '#127caf', foreground: '#ffffff', glow: 'rgba(18, 124, 175, 0.34)' },
+      indigo: { accent: '#6f60ea', foreground: '#ffffff', glow: 'rgba(111, 96, 234, 0.34)' },
+      violet: { accent: '#9553db', foreground: '#ffffff', glow: 'rgba(149, 83, 219, 0.34)' },
+      fuchsia: { accent: '#b347be', foreground: '#ffffff', glow: 'rgba(179, 71, 190, 0.34)' },
+      pink: { accent: '#cd388d', foreground: '#ffffff', glow: 'rgba(205, 56, 141, 0.34)' },
+      navy: { accent: '#1d2d4c', foreground: '#ffffff', glow: 'rgba(29, 45, 76, 0.34)' },
+      steel: { accent: '#3a4860', foreground: '#ffffff', glow: 'rgba(58, 72, 96, 0.34)' },
+      slate: { accent: '#566577', foreground: '#ffffff', glow: 'rgba(86, 101, 119, 0.34)' },
+      graphite: { accent: '#32363c', foreground: '#ffffff', glow: 'rgba(50, 54, 60, 0.34)' },
+      midnight: { accent: '#1e1d2d', foreground: '#ffffff', glow: 'rgba(30, 29, 45, 0.34)' }
     };
 
     return tokens[colorKey] || tokens.primary;

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') {
+  if (typeof destroySlideMedia === 'function') {
-    destroyRtmpRegions(app);
+    destroySlideMedia(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 });
-    });
   }
 
   function schedulePostRenderSetup(root, delayMs) {
@@ -272,16 +113,11 @@ function renderSlideMarkup(markup, shouldFade) {
       return;
     }
 
-    if (typeof syncRtmpRegions === 'function') {
-      syncRtmpRegions(root);
-    }
-
-    if (!isThumbnailPreview()) {
     initializeRegionInstances(root);
+    if (typeof initializeSlideMedia === 'function') {
+      initializeSlideMedia(root, delayMs);
     }
 
-    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;
 }
@@ -440,6 +264,34 @@ function isEditableTarget(target) {
   return ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'].indexOf(tagName) !== -1;
 }
 
+var keyboardFeedbackTimer = null;
+
+function showKeyboardFeedback(message) {
+  if (typeof document === 'undefined' || !document.body) {
+    return;
+  }
+
+  var feedback = document.querySelector('.player-keyboard-feedback');
+  if (!feedback) {
+    feedback = document.createElement('div');
+    feedback.className = 'player-keyboard-feedback';
+    feedback.setAttribute('aria-live', 'polite');
+    document.body.appendChild(feedback);
+  }
+
+  feedback.textContent = String(message || '');
+  feedback.classList.remove('is-visible');
+  void feedback.offsetWidth;
+  feedback.classList.add('is-visible');
+  if (keyboardFeedbackTimer) {
+    window.clearTimeout(keyboardFeedbackTimer);
+  }
+  keyboardFeedbackTimer = window.setTimeout(function () {
+    feedback.classList.remove('is-visible');
+    keyboardFeedbackTimer = null;
+  }, 900);
+}
+
 function handlePlayerKeydown(event) {
   if (!event || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
     return;
@@ -452,12 +304,28 @@ function handlePlayerKeydown(event) {
   if (event.key === 'ArrowLeft') {
     event.preventDefault();
     navigateSlides(-1);
+    showKeyboardFeedback('Previous slide');
     return;
   }
 
   if (event.key === 'ArrowRight') {
     event.preventDefault();
     navigateSlides(1);
+    showKeyboardFeedback('Next slide');
+    return;
+  }
+
+  if (String(event.key || '').toLowerCase() === 'p') {
+    event.preventDefault();
+    setPaused(!isPaused);
+    showKeyboardFeedback(isPaused ? 'Paused' : 'Playing');
+    return;
+  }
+
+  if (String(event.key || '').toLowerCase() === 'b') {
+    event.preventDefault();
+    setBlackout(!isBlackout);
+    showKeyboardFeedback(isBlackout ? 'Blackout on' : 'Blackout off');
   }
 }
 
@@ -489,14 +357,32 @@ function handleCommandMessage(rawMessage) {
   } catch (_error) {
     return;
   }
+  if (payload && payload.type === 'client-id-conflict') {
+    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) {
@@ -505,7 +391,17 @@ function handleCommandMessage(rawMessage) {
       return;
     case 'redirect':
       if (payload.url) {
-        window.location.replace(String(payload.url));
+        var redirectUrl = String(payload.url);
+        var authorizeMove = payload.moveToken
+          ? fetch('/api/screen-move-authorize', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+              body: JSON.stringify({ moveToken: String(payload.moveToken) })
+            })
+          : Promise.resolve();
+        authorizeMove.finally(function () {
+          window.location.replace(redirectUrl);
+        });
       }
       return;
     case 'pause':
@@ -541,6 +437,12 @@ function handleCommandMessage(rawMessage) {
   }
 }
 
+function handleClientIdConflict() {
+  var replacementClientId = regenerateCommandClientId();
+  var onboardingUrl = new URL('/', window.location.origin);
+  window.location.replace(onboardingUrl.toString());
+}
+
 // Retry the command websocket after a disconnect.
 function scheduleCommandReconnect() {
   if (commandReconnectTimer) {
@@ -564,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);
@@ -577,12 +485,26 @@ function connectCommandSocket() {
     handleCommandMessage(event.data);
   };
 
-  socket.onclose = function () {
+  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();
+      return;
+    }
     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);
@@ -156,6 +172,9 @@ function refresh() {
   if (window.__pulsePageAuthToken) {
     request.setRequestHeader('x-pulse-page-auth', window.__pulsePageAuthToken);
   }
+  if (typeof getCommandClientId === 'function') {
+    request.setRequestHeader('x-pulse-client-id', getCommandClientId());
+  }
   if (currentPlaylistEtag) {
     request.setRequestHeader('If-None-Match', currentPlaylistEtag);
   }
@@ -164,14 +183,24 @@ 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;
     }
     if (request.status < 200 || request.status >= 300) {
+      if (request.status === 401 || request.status === 403) {
+        window.location.replace('/');
+        return;
+      }
       setOfflineBannerVisible(true);
       scheduleRefreshRetry();
       logDebug(
@@ -185,18 +214,31 @@ 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);
-      if (window.initialData && typeof window.initialData === 'object') {
+      const hadSourceData = !(typeof window !== 'undefined' && window.initialData === null);
-        window.initialData.screen = data.screen || window.initialData.screen || null;
+      var refreshedInitialData = Object.assign({},
-        window.initialData.playlist = data.playlist || null;
+        typeof initialData !== 'undefined' && initialData ? initialData : (window.initialData || {}), {
-        window.initialData.slides = nextSlides;
+        screen: data.screen || null,
-        window.initialData.rssFeeds = Array.isArray(data.rssFeeds) ? data.rssFeeds : [];
+        playlist: data.playlist || null,
-        window.initialData.apiSources = Array.isArray(data.apiSources) ? data.apiSources : [];
+        slides: nextSlides,
-        window.initialData.timetableGroups = Array.isArray(data.timetableGroups) ? data.timetableGroups : [];
+        rssFeeds: Array.isArray(data.rssFeeds) ? data.rssFeeds : [],
-        window.initialData.revision = nextSignature;
+        apiSources: Array.isArray(data.apiSources) ? data.apiSources : [],
+        timetableGroups: Array.isArray(data.timetableGroups) ? data.timetableGroups : [],
+        weatherLocations: Array.isArray(data.weatherLocations) ? data.weatherLocations : [],
+        revision: nextSignature
+      });
+      if (typeof initialData !== 'undefined') {
+        initialData = refreshedInitialData;
+      }
+      window.initialData = refreshedInitialData;
+      if (!hadSourceData) {
+        slideMarkupCache = Object.create(null);
+        templateLayoutCache = Object.create(null);
+        templateRenderPlanCache = Object.create(null);
       }
       savePlaylistSnapshot({
         slides: nextSlides,
@@ -222,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;
       }
@@ -241,6 +287,11 @@ function refresh() {
           fadeBetweenSlides: nextFadeBetweenSlides,
           skipUnavailableRtmp: nextSkipUnavailableRtmp
         };
+        if (applyImmediately) {
+          applyPendingPlaylistUpdate();
+          showCurrent();
+          return;
+        }
         if (!isSlideInList(lastRenderedSlide, nextSlides)) {
           applyPendingPlaylistUpdate();
           showCurrent();
@@ -255,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(
@@ -275,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 () {
@@ -287,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;
@@ -211,6 +207,16 @@ function getCommandClientId() {
   return commandClientId;
 }
 
+function regenerateCommandClientId() {
+  commandClientId = null;
+  try {
+    window.sessionStorage.removeItem(commandClientStorageKey);
+  } catch (_error) {
+    // ignore storage errors
+  }
+  return getCommandClientId();
+}
+
 // Load the most recent playlist snapshot from browser storage.
 function loadPlaylistSnapshot() {
   try {
@@ -226,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;
@@ -358,6 +101,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h5: ['class', 'style'],
     h6: ['class', 'style'],
     img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+    i: ['class', 'style', 'aria-hidden'],
     col: ['class', 'style', 'span', 'width'],
     colgroup: ['class', 'style', 'span'],
     li: ['class', 'style'],
@@ -599,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;
 }
 
@@ -781,6 +532,7 @@ function getTemplateLayout(template) {
     canvasHeight: canvasSize.height,
     background: template.background_image_path ? '<img class="template-background" src="' + escapeHtml(template.background_image_path) + '" alt="" />' : '',
     backgroundColor: template.background_color || '#111111',
+    backgroundGradient: template.background_gradient || '',
     regions: regions
   };
 
@@ -789,17 +541,31 @@ function getTemplateLayout(template) {
 }
 
 // Build a dark backdrop style for template and media canvases.
-function buildBackdropStyle(backgroundColor, backgroundImagePath) {
+function buildBackdropStyle(backgroundColor, backgroundImagePath, backgroundGradient) {
   var color = String(backgroundColor || '#111111').trim() || '#111111';
   var style = 'background-color:' + escapeHtml(color) + ';';
+  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 (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) {
+        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 = '';
+  }
 
   if (backgroundImagePath) {
-    style += 'background-image:url("' + escapeHtml(backgroundImagePath) + '");';
+    style += 'background-image:url("' + escapeHtml(backgroundImagePath) + '")' + (gradient ? ',' + gradient : '') + ';';
-    style += 'background-position:center;background-size:contain;background-repeat:no-repeat;';
+    style += 'background-position:center,center;background-size:contain,cover;background-repeat:no-repeat,no-repeat;';
     return style;
   }
 
-  style += 'background-image:none;background-position:center;background-size:cover;background-repeat:no-repeat;';
+  style += 'background-image:' + (gradient || 'none') + ';background-position:center;background-size:cover;background-repeat:no-repeat;';
   return style;
 }
 
@@ -875,7 +641,7 @@ function renderTemplateSlideMarkup(slide) {
       animationConfig: normalizePlayerAnimationConfig(region.animationJson)
     });
   }).join('') : '';
-  const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path) : '';
+  const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path, layout.backgroundGradient) : '';
   if (layout) {
     setPlayerCanvasDimensions(layout.canvasWidth, layout.canvasHeight);
   }
@@ -959,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/api.js

@@ -56,7 +56,7 @@ function getApiItem(sourceId, itemNumber, itemsPathOverride) {
   return items[index] || null;
 }
 
-function substituteApiVariables(html, item) {
+function substituteApiVariables(html, item, sourceId) {
   var source = String(html || '');
   return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
     if (!item || typeof item !== 'object') {
@@ -68,8 +68,13 @@ function substituteApiVariables(html, item) {
     }
 
     var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isProgressPlaceholderExpression === 'function' && placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return placeholderUtils.renderProgressPlaceholder(item, expression);
+    }
     if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
       var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+      var source = getApiSourceById(sourceId);
+      imageSource = source && source.imageCache && source.imageCache[imageSource] ? source.imageCache[imageSource] : imageSource;
       if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
         return '';
       }
@@ -137,7 +142,7 @@ function renderApiRegion(region, regionContent) {
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor);
   var item = getApiItem(sourceId, itemNumber, itemsPath);
   var hasSource = String(sourceId === undefined || sourceId === null ? '' : sourceId).trim() !== '';
-  var body = hasSource ? (item ? substituteApiVariables(content, item) : '') : content;
+  var body = hasSource ? (item ? substituteApiVariables(content, item, sourceId) : '') : content;
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
   if (!body) {
     return '';

src/player/regions/html.js

@@ -32,7 +32,7 @@ function buildHtmlDocument(html) {
     return raw;
   }
 
-  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + raw + '</body></html>';
+  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}html,body{background:transparent !important;}</style></head><body>' + raw + '</body></html>';
 }
 
 function renderHtmlRegionContent(value) {
@@ -40,7 +40,10 @@ function renderHtmlRegionContent(value) {
   if (!html) {
     return '';
   }
-  return '<iframe class="template-region-html-frame" sandbox="" scrolling="no" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+  if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+    return '<iframe class="template-region-html-frame" sandbox="" allowtransparency="true" scrolling="no" srcdoc="' + escapeHtml(html) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+  }
+  return '<div class="template-region-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div>';
 }
 
 function renderHtmlRegion(region, regionContent) {

src/player/regions/rss.js

@@ -64,7 +64,7 @@ function resolveRssPath(value, path) {
   return current === undefined || current === null ? '' : current;
 }
 
-function substituteRssVariables(html, item) {
+function substituteRssVariables(html, item, feedId) {
   var source = String(html || '');
   return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
     if (!item || typeof item !== 'object') {
@@ -74,8 +74,13 @@ function substituteRssVariables(html, item) {
       return '';
     }
     var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isProgressPlaceholderExpression === 'function' && placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return placeholderUtils.renderProgressPlaceholder(item, expression);
+    }
     if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
       var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+      var feed = getRssFeedById(feedId);
+      imageSource = feed && feed.imageCache && feed.imageCache[imageSource] ? feed.imageCache[imageSource] : imageSource;
       if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
         return '';
       }
@@ -103,7 +108,7 @@ function renderRssRegion(region, regionContent) {
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color);
   var item = getRssFeedItem(feedId, itemNumber);
   var hasFeed = String(feedId === undefined || feedId === null ? '' : feedId).trim() !== '';
-  var body = hasFeed ? (item ? substituteRssVariables(content, item) : '') : content;
+  var body = hasFeed ? (item ? substituteRssVariables(content, item, feedId) : '') : content;
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
   if (!body) {
     return '';

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/time-date.js

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

src/player/regions/timetable.js

@@ -13,6 +13,9 @@ function substituteTimetableVariables(html, entry) {
       return '';
     }
 
+    if (typeof window.placeholderUtils.isProgressPlaceholderExpression === 'function' && window.placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return window.placeholderUtils.renderProgressPlaceholder(entry, expression);
+    }
     return escapeHtml(window.placeholderUtils.formatPlaceholderValue(window.placeholderUtils.resolvePlaceholderExpression(entry, expression)));
   });
 }

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/regions/weather.js

@@ -0,0 +1,94 @@
+// Weather region rendering for live playback.
+
+var weatherRegistry = window.pulsePlayerRegionTypes;
+var weatherPlaceholderUtils = window.placeholderUtils || {};
+
+function weatherIconForCode(code) {
+  var value = Number(code);
+  if (value === 0) return 'bi-sun';
+  if (value <= 3) return 'bi-cloud-sun';
+  if (value <= 48) return 'bi-cloud-fog';
+  if (value <= 67 || value > 77 && value <= 82) return 'bi-cloud-rain';
+  if (value <= 77) return 'bi-cloud-snow';
+  return 'bi-cloud-lightning-rain';
+}
+
+function getWeatherLocation(locationId) {
+  var locations = Array.isArray(initialData && initialData.weatherLocations) ? initialData.weatherLocations : [];
+  return locations.find(function (location) { return Number(location.id) === Number(locationId); }) || null;
+}
+
+function normalizeWeatherExpression(expression) {
+  var value = String(expression || '').trim();
+  var currentAliases = { temp: 'current.temperature_2m', temp_unit: 'current.temperature_unit', feels_like: 'current.apparent_temperature', humidity: 'current.relative_humidity_2m', code: 'current.weather_code', wind: 'current.wind_speed_10m', wind_unit: 'current.wind_speed_unit', precip: 'current.precipitation', precip_unit: 'current.precipitation_unit', uv_index: 'current.uv_index', cloud_cover: 'current.cloud_cover', icon: 'current.weather_code.icon' };
+  var globalAliases = { temp_unit: 'temperature_unit', wind_unit: 'wind_speed_unit', precip_unit: 'precipitation_unit' };
+  if (globalAliases[value]) return globalAliases[value];
+  var currentField = value.replace(/^current\./, '');
+  var currentMatch = currentField.match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  if (currentMatch && currentAliases[currentMatch[1]]) return currentAliases[currentMatch[1]] + (currentMatch[2] || '');
+  var indexed = value.match(/^(daily|hourly)\.(\d+)\.(.+)$/);
+  if (!indexed) return value;
+  var fieldMatch = indexed[3].match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  var field = fieldMatch ? fieldMatch[1] : indexed[3];
+  var aliases = indexed[1] === 'daily' ? { time: 'time', code: 'weather_code', temp_max: 'temperature_2m_max', temp_min: 'temperature_2m_min', precip: 'precipitation_sum', wind: 'wind_speed_10m_max', uv_index: 'uv_index_max', cloud_cover: 'cloud_cover_mean', sunrise: 'sunrise', sunset: 'sunset', icon: 'weather_code' } : { time: 'time', code: 'weather_code', temp: 'temperature_2m', precip: 'precipitation', wind: 'wind_speed_10m', uv_index: 'uv_index', cloud_cover: 'cloud_cover', icon: 'weather_code' };
+  if (!Object.prototype.hasOwnProperty.call(aliases, field)) return value;
+  return field === 'icon' ? indexed[1] + '.' + aliases[field] + '.' + indexed[2] + '.icon' + (fieldMatch[2] || '') : indexed[1] + '.' + aliases[field] + '.' + indexed[2] + (fieldMatch[2] || '');
+}
+
+function withWeatherUnits(snapshot, location) {
+  var data = Object.assign({}, snapshot, { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: location.temperature_unit === 'fahrenheit' ? '°F' : '°C', wind_unit: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h', precip_unit: location.precipitation_unit === 'inch' ? 'in' : 'mm' });
+  var temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
+  var windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
+  var precipitationUnit = location.precipitation_unit === 'inch' ? 'in' : 'mm';
+  data.current = Object.assign({}, snapshot.current || {}, { temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+  data.daily = Object.assign({}, snapshot.daily || {}, { temperature_unit: temperatureUnit });
+  data.hourly = Object.assign({}, snapshot.hourly || {}, { temperature_unit: temperatureUnit });
+  return data;
+}
+
+function substituteWeatherVariables(html, value) {
+  return String(html || '').replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+    if (!value || typeof value !== 'object' || typeof weatherPlaceholderUtils.resolvePlaceholderExpression !== 'function' || typeof weatherPlaceholderUtils.formatPlaceholderValue !== 'function') return '';
+    var rawExpression = String(expression).trim();
+    var normalizedExpression = normalizeWeatherExpression(rawExpression);
+    if (typeof weatherPlaceholderUtils.isProgressPlaceholderExpression === 'function' && weatherPlaceholderUtils.isProgressPlaceholderExpression(rawExpression)) {
+      return weatherPlaceholderUtils.renderProgressPlaceholder(value, rawExpression);
+    }
+    var iconMatch = normalizedExpression.match(/^(?:current\.weather_code|daily\.weather_code\.\d+|hourly\.weather_code\.\d+)\.icon(?:\((\d+)(?:\s*,\s*(\d+))?\))?$/);
+    if (iconMatch) {
+      var codeExpression = normalizedExpression.replace(/\.icon(?:\(.*\))?$/, '');
+      var width = iconMatch[1] ? Math.max(1, Math.min(1000, Number(iconMatch[1]))) : 0;
+      var height = iconMatch[2] ? Math.max(1, Math.min(1000, Number(iconMatch[2]))) : width;
+      var style = width ? ' style="display:inline-block;vertical-align:middle;font-size:' + width + 'px;line-height:' + height + 'px;width:' + width + 'px;height:' + height + 'px;"' : '';
+        var weatherCode = weatherPlaceholderUtils.resolvePlaceholderExpression(value, codeExpression, { timeZone: value.timezone });
+        var icon = '<i class="bi ' + weatherIconForCode(weatherCode) + '"' + style + ' aria-hidden="true"></i>';
+        return width ? '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + width + 'px;height:' + height + 'px;">' + icon + '</span>' : icon;
+    }
+    return escapeHtml(weatherPlaceholderUtils.formatPlaceholderValue(weatherPlaceholderUtils.resolvePlaceholderExpression(value, normalizeWeatherExpression(expression), { timeZone: value.timezone })));
+  });
+}
+
+function renderWeatherRegion(region, regionContent) {
+  var value = String(regionContent && regionContent.value || '');
+  if (!value.trim()) return '';
+  var location = getWeatherLocation(regionContent && regionContent.weather_location_id);
+  var snapshot = location && location.responseJson && typeof location.responseJson === 'object' ? location.responseJson : null;
+  var width = Math.max(1, Math.round(Number(region && region.pixelWidth) || 1));
+  var height = Math.max(1, Math.round(Number(region && region.pixelHeight) || 1));
+  var scale = Number(region && region.canvasScale) || 1;
+  var style = 'width:' + width + 'px;height:' + height + 'px;transform:scale(' + scale + ');transform-origin:top left;overflow:hidden;';
+  if (!location || !snapshot) return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + '"></div></div>';
+  var current = snapshot.current || {};
+  if (value) {
+    var weatherData = withWeatherUnits(snapshot, location);
+    var fontSize = Math.max(8, Number(regionContent && regionContent.font_size || region && (region.font_size || region.fontSize) || 32) || 32);
+    return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'font-family:Arial,sans-serif;font-size:' + fontSize + 'px;line-height:1.5;">' + renderEditorJsContent(substituteWeatherVariables(value, weatherData)) + '</div></div>';
+  }
+  var daily = snapshot.daily || {};
+  var days = (daily.time || []).slice(0, 7).map(function (day, index) {
+    return '<div class="weather-region-day"><strong>' + escapeHtml(index === 0 ? 'Today' : String(day).slice(5)) + '</strong><i class="bi ' + weatherIconForCode(daily.weather_code && daily.weather_code[index]) + '"></i><span>' + escapeHtml(daily.temperature_2m_max && daily.temperature_2m_max[index] !== undefined ? daily.temperature_2m_max[index] + '°' : '-') + '</span></div>';
+  }).join('');
+  return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'padding:3%;font-family:Arial,sans-serif;"><div style="display:flex;align-items:center;justify-content:space-between;"><div><div style="font-size:.8em;opacity:.72;">' + escapeHtml(location.location_label || location.name) + '</div><strong style="font-size:2em;">' + escapeHtml(current.temperature_2m === undefined ? '-' : current.temperature_2m) + '°</strong></div><i class="bi ' + weatherIconForCode(current.weather_code) + '" style="font-size:3em;"></i></div><div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35em;margin-top:1em;">' + days + '</div></div></div>';
+}
+
+weatherRegistry.register('weather', { renderRegion: renderWeatherRegion });

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');
@@ -64,6 +66,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h4: ['class', 'style'],
     h5: ['class', 'style'],
     h6: ['class', 'style'],
+    i: ['class', 'style', 'aria-hidden'],
     img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
     col: ['class', 'style', 'span', 'width'],
     colgroup: ['class', 'style', 'span'],
@@ -344,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');
@@ -426,7 +432,7 @@ function getPlayerAnnouncementTemplatesScript() {
 function getAnnouncementIconsDataScript() {
   return [
     '(function () {',
-    '  window.pulseAnnouncementIconKeys = ' + safeJsonForScript(announcementIcons.ANNOUNCEMENT_ICON_KEYS) + ';',
+    '  window.pulseAnnouncementIconKeys = ' + safeJsonForScript(announcementIcons.ANNOUNCEMENT_ICON_CATALOG_KEYS) + ';',
     '  window.pulseAnnouncementDefaultIconKey = ' + safeJsonForScript(announcementIcons.DEFAULT_ANNOUNCEMENT_ICON) + ';',
     '}());'
   ].join('\n');
@@ -522,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,
@@ -555,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 packageMetadata = require('../../package.json');
-const { createThumbnailPreviewBootstrapScript } = require('./thumbnail-preview');
+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;',
     '      });',
     '    });',
@@ -36,34 +37,31 @@ function getPlayerServiceWorkerRegistrationScript() {
   ].join('');
 }
 
-function renderOnboardingLandingBody() {
+function renderOnboardingLandingBody(options) {
+  const onboardingCode = String(options && options.pairingCode || '').trim();
+  const deviceId = String(options && options.deviceId || '').trim();
   return [
-    '<main class="onboarding-shell">',
+    '    <main id="onboarding-shell" class="onboarding-shell">',
-    '  <section class="onboarding-card onboarding-card--landing">',
+    '  <section class="onboarding-stage onboarding-stage--landing">',
-    '    <p class="onboarding-kicker">Pulse Signage</p>',
-    '    <h1>Onboard this player</h1>',
-    '    <p class="onboarding-copy">Choose an existing screen, name the client, and either scan the QR code or finish right here with a keyboard and mouse.</p>',
     '    <div class="onboarding-layout">',
     '      <div class="onboarding-qr-pane">',
     '        <div class="onboarding-qr-frame">',
     '          <img id="onboarding-qr" alt="Onboarding QR code" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E" />',
     '        </div>',
-    '        <div id="onboarding-status" class="onboarding-status">Preparing onboarding link...</div>',
+    '        <p class="onboarding-qr-caption">Scan this QR code with your phone</p>',
+    '      </div>',
+    '      <div class="onboarding-copy-panel">',
+    '        <p class="onboarding-kicker onboarding-brand-title">Pulse Signage</p>',
+    '        <h1>Quickly set up with your phone</h1>',
+    '        <ol class="onboarding-instructions">',
+    '          <li>Open the camera and scan the QR code.</li>',
+    '          <li>Log in to Pulse Signage and choose a screen.</li>',
+    '        </ol>',
+    '        <div class="onboarding-pin-block">',
+    '          <span class="onboarding-pin-label">Pairing Code</span>',
+    '          <strong id="onboarding-pairing-code" class="onboarding-pin">' + Handlebars.escapeExpression(onboardingCode || 'Loading...') + '</strong>',
+    '        </div>',
     '      </div>',
-    '      <form id="onboarding-local-form" class="onboarding-form onboarding-form--local">',
-    '        <label>',
-    '          <span>Client name</span>',
-    '          <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" autocomplete="off" />',
-    '        </label>',
-    '        <label>',
-    '          <span>Screen</span>',
-    '          <select name="screenSlug" id="onboarding-screen-select" required>',
-    '            <option value="">Loading screens...</option>',
-    '          </select>',
-    '        </label>',
-    '        <button type="submit">Save client</button>',
-    '        <div id="onboarding-message" class="onboarding-status"></div>',
-    '      </form>',
     '    </div>',
     '  </section>',
     '</main>'
@@ -79,6 +77,10 @@ function renderOnboardingFormBody(deviceId) {
     '    <p class="onboarding-copy">Pick an existing screen and give this player a friendly name that will persist after refreshes.</p>',
     '    <form id="onboarding-form" class="onboarding-form">',
     '      <label>',
+    '        <span>Pairing code</span>',
+    '        <input name="pairingCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required autocomplete="one-time-code" placeholder="Enter the code shown on the kiosk" />',
+    '      </label>',
+    '      <label>',
     '        <span>Client name</span>',
     '        <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" />',
     '      </label>',
@@ -109,40 +111,36 @@ 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 bootstrapScript = getPlayerPageScript()({
-  const script = 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>'
   });
 }
 
-function renderPlayerOnboardingLandingPage() {
+function renderPlayerOnboardingLandingPage(options) {
   const pageAuthToken = createPageAuthBundle({ scope: 'onboarding' });
   const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
   return renderPage(getPlayerPageTemplate(), {
     title: 'Onboard player',
     bodyClass: 'onboarding-page',
-    body: renderOnboardingLandingBody(),
+    body: renderOnboardingLandingBody(options),
     stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
     script: createPageFetchAuthScript(pageAuthToken) + getPlayerServiceWorkerRegistrationScript() + renderOnboardingLandingScript()
   });

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) {
@@ -62,11 +79,20 @@ function registerPlayerRoutes(app, options) {
       body: body
     }));
 
-    if (req.headers['x-pulse-page-auth']) {
+    const requestHeaders = req && req.headers ? req.headers : {};
-      headers['x-pulse-page-auth'] = String(req.headers['x-pulse-page-auth']).trim();
+    if (requestHeaders['x-pulse-page-auth']) {
+      headers['x-pulse-page-auth'] = String(requestHeaders['x-pulse-page-auth']).trim();
+    }
+    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 (req.headers['if-none-match']) {
-      headers['if-none-match'] = String(req.headers['if-none-match']).trim();
     }
     if (requestOptions.contentType) {
       headers['content-type'] = requestOptions.contentType;
@@ -96,6 +122,76 @@ function registerPlayerRoutes(app, options) {
     }
   }
 
+  async function getBoundScreenSlug(req) {
+    if (!playerDeviceId) {
+      return null;
+    }
+
+    const clientId = String(req.query && req.query.clientId || '').trim();
+    if (!clientId) {
+      return null;
+    }
+    const bindingId = clientId;
+
+    if (bridgeBaseUrl) {
+      const response = await fetchBridge(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(bindingId), {
+        method: 'GET'
+      });
+      const status = await readJsonResponse(response);
+      return status && status.screenSlug ? String(status.screenSlug).trim() : null;
+    }
+
+    const [rows] = await pool.query(
+      `SELECT s.slug
+         FROM d_onboarding_devices d
+         JOIN d_screens s ON s.id = d.screen_id
+        WHERE d.device_id = ?`,
+      [bindingId]
+    );
+    return rows[0] && rows[0].slug ? String(rows[0].slug).trim() : null;
+  }
+
+  async function isClientAuthorizedForScreen(req, requestedSlug) {
+    const clientId = getRequestClientId(req);
+    if (!clientId) {
+      return false;
+    }
+    const boundSlug = await getBoundScreenSlug({ query: { clientId: clientId } });
+    return boundSlug === String(requestedSlug || '').trim();
+  }
+
+  function isAuthorizedScreenMove(req, requestedSlug) {
+    const queryToken = String(req.query && req.query.moveToken || '').trim();
+    const cookieHeader = String(req.headers && req.headers.cookie || '');
+    const cookieToken = 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-screen-move'; });
+    const token = queryToken || (cookieToken ? decodeURIComponent(cookieToken[1]) : '');
+    if (!token) {
+      return false;
+    }
+
+    const payload = verifyPageAuthToken(token);
+    return Boolean(payload
+      && String(payload.scope || '').trim() === 'screen-move'
+      && String(payload.playerId || '').trim() === String(playerDeviceId || '').trim()
+      && String(payload.screenSlug || '').trim() === String(requestedSlug || '').trim());
+  }
+
+  app.post('/api/screen-move-authorize', express.json(), function (req, res) {
+    const token = String(req.body && req.body.moveToken || '').trim();
+    const payload = verifyPageAuthToken(token);
+    if (!payload
+      || String(payload.scope || '').trim() !== 'screen-move'
+      || String(payload.playerId || '').trim() !== String(playerDeviceId || '').trim()) {
+      return res.status(401).json({ error: 'Invalid screen move authorization.' });
+    }
+
+    res.setHeader('Set-Cookie', `pulse-screen-move=${encodeURIComponent(token)}; Max-Age=60; Path=/; HttpOnly; SameSite=Lax`);
+    return res.json({ ok: true });
+  });
+
   function requirePageAuth(allowedScopes) {
     return function (req, res, next) {
       if (!sharedSecret) {
@@ -145,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));
@@ -296,8 +418,8 @@ function registerPlayerRoutes(app, options) {
     }
   });
 
-  app.get('/screen/:slug', function (req, res) {
+  app.get('/screen/:slug', async function (req, res, next) {
-    if (onPlayerPublicBaseUrl) {
+    if (onPlayerPublicBaseUrl && !bridgeBaseUrl) {
       try {
         onPlayerPublicBaseUrl(getPlayerPublicBaseUrl(req, null));
       } catch (_error) {
@@ -313,34 +435,31 @@ 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));
         }
-        res.send(common.renderPlayerPage(req.params.slug, data));
+        await writePlaylistSnapshot(req.params.slug, data);
-      }).catch(function (error) {
+        res.send(common.renderPlayerPage(req.params.slug, null));
+      }).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;
     }
 
-    const { bindPlayerToScreen } = require('./onboarding');
-    if (playerDeviceId) {
-      void bindPlayerToScreen(pool, playerDeviceId, req.params.slug)
-        .catch(function (error) {
-          console.error(error);
-        });
-    }
     playerPlaylistService.buildScreenPlaylist(req.params.slug).then(function (data) {
-      res.send(common.renderPlayerPage(req.params.slug, data));
+      res.send(common.renderPlayerPage(req.params.slug, null));
     }).catch(function (error) {
       console.error(error);
       res.set('X-Player-Offline', '1');
@@ -348,70 +467,24 @@ 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))) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       if (bridgeBaseUrl) {
         const response = await fetchBridge(req, '/api/screens/' + encodeURIComponent(req.params.slug) + '/playlist', {
           method: 'GET'
         });
         if (!response) {
+          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');
         const cacheControl = response.headers.get('cache-control');
@@ -422,10 +495,29 @@ function registerPlayerRoutes(app, options) {
           res.set('Cache-Control', cacheControl);
         }
         if (response.status === 304) {
+          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');
@@ -448,6 +540,9 @@ function registerPlayerRoutes(app, options) {
 
   app.get('/api/screens/:slug/announcement', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      if (playerDeviceId && !(await isClientAuthorizedForScreen(req, req.params.slug))) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       if (bridgeBaseUrl) {
         const response = await fetchBridge(req, '/api/screens/' + encodeURIComponent(req.params.slug) + '/announcement', {
           method: 'GET'

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,27 @@ function createPlayerRuntime(options) {
   const connectionsBySlug = new Map();
   const dashboardListenersBySlug = new Map();
   const announcementListenersBySlug = new Map();
+  const snapshotListeners = new Set();
+  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();
+    if (!normalizedClientId) {
+      return false;
+    }
+    for (const connections of connectionsBySlug.values()) {
+      for (const connection of connections.values()) {
+        if (connection !== currentConnection && String(connection.clientId || '').trim() === normalizedClientId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
 
   function normalizeClientIp(value) {
     const ip = String(value || '').trim();
@@ -165,6 +187,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) {
@@ -307,6 +380,12 @@ function createPlayerRuntime(options) {
       } catch (_error) {
       }
     }
+    snapshotListeners.forEach(function (listener) {
+      try {
+        listener({ slug: key, connections: connections });
+      } catch (_error) {
+      }
+    });
     if (!bucket || !bucket.size) {
       return;
     }
@@ -355,7 +434,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;
     }
@@ -367,10 +449,30 @@ 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 await acknowledgement;
+  }
+
   async function broadcastCommand(slug, commandOrPayload) {
     const bucket = connectionsBySlug.get(String(slug || '').trim());
     if (!bucket || !bucket.size) {
@@ -408,6 +510,10 @@ function createPlayerRuntime(options) {
     const playerMatch = pathname.match(/^\/ws\/screens\/([^/]+)$/);
     const announcementMatch = pathname.match(/^\/ws\/screens\/([^/]+)\/announcements$/);
 
+    if (pathname === '/local-control/ws') {
+      return;
+    }
+
     if (!dashboardMatch && !playerMatch && !announcementMatch) {
       socket.destroy();
       return;
@@ -512,6 +618,7 @@ function createPlayerRuntime(options) {
       connectedAt: new Date(),
       lastSeenAt: new Date()
     };
+    connection.isAlive = true;
     const bucket = getConnectionBucket(slug);
 
     if (!bucket) {
@@ -521,7 +628,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 {
@@ -531,15 +642,48 @@ 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;
       }
 
-      connection.clientId = payload.clientId ? String(payload.clientId).trim() : connection.clientId;
+      const nextClientId = payload.clientId ? String(payload.clientId).trim() : connection.clientId;
+      if (nextClientId && hasActiveClientId(nextClientId, connection)) {
+        socket.send(JSON.stringify({ type: 'client-id-conflict' }));
+        socket.close(4009, 'Client ID is already in use.');
+        return;
+      }
+      connection.clientId = nextClientId;
       connection.clientName = payload.clientName ? String(payload.clientName).trim() : connection.clientName;
       connection.deviceId = payload.deviceId ? normalizeDeviceId(payload.deviceId) || connection.deviceId : connection.deviceId;
       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;
@@ -560,12 +704,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);
     });
@@ -575,6 +731,16 @@ function createPlayerRuntime(options) {
     server.on('upgrade', handleUpgrade);
   }
 
+  function subscribeSnapshot(listener) {
+    if (typeof listener !== 'function') {
+      return function () {};
+    }
+    snapshotListeners.add(listener);
+    return function () {
+      snapshotListeners.delete(listener);
+    };
+  }
+
   return {
     installWebsocket: installWebsocket,
     broadcastAnnouncementRefresh: broadcastAnnouncementRefresh,
@@ -583,7 +749,8 @@ function createPlayerRuntime(options) {
     snapshotSlugs: snapshotSlugs,
     isClientNameAvailableOnScreen: isClientNameAvailableOnScreen,
     sendCommandToConnection: sendCommandToConnection,
-    broadcastCommand: broadcastCommand
+    broadcastCommand: broadcastCommand,
+    subscribeSnapshot: subscribeSnapshot
   };
 }
 

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/rbac.js

@@ -22,6 +22,14 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View connected player clients and live status.' },
           { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' }
         ]
+      },
+      {
+        key: 'pairing',
+        order: 30,
+        name: 'Player pairing',
+        permissions: [
+          { key: 'allow', name: 'Allow', description: 'Pair players with screen groups.' }
+        ]
       }
     ]
   },
@@ -73,6 +81,16 @@ const PERMISSION_SECTIONS = [
           { key: 'delete', name: 'Delete', description: 'Delete slide templates.' }
         ]
       },
+      {
+        key: 'media-library',
+        order: 45,
+        name: 'Media library',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View shared media assets.' },
+          { key: 'create', name: 'Create', description: 'Upload shared media assets.' },
+          { key: 'delete', name: 'Delete', description: 'Delete unused shared media assets.' }
+        ]
+      },
       {
         key: 'canvas-sizes',
         order: 50,
@@ -109,6 +127,7 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View configured RSS feeds.' },
           { key: 'create', name: 'Create', description: 'Create new RSS feeds.' },
           { key: 'update', name: 'Update', description: 'Update RSS feeds.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh RSS feeds.' },
           { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' }
         ]
       },
@@ -120,6 +139,7 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View configured API sources.' },
           { key: 'create', name: 'Create', description: 'Create new API sources.' },
           { key: 'update', name: 'Update', description: 'Update API sources.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh API sources.' },
           { key: 'delete', name: 'Delete', description: 'Delete API sources.' }
         ]
       },
@@ -133,6 +153,18 @@ const PERMISSION_SECTIONS = [
           { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' },
           { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' }
         ]
+      },
+      {
+        key: 'weather',
+        order: 40,
+        name: 'Weather locations',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View configured weather locations.' },
+          { key: 'create', name: 'Create', description: 'Create new weather locations.' },
+          { key: 'update', name: 'Update', description: 'Update weather locations.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh weather locations.' },
+          { key: 'delete', name: 'Delete', description: 'Delete weather locations.' }
+        ]
       }
     ]
   },
@@ -169,6 +201,17 @@ const PERMISSION_SECTIONS = [
           { key: 'delete', name: 'Delete', description: 'Delete users.' }
         ]
       },
+      {
+        key: 'invitations',
+        order: 15,
+        name: 'Invitations',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View pending user invitations.' },
+          { key: 'create', name: 'Create', description: 'Send new user invitations.' },
+          { key: 'delete', name: 'Delete', description: 'Delete pending user invitations.' },
+          { key: 'allow', name: 'Allow', description: 'Resend pending user invitations.' }
+        ]
+      },
       {
         key: 'rbac',
         order: 20,

src/web.js

@@ -6,7 +6,7 @@ const multer = require('multer');
 const fs = require('fs');
 const crypto = require('crypto');
 const common = require('./common');
-const { verifyPassword, createSessionToken, hashSessionToken, hashPassword, validatePasswordStrength } = require('#src/auth');
+const { verifyPassword, createSessionToken, hashSessionToken, hashPassword, validatePasswordStrength, createOneTimeToken } = require('#src/auth');
 const pages = require('#src/web/pages');
 const registerMiddleware = require('#src/web/middleware');
 const registerNotFoundHandler = require('#src/web/middleware/not-found');
@@ -23,8 +23,9 @@ const { requirePermission: createRequirePermission, PERMISSION_DENIED_MESSAGE }
 const { rbacData } = require('#src/web/lib/auth');
 const { createPlayerActionService } = require('#src/web/lib/player-actions');
 const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
-const { createSessionService } = require('#src/web/lib/auth');
+const { createSessionService, getRequestOrigin } = require('#src/web/lib/auth');
 const { fetchAppSettings } = require('#src/data/app-settings');
+const { sendAccountEmail } = require('#src/data/mailer');
 const { recordRequestAuditEvent } = require('#src/data/audit-log');
 const { hasAnyPermission } = require('#src/rbac');
 const { ensureFontLibrary } = require('#src/web/lib/media/font-library');
@@ -67,7 +68,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({
@@ -144,7 +151,10 @@ async function start() {
     sessionCookieName: webConfig.sessionCookieName,
     formatDashboardDate: formatDashboardDate,
     getAuditUserId: getAuditUserId,
+    getRequestOrigin: getRequestOrigin,
     recordRequestAuditEvent: recordRequestAuditEvent,
+    sendAccountEmail: function (settings, message) { return sendAccountEmail(settings, message); },
+    createOneTimeToken: createOneTimeToken,
     hashPassword: hashPassword,
     validatePasswordStrength: validatePasswordStrength,
     readArrayField: readArrayField,
@@ -163,7 +173,9 @@ async function start() {
     broadcastDashboardState: broadcastDashboardState,
     dataSourceTasks: dataSourceTasks,
     playerActionService: playerActionService,
+    playerInternalBaseUrl: webConfig.playerInternalUrl,
     isClientNameAvailable: isClientNameAvailable,
+    findAvailableClientName: common.findAvailableClientName,
     withClientNameReservation: withClientNameReservation,
     requirePermission: function (permissionKey, options) {
       return createRequirePermission(permissionKey, Object.assign({ setAuthMessageCookie: setAuthMessageCookie }, options));
@@ -226,11 +238,13 @@ async function start() {
     backgroundTaskQueue: backgroundTaskQueue,
     webBootstrap: webBootstrap,
     notifyPlayerScreens: notifyPlayerScreens,
+    forwardPlayerCommandToDevice: playerActionService.forwardPlayerCommandToDevice,
     loadCurrentUser: loadCurrentUser,
     initializeBackgroundTasks: initializeBackgroundTasks,
     captureSlideThumbnail: captureSlideThumbnail,
     server: server,
     webBaseUrl: webConfig.webInternalUrl,
+    localPlayerInternalUrl: webConfig.playerInternalUrl,
     dataSourceStartupRefreshStaggerMs: webConfig.dataSourceStartupRefreshStaggerMs
   });
 

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/handlebars.js

@@ -172,6 +172,7 @@ function registerActionHelpers(Handlebars) {
 // Shared partials are registered once at startup.
 function registerPartials(Handlebars, viewsRoot) {
   Handlebars.registerPartial('modal-shell', fs.readFileSync(path.join(viewsRoot, 'shared', 'modal-shell.hbs'), 'utf8'));
+  Handlebars.registerPartial('media-picker-modal', fs.readFileSync(path.join(viewsRoot, 'shared', 'media-picker-modal.hbs'), 'utf8'));
   Handlebars.registerPartial('table-pagination', fs.readFileSync(path.join(viewsRoot, 'shared', 'table', 'table-pagination.hbs'), 'utf8'));
   Handlebars.registerPartial('playlists/form', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'form.hbs'), 'utf8'));
   Handlebars.registerPartial('signage/playlists/slide-row', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'slide-row.hbs'), 'utf8'));
@@ -179,6 +180,8 @@ function registerPartials(Handlebars, viewsRoot) {
   Handlebars.registerPartial('signage/templates/animation-advanced-modal', fs.readFileSync(path.join(viewsRoot, 'signage', 'templates', 'animation-advanced-modal.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/api-sources/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'api-sources', 'form.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/rss-feeds/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'rss-feeds', 'form.hbs'), 'utf8'));
+  Handlebars.registerPartial('data-sources/weather/preview', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'weather', 'preview.hbs'), 'utf8'));
+  Handlebars.registerPartial('data-sources/weather/forecast-preview', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'weather', 'forecast-preview.hbs'), 'utf8'));
 }
 
 // One entry point keeps Handlebars bootstrap centralized.

src/web/lib/auth/index.js

@@ -2,5 +2,6 @@
 
 module.exports = {
   createSessionService: require('./session').createSessionService,
+  getRequestOrigin: require('./session').getRequestOrigin,
   rbacData: require('./rbac-data')
 };

src/web/lib/auth/rbac-data.js

@@ -57,6 +57,32 @@ async function fetchRolesPage(pool, page, pageSize, searchTerm, sortKey, sortDir
   return Object.assign({ roles: paged.rows }, paged);
 }
 
+async function fetchInvitationsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
+  const paged = await fetchPagedRows(pool, {
+    selectSql: `SELECT i.id, i.email, i.name, i.role_ids_json, i.created_at, i.expires_at, u.username AS created_by_username
+                  FROM a_user_invitations i
+             LEFT JOIN a_users u ON u.id = i.created_by
+                 WHERE i.used_at IS NULL AND i.expires_at > NOW()
+                 ORDER BY i.created_at DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM a_user_invitations WHERE used_at IS NULL AND expires_at > NOW()',
+    searchColumns: ['i.email', 'i.name', 'u.username'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      email: 'i.email',
+      name: 'i.name',
+      created: 'i.created_at',
+      expires: 'i.expires_at',
+      createdBy: 'u.username'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    page: page,
+    pageSize: pageSize
+  });
+
+  return Object.assign({ invitations: paged.rows }, paged);
+}
+
 async function fetchRoleById(pool, roleId) {
   const [rows] = await pool.query(
     `SELECT r.id, r.role_key, r.name, r.description, r.created_at, r.modified_at,
@@ -142,7 +168,7 @@ async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey
   const whereSql = hasExcludedUserId ? 'WHERE u.id <> ?' : '';
   const queryArgs = hasExcludedUserId ? [excludedUserId] : [];
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT u.id, u.name, u.username, u.account_locked, u.created_at, u.modified_at,
+    selectSql: `SELECT u.id, u.name, u.username, u.email, u.email_verified_at, u.account_locked, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
     FROM a_users u
@@ -189,7 +215,7 @@ async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey
 
 async function fetchUserWithRoles(pool, userId) {
   const [rows] = await pool.query(
-    `SELECT u.id, u.name, u.username, u.account_locked, u.created_at, u.modified_at,
+    `SELECT u.id, u.name, u.username, u.email, u.email_verified_at, u.account_locked, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
     FROM a_users u
@@ -299,6 +325,7 @@ module.exports = {
   fetchPermissions,
   fetchRoles,
   fetchRolesPage,
+  fetchInvitationsPage,
   fetchRoleById,
   fetchRolePermissionKeys,
   fetchRoleUserIds,

src/web/lib/auth/session.js

@@ -128,7 +128,7 @@ function createSessionService(options) {
 
     const tokenHash = hashSessionToken(token);
     const [rows] = await pool.query(
-      `SELECT s.user_id, u.id, u.name, u.username, u.must_change_password
+      `SELECT s.user_id, u.id, u.name, u.username, u.email, u.email_verified_at, u.pending_email, u.must_change_password
       FROM a_sessions s
       JOIN a_users u ON u.id = s.user_id
        WHERE s.session_hash = ?

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

@@ -1,4 +1,4 @@
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
 
 const TASK = {
   taskType: 'data-source-refresh'
@@ -24,6 +24,7 @@ function registerDataSourceRefreshTask(options) {
       if (!apiSource) {
         throw new Error('API source not found.');
       }
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return { skipped: true, reason: 'disabled' };
       return refreshApiSource(pool, common, apiSource, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
@@ -32,9 +33,19 @@ function registerDataSourceRefreshTask(options) {
       if (!rssFeed) {
         throw new Error('RSS feed not found.');
       }
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return { skipped: true, reason: 'disabled' };
       return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
+    if (sourceType === 'weather-location') {
+      const location = await common.fetchWeatherLocationById(pool, sourceId);
+      if (!location) {
+        throw new Error('Weather location not found.');
+      }
+      if (location.enabled === 0 || location.enabled === false) return { skipped: true, reason: 'disabled' };
+      return refreshWeatherLocation(pool, common, location, Number(payload.actorId) || null, options.notifyPlayerScreens);
+    }
+
     throw new Error('Unsupported data source refresh task.');
   });
 }

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

@@ -9,7 +9,7 @@ const TASK = {
 };
 
 const { normalizeIntervalMs } = require('../queue');
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
 
 function registerRecurringDataSourceRefreshes(options) {
   const pool = options && options.pool;
@@ -23,6 +23,7 @@ function registerRecurringDataSourceRefreshes(options) {
   return (async function () {
     const apiSourcesData = await common.fetchApiSourcesData(pool);
     (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return;
       backgroundTaskQueue.registerRecurringTask({
         key: 'api-source-refresh:' + Number(apiSource.id),
         title: 'API source refresh',
@@ -41,6 +42,7 @@ function registerRecurringDataSourceRefreshes(options) {
 
     const rssFeedsData = await common.fetchRssFeedsData(pool);
     (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return;
       backgroundTaskQueue.registerRecurringTask({
         key: 'rss-feed-refresh:' + Number(rssFeed.id),
         title: 'RSS feed refresh',
@@ -56,6 +58,19 @@ function registerRecurringDataSourceRefreshes(options) {
         }
       });
     });
+
+    const weatherLocationsData = await common.fetchWeatherLocationsData(pool);
+    (weatherLocationsData.weatherLocations || []).forEach(function (location) {
+      if (location.enabled === 0 || location.enabled === false) return;
+      backgroundTaskQueue.registerRecurringTask({
+        key: 'weather-location-refresh:' + Number(location.id),
+        title: 'Weather location refresh',
+        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.id, null, options.notifyPlayerScreens); }
+      });
+    });
   })();
 }
 
@@ -73,7 +88,7 @@ function createDataSourceTaskService(options) {
   }
 
   function buildRecurringTitle(sourceType) {
-    return sourceType === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh';
+    return sourceType === 'rss-feed' ? 'RSS feed refresh' : sourceType === 'weather-location' ? 'Weather location refresh' : 'API source refresh';
   }
 
   function registerRecurringRefresh(sourceType, id, name, intervalValue, intervalUnit, run) {
@@ -122,6 +137,10 @@ function createDataSourceTaskService(options) {
     return refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, options.notifyPlayerScreens);
   }
 
+  async function refreshWeatherLocationInBackground(locationId, actorId) {
+    return refreshWeatherLocation(pool, common, locationId, actorId, options.notifyPlayerScreens);
+  }
+
   return {
     formatRecurringKey: formatRecurringKey,
     buildRecurringTitle: buildRecurringTitle,
@@ -129,7 +148,8 @@ function createDataSourceTaskService(options) {
     removeRecurringRefresh: removeRecurringRefresh,
     getTaskStatusById: getTaskStatusById,
     refreshApiSourceInBackground: refreshApiSourceInBackground,
-    refreshRssFeedInBackground: refreshRssFeedInBackground
+    refreshRssFeedInBackground: refreshRssFeedInBackground,
+    refreshWeatherLocationInBackground: refreshWeatherLocationInBackground
   };
 }
 

src/web/lib/background-tasks/tasks-scheduled/onboarding-device-prune.js

@@ -3,7 +3,7 @@ const TASK = {
   title: 'Onboarding device prune',
   category: 'cleanup',
   trigger: 'scheduled recurring task, hourly',
-  purpose: 'remove stale onboarding device bindings that have been idle for more than one minute.',
+  purpose: 'remove unbound onboarding devices that have been idle for more than one minute.',
   taskType: 'recurring-run',
   intervalMs: 60 * 60 * 1000
 };

src/web/lib/background-tasks/tasks-scheduled/player-control-sync.js

@@ -0,0 +1,59 @@
+const { collectLocalControlUsers } = require('../../local-control-users');
+
+const TASK = {
+  key: 'player-control-sync',
+  title: 'Player Local Control auth refresh',
+  category: 'player-sync',
+  trigger: 'scheduled recurring task, every fifteen minutes',
+  purpose: 'push eligible Client Control users to connected players.',
+  taskType: 'recurring-run',
+  intervalMs: 15 * 60 * 1000
+};
+
+function registerPlayerControlSyncTask(options) {
+  const pool = options && options.pool;
+  const common = options && options.common;
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const forwardPlayerCommandToDevice = options && options.forwardPlayerCommandToDevice;
+  const localPlayerInternalUrl = String(options && options.localPlayerInternalUrl || '').trim().replace(/\/$/, '');
+
+  if (!pool || !common || !backgroundTaskQueue || typeof common.fetchPlayerRegistrations !== 'function' || typeof forwardPlayerCommandToDevice !== 'function') {
+    throw new Error('registerPlayerControlSyncTask requires player control sync dependencies.');
+  }
+
+  backgroundTaskQueue.registerRecurringTask({
+    key: TASK.key,
+    title: TASK.title,
+    category: TASK.category,
+    intervalMs: TASK.intervalMs,
+    metadata: {},
+    run: async function () {
+      const cachedUsers = await collectLocalControlUsers(pool);
+      const players = await common.fetchPlayerRegistrations(pool);
+      const results = await Promise.all((Array.isArray(players) ? players : []).filter(function (player) {
+        const playerInternalUrl = String(player && player.internal_base_url || '').trim().replace(/\/$/, '');
+        return !localPlayerInternalUrl || playerInternalUrl !== localPlayerInternalUrl;
+      }).map(async function (player) {
+        const deviceId = String(player && (player.identifier || player.device_id) || '').trim();
+        if (!deviceId) {
+          return { ok: false, skipped: true };
+        }
+        try {
+          await forwardPlayerCommandToDevice(deviceId, {
+            command: 'sync-local-control',
+            users: cachedUsers
+          });
+          return { ok: true };
+        } catch (_error) {
+          return { ok: false };
+        }
+      }));
+      return {
+        playerCount: results.length,
+        syncedCount: results.filter(function (result) { return result.ok; }).length
+      };
+    }
+  });
+}
+
+module.exports = { registerPlayerControlSyncTask };

src/web/lib/background-tasks/tasks-scheduled/unused-upload-sweep.js

@@ -1,42 +0,0 @@
-const TASK = {
-  key: 'unused-upload-sweep',
-  title: 'Unused upload sweep',
-  category: 'cleanup',
-  trigger: 'recurring scheduled task, daily',
-  purpose: 'remove uploaded media files that are no longer referenced.',
-  taskType: 'recurring-run',
-  intervalMs: 24 * 60 * 60 * 1000
-};
-
-function registerUnusedUploadSweepTask(options) {
-  const backgroundTaskQueue = options && options.backgroundTaskQueue;
-  const uploadSyncService = options && options.uploadSyncService;
-  const collectUploadPathsFromDirectory = uploadSyncService && uploadSyncService.collectUploadPathsFromDirectory;
-  const removeUnusedUploadFiles = uploadSyncService && uploadSyncService.removeUnusedUploadFiles;
-  const pool = options && options.pool;
-  const mediaDir = String(options && options.mediaDir || '').trim();
-
-  if (!backgroundTaskQueue || typeof collectUploadPathsFromDirectory !== 'function' || typeof removeUnusedUploadFiles !== 'function' || !pool || !mediaDir) {
-    throw new Error('registerUnusedUploadSweepTask requires the unused upload sweep dependencies.');
-  }
-
-  backgroundTaskQueue.registerRecurringTask({
-    key: TASK.key,
-    title: TASK.title,
-    category: TASK.category,
-    intervalMs: TASK.intervalMs,
-    metadata: {
-      mediaDir: mediaDir
-    },
-    run: async function () {
-      const uploadPaths = await collectUploadPathsFromDirectory(mediaDir);
-      if (!uploadPaths.length) {
-        return;
-      }
-
-      await removeUnusedUploadFiles(pool, mediaDir, uploadPaths);
-    }
-  });
-}
-
-module.exports = { registerUnusedUploadSweepTask };

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

@@ -1,4 +1,5 @@
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
+const { normalizeIntervalMs } = require('../queue');
 
 const TASK = {
   key: 'startup-data-source-refresh',
@@ -26,23 +27,52 @@ function scheduleStartupDataSourceRefreshes(options) {
     };
   }
 
+  function shouldRefreshAtStartup(source) {
+    const lastPulledAt = source && source.last_pulled_at ? new Date(source.last_pulled_at).getTime() : NaN;
+    if (!Number.isFinite(lastPulledAt)) {
+      return true;
+    }
+
+    const intervalMs = normalizeIntervalMs(source.update_interval_value, source.update_interval_unit);
+    return Date.now() - lastPulledAt >= intervalMs;
+  }
+
   return (async function () {
     const apiSourcesData = await common.fetchApiSourcesData(pool);
     const rssFeedsData = await common.fetchRssFeedsData(pool);
+    const weatherLocationsData = await common.fetchWeatherLocationsData(pool);
     const startupSources = [];
 
     (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return;
+      if (!shouldRefreshAtStartup(apiSource)) {
+        return;
+      }
       startupSources.push(buildStartupSource('api-source', apiSource.id, apiSource.name, function () {
         return refreshApiSource(pool, common, apiSource, null, options.notifyPlayerScreens);
       }));
     });
 
     (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return;
+      if (!shouldRefreshAtStartup(rssFeed)) {
+        return;
+      }
       startupSources.push(buildStartupSource('rss-feed', rssFeed.id, rssFeed.name, function () {
         return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null, options.notifyPlayerScreens);
       }));
     });
 
+    (weatherLocationsData.weatherLocations || []).forEach(function (location) {
+      if (location.enabled === 0 || location.enabled === false) return;
+      if (!shouldRefreshAtStartup(location)) {
+        return;
+      }
+      startupSources.push(buildStartupSource('weather-location', location.id, location.name, function () {
+        return refreshWeatherLocation(pool, common, location, null, options.notifyPlayerScreens);
+      }));
+    });
+
     // Stagger startup refreshes to avoid a burst against the DB/player.
     startupSources.forEach(function (source, index) {
       const startupDelayMs = index * staggerMs;
@@ -50,7 +80,7 @@ function scheduleStartupDataSourceRefreshes(options) {
       setTimeout(function () {
         backgroundTaskQueue.enqueueTask({
           key: TASK.key + ':' + source.type + ':' + source.id + ':' + Date.now(),
-          title: source.type === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh',
+          title: source.type === 'rss-feed' ? 'RSS feed refresh' : source.type === 'weather-location' ? 'Weather location refresh' : 'API source refresh',
           category: TASK.category,
           taskType: 'data-source-refresh',
           metadata: {

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/dashboard-state.js

@@ -25,7 +25,17 @@ function enrichScreensWithConnections(screens, connectionsBySlug, onboardingName
 function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, playerIdentifierByBaseUrl, formatDashboardDate) {
   return (screens || []).flatMap(function (screen) {
     const connectionState = connectionsBySlug[screen.slug] || { count: 0, connections: [] };
-    return (connectionState.connections || []).map(function (connection) {
+    const seenClientKeys = new Set();
+    return (connectionState.connections || []).filter(function (connection) {
+      const deviceId = String(connection && connection.deviceId || '').trim();
+      const clientId = String(connection && connection.clientId || '').trim();
+      const key = deviceId && clientId ? `${deviceId}:${clientId}` : String(connection && connection.id || '').trim();
+      if (seenClientKeys.has(key)) {
+        return false;
+      }
+      seenClientKeys.add(key);
+      return true;
+    }).map(function (connection) {
       const deviceId = String(connection.deviceId || '').trim();
       const playerBaseUrl = normalizePlayerBaseUrl(connection.playerPublicBaseUrl);
       return Object.assign({}, connection, {

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 {
@@ -153,6 +173,47 @@ async function refreshApiSource(pool, common, apiSourceOrId, actorId, notifyPlay
   }
 }
 
+async function refreshWeatherLocation(pool, common, weatherLocationOrId, actorId, notifyPlayerScreens) {
+  const connection = await pool.getConnection();
+  try {
+    const location = weatherLocationOrId && typeof weatherLocationOrId === 'object'
+      ? weatherLocationOrId
+      : await common.fetchWeatherLocationById(pool, Number(weatherLocationOrId));
+    if (!location) throw new Error('Weather location not found.');
+
+    let result = null;
+    let pullError = '';
+    try {
+      result = await common.fetchWeatherLocationForecast(pool, location);
+    } catch (error) {
+      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 = ?',
+      [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 (hasWeatherLocationChanged(location, result, refreshedAt) && typeof notifyPlayerScreens === 'function') {
+      try {
+        await notifyAffectedScreens(connection, common, notifyPlayerScreens, 'weather_location_id', location.id);
+      } catch (notifyError) {
+        console.warn('[data-source-refresh] Unable to notify players after weather refresh ' + location.id + ':', notifyError);
+      }
+    }
+  } catch (error) {
+    try { await connection.rollback(); } catch (_rollbackError) { }
+    throw error;
+  } finally {
+    connection.release();
+  }
+}
+
 async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, notifyPlayerScreens) {
   const connection = await pool.getConnection();
   try {
@@ -170,6 +231,10 @@ async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actor
     if (typeof common.replaceRssFeedItems === 'function') {
       await common.replaceRssFeedItems(connection, rssFeedId, updatedItems);
     }
+    await connection.query(
+      'UPDATE i_rss_feeds SET last_pulled_at = ? WHERE id = ?',
+      [new Date(), rssFeedId]
+    );
     await connection.commit();
 
     if (!pullError && rssFeedChanged) {
@@ -197,5 +262,6 @@ async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actor
 
 module.exports = {
   refreshApiSource: refreshApiSource,
-  refreshRssFeed: refreshRssFeed
+  refreshRssFeed: refreshRssFeed,
+  refreshWeatherLocation: refreshWeatherLocation
 };

src/web/lib/local-control-users.js

@@ -0,0 +1,26 @@
+const crypto = require('crypto');
+
+async function collectLocalControlUsers(pool) {
+  const [rows] = await pool.query(
+    `SELECT DISTINCT u.username, u.password_hash, u.password_salt
+       FROM a_users u
+       JOIN a_user_roles ur ON ur.user_id = u.id
+       JOIN a_role_permissions rp ON rp.role_id = ur.role_id
+       JOIN a_permissions p ON p.id = rp.permission_id
+      WHERE u.account_locked = 0
+        AND u.must_change_password = 0
+        AND p.permission_key = 'clients.allow'
+      ORDER BY u.username ASC`
+  );
+  return (rows || []).map(function (user) {
+    return {
+      username_hash: crypto.createHash('sha256').update(String(user && user.username || '').trim()).digest('hex'),
+      password_hash: String(user && user.password_hash || '').trim(),
+      password_salt: String(user && user.password_salt || '').trim()
+    };
+  }).filter(function (user) {
+    return Boolean(user.username_hash && user.password_hash && user.password_salt);
+  });
+}
+
+module.exports = { collectLocalControlUsers };

src/web/lib/media/library.js

@@ -0,0 +1,178 @@
+// Data access helpers for the shared media library.
+
+const fs = require('fs');
+const path = require('path');
+
+const MEDIA_MIME_TYPES = {
+  '.gif': 'image/gif',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.avi': 'video/x-msvideo',
+  '.mov': 'video/quicktime',
+  '.mp4': 'video/mp4',
+  '.mpeg': 'video/mpeg',
+  '.webm': 'video/webm'
+};
+
+function normalizeMediaPath(value) {
+  const mediaPath = String(value || '').trim();
+  return mediaPath.startsWith('/media/') ? mediaPath : null;
+}
+
+async function registerMediaAsset(pool, file, mediaPath, userId, options) {
+  const normalizedPath = normalizeMediaPath(mediaPath);
+  if (!pool || !file || !normalizedPath) {
+    return null;
+  }
+
+  await pool.query(
+    `INSERT INTO c_media_assets
+      (media_path, original_name, media_type, mime_type, file_size, is_published, created_by, modified_by)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+     ON DUPLICATE KEY UPDATE
+       ${options && options.preserveOriginalName ? 'original_name = original_name,' : 'original_name = VALUES(original_name),' }
+       media_type = VALUES(media_type),
+       mime_type = VALUES(mime_type),
+       file_size = VALUES(file_size),
+      ${options && options.preservePublication ? 'is_published = is_published,' : 'is_published = VALUES(is_published),' }
+       modified_by = VALUES(modified_by)`,
+    [
+      normalizedPath,
+      String(file.originalname || file.filename || 'media').slice(0, 255),
+      String(file.mediaType || '').trim() || 'unknown',
+      String(file.mimetype || '').trim() || 'application/octet-stream',
+      Number(file.size) || 0,
+      options && options.published === false ? 0 : 1,
+      userId || null,
+      userId || null
+    ]
+  );
+
+  return normalizedPath;
+}
+
+async function registerMediaAssets(pool, files, getMediaPath, getMediaType, userId, options) {
+  const registered = [];
+  const list = Array.isArray(files) ? files : [];
+  for (let index = 0; index < list.length; index += 1) {
+    const file = list[index];
+    const mediaPath = typeof getMediaPath === 'function' ? getMediaPath(file) : null;
+    if (!mediaPath) {
+      continue;
+    }
+    const enrichedFile = Object.assign({}, file, {
+      mediaType: typeof getMediaType === 'function' ? getMediaType(file) : 'unknown'
+    });
+    registered.push(await registerMediaAsset(pool, enrichedFile, mediaPath, userId, options));
+  }
+  return registered.filter(Boolean);
+}
+
+async function fetchMediaAssets(pool) {
+  const [rows] = await pool.query(
+    `SELECT id, media_path, original_name, media_type, mime_type, file_size, created_at
+      FROM c_media_assets
+      WHERE is_published = 1
+      ORDER BY created_at DESC, id DESC`
+  );
+  return rows || [];
+}
+
+async function syncMediaAssetsFromDirectory(pool, uploadDir, userId) {
+  const directory = String(uploadDir || '').trim();
+  if (!pool || !directory) {
+    return 0;
+  }
+
+  let entries;
+  try {
+    entries = await fs.promises.readdir(directory, { withFileTypes: true });
+  } catch (error) {
+    if (error && error.code === 'ENOENT') {
+      return 0;
+    }
+    throw error;
+  }
+
+  let registeredCount = 0;
+  for (const entry of entries) {
+    if (!entry || !entry.isFile()) {
+      continue;
+    }
+    const originalName = String(entry.name || '').trim();
+    const mimeType = MEDIA_MIME_TYPES[path.extname(originalName).toLowerCase()];
+    if (!mimeType) {
+      continue;
+    }
+    const filePath = path.join(directory, originalName);
+    const stats = await fs.promises.stat(filePath);
+    const result = await registerMediaAsset(pool, {
+      originalname: originalName,
+      mimetype: mimeType,
+      size: stats.size,
+      mediaType: mimeType.startsWith('video/') ? 'video' : 'image'
+    }, '/media/uploads/' + originalName, userId, { preserveOriginalName: true, preservePublication: true });
+    if (result) {
+      registeredCount += 1;
+    }
+  }
+  return registeredCount;
+}
+
+async function countMediaAssetReferences(pool, mediaPath) {
+  const normalizedPath = normalizeMediaPath(mediaPath);
+  if (!normalizedPath) {
+    return 0;
+  }
+  const [slideRows] = await pool.query(
+    `SELECT COUNT(*) AS ref_count
+       FROM c_slides
+      WHERE LOCATE(?, COALESCE(content_json, '')) > 0`,
+    [normalizedPath]
+  );
+  const [templateRows] = await pool.query(
+    'SELECT COUNT(*) AS ref_count FROM c_templates WHERE background_image_path = ?',
+    [normalizedPath]
+  );
+  return Number(slideRows[0] && slideRows[0].ref_count || 0) + Number(templateRows[0] && templateRows[0].ref_count || 0);
+}
+
+async function publishMediaAssets(pool, mediaPaths) {
+  const paths = Array.from(new Set((Array.isArray(mediaPaths) ? mediaPaths : []).map(normalizeMediaPath).filter(Boolean)));
+  for (let index = 0; index < paths.length; index += 1) {
+    await pool.query('UPDATE c_media_assets SET is_published = 1 WHERE media_path = ?', [paths[index]]);
+  }
+}
+
+async function removePendingMediaAssets(pool, uploadDir, mediaPaths) {
+  const paths = Array.from(new Set((Array.isArray(mediaPaths) ? mediaPaths : []).map(normalizeMediaPath).filter(Boolean)));
+  for (let index = 0; index < paths.length; index += 1) {
+    const mediaPath = paths[index];
+    const [rows] = await pool.query('SELECT id FROM c_media_assets WHERE media_path = ? AND is_published = 0 LIMIT 1', [mediaPath]);
+    const asset = rows && rows[0];
+    if (!asset || await countMediaAssetReferences(pool, mediaPath) > 0) {
+      continue;
+    }
+    await pool.query('DELETE FROM c_media_assets WHERE id = ?', [asset.id]);
+    const filePath = path.join(path.dirname(uploadDir), mediaPath.replace(/^\/media\//, ''));
+    await fs.promises.unlink(filePath).catch(function (error) {
+      if (error && error.code !== 'ENOENT') {
+        throw error;
+      }
+    });
+  }
+}
+
+module.exports = {
+  normalizeMediaPath,
+  registerMediaAsset,
+  registerMediaAssets,
+  fetchMediaAssets,
+  syncMediaAssetsFromDirectory,
+  countMediaAssetReferences,
+  publishMediaAssets,
+  removePendingMediaAssets
+};

src/web/lib/media/slide-thumbnail-preview.js

@@ -142,9 +142,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
 
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
-    return html
+    if (!html) {
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
+      return '';
-      : '';
+    }
+    if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+      return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml(html) + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>';
+    }
+    return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><div class="slide-preview-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div></div>';
   }
 
   if (regionType === 'rtmp') {
@@ -182,6 +186,7 @@ function buildThumbnailPreviewPayload(slide, options) {
     canvasWidth: canvasSize.width,
     canvasHeight: canvasSize.height,
     backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
+    backgroundGradient: template && template.background_gradient ? String(template.background_gradient) : '',
     backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
     fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
     html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl)

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

@@ -2,6 +2,8 @@
 
 const fs = require('fs');
 const path = require('path');
+const crypto = require('crypto');
+const vm = require('vm');
 const {
   escapeHtml,
   mediaKind,
@@ -10,7 +12,14 @@ const {
   sanitizeFontSize,
   sanitizeTextColor
 } = require('#src/player/render-helpers');
-const { createRequestAuthHeaders } = require('#src/request-auth');
+const { createRequestAuthHeaders, createPageAuthToken } = require('#src/request-auth');
+const { convertWeatherSnapshot } = require('#src/data/weather-units');
+
+const placeholderUtils = (() => {
+  const sandbox = { window: {} };
+  vm.runInNewContext(fs.readFileSync(path.join(__dirname, '..', '..', 'public', 'js', 'shared', 'placeholder-utils.js'), 'utf8'), sandbox);
+  return sandbox.window.placeholderUtils || {};
+})();
 
 const SYSTEM_CHROMIUM_PATHS = [
   process.env.PUPPETEER_EXECUTABLE_PATH,
@@ -124,11 +133,89 @@ function hasVisibleContent(html) {
   return Boolean(raw.replace(/<[^>]+>/g, '').trim());
 }
 
-function buildTextRegionMarkup(region, regionContent) {
+function resolvePlaceholderPath(value, expression) {
+  const pathValue = String(expression || '').replace(/\.image\s*\([^)]*\)\s*$/i, '').trim();
+  return pathValue.split('.').reduce(function (current, segment) {
+    return current === undefined || current === null ? '' : current[segment];
+  }, value);
+}
+
+function getImagePlaceholderConfig(expression) {
+  const match = String(expression || '').match(/\.image\s*\(\s*([0-9]+)?\s*,?\s*([0-9]+)?\s*\)/i);
+  return {
+    width: match && match[1] ? Number(match[1]) : 0,
+    height: match && match[2] ? Number(match[2]) : 0
+  };
+}
+
+function normalizeWeatherExpression(expression) {
+  const value = String(expression || '').trim();
+  const currentAliases = { temp: 'current.temperature_2m', feels_like: 'current.apparent_temperature', humidity: 'current.relative_humidity_2m', wind: 'current.wind_speed_10m', precip: 'current.precipitation', uv_index: 'current.uv_index', cloud_cover: 'current.cloud_cover', icon: 'current.weather_code.icon' };
+  const globalAliases = { temp_unit: 'temperature_unit', wind_unit: 'wind_speed_unit', precip_unit: 'precipitation_unit' };
+  if (globalAliases[value]) return globalAliases[value];
+  const currentField = value.replace(/^current\./, '').match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  if (currentField && currentAliases[currentField[1]]) return currentAliases[currentField[1]] + (currentField[2] || '');
+  const indexed = value.match(/^(daily|hourly)\.(\d+)\.(.+)$/);
+  if (!indexed) return value;
+  const fieldMatch = indexed[3].match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  const field = fieldMatch ? fieldMatch[1] : indexed[3];
+  const aliases = indexed[1] === 'daily' ? { time: 'time', temp_max: 'temperature_2m_max', temp_min: 'temperature_2m_min', precip: 'precipitation_sum', wind: 'wind_speed_10m_max', uv_index: 'uv_index_max', cloud_cover: 'cloud_cover_mean', sunrise: 'sunrise', sunset: 'sunset', icon: 'weather_code' } : { time: 'time', temp: 'temperature_2m', precip: 'precipitation', wind: 'wind_speed_10m', uv_index: 'uv_index', cloud_cover: 'cloud_cover', icon: 'weather_code' };
+  if (!Object.prototype.hasOwnProperty.call(aliases, field)) return value;
+  return field === 'icon' ? indexed[1] + '.' + aliases[field] + '.' + indexed[2] + '.icon' + (fieldMatch[2] || '') : indexed[1] + '.' + aliases[field] + '.' + indexed[2] + (fieldMatch[2] || '');
+}
+
+function weatherIconForCode(code) {
+  const value = Number(code);
+  if (value === 0) return 'bi-sun';
+  if (value <= 3) return 'bi-cloud-sun';
+  if (value <= 48) return 'bi-cloud-fog';
+  if (value <= 67 || value > 77 && value <= 82) return 'bi-cloud-rain';
+  if (value <= 77) return 'bi-cloud-snow';
+  return 'bi-cloud-lightning-rain';
+}
+
+function substitutePlaceholders(html, regionContent, options) {
+  const source = String(html || '');
+  const type = String(regionContent && regionContent.type || '').trim().toLowerCase();
+  const item = options && typeof options.getItem === 'function' ? options.getItem(type, regionContent) : null;
+  if (!item) return source;
+  return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/gi, function (_match, expression) {
+    const weatherExpression = type === 'weather' ? normalizeWeatherExpression(expression) : expression;
+    const resolved = typeof placeholderUtils.resolvePlaceholderExpression === 'function'
+      ? placeholderUtils.resolvePlaceholderExpression(item, weatherExpression, { timeZone: item.timezone })
+      : resolvePlaceholderPath(item, expression);
+    if (typeof placeholderUtils.isProgressPlaceholderExpression === 'function' && placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return placeholderUtils.renderProgressPlaceholder(item, expression);
+    }
+    if (type === 'weather' && /(?:^|\.)weather_code\.\d+\.icon(?:\(|$)|^current\.weather_code\.icon/.test(weatherExpression)) {
+      const codeExpression = weatherExpression.replace(/\.icon(?:\(.*\))?$/, '');
+      const iconSize = String(expression).match(/\.icon\(\s*(\d+)(?:\s*,\s*(\d+))?\s*\)$/);
+      const width = iconSize ? Number(iconSize[1]) : 0;
+      const height = iconSize && iconSize[2] ? Number(iconSize[2]) : width;
+      const sizeStyle = width ? ' style="display:inline-block;width:' + width + 'px;height:' + height + 'px;font-size:' + width + 'px;line-height:' + height + 'px;"' : '';
+      return '<i class="bi ' + weatherIconForCode(placeholderUtils.resolvePlaceholderExpression(item, codeExpression)) + '"' + sizeStyle + ' aria-hidden="true"></i>';
+    }
+    const value = typeof placeholderUtils.formatPlaceholderValue === 'function' ? placeholderUtils.formatPlaceholderValue(resolved) : String(resolved || '');
+    if (typeof placeholderUtils.isImagePlaceholderExpression !== 'function' || !placeholderUtils.isImagePlaceholderExpression(expression)) {
+      return escapeHtml(value);
+    }
+    const remoteUrl = String(value || '').trim();
+    if (!/^https?:\/\//i.test(remoteUrl)) return '';
+    const imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : getImagePlaceholderConfig(expression);
+    const cacheFile = options && typeof options.getCachedImagePath === 'function' ? options.getCachedImagePath(remoteUrl) : '';
+    const imageUrl = cacheFile || remoteUrl;
+    const style = imageConfig.width && imageConfig.height
+      ? 'display:block;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;object-fit:contain;'
+      : 'display:block;max-width:' + (imageConfig.width || 100) + 'px;max-height:' + (imageConfig.height || 100) + 'px;width:auto;height:auto;';
+    return '<img src="' + escapeHtml(resolveAssetUrl(options && options.baseUrl, imageUrl)) + '" alt="" style="' + style + '" />';
+  });
+}
+
+function buildTextRegionMarkup(region, regionContent, options) {
   const fontFamily = sanitizeFontFamily(regionContent.font_family || region.font_family);
   const fontSize = sanitizeFontSize(regionContent.font_size || region.font_size);
   const fontColor = sanitizeTextColor(regionContent.font_color || region.font_color);
-  const renderedBody = renderEditorJsContent(regionContent.value || '');
+  const renderedBody = renderEditorJsContent(substitutePlaceholders(regionContent.value || '', regionContent, options));
   if (!hasVisibleContent(renderedBody)) {
     return '';
   }
@@ -136,7 +223,7 @@ function buildTextRegionMarkup(region, regionContent) {
   return '<div class="slide-preview-region slide-preview-text-region" style="' + region.baseStyle + '"><div class="slide-preview-text-content" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;overflow:hidden;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
 }
 
-function buildRegionInnerHtml(region, regionContent, baseUrl) {
+function buildRegionInnerHtml(region, regionContent, baseUrl, options) {
   const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
   const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');
 
@@ -155,10 +242,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   }
 
   if (regionType === 'webpage') {
-    const src = resolveAssetUrl(baseUrl, rawValue);
+    return '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><div class="slide-preview-webpage-placeholder" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.14);box-sizing:border-box;color:rgba(255,255,255,0.72);font-size:24px;font-family:Arial,sans-serif;">Webpage preview unavailable</div></div>';
-    return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
-      : '';
   }
 
   if (regionType === 'qr-code') {
@@ -172,9 +256,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
 
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
-    return html
+    if (!html) {
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
+      return '';
-      : '';
+    }
+    if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+      return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml(html) + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>';
+    }
+    return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><div class="slide-preview-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div></div>';
   }
 
   if (regionType === 'rtmp') {
@@ -182,7 +270,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
     return '<div class="slide-preview-region slide-preview-rtmp-region" style="' + region.baseStyle + '"><div class="slide-preview-rtmp-placeholder">' + escapeHtml(label) + '</div></div>';
   }
 
-  return buildTextRegionMarkup(region, regionContent);
+  return buildTextRegionMarkup(region, regionContent, Object.assign({}, options, { baseUrl: baseUrl }));
 }
 
 async function loadChromium() {
@@ -199,7 +287,7 @@ function loadSharp() {
   return require('sharp');
 }
 
-function buildThumbnailPreviewMarkup(slide, baseUrl) {
+function buildThumbnailPreviewMarkup(slide, baseUrl, options) {
   const template = slide && slide.template ? slide.template : null;
   if (!template) {
     return '';
@@ -214,7 +302,7 @@ function buildThumbnailPreviewMarkup(slide, baseUrl) {
       pixelWidth: Math.max(1, Math.round(Number(region && region.width || 0) || 1)),
       pixelHeight: Math.max(1, Math.round(Number(region && region.height || 0) || 1))
     });
-    return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl);
+    return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl, options);
   }).join('');
 }
 
@@ -226,9 +314,10 @@ function buildThumbnailPreviewPayload(slide, options) {
     canvasWidth: canvasSize.width,
     canvasHeight: canvasSize.height,
     backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
+    backgroundGradient: template && template.background_gradient ? String(template.background_gradient) : '',
     backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
     fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
-    html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl)
+    html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl, options)
   };
 }
 
@@ -253,8 +342,7 @@ async function launchBrowser() {
       args: [
         '--no-sandbox',
         '--disable-setuid-sandbox',
-        '--disable-dev-shm-usage',
+        '--disable-dev-shm-usage'
-        '--disable-gpu'
       ],
       defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 1 },
       executablePath: executablePath,
@@ -291,6 +379,74 @@ async function captureSlideThumbnail(options) {
     throw new Error('Slide not found.');
   }
 
+  const rssFeedsData = typeof common.fetchRssFeedsData === 'function' ? await common.fetchRssFeedsData(pool) : { rssFeeds: [] };
+  const rssFeeds = await Promise.all((rssFeedsData.rssFeeds || []).map(async function (feed) {
+    const items = typeof common.fetchRssFeedItemsByFeedId === 'function' ? await common.fetchRssFeedItemsByFeedId(pool, feed.id) : [];
+    return Object.assign({}, feed, { items: items });
+  }));
+  const apiSourcesData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
+  const apiSources = (apiSourcesData.apiSources || []).map(function (source) {
+    return Object.assign({}, source, { responseJson: common.parseJsonSafe ? common.parseJsonSafe(source.last_response_json) : null });
+  });
+  const weatherLocationsData = typeof common.fetchWeatherLocationsData === 'function' ? await common.fetchWeatherLocationsData(pool) : { weatherLocations: [] };
+  const weatherLocations = (weatherLocationsData.weatherLocations || []).map(function (location) {
+    let snapshot = null;
+    try {
+      snapshot = JSON.parse(location.last_response_json || '');
+    } catch (_error) {
+      snapshot = null;
+    }
+    if (!snapshot || typeof snapshot !== 'object') return null;
+    const temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
+    const windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
+    const precipitationUnit = location.precipitation_unit === 'inch' ? 'in' : 'mm';
+    const data = Object.assign({}, convertWeatherSnapshot(snapshot, { temperature: location.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius', wind: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'ms' : 'kmh', precipitation: location.precipitation_unit === 'inch' ? 'inch' : 'mm' }), { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: temperatureUnit, wind_unit: windUnit, precip_unit: precipitationUnit });
+    data.current = Object.assign({}, data.current || {}, { temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+    data.daily = Object.assign({}, data.daily || {}, { temperature_unit: temperatureUnit });
+    return { id: location.id, data: data };
+  }).filter(Boolean);
+
+  function getApiItems(source) {
+    const response = source && source.responseJson;
+    const itemsPath = String(source && source.items_path || '').trim();
+    if (itemsPath) {
+      const selected = itemsPath.split('.').reduce(function (current, segment) {
+        return current === undefined || current === null ? '' : current[segment];
+      }, response);
+      return Array.isArray(selected) ? selected : [];
+    }
+    if (Array.isArray(response)) return response;
+    if (response && Array.isArray(response.items)) return response.items;
+    if (response && Array.isArray(response.results)) return response.results;
+    if (response && Array.isArray(response.data)) return response.data;
+    return response ? [response] : [];
+  }
+
+  function getThumbnailItem(type, regionContent) {
+    const index = Math.max(0, Math.max(1, Number(regionContent && regionContent.item_number || 1)) - 1);
+    if (type === 'api') {
+      const source = apiSources.find(function (entry) { return Number(entry.id) === Number(regionContent.source_id); });
+      return getApiItems(source)[index] || null;
+    }
+    if (type === 'rss') {
+      const feed = rssFeeds.find(function (entry) { return Number(entry.id) === Number(regionContent.feed_id); });
+      return feed && Array.isArray(feed.items) ? feed.items[index] || null : null;
+    }
+    if (type === 'weather') {
+      const location = weatherLocations.find(function (entry) { return Number(entry.id) === Number(regionContent.weather_location_id); });
+      return location ? location.data : null;
+    }
+    return null;
+  }
+
+  function getCachedImagePath(remoteUrl) {
+    const hash = crypto.createHash('sha256').update(String(remoteUrl || '')).digest('hex');
+    const cacheDir = path.join(mediaDir, 'player-cache', 'remote-images');
+    const candidates = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'];
+    const candidate = candidates.map(function (extension) { return path.join(cacheDir, hash + extension); }).find(function (filePath) { return fs.existsSync(filePath); });
+    return candidate ? '/media/player-cache/remote-images/' + path.basename(candidate) : '';
+  }
+
   const thumbnailDir = path.join(mediaDir, 'thumbnails');
   const thumbnailRelativePath = String(slide.thumbnail_path || '').trim() || '/media/thumbnails/slides/slide-' + slide.id + '.png';
   const filePath = path.join(mediaDir, thumbnailRelativePath.replace(/^\/+media\//, ''));
@@ -306,14 +462,9 @@ async function captureSlideThumbnail(options) {
     }, { timeout: 30000 });
 
     await page.waitForFunction(function () {
-      var canvas = document.querySelector('#popup-preview-canvas');
+      var videos = Array.prototype.slice.call(document.querySelectorAll('#popup-preview-canvas video'));
-      if (!canvas) {
+      return videos.every(function (video) {
-        return false;
+        return video.readyState >= 2;
-      }
-
-      var images = Array.prototype.slice.call(canvas.querySelectorAll('img'));
-      return images.every(function (image) {
-        return image.complete && typeof image.naturalWidth === 'number';
       });
     }, { timeout: 30000 });
 
@@ -322,17 +473,13 @@ async function captureSlideThumbnail(options) {
         try {
           await document.fonts.ready;
         } catch (_error) {
-          // Ignore font readiness failures and fall back to the rendered frame.
+          return null;
         }
       }
     });
 
-    await page.evaluate(function () {
+    await new Promise(function (resolve) {
-      return new Promise(function (resolve) {
+      setTimeout(resolve, 1000);
-        window.requestAnimationFrame(function () {
-          window.requestAnimationFrame(resolve);
-        });
-      });
     });
   }
 
@@ -340,28 +487,49 @@ async function captureSlideThumbnail(options) {
   try {
     const page = await browser.newPage();
     try {
-      const previewPath = '/api/internal/slide-thumbnails/' + slide.id + '/popup-preview';
+      const previewPath = '/api/internal/slide-thumbnails/' + encodeURIComponent(String(slide.id)) + '/popup-preview';
       const previewUrl = baseUrl + previewPath;
-      const previewPayload = buildThumbnailPreviewPayload(slide, {
+      const canvasSize = getThumbnailCanvasSize(slide);
-        baseUrl: baseUrl,
-        fontStylesheetHref: options && options.fontStylesheetHref ? options.fontStylesheetHref : ''
-      });
       await page.setViewport({
-          width: Math.max(1, Number(previewPayload.canvasWidth || PLAYER_VIEWPORT.width)),
+        width: Math.max(1, Number(canvasSize.width || PLAYER_VIEWPORT.width)),
-          height: Math.max(1, Number(previewPayload.canvasHeight || PLAYER_VIEWPORT.height)),
+        height: Math.max(1, Number(canvasSize.height || PLAYER_VIEWPORT.height)),
         deviceScaleFactor: 1
       });
-      await page.setExtraHTTPHeaders(createRequestAuthHeaders({
+      await page.setExtraHTTPHeaders(Object.assign({}, createRequestAuthHeaders({
         method: 'GET',
         pathname: previewPath
+      }), {
+        'x-pulse-page-auth': createPageAuthToken({ scope: 'thumbnail-preview', slideId: slide.id })
       }));
-      await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      const previewResponse = await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      if (!previewResponse || previewResponse.status() >= 400) {
+        throw new Error('Popup preview returned HTTP ' + (previewResponse ? previewResponse.status() : 'no response') + '.');
+      }
       await waitForThumbnailRender(page);
       const canvas = await page.$('#popup-preview-canvas');
       if (!canvas) {
         throw new Error('Popup preview did not produce a slide canvas.');
       }
-      await canvas.screenshot({ path: fullSizePath });
+      await page.evaluate(function () {
+        var canvasElement = document.querySelector('#popup-preview-canvas');
+        if (canvasElement) {
+          canvasElement.style.transform = 'none';
+          canvasElement.style.transformOrigin = 'top left';
+        }
+      });
+      const canvasBounds = await canvas.boundingBox();
+      if (!canvasBounds) {
+        throw new Error('Popup preview canvas has no screenshot bounds.');
+      }
+      await page.screenshot({
+        path: fullSizePath,
+        clip: {
+          x: Math.max(0, canvasBounds.x),
+          y: Math.max(0, canvasBounds.y),
+          width: Math.max(1, canvasBounds.width),
+          height: Math.max(1, canvasBounds.height)
+        }
+      });
     } finally {
       await page.close().catch(function () {
         return null;