Release v2.5.4

.gitignore

@@ -3,6 +3,7 @@ media/
 !src/web/lib/media/
 !src/web/lib/media/**
 docker-compose.dev.yml
+/dev-demo-seed.js
 .vscode/
 .env
 npm-debug.log*

CHANGELOG.md

@@ -2,6 +2,137 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.5.4 - 2026-08-03
+
+### Changed
+
+- The API source bearer token field now uses a password input with a right-side toggle to show or hide the token.
+
+### Fixed
+
+- QR code regions now render at the correct size in the slide editor preview, and the QR chip header now matches the other region cards.
+- The dashboard onboarding link now uses the player public base URL stored in the database instead of a `/screen/...` URL.
+
+## 2.5.3 - 2026-08-03
+
+### Changed
+
+- The user edit page delete action now shows a confirmation prompt before removing an account.
+
+### Fixed
+
+- Schedule modal cancel now restores the original rule set instead of keeping edits made after the modal opened.
+
+## 2.5.2 - 2026-08-03
+
+### Changed
+
+- Player page auth now writes a cookie for websocket reuse, and player and announcement sockets accept that cookie so they no longer depend on query-string tokens.
+- RSS and API region placeholder panels now use shared field-aware chip rendering, with updated spacing and defaults across the slide editor.
+- RTMP regions now default audio to enabled in the editor, and the slide rich-text editor no longer allows anchor tags.
+
+### Fixed
+
+- Player websocket auth now falls back to the `pulse_page_auth` cookie when the auth query parameter is unavailable.
+
+## 2.5.1 - 2026-08-03
+
+### Added
+
+- Template regions now include a dedicated advanced animation modal for editing intro, outro, and Attention Seekers settings directly.
+
+### Changed
+
+- Template region animation settings now store as a single JSON object with `intro`, `outro`, and `loop` keys.
+- The template editor advanced animation field now edits the JSON object directly instead of separate preset selects.
+- Animate.css is now loaded from vendored assets so template previews and player rendering use the local copy.
+
+### Fixed
+
+- Existing databases now migrate legacy animation columns into `animation_json` and then drop the old columns.
+
+## 2.5.0 - 2026-08-03
+
+### Added
+
+- Template regions now support intro, exit, and Attention Seekers animation presets in the editor, with in-canvas preview controls.
+
+### Changed
+
+- The template editor now locks editing while preview playback is running so animation changes are easier to inspect.
+
+### Fixed
+
+- Existing databases now receive the template region animation columns through the versioned migration path.
+
+## 2.4.2 - 2026-08-02
+
+### Added
+
+- Screen-level controls are now shown on the dashboard for quicker access to screen actions.
+- Connected clients can now be moved to another screen from the dashboard, and the player redirects to the new screen after the binding updates.
+- Playlist slide config now includes a mute toggle for video and RTMP items, and the player honors the stored mute state during playback.
+
+### Changed
+
+- Playlist canvas lock now stores `canvas_id` on `c_playlists` and links directly to `c_canvas_sizes`.
+- Playlist add and edit now keep the selected canvas size tied to the playlist form flow, so canvas changes stay consistent while editing.
+- RBAC permission sections now follow the same order as the admin sidebar, with section spacing kept in 10-point increments.
+- Admin add/edit pages now share form view-model helpers and common form shells across data sources, signage, RBAC, and user settings, reducing duplicated template markup.
+- Playlist editing now goes through a shared form page helper with dedicated schedule-rule cards and drag sorting, keeping slide rows and rule state in sync.
+- Data sources now use per-section route modules for API sources, RSS feeds, and timetables, while the shared controller only keeps the root `/data-sources` redirect.
+- The consolidated admin shell also refreshed shared layout, toast, login, and error rendering to match the newer helper registration flow.
+- Connected client row actions now use consistent icon-and-label buttons for pause and blackout across the server-rendered page and live dashboard updates.
+
+### Fixed
+
+- Canvas filtering for playlist slides now follows the selected canvas size id instead of a derived signature.
+- Saving API sources and RSS feeds no longer throws an internal server error after the route split, because the shared data-source refresh task service is wired through the web bootstrap again.
+
+## 2.4.1 - 2026-08-02
+
+### Changed
+
+- Playlist canvas size is now stored on `c_playlists.canvas_signature` and the migration backfills existing single-canvas playlists.
+
+### Fixed
+
+- Playlist canvas sizing no longer relies on startup bootstrap logic.
+
+## 2.4.0 - 2026-08-02
+
+### Added
+
+- Playlist slide scheduling now supports multiple OR-ed rule blocks instead of a single date-or-time schedule.
+
+### Changed
+
+- Playlist slide schedule data now stores rule sets in `schedule_rules_json`, and the migration backfills legacy schedule columns before dropping them.
+
+### Fixed
+
+- Legacy `schedule_mode`, date, time, and day columns are removed from `c_playlist_slides` after the new rule schema is installed.
+
+## 2.3.0 - 2026-08-02
+
+### Added
+
+- Shared add/edit form templates now cover API sources, RSS feeds, announcements, canvas sizes, screens, and templates, reducing duplicate page markup.
+- Schedule data source CRUD was added for grouped events in the admin UI.
+- The schedule region was added for rendering grouped events in slides and player playback.
+- Schedule data now flows through `scheduleGroups` in the slide editor and player payloads, letting the schedule region show upcoming or current entries from a selected group.
+
+### Changed
+
+- Admin save actions were standardized around the shared `saveActionButtons` helper, including save, save-and-close, save-and-new, cancel, and delete controls.
+- Admin routes and page renderers now route through the shared form/view helpers instead of separate add/edit templates for the refactored sections.
+- Toast, error, login, and shared layout rendering were refreshed to line up with the consolidated admin shell and helper registration flow.
+
+### Fixed
+
+- Canvas size defaults now seed only once during bootstrap when `c_canvas_sizes` is empty, instead of running from the schema layout path on every startup.
+- The schema bootstrap file is now limited to table layout definitions, with one-time seed data handled by the bootstrap layer.
+
 ## 2.2.2 - 2026-08-01
 
 ### Fixed

Dockerfile

@@ -9,6 +9,9 @@ RUN npm install --omit=dev --no-audit --no-fund
 
 COPY src ./src
 
+RUN mkdir -p /app/src/web/public/vendor/animate.css && cp /app/node_modules/animate.css/animate.min.css /app/src/web/public/vendor/animate.css/animate.min.css
+RUN mkdir -p /app/src/player/public/vendor/animate.css && cp /app/node_modules/animate.css/animate.min.css /app/src/player/public/vendor/animate.css/animate.min.css
+
 RUN mkdir -p /app/media
 
 EXPOSE 3000

README.md

@@ -1,104 +1,81 @@
 # Pulse Signage
 
-Pulse Signage is a digital signage system that lets you manage screens, playlists, slides, templates, and uploaded media from one admin interface.
+Pulse Signage is a self-hosted digital signage platform built for teams that want clear, flexible control over what appears on every screen.
 
-It runs as two connected services:
+It gives you one place to manage playlists, slides, templates, screen assignments, announcements, data-driven content, and live player control without handing that workflow to a third-party service.
 
-- the web admin app for managing content and screens
-- the player app that shows the current signage on each screen and listens for live updates
+## Why It Stands Out
 
-## What You Can Do
+- Keep signage under your own control.
+- Build polished screen experiences with reusable templates and playlists.
+- Push announcements, schedules, RSS feeds, API content, and other dynamic content to screens.
+- See what is live, what is queued, and what needs attention from a single admin dashboard.
+- Use the same system for everyday signage, timed messages, and more structured information displays.
 
-- Sign in to the admin dashboard
-- Create and organize playlists and slides
-- Design reusable templates and canvas sizes
-- Register screens and assign playlists to them
-- Manage roles and permissions for the admin web UI
-- Upload images and other media for use in slides and templates
-- View live screen connections and send player commands
+## What It Handles
 
-Admin permissions are split into CRUD actions per section, so you can grant read-only, editor, creator, or delete access separately.
+- Screens and playlist assignments.
+- Slides, templates, and canvas sizes.
+- Announcements and screen-specific targeting.
+- RSS feeds, API sources, and schedule-based content.
+- Roles and permissions for admin access.
+- Background tasks and scheduled refresh jobs.
+- Player onboarding and live playback control.
 
-## What You Need
+## Simple Deployment
 
-- Docker and Docker Compose
-- A MySQL database
+Pulse Signage ships with a Docker Compose stack for the published image:
 
-## First-Time Setup
+- Published-image stack: `docker compose -f docker-compose.yml up -d`
 
-When the app starts for the first time, it creates the database tables it needs and adds a default admin account if no users exist yet.
+Use this stack when you want to run the tagged image instead of building from source.
+
+## Environment File
+
+The compose files read from a root `.env` file. Start by copying `.env.example` to `.env`, then adjust the values for your setup.
+
+The variables are split by who uses them:
+
+Shared across the stack:
+
+- `PULSE_SIGNAGE_IMAGE`
+- `PULSE_SIGNAGE_SHARED_SECRET`
+
+Web container:
+
+- `SESSION_MAX_AGE_DAYS`
+- `DEFAULT_ADMIN_USERNAME`
+- `DEFAULT_ADMIN_NAME`
+- `DEFAULT_ADMIN_PASSWORD`
+- `PASSWORD_HASH_ITERATIONS`
+
+Player container:
+
+- `PLAYER_PUBLIC_BASE_URL`
+- `PLAYER_INTERNAL_BASE_URL`
+
+MySQL container:
+
+- `DB_HOST`
+- `DB_PORT`
+- `DB_NAME`
+- `DB_USER`
+- `DB_PASSWORD`
+- `MYSQL_ROOT_PASSWORD`
+
+`DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, and `DB_PASSWORD` are shared in practice because both app containers talk to the same database service.
+
+`PLAYER_INTERNAL_BASE_URL` is used by the web side for server-to-player calls, while `PLAYER_PUBLIC_BASE_URL` is used for browser-facing player links.
+
+## First-Time Use
+
+The first startup seeds a default admin account if the database is empty.
 
 - Username: `admin`
 - Password: `admin`
 
-The first admin account is placed into the built-in `Administrators` role, which has full web-admin access through the CRUD permissions.
+## In Practice
 
-You can change the initial admin credentials with these optional environment variables:
+Pulse Signage is designed to feel focused and reliable rather than heavy or noisy. It works well when you want a clean internal signage system for offices, venues, dashboards, or any environment where screens need to stay up to date without a lot of manual effort.
 
-- `DEFAULT_ADMIN_USERNAME`
-- `DEFAULT_ADMIN_NAME`
-- `DEFAULT_ADMIN_PASSWORD`
-
-## Configuration
-
-The app reads its settings from environment variables. The list below matches the provided `.env.example` file.
-
-### Compose and Shared Settings
-
-- `PULSE_SIGNAGE_IMAGE` - image tag used by the published Compose setup, default `git.lzstealth.com/lzstealth/pulse-signage:latest`
-- `PULSE_SIGNAGE_SHARED_SECRET` - shared secret used to sign player page API fetches and server-to-player requests; page tokens auto-renew while the page stays active and request signatures must be fresh; leave unset to keep the auth checks disabled for compatibility
-
-### Database Connection
-
-- `DB_HOST` - MySQL host, default `mysql`
-- `DB_PORT` - MySQL port, default `3306`
-- `DB_NAME` - database name, default `pulse-signage`
-- `DB_USER` - database user, default `pulse-signage`
-- `DB_PASSWORD` - database password, default `signage_password`
-- `MYSQL_ROOT_PASSWORD` - root password for the bundled MySQL container, default `root_password`
-
-### Player App
-
-- `PLAYER_INTERNAL_BASE_URL` - internal player URL used by the web app, default `http://player:8081`
-- `PLAYER_PUBLIC_BASE_URL` - public player URL used by browser-facing links, default `http://localhost:8081`
-
-### Web App
-
-- `SESSION_MAX_AGE_DAYS` - admin session lifetime in days, default `14`
-- `DEFAULT_ADMIN_USERNAME` - username used for the initial admin account, default `admin`
-- `DEFAULT_ADMIN_NAME` - display name used for the initial admin account, default `Admin`
-- `DEFAULT_ADMIN_PASSWORD` - password used for the initial admin account, default `admin`
-- `PASSWORD_HASH_ITERATIONS` - password hash iteration count, default `310000`
-
-## Docker Compose
-
-The repository includes a `docker-compose.yml` file that starts three services:
-
-- `web` - the admin app exposed on container port `8080`
-- `player` - the signage player exposed on container port `8081`
-- `mysql` - the database on port `3306`
-
-Change the published host ports in Docker Compose if you want different external ports; the app containers listen on `8080` and `8081` internally.
-
-By default, `web` and `player` use the published image from `git.lzstealth.com/lzstealth/pulse-signage:latest`. You can point both services at a specific release by setting `PULSE_SIGNAGE_IMAGE` to a tagged image such as `git.lzstealth.com/lzstealth/pulse-signage:v1.0.0`.
-
-The Compose file also defines a shared `media` volume for stored assets and a `mysql_data` volume for database persistence.
-
-In Docker, media storage is controlled by the `media` volume mount at `/app/media`.
-Outside Docker, the web app and player do not have to use the same upload location or even the same server, as long as each service can access its own configured media path.
-
-## Important Notes
-
-- The web app must be able to reach the player through `PLAYER_INTERNAL_BASE_URL`.
-- When running in Docker, that value should point to the Docker service name, not `localhost`.
-- If `PULSE_SIGNAGE_SHARED_SECRET` is set, the web and player containers must use the same value, and any reverse proxy in front of the player must forward `/api/media/...` without rewriting the path.
-- Uploaded media is stored separately from the application source, so make sure it is backed up if you are not using Docker volumes.
-- The player page uses the browser Screen Wake Lock API when available, but kiosk mode and OS sleep settings still matter because the browser can deny or release the wake lock.
-
-## Documentation
-
-Player-facing API details live in [docs/api.md](docs/api.md). It covers the player HTTP endpoints for screen playback, playlist data, connections, and commands.
-
-Database schema details live in [docs/schema.md](docs/schema.md). It summarizes the current tables created at startup.
-
-Player websocket behavior lives in [docs/websocket.md](docs/websocket.md). It covers the player control socket, snapshot stream, and the command/message shapes the player accepts.
+The player and admin pieces stay linked, so changes made in the dashboard can flow out to screens quickly and consistently.

docker-compose.yml

@@ -1,7 +1,6 @@
 services:
   web:
     image: ${PULSE_SIGNAGE_IMAGE:-git.lzstealth.com/lzstealth/pulse-signage:latest}
-    container_name: signage-web
     restart: unless-stopped
     ports:
       - "8080:8080"
@@ -29,12 +28,12 @@ services:
 
   player:
     image: ${PULSE_SIGNAGE_IMAGE:-git.lzstealth.com/lzstealth/pulse-signage:latest}
-    container_name: signage-player
     restart: unless-stopped
     ports:
       - "8081:8081"
     environment:
       PLAYER_PUBLIC_BASE_URL: ${PLAYER_PUBLIC_BASE_URL:-http://localhost:8081}
+      PLAYER_INTERNAL_BASE_URL: ${PLAYER_INTERNAL_BASE_URL:-http://player:8081}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}
@@ -52,7 +51,6 @@ services:
 
   mysql:
     image: mysql:8.4
-    container_name: signage-mysql
     restart: unless-stopped
     environment:
       MYSQL_DATABASE: ${DB_NAME:-signage}

docs/schema.md

@@ -55,11 +55,12 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 ## Content
 
 - `c_canvas_sizes` - reusable canvas presets for templates.
-- `c_playlists` - playlist definitions and playback options.
+- `c_playlists` - playlist definitions, playback options, and canvas assignment.
 - `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_playlist_slides` - ordered playlist items, timing, and schedule rules.
+- `c_playlist_slides` - ordered playlist items and timing.
+- `c_playlist_slide_schedule_rules` - rule rows attached to playlist slides.
 
 ### `c_canvas_sizes`
 
@@ -68,7 +69,9 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `c_playlists`
 
-- `id`, `name`, `fade_between_slides`, `skip_unavailable_rtmp`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `fade_between_slides`, `skip_unavailable_rtmp`, `canvas_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `canvas_id` -> `c_canvas_sizes.id` with `ON DELETE SET NULL`
 
 ### `c_templates`
 
@@ -78,7 +81,7 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `c_template_regions`
 
-- `id`, `template_id`, `region_key`, `region_type`, `label`, `lock_ratio`, `x`, `y`, `width`, `height`, `z_index`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `template_id`, `region_key`, `region_type`, `label`, `font_family`, `lock_ratio`, `animation_json`, `x`, `y`, `width`, `height`, `z_index`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - Foreign key:
         - `template_id` -> `c_templates.id` with `ON DELETE CASCADE`
 
@@ -90,11 +93,22 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `c_playlist_slides`
 
-- `id`, `playlist_id`, `slide_id`, `position`, `duration_seconds`, `use_video_duration`, `schedule_mode`, `schedule_start_datetime`, `schedule_end_datetime`, `schedule_start_time`, `schedule_end_time`, `schedule_days_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `playlist_id`, `slide_id`, `position`, `duration_seconds`, `use_video_duration`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - Foreign keys:
         - `playlist_id` -> `c_playlists.id` with `ON DELETE CASCADE`
         - `slide_id` -> `c_slides.id` with `ON DELETE CASCADE`
 
+### `c_playlist_slide_schedule_rules`
+
+- `id`, `playlist_slide_id`, `position`, `start_datetime`, `end_datetime`, `start_time`, `end_time`, `schedule_days_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `playlist_slide_id` -> `c_playlist_slides.id` with `ON DELETE CASCADE`
+- Index:
+        - `(playlist_slide_id, position)`
+
+- Each playlist slide can have zero or more schedule rules.
+- Rules are evaluated with OR across rows and with AND across the fields inside a single rule.
+
 ## Devices
 
 - `d_players` - player registry and connection metadata.
@@ -150,6 +164,8 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 - `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_schedule_groups` - grouped schedule definitions used by the schedule region.
+- `i_schedule_entries` - dated entries that belong to a schedule group.
 
 ### `i_rss_feeds`
 
@@ -167,6 +183,18 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 - `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`
 
+### `i_schedule_groups`
+
+- `id`, `name`, `short_description`, `created_at`, `created_by`, `modified_at`, `modified_by`
+
+### `i_schedule_entries`
+
+- `id`, `schedule_group_id`, `title`, `short_description`, `start_datetime`, `end_datetime`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `schedule_group_id` -> `i_schedule_groups.id` with `ON DELETE CASCADE`
+- Index:
+        - `(schedule_group_id, start_datetime)`
+
 ## Operations
 
 - `o_background_tasks` - queue and history for background jobs.
@@ -179,243 +207,58 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 ## Notes
 
 - The schema is initialized with `CREATE TABLE IF NOT EXISTS`, so new installs can start from an empty database.
-- `src/db/index.js` also seeds default permissions and the default administrator role.
+- `src/db/bootstrap.js` seeds the canvas size defaults, default permissions, and the default administrator role.
 - The migration module stays in place for future releases, but this version treats the current schema as the install baseline.
 
 ```mermaid
 erDiagram
         A_USERS {
-                INT id
-                VARCHAR name
-                VARCHAR username
-                CHAR password_hash
-                VARCHAR password_salt
-                INT password_iterations
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         A_ROLES {
-                INT id
-                VARCHAR role_key
-                VARCHAR name
-                TEXT description
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         A_PERMISSIONS {
-                INT id
-                VARCHAR permission_key
-                VARCHAR name
-                VARCHAR section_name
-                TEXT description
-                TIMESTAMP created_at
-                TIMESTAMP modified_at
         }
         A_ROLE_PERMISSIONS {
-                INT role_id
-                INT permission_id
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         A_USER_ROLES {
-                INT user_id
-                INT role_id
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         A_SESSIONS {
-                CHAR session_hash
-                INT user_id
-                DATETIME expires_at
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP last_used_at
-                INT modified_by
         }
         C_CANVAS_SIZES {
-                INT id
-                VARCHAR name
-                INT width
-                INT height
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         C_PLAYLISTS {
-                INT id
-                VARCHAR name
-                TINYINT fade_between_slides
-                TINYINT skip_unavailable_rtmp
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         C_TEMPLATES {
-                INT id
-                VARCHAR name
-                INT canvas_size_id
-                VARCHAR background_image_path
-                VARCHAR background_color
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         C_TEMPLATE_REGIONS {
-                INT id
-                INT template_id
-                VARCHAR region_key
-                VARCHAR region_type
-                VARCHAR label
-                VARCHAR font_family
-                VARCHAR lock_ratio
-                INT x
-                INT y
-                INT width
-                INT height
-                INT z_index
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         C_SLIDES {
-                INT id
-                VARCHAR title
-                INT template_id
-                JSON content_json
-                VARCHAR thumbnail_path
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         C_PLAYLIST_SLIDES {
-                INT id
-                INT playlist_id
-                INT slide_id
-                INT position
-                DECIMAL duration_seconds
-                TINYINT use_video_duration
-                VARCHAR schedule_mode
-                DATETIME schedule_start_datetime
-                DATETIME schedule_end_datetime
-                TIME schedule_start_time
-                TIME schedule_end_time
-                JSON schedule_days_json
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
+        }
+        C_PLAYLIST_SLIDE_SCHEDULE_RULES {
         }
         D_PLAYERS {
-                INT device_id
-                VARCHAR public_base_url
-                VARCHAR internal_base_url
-                TIMESTAMP last_seen_at
-                TIMESTAMP created_at
-                TIMESTAMP modified_at
         }
         D_SCREENS {
-                INT id
-                VARCHAR name
-                VARCHAR slug
-                INT playlist_id
-                INT player_id
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         D_ONBOARDING_DEVICES {
-                VARCHAR device_id
-                VARCHAR client_name
-                INT screen_id
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         D_ANNOUNCEMENTS {
-                INT id
-                TEXT message
-                VARCHAR short_label
-                VARCHAR announcement_type
-                VARCHAR color_key
-                VARCHAR icon_key
-                INT duration_seconds
-                TIMESTAMP expires_at
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         D_ANNOUNCEMENT_SCREENS {
-                INT announcement_id
-                INT screen_id
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         I_RSS_FEEDS {
-                INT id
-                VARCHAR name
-                VARCHAR feed_url
-                INT update_interval_value
-                VARCHAR update_interval_unit
-                INT item_limit
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         I_RSS_FEED_ITEMS {
-                INT id
-                INT rss_feed_id
-                INT position
-                MEDIUMTEXT item_json
-                TIMESTAMP created_at
-                INT created_by
-                TIMESTAMP modified_at
-                INT modified_by
         }
         I_API_SOURCES {
-                INT id
-                VARCHAR name
-                VARCHAR api_url
-                INT update_interval_value
-                VARCHAR update_interval_unit
-                TIMESTAMP last_pulled_at
-                MEDIUMTEXT last_pull_error
-                INT last_response_status
-                VARCHAR last_response_content_type
-                MEDIUMTEXT last_response_json
+        }
+        I_SCHEDULE_GROUPS {
+        }
+        I_SCHEDULE_ENTRIES {
         }
         O_BACKGROUND_TASKS {
-                BIGINT id
-                VARCHAR task_key
-                VARCHAR task_type
-                VARCHAR title
-                VARCHAR category
-                VARCHAR status
-                MEDIUMTEXT payload_json
-                MEDIUMTEXT metadata_json
-                INT attempts
-                TIMESTAMP created_at
-                TIMESTAMP started_at
-                TIMESTAMP finished_at
-                MEDIUMTEXT error_message
         }
 
         A_USERS ||--o{ A_USER_ROLES : has
@@ -425,10 +268,12 @@ erDiagram
         A_USERS ||--o{ A_SESSIONS : owns
 
         C_CANVAS_SIZES ||--o{ C_TEMPLATES : used_by
+        C_CANVAS_SIZES ||--o{ C_PLAYLISTS : used_by
         C_TEMPLATES ||--o{ C_TEMPLATE_REGIONS : contains
         C_TEMPLATES ||--o{ C_SLIDES : used_by
         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
 
         D_PLAYERS ||--o{ D_SCREENS : assigned_to
         C_PLAYLISTS ||--o{ D_SCREENS : uses
@@ -437,4 +282,5 @@ erDiagram
         D_SCREENS ||--o{ D_ANNOUNCEMENT_SCREENS : receives
 
         I_RSS_FEEDS ||--o{ I_RSS_FEED_ITEMS : caches
+        I_SCHEDULE_GROUPS ||--o{ I_SCHEDULE_ENTRIES : contains
 ```

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "pulse-signage",
-  "version": "2.1.0",
+  "version": "2.5.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.0.0",
+      "version": "2.5.4",
       "dependencies": {
         "@sparticuz/chromium": "^137.0.0",
+        "animate.css": "^4.1.1",
         "bootstrap-icons": "1.11.3",
         "cropperjs": "^1.6.2",
         "dotenv": "^17.4.2",
@@ -19,6 +20,7 @@
         "mysql2": "^3.14.3",
         "puppeteer-core": "^24.16.0",
         "qrcode": "^1.5.4",
+        "qrcode-generator": "^2.0.4",
         "sharp": "^0.35.3",
         "ws": "^8.21.0"
       },
@@ -755,6 +757,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2701,6 +2709,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/qrcode-generator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-2.0.4.tgz",
+      "integrity": "sha512-mZSiP6RnbHl4xL2Ap5HfkjLnmxfKcPWpWe/c+5XxCuetEenqmNFf1FH/ftXPCtFG5/TDobjsjz6sSNL0Sr8Z9g==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.15.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.2.2",
+  "version": "2.5.4",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "repository": {
@@ -13,10 +13,12 @@
     "start:web": "node -r dotenv/config src/web.js",
     "start:player": "node -r dotenv/config src/player.js",
     "dev:web": "nodemon -r dotenv/config src/web.js",
-    "dev:player": "nodemon -r dotenv/config src/player.js"
+    "dev:player": "nodemon -r dotenv/config src/player.js",
+    "test": "node --test"
   },
   "dependencies": {
     "@sparticuz/chromium": "^137.0.0",
+    "animate.css": "^4.1.1",
     "bootstrap-icons": "1.11.3",
     "cropperjs": "^1.6.2",
     "dotenv": "^17.4.2",
@@ -27,6 +29,7 @@
     "mysql2": "^3.14.3",
     "puppeteer-core": "^24.16.0",
     "qrcode": "^1.5.4",
+    "qrcode-generator": "^2.0.4",
     "sharp": "^0.35.3",
     "ws": "^8.21.0"
   },

src/common.js

@@ -27,6 +27,7 @@ const dbBootstrap = require('#src/db/bootstrap');
 const data = require('#src/data');
 const player = require('#src/player/render');
 const listQuery = require('#src/web/lib/list-query');
+const { fetchPlaylistCanvasId, fetchPlaylistCanvasSignature } = require('#src/web/lib/helpers');
 
 module.exports = {
   createPool: dbCommon.createPool,
@@ -59,6 +60,14 @@ module.exports = {
   getSortQuery: listQuery.getSortQuery,
   getSortDirectionQuery: listQuery.getSortDirectionQuery,
   fetchPlaylistById: data.fetchPlaylistById,
+  fetchPlaylistCanvasId: fetchPlaylistCanvasId,
+  fetchPlaylistCanvasSignature: fetchPlaylistCanvasSignature,
+  normalizeDisplayMode: data.normalizeDisplayMode,
+  fetchTimetablesData: data.fetchTimetablesData,
+  fetchTimetableGroupsPage: data.fetchTimetableGroupsPage,
+  fetchTimetableGroupById: data.fetchTimetableGroupById,
+  fetchTimetableEntriesByGroupId: data.fetchTimetableEntriesByGroupId,
+  buildTimetableGroupPayload: data.buildTimetableGroupPayload,
   fetchApiSourcesData: data.fetchApiSourcesData,
   fetchApiSourcesPage: data.fetchApiSourcesPage,
   fetchApiSourceById: data.fetchApiSourceById,

src/data/admin.js

@@ -14,7 +14,7 @@ async function fetchAdminData(pool) {
   `);
   const [templateRegions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions ORDER BY template_id ASC, z_index ASC, id ASC');
   const [slides] = await pool.query(`
-    SELECT s.id, s.title, s.template_id, s.content_json, s.thumbnail_path, s.created_at, s.modified_at, s.created_by, s.modified_by, st.name AS template_name, cs.width AS canvas_width, cs.height AS canvas_height,
+    SELECT s.id, s.title, s.template_id, s.content_json, s.thumbnail_path, s.created_at, s.modified_at, s.created_by, s.modified_by, st.name AS template_name, st.canvas_size_id, cs.width AS canvas_width, cs.height AS canvas_height,
            (SELECT COUNT(DISTINCT ps.playlist_id) FROM c_playlist_slides ps WHERE ps.slide_id = s.id) AS playlist_count
     FROM c_slides s
     LEFT JOIN c_templates st ON st.id = s.template_id
@@ -22,20 +22,42 @@ async function fetchAdminData(pool) {
     ORDER BY s.id DESC
   `);
   const [screens] = await pool.query(`
-    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name
+    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name, pl.public_base_url
     FROM d_screens s
     LEFT JOIN c_playlists p ON p.id = s.playlist_id
+    LEFT JOIN d_players pl ON pl.device_id = s.player_id
     ORDER BY s.id DESC
   `);
   const [playlistSlides] = await pool.query(`
-    SELECT ps.id, ps.playlist_id, ps.position, ps.duration_seconds, ps.use_video_duration, ps.schedule_mode, ps.schedule_start_datetime, ps.schedule_end_datetime, ps.schedule_start_time, ps.schedule_end_time, ps.schedule_days_json, sl.id AS slide_id, sl.title, sl.content_json, sl.thumbnail_path, cs.width AS canvas_width, cs.height AS canvas_height
+    SELECT ps.id, ps.playlist_id, ps.position, ps.duration_seconds, ps.use_video_duration, ps.disable_audio, sl.id AS slide_id, sl.title, sl.content_json, sl.thumbnail_path, st.canvas_size_id, cs.width AS canvas_width, cs.height AS canvas_height
     FROM c_playlist_slides ps
     JOIN c_slides sl ON sl.id = ps.slide_id
     LEFT JOIN c_templates st ON st.id = sl.template_id
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     ORDER BY ps.playlist_id ASC, ps.position ASC, ps.id ASC
   `);
-  return { playlists, canvasSizes, templates, templateRegions, slides, screens, playlistSlides };
+  const [playlistScheduleRules] = await pool.query(`
+    SELECT id, playlist_slide_id, position, start_datetime, end_datetime, start_time, end_time, schedule_days_json, created_at, modified_at, created_by, modified_by
+    FROM c_playlist_slide_schedule_rules
+    ORDER BY playlist_slide_id ASC, position ASC, id ASC
+  `);
+
+  const rulesBySlideId = new Map();
+  playlistScheduleRules.forEach(function (rule) {
+    const slideId = Number(rule.playlist_slide_id);
+    if (!rulesBySlideId.has(slideId)) {
+      rulesBySlideId.set(slideId, []);
+    }
+    rulesBySlideId.get(slideId).push(rule);
+  });
+
+  const playlistSlidesWithRules = playlistSlides.map(function (slide) {
+    return Object.assign({}, slide, {
+      scheduleRules: rulesBySlideId.get(Number(slide.id)) || []
+    });
+  });
+
+  return { playlists, canvasSizes, templates, templateRegions, slides, screens, playlistSlides: playlistSlidesWithRules };
 }
 
 async function fetchPlaylistsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {

src/data/index.js

@@ -4,6 +4,7 @@ const { fetchAdminData, fetchPlaylistsPage, fetchSlidesPage, fetchTemplatesPage,
 const { ANNOUNCEMENT_TYPES, ANNOUNCEMENT_COLORS, ANNOUNCEMENT_ICONS, DEFAULT_ANNOUNCEMENT_ICON, normalizeAnnouncementType, normalizeAnnouncementColor, normalizeAnnouncementIcon, fetchAnnouncementsPage, fetchAnnouncementById, fetchActiveAnnouncement, buildAnnouncementPayload } = require('./announcements');
 const { ANNOUNCEMENT_ICON_OPTIONS, ANNOUNCEMENT_ICON_LABELS } = require('./announcement-icons');
 const { fetchPlaylistById } = require('./playlists');
+const { normalizeDisplayMode, fetchTimetablesData, fetchTimetableGroupsPage, fetchTimetableGroupById, fetchTimetableEntriesByGroupId, buildTimetableGroupPayload } = require('./schedules');
 const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
 const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchScreenPlayerRecord } = require('./screens');
@@ -36,6 +37,12 @@ module.exports = {
   fetchActiveAnnouncement,
   buildAnnouncementPayload,
   fetchPlaylistById,
+  normalizeDisplayMode,
+  fetchTimetablesData,
+  fetchTimetableGroupsPage,
+  fetchTimetableGroupById,
+  fetchTimetableEntriesByGroupId,
+  buildTimetableGroupPayload,
   fetchApiSourcesData,
   fetchApiSourcesPage,
   fetchApiSourceById,

src/data/playlists.js

@@ -1,7 +1,7 @@
 // Playlist data access helpers.
 
 async function fetchPlaylistById(pool, id) {
-  const [rows] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM c_playlists WHERE id = ?', [id]);
+  const [rows] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, canvas_id, created_at, modified_at, created_by, modified_by FROM c_playlists WHERE id = ?', [id]);
   return rows[0] || null;
 }
 

src/data/qr-code.js

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

src/data/schedules.js

@@ -0,0 +1,120 @@
+// Timetable group and entry data access helpers.
+
+const { fetchPagedRows } = require('./utils');
+
+function normalizeDisplayMode(value) {
+  const mode = String(value || 'upcoming').trim().toLowerCase();
+  if (mode === 'current' || mode === 'both') {
+    return mode;
+  }
+  return 'upcoming';
+}
+
+async function fetchTimetablesData(pool) {
+  const [timetableGroups] = await pool.query(`
+    SELECT g.id, g.name, g.short_description, g.created_at, g.modified_at, g.created_by, g.modified_by,
+           (SELECT COUNT(*) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
+           (SELECT MIN(e.start_datetime) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
+    FROM i_schedule_groups g
+    ORDER BY g.modified_at DESC, g.id DESC
+  `);
+  const [timetableEntries] = await pool.query(`
+    SELECT id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, modified_at, created_by, modified_by
+    FROM i_schedule_entries
+    ORDER BY schedule_group_id ASC, start_datetime ASC, id ASC
+  `);
+
+  const entriesByGroupId = new Map();
+  timetableEntries.forEach(function (entry) {
+    const groupId = Number(entry.schedule_group_id);
+    if (!entriesByGroupId.has(groupId)) {
+      entriesByGroupId.set(groupId, []);
+    }
+    entriesByGroupId.get(groupId).push(entry);
+  });
+
+  const groups = timetableGroups.map(function (group) {
+    return Object.assign({}, group, {
+      entries: entriesByGroupId.get(Number(group.id)) || []
+    });
+  });
+
+  return {
+    timetableGroups: groups,
+    timetableEntries: timetableEntries
+  };
+}
+
+async function fetchTimetableGroupsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
+  const paged = await fetchPagedRows(pool, {
+    selectSql: `SELECT g.id, g.name, g.short_description, g.created_at, g.modified_at, g.created_by, g.modified_by,
+           (SELECT COUNT(*) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
+           (SELECT MIN(e.start_datetime) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
+    FROM i_schedule_groups g
+    ORDER BY g.modified_at DESC, g.id DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM i_schedule_groups',
+    searchColumns: ['g.name', 'g.short_description'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'g.name',
+      description: 'g.short_description',
+      entries: 'entry_count',
+      next_start: 'next_start_datetime',
+      created: 'g.created_at',
+      modified: 'g.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    page: page,
+    pageSize: pageSize
+  });
+
+  return Object.assign({ timetableGroups: paged.rows }, paged);
+}
+
+async function fetchTimetableGroupById(pool, id) {
+  const [rows] = await pool.query(
+    'SELECT id, name, short_description, created_at, modified_at, created_by, modified_by FROM i_schedule_groups WHERE id = ?',
+    [id]
+  );
+
+  return rows[0] || null;
+}
+
+async function fetchTimetableEntriesByGroupId(pool, timetableGroupId) {
+  const [rows] = await pool.query(
+    `SELECT id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, modified_at, created_by, modified_by
+     FROM i_schedule_entries
+     WHERE schedule_group_id = ?
+     ORDER BY start_datetime ASC, id ASC`,
+    [timetableGroupId]
+  );
+
+  return rows;
+}
+
+function buildTimetableGroupPayload(req, existingTimetableGroup) {
+  const fallback = existingTimetableGroup || {};
+  const name = String(req.body.name || fallback.name || '').trim();
+  const shortDescription = String(req.body.short_description || req.body.shortDescription || fallback.short_description || '').trim();
+
+  if (!name) {
+    const error = new Error('Timetable group name is required.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  return {
+    name: name,
+    shortDescription: shortDescription
+  };
+}
+
+module.exports = {
+  normalizeDisplayMode,
+  fetchTimetablesData,
+  fetchTimetableGroupsPage,
+  fetchTimetableGroupById,
+  fetchTimetableEntriesByGroupId,
+  buildTimetableGroupPayload
+};

src/data/slides.js

@@ -2,6 +2,7 @@
 
 const { fetchTemplateById } = require('./templates');
 const { parseJsonSafe } = require('./utils');
+const { buildQrCodeContent } = require('./qr-code');
 
 const ALLOWED_RICH_TEXT_TAGS = ['b', 'strong', 'i', 'em', 'u', 'br', 'p', 'div', 'ul', 'ol', 'li'];
 const DEFAULT_FONT_SIZE = 32;
@@ -49,7 +50,7 @@ function normalizeEditorMarkup(value) {
 async function fetchSlideById(pool, id) {
   const [slides] = await pool.query(`
     SELECT s.id, s.title, s.template_id, s.content_json, s.thumbnail_path, s.created_at, s.modified_at,
-           st.name AS template_name, cs.name AS canvas_size_name, cs.width AS canvas_width, cs.height AS canvas_height
+           st.name AS template_name, st.canvas_size_id, cs.name AS canvas_size_name, cs.width AS canvas_width, cs.height AS canvas_height
     FROM c_slides s
     LEFT JOIN c_templates st ON st.id = s.template_id
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -142,6 +143,14 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         type: 'webpage',
         value: submitted === undefined ? current : String(submitted || '').trim()
       };
+    } else if (region.region_type === 'qr-code') {
+      const submitted = body[`region_qr_code_${region.id}`];
+      const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+      const nextValue = submitted === undefined ? String(current.value !== undefined ? current.value : current.qr_code || '').trim() : String(submitted || '').trim();
+      content[region.region_key] = {
+        type: 'qr-code',
+        value: nextValue
+      };
     } else if (region.region_type === 'rtmp') {
       const submitted = body[`region_rtmp_${region.id}`];
       const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
@@ -202,7 +211,7 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         font_size: style.font_size,
         font_color: style.font_color
       };
-    } else if (!['text', 'image', 'video', 'webpage', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
+    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
       const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
       const suffix = '_' + region.id;
       const generic = {};
@@ -273,10 +282,22 @@ async function buildSlidePayload(pool, req, existingSlide) {
   }
 
   if (template) {
+    const content = buildTemplateContent(template, req.body, filesByField, existingContent);
+    await Promise.all(Object.keys(content).map(async function (regionKey) {
+      const region = template.regions.find(function (item) {
+        return String(item.region_key || '').trim() === regionKey;
+      });
+      if (!region || region.region_type !== 'qr-code') {
+        return;
+      }
+
+      content[regionKey] = await buildQrCodeContent(content[regionKey].value);
+    }));
+
     return {
       title,
       templateId: template.id,
-      contentJson: JSON.stringify(buildTemplateContent(template, req.body, filesByField, existingContent))
+      contentJson: JSON.stringify(content)
     };
   }
 

src/data/templates.js

@@ -1,6 +1,7 @@
 // Template data access helpers and region normalization logic.
 
 const { parseJsonSafe, readFormArray } = require('./utils');
+const animationPresets = require('../web/public/js/templates/animation-presets');
 
 function sanitizeBackgroundColor(value) {
   const raw = String(value || '').trim();
@@ -23,6 +24,61 @@ function normalizeTemplateRegionLockRatio(value) {
   return rawRatio.replace(/\s+/g, '');
 }
 
+function normalizeTemplateRegionAnimation(value) {
+  if (animationPresets && typeof animationPresets.normalize === 'function') {
+    return animationPresets.normalize(value);
+  }
+
+  const allowed = new Set(
+    Array.isArray(animationPresets && animationPresets.allValues) && animationPresets.allValues.length
+      ? animationPresets.allValues
+      : ['none', 'fadeIn', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp', 'fadeOut', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp', 'backInDown', 'backInLeft', 'backInRight', 'backInUp', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp', 'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce']
+  );
+  const raw = String(value || '').trim().toLowerCase();
+  return allowed.has(raw) ? raw : 'none';
+}
+
+function normalizeTemplateRegionAnimationStep(value, fallbackPreset) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const normalized = {};
+    Object.keys(value).forEach((key) => {
+      normalized[key] = value[key];
+    });
+    normalized.preset = normalizeTemplateRegionAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
+    return normalized;
+  }
+
+  return {
+    preset: normalizeTemplateRegionAnimation(typeof value === 'string' ? value : fallbackPreset || 'none')
+  };
+}
+
+function normalizeTemplateRegionAnimationConfig(value) {
+  let raw = value;
+  if (typeof raw === 'string') {
+    const 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: normalizeTemplateRegionAnimationStep(raw.intro, 'none'),
+    outro: normalizeTemplateRegionAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+    loop: normalizeTemplateRegionAnimationStep(raw.loop, 'none')
+  };
+}
+
 function normalizeTemplateRegionName(value) {
   return String(value || '').trim();
 }
@@ -57,7 +113,7 @@ async function fetchTemplateById(pool, id) {
     return null;
   }
   const template = templates[0];
-  const [regions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id = ? ORDER BY z_index ASC, id ASC', [id]);
+  const [regions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id = ? ORDER BY z_index ASC, id ASC', [id]);
   template.regions = regions;
   return template;
 }
@@ -70,7 +126,7 @@ async function fetchTemplatesData(pool) {
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     ORDER BY st.id DESC
   `);
-  const [templateRegions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions ORDER BY template_id ASC, z_index ASC, id ASC');
+  const [templateRegions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions ORDER BY template_id ASC, z_index ASC, id ASC');
   return { templates, templateRegions };
 }
 
@@ -86,6 +142,7 @@ function extractTemplateRegions(body) {
           region_type: regionType,
           label: String(region.region_name || region.label || region.region_key || '').trim(),
           lock_ratio: normalizeTemplateRegionLockRatio(region.lock_ratio),
+          animation_json: normalizeTemplateRegionAnimationConfig(region.animation_json),
           x: Number(region.x || 0),
           y: Number(region.y || 0),
           width: Number(region.width || 100),
@@ -101,6 +158,7 @@ function extractTemplateRegions(body) {
   const labels = readFormArray(body, 'region_label[]');
   const types = readFormArray(body, 'region_type[]');
   const ratios = readFormArray(body, 'region_lock_ratio[]');
+  const animationJsons = readFormArray(body, 'region_animation_json[]');
   const xs = readFormArray(body, 'region_x[]');
   const ys = readFormArray(body, 'region_y[]');
   const widths = readFormArray(body, 'region_width[]');
@@ -120,6 +178,7 @@ function extractTemplateRegions(body) {
       region_type: regionType,
       label: name,
       lock_ratio: normalizeTemplateRegionLockRatio(ratios[i]),
+      animation_json: normalizeTemplateRegionAnimationConfig(animationJsons[i]),
       x: Number(xs[i] || 0),
       y: Number(ys[i] || 0),
       width: Number(widths[i] || 100),

src/db/bootstrap.js

@@ -1,7 +1,19 @@
-const { hashPassword } = require('../auth');
-const { PERMISSIONS, DEFAULT_ROLE } = require('../rbac');
+const { hashPassword } = require('#src/auth');
+const { PERMISSIONS, DEFAULT_ROLE } = require('#src/rbac');
 
 async function bootstrapDatabase(pool) {
+  const [canvasSizeCountRows] = await pool.query('SELECT COUNT(*) AS canvas_size_count FROM c_canvas_sizes');
+  if (!canvasSizeCountRows.length || Number(canvasSizeCountRows[0].canvas_size_count) === 0) {
+    await pool.query(`
+      INSERT IGNORE INTO c_canvas_sizes (name, width, height) VALUES
+        ('Full HD', 1920, 1080),
+        ('HD', 1280, 720),
+        ('4K UHD', 3840, 2160),
+        ('Portrait Full HD', 1080, 1920),
+        ('Portrait HD', 720, 1280)
+    `);
+  }
+
   for (const permission of PERMISSIONS) {
     await pool.query(
       `INSERT INTO a_permissions (permission_key, name, section_name, description, created_by, modified_by)

src/db/common.js

@@ -7,6 +7,7 @@ function createPool() {
     user: process.env.DB_USER || 'signage_user',
     password: process.env.DB_PASSWORD || 'signage_password',
     database: process.env.DB_NAME || 'signage',
+    timezone: 'Z',
     waitForConnections: true,
     connectionLimit: 10,
     namedPlaceholders: true

src/db/index.js

@@ -20,10 +20,12 @@ async function ensureSchema(pool, options) {
       name VARCHAR(255) NOT NULL,
       fade_between_slides TINYINT(1) NOT NULL DEFAULT 0,
       skip_unavailable_rtmp TINYINT(1) NOT NULL DEFAULT 0,
+      canvas_id INT 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
+      modified_by INT NULL,
+      CONSTRAINT fk_playlists_canvas FOREIGN KEY (canvas_id) REFERENCES c_canvas_sizes(id) ON DELETE SET NULL
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
@@ -41,15 +43,6 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
-  await pool.query(`
-    INSERT IGNORE INTO c_canvas_sizes (name, width, height) VALUES
-      ('Full HD', 1920, 1080),
-      ('HD', 1280, 720),
-      ('4K UHD', 3840, 2160),
-      ('Portrait Full HD', 1080, 1920),
-      ('Portrait HD', 720, 1280)
-  `);
-
   await pool.query(`
     CREATE TABLE IF NOT EXISTS c_template_regions (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -59,6 +52,7 @@ async function ensureSchema(pool, options) {
       label VARCHAR(255) NOT NULL,
       font_family VARCHAR(100) NULL,
       lock_ratio VARCHAR(20) NULL,
+      animation_json JSON NULL,
       x INT NOT NULL DEFAULT 0,
       y INT NOT NULL DEFAULT 0,
       width INT NOT NULL DEFAULT 100,
@@ -93,12 +87,7 @@ async function ensureSchema(pool, options) {
       position INT NOT NULL DEFAULT 0,
       duration_seconds DECIMAL(10,3) NOT NULL DEFAULT 10.000,
       use_video_duration TINYINT(1) NOT NULL DEFAULT 0,
-      schedule_mode VARCHAR(20) NOT NULL DEFAULT 'always',
-      schedule_start_datetime DATETIME NULL,
-      schedule_end_datetime DATETIME NULL,
-      schedule_start_time TIME NULL,
-      schedule_end_time TIME NULL,
-      schedule_days_json JSON NULL,
+      disable_audio 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,
@@ -108,6 +97,25 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS c_playlist_slide_schedule_rules (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      playlist_slide_id INT NOT NULL,
+      position INT NOT NULL DEFAULT 0,
+      start_datetime DATETIME NULL,
+      end_datetime DATETIME NULL,
+      start_time TIME NULL,
+      end_time TIME NULL,
+      schedule_days_json JSON 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,
+      CONSTRAINT fk_playlist_slide_schedule_rules_slide FOREIGN KEY (playlist_slide_id) REFERENCES c_playlist_slides(id) ON DELETE CASCADE,
+      INDEX idx_playlist_slide_schedule_rules_slide_position (playlist_slide_id, position)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS d_screens (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -206,6 +214,35 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS i_schedule_groups (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(255) NOT NULL,
+      short_description 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,
+      modified_by INT NULL
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS i_schedule_entries (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      schedule_group_id INT NOT NULL,
+      title VARCHAR(255) NOT NULL,
+      short_description VARCHAR(255) NULL,
+      start_datetime DATETIME NOT NULL,
+      end_datetime 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,
+      modified_by INT NULL,
+      CONSTRAINT fk_schedule_entries_group FOREIGN KEY (schedule_group_id) REFERENCES i_schedule_groups(id) ON DELETE CASCADE,
+      INDEX idx_schedule_entries_group_start (schedule_group_id, start_datetime)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS d_onboarding_devices (
       device_id VARCHAR(128) PRIMARY KEY,

src/db/migrations.js

@@ -55,16 +55,7 @@ const VERSIONED_MIGRATIONS = [
       }
 
       // Recreate the screen-to-player foreign key after the column exists and legacy data is copied over.
-      const [screenPlayerFkRows] = await pool.query(
-        `SELECT COUNT(*) AS fk_count
-         FROM information_schema.KEY_COLUMN_USAGE
-         WHERE TABLE_SCHEMA = DATABASE()
-           AND TABLE_NAME = 'd_screens'
-           AND CONSTRAINT_NAME = 'fk_screens_player'`
-      );
-      if (Number(screenPlayerFkRows && screenPlayerFkRows[0] && screenPlayerFkRows[0].fk_count) === 0) {
-        await pool.query('ALTER TABLE d_screens ADD CONSTRAINT fk_screens_player FOREIGN KEY (player_id) REFERENCES d_players(device_id) ON DELETE RESTRICT');
-      }
+      await ensureForeignKey(pool, 'd_screens', 'fk_screens_player', 'player_id', 'd_players', 'device_id', 'RESTRICT');
 
       if (await columnExists(pool, 'c_template_regions', 'font_family')) {
         await pool.query('ALTER TABLE c_template_regions DROP COLUMN font_family');
@@ -107,7 +98,70 @@ const VERSIONED_MIGRATIONS = [
           INDEX idx_announcements_modified_at (modified_at)
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
       `);
+    }
+  },
+  {
+    version: '2.4.0',
+    label: 'v2.4.0 playlist schedule rules schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS c_playlist_slide_schedule_rules (
+          id INT AUTO_INCREMENT PRIMARY KEY,
+          playlist_slide_id INT NOT NULL,
+          position INT NOT NULL DEFAULT 0,
+          start_datetime DATETIME NULL,
+          end_datetime DATETIME NULL,
+          start_time TIME NULL,
+          end_time TIME NULL,
+          schedule_days_json JSON 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,
+          CONSTRAINT fk_playlist_slide_schedule_rules_slide FOREIGN KEY (playlist_slide_id) REFERENCES c_playlist_slides(id) ON DELETE CASCADE,
+          INDEX idx_playlist_slide_schedule_rules_slide_position (playlist_slide_id, position)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
 
+      const legacyColumnNames = [
+        'schedule_mode',
+        'schedule_start_datetime',
+        'schedule_end_datetime',
+        'schedule_start_time',
+        'schedule_end_time',
+        'schedule_days_json',
+        'schedule_rules_json'
+      ];
+      const existingLegacyColumns = [];
+      for (const columnName of legacyColumnNames) {
+        if (await columnExists(pool, 'c_playlist_slides', columnName)) {
+          existingLegacyColumns.push(columnName);
+        }
+      }
+
+      const selectColumns = ['id'].concat(existingLegacyColumns).join(', ');
+      const [legacyRows] = await pool.query('SELECT ' + selectColumns + ' FROM c_playlist_slides');
+
+      for (const row of legacyRows) {
+        const rules = normalizeLegacyScheduleRules(row);
+        if (rules.length) {
+          for (let index = 0; index < rules.length; index += 1) {
+            const rule = rules[index];
+            await pool.query(
+              'INSERT INTO c_playlist_slide_schedule_rules (playlist_slide_id, position, start_datetime, end_datetime, start_time, end_time, schedule_days_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, NULL, NULL)',
+              [row.id, index, rule.start_datetime || null, rule.end_datetime || null, rule.start_time || null, rule.end_time || null, rule.schedule_days_json ? JSON.stringify(rule.schedule_days_json) : null]
+            );
+          }
+        }
+      }
+
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_rules_json');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_mode');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_start_datetime');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_end_datetime');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_start_time');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_end_time');
+      await dropColumnIfExists(pool, 'c_playlist_slides', 'schedule_days_json');
       await pool.query(`
         CREATE TABLE IF NOT EXISTS d_announcement_screens (
           announcement_id INT NOT NULL,
@@ -123,6 +177,41 @@ const VERSIONED_MIGRATIONS = [
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
       `);
     }
+  },
+  {
+    version: '2.4.2',
+    label: 'v2.4.2 playlist canvas id schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'c_playlists', 'canvas_id', 'INT NULL', 'skip_unavailable_rtmp');
+      await ensureForeignKey(pool, 'c_playlists', 'fk_playlists_canvas', 'canvas_id', 'c_canvas_sizes', 'id', 'SET NULL');
+      await ensureColumn(pool, 'c_playlist_slides', 'disable_audio', 'TINYINT(1) NOT NULL DEFAULT 1', 'use_video_duration');
+      await pool.query(`
+        UPDATE c_playlists p
+        JOIN (
+          SELECT ps.playlist_id,
+                 COUNT(DISTINCT CONCAT(cs.width, 'x', cs.height)) AS signature_count,
+                 MIN(CONCAT(cs.width, 'x', cs.height)) AS canvas_signature
+          FROM c_playlist_slides ps
+          JOIN c_slides sl ON sl.id = ps.slide_id
+          LEFT JOIN c_templates st ON st.id = sl.template_id
+          LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
+          WHERE cs.width IS NOT NULL
+            AND cs.height IS NOT NULL
+          GROUP BY ps.playlist_id
+        ) x ON x.playlist_id = p.id
+        JOIN c_canvas_sizes cs ON CONCAT(cs.width, 'x', cs.height) = x.canvas_signature
+        SET p.canvas_id = cs.id
+        WHERE (p.canvas_id IS NULL)
+          AND x.signature_count = 1
+      `);
+    }
+  },
+  {
+    version: '2.5.1',
+    label: 'v2.5.1 template animation json schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'c_template_regions', 'animation_json', 'JSON NULL', 'lock_ratio');
+    }
   }
 ];
 
@@ -145,7 +234,188 @@ async function ensureColumn(pool, tableName, columnName, columnDefinition, after
   }
 
   const afterClause = afterColumn ? ' AFTER ' + afterColumn : '';
+  try {
     await pool.query('ALTER TABLE ' + tableName + ' ADD COLUMN ' + columnName + ' ' + columnDefinition + afterClause);
+  } catch (error) {
+    if (!error || (error.code !== 'ER_DUP_FIELDNAME' && error.errno !== 1060)) {
+      throw error;
+    }
+  }
+}
+
+async function ensureForeignKey(pool, tableName, constraintName, columnName, referencedTable, referencedColumn, onDeleteAction) {
+  const [existingFkRows] = await pool.query(
+    `SELECT COUNT(*) AS fk_count
+     FROM information_schema.KEY_COLUMN_USAGE
+     WHERE TABLE_SCHEMA = DATABASE()
+       AND TABLE_NAME = ?
+       AND COLUMN_NAME = ?
+       AND REFERENCED_TABLE_NAME IS NOT NULL`,
+    [tableName, columnName]
+  );
+
+  if (Number(existingFkRows && existingFkRows[0] && existingFkRows[0].fk_count) > 0) {
+    return;
+  }
+
+  const [rows] = await pool.query(
+    `SELECT COUNT(*) AS fk_count
+     FROM information_schema.KEY_COLUMN_USAGE
+     WHERE TABLE_SCHEMA = DATABASE()
+       AND CONSTRAINT_NAME = ?`,
+    [constraintName]
+  );
+
+  if (Number(rows && rows[0] && rows[0].fk_count) > 0) {
+    return;
+  }
+
+  const fallbackNames = [
+    constraintName,
+    tableName + '_' + columnName + '_fk',
+    tableName + '_' + columnName + '_fk_2',
+    tableName + '_' + columnName + '_fk_3'
+  ];
+
+  for (const candidateName of fallbackNames) {
+    try {
+      await pool.query('ALTER TABLE ' + tableName + ' ADD CONSTRAINT ' + candidateName + ' FOREIGN KEY (' + columnName + ') REFERENCES ' + referencedTable + '(' + referencedColumn + ') ON DELETE ' + onDeleteAction);
+      return;
+    } catch (error) {
+      if (!error || (error.code !== 'ER_FK_DUP_NAME' && error.errno !== 1826)) {
+        throw error;
+      }
+    }
+  }
+}
+
+async function dropColumnIfExists(pool, tableName, columnName) {
+  if (await columnExists(pool, tableName, columnName)) {
+    try {
+      await pool.query('ALTER TABLE ' + tableName + ' DROP COLUMN ' + columnName);
+    } catch (error) {
+      if (!error || (error.code !== 'ER_CANT_DROP_FIELD_OR_KEY' && error.errno !== 1091)) {
+        throw error;
+      }
+    }
+  }
+}
+
+function normalizeLegacyScheduleRules(row) {
+  const rules = [];
+  if (!row) {
+    return rules;
+  }
+
+  if (row.schedule_rules_json) {
+    try {
+      const parsed = JSON.parse(row.schedule_rules_json);
+      if (Array.isArray(parsed)) {
+        parsed.forEach(function (rule) {
+          const normalized = normalizeScheduleRule(rule);
+          if (normalized) {
+            rules.push(normalized);
+          }
+        });
+        return rules;
+      }
+    } catch (_error) {
+      // fall through to legacy columns
+    }
+  }
+
+  const mode = String(row.schedule_mode || 'always').trim().toLowerCase();
+  if (mode === 'dates' && row.schedule_start_datetime && row.schedule_end_datetime) {
+    rules.push({
+      start_datetime: formatMigrationDateTime(row.schedule_start_datetime),
+      end_datetime: formatMigrationDateTime(row.schedule_end_datetime)
+    });
+    return rules;
+  }
+
+  if (mode === 'times' && row.schedule_start_time && row.schedule_end_time) {
+    const days = normalizeMigrationDays(row.schedule_days_json);
+    const rule = {
+      start_time: formatMigrationTime(row.schedule_start_time),
+      end_time: formatMigrationTime(row.schedule_end_time)
+    };
+    if (days.length) {
+      rule.schedule_days_json = days;
+    }
+    rules.push(rule);
+  }
+
+  return rules;
+}
+
+function normalizeScheduleRule(rule) {
+  if (!rule || typeof rule !== 'object') {
+    return null;
+  }
+  const normalized = {};
+  if (rule.start_datetime) {
+    normalized.start_datetime = String(rule.start_datetime);
+  }
+  if (rule.end_datetime) {
+    normalized.end_datetime = String(rule.end_datetime);
+  }
+  if (rule.start_time) {
+    normalized.start_time = String(rule.start_time).slice(0, 5);
+  }
+  if (rule.end_time) {
+    normalized.end_time = String(rule.end_time).slice(0, 5);
+  }
+  if (Array.isArray(rule.schedule_days_json)) {
+    normalized.schedule_days_json = rule.schedule_days_json;
+  } else if (Array.isArray(rule.days)) {
+    normalized.schedule_days_json = rule.days;
+  }
+  return Object.keys(normalized).length ? normalized : null;
+}
+
+function formatMigrationDateTime(value) {
+  if (!value) {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
+}
+
+function formatMigrationTime(value) {
+  if (!value) {
+    return null;
+  }
+  return String(value).slice(0, 5);
+}
+
+function normalizeMigrationDays(value) {
+  let parsed = [];
+  if (Array.isArray(value)) {
+    parsed = value;
+  } else if (value) {
+    try {
+      const raw = typeof value === 'string' ? JSON.parse(value) : value;
+      parsed = Array.isArray(raw) ? raw : [];
+    } catch (_error) {
+      parsed = [];
+    }
+  }
+
+  return Array.from(new Set(parsed.map(function (day) {
+    return Number(day);
+  }).filter(function (day) {
+    return Number.isInteger(day) && day >= 0 && day <= 6;
+  }))).sort(function (left, right) {
+    return left - right;
+  });
 }
 
 function compareVersions(leftVersion, rightVersion) {

src/player/announcement-templates/lower-third.template.html

@@ -101,6 +101,7 @@
   gap: 2.5rem;
   min-width: 100%;
   width: max-content;
+  backface-visibility: hidden;
   will-change: transform;
   animation: lower-third-scroll var(--announcement-scroll-duration, 20s) linear infinite;
 }
@@ -144,10 +145,10 @@
 
 @keyframes lower-third-scroll {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translate3d(-50%, 0, 0);
   }
 }
 </style>

src/player/announcement-templates/top-banner.template.html

@@ -103,6 +103,7 @@
   gap: 2.5rem;
   min-width: 100%;
   width: max-content;
+  backface-visibility: hidden;
   will-change: transform;
   animation: top-banner-scroll var(--announcement-scroll-duration, 20s) linear infinite;
 }
@@ -146,10 +147,10 @@
 
 @keyframes top-banner-scroll {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translate3d(-50%, 0, 0);
   }
 }
 </style>

src/player/player-page-announcements.js

@@ -1,6 +1,10 @@
 // Announcement overlay polling and rendering helpers.
 
 (function () {
+  if (window.__pulseThumbnailPreview) {
+    return;
+  }
+
   var announcementLayer = null;
   var announcementRefreshTimer = null;
   var announcementPollTimer = null;
@@ -211,12 +215,7 @@
       return;
     }
 
-    var socketUrl = new URL(announcementSocketPath, window.location.origin);
-    if (window.__pulsePageAuthToken) {
-      socketUrl.searchParams.set('auth', window.__pulsePageAuthToken);
-    }
-
-    var socket = new WebSocket(socketUrl.toString());
+    var socket = new WebSocket(new URL(announcementSocketPath, window.location.origin).toString());
     announcementSocket = socket;
 
     socket.onopen = function () {

src/player/player-page.template.html

@@ -6,6 +6,7 @@
     <title>{{TITLE}}</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
+    <link rel="stylesheet" href="/assets/vendor/animate.css/animate.min.css" />
     <link rel="stylesheet" href="/assets/css/player.css?v=36" />
     {{{STYLESHEETS}}}
   </head>

src/player/playlist.js

@@ -60,7 +60,7 @@ function createPlayerPlaylistService(options) {
     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: [] };
+        return { screen: null, playlist: null, slides: [], rssFeeds: [], apiSources: [], timetableGroups: [] };
       }
 
       const screen = screenRows[0];
@@ -69,7 +69,10 @@ function createPlayerPlaylistService(options) {
           screen: screen,
           playlist: null,
           slides: [],
-          revision: getPlaylistRevision(screen, null, [], [], [], [], [])
+          rssFeeds: [],
+          apiSources: [],
+          timetableGroups: [],
+          revision: getPlaylistRevision(screen, null, [], [], [], [], [], [])
         };
         await writeSnapshot(slug, payloadWithoutPlaylist);
         return payloadWithoutPlaylist;
@@ -79,7 +82,7 @@ function createPlayerPlaylistService(options) {
       const playlist = playlistRows[0] || null;
       const [slideRows] = await pool.query(`
         SELECT sl.id, sl.title, sl.template_id, sl.content_json, sl.created_at, sl.modified_at,
-           ps.position, ps.duration_seconds AS duration_seconds, ps.use_video_duration, ps.schedule_mode, ps.schedule_start_datetime, ps.schedule_end_datetime, ps.schedule_start_time, ps.schedule_end_time, ps.schedule_days_json,
+           ps.position, ps.duration_seconds AS duration_seconds, ps.use_video_duration, ps.disable_audio,
                st.name AS template_name, 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_playlist_slides ps
         JOIN c_slides sl ON sl.id = ps.slide_id
@@ -88,6 +91,21 @@ function createPlayerPlaylistService(options) {
         WHERE ps.playlist_id = ?
         ORDER BY ps.position ASC, ps.id ASC
       `, [screen.playlist_id]);
+      const [scheduleRuleRows] = await pool.query(`
+        SELECT r.id, r.playlist_slide_id, r.position, r.start_datetime, r.end_datetime, r.start_time, r.end_time, r.schedule_days_json, r.created_at, r.modified_at, r.created_by, r.modified_by
+        FROM c_playlist_slide_schedule_rules r
+        JOIN c_playlist_slides ps ON ps.id = r.playlist_slide_id
+        WHERE ps.playlist_id = ?
+        ORDER BY r.playlist_slide_id ASC, r.position ASC, r.id ASC
+      `, [screen.playlist_id]);
+      const rulesBySlideId = {};
+      scheduleRuleRows.forEach(function (rule) {
+        const slideId = Number(rule.playlist_slide_id);
+        if (!rulesBySlideId[slideId]) {
+          rulesBySlideId[slideId] = [];
+        }
+        rulesBySlideId[slideId].push(rule);
+      });
 
       const templateIds = slideRows
         .filter(function (slide) { return slide.template_id; })
@@ -103,7 +121,7 @@ function createPlayerPlaylistService(options) {
           LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
           WHERE st.id IN (?)
         `, [templateIds]);
-        [regionRows] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id IN (?) ORDER BY template_id ASC, z_index ASC, id ASC', [templateIds]);
+        [regionRows] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id IN (?) ORDER BY template_id ASC, z_index ASC, id ASC', [templateIds]);
         templateRows.forEach(function (template) {
           template.regions = regionRows.filter(function (region) { return region.template_id === template.id; });
           templatesById[template.id] = template;
@@ -135,10 +153,17 @@ function createPlayerPlaylistService(options) {
       const slides = slideRows.map(function (slide) {
         const storedDuration = Number(slide.duration_seconds || 0);
         const videoDuration = slide.use_video_duration ? getVideoRegionDurationSeconds(slide.content_json) : null;
+        const disableAudio = slide.disable_audio === undefined || slide.disable_audio === null ? true : Boolean(slide.disable_audio);
         const videoCacheBust = String(slide.modified_at || slide.content_json || slide.id || '');
         const content = common.parseJsonSafe(slide.content_json) || {};
         Object.keys(content).forEach(function (key) {
           const region = content[key];
+          if (region && typeof region === 'object') {
+            const regionType = String(region.type || '').trim().toLowerCase();
+            if (regionType === 'video' || regionType === 'rtmp') {
+              region.disable_audio = disableAudio;
+            }
+          }
           if (region && typeof region === 'object' && String(region.type || '').trim().toLowerCase() === 'video') {
             region.cache_bust = videoCacheBust;
           }
@@ -149,12 +174,8 @@ function createPlayerPlaylistService(options) {
           modified_at: slide.modified_at,
           duration_seconds: videoDuration || storedDuration,
           use_video_duration: Boolean(slide.use_video_duration),
-          schedule_mode: slide.schedule_mode,
-          schedule_start_datetime: slide.schedule_start_datetime,
-          schedule_end_datetime: slide.schedule_end_datetime,
-          schedule_start_time: slide.schedule_start_time,
-          schedule_end_time: slide.schedule_end_time,
-          schedule_days_json: slide.schedule_days_json,
+          disable_audio: disableAudio,
+          scheduleRules: rulesBySlideId[Number(slide.id)] || [],
           template_id: slide.template_id,
           template: slide.template_id ? templatesById[slide.template_id] || null : null,
           content: content
@@ -184,8 +205,14 @@ function createPlayerPlaylistService(options) {
         });
       }
 
-      const revision = getPlaylistRevision(screen, playlist, slideRows, templateRows, regionRows, rssFeeds, apiSources);
-      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, revision: revision };
+      let timetableGroups = [];
+      if (typeof common.fetchTimetablesData === 'function') {
+        const timetableData = await common.fetchTimetablesData(pool);
+        timetableGroups = Array.isArray(timetableData && timetableData.timetableGroups) ? timetableData.timetableGroups : [];
+      }
+
+      const revision = getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups);
+      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, timetableGroups: timetableGroups, revision: revision };
       await writeSnapshot(slug, payload);
       return payload;
     } catch (error) {
@@ -202,7 +229,7 @@ function createPlayerPlaylistService(options) {
     hash.update('\0');
   }
 
-  function getPlaylistRevision(screen, playlist, slideRows, templateRows, regionRows, rssFeeds, apiSources) {
+  function getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups) {
     const hash = crypto.createHash('sha1');
 
     updatePlaylistRevisionHash(hash, screen && screen.id);
@@ -223,12 +250,18 @@ function createPlayerPlaylistService(options) {
       updatePlaylistRevisionHash(hash, slide.position);
       updatePlaylistRevisionHash(hash, slide.duration_seconds);
       updatePlaylistRevisionHash(hash, slide.use_video_duration);
-      updatePlaylistRevisionHash(hash, slide.schedule_mode);
-      updatePlaylistRevisionHash(hash, slide.schedule_start_datetime);
-      updatePlaylistRevisionHash(hash, slide.schedule_end_datetime);
-      updatePlaylistRevisionHash(hash, slide.schedule_start_time);
-      updatePlaylistRevisionHash(hash, slide.schedule_end_time);
-      updatePlaylistRevisionHash(hash, slide.schedule_days_json);
+      updatePlaylistRevisionHash(hash, slide.disable_audio);
+    });
+
+    (Array.isArray(scheduleRuleRows) ? scheduleRuleRows : []).forEach(function (rule) {
+      updatePlaylistRevisionHash(hash, rule.id);
+      updatePlaylistRevisionHash(hash, rule.playlist_slide_id);
+      updatePlaylistRevisionHash(hash, rule.position);
+      updatePlaylistRevisionHash(hash, rule.start_datetime);
+      updatePlaylistRevisionHash(hash, rule.end_datetime);
+      updatePlaylistRevisionHash(hash, rule.start_time);
+      updatePlaylistRevisionHash(hash, rule.end_time);
+      updatePlaylistRevisionHash(hash, rule.schedule_days_json);
     });
 
     (Array.isArray(templateRows) ? templateRows : []).forEach(function (template) {
@@ -259,6 +292,7 @@ function createPlayerPlaylistService(options) {
 
     updatePlaylistRevisionHash(hash, JSON.stringify(rssFeeds || []));
     updatePlaylistRevisionHash(hash, JSON.stringify(apiSources || []));
+    updatePlaylistRevisionHash(hash, JSON.stringify(timetableGroups || []));
 
     return hash.digest('hex');
   }

src/player/public/css/player.css

@@ -22,6 +22,21 @@ 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%;
@@ -199,6 +214,8 @@ body.onboarding-page #app {
   height: 100%;
   opacity: 0;
   transition: opacity 560ms ease;
+  will-change: opacity;
+  backface-visibility: hidden;
 }
 
 .slide-shell.is-visible {
@@ -228,7 +245,8 @@ body.screen-blackout #app {
   height: var(--player-canvas-height, 100vh);
   max-width: 100vw;
   max-height: 100vh;
-  transform: translate(-50%, -50%);
+  transform: translate3d(-50%, -50%, 0);
+  backface-visibility: hidden;
   z-index: 9999;
   pointer-events: none;
   display: flex;
@@ -425,6 +443,14 @@ body.screen-blackout #app {
   overflow: hidden;
 }
 
+.template-region.qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  background: #fff;
+}
+
 .template-region.html iframe {
   width: 100%;
   height: 100%;
@@ -463,29 +489,6 @@ body.screen-blackout #app {
   font-size: 0.9rem;
 }
 
-.template-region table,
-.template-region th,
-.template-region td {
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  border-collapse: collapse;
-}
-
-.template-region table {
-  width: 100%;
-  border-spacing: 0;
-}
-
-.template-region th,
-.template-region td {
-  padding: 0.35em 0.5em;
-  text-align: left;
-  vertical-align: top;
-}
-
-.template-region th {
-  font-weight: 700;
-}
-
 .webpage-preloads {
   position: fixed;
   width: 1px;
@@ -503,3 +506,20 @@ body.screen-blackout #app {
   border: 0;
   display: block;
 }
+
+.template-region table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.template-region th,
+.template-region td {
+  padding: 0.35em 0.5em;
+  text-align: left;
+  vertical-align: top;
+}
+
+.template-region th {
+  font-weight: 700;
+}

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

@@ -6,6 +6,8 @@ function getCurrentViewport() {
   };
 }
 
+var slideOutroTimers = [];
+
 // Command websocket and player-state helpers.
 // Send the current playback state to the command websocket.
 function sendCommandState(currentSlide) {
@@ -65,6 +67,56 @@ function clearSlideTimer() {
     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.
@@ -72,10 +124,12 @@ 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();
     const activeSlides = getCurrentActiveSlides();
     if (activeSlides.length < 2) {
       refresh();
@@ -89,14 +143,11 @@ function scheduleSlideAdvance(delayMs) {
   }, holdDelayMs);
 }
 
-// Account for fade only when it is enabled so the transition is centered on the slide boundary.
+// Return the slide duration without shifting it for fade timing.
 function getSlideHoldDelay(delayMs) {
   var holdDelayMs = Math.max(1, Number(delayMs || 0));
-  if (!currentPlaylistFadeBetweenSlides) {
   return holdDelayMs;
 }
-  return Math.max(1, holdDelayMs - (slideFadeDurationMs / 2));
-}
 
 // Cancel any pending fade-transition cleanup.
 function clearSlideTransitionTimer() {
@@ -114,11 +165,19 @@ 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') {
@@ -165,7 +224,7 @@ function renderSlideMarkup(markup, shouldFade) {
 
       video.autoplay = true;
       video.loop = true;
-      video.muted = true;
+  video.muted = !(video.dataset && video.dataset.disableAudio === '0');
       video.playsInline = true;
 
       function startPlayback() {
@@ -208,8 +267,15 @@ function renderSlideMarkup(markup, shouldFade) {
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(app);
     }
+    if (!isThumbnailPreview()) {
       initializeRegionInstances(app);
+    }
     initializeRenderedVideoPlayback(app);
+    if (typeof playRegionAnimations === 'function') {
+      window.requestAnimationFrame(function () {
+        playRegionAnimations(app, 'intro');
+      });
+    }
     return app.firstElementChild;
   }
 
@@ -277,14 +343,18 @@ function renderSlideMarkup(markup, shouldFade) {
   window.requestAnimationFrame(function () {
     nextShell.style.opacity = '1';
     previousShell.style.opacity = '0';
+    if (typeof playRegionAnimations === 'function') {
+      playRegionAnimations(nextShell, 'intro');
+    }
   });
 
   if (typeof syncRtmpRegions === 'function') {
     syncRtmpRegions(nextShell);
   }
 
+  if (!isThumbnailPreview()) {
     initializeRegionInstances(nextShell);
-
+  }
   initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
 
   slideTransitionTimer = window.setTimeout(function () {
@@ -456,12 +526,7 @@ function connectCommandSocket() {
   if (commandSocket && (commandSocket.readyState === WebSocket.OPEN || commandSocket.readyState === WebSocket.CONNECTING)) {
     return;
   }
-  var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  var socketUrl = new URL(commandSocketPath, window.location.origin);
-  if (window.__pulsePageAuthToken) {
-    socketUrl.searchParams.set('auth', window.__pulsePageAuthToken);
-  }
-  var socket = new WebSocket(socketUrl.toString());
+  var socket = new WebSocket(new URL(commandSocketPath, window.location.origin).toString());
   commandSocket = socket;
 
   socket.onopen = function () {

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

@@ -53,6 +53,276 @@ 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';
+  }));
+}
+
+function decorateRegionMarkup(markup, region) {
+  if (!markup || !region || !hasPlayerAnimation(region.animationConfig)) {
+    return markup;
+  }
+
+  var animationJson = escapeHtml(JSON.stringify(region.animationConfig));
+  return markup.replace(/^(\s*)<([a-z0-9-]+)(\s[^>]*)?>/i, function (match, leadingWhitespace, tagName, attributes) {
+    return leadingWhitespace + '<' + tagName + (attributes || '') + ' data-animation-json="' + animationJson + '">';
+  });
+}
+
+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;
@@ -340,31 +610,82 @@ function parseTimeToMinutes(value) {
   return Number(match[1]) * 60 + Number(match[2]);
 }
 
-// Determine whether a slide should be shown at the current time.
-function isSlideActive(slide, now) {
-  const mode = String(slide.schedule_mode || 'always');
-  if (mode === 'always') {
-    return true;
+function normalizeScheduleRule(rule) {
+  const input = rule && typeof rule === 'object' ? rule : {};
+  const startDatetime = String(input.start_datetime || input.startDateTime || '').trim();
+  const endDatetime = String(input.end_datetime || input.endDateTime || '').trim();
+  const startTime = String(input.start_time || input.startTime || '').trim();
+  const endTime = String(input.end_time || input.endTime || '').trim();
+  const days = parseScheduleDays(input.days);
+
+  if (startDatetime || endDatetime) {
+    if (!startDatetime || !endDatetime) {
+      return null;
     }
-  if (mode === 'dates') {
-    const start = slide.schedule_start_datetime ? new Date(slide.schedule_start_datetime) : null;
-    const end = slide.schedule_end_datetime ? new Date(slide.schedule_end_datetime) : null;
-    if (!start || !end || Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+  }
+  if (startTime || endTime) {
+    if (!startTime || !endTime) {
+      return null;
+    }
+  }
+  if (!startDatetime && !endDatetime && !startTime && !endTime && !days.length) {
+    return null;
+  }
+
+  return {
+    start_datetime: startDatetime || null,
+    end_datetime: endDatetime || null,
+    start_time: startTime || null,
+    end_time: endTime || null,
+    days: days
+  };
+}
+
+function parseScheduleRules(value) {
+  let rawRules = [];
+
+  if (Array.isArray(value)) {
+    rawRules = value;
+  } else {
+    const raw = String(value || '').trim();
+    if (!raw) {
+      return [];
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      rawRules = Array.isArray(parsed) ? parsed : [];
+    } catch (_error) {
+      return [];
+    }
+  }
+
+  return rawRules.map(normalizeScheduleRule).filter(Boolean);
+}
+
+function matchesScheduleRule(rule, now) {
+  const normalized = normalizeScheduleRule(rule);
+  if (!normalized) {
     return false;
   }
-    return now >= start && now <= end;
-  }
-  if (mode === 'times') {
-    const days = parseScheduleDays(slide.schedule_days_json);
-    if (!days.length) {
+
+  if (normalized.start_datetime && normalized.end_datetime) {
+    const start = new Date(normalized.start_datetime);
+    const end = new Date(normalized.end_datetime);
+    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
       return false;
     }
-    const day = now.getDay();
-    if (days.indexOf(day) === -1) {
+    if (now < start || now > end) {
       return false;
     }
-    const startMinutes = parseTimeToMinutes(slide.schedule_start_time);
-    const endMinutes = parseTimeToMinutes(slide.schedule_end_time);
+  }
+
+  if (normalized.days.length && normalized.days.indexOf(now.getDay()) === -1) {
+    return false;
+  }
+
+  if (normalized.start_time && normalized.end_time) {
+    const startMinutes = parseTimeToMinutes(normalized.start_time);
+    const endMinutes = parseTimeToMinutes(normalized.end_time);
     if (startMinutes === null || endMinutes === null) {
       return false;
     }
@@ -374,8 +695,20 @@ function isSlideActive(slide, now) {
     }
     return nowMinutes >= startMinutes || nowMinutes <= endMinutes;
   }
+
   return true;
 }
+
+// Determine whether a slide should be shown at the current time.
+function isSlideActive(slide, now) {
+  const rules = Array.isArray(slide.scheduleRules) ? slide.scheduleRules : [];
+  if (!rules.length) {
+    return true;
+  }
+  return rules.some(function (rule) {
+    return matchesScheduleRule(rule, now);
+  });
+}
 // Build the cache key for a template layout.
 function getTemplateLayoutCacheKey(template) {
   var viewportKey = window.innerWidth + 'x' + window.innerHeight;
@@ -411,6 +744,7 @@ function getTemplateLayout(template) {
       regionKey: region.region_key,
       regionType: region.region_type,
       label: region.label,
+      animationJson: region.animation_json || null,
       baseStyle: baseStyle,
       pixelWidth: pixelWidth,
       pixelHeight: pixelHeight,
@@ -515,7 +849,10 @@ function renderTemplateSlideMarkup(slide) {
   const layout = plan ? plan.layout : null;
   const regions = layout ? layout.regions.map(function (region) {
     const regionContent = content[region.regionKey] || {};
-    return plan.renderRegion(region, regionContent);
+    const markup = plan.renderRegion(region, regionContent);
+    return decorateRegionMarkup(markup, {
+      animationConfig: normalizePlayerAnimationConfig(region.animationJson)
+    });
   }).join('') : '';
   const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path) : '';
   if (layout) {

src/player/public/sw.js

@@ -1,6 +1,6 @@
 // Service worker cache strategy for player pages, assets, media, and playlists.
 
-const CACHE_VERSION = 'v36';
+const CACHE_VERSION = 'v38';
 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}`;
@@ -16,6 +16,20 @@ function normalizeRequest(request) {
   });
 }
 
+function shouldBypassCache(request) {
+  if (!request) {
+    return false;
+  }
+
+  if (request.cache === 'reload' || request.cache === 'no-store') {
+    return true;
+  }
+
+  const cacheControl = String(request.headers.get('cache-control') || '').toLowerCase();
+  const pragma = String(request.headers.get('pragma') || '').toLowerCase();
+  return cacheControl.includes('no-cache') || cacheControl.includes('max-age=0') || pragma.includes('no-cache');
+}
+
 async function cacheResponse(cacheName, request, response, cacheKeyRequest) {
   if (!response || !response.ok) {
     return;
@@ -126,6 +140,11 @@ self.addEventListener('fetch', function (event) {
     return;
   }
 
+  if (shouldBypassCache(request)) {
+    event.respondWith(networkOnly(request));
+    return;
+  }
+
   if (url.pathname.startsWith('/assets/')) {
     event.respondWith(cacheFirst(request, ASSET_CACHE));
     return;

src/player/regions/qr-code.js

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

src/player/regions/rtmp.js

@@ -8,7 +8,7 @@ function renderRtmpRegion(region, regionContent) {
     return '';
   }
 
-  return '<div class="template-region rtmp" style="' + region.baseStyle + '"><video class="template-region-rtmp-video" data-rtmp-source="' + escapeHtml(url) + '" data-rtmp-disable-audio="' + (disableAudio ? '1' : '0') + '" data-rtmp-skip-unavailable="' + (skipUnavailable ? '1' : '0') + '" autoplay playsinline preload="auto" tabindex="-1" disablepictureinpicture></video><div class="template-region-placeholder template-region-rtmp-placeholder">Loading RTMP stream...</div></div>';
+  return '<div class="template-region rtmp" style="' + region.baseStyle + '"><video class="template-region-rtmp-video" data-rtmp-source="' + escapeHtml(url) + '" data-rtmp-disable-audio="' + (disableAudio ? '1' : '0') + '" data-rtmp-skip-unavailable="' + (skipUnavailable ? '1' : '0') + '" autoplay playsinline preload="auto" tabindex="-1" disablepictureinpicture' + (disableAudio ? ' muted' : '') + '></video><div class="template-region-placeholder template-region-rtmp-placeholder">Loading RTMP stream...</div></div>';
 }
 
 function getRtmpSessionUrl(sourceUrl, disableAudio) {

src/player/regions/schedule.js

@@ -0,0 +1,253 @@
+// Timetable region rendering for live playback.
+
+var registry = window.pulsePlayerRegionTypes;
+
+function escapeHtml(value) {
+  return String(value === undefined || value === null ? '' : value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function sanitizeRichTextAttributes(tagName, attrText) {
+  var allowedAttributes = {
+    a: ['href', 'title', 'target', 'rel', 'class', 'style'],
+    blockquote: ['class', 'style'],
+    col: ['class', 'style', 'span', 'width'],
+    colgroup: ['class', 'style', 'span'],
+    div: ['class', 'style'],
+    figure: ['class', 'style'],
+    figcaption: ['class', 'style'],
+    h1: ['class', 'style'],
+    h2: ['class', 'style'],
+    h3: ['class', 'style'],
+    h4: ['class', 'style'],
+    h5: ['class', 'style'],
+    h6: ['class', 'style'],
+    li: ['class', 'style'],
+    ol: ['class', 'style', 'start'],
+    p: ['class', 'style'],
+    pre: ['class', 'style'],
+    span: ['class', 'style'],
+    table: ['class', 'style'],
+    tbody: ['class', 'style'],
+    td: ['class', 'style', 'colspan', 'rowspan'],
+    th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
+    thead: ['class', 'style'],
+    tr: ['class', 'style'],
+    ul: ['class', 'style']
+  };
+  var allowed = allowedAttributes[tagName] || [];
+  if (!allowed.length) {
+    return '';
+  }
+
+  var attrs = [];
+  String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, function (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) {
+    var lowerKey = String(key || '').toLowerCase();
+    if (allowed.indexOf(lowerKey) === -1) {
+      return '';
+    }
+
+    var value = doubleQuoted !== undefined ? doubleQuoted : singleQuoted !== undefined ? singleQuoted : bareValue !== undefined ? bareValue : '';
+    if (lowerKey === 'href' && /^(?:\s*javascript:|\s*data:)/i.test(String(value || ''))) {
+      return '';
+    }
+    if (lowerKey === 'style' && /(?:expression\s*\(|javascript:|url\s*\()/i.test(String(value || ''))) {
+      return '';
+    }
+    if (lowerKey === 'target') {
+      var targetValue = String(value || '').trim();
+      if (targetValue === '_blank') {
+        attrs.push(' target="_blank"');
+        if (attrs.indexOf(' rel="noreferrer noopener"') === -1) {
+          attrs.push(' rel="noreferrer noopener"');
+        }
+        return '';
+      }
+    }
+    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+    return '';
+  });
+
+  return attrs.join('');
+}
+
+function sanitizeRichText(html) {
+  var output = String(html || '');
+  output = output.replace(/<script[\s\S]*?<\/script>/gi, '');
+  output = output.replace(/<style[\s\S]*?<\/style>/gi, '');
+  return output.replace(/<[^>]+>/g, function (tag) {
+    var match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)([\s\S]*?)(\/?)>$/i);
+    if (!match) {
+      return '';
+    }
+    var closing = Boolean(match[1]);
+    var name = String(match[2] || '').toLowerCase();
+    var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+    if (allowed.indexOf(name) === -1) {
+      return '';
+    }
+    if (closing) {
+      return '</' + name + '>';
+    }
+    return '<' + name + sanitizeRichTextAttributes(name, String(match[3] || '')) + '>';
+  });
+}
+
+function substituteTimetableVariables(html, entry) {
+  var source = String(html || '');
+  return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+    if (!entry || typeof entry !== 'object') {
+      return '';
+    }
+
+    if (!window.placeholderUtils || typeof window.placeholderUtils.resolvePlaceholderExpression !== 'function' || typeof window.placeholderUtils.formatPlaceholderValue !== 'function') {
+      return '';
+    }
+
+    return escapeHtml(window.placeholderUtils.formatPlaceholderValue(window.placeholderUtils.resolvePlaceholderExpression(entry, expression)));
+  });
+}
+
+function renderTemplate(template, context) {
+  var source = String(template || '');
+  if (!source) {
+    return '';
+  }
+  return substituteTimetableVariables(source, context);
+}
+
+function getTimetableGroups() {
+  return Array.isArray(initialData && initialData.timetableGroups) ? initialData.timetableGroups : [];
+}
+
+function getGroupById(groupId, groups) {
+  var normalizedId = Number(groupId || 0);
+  return (Array.isArray(groups) ? groups : getTimetableGroups()).find(function (group) {
+    return Number(group.id) === normalizedId;
+  }) || null;
+}
+
+function getEntries(groupId, groups) {
+  var group = getGroupById(groupId, groups);
+  return group && Array.isArray(group.entries) ? group.entries : [];
+}
+
+function toDate(value) {
+  if (!value) {
+    return null;
+  }
+  var date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function isUpcoming(entry, now) {
+  var start = toDate(entry && entry.start_datetime);
+  return Boolean(start && now < start);
+}
+
+function isLive(entry, now) {
+  var start = toDate(entry && entry.start_datetime);
+  var end = toDate(entry && entry.end_datetime);
+  return Boolean(start && end && now >= start && now < end);
+}
+
+function getVisibleEntries(groupId, displayMode, maxItems, groups) {
+  var now = new Date();
+  var entries = getEntries(groupId, groups).slice().sort(function (left, right) {
+    var leftStart = toDate(left && left.start_datetime);
+    var rightStart = toDate(right && right.start_datetime);
+    return (leftStart ? leftStart.getTime() : 0) - (rightStart ? rightStart.getTime() : 0) || Number(left.id || 0) - Number(right.id || 0);
+  });
+  var mode = String(displayMode || 'upcoming').trim().toLowerCase();
+
+  entries = entries.filter(function (entry) {
+    if (mode === 'current') {
+      return isLive(entry, now);
+    }
+    if (mode === 'both') {
+      return isUpcoming(entry, now) || isLive(entry, now);
+    }
+    return isUpcoming(entry, now);
+  });
+
+  if (!entries.length && mode === 'upcoming') {
+    entries = getEntries(groupId, groups).filter(function (entry) {
+      return isLive(entry, now);
+    });
+  }
+
+  return entries.slice(0, Math.max(1, Number(maxItems || 5)));
+}
+
+function formatDateTime(value) {
+  var date = toDate(value);
+  if (!date) {
+    return '';
+  }
+
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      month: 'short',
+      day: '2-digit',
+      hour: 'numeric',
+      minute: '2-digit'
+    }).format(date);
+  } catch (_error) {
+    return date.toLocaleString();
+  }
+}
+
+function getDefaultStyle() {
+  return {
+    font_family: 'Arial',
+    font_size: 28,
+    font_color: '#000000'
+  };
+}
+
+function getTextStyle(region, regionContent) {
+  var current = regionContent && typeof regionContent === 'object' ? regionContent : {};
+  var defaultStyle = getDefaultStyle();
+  return {
+    font_family: String(current.font_family || region.font_family || defaultStyle.font_family || 'Arial').trim() || 'Arial',
+    font_size: Math.max(8, Number(current.font_size || region.font_size || defaultStyle.font_size || 28)),
+    font_color: String(current.font_color || region.font_color || defaultStyle.font_color || '#000000').trim() || '#000000'
+  };
+}
+
+function renderRegion(region, regionContent) {
+  var value = String(regionContent && (regionContent.value !== undefined ? regionContent.value : regionContent.text !== undefined ? regionContent.text : '') || '').trim();
+  var style = getTextStyle(region, regionContent || {});
+  var groups = getTimetableGroups();
+  var groupId = regionContent && regionContent.timetable_group_id !== undefined ? regionContent.timetable_group_id : '';
+  var displayMode = regionContent && regionContent.display_mode ? regionContent.display_mode : 'upcoming';
+  var maxItems = regionContent && regionContent.max_items !== undefined ? regionContent.max_items : 5;
+  var group = getGroupById(groupId, groups);
+  var entries = getVisibleEntries(groupId, displayMode, maxItems, groups);
+  var width = Math.max(1, Math.round(Number(region && region.pixelWidth ? region.pixelWidth : 0) || 1));
+  var height = Math.max(1, Math.round(Number(region && region.pixelHeight ? region.pixelHeight : 0) || 1));
+  var canvasScale = Number(region && region.canvasScale ? region.canvasScale : 1) || 1;
+  var contentStyle = 'width:' + width + 'px;height:' + height + 'px;transform:scale(' + canvasScale + ');transform-origin:top left;' + (style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '') + (style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '') + (style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '');
+
+  if (!value) {
+    return '<div class="template-region timetable" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + ' overflow:hidden;"></div></div>';
+  }
+
+  return '<div class="template-region timetable" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + ' overflow:hidden;">' + entries.map(function (entry, index) {
+    return '<div class="timetable-region-entry" data-timetable-entry-index="' + index + '">' + sanitizeRichText(substituteTimetableVariables(value, Object.assign({}, entry || {}, {
+      start: entry && entry.start_datetime !== undefined ? entry.start_datetime : '',
+      end: entry && entry.end_datetime !== undefined ? entry.end_datetime : '',
+      group: group || {},
+      entries: entries,
+      index: index + 1
+    }))) + '</div>';
+  }).join('') + '</div></div>';
+}
+
+registry.register('timetable', {
+  renderRegion: renderRegion
+});

src/player/regions/video.js

@@ -111,6 +111,7 @@ function renderVideoRegion(region, regionContent) {
   var regionKey = getVideoRegionCacheKey(region);
   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);
 
   if (!requestedSrc) {
     return '';
@@ -121,7 +122,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) + '" autoplay muted loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="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') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="this.play().catch(function () {})"></video></div>';
   }
 
   var requestedState = getVideoSourceAvailability(requestedSrc);
@@ -131,7 +132,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) + '" autoplay muted loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="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') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="this.play().catch(function () {})"></video></div>';
   }
 
   scheduleVideoSourceProbe(regionKey, requestedSrc, false);
@@ -140,7 +141,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) + '" autoplay muted loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="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') + '" autoplay' + (disableAudio ? ' muted' : '') + ' loop playsinline preload="auto" disablepictureinpicture oncanplay="this.play().catch(function () {})" onloadedmetadata="this.play().catch(function () {})"></video></div>';
   }
 
   return '';

src/player/render.js

@@ -4,7 +4,7 @@ const Handlebars = require('handlebars');
 const path = require('path');
 const { mediaKind, safeJsonForScript, getPlayerPageTemplate, getPlayerClientNameScript, getPlayerPageOfflineScript, getPlayerPagePlaylistScript, getPlayerPageCommandsScript, getPlayerPageRenderingScript, getPlayerPagePlaybackScript, getAnnouncementIconsDataScript, getPlayerAnnouncementTemplatesDataScript, getPlayerAnnouncementTemplatesScript, getPlayerPageAnnouncementsScript, getPlayerPageScript, getPlayerRegionScripts, getPlayerOnboardingLandingScript, getPlayerOnboardingFormScript } = require('./render-helpers');
 const { createThumbnailPreviewBootstrapScript } = require('./thumbnail-preview');
-const { createPageAuthBundle, createPageFetchAuthScript } = require('../request-auth');
+const { createPageAuthBundle, createPageFetchAuthScript } = require('#src/request-auth');
 const { getFontStylesheetHref } = require('#src/web/lib/media/font-library');
 
 const PLAYER_MEDIA_DIR = path.join(__dirname, '..', '..', 'media');
@@ -27,7 +27,7 @@ function getPlayerServiceWorkerRegistrationScript() {
     '<script>',
     '  if ("serviceWorker" in navigator) {',
     '    window.addEventListener("load", function () {',
-    '      navigator.serviceWorker.register("/sw.js").catch(function () {',
+      '      navigator.serviceWorker.register("/sw.js?v=38").catch(function () {',
     '        return null;',
     '      });',
     '    });',
@@ -120,6 +120,7 @@ function renderPlayerPage(slug, initialData) {
   const hlsScriptTag = '<script src="/assets/vendor/hls.min.js"></script>';
   const pageAuthToken = createPageAuthBundle({ scope: 'player', slug: String(slug || '').trim() });
   const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
+  const bodyClass = [initialData && initialData.thumbnailPreview ? 'thumbnail-preview' : '', ''].join(' ').trim();
   const script = getPlayerPageScript()({
     SLUG_JSON: new Handlebars.SafeString(JSON.stringify(slug)),
     INITIAL_DATA_JSON: new Handlebars.SafeString(safeJsonForScript(initialData || null)),
@@ -128,9 +129,10 @@ function renderPlayerPage(slug, initialData) {
 
   return renderPage(template, {
     title: 'Screen ' + slug,
+    bodyClass: bodyClass,
     body: '<div id="app"><div class="empty">Loading screen...</div></div>',
     stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
-    script: createPageFetchAuthScript(pageAuthToken) + 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 + 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>'
   });
 }
 

src/player/routes.js

@@ -3,7 +3,7 @@
 const fs = require('fs');
 const express = require('express');
 const path = require('path');
-const { getSharedSecret, createPageAuthBundle, verifyPageAuthToken, verifyRequestAuth } = require('../request-auth');
+const { getSharedSecret, createPageAuthBundle, verifyPageAuthToken, verifyRequestAuth } = require('#src/request-auth');
 const { buildThumbnailPreviewData } = require('./thumbnail-preview');
 
 const TRANSIENT_DB_ERROR_CODES = ['ECONNREFUSED', 'ECONNRESET', 'ETIMEDOUT', 'EPIPE', 'ENOTFOUND', 'PROTOCOL_CONNECTION_LOST', 'POOL_CLOSED', 'ERR_POOL_CLOSED'];
@@ -259,6 +259,11 @@ function registerPlayerRoutes(app, options) {
         });
       }
 
+      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) {

src/player/runtime.js

@@ -2,8 +2,9 @@
 
 const crypto = require('crypto');
 const { WebSocketServer, WebSocket } = require('ws');
-const { isClientNameAvailable } = require('../data/client-name-check');
-const { verifyPageAuthToken, verifyRequestAuth } = require('../request-auth');
+const { isClientNameAvailable } = require('#src/data/client-name-check');
+const { verifyPageAuthToken, verifyRequestAuth } = require('#src/request-auth');
+const PAGE_AUTH_COOKIE_NAME = 'pulse_page_auth';
 
 function normalizePlayerPublicBaseUrl(pageUrl) {
   const value = String(pageUrl || '').trim();
@@ -43,6 +44,34 @@ function createPlayerRuntime(options) {
     return ip;
   }
 
+  function parseCookies(cookieHeader) {
+    return String(cookieHeader || '').split(/;\s*/).reduce(function (cookies, pair) {
+      if (!pair) {
+        return cookies;
+      }
+      const separatorIndex = pair.indexOf('=');
+      if (separatorIndex === -1) {
+        return cookies;
+      }
+      const name = decodeURIComponent(pair.slice(0, separatorIndex).trim());
+      const value = decodeURIComponent(pair.slice(separatorIndex + 1).trim());
+      if (name) {
+        cookies[name] = value;
+      }
+      return cookies;
+    }, {});
+  }
+
+  function readPageAuthToken(request) {
+    const queryToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+    if (queryToken) {
+      return queryToken;
+    }
+
+    const cookies = parseCookies(request.headers && request.headers.cookie || '');
+    return String(cookies[PAGE_AUTH_COOKIE_NAME] || '').trim();
+  }
+
   function getConnectionBucket(slug) {
     const key = String(slug || '').trim();
     if (!key) {
@@ -314,7 +343,7 @@ function createPlayerRuntime(options) {
     }
 
     if (playerMatch) {
-      const authToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+      const authToken = readPageAuthToken(request);
       const payload = verifyPageAuthToken(authToken);
       if (!payload || String(payload.scope || '').trim() !== 'player') {
         socket.destroy();
@@ -323,7 +352,7 @@ function createPlayerRuntime(options) {
     }
 
     if (announcementMatch) {
-      const authToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+      const authToken = readPageAuthToken(request);
       const payload = verifyPageAuthToken(authToken);
       if (!payload || String(payload.scope || '').trim() !== 'player') {
         socket.destroy();

src/player/thumbnail-preview.js

@@ -15,6 +15,7 @@ function buildThumbnailPreviewData(slide) {
     slides: [slide],
     rssFeeds: [],
     apiSources: [],
+    timetableGroups: [],
     revision: String(slide.modified_at || slide.id || Date.now())
   };
 }

src/rbac.js

@@ -33,18 +33,6 @@ const PERMISSION_SECTIONS = [
       { key: 'delete', name: 'Delete', description: 'Delete screens.' }
     ]
   },
-  {
-    key: 'announcements',
-    order: 35,
-    name: 'Announcements',
-    sectionName: 'Content',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View announcements.' },
-      { key: 'create', name: 'Create', description: 'Create new announcements.' },
-      { key: 'update', name: 'Update', description: 'Update announcements.' },
-      { key: 'delete', name: 'Delete', description: 'Delete announcements.' }
-    ]
-  },
   {
     key: 'playlists',
     order: 40,
@@ -93,9 +81,21 @@ const PERMISSION_SECTIONS = [
       { key: 'delete', name: 'Delete', description: 'Delete canvas sizes.' }
     ]
   },
+  {
+    key: 'announcements',
+    order: 80,
+    name: 'Announcements',
+    sectionName: 'Content',
+    actions: [
+      { key: 'read', name: 'Read', description: 'View announcements.' },
+      { key: 'create', name: 'Create', description: 'Create new announcements.' },
+      { key: 'update', name: 'Update', description: 'Update announcements.' },
+      { key: 'delete', name: 'Delete', description: 'Delete announcements.' }
+    ]
+  },
   {
     key: 'rss-feeds',
-    order: 75,
+    order: 90,
     name: 'RSS feeds',
     sectionName: 'Data Sources',
     actions: [
@@ -107,7 +107,7 @@ const PERMISSION_SECTIONS = [
   },
   {
     key: 'api-sources',
-    order: 76,
+    order: 100,
     name: 'API sources',
     sectionName: 'Data Sources',
     actions: [
@@ -118,39 +118,20 @@ const PERMISSION_SECTIONS = [
     ]
   },
   {
-    key: 'fonts',
-    order: 95,
-    name: 'Fonts',
-    sectionName: 'Settings',
+    key: 'timetables',
+    order: 110,
+    name: 'Timetables',
+    sectionName: 'Data Sources',
     actions: [
-      { key: 'read', name: 'Read', description: 'View managed fonts.' },
-      { key: 'create', name: 'Create', description: 'Upload managed fonts.' },
-      { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' }
-    ]
-  },
-  {
-    key: 'background-tasks',
-    order: 100,
-    name: 'Background tasks',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View queued background tasks.' },
-      { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' }
-    ]
-  },
-  {
-    key: 'scheduled-tasks',
-    order: 101,
-    name: 'Scheduled tasks',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' },
-      { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' }
+      { key: 'read', name: 'Read', description: 'View configured timetable groups.' },
+      { key: 'create', name: 'Create', description: 'Create new timetable groups.' },
+      { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' },
+      { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' }
     ]
   },
   {
     key: 'users',
-    order: 80,
+    order: 120,
     name: 'Users',
     sectionName: 'Settings',
     actions: [
@@ -162,7 +143,7 @@ const PERMISSION_SECTIONS = [
   },
   {
     key: 'rbac',
-    order: 90,
+    order: 130,
     name: 'Roles and permissions',
     sectionName: 'Settings',
     actions: [
@@ -171,6 +152,37 @@ const PERMISSION_SECTIONS = [
       { key: 'update', name: 'Update', description: 'Update role details and permissions.' },
       { key: 'delete', name: 'Delete', description: 'Delete roles.' }
     ]
+  },
+  {
+    key: 'fonts',
+    order: 140,
+    name: 'Fonts',
+    sectionName: 'Settings',
+    actions: [
+      { key: 'read', name: 'Read', description: 'View managed fonts.' },
+      { key: 'create', name: 'Create', description: 'Upload managed fonts.' },
+      { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' }
+    ]
+  },
+  {
+    key: 'background-tasks',
+    order: 150,
+    name: 'Task Queue',
+    sectionName: 'Settings',
+    actions: [
+      { key: 'read', name: 'Read', description: 'View queued background tasks.' },
+      { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' }
+    ]
+  },
+  {
+    key: 'scheduled-tasks',
+    order: 160,
+    name: 'Scheduled tasks',
+    sectionName: 'Settings',
+    actions: [
+      { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' },
+      { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' }
+    ]
   }
 ];
 
@@ -199,6 +211,8 @@ function normalizePermissionKey(permissionKey) {
   return String(permissionKey || '').trim();
 }
 
+const PERMISSION_DENIED_MESSAGE = 'You do not have permissions to do this.';
+
 function normalizePermissionKeys(permissionKeys) {
   const normalized = [];
 
@@ -283,7 +297,7 @@ function requirePermission(permissionKey, options) {
       return next();
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);
@@ -297,5 +311,6 @@ module.exports = {
   hasPermission,
   hasAnyPermission,
   requirePermission,
-  normalizePermissionKeys
+  normalizePermissionKeys,
+  PERMISSION_DENIED_MESSAGE
 };

src/request-auth.js

@@ -246,12 +246,13 @@ function verifyRequestAuth(req) {
   return timingSafeEqualHex(expectedSignature, signature);
 }
 
-function createPageFetchAuthScript(token) {
+function createPageFetchAuthScript(token, cookiePath) {
   const normalizedToken = String(token && typeof token === 'object' ? token.token : token || '').trim();
   if (!normalizedToken) {
     return '';
   }
 
+  const normalizedCookiePath = String(cookiePath || '').trim();
   const pageAuthExpiresAt = token && typeof token === 'object' && Number.isFinite(Number(token.expiresAt))
     ? Number(token.expiresAt)
     : null;
@@ -262,6 +263,8 @@ function createPageFetchAuthScript(token) {
     '  (function () {',
     '    var pageAuthToken = ' + JSON.stringify(normalizedToken) + ';',
     '    var pageAuthExpiresAt = ' + JSON.stringify(pageAuthExpiresAt) + ';',
+    '    var pageAuthCookiePath = ' + JSON.stringify(normalizedCookiePath) + ';',
+    '    var pageAuthCookieName = "pulse_page_auth";',
     '    var pageAuthRenewalTimer = null;',
     '    var pageAuthRenewalInFlight = null;',
     '    var pageAuthRenewalSkewMs = ' + JSON.stringify(renewSkewMs) + ';',
@@ -287,11 +290,28 @@ function createPageFetchAuthScript(token) {
     '        });',
     '      }, delayMs);',
     '    }',
+    '    function writePageAuthCookie(nextToken, nextExpiresAt) {',
+    '      if (!pageAuthCookiePath) {',
+    '        return;',
+    '      }',
+    '      var cookieParts = [pageAuthCookieName + "=" + encodeURIComponent(String(nextToken || "").trim()), "Path=" + pageAuthCookiePath, "SameSite=Lax"];',
+    '      var expiresInMs = Number(nextExpiresAt || 0) - Date.now();',
+    '      if (Number.isFinite(expiresInMs) && expiresInMs > 0) {',
+    '        cookieParts.push("Max-Age=" + Math.max(1, Math.floor(expiresInMs / 1000)));',
+    '      } else {',
+    '        cookieParts.push("Max-Age=0");',
+    '      }',
+    '      if (window.location.protocol === "https:") {',
+    '        cookieParts.push("Secure");',
+    '      }',
+    '      document.cookie = cookieParts.join("; ");',
+    '    }',
     '    function setPageAuthToken(nextToken, nextExpiresAt) {',
     '      pageAuthToken = String(nextToken || "").trim();',
     '      pageAuthExpiresAt = Number(nextExpiresAt || 0) || null;',
     '      window.__pulsePageAuthToken = pageAuthToken;',
     '      window.__pulsePageAuthExpiresAt = pageAuthExpiresAt;',
+    '      writePageAuthCookie(pageAuthToken, pageAuthExpiresAt);',
     '      schedulePageAuthRenewal();',
     '    }',
     '    async function renewPageAuthToken() {',
@@ -326,6 +346,7 @@ function createPageFetchAuthScript(token) {
     '    window.__pulseRenewPageAuthToken = renewPageAuthToken;',
     '    window.__pulsePageAuthToken = pageAuthToken;',
     '    window.__pulsePageAuthExpiresAt = pageAuthExpiresAt;',
+    '    writePageAuthCookie(pageAuthToken, pageAuthExpiresAt);',
     '    window.addEventListener("focus", function () {',
     '      schedulePageAuthRenewal();',
     '    });',

src/web.js

@@ -11,13 +11,14 @@ const pages = require('#src/web/pages');
 const registerMiddleware = require('#src/web/middleware');
 const { createBackgroundTaskQueue } = require('#src/web/lib/background-tasks/queue');
 const { initializeBackgroundTasks } = require('#src/web/lib/background-tasks');
+const { createDataSourceTaskService } = require('#src/web/lib/background-tasks/tasks-scheduled/data-source-refresh');
 const { captureSlideThumbnail } = require('#src/web/lib/media');
 const { createWebBootstrap } = require('#src/web/bootstrap');
 const { registerRoutes } = require('#src/web/routes/register');
 const { createNotifyPlayerScreens } = require('#src/web/lib/notify-player-screens');
 const { initializeWebServer } = require('#src/web/lib/web-startup');
 const { createWebConfig } = require('#src/web/lib/config');
-const { requirePermission: createRequirePermission } = require('#src/rbac');
+const { requirePermission: createRequirePermission, PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 const { rbacData } = require('#src/web/lib/auth');
 const { createPlayerActionService } = require('#src/web/lib/player-actions');
 const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
@@ -32,6 +33,7 @@ const {
   normalizeScheduleMode,
   getAuditUserId,
   getCanvasSignature,
+  fetchPlaylistCanvasId,
   fetchPlaylistCanvasSignature,
   fetchScreensByPlaylistId,
   fetchScreensBySlideId,
@@ -52,6 +54,11 @@ async function start() {
     pool: pool,
     maxConcurrent: 1
   });
+  const dataSourceTasks = createDataSourceTaskService({
+    pool: pool,
+    common: common,
+    backgroundTaskQueue: backgroundTaskQueue
+  });
   const playerActionService = createPlayerActionService({
     pool: pool,
     common: common,
@@ -130,6 +137,7 @@ async function start() {
     fetchScreensByPlaylistId: fetchScreensByPlaylistId,
     fetchScreensBySlideId: fetchScreensBySlideId,
     fetchScreensByTemplateId: fetchScreensByTemplateId,
+    fetchPlaylistCanvasId: fetchPlaylistCanvasId,
     fetchPlaylistCanvasSignature: fetchPlaylistCanvasSignature,
     getCanvasSignature: getCanvasSignature,
     normalizeScheduleMode: normalizeScheduleMode,
@@ -138,10 +146,13 @@ async function start() {
     redirectAfterSave: redirectAfterSave,
     notifyPlayerScreens: notifyPlayerScreens,
     broadcastDashboardState: broadcastDashboardState,
+    dataSourceTasks: dataSourceTasks,
     playerActionService: playerActionService,
     isClientNameAvailable: isClientNameAvailable,
     withClientNameReservation: withClientNameReservation,
-    requirePermission: createRequirePermission,
+    requirePermission: function (permissionKey, options) {
+      return createRequirePermission(permissionKey, Object.assign({ setAuthMessageCookie: setAuthMessageCookie }, options));
+    },
     hasAnyPermission: hasAnyPermission,
     backgroundTaskQueue: backgroundTaskQueue,
     collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
@@ -161,7 +172,7 @@ async function start() {
     if (wantsHtml && pages.renderErrorPage) {
       const isPermissionError = statusCode === 403;
       const message = isPermissionError
-        ? String(error && error.message ? error.message : 'You do not have permission to access this area.')
+        ? String(error && error.message ? error.message : PERMISSION_DENIED_MESSAGE)
         : String(error && error.message ? error.message : 'An unexpected error occurred.');
       const title = isPermissionError
         ? 'Access denied'

src/web/bootstrap.js

@@ -3,7 +3,7 @@
 const { WebSocketServer, WebSocket } = require('ws');
 const { createDashboardStateService } = require('./lib/dashboard-state');
 const { createUploadSyncService } = require('./lib/media');
-const { createRequestAuthHeaders } = require('../request-auth');
+const { createRequestAuthHeaders } = require('#src/request-auth');
 
 function createWebBootstrap(options) {
   const pool = options && options.pool;

src/web/handlebars.js

@@ -82,18 +82,42 @@ function registerActionHelpers(Handlebars) {
   Handlebars.registerHelper('saveActionButtons', function (options) {
     const hash = options && options.hash ? options.hash : {};
     const formId = String(hash.formId || '').trim();
-    const saveLabel = String(hash.saveLabel || 'Save');
-    const saveButtonClass = String(hash.saveButtonClass || 'btn btn-success');
-    const saveActionName = String(hash.saveActionName || 'save_action');
-    const saveActionValue = String(hash.saveActionValue || 'save');
-    const closeLabel = String(hash.saveAndCloseLabel || 'Save and Close');
-    const closeValue = String(hash.saveAndCloseValue || 'close');
-    const newLabel = String(hash.saveAndNewLabel || 'Save and New');
-    const newValue = String(hash.saveAndNewValue || 'new');
+
+    const save = {
+      label: String(hash.saveLabel || 'Save'),
+      className: String(hash.saveButtonClass || 'btn btn-success'),
+      actionName: String(hash.saveActionName || 'save_action'),
+      actionValue: String(hash.saveActionValue || 'save'),
+      closeLabel: String(hash.saveAndCloseLabel || 'Save and Close'),
+      closeValue: String(hash.saveAndCloseValue || 'close'),
+      newLabel: String(hash.saveAndNewLabel || 'Save and New'),
+      newValue: String(hash.saveAndNewValue || 'new')
+    };
+
     const showSaveAndClose = hash.showSaveAndClose === undefined ? true : String(hash.showSaveAndClose).toLowerCase() !== 'false';
     const showSaveAndNew = hash.showSaveAndNew === undefined ? true : String(hash.showSaveAndNew).toLowerCase() !== 'false';
-    const ariaLabel = String(hash.ariaLabel || 'Save actions');
+    const showDelete = hash.showDelete === undefined ? true : String(hash.showDelete).toLowerCase() !== 'false';
     const hasSecondaryActions = showSaveAndClose || showSaveAndNew;
+    const ariaLabel = String(hash.ariaLabel || 'Save actions');
+    const saveUrl = String(hash.saveUrl || '').trim();
+
+    const cancel = {
+      label: String(hash.cancelLabel || 'Cancel'),
+      className: String(hash.cancelClass || 'btn btn-warning'),
+      url: String(hash.cancelUrl || '').trim(),
+      confirmMessage: String(hash.cancelConfirmMessage || hash.cancelConfirm || 'You have unsaved changes. Leave this page?')
+    };
+
+    const deleteAction = {
+      label: String(hash.deleteLabel || 'Delete'),
+      className: String(hash.deleteClass || 'btn btn-danger'),
+      url: String(hash.deleteUrl || '').trim(),
+      confirmMessage: String(hash.deleteConfirmMessage || '').trim(),
+      disabled: hash.deleteDisabled === undefined ? false : String(hash.deleteDisabled).toLowerCase() !== 'false',
+      title: String(hash.deleteTitle || '')
+    };
+
+    const resolvedDeleteUrl = deleteAction.url || (!deleteAction.disabled && saveUrl ? saveUrl.replace(/\/+$/, '') + '/delete' : '');
 
     if (!formId) {
       return '';
@@ -102,16 +126,30 @@ function registerActionHelpers(Handlebars) {
     const escape = Handlebars.escapeExpression;
     const formAttr = ` form="${escape(formId)}"`;
 
-    return new Handlebars.SafeString([
+    const parts = [
       '<div class="btn-group save-action-group" role="group">',
-      `<button type="submit" class="${escape(saveButtonClass)}"${formAttr} name="${escape(saveActionName)}" value="${escape(saveActionValue)}">${escape(saveLabel)}</button>`,
-      hasSecondaryActions ? `<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">${escape(ariaLabel)}</span></button>` : '',
+      `<button type="submit" class="${escape(save.className)}"${formAttr} name="${escape(save.actionName)}" value="${escape(save.actionValue)}">${escape(save.label)}</button>`,
+      hasSecondaryActions ? `<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split rounded-0" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">${escape(ariaLabel)}</span></button>` : '',
       hasSecondaryActions ? '<div class="dropdown-menu dropdown-menu-end">' : '',
-      hasSecondaryActions && showSaveAndClose ? `<button type="submit" class="dropdown-item"${formAttr} name="${escape(saveActionName)}" value="${escape(closeValue)}">${escape(closeLabel)}</button>` : '',
-      hasSecondaryActions && showSaveAndNew ? `<button type="submit" class="dropdown-item"${formAttr} name="${escape(saveActionName)}" value="${escape(newValue)}">${escape(newLabel)}</button>` : '',
+      hasSecondaryActions && showSaveAndClose ? `<button type="submit" class="dropdown-item"${formAttr} name="${escape(save.actionName)}" value="${escape(save.closeValue)}">${escape(save.closeLabel)}</button>` : '',
+      hasSecondaryActions && showSaveAndNew ? `<button type="submit" class="dropdown-item"${formAttr} name="${escape(save.actionName)}" value="${escape(save.newValue)}">${escape(save.newLabel)}</button>` : '',
       hasSecondaryActions ? '</div>' : '',
-      '</div>',
-    ].join(''));
+    ];
+
+    if (cancel.url) {
+      parts.push(`<a class="${escape(cancel.className)}" href="${escape(cancel.url)}" data-confirm-unsaved="${escape(cancel.confirmMessage)}">${escape(cancel.label)}</a>`);
+    }
+
+    if (showDelete && (deleteAction.disabled || resolvedDeleteUrl)) {
+      const deleteActionAttr = resolvedDeleteUrl ? ` data-delete-action-url="${escape(resolvedDeleteUrl)}"` : '';
+      const confirmAttr = deleteAction.confirmMessage ? ` data-confirm-message="${escape(deleteAction.confirmMessage)}"` : '';
+      const titleAttr = deleteAction.disabled && deleteAction.title ? ` title="${escape(deleteAction.title)}"` : '';
+      parts.push(`<button type="button" class="${escape(deleteAction.className)}"${deleteActionAttr}${confirmAttr}${deleteAction.disabled ? ' disabled' : ''}${titleAttr}>${escape(deleteAction.label)}</button>`);
+    }
+
+    parts.push('</div>');
+
+    return new Handlebars.SafeString(parts.join(''));
   });
 }
 
@@ -119,6 +157,12 @@ function registerActionHelpers(Handlebars) {
 function registerPartials(Handlebars, viewsRoot) {
   Handlebars.registerPartial('modal-shell', fs.readFileSync(path.join(viewsRoot, 'shared', 'modal-shell.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'));
+  Handlebars.registerPartial('signage/playlists/schedule-rule-card', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'schedule-rule-card.hbs'), 'utf8'));
+  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'));
 }
 
 // One entry point keeps Handlebars bootstrap centralized.

src/web/lib/helpers.js

@@ -90,25 +90,31 @@ function getCanvasSignature(width, height) {
   return normalizedWidth + 'x' + normalizedHeight;
 }
 
-async function fetchPlaylistCanvasSignature(pool, playlistId) {
+async function fetchPlaylistCanvasId(pool, playlistId) {
+  const [playlistRows] = await pool.query('SELECT canvas_id FROM c_playlists WHERE id = ?', [playlistId]);
+  const storedCanvasId = Number(playlistRows && playlistRows[0] && playlistRows[0].canvas_id);
+  if (Number.isInteger(storedCanvasId) && storedCanvasId > 0) {
+    return storedCanvasId;
+  }
+
   const [rows] = await pool.query(
-    `SELECT DISTINCT cs.width AS canvas_width, cs.height AS canvas_height
+    `SELECT DISTINCT st.canvas_size_id AS canvas_id
     FROM c_playlist_slides ps
     JOIN c_slides sl ON sl.id = ps.slide_id
     LEFT JOIN c_templates st ON st.id = sl.template_id
-    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
      WHERE ps.playlist_id = ?
-       AND cs.width IS NOT NULL
-       AND cs.height IS NOT NULL`,
+       AND st.canvas_size_id IS NOT NULL`,
     [playlistId]
   );
-  const signatures = Array.from(new Set(rows.map(function (row) {
-    return getCanvasSignature(row.canvas_width, row.canvas_height);
-  }).filter(Boolean)));
-  if (!signatures.length) {
+  const canvasIds = Array.from(new Set(rows.map(function (row) {
+    return Number(row.canvas_id);
+  }).filter(function (value) {
+    return Number.isInteger(value) && value > 0;
+  })));
+  if (!canvasIds.length) {
     return null;
   }
-  return signatures.length === 1 ? signatures[0] : 'mismatch';
+  return canvasIds.length === 1 ? canvasIds[0] : 'mismatch';
 }
 
 async function fetchScreensByPlaylistId(connection, playlistId) {
@@ -160,19 +166,25 @@ async function fetchOrderedPlaylistSlides(connection, playlistId) {
 
 function redirectAfterSave(req, res, defaultUrl, options) {
   const safeOptions = options || {};
-  const action = String((req && req.body && req.body.action) || req.query.action || '').toLowerCase();
+  const action = String((req && req.body && (req.body.action || req.body.save_action)) || req.query.action || '').toLowerCase();
+  const message = safeOptions.message || '';
+
+  function withMessage(url) {
+    if (!message) {
+      return url;
+    }
+
+    const joiner = String(url || '').indexOf('?') === -1 ? '?' : '&';
+    return url + joiner + 'message=' + encodeURIComponent(message);
+  }
+
   if (action === 'close') {
-    return res.redirect(safeOptions.closeUrl || defaultUrl);
+    return res.redirect(withMessage(safeOptions.closeUrl || defaultUrl));
   }
   if (action === 'new') {
-    return res.redirect(safeOptions.newUrl || defaultUrl);
+    return res.redirect(withMessage(safeOptions.newUrl || defaultUrl));
   }
-  const message = safeOptions.message || '';
-  if (message) {
-    const joiner = defaultUrl.indexOf('?') === -1 ? '?' : '&';
-    return res.redirect(defaultUrl + joiner + 'message=' + encodeURIComponent(message));
-  }
-  return res.redirect(defaultUrl);
+  return res.redirect(withMessage(defaultUrl));
 }
 
 module.exports = {
@@ -185,7 +197,8 @@ module.exports = {
   normalizeScheduleMode: normalizeScheduleMode,
   getAuditUserId: getAuditUserId,
   getCanvasSignature: getCanvasSignature,
-  fetchPlaylistCanvasSignature: fetchPlaylistCanvasSignature,
+  fetchPlaylistCanvasId: fetchPlaylistCanvasId,
+  fetchPlaylistCanvasSignature: fetchPlaylistCanvasId,
   fetchScreensByPlaylistId: fetchScreensByPlaylistId,
   fetchScreensBySlideId: fetchScreensBySlideId,
   fetchScreensByTemplateId: fetchScreensByTemplateId,

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

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

src/web/lib/playlist-schedule.js

@@ -0,0 +1,215 @@
+// Shared schedule rule helpers for playlist playback and editor rendering.
+
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+function normalizeDateTimeValue(value) {
+  const raw = String(value || '').trim();
+  return raw ? raw : null;
+}
+
+function normalizeTimeValue(value) {
+  const raw = String(value || '').trim();
+  if (!raw) {
+    return null;
+  }
+  const match = raw.match(/^(\d{2}):(\d{2})(?::\d{2})?$/);
+  if (!match) {
+    return null;
+  }
+  return match[1] + ':' + match[2];
+}
+
+function normalizeDayValues(value) {
+  let days = [];
+
+  if (Array.isArray(value)) {
+    days = value;
+  } else if (value !== undefined && value !== null && String(value).trim()) {
+    try {
+      const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+      if (Array.isArray(parsed)) {
+        days = parsed;
+      }
+    } catch (_error) {
+      days = String(value)
+        .split(',')
+        .map(function (item) {
+          return item.trim();
+        })
+        .filter(Boolean);
+    }
+  }
+
+  return Array.from(new Set(days.map(function (day) {
+    return Number(day);
+  }).filter(function (day) {
+    return Number.isInteger(day) && day >= 0 && day <= 6;
+  }))).sort(function (left, right) {
+    return left - right;
+  });
+}
+
+function normalizeScheduleRule(rule) {
+  const input = rule && typeof rule === 'object' ? rule : {};
+  const startDatetime = normalizeDateTimeValue(
+    input.start_datetime || input.startDateTime || input.schedule_start_datetime || input.scheduleStartDatetime
+  );
+  const endDatetime = normalizeDateTimeValue(
+    input.end_datetime || input.endDateTime || input.schedule_end_datetime || input.scheduleEndDatetime
+  );
+  const startTime = normalizeTimeValue(
+    input.start_time || input.startTime || input.schedule_start_time || input.scheduleStartTime
+  );
+  const endTime = normalizeTimeValue(
+    input.end_time || input.endTime || input.schedule_end_time || input.scheduleEndTime
+  );
+  const days = normalizeDayValues(
+    input.days || input.day_list || input.schedule_days || input.schedule_days_json || input.scheduleDays
+  );
+
+  if (startDatetime || endDatetime) {
+    if (!startDatetime || !endDatetime) {
+      return null;
+    }
+  }
+
+  if (startTime || endTime) {
+    if (!startTime || !endTime) {
+      return null;
+    }
+  }
+
+  if (!startDatetime && !endDatetime && !startTime && !endTime && !days.length) {
+    return null;
+  }
+
+  const normalized = {};
+  if (startDatetime) {
+    normalized.start_datetime = startDatetime;
+  }
+  if (endDatetime) {
+    normalized.end_datetime = endDatetime;
+  }
+  if (startTime) {
+    normalized.start_time = startTime;
+  }
+  if (endTime) {
+    normalized.end_time = endTime;
+  }
+  if (days.length) {
+    normalized.days = days;
+  }
+
+  return normalized;
+}
+
+function parseScheduleRules(value) {
+  let rawRules = [];
+
+  if (Array.isArray(value)) {
+    rawRules = value;
+  } else if (value && typeof value === 'object' && Array.isArray(value.rules)) {
+    rawRules = value.rules;
+  } else {
+    const rawValue = String(value || '').trim();
+    if (!rawValue) {
+      return [];
+    }
+
+    try {
+      const parsed = JSON.parse(rawValue);
+      rawRules = Array.isArray(parsed) ? parsed : [];
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  return rawRules
+    .map(function (rule) {
+      return normalizeScheduleRule(rule);
+    })
+    .filter(Boolean);
+}
+
+function serializeScheduleRules(value) {
+  const normalized = parseScheduleRules(value);
+  if (normalized === null) {
+    return null;
+  }
+  return JSON.stringify(normalized);
+}
+
+function formatDateTime(value) {
+  const raw = String(value || '').trim();
+  if (!raw) {
+    return '';
+  }
+  return raw.replace('T', ' ').slice(0, 16);
+}
+
+function formatTime(value) {
+  const raw = String(value || '').trim();
+  if (!raw) {
+    return '';
+  }
+  return raw.slice(0, 5);
+}
+
+function formatDays(value) {
+  const days = normalizeDayValues(value);
+  return days
+    .map(function (day) {
+      return DAY_NAMES[day] || '';
+    })
+    .filter(Boolean)
+    .join(', ');
+}
+
+function formatScheduleRuleSummary(rule) {
+  const normalized = normalizeScheduleRule(rule);
+  if (!normalized) {
+    return 'Always visible';
+  }
+
+  const leftParts = [];
+  if (normalized.start_datetime && normalized.end_datetime) {
+    leftParts.push('Dates ' + formatDateTime(normalized.start_datetime) + ' to ' + formatDateTime(normalized.end_datetime));
+  } else {
+    leftParts.push('Any date');
+  }
+
+  const rightParts = [];
+  const days = formatDays(normalized.days || []);
+  if (days) {
+    rightParts.push(days);
+  }
+  if (normalized.start_time && normalized.end_time) {
+    rightParts.push(formatTime(normalized.start_time) + '-' + formatTime(normalized.end_time));
+  }
+
+  if (rightParts.length) {
+    return leftParts[0] + ': ' + rightParts.join(' ');
+  }
+
+  return leftParts[0];
+}
+
+function formatScheduleRulesSummary(value) {
+  const rules = parseScheduleRules(value) || [];
+  if (!rules.length) {
+    return 'Always visible';
+  }
+
+  return rules.length === 1 ? '1 rule' : String(rules.length) + ' rules';
+}
+
+module.exports = {
+  normalizeDateTimeValue: normalizeDateTimeValue,
+  normalizeTimeValue: normalizeTimeValue,
+  normalizeDayValues: normalizeDayValues,
+  normalizeScheduleRule: normalizeScheduleRule,
+  parseScheduleRules: parseScheduleRules,
+  serializeScheduleRules: serializeScheduleRules,
+  formatScheduleRuleSummary: formatScheduleRuleSummary,
+  formatScheduleRulesSummary: formatScheduleRulesSummary
+};

src/web/middleware.js

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

src/web/pages/error.js

@@ -1,6 +1,7 @@
 // Error page renderer for the web UI.
 
-const { renderView } = require('../view');
+const { renderView } = require('#src/web/view');
+const { PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 function getErrorCopy(statusCode, message) {
   const normalizedStatusCode = Number(statusCode) || 500;
@@ -9,7 +10,7 @@ function getErrorCopy(statusCode, message) {
     return {
       title: 'Access denied',
       errorTitle: 'Access denied',
-      errorMessage: message || 'You do not have permission to access this area.',
+      errorMessage: message || PERMISSION_DENIED_MESSAGE,
       backLabel: 'Back to dashboard'
     };
   }
@@ -47,7 +48,7 @@ module.exports = function renderErrorPage(options, currentUser) {
   return renderView('error/error', {
     title: String(errorOptions.title || copy.title || 'Error').trim(),
     active: '',
-    messageVariant: 'primary',
+    messageVariant: statusCode === 403 ? 'warning' : 'primary',
     currentUser: currentUser || null,
     statusCode: statusCode,
     errorTitle: String(errorOptions.errorTitle || copy.errorTitle || errorOptions.title || 'Error').trim(),

src/web/pages/index.js

@@ -19,24 +19,28 @@ module.exports = {
   renderPlaylistEditPage: require(routePath('signage', 'playlists', 'edit')),
   renderPlaylistSlideConfigPage: require(routePath('signage', 'playlists', 'slide-config')),
   renderApiSourcesPage: require(routePath('data-sources', 'api-sources', 'list')),
-  renderApiSourceFormPage: require(routePath('data-sources', 'api-sources', 'add')),
+  renderApiSourceAddPage: require(routePath('data-sources', 'api-sources', 'add')),
   renderApiSourceEditPage: require(routePath('data-sources', 'api-sources', 'edit')),
+  renderTimetableGroupsPage: require(routePath('data-sources', 'timetables', 'list')),
+  renderTimetableGroupAddPage: require(routePath('data-sources', 'timetables', 'add')),
+  renderTimetableGroupEditPage: require(routePath('data-sources', 'timetables', 'edit')),
   renderRssFeedsPage: require(routePath('data-sources', 'rss-feeds', 'list')),
-  renderRssFeedFormPage: require(routePath('data-sources', 'rss-feeds', 'add')),
+  renderRssFeedAddPage: require(routePath('data-sources', 'rss-feeds', 'add')),
   renderRssFeedEditPage: require(routePath('data-sources', 'rss-feeds', 'edit')),
   renderScreensPage: require(routePath('signage', 'screens', 'list')),
   renderScreenFormPage: require(routePath('signage', 'screens', 'add')),
   renderScreenEditPage: require(routePath('signage', 'screens', 'edit')),
   renderAnnouncementsPage: require(routePath('signage', 'announcements', 'list')),
-  renderAnnouncementFormPage: require(routePath('signage', 'announcements', 'add')),
+  renderAnnouncementAddPage: require(routePath('signage', 'announcements', 'add')),
   renderAnnouncementEditPage: require(routePath('signage', 'announcements', 'edit')),
   renderSlidesPage: require(routePath('signage', 'slides', 'list')),
-  renderSlideFormPage: require(routePath('signage', 'slides', 'form')),
+  renderSlideAddPage: require(routePath('signage', 'slides', 'add')),
+  renderSlideEditPage: require(routePath('signage', 'slides', 'edit')),
   renderTemplatesPage: require(routePath('signage', 'templates', 'list')),
-  renderTemplateFormPage: require(routePath('signage', 'templates', 'add')),
+  renderTemplateAddPage: require(routePath('signage', 'templates', 'add')),
   renderTemplateEditPage: require(routePath('signage', 'templates', 'edit')),
   renderCanvasSizesPage: require(routePath('signage', 'canvas-sizes', 'list')),
-  renderCanvasSizeFormPage: require(routePath('signage', 'canvas-sizes', 'add')),
+  renderCanvasSizeAddPage: require(routePath('signage', 'canvas-sizes', 'add')),
   renderCanvasSizeEditPage: require(routePath('signage', 'canvas-sizes', 'edit')),
   renderFontsPage: require(routePath('settings', 'fonts', 'list')),
   renderBackgroundTasksPage: require(routePath('settings', 'background-tasks-page')).renderBackgroundTasksPage,

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

@@ -146,6 +146,10 @@
   min-height: 0;
 }
 
+.min-w-0 {
+  min-width: 0;
+}
+
 .sidebar-brand .brand-text.fw-light {
   margin: 0;
 }
@@ -170,7 +174,8 @@
 .card-header .card-tools {
   position: absolute;
   right: 20px;
-  top: 12px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .card-header .card-tools > .btn,
@@ -185,6 +190,82 @@
   max-width: 14rem;
 }
 
+.template-preview-card .card-body {
+  gap: 0.75rem 1rem;
+}
+
+.template-preview-card.is-previewing {
+  border-color: rgba(var(--bs-primary-rgb), 0.45);
+}
+
+.template-preview-card.is-previewing .card-header {
+  position: relative;
+}
+
+.template-preview-card.is-previewing .card-title {
+  position: relative;
+  padding-right: 6.25rem;
+}
+
+.template-preview-card.is-previewing .card-title::after {
+  content: ' previewing';
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 0.35rem);
+  color: var(--bs-primary);
+  font-size: 0.8em;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  transform: translateY(-50%);
+}
+
+.template-preview-card .btn-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.template-preview-card .btn-group .btn {
+  width: 100%;
+}
+
+.template-preview-card[hidden] {
+  display: none !important;
+}
+
+.template-designer-form--previewing .designer-stage {
+  box-shadow: none !important;
+  overflow: hidden;
+}
+
+.template-designer-form--previewing .designer-overlay {
+  cursor: progress;
+}
+
+.template-designer-form--previewing .designer-rect {
+  transition: none !important;
+}
+
+.template-designer-form--previewing .resize-handle {
+  display: none;
+}
+
+.template-designer-form--previewing .region-item,
+.template-designer-form--previewing .template-details-card,
+.template-designer-form--previewing .template-options-card,
+.template-designer-form--previewing .region-info-card {
+  opacity: 0.84;
+}
+
+.template-designer-form--previewing .region-item [disabled],
+.template-designer-form--previewing .template-details-card [disabled],
+.template-designer-form--previewing .template-options-card [disabled],
+.template-designer-form--previewing .region-info-card [disabled] {
+  cursor: not-allowed;
+}
+
 .announcement-icon-picker {
   position: relative;
 }
@@ -526,6 +607,115 @@
   font-size: 0.875rem;
 }
 
+.screen-command-card .card-header {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.screen-command-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.screen-command-panel-left {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.screen-command-panel-right {
+  display: grid;
+  align-content: start;
+  padding: 0.9rem 1rem;
+  border-left: 1px solid var(--bs-border-color);
+}
+
+.screen-command-selector-field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.screen-command-selector-label {
+  color: var(--bs-secondary-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.screen-command-summary {
+  display: grid;
+  gap: 0.35rem;
+  align-content: start;
+  min-width: 0;
+}
+
+.screen-command-summary strong {
+  line-height: 1.2;
+}
+
+.screen-command-summary-meta {
+  color: var(--bs-secondary-color);
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+.screen-command-pill {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.screen-command-pill.is-live {
+  background: rgba(13, 110, 253, 0.12);
+  color: var(--bs-primary);
+}
+
+.screen-command-pill.is-idle {
+  background: rgba(108, 117, 125, 0.12);
+  color: var(--bs-secondary-color);
+}
+
+.screen-command-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.screen-command-actions .btn {
+  min-width: 8.75rem;
+}
+
+.screen-command-actions .inline-form {
+  margin: 0;
+}
+
+@media (max-width: 767.98px) {
+  .screen-command-panel {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
+  }
+
+  .screen-command-panel-right {
+    padding: 0;
+    border-left: 0;
+  }
+
+  .screen-command-actions {
+    justify-content: stretch;
+  }
+
+  .screen-command-actions .btn {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
 .dashboard-screen-card-header {
   display: flex;
   align-items: flex-start;
@@ -660,7 +850,19 @@
   border-bottom-right-radius: calc(var(--bs-border-radius) - 1px);
 }
 
-.card-body.table-responsive > table.table > thead th {
+.playlist-items-table-responsive {
+  overflow: hidden;
+  border-bottom-left-radius: calc(var(--bs-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--bs-border-radius) - 1px);
+}
+
+.playlist-items-table-responsive > table.table {
+  width: 100%;
+  table-layout: auto;
+}
+
+.card-body.table-responsive > table.table > thead th,
+.playlist-items-table-responsive > table.table > thead th {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -725,6 +927,10 @@ td[data-label="Slides"] {
   position: relative;
 }
 
+.slide-editor-sidebar {
+  align-self: start;
+}
+
 .slide-form-stack {
   display: grid;
   gap: 1rem;
@@ -1271,7 +1477,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   position: relative;
   width: 100%;
   min-height: 18rem;
-  /* overflow: hidden; */
+  overflow: visible;
   border: 1px solid var(--bs-border-color);
   border-radius: 0;
   background: var(--bs-body-bg);
@@ -1301,11 +1507,16 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .designer-overlay {
   z-index: 2;
   cursor: default;
+  --designer-overlay-scale: 1;
 }
 
 .designer-rect {
   position: absolute;
-  border: 2px solid rgba(13, 110, 253, 0.95);
+  overflow: visible;
+  z-index: 3;
+  border: 0;
+  outline: 2px solid rgba(13, 110, 253, 0.95);
+  outline-offset: -2px;
   background: rgba(13, 110, 253, 0.12);
   box-sizing: border-box;
   border-radius: 0;
@@ -1315,20 +1526,20 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 .designer-rect.selected {
-  border-color: rgba(25, 135, 84, 1);
+  outline-color: rgba(25, 135, 84, 1);
   background: rgba(25, 135, 84, 0.14);
 }
 
 .designer-rect-label {
   position: absolute;
-  left: 0.4rem;
-  top: 0.35rem;
+  left: calc(6px * var(--designer-overlay-scale, 1));
+  top: calc(6px * var(--designer-overlay-scale, 1));
   max-width: 100%;
-  padding: 0.15rem 0.45rem;
+  padding: calc(2px * var(--designer-overlay-scale, 1)) calc(7px * var(--designer-overlay-scale, 1));
   border-radius: 999px;
   background: rgba(33, 37, 41, 0.92);
   color: #fff;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--designer-overlay-scale, 1));
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
@@ -1341,8 +1552,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .resize-handle {
   position: absolute;
-  width: 0.8rem;
-  height: 0.8rem;
+  z-index: 4;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
   border-radius: 999px;
   border: 2px solid #fff;
   background: rgba(13, 110, 253, 1);
@@ -1352,28 +1565,28 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .resize-handle.nw {
   left: 0;
   top: 0;
-  transform: translate(-50%, -50%);
+  transform: translate(-40%, -40%);
   cursor: nwse-resize;
 }
 
 .resize-handle.ne {
   right: 0;
   top: 0;
-  transform: translate(50%, -50%);
+  transform: translate(40%, -40%);
   cursor: nesw-resize;
 }
 
 .resize-handle.sw {
   left: 0;
   bottom: 0;
-  transform: translate(-50%, 50%);
+  transform: translate(-40%, 40%);
   cursor: nesw-resize;
 }
 
 .resize-handle.se {
   right: 0;
   bottom: 0;
-  transform: translate(50%, 50%);
+  transform: translate(40%, 40%);
   cursor: nwse-resize;
 }
 
@@ -1511,6 +1724,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.region-field-grid--animation {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .region-field-grid > label {
   display: grid;
   gap: 0.35rem;
@@ -1526,6 +1743,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: nowrap;
   gap: 0;
   min-height: 3.25rem;
 }
@@ -1539,6 +1757,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .template-field-head strong {
   font-size: 0.95rem;
+  min-width: 0;
 }
 
 .template-field-head .chip {
@@ -1559,6 +1778,35 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   overflow: visible;
 }
 
+.template-field-card.collapsed-card {
+  overflow: hidden;
+}
+
+.template-field-card.collapsed-card > .card-body {
+  display: block !important;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.template-field-card.collapsed-card .card-header {
+  border-bottom-left-radius: var(--bs-border-radius);
+  border-bottom-right-radius: var(--bs-border-radius);
+}
+
+.template-field-body {
+  min-width: 0;
+  transition: opacity 0.5s ease;
+}
+
+.template-field-card.collapsing-card .template-field-body,
+.template-field-card.collapsed-card .template-field-body {
+  opacity: 0;
+}
+
+.template-field-card.expanding-card .template-field-body {
+  opacity: 1;
+}
+
 .template-field-card .card-header,
 .region-item .card-header {
   background: var(--bs-tertiary-bg);
@@ -1623,6 +1871,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   display: grid;
   gap: 0.5rem;
   padding-top: 0.25rem;
+  margin-bottom: 0.75rem;
 }
 
 .api-region-placeholder-title {
@@ -1634,7 +1883,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 .api-region-sample-accordion {
-  padding: 0.85rem 1rem;
+  padding: 0.85rem 1rem 1rem;
+  margin-bottom: 0.75rem;
   border: 1px solid var(--bs-border-color);
   border-radius: 0.85rem;
   background: var(--bs-secondary-bg);
@@ -1718,7 +1968,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
   .region-field-grid--identity,
   .region-field-grid--position,
-  .region-field-grid--size {
+  .region-field-grid--size,
+  .region-field-grid--animation {
     grid-template-columns: 1fr;
   }
 }
@@ -1734,6 +1985,11 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
     position: static;
   }
 
+  .slide-editor-sidebar {
+    position: static;
+    top: auto;
+  }
+
   .slide-editor-shell {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -1842,14 +2098,27 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   background: rgba(var(--bs-primary-rgb), 0.08);
 }
 
+.playlist-slide-picker-card.is-mismatch {
+  border-color: var(--bs-border-color-translucent);
+  background: rgba(var(--bs-secondary-rgb), 0.08);
+}
+
 .playlist-slide-picker-card.is-assigned .playlist-slide-picker-media {
   filter: saturate(0.85) grayscale(0.25);
 }
 
+.playlist-slide-picker-card.is-mismatch .playlist-slide-picker-media {
+  filter: saturate(0.8) grayscale(0.45);
+}
+
 .playlist-slide-picker-card.is-assigned .playlist-slide-picker-title {
   color: var(--bs-body-secondary);
 }
 
+.playlist-slide-picker-card.is-mismatch .playlist-slide-picker-title {
+  color: var(--bs-body-secondary);
+}
+
 .playlist-slide-picker-card.is-hidden {
   display: none !important;
 }
@@ -1962,7 +2231,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   max-width: none;
   overflow: hidden;
   width: min(calc(100vw - 2rem), 56rem);
-  max-height: calc(100vh - 0.25rem);
+  height: calc(100vh - 2rem);
+  max-height: calc(100vh - 2rem);
   margin: 0;
 }
 
@@ -1972,6 +2242,61 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .slide-schedule-content {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.slide-schedule-content .slide-schedule-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.slide-schedule-content .slide-schedule-card form {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.slide-schedule-content .slide-schedule-card .card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.slide-schedule-content #schedule-rule-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+
+.slide-schedule-content .schedule-rule-card .card-header {
+  align-items: flex-start;
+}
+
+.slide-schedule-content .schedule-rule-card.collapsed-card {
+  overflow: hidden;
+}
+
+.slide-schedule-content .schedule-rule-card.collapsed-card > .card-body {
+  display: block !important;
+  padding: 0 !important;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.slide-schedule-content .schedule-rule-card.collapsed-card .card-header {
+  border-bottom-left-radius: var(--bs-border-radius);
+  border-bottom-right-radius: var(--bs-border-radius);
+}
+
+.slide-schedule-content .schedule-rule-card .card-body {
+  padding-top: 0.75rem;
 }
 
 .actions,
@@ -2035,7 +2360,8 @@ td[data-label="Actions"] > div {
   white-space: nowrap;
 }
 
-td[data-label="Duration"] {
+td[data-label="Duration"],
+td[data-label="Config"] {
   text-align: left;
 }
 
@@ -2116,6 +2442,7 @@ table.table > :not(caption) > * > * {
   line-height: 1;
   cursor: grab;
   text-decoration: none;
+  touch-action: none;
 }
 
 .playlist-drag-handle-icon {
@@ -2143,6 +2470,20 @@ table.table > :not(caption) > * > * {
   cursor: grabbing;
 }
 
+.playlist-row-ghost {
+  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08) !important;
+  opacity: 0.45;
+}
+
+.playlist-row-dragging {
+  box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.18);
+  opacity: 0.98;
+}
+
+.playlist-row-drag-layer {
+  will-change: transform;
+}
+
 table.table thead th.sortable {
   cursor: pointer;
   white-space: nowrap;

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

@@ -19,7 +19,123 @@
       var message = form.getAttribute('data-confirm-message');
       if (message && !window.confirm(message)) {
         event.preventDefault();
+        return;
       }
+
+      var actionPath = '';
+      try {
+        actionPath = new URL(form.action, window.location.href).pathname;
+      } catch (_error) {
+        actionPath = String(form.action || '');
+      }
+
+      if (!/\/delete(?:\/|$)/.test(actionPath)) {
+        return;
+      }
+
+      if (form.dataset && form.dataset.busy === 'true') {
+        event.preventDefault();
+        return;
+      }
+
+      event.preventDefault();
+      form.dataset.busy = 'true';
+
+      fetch(form.action, {
+        method: (form.method || 'POST').toUpperCase(),
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+          'Accept': 'application/json, text/plain, */*'
+        },
+        credentials: 'same-origin'
+      }).then(function (response) {
+        if (!response.ok) {
+          return response.text().then(function (text) {
+            var error = new Error(text || 'Unable to delete item.');
+            error.status = response.status;
+            throw error;
+          });
+        }
+
+        if (isLoginRedirect(response)) {
+          window.location.replace(response.url || '/login');
+          return;
+        }
+
+        window.location.replace(response.url || window.location.href);
+      }).catch(function (error) {
+        if (typeof showToast === 'function') {
+          var status = Number(error && error.status);
+          var variant = status === 403 ? 'warning' : status >= 400 && status < 500 ? 'warning' : 'danger';
+          showToast(error.message || 'Unable to delete item.', variant);
+          return;
+        }
+        window.alert(error.message || 'Unable to delete item.');
+      }).finally(function () {
+        delete form.dataset.busy;
+      });
+    });
+  }
+
+  function initDeleteButtons() {
+    document.addEventListener('click', function (event) {
+      var deleteButton = event.target.closest('[data-delete-action-url]');
+      if (!deleteButton) {
+        return;
+      }
+
+      if (deleteButton.disabled || (deleteButton.dataset && deleteButton.dataset.busy === 'true')) {
+        event.preventDefault();
+        return;
+      }
+
+      var actionUrl = deleteButton.getAttribute('data-delete-action-url');
+      if (!actionUrl) {
+        return;
+      }
+
+      var message = deleteButton.getAttribute('data-confirm-message');
+      if (message && !window.confirm(message)) {
+        event.preventDefault();
+        return;
+      }
+
+      event.preventDefault();
+      deleteButton.dataset.busy = 'true';
+
+      fetch(actionUrl, {
+        method: 'POST',
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+          'Accept': 'application/json, text/plain, */*'
+        },
+        credentials: 'same-origin'
+      }).then(function (response) {
+        if (!response.ok) {
+          return response.text().then(function (text) {
+            var error = new Error(text || 'Unable to delete item.');
+            error.status = response.status;
+            throw error;
+          });
+        }
+
+        if (isLoginRedirect(response)) {
+          window.location.replace(response.url || '/login');
+          return;
+        }
+
+        window.location.replace(response.url || window.location.href);
+      }).catch(function (error) {
+        if (typeof showToast === 'function') {
+          var status = Number(error && error.status);
+          var variant = status === 403 ? 'warning' : status >= 400 && status < 500 ? 'warning' : 'danger';
+          showToast(error.message || 'Unable to delete item.', variant);
+          return;
+        }
+        window.alert(error.message || 'Unable to delete item.');
+      }).finally(function () {
+        delete deleteButton.dataset.busy;
+      });
     });
   }
 
@@ -79,6 +195,201 @@
     }, true);
   }
 
+  function parseAsyncSaveResponseMessage(responseText) {
+    var savedMessage = '';
+    try {
+      var responseDocument = new DOMParser().parseFromString(responseText || '', 'text/html');
+      var toastBody = responseDocument.querySelector('.toast-body');
+      if (toastBody && toastBody.textContent) {
+        savedMessage = toastBody.textContent.trim();
+      }
+    } catch (_error) {
+      savedMessage = '';
+    }
+
+    return savedMessage;
+  }
+
+  function parseAsyncSaveErrorMessage(responseText) {
+    var errorMessage = parseAsyncSaveResponseMessage(responseText);
+    if (errorMessage) {
+      return errorMessage;
+    }
+
+    return String(responseText || '').trim();
+  }
+
+  function getAsyncSaveActionField(form) {
+    if (!form || !form.querySelector) {
+      return null;
+    }
+
+    return form.querySelector('input[type="hidden"][name="save_action"]') || form.querySelector('input[type="hidden"][name="action"]');
+  }
+
+  function isLoginRedirect(response) {
+    if (!response || !response.redirected || !response.url) {
+      return false;
+    }
+
+    try {
+      return new URL(response.url, window.location.href).pathname === '/login';
+    } catch (_error) {
+      return /\/login(?:[?#]|$)/.test(String(response.url || ''));
+    }
+  }
+
+  async function submitAsyncSaveForm(form, event, options) {
+    var settings = options || {};
+    if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
+      return false;
+    }
+
+    if (form.dataset && form.dataset.busy === 'true') {
+      if (event) {
+        event.preventDefault();
+      }
+      return false;
+    }
+
+    var message = form.getAttribute('data-confirm-message');
+    if (message && !window.confirm(message)) {
+      if (event) {
+        event.preventDefault();
+      }
+      return false;
+    }
+
+    if (event) {
+      event.preventDefault();
+    }
+
+    form.dataset.busy = 'true';
+
+    try {
+      if (typeof settings.beforeSubmit === 'function') {
+        var beforeResult = await settings.beforeSubmit(form, event);
+        if (beforeResult === false) {
+          return false;
+        }
+      }
+
+      var hiddenSaveAction = getAsyncSaveActionField(form);
+      var formData = new FormData(form);
+      var submitterValue = String((hiddenSaveAction && hiddenSaveAction.value) || form.dataset.submitterValue || '').trim().toLowerCase();
+      if (event && event.submitter && event.submitter.name) {
+        submitterValue = String(event.submitter.value || '').trim().toLowerCase();
+        formData.set(event.submitter.name, event.submitter.value || '');
+      }
+
+      var hasFileValue = false;
+      formData.forEach(function (value) {
+        if (value && typeof value === 'object' && typeof value.name === 'string') {
+          hasFileValue = true;
+        }
+      });
+
+      var isMultipart = hasFileValue || String(form.enctype || '').toLowerCase() === 'multipart/form-data';
+      var body = isMultipart ? formData : new URLSearchParams();
+
+      if (!isMultipart) {
+        formData.forEach(function (value, key) {
+          body.append(key, value);
+        });
+      }
+
+      var response = await fetch(form.action, {
+        method: (form.method || 'POST').toUpperCase(),
+        headers: Object.assign({
+          'X-Requested-With': 'XMLHttpRequest',
+          'Accept': 'text/html, application/json, text/plain, */*'
+        }, isMultipart ? {} : {
+          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        }),
+        body: isMultipart ? body : body.toString(),
+        credentials: 'same-origin'
+      });
+
+      if (!response.ok) {
+        var responseText = await response.text();
+        throw new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.'));
+      }
+
+      if (isLoginRedirect(response)) {
+        window.location.replace(response.url || '/login');
+        return true;
+      }
+
+      if (submitterValue === 'close' || submitterValue === 'new') {
+        var redirectUrl = submitterValue === 'close'
+          ? String(response.url || form.dataset.asyncSaveCloseUrl || window.location.href)
+          : String(response.url || form.dataset.asyncSaveNewUrl || window.location.href);
+        window.location.replace(redirectUrl);
+        return true;
+      }
+
+      if (form.dataset && form.dataset.asyncSaveNewRedirect === 'response-url') {
+        window.location.replace(String(response.url || form.dataset.asyncSaveNewUrl || window.location.href));
+        return true;
+      }
+
+      var responseText = await response.text();
+      var responseDocument = null;
+      try {
+        responseDocument = new DOMParser().parseFromString(responseText || '', 'text/html');
+      } catch (_error) {
+        responseDocument = null;
+      }
+
+      if (typeof settings.afterSuccess === 'function') {
+        await settings.afterSuccess({
+          form: form,
+          response: response,
+          responseText: responseText,
+          responseDocument: responseDocument,
+          submitterValue: submitterValue
+        });
+      }
+
+      clearFormDirty(form);
+
+      var successMessage = typeof settings.getSuccessMessage === 'function'
+        ? settings.getSuccessMessage({
+            form: form,
+            response: response,
+            responseText: responseText,
+            responseDocument: responseDocument,
+            submitterValue: submitterValue
+          })
+        : parseAsyncSaveResponseMessage(responseText);
+
+      showToast(successMessage || String(settings.fallbackSuccessMessage || 'Saved.'), 'success');
+      return true;
+    } catch (error) {
+      if (typeof showToast === 'function') {
+        var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
+        showToast(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'), variant);
+      } else {
+        window.alert(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'));
+      }
+      return false;
+    } finally {
+      delete form.dataset.busy;
+      delete form.dataset.submitterValue;
+      if (typeof settings.afterFinally === 'function') {
+        settings.afterFinally(form);
+      }
+      var hiddenInput = getAsyncSaveActionField(form);
+      if (hiddenInput) {
+        hiddenInput.value = '';
+      }
+    }
+  }
+
+  window.webAsyncSaveForm = window.webAsyncSaveForm || {};
+  window.webAsyncSaveForm.submit = submitAsyncSaveForm;
+  window.webAsyncSaveForm.parseResponseMessage = parseAsyncSaveResponseMessage;
+
   function initAsyncCommandForms() {
     function getAnnouncementActionState(actionPath) {
       var isPlay = /\/play$/.test(actionPath);
@@ -174,7 +485,7 @@
         return;
       }
 
-      var hiddenInput = form.querySelector('input[type="hidden"][name="save_action"]');
+      var hiddenInput = getAsyncSaveActionField(form);
       if (!hiddenInput) {
         hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
@@ -208,6 +519,9 @@
       if (typeof window.initTableSearches === 'function') {
         window.initTableSearches(targetElement);
       }
+      if (targetElement.id === 'playlist-items-body' && typeof window.rebindPlaylistTableDrag === 'function') {
+        window.rebindPlaylistTableDrag(targetElement);
+      }
     }
 
     function replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId) {
@@ -311,7 +625,7 @@
         return;
       }
 
-      var button = target.closest('button[name="save_action"]');
+      var button = target.closest('button[name="save_action"], button[name="action"]');
       if (!button) {
         return;
       }
@@ -330,129 +644,24 @@
       if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
         return;
       }
-
-      if (form.dataset && form.dataset.busy === 'true') {
-        event.preventDefault();
-        return;
-      }
-
-      var message = form.getAttribute('data-confirm-message');
-      if (message && !window.confirm(message)) {
-        event.preventDefault();
-        return;
-      }
-
-      event.preventDefault();
-      form.dataset.busy = 'true';
-
-      var hiddenSaveAction = form.querySelector('input[type="hidden"][name="save_action"]');
-      var formData = new FormData(form);
-      var submitterValue = String((hiddenSaveAction && hiddenSaveAction.value) || form.dataset.submitterValue || '').trim().toLowerCase();
-      if (event.submitter && event.submitter.name) {
-        submitterValue = String(event.submitter.value || '').trim().toLowerCase();
-        formData.set(event.submitter.name, event.submitter.value || '');
-      }
-      var hasFileValue = false;
-      formData.forEach(function (value) {
-        if (value && typeof value === 'object' && typeof value.name === 'string') {
-          hasFileValue = true;
-        }
-      });
-
-      var isMultipart = hasFileValue || String(form.enctype || '').toLowerCase() === 'multipart/form-data';
-      var body = isMultipart ? formData : new URLSearchParams();
-
-      if (!isMultipart) {
-        formData.forEach(function (value, key) {
-          body.append(key, value);
-        });
-      }
-
-      fetch(form.action, {
-        method: (form.method || 'POST').toUpperCase(),
-        headers: Object.assign({
-          'X-Requested-With': 'XMLHttpRequest',
-          'Accept': 'text/html, application/json, text/plain, */*'
-        }, isMultipart ? {} : {
-          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
-        }),
-        body: isMultipart ? body : body.toString(),
-        credentials: 'same-origin'
-      }).then(function (response) {
-        if (!response.ok) {
-          return response.text().then(function (text) {
-            var error = new Error(text || 'Unable to save changes.');
-            error.status = response.status;
-            throw error;
-          });
-        }
-        var actionUrl = '';
-        try {
-          actionUrl = new URL(form.action, window.location.href).pathname;
-        } catch (_error) {
-          actionUrl = String(form.action || '');
-        }
+      submitAsyncSaveForm(form, event, {
+        fallbackSuccessMessage: 'Saved.',
+        afterSuccess: function (context) {
           var refreshTargetSelector = String(form.getAttribute('data-async-save-refresh-target') || '').trim();
           var refreshStateUrl = String(form.getAttribute('data-async-save-refresh-state-url') || '').trim();
-        var refreshTaskId = getResponseQueryValue(response.url || '', 'refresh_task_id');
-        var shouldFollowRedirect = Boolean(form.hasAttribute('data-async-save-new-url')) && !/\/\d+(?:\/|$)/.test(actionUrl);
-        if (submitterValue === 'close' || submitterValue === 'new') {
-          var redirectUrl = submitterValue === 'close'
-            ? String(form.dataset.asyncSaveCloseUrl || response.url || window.location.href)
-            : String(form.dataset.asyncSaveNewUrl || response.url || window.location.href);
-          window.location.replace(redirectUrl);
-          return;
-        }
-        if (shouldFollowRedirect && response.url) {
-          clearFormDirty(form);
-          window.location.replace(response.url);
-          return;
-        }
-        if (form.hasAttribute('data-async-save-reload-on-success')) {
-          clearFormDirty(form);
-          window.location.replace(response.url || window.location.href);
-          return;
-        }
-        clearFormDirty(form);
-        return response.text().then(function (text) {
-          var savedMessage = '';
-          var responseDocument = null;
-          try {
-            responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
-            var toastBody = responseDocument.querySelector('.toast-body');
-            if (toastBody && toastBody.textContent) {
-              savedMessage = toastBody.textContent.trim();
-            }
-          } catch (_error) {
-            savedMessage = '';
-          }
+          var refreshTaskId = getResponseQueryValue(context.response.url || '', 'refresh_task_id');
 
           if (refreshTargetSelector && refreshStateUrl && refreshTaskId) {
             refreshSequence += 1;
             watchRefreshTask(refreshStateUrl, refreshTaskId, refreshTargetSelector, refreshSequence);
-          } else if (refreshTargetSelector && responseDocument) {
+          } else if (refreshTargetSelector && context.responseDocument) {
             var currentTarget = document.querySelector(refreshTargetSelector);
-            var nextTarget = responseDocument.querySelector(refreshTargetSelector);
+            var nextTarget = context.responseDocument.querySelector(refreshTargetSelector);
             if (currentTarget && nextTarget) {
               currentTarget.outerHTML = nextTarget.outerHTML;
               rebindRefreshTarget(document.querySelector(refreshTargetSelector));
             }
           }
-
-          showToast(savedMessage || 'Saved.', 'success');
-        });
-      }).catch(function (error) {
-        if (typeof showToast === 'function') {
-          var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
-          showToast(error.message || 'Unable to save changes.', variant);
-          return;
-        }
-        window.alert(error.message || 'Unable to save changes.');
-      }).finally(function () {
-        delete form.dataset.busy;
-        delete form.dataset.submitterValue;
-        if (hiddenSaveAction) {
-          hiddenSaveAction.value = '';
         }
       });
     }, true);
@@ -651,6 +860,7 @@
   }
 
   initConfirmForms();
+  initDeleteButtons();
   initDirtyTracking();
   initCancelConfirm();
   initAsyncCommandForms();

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

@@ -6,20 +6,97 @@
   var getClientDisplayName = webUiHelpers.getClientDisplayName;
   var setButtonVariant = webUiHelpers.setButtonVariant;
   var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
+  var latestDashboardState = null;
 
+  function getClientMoveModalElements() {
+    return {
+      modal: document.getElementById('client-move-screen-modal'),
+      form: document.getElementById('client-move-screen-form'),
+      targetSelect: document.getElementById('client-move-screen-target'),
+      connectionInput: document.querySelector('[data-client-move-connection-id]'),
+      deviceInput: document.querySelector('[data-client-move-device-id]'),
+      clientNameInput: document.querySelector('[data-client-move-client-name]')
+    };
+  }
+
+  function getClientMoveScreens() {
+    if (latestDashboardState && Array.isArray(latestDashboardState.screens) && latestDashboardState.screens.length) {
+      return latestDashboardState.screens.slice().sort(compareScreensByConnectedClients);
+    }
+
+    var select = document.getElementById('client-move-screen-target');
+    if (!select || !select.options) {
+      return [];
+    }
+
+    return Array.prototype.slice.call(select.options).map(function (option) {
+      return {
+        slug: String(option.value || '').trim(),
+        name: String(option.textContent || option.value || '').trim()
+      };
+    }).filter(function (screen) {
+      return Boolean(screen && screen.slug);
+    });
+  }
+
+  function updateClientMoveModalFromRow(row) {
+    var elements = getClientMoveModalElements();
+    if (!elements.form || !elements.targetSelect || !row) {
+      return;
+    }
+
+    var currentScreenSlug = String(row.getAttribute('data-client-screen-slug') || '').trim();
+    var connectionId = String(row.getAttribute('data-client-key') || '').trim();
+    var deviceId = String(row.getAttribute('data-client-device-id') || '').trim();
+    var clientNameCell = row.querySelector('td[data-label="Client"] > div');
+    var clientName = String(clientNameCell && clientNameCell.textContent || '').trim();
+    var options = Array.prototype.slice.call(elements.targetSelect.options || []);
+
+    options.forEach(function (option) {
+      option.disabled = false;
+      if (String(option.value || '').trim() === currentScreenSlug) {
+        option.disabled = true;
+      }
+    });
+
+    elements.form.action = currentScreenSlug ? '/clients/' + encodeURIComponent(currentScreenSlug) + '/commands' : '#';
+    if (elements.connectionInput) {
+      elements.connectionInput.value = connectionId;
+    }
+    if (elements.deviceInput) {
+      elements.deviceInput.value = deviceId;
+    }
+    if (elements.clientNameInput) {
+      elements.clientNameInput.value = clientName;
+    }
+    elements.targetSelect.value = '';
+    if (elements.form.querySelector('button[type="submit"]')) {
+      elements.form.querySelector('button[type="submit"]').disabled = false;
+    }
+  }
   function renderClientActionCell(client) {
     var paused = Boolean(client.paused);
     var pauseButtonClass = 'btn btn-sm btn-info';
     var pauseButtonIcon = paused ? 'bi-play-fill' : 'bi-pause-fill';
-    var pauseButtonLabel = paused ? 'Resume' : 'Pause';
+    var pauseButtonLabel = paused ? 'Resume client' : 'Pause client';
+    var pauseButtonText = paused ? 'Resume' : 'Pause';
     var blackout = Boolean(client.blackout);
     var blackoutButtonClass = 'btn btn-sm ' + (blackout ? 'btn-success' : 'btn-secondary');
     var blackoutButtonIcon = blackout ? 'bi-eye' : 'bi-eye-slash';
-    var blackoutButtonLabel = blackout ? 'Restore' : 'Blackout';
+    var blackoutButtonLabel = blackout ? 'Restore client' : 'Blackout client';
+    var blackoutButtonText = blackout ? 'Restore' : 'Blackout';
     var reloadConfirmMessage = 'Reloading will restart the player page. Continue?';
-    var blackoutCommandValue = blackout ? 'false' : 'true';
 
-    return '<div class="actions justify-content-end"><form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-confirm-message="' + escapeHtml(reloadConfirmMessage) + '" data-async-command><input type="hidden" name="command" value="reload" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-danger" data-action="reload"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>Reload</button></form><form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="previous" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="previous" aria-label="Previous slide"><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></button></form><form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="next" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="next" aria-label="Next slide"><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></button></form><form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="pause" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="' + pauseButtonClass + '" data-action="pause"><i class="bi ' + pauseButtonIcon + ' me-1" aria-hidden="true"></i>' + pauseButtonLabel + '</button></form><form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="blackout" /><input type="hidden" name="blackout" value="' + blackoutCommandValue + '" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="' + blackoutButtonClass + '" data-action="blackout"><i class="bi ' + blackoutButtonIcon + ' me-1" aria-hidden="true"></i>' + blackoutButtonLabel + '</button></form></div>';
+    return [
+      '<div class="actions justify-content-end">',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-confirm-message="' + escapeHtml(reloadConfirmMessage) + '" data-async-command><input type="hidden" name="command" value="reload" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-danger" data-action="reload" aria-label="Reload client" title="Reload client"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></button></form>',
+      '<button type="button" class="btn btn-sm btn-danger" data-action="move-screen" data-bs-toggle="modal" data-bs-target="#client-move-screen-modal" aria-label="Move client to another screen" title="Move client to another screen"><i class="bi bi-display" aria-hidden="true"></i></button>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="previous" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="previous" aria-label="Previous slide" title="Previous slide"><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="next" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="btn btn-sm btn-warning" data-action="next" aria-label="Next slide" title="Next slide"><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="pause" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="' + pauseButtonClass + '" data-action="pause" aria-label="' + pauseButtonLabel + '" title="' + pauseButtonLabel + '"><i class="bi ' + pauseButtonIcon + ' me-1" aria-hidden="true"></i>' + pauseButtonText + '</button></form>',
+      '<form method="post" action="/clients/' + encodeURIComponent(client.screen_slug) + '/commands" class="d-inline-block m-0" data-async-command><input type="hidden" name="command" value="blackout" /><input type="hidden" name="blackout" value="' + (blackout ? 'false' : 'true') + '" /><input type="hidden" name="connectionId" value="' + escapeHtml(client.id) + '" /><button type="submit" class="' + blackoutButtonClass + '" data-action="blackout" aria-label="' + blackoutButtonLabel + '" title="' + blackoutButtonLabel + '"><i class="bi ' + blackoutButtonIcon + ' me-1" aria-hidden="true"></i>' + blackoutButtonText + '</button></form>',
+      '</div>'
+    ].join('');
   }
 
   function updateClientActionCell(cell, client) {
@@ -35,6 +112,8 @@
 
     var paused = Boolean(client.paused);
     setButtonVariant(pauseButton, ['btn-secondary', 'btn-outline-primary'], 'btn-info');
+    pauseButton.setAttribute('aria-label', paused ? 'Resume client' : 'Pause client');
+    pauseButton.setAttribute('title', paused ? 'Resume client' : 'Pause client');
     pauseButton.innerHTML = '<i class="bi ' + (paused ? 'bi-play-fill' : 'bi-pause-fill') + ' me-1" aria-hidden="true"></i>' + (paused ? 'Resume' : 'Pause');
 
     var pauseForm = pauseButton.form;
@@ -52,7 +131,9 @@
 
     var reloadButton = cell.querySelector('button[data-action="reload"]');
     if (reloadButton) {
-      reloadButton.innerHTML = '<i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>Reload';
+      reloadButton.setAttribute('aria-label', 'Reload client');
+      reloadButton.setAttribute('title', 'Reload client');
+      reloadButton.innerHTML = '<i class="bi bi-arrow-repeat" aria-hidden="true"></i>';
       setButtonVariant(reloadButton, ['btn-danger', 'btn-success', 'btn-outline-secondary', 'btn-outline-dark', 'btn-outline-primary', 'btn-secondary'], 'btn-danger');
       var reloadForm = reloadButton.form;
       if (reloadForm) {
@@ -74,6 +155,8 @@
     var blackout = Boolean(client.blackout);
     var blackoutButtonIcon = blackout ? 'bi-eye' : 'bi-eye-slash';
     setButtonVariant(blackoutButton, ['btn-success', 'btn-secondary'], blackout ? 'btn-success' : 'btn-secondary');
+    blackoutButton.setAttribute('aria-label', blackout ? 'Restore client' : 'Blackout client');
+    blackoutButton.setAttribute('title', blackout ? 'Restore client' : 'Blackout client');
     blackoutButton.innerHTML = '<i class="bi ' + blackoutButtonIcon + ' me-1" aria-hidden="true"></i>' + (blackout ? 'Restore' : 'Blackout');
 
     var blackoutForm = blackoutButton.form;
@@ -100,6 +183,7 @@
     }
     setButtonVariant(previousButton, ['btn-outline-secondary', 'btn-success', 'btn-danger', 'btn-primary', 'btn-secondary', 'btn-warning'], 'btn-warning');
     previousButton.setAttribute('aria-label', 'Previous slide');
+    previousButton.setAttribute('title', 'Previous slide');
     var previousForm = previousButton.form;
     if (previousForm) {
       var previousCommandInput = previousForm.querySelector('input[name="command"]');
@@ -120,6 +204,7 @@
     }
     setButtonVariant(nextButton, ['btn-outline-secondary', 'btn-success', 'btn-danger', 'btn-primary', 'btn-secondary', 'btn-warning'], 'btn-warning');
     nextButton.setAttribute('aria-label', 'Next slide');
+    nextButton.setAttribute('title', 'Next slide');
     var nextForm = nextButton.form;
     if (nextForm) {
       var nextCommandInput = nextForm.querySelector('input[name="command"]');
@@ -168,7 +253,7 @@
     var actionCell = hasActionsColumn ? '<td data-label="Actions">' + renderClientActionCell(client) + '</td>' : '';
 
     return [
-      '<tr data-client-key="' + escapeHtml(getClientRowKey(client)) + '" data-client-id="' + escapeHtml(client.clientId || '') + '" data-client-screen-slug="' + escapeHtml(client.screen_slug || '') + '">',
+      '<tr data-client-key="' + escapeHtml(getClientRowKey(client)) + '" data-client-id="' + escapeHtml(client.clientId || '') + '" data-client-device-id="' + escapeHtml(client.deviceId || '') + '" data-client-screen-slug="' + escapeHtml(client.screen_slug || '') + '">',
       '<td data-label="Client"><div>' + clientName + '</div></td>',
       '<td data-label="Current Screen"><div>' + screenName + '</div></td>',
       '<td data-label="Current Slide">' + currentSlide + '</td>',
@@ -328,6 +413,141 @@
     grid.innerHTML = screens.map(renderScreenTile).join('');
   }
 
+  function updateScreenCommandControls(state) {
+    var select = document.getElementById('screen-command-select');
+    if (!select) {
+      return;
+    }
+
+    var forms = Array.prototype.slice.call(document.querySelectorAll('[data-screen-command-form]'));
+    var pill = document.querySelector('[data-screen-command-pill]');
+    var nameNode = document.querySelector('[data-screen-command-name]');
+    var metaNode = document.querySelector('[data-screen-command-meta]');
+    var screens = Array.isArray(state && state.screens) ? state.screens : [];
+    var screenBySlug = {};
+
+    screens.forEach(function (screen) {
+      if (screen && screen.slug) {
+        screenBySlug[String(screen.slug)] = screen;
+      }
+    });
+
+    if (!screens.length) {
+      select.value = '';
+      select.disabled = true;
+      forms.forEach(function (form) {
+        form.querySelectorAll('button, input').forEach(function (control) {
+          control.disabled = true;
+        });
+      });
+      if (pill) {
+        pill.classList.remove('is-live');
+        pill.classList.add('is-idle');
+        pill.textContent = 'No screens';
+      }
+      if (nameNode) {
+        nameNode.textContent = 'No target available';
+      }
+      if (metaNode) {
+        metaNode.textContent = 'Create a screen before using screen-level commands.';
+      }
+      return;
+    }
+
+    select.disabled = false;
+    if (!select.value || !screenBySlug[select.value]) {
+      select.value = screens[0].slug || '';
+    }
+
+    var selectedScreen = screenBySlug[select.value] || screens[0];
+    var selectedSlug = String(selectedScreen && selectedScreen.slug || '').trim();
+    var selectedClients = Array.isArray(state && state.clients) ? state.clients.filter(function (client) {
+      return String(client && client.screen_slug || '').trim() === selectedSlug;
+    }) : [];
+    var connectionCount = selectedClients.length;
+    var hasClients = connectionCount > 0;
+    var allPaused = hasClients && selectedClients.every(function (client) {
+      return Boolean(client && client.paused);
+    });
+    var allBlackout = hasClients && selectedClients.every(function (client) {
+      return Boolean(client && client.blackout);
+    });
+    var connectionLabel = hasClients ? connectionCount + ' connected client' + (connectionCount === 1 ? '' : 's') : 'No clients connected';
+
+    if (pill) {
+      pill.classList.toggle('is-live', hasClients);
+      pill.classList.toggle('is-idle', !hasClients);
+      pill.textContent = connectionLabel;
+    }
+    if (nameNode) {
+      nameNode.textContent = String(selectedScreen && selectedScreen.name || 'Selected screen');
+    }
+    if (metaNode) {
+      metaNode.textContent = 'Commands sent here target every client currently using this screen.';
+    }
+
+    forms.forEach(function (form) {
+      var command = String(form.getAttribute('data-screen-command-action') || '').trim().toLowerCase();
+      var commandInput = form.querySelector('input[name="command"]');
+      var button = form.querySelector('button[type="submit"]');
+      if (commandInput) {
+        if (command === 'pause') {
+          commandInput.value = allPaused ? 'pause' : 'pause';
+          var pauseStateInput = form.querySelector('input[name="paused"]');
+          if (pauseStateInput) {
+            pauseStateInput.value = allPaused ? 'false' : 'true';
+          }
+          if (button) {
+            button.innerHTML = '<i class="bi ' + (allPaused ? 'bi-play-fill' : 'bi-pause-fill') + ' me-1" aria-hidden="true"></i>' + (allPaused ? 'Resume screen' : 'Pause screen');
+          }
+          setButtonVariant(button, ['btn-success', 'btn-info', 'btn-secondary', 'btn-outline-secondary', 'btn-outline-dark'], allPaused ? 'btn-success' : 'btn-info');
+          form.setAttribute('data-confirm-message', allPaused ? 'Resume all connected clients on this screen?' : 'Pause all connected clients on this screen?');
+        } else if (command === 'blackout') {
+          commandInput.value = 'blackout';
+          var blackoutStateInput = form.querySelector('input[name="blackout"]');
+          if (blackoutStateInput) {
+            blackoutStateInput.value = allBlackout ? 'false' : 'true';
+          }
+          if (button) {
+            button.innerHTML = '<i class="bi ' + (allBlackout ? 'bi-eye' : 'bi-eye-slash') + ' me-1" aria-hidden="true"></i>' + (allBlackout ? 'Restore screen' : 'Blackout screen');
+          }
+          setButtonVariant(button, ['btn-success', 'btn-secondary', 'btn-danger', 'btn-outline-secondary', 'btn-outline-dark'], allBlackout ? 'btn-success' : 'btn-secondary');
+          form.setAttribute('data-confirm-message', allBlackout ? 'Restore all connected clients on this screen?' : 'Blackout all connected clients on this screen?');
+        } else {
+          commandInput.value = command || commandInput.value || '';
+        }
+      }
+      form.action = selectedSlug ? '/clients/' + encodeURIComponent(selectedSlug) + '/commands' : '#';
+      if (command === 'reload') {
+        form.setAttribute('data-confirm-message', 'Reload selected screen?');
+        if (button) {
+          button.innerHTML = '<i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>Reload screen';
+        }
+      }
+      Array.prototype.slice.call(form.querySelectorAll('button, input')).forEach(function (control) {
+        control.disabled = !selectedSlug;
+      });
+    });
+  }
+
+  function readScreenCommandStateFromDom() {
+    var select = document.getElementById('screen-command-select');
+    if (!select) {
+      return { screens: [] };
+    }
+
+    return {
+      screens: Array.prototype.slice.call(select.options || []).map(function (option) {
+        return {
+          slug: String(option.value || '').trim(),
+          name: String(option.getAttribute('data-screen-name') || option.textContent || option.value || '').trim(),
+          player_connection_count: Number(option.getAttribute('data-player-connection-count') || 0),
+          playlist_name: String(option.getAttribute('data-playlist-name') || '').trim()
+        };
+      })
+    };
+  }
+
   function updateDashboardQuickActions(state) {
     var pauseButton = document.getElementById('dashboard-pause-all-button');
     var blackoutButton = document.getElementById('dashboard-blackout-all-button');
@@ -378,8 +598,10 @@
     if (!state) {
       return;
     }
+    latestDashboardState = state;
     updateStats(state);
     updateScreenGrid(state);
+    updateScreenCommandControls(state);
     updateClientTable(state);
     updateDashboardQuickActions(state);
   }
@@ -468,7 +690,98 @@
     });
   }
 
+  function initClientMoveHandler() {
+    var elements = getClientMoveModalElements();
+    if (!elements.modal || !elements.form || !elements.targetSelect) {
+      return;
+    }
+
+    document.addEventListener('click', function (event) {
+      var moveButton = event.target && event.target.closest ? event.target.closest('button[data-action="move-screen"]') : null;
+      if (!moveButton) {
+        return;
+      }
+
+      var row = moveButton.closest ? moveButton.closest('tr[data-client-key]') : null;
+      if (!row) {
+        return;
+      }
+
+      updateClientMoveModalFromRow(row);
+    });
+
+    elements.form.addEventListener('submit', function (event) {
+      if (elements.form.dataset && elements.form.dataset.busy === 'true') {
+        event.preventDefault();
+        return;
+      }
+
+      var targetScreenSlug = String(elements.targetSelect.value || '').trim();
+      if (!targetScreenSlug) {
+        event.preventDefault();
+        window.alert('Choose a target screen.');
+        return;
+      }
+
+      event.preventDefault();
+      elements.form.dataset.busy = 'true';
+
+      var formData = new FormData(elements.form);
+      var body = new URLSearchParams();
+      formData.forEach(function (value, key) {
+        body.append(key, value);
+      });
+
+      fetch(elements.form.action, {
+        method: (elements.form.method || 'POST').toUpperCase(),
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'Accept': 'application/json, text/plain, */*'
+        },
+        body: body.toString(),
+        credentials: 'same-origin'
+      }).then(function (response) {
+        if (!response.ok) {
+          return response.text().then(function (text) {
+            var error = new Error(text || 'Unable to move client.');
+            try {
+              var payload = JSON.parse(text);
+              if (payload && (payload.error || payload.message)) {
+                error = new Error(String(payload.error || payload.message));
+              }
+            } catch (_error) {
+              // fall back to the raw text body
+            }
+            throw error;
+          });
+        }
+
+        if (window.pulseModal && typeof window.pulseModal.hide === 'function') {
+          window.pulseModal.hide(elements.modal);
+        } else if (window.bootstrap && window.bootstrap.Modal) {
+          window.bootstrap.Modal.getOrCreateInstance(elements.modal).hide();
+        }
+        return response.json().catch(function () {
+          return { ok: true };
+        });
+      }).catch(function (error) {
+        window.alert(error && error.message ? error.message : 'Unable to move client.');
+      }).finally(function () {
+        delete elements.form.dataset.busy;
+      });
+    });
+  }
+
   window.webHandleDashboardState = handleDashboardState;
 
   initClientRenameHandler();
+  initClientMoveHandler();
+  var screenCommandSelect = document.getElementById('screen-command-select');
+  if (screenCommandSelect) {
+    updateScreenCommandControls(latestDashboardState || readScreenCommandStateFromDom());
+    screenCommandSelect.addEventListener('change', function () {
+      updateScreenCommandControls(latestDashboardState || readScreenCommandStateFromDom());
+    });
+  }
 }());

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

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

src/web/public/js/data-sources/timetable-group-form.js

@@ -0,0 +1,121 @@
+// Minimal row editor for timetable groups.
+
+(function () {
+  var form = document.getElementById('timetable-group-form');
+  var body = document.querySelector('[data-timetable-entries-body]');
+  var addButton = document.querySelector('[data-add-timetable-entry]');
+  var template = document.getElementById('timetable-entry-row-template');
+
+  if (!form || !body || !addButton || !template) {
+    return;
+  }
+
+  function pad(value) {
+    return String(value).padStart(2, '0');
+  }
+
+  function formatDateTimeLocalValue(date) {
+    if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    return [
+      String(date.getFullYear()).padStart(4, '0'),
+      '-',
+      pad(date.getMonth() + 1),
+      '-',
+      pad(date.getDate()),
+      'T',
+      pad(date.getHours()),
+      ':',
+      pad(date.getMinutes())
+    ].join('');
+  }
+
+  function parseUtcDateTimeLocalValue(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return null;
+    }
+
+    var normalized = /(?:[zZ]|[+-]\d\d(?::?\d\d)?)$/.test(raw) ? raw : raw + 'Z';
+    var date = new Date(normalized);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  function toUtcDateTimeLocalValue(value) {
+    var localDate = new Date(String(value || '').trim());
+    return Number.isNaN(localDate.getTime()) ? '' : localDate.toISOString();
+  }
+
+  function syncRowValuesToLocal(row) {
+    if (!row) {
+      return;
+    }
+
+    ['entry_start_datetime[]', 'entry_end_datetime[]'].forEach(function (name) {
+      var input = row.querySelector('[name="' + name + '"]');
+      if (!input || input.dataset.timetableTimezoneSynced === 'true') {
+        return;
+      }
+
+      var localValue = formatDateTimeLocalValue(parseUtcDateTimeLocalValue(input.value));
+      if (localValue) {
+        input.value = localValue;
+      }
+      input.dataset.timetableTimezoneSynced = 'true';
+    });
+  }
+
+  function syncFormDataToUtc(formData) {
+    var rows = body.querySelectorAll('[data-timetable-entry-row]');
+    ['entry_id[]', 'entry_title[]', 'entry_short_description[]', 'entry_start_datetime[]', 'entry_end_datetime[]'].forEach(function (name) {
+      formData.delete(name);
+    });
+
+    rows.forEach(function (row) {
+      var idInput = row.querySelector('[name="entry_id[]"]');
+      var titleInput = row.querySelector('[name="entry_title[]"]');
+      var descriptionInput = row.querySelector('[name="entry_short_description[]"]');
+      var startInput = row.querySelector('[name="entry_start_datetime[]"]');
+      var endInput = row.querySelector('[name="entry_end_datetime[]"]');
+
+      formData.append('entry_id[]', idInput ? idInput.value : '');
+      formData.append('entry_title[]', titleInput ? titleInput.value : '');
+      formData.append('entry_short_description[]', descriptionInput ? descriptionInput.value : '');
+      formData.append('entry_start_datetime[]', startInput ? toUtcDateTimeLocalValue(startInput.value) : '');
+      formData.append('entry_end_datetime[]', endInput ? toUtcDateTimeLocalValue(endInput.value) : '');
+    });
+  }
+
+  function bindRemove(row) {
+    var button = row.querySelector('[data-remove-timetable-entry]');
+    if (!button) {
+      return;
+    }
+    button.addEventListener('click', function () {
+      row.remove();
+    });
+  }
+
+  function addRow() {
+    var fragment = template.content.cloneNode(true);
+    var row = fragment.querySelector('[data-timetable-entry-row]');
+    if (!row) {
+      return;
+    }
+    bindRemove(row);
+    body.appendChild(fragment);
+  }
+
+  body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) {
+    bindRemove(row);
+    syncRowValuesToLocal(row);
+  });
+
+  form.addEventListener('formdata', function (event) {
+    syncFormDataToUtc(event.formData);
+  });
+
+  addButton.addEventListener('click', addRow);
+}());

src/web/public/js/playlists/playlist-table-drag.js

@@ -0,0 +1,410 @@
+(function () {
+  // Playlist table drag sorting is isolated here so the playlist editor script
+  // can stay focused on slide picking, schedule editing, and row updates.
+
+  function getDragEventPoint(event) {
+    var touch = event.touches && event.touches[0] ? event.touches[0] : event.changedTouches && event.changedTouches[0] ? event.changedTouches[0] : null;
+
+    return {
+      x: touch ? touch.clientX : event.clientX,
+      y: touch ? touch.clientY : event.clientY
+    };
+  }
+
+  function measureDraggedRowWidths(row) {
+    var metrics = {
+      rowRect: row.getBoundingClientRect(),
+      cellRects: []
+    };
+
+    Array.prototype.forEach.call(row.children, function (cell) {
+      metrics.cellRects.push(cell.getBoundingClientRect());
+    });
+
+    return metrics;
+  }
+
+  function lockDraggedRowWidths(row, metrics) {
+    if (!row) {
+      return;
+    }
+
+    var rowRect = metrics && metrics.rowRect ? metrics.rowRect : row.getBoundingClientRect();
+    row.style.width = rowRect.width + 'px';
+    row.style.height = rowRect.height + 'px';
+    row.style.boxSizing = 'border-box';
+
+    Array.prototype.forEach.call(row.children, function (cell, index) {
+      var cellRect = metrics && metrics.cellRects && metrics.cellRects[index] ? metrics.cellRects[index] : cell.getBoundingClientRect();
+      cell.style.width = cellRect.width + 'px';
+      cell.style.height = cellRect.height + 'px';
+      cell.style.boxSizing = 'border-box';
+    });
+  }
+
+  function syncDraggedRowCellPadding(row, sourceRow) {
+    if (!row || !sourceRow) {
+      return;
+    }
+
+    Array.prototype.forEach.call(row.children, function (cell, index) {
+      var sourceCell = sourceRow.children[index];
+      if (!sourceCell) {
+        return;
+      }
+
+      var sourceStyle = window.getComputedStyle(sourceCell);
+      cell.style.paddingLeft = sourceStyle.paddingLeft;
+      cell.style.paddingRight = sourceStyle.paddingRight;
+      cell.style.paddingTop = sourceStyle.paddingTop;
+      cell.style.paddingBottom = sourceStyle.paddingBottom;
+    });
+  }
+
+  function unlockDraggedRowWidths(row) {
+    if (!row) {
+      return;
+    }
+
+    row.style.width = '';
+    row.style.height = '';
+    row.style.boxSizing = '';
+
+    Array.prototype.forEach.call(row.children, function (cell) {
+      cell.style.width = '';
+      cell.style.height = '';
+      cell.style.boxSizing = '';
+    });
+  }
+
+  function animateRowReorder(previousRects, excludedRows) {
+    var excluded = Array.isArray(excludedRows) ? excludedRows : [];
+
+    if (!previousRects || typeof previousRects.forEach !== 'function') {
+      return;
+    }
+
+    window.requestAnimationFrame(function () {
+      previousRects.forEach(function (previousRect, row) {
+        var nextRect;
+        var deltaY;
+        var previousTransition;
+
+        if (!row || excluded.indexOf(row) !== -1 || !row.parentNode) {
+          return;
+        }
+
+        nextRect = row.getBoundingClientRect();
+        deltaY = previousRect.top - nextRect.top;
+
+        if (!deltaY) {
+          return;
+        }
+
+        previousTransition = row.style.transition;
+        row.style.transition = 'none';
+        row.style.transform = 'translate3d(0, ' + deltaY + 'px, 0)';
+        row.offsetHeight;
+        row.style.transition = 'transform 180ms ease';
+
+        window.requestAnimationFrame(function () {
+          if (!row.parentNode) {
+            return;
+          }
+
+          row.style.transform = '';
+
+          var cleanup = function () {
+            row.style.transition = previousTransition;
+            row.removeEventListener('transitionend', cleanup);
+            row.removeEventListener('transitioncancel', cleanup);
+          };
+
+          row.addEventListener('transitionend', cleanup, { once: true });
+          row.addEventListener('transitioncancel', cleanup, { once: true });
+        });
+      });
+    });
+  }
+
+  function initPlaylistTableDrag(options) {
+    var tbody = options && options.tbody ? options.tbody : null;
+    var onOrderChanged = options && typeof options.onOrderChanged === 'function' ? options.onOrderChanged : function () {};
+    var rowDragState = null;
+
+    if (!tbody) {
+      return;
+    }
+
+    if (tbody.dataset && tbody.dataset.playlistTableDragBound === 'true') {
+      return;
+    }
+
+    if (tbody.dataset) {
+      tbody.dataset.playlistTableDragBound = 'true';
+    }
+
+    function getRows() {
+      return Array.prototype.slice.call(tbody.querySelectorAll('tr[data-playlist-slide-row]:not([data-playlist-ghost-row])'));
+    }
+
+    function getDragHandle(target) {
+      return target && target.closest ? target.closest('[data-playlist-drag-handle]') : null;
+    }
+
+    function prepareGhostRow(row) {
+      if (!row) {
+        return;
+      }
+
+      row.setAttribute('data-playlist-ghost-row', 'true');
+      row.setAttribute('aria-hidden', 'true');
+      row.classList.add('playlist-row-ghost');
+      row.style.pointerEvents = 'none';
+
+      Array.prototype.forEach.call(row.querySelectorAll('[id]'), function (node) {
+        node.removeAttribute('id');
+      });
+
+      Array.prototype.forEach.call(row.querySelectorAll('input, select, textarea, button'), function (control) {
+        control.disabled = true;
+        control.setAttribute('tabindex', '-1');
+        if (control.tagName === 'BUTTON') {
+          control.setAttribute('type', 'button');
+        }
+      });
+    }
+
+    function createDragLayer(row, width) {
+      var table = row.ownerDocument.createElement('table');
+      var tbodyElement = row.ownerDocument.createElement('tbody');
+
+      table.className = 'playlist-row-drag-layer';
+      table.style.position = 'fixed';
+      table.style.top = '0';
+      table.style.left = '0';
+      table.style.margin = '0';
+      table.style.borderCollapse = 'collapse';
+      table.style.borderSpacing = '0';
+      table.style.tableLayout = 'fixed';
+      table.style.pointerEvents = 'none';
+      table.style.zIndex = '1080';
+      table.style.width = width + 'px';
+
+      tbodyElement.appendChild(row);
+      table.appendChild(tbodyElement);
+      row.ownerDocument.body.appendChild(table);
+
+      return table;
+    }
+
+    function positionDragLayer(layer, metrics, point) {
+      if (!layer || !metrics || !point) {
+        return;
+      }
+
+      layer.style.transform = 'translate3d(' + (point.x - metrics.offsetX) + 'px, ' + (point.y - metrics.offsetY) + 'px, 0)';
+    }
+
+    function beginRowDrag() {
+      if (!rowDragState || rowDragState.active) {
+        return;
+      }
+
+      var row = rowDragState.row;
+      var metrics = rowDragState.metrics;
+      var placeholder = row.cloneNode(true);
+      var rowRect = metrics.rowRect;
+
+      prepareGhostRow(placeholder);
+      lockDraggedRowWidths(placeholder, metrics);
+      syncDraggedRowCellPadding(placeholder, row);
+      placeholder.classList.add('playlist-row-ghost');
+      tbody.insertBefore(placeholder, row);
+
+      rowDragState.placeholder = placeholder;
+      rowDragState.dragLayer = createDragLayer(row, metrics.rowRect.width);
+      rowDragState.active = true;
+      rowDragState.metrics.offsetX = rowDragState.startX - rowRect.left;
+      rowDragState.metrics.offsetY = rowDragState.startY - rowRect.top;
+
+      lockDraggedRowWidths(row, metrics);
+      syncDraggedRowCellPadding(row, placeholder);
+
+      row.classList.add('playlist-row-dragging');
+      row.style.pointerEvents = 'none';
+      row.setAttribute('aria-grabbed', 'true');
+
+      positionDragLayer(rowDragState.dragLayer, metrics, rowDragState.currentPoint || {
+        x: rowDragState.startX,
+        y: rowDragState.startY
+      });
+    }
+
+    function repositionGhostRow(clientY) {
+      var rows = getRows();
+      var insertBeforeRow = null;
+      var previousRects = new Map();
+      var moved = false;
+
+      rows.forEach(function (row) {
+        if (row !== rowDragState.placeholder) {
+          previousRects.set(row, row.getBoundingClientRect());
+        }
+      });
+
+      for (var index = 0; index < rows.length; index += 1) {
+        var candidateRow = rows[index];
+        var rect = candidateRow.getBoundingClientRect();
+
+        if (clientY < rect.top + rect.height / 2) {
+          insertBeforeRow = candidateRow;
+          break;
+        }
+      }
+
+      if (insertBeforeRow) {
+        if (rowDragState.placeholder !== insertBeforeRow && rowDragState.placeholder.nextSibling !== insertBeforeRow) {
+          tbody.insertBefore(rowDragState.placeholder, insertBeforeRow);
+          moved = true;
+        }
+      } else if (rowDragState.placeholder.parentNode !== tbody || rowDragState.placeholder.nextSibling) {
+        tbody.appendChild(rowDragState.placeholder);
+        moved = true;
+      }
+
+      if (moved) {
+        animateRowReorder(previousRects, [rowDragState.row, rowDragState.placeholder]);
+      }
+    }
+
+    function teardownRowDrag() {
+      if (!rowDragState) {
+        return;
+      }
+
+      if (rowDragState.supportsPointerEvents) {
+        document.removeEventListener('pointermove', handleRowDragMove);
+        document.removeEventListener('pointerup', handleRowDragEnd);
+        document.removeEventListener('pointercancel', handleRowDragEnd);
+      } else {
+        document.removeEventListener('mousemove', handleRowDragMove);
+        document.removeEventListener('mouseup', handleRowDragEnd);
+        document.removeEventListener('touchmove', handleRowDragMove);
+        document.removeEventListener('touchend', handleRowDragEnd);
+        document.removeEventListener('touchcancel', handleRowDragEnd);
+      }
+
+      if (rowDragState.active) {
+        if (rowDragState.placeholder && rowDragState.placeholder.parentNode) {
+          rowDragState.placeholder.parentNode.insertBefore(rowDragState.row, rowDragState.placeholder);
+          rowDragState.placeholder.parentNode.removeChild(rowDragState.placeholder);
+        } else if (rowDragState.row.parentNode !== tbody) {
+          tbody.appendChild(rowDragState.row);
+        }
+
+        if (rowDragState.dragLayer && rowDragState.dragLayer.parentNode) {
+          rowDragState.dragLayer.parentNode.removeChild(rowDragState.dragLayer);
+        }
+
+        rowDragState.row.classList.remove('playlist-row-dragging');
+        rowDragState.row.style.pointerEvents = rowDragState.previousPointerEvents;
+        rowDragState.row.removeAttribute('aria-grabbed');
+        unlockDraggedRowWidths(rowDragState.row);
+        onOrderChanged();
+      }
+
+      rowDragState = null;
+    }
+
+    function handleRowDragMove(event) {
+      if (!rowDragState) {
+        return;
+      }
+
+      var point = getDragEventPoint(event);
+
+      if (!point) {
+        return;
+      }
+
+      rowDragState.currentPoint = point;
+
+      if (!rowDragState.active) {
+        var threshold = typeof rowDragState.threshold === 'number' ? rowDragState.threshold : 3;
+
+        if (Math.abs(point.x - rowDragState.startX) < threshold && Math.abs(point.y - rowDragState.startY) < threshold) {
+          return;
+        }
+
+        beginRowDrag();
+      }
+
+      event.preventDefault();
+      positionDragLayer(rowDragState.dragLayer, rowDragState.metrics, point);
+      repositionGhostRow(point.y);
+    }
+
+    function handleRowDragEnd() {
+      teardownRowDrag();
+    }
+
+    function handleRowDragStart(event) {
+      var handle = getDragHandle(event.target);
+      var row = handle ? handle.closest('tr[data-playlist-slide-row]') : null;
+      var point = getDragEventPoint(event);
+
+      if (!row || rowDragState) {
+        return;
+      }
+
+      if (event.type === 'mousedown' && event.button !== 0) {
+        return;
+      }
+
+      if (!point) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      rowDragState = {
+        row: row,
+        metrics: measureDraggedRowWidths(row),
+        startX: point.x,
+        startY: point.y,
+        currentPoint: point,
+        threshold: 3,
+        active: false,
+        previousPointerEvents: row.style.pointerEvents || '',
+        placeholder: null,
+        dragLayer: null,
+        supportsPointerEvents: typeof window !== 'undefined' && typeof window.PointerEvent === 'function'
+      };
+
+      if (rowDragState.supportsPointerEvents) {
+        document.addEventListener('pointermove', handleRowDragMove, { passive: false });
+        document.addEventListener('pointerup', handleRowDragEnd);
+        document.addEventListener('pointercancel', handleRowDragEnd);
+      } else {
+        document.addEventListener('mousemove', handleRowDragMove);
+        document.addEventListener('mouseup', handleRowDragEnd);
+        document.addEventListener('touchmove', handleRowDragMove, { passive: false });
+        document.addEventListener('touchend', handleRowDragEnd);
+        document.addEventListener('touchcancel', handleRowDragEnd);
+      }
+    }
+
+    // The drag handle is intentionally isolated from the rest of the playlist
+    // editor so it can be swapped or removed without touching schedule logic.
+    if (typeof window !== 'undefined' && window.PointerEvent) {
+      tbody.addEventListener('pointerdown', handleRowDragStart);
+    } else {
+      tbody.addEventListener('mousedown', handleRowDragStart);
+      tbody.addEventListener('touchstart', handleRowDragStart, { passive: false });
+    }
+  }
+
+  window.initPlaylistTableDrag = initPlaylistTableDrag;
+}());

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

@@ -191,6 +191,7 @@
     var region = context.region;
     var current = context.current || {};
     var config = context.config || {};
+    var placeholderFields = Array.isArray(context.placeholderFields) ? context.placeholderFields : [];
     var placeholderChips = String(context.placeholderChips || '');
     var sourceOptions = String(context.sourceOptions || '');
     var itemsPathValue = context.itemsPath !== undefined
@@ -234,7 +235,7 @@
           '<div class="muted slide-image-file">Use transforms like {{name.upper()}}, {{name.title()}}, or {{name.lower()}} on leaf fields.</div>' +
           '<div class="api-region-placeholder-section">' +
             '<div class="api-region-placeholder-title">Available placeholders</div>' +
-            '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
+            '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + ((placeholderFields.length && window.placeholderChips && typeof window.placeholderChips.renderChips === 'function') ? window.placeholderChips.renderChips(placeholderFields) : placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
           '</div>' +
           '<details class="api-region-sample-accordion" data-api-sample-data-accordion>' +
             '<summary>Data</summary>' +

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

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

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

@@ -218,7 +218,7 @@
             '<span class="chip">RSS</span>' +
           '</div>' +
         '</div>' +
-        '<div class="card-body p-3 d-grid">' +
+        '<div class="card-body p-3 d-grid gap-3 pb-0">' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +
@@ -237,9 +237,12 @@
           '</div>' +
           '<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
           '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
-          '<div class="muted slide-image-file">Use placeholders like {{title.upper()}}, {{title.title()}}, or {{title.lower()}}. Available placeholders:</div>' +
+          '<div class="muted slide-image-file">Use transforms like {{title.upper()}}, {{title.title()}}, or {{title.lower()}} on leaf fields.</div>' +
+          '<div class="api-region-placeholder-section">' +
+            '<div class="api-region-placeholder-title">Available placeholders</div>' +
             '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No RSS fields available.</span>') + '</div>' +
           '</div>' +
+        '</div>' +
       '</div>';
   }
 

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

@@ -21,7 +21,7 @@
   function renderEditorCard(context) {
     var region = context.region;
     var current = String(context.current || '');
-    var disableAudio = context.disableAudio === undefined ? true : Boolean(context.disableAudio);
+    var disableAudio = context.disableAudio === undefined ? false : Boolean(context.disableAudio);
     return '' +
       '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
         '<div class="card-header template-field-head">' +

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

@@ -0,0 +1,340 @@
+// Timetable region helpers for editor previews and defaults.
+
+(function () {
+  var registry = window.pulseRegionTypes;
+  var utils = window.pulseRegionUtils || {};
+  var placeholderChips = window.placeholderChips || {};
+  var placeholderUtils = window.placeholderUtils || {};
+  var DEFAULT_STYLE = {
+    font_family: 'Arial',
+    font_size: 28,
+    font_color: '#000000'
+  };
+
+  function escapeHtml(value) {
+    return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
+  }
+
+  function sanitizeRichText(html) {
+    return utils.sanitizeRichText ? utils.sanitizeRichText(html) : escapeHtml(html);
+  }
+
+  function getDefaultStyle() {
+    return {
+      font_family: DEFAULT_STYLE.font_family,
+      font_size: DEFAULT_STYLE.font_size,
+      font_color: DEFAULT_STYLE.font_color
+    };
+  }
+
+  function getTimetableGroups() {
+    return Array.isArray(window.initialData && window.initialData.timetableGroups) ? window.initialData.timetableGroups : [];
+  }
+
+  function getGroupById(groupId, groups) {
+    var normalizedId = Number(groupId || 0);
+    return (Array.isArray(groups) ? groups : getTimetableGroups()).find(function (group) {
+      return Number(group.id) === normalizedId;
+    }) || null;
+  }
+
+  function getEntries(groupId, groups) {
+    var group = getGroupById(groupId, groups);
+    return group && Array.isArray(group.entries) ? group.entries : [];
+  }
+
+  function toDate(value) {
+    if (!value) {
+      return null;
+    }
+    var date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  function isUpcoming(entry, now) {
+    var start = toDate(entry && entry.start_datetime);
+    return Boolean(start && now < start);
+  }
+
+  function isLive(entry, now) {
+    var start = toDate(entry && entry.start_datetime);
+    var end = toDate(entry && entry.end_datetime);
+    return Boolean(start && end && now >= start && now < end);
+  }
+
+  function getVisibleEntries(groupId, displayMode, maxItems, groups) {
+    var now = new Date();
+    var entries = getEntries(groupId, groups).slice().sort(function (left, right) {
+      var leftStart = toDate(left && left.start_datetime);
+      var rightStart = toDate(right && right.start_datetime);
+      return (leftStart ? leftStart.getTime() : 0) - (rightStart ? rightStart.getTime() : 0) || Number(left.id || 0) - Number(right.id || 0);
+    });
+    var mode = String(displayMode || 'upcoming').trim().toLowerCase();
+
+    entries = entries.filter(function (entry) {
+      if (mode === 'current') {
+        return isLive(entry, now);
+      }
+      if (mode === 'both') {
+        return isUpcoming(entry, now) || isLive(entry, now);
+      }
+      return isUpcoming(entry, now);
+    });
+
+    if (!entries.length && mode === 'upcoming') {
+      entries = getEntries(groupId, groups).filter(function (entry) {
+        return isLive(entry, now);
+      });
+    }
+
+    return entries.slice(0, Math.max(1, Number(maxItems || 5)));
+  }
+
+  function renderTemplate(template, context) {
+    var source = String(template || '');
+    if (!source) {
+      return '';
+    }
+
+    if (placeholderUtils && typeof placeholderUtils.resolvePlaceholderExpression === 'function' && typeof placeholderUtils.formatPlaceholderValue === 'function') {
+      return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+        return escapeHtml(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(context, expression)));
+      });
+    }
+
+    return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+      var value = context;
+      String(expression || '').trim().split('.').forEach(function (segment) {
+        if (value === undefined || value === null) {
+          value = '';
+          return;
+        }
+        value = value[segment];
+      });
+      return escapeHtml(value);
+    });
+  }
+
+  function getCurrentConfig(region, existingContent) {
+    var current = existingContent[region.region_key] || {};
+    return {
+      timetable_group_id: current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id),
+      display_mode: String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming',
+      value: String(current.value !== undefined ? current.value : current.text !== undefined ? current.text : ''),
+      max_items: Math.max(1, Number(current.max_items || 5)),
+      font_family: current.font_family || region.font_family || getDefaultStyle().font_family,
+      font_size: current.font_size || region.font_size || getDefaultStyle().font_size,
+      font_color: current.font_color || region.font_color || getDefaultStyle().font_color
+    };
+  }
+
+  function getSchedulePlaceholderTokens() {
+    return ['title', 'short_description', 'start', 'end'];
+  }
+
+  function renderSchedulePlaceholderChips(group, entries) {
+    var tokens = getSchedulePlaceholderTokens(group, entries);
+    if (placeholderChips && typeof placeholderChips.renderChips === 'function') {
+      return placeholderChips.renderChips(tokens);
+    }
+
+    return tokens.map(function (token) {
+      return '<span class="chip">{{' + escapeHtml(token) + '}}</span>';
+    }).join('');
+  }
+
+  function getCurrentSelection(regionId, card, existingContent, timetableGroups) {
+    var current = existingContent[regionId] || {};
+    var timetableGroupInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_group_id_' + regionId + '"]') : null;
+    var timetableDisplayModeInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_display_mode_' + regionId + '"]') : null;
+    var timetableMaxItemsInput = card && card.querySelector ? card.querySelector('input[name="region_timetable_max_items_' + regionId + '"]') : null;
+    var groupId = timetableGroupInput ? timetableGroupInput.value : (current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id));
+    var displayMode = timetableDisplayModeInput ? timetableDisplayModeInput.value : String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
+    var maxItems = Math.max(1, Number(timetableMaxItemsInput ? timetableMaxItemsInput.value : current.max_items || 5));
+    var group = getGroupById(groupId, timetableGroups);
+    var entries = getVisibleEntries(groupId, displayMode, maxItems, timetableGroups);
+    if (!entries.length) {
+      entries = getEntries(groupId, timetableGroups).slice(0, maxItems);
+    }
+
+    return {
+      group: group,
+      entries: entries,
+      displayMode: displayMode,
+      maxItems: maxItems
+    };
+  }
+
+  function renderEditorCard(context) {
+    var region = context.region;
+    var current = context.current || {};
+    var timetableGroups = Array.isArray(context.timetableGroups) ? context.timetableGroups : [];
+    var currentValue = String(current.value !== undefined ? current.value : current.text !== undefined ? current.text : '');
+    var currentGroupId = current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id);
+    var currentDisplayMode = String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
+    var currentMaxItems = Math.max(1, Number(current.max_items || 5));
+    var currentGroup = getGroupById(currentGroupId, timetableGroups);
+    var currentEntries = getVisibleEntries(currentGroupId, currentDisplayMode, currentMaxItems, timetableGroups);
+    if (!currentEntries.length) {
+      currentEntries = getEntries(currentGroupId, timetableGroups).slice(0, currentMaxItems);
+    }
+    var groupOptions = timetableGroups.map(function (group) {
+      var selected = Number(group.id) === Number(currentGroupId) ? ' selected' : '';
+      return '<option value="' + escapeHtml(group.id) + '"' + selected + '>' + escapeHtml(group.name || ('Group ' + group.id)) + '</option>';
+    }).join('');
+
+    return '' +
+      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" style="position:relative;overflow:visible !important;">' +
+        '<div class="card-header template-field-head">' +
+          '<strong>' + escapeHtml(region.label) + '</strong>' +
+          '<div class="template-field-actions"><span class="chip">Timetable</span></div>' +
+        '</div>' +
+        '<div class="card-body p-3 d-grid gap-3">' +
+          '<div class="editor-holder" data-region-id="' + region.id + '">' +
+            '<textarea class="editor-source" rows="10">' + escapeHtml(currentValue) + '</textarea>' +
+            '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(currentValue) + '" />' +
+          '</div>' +
+          '<div class="row g-3">' +
+            '<div class="col-12 col-lg-6">' +
+              '<label class="form-label" for="region_timetable_group_id_' + region.id + '">Timetable group</label>' +
+              '<select id="region_timetable_group_id_' + region.id + '" name="region_timetable_group_id_' + region.id + '" class="form-select">' +
+                '<option value="">Select a group</option>' +
+                groupOptions +
+              '</select>' +
+            '</div>' +
+            '<div class="col-6 col-lg-3">' +
+              '<label class="form-label" for="region_timetable_display_mode_' + region.id + '">Display mode</label>' +
+              '<select id="region_timetable_display_mode_' + region.id + '" name="region_timetable_display_mode_' + region.id + '" class="form-select">' +
+                '<option value="upcoming"' + (currentDisplayMode === 'upcoming' ? ' selected' : '') + '>Upcoming</option>' +
+                '<option value="current"' + (currentDisplayMode === 'current' ? ' selected' : '') + '>Current</option>' +
+                '<option value="both"' + (currentDisplayMode === 'both' ? ' selected' : '') + '>Both</option>' +
+              '</select>' +
+            '</div>' +
+            '<div class="col-6 col-lg-3">' +
+              '<label class="form-label" for="region_timetable_max_items_' + region.id + '">Max items</label>' +
+              '<input id="region_timetable_max_items_' + region.id + '" type="number" min="1" step="1" name="region_timetable_max_items_' + region.id + '" class="form-control" value="' + escapeHtml(currentMaxItems || 5) + '" />' +
+            '</div>' +
+          '</div>' +
+          '<div class="text-body-secondary small">Use the selected group and display mode to choose which timetable entry fields are available.</div>' +
+          '<div class="api-region-placeholder-section schedule-placeholder-section" data-schedule-placeholder-chips>' +
+            '<div class="api-region-placeholder-title">Available placeholders</div>' +
+            '<div class="d-flex flex-wrap gap-2">' + renderSchedulePlaceholderChips(currentGroup, currentEntries) + '</div>' +
+            '<div class="text-body-secondary small mt-2">Format start and end values with expressions like <code>{{start.format("MMM D, YYYY h:mm A")}}</code> and <code>{{end.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
+          '</div>' +
+          '</div>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function getTextStyle(region, current) {
+    var defaultStyle = getDefaultStyle();
+    return {
+      font_family: String(current.font_family || region.font_family || defaultStyle.font_family || 'Arial').trim() || 'Arial',
+      font_size: Math.max(8, Number(current.font_size || region.font_size || defaultStyle.font_size || 28)),
+      font_color: String(current.font_color || region.font_color || defaultStyle.font_color || '#000000').trim() || '#000000'
+    };
+  }
+
+  function updateSchedulePlaceholderPanel(card) {
+    if (!card) {
+      return;
+    }
+
+    var regionId = card.getAttribute('data-region-id');
+    var panel = card.querySelector('[data-schedule-placeholder-chips] .d-flex.flex-wrap.gap-2');
+    if (!regionId || !panel) {
+      return;
+    }
+
+    var groups = getTimetableGroups();
+    var current = getCurrentSelection(regionId, card, {}, groups);
+    panel.innerHTML = renderSchedulePlaceholderChips(current.group, current.entries);
+  }
+
+  if (!window.__scheduleRegionPlaceholderRefreshInstalled) {
+    window.__scheduleRegionPlaceholderRefreshInstalled = true;
+
+    document.addEventListener('change', function (event) {
+      var target = event.target;
+      if (!target || !target.closest) {
+        return;
+      }
+
+      if (!target.closest('select[name^="region_timetable_group_id_"], select[name^="region_timetable_display_mode_"], input[name^="region_timetable_max_items_"]')) {
+        return;
+      }
+
+      var card = target.closest('[data-region-id]');
+      if (card) {
+        updateSchedulePlaceholderPanel(card);
+      }
+    }, true);
+  }
+
+  function buildEditorCardContext(context) {
+    return {
+      region: context.region,
+      current: context.current || {},
+      timetableGroups: Array.isArray(context.timetableGroups) ? context.timetableGroups : []
+    };
+  }
+
+  function buildPreviewRenderContext(region, card, existingContent, timetableGroups) {
+    var current = getCurrentConfig(region, existingContent || {});
+    var timetableGroupInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_group_id_' + region.id + '"]') : null;
+    var timetableDisplayModeInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_display_mode_' + region.id + '"]') : null;
+    var timetableMaxItemsInput = card && card.querySelector ? card.querySelector('input[name="region_timetable_max_items_' + region.id + '"]') : null;
+    var textAreaInput = card && card.querySelector ? card.querySelector('textarea.editor-source') : null;
+    var hiddenInput = card && card.querySelector ? card.querySelector('input[type="hidden"][name="region_text_' + region.id + '"]') : null;
+    var editor = window.tinymce && typeof window.tinymce.get === 'function' ? window.tinymce.get('slide-editor-region-' + region.id) : null;
+    var value = String(editor ? editor.getContent({ format: 'html' }) : (hiddenInput && hiddenInput.value !== undefined ? hiddenInput.value : (textAreaInput && textAreaInput.value !== undefined ? textAreaInput.value : current.value)));
+
+    return {
+      value: value,
+      style: getTextStyle(region, current),
+      timetable_group_id: timetableGroupInput ? timetableGroupInput.value || current.timetable_group_id : current.timetable_group_id,
+      display_mode: timetableDisplayModeInput ? timetableDisplayModeInput.value || current.display_mode : current.display_mode,
+      max_items: timetableMaxItemsInput ? timetableMaxItemsInput.value || current.max_items : current.max_items,
+      existingContent: existingContent || {},
+      timetableGroups: Array.isArray(timetableGroups) ? timetableGroups : []
+    };
+  }
+
+  function renderPreview(region, regionContent, context) {
+    var groups = context && context.timetableGroups ? context.timetableGroups : [];
+    var style = regionContent && regionContent.style ? regionContent.style : getTextStyle(region, regionContent || {});
+    var value = String(regionContent && (regionContent.value !== undefined ? regionContent.value : regionContent.text !== undefined ? regionContent.text : '') || '').trim();
+    var groupId = regionContent && regionContent.timetable_group_id !== undefined ? regionContent.timetable_group_id : '';
+    var displayMode = regionContent && regionContent.display_mode ? regionContent.display_mode : 'upcoming';
+    var maxItems = regionContent && regionContent.max_items !== undefined ? regionContent.max_items : 5;
+    var group = getGroupById(groupId, groups);
+    var entries = getVisibleEntries(groupId, displayMode, maxItems, groups);
+
+    if (!value) {
+      return '<div class="slide-preview-region timetable" style="width:100%;height:100%;overflow:hidden;' + (style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '') + (style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '') + (style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '') + '"></div>';
+    }
+
+      return '<div class="slide-preview-region timetable" style="width:100%;height:100%;overflow:hidden;' + (style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '') + (style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '') + (style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '') + '">' + entries.map(function (entry, index) {
+      return '<div class="timetable-region-entry" data-timetable-entry-index="' + index + '">' + sanitizeRichText(renderTemplate(value, Object.assign({}, entry || {}, {
+        start: entry && entry.start_datetime !== undefined ? entry.start_datetime : '',
+        end: entry && entry.end_datetime !== undefined ? entry.end_datetime : '',
+        group: group || {},
+        entries: entries,
+        index: index + 1
+      }))) + '</div>';
+    }).join('') + '</div>';
+  }
+
+  registry.register('timetable', {
+    label: 'Timetable',
+    getDefaultStyle: getDefaultStyle,
+    getDefaultRegionSize: function () {
+      return { width: 520, height: 280 };
+    },
+    getCurrentConfig: getCurrentConfig,
+    renderPreview: renderPreview,
+    renderEditorCard: renderEditorCard,
+    buildEditorCardContext: buildEditorCardContext,
+    buildPreviewRenderContext: buildPreviewRenderContext
+  });
+}());

src/web/public/js/shared/placeholder-utils.js

@@ -2,7 +2,12 @@
 
 (function () {
   var root = window;
-  var transformPattern = /^(upper|lower|title)\(\)$/i;
+  var transformPattern = /^([a-z_][a-z0-9_]*)\((.*)\)$/i;
+
+  var monthNamesShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  var monthNamesLong = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var dayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  var dayNamesLong = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
   function resolvePath(value, path) {
     var current = value;
@@ -29,11 +34,15 @@
 
     while (segments.length) {
       var candidate = String(segments[segments.length - 1] || '').trim();
-      if (!transformPattern.test(candidate)) {
+      var match = candidate.match(transformPattern);
+      if (!match) {
         break;
       }
 
-      transforms.unshift(candidate.replace(/\(\)$/g, '').toLowerCase());
+      transforms.unshift({
+        name: String(match[1] || '').trim().toLowerCase(),
+        args: match[2] ? splitTransformArgs(match[2]) : []
+      });
       segments.pop();
     }
 
@@ -43,23 +52,89 @@
     };
   }
 
+  function splitTransformArgs(value) {
+    var source = String(value || '').trim();
+    if (!source) {
+      return [];
+    }
+
+    if ((source[0] === '"' && source[source.length - 1] === '"') || (source[0] === '\'' && source[source.length - 1] === '\'')) {
+      return [source.slice(1, -1)];
+    }
+
+    return source.split(',').map(function (item) {
+      return String(item || '').trim();
+    }).filter(Boolean);
+  }
+
+  function padNumber(value, size) {
+    var text = String(Math.abs(Number(value || 0)));
+    while (text.length < size) {
+      text = '0' + text;
+    }
+    return text;
+  }
+
+  function formatDateValue(value, pattern) {
+    var date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    var format = String(pattern || 'YYYY-MM-DD HH:mm').trim() || 'YYYY-MM-DD HH:mm';
+    var hours24 = date.getHours();
+    var hours12 = hours24 % 12 || 12;
+    var tokenMap = {
+      YYYY: String(date.getFullYear()),
+      YY: String(date.getFullYear()).slice(-2),
+      MMMM: monthNamesLong[date.getMonth()],
+      MMM: monthNamesShort[date.getMonth()],
+      MM: padNumber(date.getMonth() + 1, 2),
+      M: String(date.getMonth() + 1),
+      DD: padNumber(date.getDate(), 2),
+      D: String(date.getDate()),
+      dddd: dayNamesLong[date.getDay()],
+      ddd: dayNamesShort[date.getDay()],
+      HH: padNumber(hours24, 2),
+      H: String(hours24),
+      hh: padNumber(hours12, 2),
+      h: String(hours12),
+      mm: padNumber(date.getMinutes(), 2),
+      m: String(date.getMinutes()),
+      ss: padNumber(date.getSeconds(), 2),
+      s: String(date.getSeconds()),
+      A: hours24 >= 12 ? 'PM' : 'AM',
+      a: hours24 >= 12 ? 'pm' : 'am'
+    };
+
+    return format.replace(/\[([^\]]+)\]|YYYY|YY|MMMM|MMM|MM|M|DD|D|dddd|ddd|HH|H|hh|h|mm|m|ss|s|A|a/g, function (match, literal) {
+      return literal || tokenMap[match] || match;
+    });
+  }
+
   function applyTransform(value, transform) {
     var text = String(value === undefined || value === null ? '' : value);
+    var name = String(transform && transform.name || '').trim().toLowerCase();
+    var args = Array.isArray(transform && transform.args) ? transform.args : [];
 
-    if (transform === 'lower') {
+    if (name === 'lower') {
       return text.toLowerCase();
     }
 
-    if (transform === 'upper') {
+    if (name === 'upper') {
       return text.toUpperCase();
     }
 
-    if (transform === 'title') {
+    if (name === 'title') {
       return text.toLowerCase().replace(/\b([a-z])/g, function (match, letter) {
         return String(letter || '').toUpperCase();
       });
     }
 
+    if (name === 'format' || name === 'date' || name === 'datetime' || name === 'time') {
+      return formatDateValue(value, args[0] || (name === 'time' ? 'h:mm A' : name === 'date' ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A'));
+    }
+
     return text;
   }
 

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

@@ -23,6 +23,22 @@ export function createSlideFormEditorController(options) {
     return String(value === undefined || value === null ? '' : value).trim();
   }
 
+  function isEmptyRichTextValue(value) {
+    var raw = String(value === undefined || value === null ? '' : value).trim();
+    if (!raw) {
+      return true;
+    }
+
+    var stripped = raw
+      .replace(/<\s*br\s*\/?>/gi, '')
+      .replace(/<p[^>]*>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi, '')
+      .replace(/<[^>]+>/g, '')
+      .replace(/&nbsp;/gi, '')
+      .trim();
+
+    return !stripped;
+  }
+
   function normalizeFontSizeValue(value) {
     var raw = String(value || '').trim().toLowerCase();
     if (/^\d+(?:\.\d+)?px$/.test(raw)) {
@@ -156,6 +172,7 @@ export function createSlideFormEditorController(options) {
         editor.save();
       }
       var content = editor.getContent({ format: 'html' });
+      content = isEmptyRichTextValue(content) ? '' : content;
       if (hidden) {
         hidden.value = content;
       }
@@ -170,6 +187,7 @@ export function createSlideFormEditorController(options) {
 
     editor.on('init', function () {
       var content = editor.getContent({ format: 'html' });
+      content = isEmptyRichTextValue(content) ? '' : content;
       if (hidden) {
         hidden.value = content;
       }
@@ -215,20 +233,22 @@ export function createSlideFormEditorController(options) {
       promotion: false,
       statusbar: true,
       resize: true,
-      plugins: 'lists link code advlist fullscreen',
-      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | align lineheight indent outdent bullist numlist  | fullscreen',
+      plugins: 'lists code advlist fullscreen table',
+      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | align lineheight indent outdent bullist numlist table | fullscreen',
       toolbar_mode: 'sliding',
       license_key: 'gpl',
       skin: themeAssets.skinName,
       skin_url: themeAssets.skinUrl,
       content_css: getContentCss(),
       body_class: themeAssets.bodyClass,
-      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
+      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; } table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid currentColor; padding: 0.35em 0.5em; vertical-align: top; } th { font-weight: 700; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
       font_family_formats: getFontFamilyFormats(),
       font_size_input_default_unit: 'px',
+      invalid_elements: 'a',
       forced_root_block: 'p',
       force_br_newlines: false,
       newline_behavior: 'default',
+      placeholder: String(source.getAttribute('placeholder') || '').trim(),
       setup: function (editor) {
         editorInstances.set(regionId, editor);
         attachEditorEvents(regionId, editor);

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

@@ -8,6 +8,7 @@ export function createSlideFormRegionHelpers(options) {
   var existingContent = settings.existingContent || {};
   var rssFeeds = Array.isArray(settings.rssFeeds) ? settings.rssFeeds : [];
   var apiSources = Array.isArray(settings.apiSources) ? settings.apiSources : [];
+  var timetableGroups = Array.isArray(settings.timetableGroups) ? settings.timetableGroups : [];
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () { return null; };
   var placeholderUtils = window.placeholderUtils || {};
   var placeholderChips = window.placeholderChips || {};
@@ -199,7 +200,16 @@ export function createSlideFormRegionHelpers(options) {
 
   function updateRssPlaceholderChips(regionId, feedId) {
     var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
-    updatePlaceholderChipList(card, getRssFieldList(feedId), 'No RSS fields available.');
+    if (!card) {
+      return;
+    }
+
+    var container = card.querySelector('[data-placeholder-chips]');
+    if (!container) {
+      return;
+    }
+
+    container.innerHTML = buildLimitedPlaceholderChipMarkup(getRssFieldList(feedId), 'No RSS fields available.');
   }
 
   function getCurrentRssConfig(region) {
@@ -459,6 +469,15 @@ export function createSlideFormRegionHelpers(options) {
     };
   }
 
+  function getCurrentTimetableConfig(region) {
+    var current = existingContent[region.region_key] || {};
+    return {
+      timetable_group_id: current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id),
+      display_mode: String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming',
+      max_items: Math.max(1, Number(current.max_items || 5))
+    };
+  }
+
   function getCurrentRegionVideoDuration(region) {
     var current = existingContent[region.region_key] || {};
     var duration = Math.round(Number(current.duration_seconds || 0) * 1000) / 1000;
@@ -470,13 +489,13 @@ export function createSlideFormRegionHelpers(options) {
     if (module && typeof module.buildEditorCardContext === 'function') {
       return module.buildEditorCardContext({
         region: region,
-        current: region.region_type === 'rss' || region.region_type === 'api' || region.region_type === 'time-date' ? (existingContent[region.region_key] || {}) : getCurrentRegionValue(region),
+        current: region.region_type === 'rss' || region.region_type === 'api' || region.region_type === 'time-date' || region.region_type === 'timetable' ? (existingContent[region.region_key] || {}) : getCurrentRegionValue(region),
         currentDuration: getCurrentRegionVideoDuration(region),
         regionRatio: reduceAspectRatio(region.width, region.height),
         uploadMaxLabel: uploadMaxLabel,
         uploadVideoMaxLabel: uploadVideoMaxLabel,
         disableAudio: (existingContent[region.region_key] || {}).disable_audio,
-        config: region.region_type === 'api' ? getCurrentApiConfig(region) : getCurrentRssConfig(region),
+        config: region.region_type === 'api' ? getCurrentApiConfig(region) : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : getCurrentRssConfig(region),
         style: getCurrentTextStyle(region),
         fontSize: getCurrentTextStyle(region).font_size,
         feedOptions: rssFeeds.map(function (feed) {
@@ -492,8 +511,14 @@ export function createSlideFormRegionHelpers(options) {
               return '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
             }).join('')
           : buildLimitedPlaceholderChipMarkup(getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path), 'No JSON fields available.'),
-        sampleDataPreview: buildApiSampleDataMarkup(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).item_number, getCurrentApiConfig(region).items_path)
-      }, existingContent, region.region_type === 'rss' ? rssFeeds : apiSources);
+        placeholderFields: region.region_type === 'api'
+          ? getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path)
+          : region.region_type === 'rss'
+            ? getRssFieldList(getCurrentRssConfig(region).feed_id)
+            : [],
+        sampleDataPreview: buildApiSampleDataMarkup(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).item_number, getCurrentApiConfig(region).items_path),
+        timetableGroups: timetableGroups
+      }, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
     }
 
     var textStyle = getCurrentTextStyle(region);
@@ -510,7 +535,7 @@ export function createSlideFormRegionHelpers(options) {
       uploadMaxLabel: uploadMaxLabel,
       uploadVideoMaxLabel: uploadVideoMaxLabel,
       disableAudio: currentContent.disable_audio,
-      config: region.region_type === 'api' ? apiConfig : rssConfig,
+      config: region.region_type === 'api' ? apiConfig : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : rssConfig,
       style: textStyle,
       fontSize: textStyle.font_size,
       feedOptions: rssFeeds.map(function (feed) {
@@ -522,11 +547,15 @@ export function createSlideFormRegionHelpers(options) {
         return '<option value="' + escapeHtml(source.id) + '"' + selected + '>' + escapeHtml(source.name || ('Source ' + source.id)) + '</option>';
       }).join(''),
       placeholderChips: region.region_type === 'rss'
-        ? getRssFieldList(rssConfig.feed_id).map(function (field) {
-            return '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
-          }).join('')
+        ? buildLimitedPlaceholderChipMarkup(getRssFieldList(rssConfig.feed_id), 'No RSS fields available.')
         : buildLimitedPlaceholderChipMarkup(getApiFieldList(apiConfig.source_id, apiItemsPath), 'No JSON fields available.'),
-      sampleDataPreview: buildApiSampleDataMarkup(apiConfig.source_id, apiConfig.item_number, apiItemsPath)
+      placeholderFields: region.region_type === 'api'
+        ? getApiFieldList(apiConfig.source_id, apiItemsPath)
+        : region.region_type === 'rss'
+          ? getRssFieldList(rssConfig.feed_id)
+          : [],
+      sampleDataPreview: buildApiSampleDataMarkup(apiConfig.source_id, apiConfig.item_number, apiItemsPath),
+      timetableGroups: timetableGroups
     };
   }
 
@@ -536,13 +565,89 @@ export function createSlideFormRegionHelpers(options) {
       return '';
     }
 
-    return module.renderEditorCard(buildRegionEditorCardContext(region));
+    return makeRegionCardCollapsible(module.renderEditorCard(buildRegionEditorCardContext(region)), region);
+  }
+
+  function makeRegionCardCollapsible(html, region) {
+    if (typeof html !== 'string' || !html) {
+      return html;
+    }
+
+    if (html.indexOf('data-lte-toggle="card-collapse"') !== -1) {
+      return html;
+    }
+
+    var cardHtml = html.replace(
+      'class="card card-outline card-secondary admin-form-card template-field-card mb-3"',
+      'class="card card-widget card-outline card-secondary admin-form-card template-field-card mb-3"'
+    );
+
+    if (cardHtml === html) {
+      return html;
+    }
+
+    var bodyOpenMatch = cardHtml.match(/<div class="card-body([^"]*)">/);
+    if (bodyOpenMatch) {
+      var bodyClassTokens = String(bodyOpenMatch[1] || '')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+      var wrapperGapTokens = bodyClassTokens.filter(function (token) {
+        return /^gap-\d+$/i.test(token);
+      });
+      var wrapperPaddingTokens = bodyClassTokens.filter(function (token) {
+        return /^(?:p|pt|pb|ps|pe|px|py)-\d+$/i.test(token);
+      });
+      var bodyClassTokensWithoutGrid = bodyClassTokens.filter(function (token) {
+        return token !== 'd-grid' && !/^gap-\d+$/i.test(token) && !/^(?:p|pt|pb|ps|pe|px|py)-\d+$/i.test(token);
+      });
+      var bodyClassAttribute = ' class="card-body p-0' + (bodyClassTokensWithoutGrid.length ? ' ' + bodyClassTokensWithoutGrid.join(' ') : '') + '"';
+      var wrapperClassTokens = ['template-field-body', 'd-grid']
+        .concat(wrapperPaddingTokens)
+        .concat(wrapperGapTokens);
+      var wrapperClassAttribute = ' class="' + wrapperClassTokens.filter(Boolean).join(' ') + '"';
+
+      cardHtml = cardHtml.replace(bodyOpenMatch[0], '<div' + bodyClassAttribute + '><div' + wrapperClassAttribute + '>');
+
+      var lastCloseIndex = cardHtml.lastIndexOf('</div>');
+      if (lastCloseIndex !== -1) {
+        var bodyCloseIndex = cardHtml.lastIndexOf('</div>', lastCloseIndex - 1);
+        if (bodyCloseIndex !== -1) {
+          cardHtml = cardHtml.slice(0, bodyCloseIndex) + '</div>' + cardHtml.slice(bodyCloseIndex);
+        }
+      }
+    }
+
+    var collapseLabel = region && region.label ? String(region.label) : 'region';
+    var collapseButton = '' +
+      '<button type="button" class="btn btn-tool p-0 ms-auto text-body-secondary template-field-collapse" data-lte-toggle="card-collapse" aria-label="Collapse ' + escapeHtml(collapseLabel) + '" title="Collapse ' + escapeHtml(collapseLabel) + '">' +
+        '<i class="bi bi-dash-lg" aria-hidden="true" data-lte-icon="collapse"></i>' +
+        '<i class="bi bi-plus-lg" aria-hidden="true" data-lte-icon="expand"></i>' +
+        '<span class="visually-hidden">Collapse ' + escapeHtml(collapseLabel) + '</span>' +
+      '</button>';
+
+    var bodyMarkerIndex = cardHtml.indexOf('<div class="card-body');
+    if (bodyMarkerIndex === -1) {
+      return cardHtml;
+    }
+
+    var actionsMarker = '<div class="template-field-actions">';
+    if (cardHtml.indexOf(actionsMarker) !== -1) {
+      return cardHtml.replace(/(<div class="template-field-actions">[\s\S]*?)<\/div>/, '$1' + collapseButton + '</div>');
+    }
+
+    var headerCloseIndex = cardHtml.lastIndexOf('</div>', bodyMarkerIndex);
+    if (headerCloseIndex === -1) {
+      return cardHtml;
+    }
+
+    return cardHtml.slice(0, headerCloseIndex) + collapseButton + cardHtml.slice(headerCloseIndex);
   }
 
   function getPreviewRegionContent(card, region) {
     var module = getRegionTypeModule(region.region_type);
     if (module && typeof module.buildPreviewRenderContext === 'function') {
-      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : apiSources);
+      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
     }
 
     var current = existingContent[region.region_key];
@@ -592,6 +697,15 @@ export function createSlideFormRegionHelpers(options) {
       content.source_id = apiSourceInput ? apiSourceInput.value : content.source_id;
       content.item_number = apiItemInput ? apiItemInput.value : content.item_number;
       content.items_path = apiItemsPathInput ? apiItemsPathInput.value : content.items_path;
+    } else if (region.region_type === 'timetable') {
+      var timetableGroupInput = card.querySelector('select[name="region_timetable_group_id_' + region.id + '"]');
+      var timetableDisplayModeInput = card.querySelector('select[name="region_timetable_display_mode_' + region.id + '"]');
+      var timetableMaxItemsInput = card.querySelector('input[name="region_timetable_max_items_' + region.id + '"]');
+      var currentSchedule = getCurrentTimetableConfig(region);
+      content.value = hiddenInput ? hiddenInput.value : (content.value || currentSchedule.value || '');
+      content.timetable_group_id = timetableGroupInput ? timetableGroupInput.value : currentSchedule.timetable_group_id;
+      content.display_mode = timetableDisplayModeInput ? timetableDisplayModeInput.value : currentSchedule.display_mode;
+      content.max_items = timetableMaxItemsInput ? timetableMaxItemsInput.value : currentSchedule.max_items;
     } else {
       content.value = hiddenInput ? hiddenInput.value : (content.value || '');
     }
@@ -602,7 +716,7 @@ export function createSlideFormRegionHelpers(options) {
   function buildPreviewRenderContext(region, card) {
     var module = getRegionTypeModule(region.region_type);
     if (module && typeof module.buildPreviewRenderContext === 'function') {
-      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : apiSources);
+      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
     }
 
     var textStyle = getCurrentTextStyle(region);
@@ -619,6 +733,10 @@ export function createSlideFormRegionHelpers(options) {
       item_number: previewContent.item_number,
       source_id: previewContent.source_id,
       items_path: previewContent.items_path,
+      timetable_group_id: previewContent.timetable_group_id,
+      display_mode: previewContent.display_mode,
+      max_items: previewContent.max_items,
+      timetableGroups: timetableGroups,
       font_size: textStyle.font_size,
       font_color: textStyle.font_color,
       font_family: textStyle.font_family

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

@@ -21,6 +21,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var templates = Array.isArray(slideEditorData.templates) ? slideEditorData.templates : [];
   var rssFeeds = Array.isArray(slideEditorData.rssFeeds) ? slideEditorData.rssFeeds : [];
   var apiSources = Array.isArray(slideEditorData.apiSources) ? slideEditorData.apiSources : [];
+  var timetableGroups = Array.isArray(slideEditorData.timetableGroups) ? slideEditorData.timetableGroups : [];
   var fontStylesheetHref = String(slideEditorData.fontStylesheetHref || '').trim();
   var existingTemplateId = slideEditorData.existingTemplateId !== undefined ? slideEditorData.existingTemplateId : null;
   var existingContent = slideEditorData.existingContent || {};
@@ -36,7 +37,6 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var slidePreviewEmpty = document.getElementById('slide-preview-empty');
   var slidePreviewOverlay = document.getElementById('slide-preview-overlay');
   var openPreviewPopupButton = document.getElementById('open-preview-popup');
-  var submitting = false;
   var uploadMaxBytes = 100 * 1024 * 1024;
   var uploadMaxLabel = '100 MB';
   var uploadVideoMaxBytes = 1024 * 1024 * 1024;
@@ -49,7 +49,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var currentPreviewCanvasWidth = 0;
   var currentPreviewCanvasHeight = 0;
   var sidebarSyncFrame = 0;
-  var sidebarTopOffset = 16;
+  var sidebarBaseOffset = 16;
   var templateSelectorLock = createTemplateSelectorLockController(templateSelect);
   var regionTypes = window.pulseRegionTypes || {};
 
@@ -119,6 +119,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     existingContent: existingContent,
     rssFeeds: rssFeeds,
     apiSources: apiSources,
+    timetableGroups: timetableGroups,
     defaultFontSize: DEFAULT_FONT_SIZE,
     uploadMaxLabel: uploadMaxLabel,
     uploadVideoMaxLabel: uploadVideoMaxLabel,
@@ -433,8 +434,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     };
   }
 
+  function buildPreviewPopupHash() {
+    return encodeURIComponent(JSON.stringify(buildPreviewPopupPayload()));
+  }
+
   function buildPreviewPopupUrl() {
-    return '/slides/popup-preview#' + encodeURIComponent(JSON.stringify(buildPreviewPopupPayload()));
+    return '/slides/popup-preview#' + buildPreviewPopupHash();
   }
 
   function syncPopupPreview() {
@@ -443,7 +448,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return;
     }
 
-    previewPopupWindow = window.open(buildPreviewPopupUrl(), 'slide-preview-popup', previewPopupFeatures);
+    previewPopupWindow.location.hash = buildPreviewPopupHash();
   }
 
   function openPreviewPopup() {
@@ -487,6 +492,9 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return;
     }
 
+    var stickyHeader = document.querySelector('.app-header');
+    var stickyHeaderHeight = stickyHeader ? Math.max(0, Math.round(stickyHeader.getBoundingClientRect().height || stickyHeader.offsetHeight || 0)) : 0;
+    var sidebarTopOffset = sidebarBaseOffset + stickyHeaderHeight + 12;
     var shellRect = slideEditorShell.getBoundingClientRect();
     var sidebarHeight = slideEditorSidebar.offsetHeight;
     var shellTop = window.scrollY + shellRect.top;
@@ -584,6 +592,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
           ? ' slide-preview-video-region'
         : region.region_type === 'webpage'
           ? ' slide-preview-webpage-region'
+          : region.region_type === 'qr-code'
+            ? ' slide-preview-qr-code-region'
           : region.region_type === 'rtmp'
             ? ' slide-preview-rtmp-region'
           : region.region_type === 'rss'
@@ -638,6 +648,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return getRegionEditorCardHtml(region) || '<div class="muted">Region editor unavailable.</div>';
     }).join('') : '<div class="muted">This template has no regions.</div>';
 
+    if (window.adminlte && typeof window.adminlte.CardWidget === 'function') {
+      templateFields.querySelectorAll('.card-widget[data-region-id]').forEach(function (card) {
+        window.adminlte.CardWidget.getOrCreateInstance(card);
+      });
+    }
+
     templateFields.querySelectorAll('[data-region-media-type="video"]').forEach(function (card) {
       var regionId = card.getAttribute('data-region-id');
       var hidden = regionId ? card.querySelector('input[type="hidden"][name="existing_region_video_' + regionId + '"]') : null;
@@ -739,92 +755,25 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     requestPreviewRender();
   }
 
-  slideForm.addEventListener('submit', async function (event) {
-    if (submitting) {
+  slideForm.addEventListener('submit', function (event) {
+    if (!window.webAsyncSaveForm || typeof window.webAsyncSaveForm.submit !== 'function') {
       return;
     }
-    event.preventDefault();
-    var slideFormUrl = new URL(slideForm.action, window.location.href);
-    var isCreateForm = slideFormUrl.pathname === '/slides';
-    var submitterValue = event.submitter && event.submitter.name === 'save_action'
-      ? String(event.submitter.value || '').trim().toLowerCase()
-      : '';
-    submitting = true;
-    try {
+
+    window.webAsyncSaveForm.submit(slideForm, event, {
+      beforeSubmit: async function () {
         if (hasPendingRegionImageUpload()) {
           throw new Error('Wait for the image upload to finish before saving.');
         }
         await slideFormEditorController.syncEditors();
-      var formData = new FormData(slideForm);
-      if (event.submitter && event.submitter.name) {
-        formData.set(event.submitter.name, event.submitter.value || '');
-      }
-      var response = await fetch(slideForm.action, {
-        method: (slideForm.method || 'POST').toUpperCase(),
-        headers: {
-          'X-Requested-With': 'XMLHttpRequest',
-          'Accept': 'text/html, application/json, text/plain, */*'
       },
-        body: formData,
-        credentials: 'same-origin'
+      fallbackSuccessMessage: 'Saved slide.',
+      afterSuccess: function () {
+        if (regionMediaController) {
+          regionMediaController.clearPendingUploadCleanupPaths();
+        }
+      }
     });
-
-      if (!response.ok) {
-        throw new Error(await response.text() || 'Unable to save slide.');
-      }
-
-      if (submitterValue === 'close' || submitterValue === 'new') {
-        var redirectUrl = submitterValue === 'close'
-          ? String(slideForm.dataset.asyncSaveCloseUrl || response.url || slideForm.action)
-          : String(slideForm.dataset.asyncSaveNewUrl || response.url || slideForm.action);
-        window.location.replace(redirectUrl);
-        return;
-      }
-
-      if (isCreateForm) {
-        try {
-          if (response.url) {
-            if (regionMediaController) {
-              regionMediaController.clearPendingUploadCleanupPaths();
-            }
-            window.location.replace(response.url);
-            return;
-          }
-        } catch (_error) {
-          // Fall through and show a toast if the redirect URL cannot be resolved.
-        }
-        slideForm.dataset.dirty = 'false';
-        showToast('Saved slide.', 'success');
-        return;
-      }
-
-      var responseText = await response.text();
-      var savedMessage = '';
-      try {
-        var doc = new DOMParser().parseFromString(responseText || '', 'text/html');
-        var toastBody = doc.querySelector('.toast-body');
-        if (toastBody && toastBody.textContent) {
-          savedMessage = toastBody.textContent.trim();
-        }
-      } catch (_error) {
-        savedMessage = '';
-      }
-
-      showToast(savedMessage || 'Saved slide.', 'success');
-      slideForm.dataset.dirty = 'false';
-      if (regionMediaController) {
-        regionMediaController.clearPendingUploadCleanupPaths();
-      }
-    } catch (error) {
-      if (typeof showToast === 'function') {
-        var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
-        showToast(error && error.message ? error.message : 'Unable to save slide.', variant);
-      } else {
-        window.alert(error && error.message ? error.message : 'Unable to save slide.');
-      }
-    } finally {
-      submitting = false;
-    }
   });
 
   slideForm.addEventListener('input', function () {

src/web/public/js/templates/animation-presets.js

@@ -0,0 +1,203 @@
+(function (root, factory) {
+  var presets = factory();
+
+  if (typeof module === 'object' && module.exports) {
+    module.exports = presets;
+  }
+
+  if (root) {
+    root.templateAnimationPresets = presets;
+  }
+})(typeof window !== 'undefined' ? window : (typeof globalThis !== 'undefined' ? globalThis : this), function () {
+  function option(value, label) {
+    return { value: value, label: label };
+  }
+
+  function formatLabel(value) {
+    return String(value || '')
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .replace(/[_-]+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .replace(/\b\w/g, function (letter) {
+        return letter.toUpperCase();
+      });
+  }
+
+  function buildAllValues(groups, extraValues) {
+    var values = [];
+    var seen = Object.create(null);
+
+    function addEntry(entry) {
+      if (!entry || typeof entry !== 'object' || !entry.value || seen[entry.value]) {
+        return;
+      }
+
+      seen[entry.value] = true;
+      values.push(entry.value);
+    }
+
+    Object.keys(groups).forEach(function (groupName) {
+      (groups[groupName] || []).forEach(function (entry) {
+        if (Array.isArray(entry)) {
+          entry.forEach(addEntry);
+          return;
+        }
+
+        addEntry(entry);
+      });
+    });
+
+    (extraValues || []).forEach(function (value) {
+      if (!value || seen[value]) {
+        return;
+      }
+
+      seen[value] = true;
+      values.push(value);
+    });
+
+    return values;
+  }
+
+  function buildLookup(values) {
+    var lookup = Object.create(null);
+
+    values.forEach(function (value) {
+      var key = String(value || '').trim().toLowerCase();
+      if (key && !lookup[key]) {
+        lookup[key] = value;
+      }
+    });
+
+    return lookup;
+  }
+
+  function normalizeValue(value, lookup) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return 'none';
+    }
+
+    return lookup[raw.toLowerCase()] || 'none';
+  }
+
+  function splitAnimateCssValues(values) {
+    var groups = {
+      intro: [],
+      outro: [],
+      attentionSeekers: []
+    };
+
+    (values || []).forEach(function (value) {
+      if (!value || value === 'none') {
+        return;
+      }
+
+      if (value.indexOf('In') !== -1) {
+        groups.intro.push(value);
+        return;
+      }
+
+      if (value.indexOf('Out') !== -1) {
+        groups.outro.push(value);
+        return;
+      }
+
+      groups.attentionSeekers.push(value);
+    });
+
+    return groups;
+  }
+
+  function buildCuratedBasic(values) {
+    return [option('none', 'None')].concat(values.map(function (value) {
+      return option(value, formatLabel(value));
+    }));
+  }
+
+  var animateCssValues = [
+    'none',
+    'bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat',
+    'backInDown', 'backInLeft', 'backInRight', 'backInUp',
+    'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp',
+    'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp',
+    'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
+    'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeInTopLeft', 'fadeInTopRight', 'fadeInBottomLeft', 'fadeInBottomRight',
+    'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutTopLeft', 'fadeOutTopRight', 'fadeOutBottomLeft', 'fadeOutBottomRight',
+    'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY',
+    'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight',
+    'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight',
+    'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
+    'hinge', 'jackInTheBox', 'rollIn', 'rollOut',
+    'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp',
+    'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp',
+    'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
+    'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp'
+  ];
+
+  var splitValues = splitAnimateCssValues(animateCssValues);
+
+  var basic = {
+    intro: [
+      option('none', 'None'),
+      option('fadeIn', formatLabel('fadeIn')),
+      option('fadeInDown', formatLabel('fadeInDown')),
+      option('fadeInLeft', formatLabel('fadeInLeft')),
+      option('fadeInRight', formatLabel('fadeInRight')),
+      option('fadeInUp', formatLabel('fadeInUp')),
+      option('zoomIn', formatLabel('zoomIn')),
+      option('zoomInDown', formatLabel('zoomInDown')),
+      option('zoomInLeft', formatLabel('zoomInLeft')),
+      option('zoomInRight', formatLabel('zoomInRight')),
+      option('zoomInUp', formatLabel('zoomInUp')),
+      option('slideInDown', formatLabel('slideInDown')),
+      option('slideInLeft', formatLabel('slideInLeft')),
+      option('slideInRight', formatLabel('slideInRight')),
+      option('slideInUp', formatLabel('slideInUp'))
+    ],
+    outro: [
+      option('none', 'None'),
+      option('fadeOut', formatLabel('fadeOut')),
+      option('fadeOutDown', formatLabel('fadeOutDown')),
+      option('fadeOutLeft', formatLabel('fadeOutLeft')),
+      option('fadeOutRight', formatLabel('fadeOutRight')),
+      option('fadeOutUp', formatLabel('fadeOutUp')),
+      option('zoomOut', formatLabel('zoomOut')),
+      option('zoomOutDown', formatLabel('zoomOutDown')),
+      option('zoomOutLeft', formatLabel('zoomOutLeft')),
+      option('zoomOutRight', formatLabel('zoomOutRight')),
+      option('zoomOutUp', formatLabel('zoomOutUp')),
+      option('slideOutDown', formatLabel('slideOutDown')),
+      option('slideOutLeft', formatLabel('slideOutLeft')),
+      option('slideOutRight', formatLabel('slideOutRight')),
+      option('slideOutUp', formatLabel('slideOutUp'))
+    ],
+    attentionSeekers: buildCuratedBasic(['flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce'])
+  };
+
+  var advanced = {
+    intro: buildCuratedBasic(splitValues.intro),
+    outro: buildCuratedBasic(splitValues.outro),
+    attentionSeekers: buildCuratedBasic(splitValues.attentionSeekers)
+  };
+
+  var lookup = buildLookup(buildAllValues({ basic: [basic.intro, basic.outro, basic.attentionSeekers], advanced: [advanced.intro, advanced.outro, advanced.attentionSeekers] }));
+
+  function normalize(value) {
+    return normalizeValue(value, lookup);
+  }
+
+  function isAnimateCssPreset(value) {
+    return animateCssValues.indexOf(normalizeValue(value, buildLookup(animateCssValues))) !== -1;
+  }
+
+  return {
+    basic: basic,
+    advanced: advanced,
+    animateCssValues: animateCssValues,
+    allValues: buildAllValues({ basic: [basic.intro, basic.outro, basic.attentionSeekers], advanced: [advanced.intro, advanced.outro, advanced.attentionSeekers] }),
+    normalize: normalize,
+    isAnimateCssPreset: isAnimateCssPreset
+  };
+});

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

@@ -82,6 +82,174 @@
     return String(card.querySelector('[name="region_name[]"]').value || '').trim();
   }
 
+  function getAnimationConfig(card) {
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var animationConfig = normalizeAnimationConfig(hiddenAnimationInput ? hiddenAnimationInput.value || '{}' : '{}');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+
+    if (introPresetInput && introPresetInput.dataset.animationPresetCustom !== '1' && introPresetInput.selectedIndex >= 0) {
+      animationConfig.intro.preset = normalizePreviewAnimation(introPresetInput.value);
+    }
+    if (outroPresetInput && outroPresetInput.dataset.animationPresetCustom !== '1' && outroPresetInput.selectedIndex >= 0) {
+      animationConfig.outro.preset = normalizePreviewAnimation(outroPresetInput.value);
+    }
+    if (loopPresetInput && loopPresetInput.dataset.animationPresetCustom !== '1' && loopPresetInput.selectedIndex >= 0) {
+      animationConfig.loop.preset = normalizePreviewAnimation(loopPresetInput.value);
+    }
+
+    return animationConfig;
+  }
+
+  function getAnimationPresetValues() {
+    var presets = window.templateAnimationPresets || {};
+    if (Array.isArray(presets.allValues) && presets.allValues.length) {
+      return presets.allValues;
+    }
+
+    return [
+      'none', 'fadeIn', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'zoomIn', 'zoomInDown',
+      'zoomInLeft', 'zoomInRight', 'zoomInUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
+      'fadeOut', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'zoomOut', 'zoomOutDown',
+      'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp',
+      'backInDown', 'backInLeft', 'backInRight', 'backInUp', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp',
+      'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
+      'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight',
+      'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
+      'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce'
+    ];
+  }
+
+  function getAnimationPresetMap() {
+    var lookup = {};
+    getAnimationPresetValues().forEach(function (value) {
+      lookup[value] = true;
+    });
+    return lookup;
+  }
+
+  function syncAnimationPresetCustomState(selectInput, resetButton, preset) {
+    if (!selectInput) {
+      return;
+    }
+
+    var normalizedPreset = normalizePreviewAnimation(preset);
+    var hasMatchingOption = Array.prototype.some.call(selectInput.options || [], function (option) {
+      return option && option.value === normalizedPreset;
+    });
+
+    if (hasMatchingOption) {
+      delete selectInput.dataset.animationPresetCustom;
+      selectInput.hidden = false;
+      if (resetButton) {
+        resetButton.hidden = true;
+      }
+    } else {
+      selectInput.dataset.animationPresetCustom = '1';
+      selectInput.hidden = true;
+      if (resetButton) {
+        resetButton.hidden = false;
+        resetButton.textContent = 'Reset to basic';
+      }
+    }
+  }
+
+  function writeAnimationConfig(card, animationConfig) {
+    var normalized = normalizeAnimationConfig(animationConfig);
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+    var introResetButton = card.querySelector('[data-animation-reset-button="intro"]');
+    var outroResetButton = card.querySelector('[data-animation-reset-button="outro"]');
+    var loopResetButton = card.querySelector('[data-animation-reset-button="loop"]');
+
+    if (hiddenAnimationInput) {
+      hiddenAnimationInput.value = JSON.stringify(normalized, null, 2);
+    }
+    if (introPresetInput) {
+      introPresetInput.value = normalized.intro.preset;
+      syncAnimationPresetCustomState(introPresetInput, introResetButton, normalized.intro.preset);
+    }
+    if (outroPresetInput) {
+      outroPresetInput.value = normalized.outro.preset;
+      syncAnimationPresetCustomState(outroPresetInput, outroResetButton, normalized.outro.preset);
+    }
+    if (loopPresetInput) {
+      loopPresetInput.value = normalized.loop.preset;
+      syncAnimationPresetCustomState(loopPresetInput, loopResetButton, normalized.loop.preset);
+    }
+
+    return normalized;
+  }
+
+  function normalizePreviewAnimation(value) {
+    if (window.templateAnimationPresets && typeof window.templateAnimationPresets.normalize === 'function') {
+      return window.templateAnimationPresets.normalize(value);
+    }
+
+    var allowed = getAnimationPresetMap();
+
+    var raw = String(value || '').trim().toLowerCase();
+    return allowed[raw] ? raw : 'none';
+  }
+
+  function normalizeAnimationStep(value, fallbackPreset) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      var normalized = {};
+      Object.keys(value).forEach(function (key) {
+        normalized[key] = value[key];
+      });
+      normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
+      normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null;
+      normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null;
+      normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null;
+      normalized.easing = String(value.easing || '').trim();
+      normalized.fill_mode = String(value.fill_mode || '').trim();
+      return normalized;
+    }
+
+    return {
+      preset: normalizePreviewAnimation(typeof value === 'string' ? value : fallbackPreset || 'none'),
+      duration_ms: null,
+      delay_ms: null,
+      iterations: null,
+      easing: '',
+      fill_mode: ''
+    };
+  }
+
+  function normalizeAnimationConfig(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: normalizeAnimationStep(raw.intro, 'none'),
+      outro: normalizeAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+      loop: normalizeAnimationStep(raw.loop, 'none')
+    };
+  }
+
+  function formatAnimationConfig(value) {
+    return JSON.stringify(normalizeAnimationConfig(value), null, 2);
+  }
+
   function syncRegionIdentity(card, value) {
     var next = String(value || '').trim();
     card.querySelector('[name="region_name[]"]').value = next;
@@ -96,6 +264,7 @@
       label: name,
       region_type: card.querySelector('[name="region_type[]"]').value,
       lock_ratio: normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value),
+      animation_json: getAnimationConfig(card),
       x: Number(card.querySelector('[name="region_x[]"]').value || 0),
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
@@ -114,6 +283,7 @@
     }
     if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
     if (values.lock_ratio !== undefined) { card.querySelector('[name="region_lock_ratio[]"]').value = normalizeLockRatio(values.lock_ratio); }
+    if (values.animation_json !== undefined) { writeAnimationConfig(card, values.animation_json); }
     if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
@@ -171,6 +341,10 @@
     syncRegionIdentity: syncRegionIdentity,
     readCard: readCard,
     writeCard: writeCard,
+    normalizeAnimationConfig: normalizeAnimationConfig,
+    formatAnimationConfig: formatAnimationConfig,
+    getAnimationConfig: getAnimationConfig,
+    writeAnimationConfig: writeAnimationConfig,
     clampRegion: clampRegion,
     getOverlayRect: getOverlayRect,
     toCanvasPoint: toCanvasPoint,

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

@@ -20,6 +20,10 @@
     : (Array.isArray(templateData) ? templateData : []);
   var stage = document.getElementById('designer-stage');
   var overlay = document.getElementById('designer-overlay');
+  var previewCard = document.getElementById('template-preview-card');
+  var previewIntroButton = document.getElementById('template-preview-intro');
+  var previewOutButton = document.getElementById('template-preview-out');
+  var previewContinuousButton = document.getElementById('template-preview-continuous');
   var regionList = document.getElementById('region-list');
   var regionSelect = document.getElementById('region-select');
   var canvasSizeSelect = document.getElementById('canvas-size-select');
@@ -36,6 +40,7 @@
   var addRegionButton = document.getElementById('add-region-button');
   var regionAddModal = document.getElementById('region-add-modal');
   var regionAddOptions = document.getElementById('region-add-options');
+  var animationAdvancedModal = document.getElementById('animation-advanced-modal');
   var regionCardTemplate = document.getElementById('region-card-template');
   var regionsJsonInput = document.getElementById('regions-json');
   var templateForm = document.getElementById('template-form');
@@ -43,7 +48,20 @@
   var regionUsageSet = new Set();
   var draft = null;
   var selectedIndex = -1;
+  var activeAnimationCard = null;
   var overlayRenderFrame = 0;
+  var previewState = {
+    active: false,
+    mode: '',
+    stopTimer: 0,
+    token: 0,
+    animations: []
+  };
+  var previewButtons = [
+    { button: previewIntroButton, mode: 'intro' },
+    { button: previewOutButton, mode: 'out' },
+    { button: previewContinuousButton, mode: 'continuous' }
+  ];
 
   try {
     var regionUsageData = JSON.parse((templateRegionUsageElement && templateRegionUsageElement.textContent) || '[]');
@@ -218,6 +236,7 @@
       label: getRegionName(card),
       region_type: card.querySelector('[name="region_type[]"]').value,
       lock_ratio: normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value),
+      animation_json: getAnimationConfig(card),
       x: Number(card.querySelector('[name="region_x[]"]').value || 0),
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
@@ -226,6 +245,582 @@
     };
   }
 
+  function hasAnyAnimationCards() {
+    return getCards().some(function (card) {
+      var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+      var animationConfig = normalizeAnimationConfig(hiddenAnimationInput ? hiddenAnimationInput.value || '{}' : '{}');
+      return animationConfig && ['intro', 'outro', 'loop'].some(function (stepName) {
+        var step = animationConfig[stepName] || {};
+        return normalizePreviewAnimation(step.preset) !== 'none';
+      });
+    });
+  }
+
+  function hasPreviewAnimationForMode(mode) {
+    var previewMode = String(mode || '').trim().toLowerCase();
+    if (!previewMode) {
+      return false;
+    }
+
+    return getCards().some(function (card) {
+      var step = getPreviewRegionAnimationStep(readCard(card), previewMode);
+      return normalizePreviewAnimation(step && step.preset) !== 'none';
+    });
+  }
+
+  function getPreviewRects() {
+    if (!overlay) {
+      return [];
+    }
+
+    return Array.prototype.slice.call(overlay.querySelectorAll('.designer-rect'));
+  }
+
+  function clearPreviewAnimations() {
+    previewState.animations.forEach(function (animation) {
+      if (animation && typeof animation.cancel === 'function') {
+        animation.cancel();
+      }
+    });
+    previewState.animations = [];
+
+    getPreviewRects().forEach(function (rect) {
+      rect.classList.remove('animate__animated', 'animate__infinite');
+      rect.classList.remove('animate__repeat-1', 'animate__repeat-2', 'animate__repeat-3');
+      if (window.templateAnimationPresets && Array.isArray(window.templateAnimationPresets.animateCssValues)) {
+        window.templateAnimationPresets.animateCssValues.forEach(function (value) {
+          if (value && value !== 'none') {
+            rect.classList.remove('animate__' + value);
+          }
+        });
+      }
+      rect.style.removeProperty('--animate-duration');
+      rect.style.removeProperty('--animate-delay');
+      rect.style.removeProperty('--animate-repeat');
+      rect.style.opacity = '';
+      rect.style.transform = '';
+      rect.style.filter = '';
+      rect.style.willChange = '';
+    });
+  }
+
+  function updatePreviewControlState() {
+    var activeMode = previewState.active ? previewState.mode : '';
+
+    previewButtons.forEach(function (entry) {
+      if (!entry.button) {
+        return;
+      }
+
+      var available = hasPreviewAnimationForMode(entry.mode);
+      var disabled = !available || (previewState.active && activeMode !== entry.mode);
+      entry.button.disabled = disabled;
+      entry.button.classList.toggle('active', previewState.active && activeMode === entry.mode);
+      entry.button.setAttribute('aria-pressed', previewState.active && activeMode === entry.mode ? 'true' : 'false');
+    });
+  }
+
+  function normalizePreviewAnimation(value) {
+    if (window.templateAnimationPresets && typeof window.templateAnimationPresets.normalize === 'function') {
+      return window.templateAnimationPresets.normalize(value);
+    }
+
+    var allowed = {};
+    var presets = window.templateAnimationPresets || {};
+    var values = Array.isArray(presets.allValues) && presets.allValues.length ? presets.allValues : [
+      'none', 'fadeIn', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'zoomIn', 'zoomInDown',
+      'zoomInLeft', 'zoomInRight', 'zoomInUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
+      'fadeOut', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'zoomOut', 'zoomOutDown',
+      'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp',
+      'backInDown', 'backInLeft', 'backInRight', 'backInUp', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp',
+      'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
+      'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight',
+      'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
+      'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce'
+    ];
+
+    values.forEach(function (valueName) {
+      allowed[valueName] = true;
+    });
+
+    var raw = String(value || '').trim().toLowerCase();
+    return allowed[raw] ? raw : 'none';
+  }
+
+  function isAnimateCssPreset(value) {
+    var presets = window.templateAnimationPresets || {};
+    if (Array.isArray(presets.animateCssValues) && presets.animateCssValues.length) {
+      return presets.animateCssValues.indexOf(normalizePreviewAnimation(value)) !== -1;
+    }
+
+    return false;
+  }
+
+  function applyAnimateCssPreview(rect, preset, step, mode) {
+    var animateClass = 'animate__' + preset;
+    var durationMs = Number(step && step.duration_ms);
+    var delayMs = Number(step && step.delay_ms);
+    var repeatCount = Number(step && step.iterations);
+    var isAttentionSeeker = preset === 'bounce' || preset === 'flash' || preset === 'pulse' || preset === 'rubberBand' || preset === 'shakeX' || preset === 'shakeY' || preset === 'headShake' || preset === 'swing' || preset === 'tada' || preset === 'wobble' || preset === 'jello' || preset === 'heartBeat';
+
+    rect.classList.remove('animate__animated', 'animate__infinite');
+    rect.style.removeProperty('--animate-duration');
+    rect.style.removeProperty('--animate-delay');
+    rect.style.removeProperty('--animate-repeat');
+    rect.style.setProperty('--animate-duration', Math.max(0, Number.isFinite(durationMs) && durationMs > 0 ? durationMs : 1000) + 'ms');
+    if (Number.isFinite(delayMs) && delayMs > 0) {
+      rect.style.setProperty('--animate-delay', Math.max(0, delayMs) + 'ms');
+    }
+    rect.classList.add('animate__animated', animateClass);
+    if (isAttentionSeeker) {
+      var normalizedRepeatCount = Math.max(1, Number.isFinite(repeatCount) && repeatCount > 0 ? repeatCount : 1);
+      rect.classList.remove('animate__repeat-1', 'animate__repeat-2', 'animate__repeat-3');
+      rect.classList.add('animate__repeat-1');
+      rect.style.setProperty('--animate-repeat', String(normalizedRepeatCount));
+    }
+  }
+
+  function getPreviewAnimationStepTimingMs(step, mode, animateCssMode) {
+    var normalizedMode = String(mode || '').trim().toLowerCase();
+    var durationMs = Number(step && step.duration_ms);
+    var delayMs = Number(step && step.delay_ms);
+    var iterations = Number(step && step.iterations);
+
+    if (!Number.isFinite(durationMs) || durationMs <= 0) {
+      durationMs = animateCssMode ? 1000 : 900;
+    }
+    if (!Number.isFinite(delayMs) || delayMs < 0) {
+      delayMs = 0;
+    }
+    if (!Number.isFinite(iterations) || iterations < 1) {
+      iterations = 1;
+    }
+
+    if (normalizedMode === 'continuous') {
+      return delayMs + (durationMs * iterations);
+    }
+
+    return delayMs + durationMs;
+  }
+
+  function normalizeAnimationStep(value, fallbackPreset) {
+    if (utils.normalizeAnimationStep) {
+      return utils.normalizeAnimationStep(value, fallbackPreset);
+    }
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      var normalized = {};
+      Object.keys(value).forEach(function (key) {
+        normalized[key] = value[key];
+      });
+      normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
+      normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null;
+      normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null;
+      normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null;
+      normalized.fill_mode = String(value.fill_mode || '').trim();
+      return normalized;
+    }
+
+    return {
+      preset: normalizePreviewAnimation(typeof value === 'string' ? value : fallbackPreset || 'none'),
+      duration_ms: null,
+      delay_ms: null,
+      iterations: null,
+      fill_mode: ''
+    };
+  }
+
+  function normalizeAnimationConfig(value) {
+    if (utils.normalizeAnimationConfig) {
+      return utils.normalizeAnimationConfig(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: normalizeAnimationStep(raw.intro, 'none'),
+      outro: normalizeAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+      loop: normalizeAnimationStep(raw.loop, 'none')
+    };
+  }
+
+  function getPreviewRegionAnimationStep(region, mode) {
+    if (!region) {
+      return normalizeAnimationStep({}, 'none');
+    }
+
+    var animationConfig = normalizeAnimationConfig(region.animation_json !== undefined ? region.animation_json : region);
+
+    if (mode === 'intro') {
+      return animationConfig.intro;
+    }
+
+    if (mode === 'out') {
+      return animationConfig.outro;
+    }
+
+    return animationConfig.loop;
+  }
+
+  function getAnimationConfig(card) {
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var animationConfig = normalizeAnimationConfig(hiddenAnimationInput ? hiddenAnimationInput.value || '{}' : '{}');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+
+    if (introPresetInput && introPresetInput.dataset.animationPresetCustom !== '1' && introPresetInput.selectedIndex >= 0) {
+      animationConfig.intro.preset = normalizePreviewAnimation(introPresetInput.value);
+    }
+    if (outroPresetInput && outroPresetInput.dataset.animationPresetCustom !== '1' && outroPresetInput.selectedIndex >= 0) {
+      animationConfig.outro.preset = normalizePreviewAnimation(outroPresetInput.value);
+    }
+    if (loopPresetInput && loopPresetInput.dataset.animationPresetCustom !== '1' && loopPresetInput.selectedIndex >= 0) {
+      animationConfig.loop.preset = normalizePreviewAnimation(loopPresetInput.value);
+    }
+
+    return animationConfig;
+  }
+
+  function syncAnimationPresetCustomState(selectInput, resetButton, preset) {
+    if (!selectInput) {
+      return;
+    }
+
+    var normalizedPreset = normalizePreviewAnimation(preset);
+    var hasMatchingOption = Array.prototype.some.call(selectInput.options || [], function (option) {
+      return option && option.value === normalizedPreset;
+    });
+
+    if (hasMatchingOption) {
+      delete selectInput.dataset.animationPresetCustom;
+      selectInput.hidden = false;
+      if (resetButton) {
+        resetButton.hidden = true;
+      }
+    } else {
+      selectInput.dataset.animationPresetCustom = '1';
+      selectInput.hidden = true;
+      if (resetButton) {
+        resetButton.hidden = false;
+        resetButton.textContent = 'Reset to basic';
+      }
+    }
+  }
+
+  function writeAnimationConfig(card, animationConfig) {
+    var normalized = normalizeAnimationConfig(animationConfig);
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+    var introResetButton = card.querySelector('[data-animation-reset-button="intro"]');
+    var outroResetButton = card.querySelector('[data-animation-reset-button="outro"]');
+    var loopResetButton = card.querySelector('[data-animation-reset-button="loop"]');
+
+    if (hiddenAnimationInput) {
+      hiddenAnimationInput.value = JSON.stringify(normalized, null, 2);
+    }
+    if (introPresetInput) {
+      introPresetInput.value = normalized.intro.preset;
+      syncAnimationPresetCustomState(introPresetInput, introResetButton, normalized.intro.preset);
+    }
+    if (outroPresetInput) {
+      outroPresetInput.value = normalized.outro.preset;
+      syncAnimationPresetCustomState(outroPresetInput, outroResetButton, normalized.outro.preset);
+    }
+    if (loopPresetInput) {
+      loopPresetInput.value = normalized.loop.preset;
+      syncAnimationPresetCustomState(loopPresetInput, loopResetButton, normalized.loop.preset);
+    }
+
+    updatePreviewCardVisibility();
+
+    return normalized;
+  }
+
+  function setAnimationPreset(card, stepName, preset) {
+    var config = getAnimationConfig(card);
+    if (config[stepName]) {
+      config[stepName].preset = normalizePreviewAnimation(preset);
+      config[stepName].duration_ms = null;
+      config[stepName].delay_ms = null;
+      config[stepName].iterations = null;
+      config[stepName].easing = '';
+      config[stepName].fill_mode = '';
+      writeAnimationConfig(card, config);
+      if (activeAnimationCard === card) {
+        populateAnimationModal(card);
+      }
+    }
+  }
+
+  function getAnimationModalField(stepName, fieldName) {
+    if (!animationAdvancedModal) {
+      return null;
+    }
+
+    return animationAdvancedModal.querySelector('[data-animation-modal-step="' + stepName + '"][data-animation-modal-field="' + fieldName + '"]');
+  }
+
+  function populateAnimationModal(card) {
+    if (!animationAdvancedModal || !card) {
+      return;
+    }
+
+    var title = animationAdvancedModal.querySelector('[data-animation-modal-title]');
+    var label = card.querySelector('[data-region-title]');
+    var config = getAnimationConfig(card);
+
+    if (title) {
+      title.textContent = (label ? label.textContent : 'Region') + ' animation settings';
+    }
+
+    ['intro', 'outro', 'loop'].forEach(function (stepName) {
+      var step = config[stepName] || normalizeAnimationStep({}, 'none');
+      var presetInput = getAnimationModalField(stepName, 'preset');
+      var durationInput = getAnimationModalField(stepName, 'duration_ms');
+      var delayInput = getAnimationModalField(stepName, 'delay_ms');
+
+      if (presetInput) { presetInput.value = step.preset; }
+      if (durationInput) { durationInput.value = step.duration_ms === null || step.duration_ms === undefined || Number(step.duration_ms) <= 0 ? '1000' : String(step.duration_ms); }
+      if (delayInput) { delayInput.value = step.delay_ms === null || step.delay_ms === undefined ? '0' : String(step.delay_ms); }
+      if (stepName === 'loop') {
+        var iterationsInput = getAnimationModalField(stepName, 'iterations');
+        if (iterationsInput) { iterationsInput.value = step.iterations === null || step.iterations === undefined ? '1' : String(step.iterations); }
+      }
+    });
+  }
+
+  function readNumberField(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return null;
+    }
+    var next = Number(raw);
+    return Number.isFinite(next) ? Math.round(next) : null;
+  }
+
+  function readAnimationModalConfig() {
+    if (!animationAdvancedModal) {
+      return null;
+    }
+
+    var config = getAnimationConfig(activeAnimationCard) || { intro: {}, outro: {}, loop: {} };
+
+    ['intro', 'outro', 'loop'].forEach(function (stepName) {
+      var presetInput = getAnimationModalField(stepName, 'preset');
+      var durationInput = getAnimationModalField(stepName, 'duration_ms');
+      var delayInput = getAnimationModalField(stepName, 'delay_ms');
+
+      var nextStep = Object.assign({}, config[stepName] || {});
+      nextStep.preset = presetInput ? presetInput.value : nextStep.preset;
+      nextStep.duration_ms = readNumberField(durationInput ? durationInput.value : '') || 1000;
+      nextStep.delay_ms = readNumberField(delayInput ? delayInput.value : '') || 0;
+      if (stepName === 'loop') {
+        var iterationsInput = getAnimationModalField(stepName, 'iterations');
+        nextStep.iterations = readNumberField(iterationsInput ? iterationsInput.value : '') || 1;
+      }
+
+      config[stepName] = normalizeAnimationStep(nextStep, 'none');
+    });
+
+    return config;
+  }
+
+  function saveAnimationModal() {
+    if (!activeAnimationCard) {
+      return;
+    }
+
+    var config = readAnimationModalConfig();
+    if (!config) {
+      return;
+    }
+
+    writeAnimationConfig(activeAnimationCard, config);
+    renderOverlay();
+  }
+
+  function setPreviewControlState(active) {
+    updatePreviewControlState();
+  }
+
+  function updatePreviewCardVisibility() {
+    if (!previewCard) {
+      return;
+    }
+
+    previewCard.hidden = !hasAnyAnimationCards();
+  }
+
+  function setTemplateEditorLocked(locked) {
+    if (templateForm) {
+      templateForm.classList.toggle('template-designer-form--previewing', locked);
+    }
+    if (stage) {
+      stage.classList.toggle('is-previewing', locked);
+    }
+    if (previewCard) {
+      previewCard.classList.toggle('is-previewing', locked);
+    }
+    if (overlay) {
+      overlay.style.pointerEvents = locked ? 'none' : '';
+    }
+
+    var controls = templateForm ? templateForm.querySelectorAll('input, select, textarea, button') : [];
+    Array.prototype.forEach.call(controls, function (control) {
+      if (!control) {
+        return;
+      }
+      if (control.matches && control.matches('[data-preview-control]')) {
+        return;
+      }
+
+      if (locked) {
+        if (!control.hasAttribute('data-preview-disabled')) {
+          control.setAttribute('data-preview-disabled', control.disabled ? '1' : '0');
+        }
+        control.disabled = true;
+      } else if (control.hasAttribute('data-preview-disabled')) {
+        control.disabled = control.getAttribute('data-preview-disabled') === '1';
+        control.removeAttribute('data-preview-disabled');
+      }
+    });
+
+    setPreviewControlState(locked);
+  }
+
+  function stopTemplatePreview(skipRender) {
+    if (previewState.stopTimer) {
+      window.clearTimeout(previewState.stopTimer);
+      previewState.stopTimer = 0;
+    }
+
+    previewState.token += 1;
+    previewState.active = false;
+    previewState.mode = '';
+    clearPreviewAnimations();
+    setTemplateEditorLocked(false);
+
+    if (!skipRender) {
+      renderOverlay();
+    }
+  }
+
+  function schedulePreviewStop(delayMs, token) {
+    if (previewState.stopTimer) {
+      window.clearTimeout(previewState.stopTimer);
+    }
+
+    previewState.stopTimer = window.setTimeout(function () {
+      if (token !== previewState.token) {
+        return;
+      }
+      stopTemplatePreview(false);
+    }, Math.max(0, Number(delayMs || 0)));
+  }
+
+  function animatePreviewRects(mode, regions) {
+    var rects = getPreviewRects();
+    var token = previewState.token;
+    var stagger = 90;
+    var duration = 900;
+    var overlayRect = getOverlayRect();
+    var canvasMovement = Math.max(12, Math.round(overlayRect.height * 0.02));
+    var longestTimingMs = 0;
+
+    previewState.animations = [];
+
+    rects.forEach(function (rect, index) {
+      var region = regions && regions[index] ? regions[index] : null;
+      var step = getPreviewRegionAnimationStep(region, mode);
+      var preset = normalizePreviewAnimation(step && step.preset);
+      var delay = index * stagger;
+      var animation = null;
+      var animateCssMode = isAnimateCssPreset(preset);
+      var timingMs = delay + getPreviewAnimationStepTimingMs(step, mode, animateCssMode);
+
+      rect.style.willChange = 'transform, opacity, filter';
+
+      if (timingMs > longestTimingMs) {
+        longestTimingMs = timingMs;
+      }
+
+      if (preset === 'none') {
+        return;
+      }
+
+      if (animateCssMode) {
+        applyAnimateCssPreview(rect, preset, step, mode);
+        return;
+      }
+      if (mode === 'intro') {
+        animation = rect.animate([
+          { opacity: 0, transform: 'translate3d(0, ' + canvasMovement + 'px, 0) scale(0.96)', filter: 'blur(1px)' },
+          { opacity: 1, transform: 'translate3d(0, 0, 0) scale(1)', filter: 'blur(0)' }
+        ], {
+          duration: duration,
+          delay: delay,
+          easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+          fill: 'both'
+        });
+      } else if (mode === 'out') {
+        animation = rect.animate([
+          { opacity: 1, transform: 'translate3d(0, 0, 0) scale(1)', filter: 'blur(0)' },
+          { opacity: 0, transform: 'translate3d(0, -' + canvasMovement + 'px, 0) scale(0.96)', filter: 'blur(1px)' }
+        ], {
+          duration: duration,
+          delay: delay,
+          easing: 'cubic-bezier(0.4, 0, 1, 1)',
+          fill: 'both'
+        });
+      }
+
+      if (animation) {
+        previewState.animations.push(animation);
+      }
+    });
+
+    schedulePreviewStop(longestTimingMs + 140, token);
+  }
+
+  function startTemplatePreview(mode) {
+    var previewMode = String(mode || '').trim().toLowerCase();
+    if (!previewMode) {
+      return;
+    }
+
+    var previewRegions = getCards().map(readCard);
+    stopTemplatePreview(true);
+    previewState.active = true;
+    previewState.mode = previewMode;
+    previewState.token += 1;
+    setTemplateEditorLocked(true);
+
+    if (!getPreviewRects().length) {
+      schedulePreviewStop(120, previewState.token);
+      return;
+    }
+    animatePreviewRects(previewMode, previewRegions);
+  }
+
   function writeCard(card, values) {
     if (utils.writeCard) {
       utils.writeCard(card, values);
@@ -240,6 +835,7 @@
     }
     if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
     if (values.lock_ratio !== undefined) { card.querySelector('[name="region_lock_ratio[]"]').value = normalizeLockRatio(values.lock_ratio); }
+    if (values.animation_json !== undefined) { writeAnimationConfig(card, values.animation_json); }
     if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
@@ -401,6 +997,7 @@
     if (regionLockRatioInput) {
       regionLockRatioInput.value = normalizeLockRatio(region.lock_ratio);
     }
+    writeAnimationConfig(card, region.animation_json);
     card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
     card.querySelector('[name="region_y[]"]').value = valueOrDefault(region.y, 80);
     card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1);
@@ -452,6 +1049,9 @@
     var lockRatioInput = card.querySelector('[name="region_lock_ratio[]"]');
     var widthInput = card.querySelector('[name="region_width[]"]');
     var heightInput = card.querySelector('[name="region_height[]"]');
+    var animationPresetInputs = card.querySelectorAll('[data-animation-preset]');
+    var animationResetButtons = card.querySelectorAll('[data-animation-reset-button]');
+    var animationAdvancedButton = card.querySelector('[data-animation-advanced-button]');
     nameInput.addEventListener('input', function () {
       syncRegionIdentity(card, nameInput.value);
       updateRegionLabel(card);
@@ -459,6 +1059,28 @@
       renderRegionSidebar();
       renderOverlay();
     });
+    Array.prototype.forEach.call(animationPresetInputs, function (input) {
+      input.addEventListener('change', function () {
+        setAnimationPreset(card, input.getAttribute('data-animation-preset'), input.value);
+        requestOverlayRender();
+      });
+    });
+    Array.prototype.forEach.call(animationResetButtons, function (button) {
+      button.addEventListener('click', function (event) {
+        event.preventDefault();
+        setAnimationPreset(card, button.getAttribute('data-animation-reset-button'), 'none');
+        requestOverlayRender();
+      });
+    });
+    if (animationAdvancedButton && animationAdvancedModal) {
+      animationAdvancedButton.addEventListener('click', function () {
+        activeAnimationCard = card;
+        populateAnimationModal(card);
+        if (window.pulseModal) {
+          window.pulseModal.show(animationAdvancedModal);
+        }
+      });
+    }
     if (lockRatioInput) {
       lockRatioInput.addEventListener('input', function () {
         updateRegionLockBadge(card);
@@ -536,28 +1158,49 @@
     regionSelect.value = String(selectedIndex);
     updateCanvasSizeLock();
     validateRegionNames();
+    updatePreviewCardVisibility();
   }
 
   function renderOverlay() {
+    if (previewState.active) {
+      return;
+    }
+
     var cards = getCards();
     var selectedCard = selectedIndex >= 0 ? cards[selectedIndex] : null;
     var selectedNow = selectedCard ? cards.indexOf(selectedCard) : -1;
     var regions = cards.map(readCard);
+    var canvasSize = getCanvasSize();
+    var overlayRect = getOverlayRect();
+    var overlayScale = overlayRect.width / Math.max(1, canvasSize.width);
+    overlay.style.setProperty('--designer-overlay-scale', String(overlayScale));
     regionsJsonInput.value = JSON.stringify(regions);
     overlay.innerHTML = regions.map(function (region, index) {
       var box = canvasRectToPixels(region);
+      var renderedBox = {
+        left: Math.round(box.left),
+        top: Math.round(box.top),
+        width: Math.round(box.width),
+        height: Math.round(box.height)
+      };
       var selected = index === selectedNow ? ' selected' : '';
-      return '<div class="designer-rect' + selected + '" data-index="' + index + '" style="left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px;"><div class="designer-rect-label">' + escapeHtml(region.label || region.region_key || 'Region') + '</div><span class="resize-handle nw" data-dir="nw"></span><span class="resize-handle ne" data-dir="ne"></span><span class="resize-handle sw" data-dir="sw"></span><span class="resize-handle se" data-dir="se"></span></div>';
+      return '<div class="designer-rect' + selected + '" data-index="' + index + '" style="--designer-overlay-scale:1;left:' + renderedBox.left + 'px;top:' + renderedBox.top + 'px;width:' + renderedBox.width + 'px;height:' + renderedBox.height + 'px;"><div class="designer-rect-label">' + escapeHtml(region.label || region.region_key || 'Region') + '</div><span class="resize-handle nw" data-dir="nw"></span><span class="resize-handle ne" data-dir="ne"></span><span class="resize-handle sw" data-dir="sw"></span><span class="resize-handle se" data-dir="se"></span></div>';
     }).join('');
     if (draft) {
-      var rect = getOverlayRect();
-      var size = getCanvasSize();
+      var rect = overlayRect;
+      var size = canvasSize;
       var draftBox = { x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: Math.abs(draft.end.x - draft.start.x), height: Math.abs(draft.end.y - draft.start.y) };
-      overlay.innerHTML += '<div class="designer-rect designer-draft" style="left:' + ((draftBox.x / size.width) * rect.width) + 'px;top:' + ((draftBox.y / size.height) * rect.height) + 'px;width:' + ((draftBox.width / size.width) * rect.width) + 'px;height:' + ((draftBox.height / size.height) * rect.height) + 'px;"></div>';
+      overlay.innerHTML += '<div class="designer-rect designer-draft" style="left:' + Math.round((draftBox.x / size.width) * rect.width) + 'px;top:' + Math.round((draftBox.y / size.height) * rect.height) + 'px;width:' + Math.round((draftBox.width / size.width) * rect.width) + 'px;height:' + Math.round((draftBox.height / size.height) * rect.height) + 'px;"></div>';
     }
+
+    updatePreviewControlState();
   }
 
   function requestOverlayRender() {
+    if (previewState.active) {
+      return;
+    }
+
     if (overlayRenderFrame) {
       return;
     }
@@ -575,6 +1218,10 @@
   }
 
   function setSelected(index) {
+    if (previewState.active) {
+      return;
+    }
+
     var cards = getCards();
     if (!cards.length) {
       selectedIndex = -1;
@@ -588,6 +1235,10 @@
   }
 
   function addRegion(region) {
+    if (previewState.active) {
+      return;
+    }
+
     var hint = regionList.querySelector('.muted');
     if (hint) {
       hint.remove();
@@ -613,6 +1264,7 @@
       region_key: name,
       label: name,
       region_type: type,
+      animation_json: normalizeAnimationConfig('{}'),
       x: 80,
       y: 80,
       width: size.width,
@@ -639,6 +1291,10 @@
   }
 
   function startDraw(event) {
+    if (previewState.active) {
+      return;
+    }
+
     var start = toCanvasPoint(event);
     draft = { start: start, end: start };
     renderOverlay();
@@ -664,6 +1320,10 @@
   }
 
   function startMove(index, event) {
+    if (previewState.active) {
+      return;
+    }
+
     var startPoint = toCanvasPoint(event);
     var startRegion = readCard(cardAt(index));
     function moveHandler(moveEvent) {
@@ -687,6 +1347,10 @@
   }
 
   function resizeFromHandle(index, dir, event) {
+    if (previewState.active) {
+      return;
+    }
+
     var startPoint = toCanvasPoint(event);
     var startRegion = readCard(cardAt(index));
     var lockRatio = normalizeLockRatio(startRegion.lock_ratio);
@@ -824,6 +1488,31 @@
       backgroundEmpty.style.display = 'block';
     });
   }
+  if (animationAdvancedModal) {
+    animationAdvancedModal.addEventListener('hidden.bs.modal', function () {
+      activeAnimationCard = null;
+    });
+    var animationModalApplyButton = animationAdvancedModal.querySelector('[data-animation-modal-apply]');
+    var animationModalResetButton = animationAdvancedModal.querySelector('[data-animation-modal-reset]');
+    if (animationModalApplyButton) {
+      animationModalApplyButton.addEventListener('click', function () {
+        saveAnimationModal();
+        if (window.pulseModal) {
+          window.pulseModal.hide(animationAdvancedModal);
+        }
+      });
+    }
+    if (animationModalResetButton) {
+      animationModalResetButton.addEventListener('click', function () {
+        if (!activeAnimationCard) {
+          return;
+        }
+        writeAnimationConfig(activeAnimationCard, normalizeAnimationConfig('{}'));
+        populateAnimationModal(activeAnimationCard);
+        requestOverlayRender();
+      });
+    }
+  }
   if (backgroundColorInput) {
     backgroundColorInput.addEventListener('input', updateStageBackgroundColor);
   }
@@ -853,6 +1542,11 @@
   });
   if (templateForm) {
     templateForm.addEventListener('formdata', function (event) {
+      if (previewState.active) {
+        event.preventDefault();
+        return;
+      }
+
       if (!validateRegionNames()) {
         event.preventDefault();
         return;
@@ -868,6 +1562,10 @@
     });
 
     templateForm.addEventListener('submit', function () {
+      if (previewState.active) {
+        return;
+      }
+
       if (!validateRegionNames()) {
         return;
       }
@@ -882,6 +1580,36 @@
     });
   }
 
+  if (previewIntroButton) {
+    previewIntroButton.addEventListener('click', function () {
+      if (previewState.active && previewState.mode === 'intro') {
+        stopTemplatePreview(false);
+        return;
+      }
+      startTemplatePreview('intro');
+    });
+  }
+
+  if (previewOutButton) {
+    previewOutButton.addEventListener('click', function () {
+      if (previewState.active && previewState.mode === 'out') {
+        stopTemplatePreview(false);
+        return;
+      }
+      startTemplatePreview('out');
+    });
+  }
+
+  if (previewContinuousButton) {
+    previewContinuousButton.addEventListener('click', function () {
+      if (previewState.active && previewState.mode === 'continuous') {
+        stopTemplatePreview(false);
+        return;
+      }
+      startTemplatePreview('continuous');
+    });
+  }
+
   renderRegionList(existingRegions);
   syncCanvasSizeSelection();
   updateStageBackgroundColor();

src/web/public/js/toast.js

@@ -1,5 +1,10 @@
  (function (root) {
-  function getToastTitle(variant) {
+  function getToastTitle(variant, message) {
+    var text = String(message || '').trim();
+    if (/\b(?:deleted|removed)\.?$/i.test(text)) {
+      return 'Deleted';
+    }
+
     var textVariant = String(variant || '').trim().toLowerCase();
     if (textVariant === 'danger') {
       return 'Error';
@@ -142,6 +147,7 @@
   function getMessageVariant(message, fallbackVariant) {
     var text = String(message || '').trim();
     var rules = [
+      { variant: 'danger', patterns: [/\b(?:deleted|removed)\.?\s*$/i, /\b(?:deleted|removed)\b/i] },
       { variant: 'danger', patterns: [/\b(?:unable to|cannot|can't|could not|failed to)\s+delete\b/i, /\bdelete\b.*\b(?:before|first)\b/i, /\bstill (?:in use|linked|assigned|used)\b/i] },
       { variant: 'warning', patterns: [/\b(?:already exists|already exist|already taken|duplicate|must be unique|name already exists)\b/i] }
     ];
@@ -195,7 +201,7 @@
     toast.setAttribute('data-toast-created-at', String(Date.now()));
     var toastVariant = getMessageVariant(text, variant);
     toast.setAttribute('data-toast-variant', toastVariant);
-    toast.innerHTML = buildToastMarkup(getToastTitle(toastVariant), getToastTimeLabel(Date.now()), getToastButtonClass(toastVariant), getToastIconClass(toastVariant));
+    toast.innerHTML = buildToastMarkup(getToastTitle(toastVariant, text), getToastTimeLabel(Date.now()), getToastButtonClass(toastVariant), getToastIconClass(toastVariant));
     toast.querySelector('.toast-body').textContent = text;
     setToastVariant(toast, toastVariant);
 
@@ -226,8 +232,13 @@
       // ignore URL cleanup failures
     }
 
-    var existingVariant = String(toast.getAttribute('data-toast-variant') || '').trim().toLowerCase() || getMessageVariant((toast.querySelector('.toast-body') && toast.querySelector('.toast-body').textContent) || '', 'info');
+    var bodyText = (toast.querySelector('.toast-body') && toast.querySelector('.toast-body').textContent) || '';
+    var existingVariant = String(toast.getAttribute('data-toast-variant') || '').trim().toLowerCase() || getMessageVariant(bodyText, 'info');
     setToastVariant(toast, existingVariant);
+    var title = toast.querySelector('.toast-header .me-auto');
+    if (title) {
+      title.textContent = getToastTitle(existingVariant, bodyText);
+    }
 
     var instance = getBootstrapToast(toast);
     if (instance) {

src/web/routes/admin/account.js

@@ -12,7 +12,7 @@ module.exports = function registerAccountRoutes(app, deps) {
   const setSessionCookie = deps.setSessionCookie;
 
   app.get('/account', function (req, res) {
-    res.send(pages.renderAccountPage(req.currentUser, req.query.message ? String(req.query.message) : '', req.query.return_url ? String(req.query.return_url) : ''));
+    res.send(pages.renderAccountPage(req.currentUser, req.query.message ? String(req.query.message) : '', '/dashboard'));
   });
 
   app.post('/account/name', async function (req, res, next) {
@@ -32,7 +32,7 @@ module.exports = function registerAccountRoutes(app, deps) {
         return res.status(404).send('User not found.');
       }
 
-      res.redirect('/account?message=' + encodeURIComponent('Name updated.'));
+      res.redirect('/dashboard?message=' + encodeURIComponent('Name updated.'));
     } catch (error) {
       next(error);
     }
@@ -68,7 +68,7 @@ module.exports = function registerAccountRoutes(app, deps) {
 
       const token = await createUserSession(pool, user.id);
       setSessionCookie(res, token);
-      res.redirect('/account?message=' + encodeURIComponent('Password updated.'));
+      res.redirect('/dashboard?message=' + encodeURIComponent('Password updated.'));
     } catch (error) {
       next(error);
     }

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

@@ -1,12 +1,16 @@
 // Admin client command routes for connected screens.
 
+const { commitDeviceBinding } = require('#src/player/onboarding');
+
 module.exports = function registerScreenCommandRoutes(app, deps) {
   const pool = deps.pool;
+  const common = deps.common;
   const forwardPlayerCommand = deps.forwardPlayerCommand;
   const getScreenConnections = deps.getScreenConnections;
   const isClientNameAvailable = deps.isClientNameAvailable;
   const withClientNameReservation = deps.withClientNameReservation;
   const broadcastDashboardState = deps.broadcastDashboardState;
+  const playerPublicBaseUrl = String(deps.playerPublicBaseUrl || '').trim().replace(/\/$/, '');
   const requirePermission = deps.requirePermission;
 
   app.post('/clients/:slug/commands', requirePermission('clients.allow'), async function (req, res, next) {
@@ -138,6 +142,101 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
         });
       }
 
+      if (command === 'moveclient') {
+        const deviceId = String((req.body && (req.body.deviceId || req.body.clientId)) || req.query.deviceId || req.query.clientId || '').trim();
+        const clientName = String((req.body && req.body.clientName) || req.query.clientName || '').trim();
+        const targetScreenSlug = String((req.body && (req.body.targetScreenSlug || req.body.screenSlug)) || req.query.targetScreenSlug || req.query.screenSlug || '').trim();
+
+        if (!deviceId) {
+          return res.status(400).json({ error: 'Device ID is required' });
+        }
+        if (!targetScreenSlug) {
+          return res.status(400).json({ error: 'Target screen is required' });
+        }
+
+        const [currentRows] = await pool.query(
+          `SELECT d.client_name, s.slug AS current_screen_slug
+           FROM d_onboarding_devices d
+           LEFT JOIN d_screens s ON s.id = d.screen_id
+           WHERE d.device_id = ?
+           LIMIT 1`,
+          [deviceId]
+        );
+        const onboardingRow = currentRows[0] || null;
+        const resolvedClientName = String(clientName || onboardingRow && onboardingRow.client_name || '').trim();
+        const currentScreenSlug = String(onboardingRow && onboardingRow.current_screen_slug || '').trim();
+
+        if (!resolvedClientName) {
+          return res.status(400).json({ error: 'Client name is required' });
+        }
+
+        if (currentScreenSlug && currentScreenSlug === targetScreenSlug) {
+          return res.json({
+            screen: screenRows[0],
+            screenSlug: slug,
+            command: command,
+            connectionId: connectionId || null,
+            deviceId: deviceId,
+            clientName: resolvedClientName,
+            targetScreenSlug: targetScreenSlug,
+            ok: true,
+            unchanged: true
+          });
+        }
+
+        if (typeof commitDeviceBinding !== 'function') {
+          return res.status(500).json({ error: 'Client binding is unavailable.' });
+        }
+
+        let liveConnections = [];
+        try {
+          const [screenSlugs] = await pool.query('SELECT slug FROM d_screens ORDER BY slug ASC');
+          const liveResults = await Promise.all((screenSlugs || []).map(async function (row) {
+            const screenSlug = String(row && row.slug ? row.slug : '').trim();
+            if (!screenSlug || typeof getScreenConnections !== 'function') {
+              return [];
+            }
+            try {
+              const liveResponse = await getScreenConnections(screenSlug);
+              return Array.isArray(liveResponse && liveResponse.connections) ? liveResponse.connections : [];
+            } catch (_error) {
+              return [];
+            }
+          }));
+          liveConnections = liveResults.flat();
+        } catch (_error) {
+          liveConnections = [];
+        }
+
+        const status = await commitDeviceBinding(pool, deviceId, resolvedClientName, targetScreenSlug, isClientNameAvailable, liveConnections);
+        const targetPlayerRecord = typeof common.fetchScreenPlayerRecord === 'function'
+          ? await common.fetchScreenPlayerRecord(pool, targetScreenSlug)
+          : null;
+        const targetBaseUrl = String(targetPlayerRecord && targetPlayerRecord.public_base_url || playerPublicBaseUrl || '').trim().replace(/\/$/, '');
+        const targetPlayerUrl = targetBaseUrl ? `${targetBaseUrl}/screen/${encodeURIComponent(targetScreenSlug)}` : `/screen/${encodeURIComponent(targetScreenSlug)}`;
+
+        await forwardPlayerCommand(slug, {
+          command: 'redirect',
+          url: targetPlayerUrl
+        }, connectionId || deviceId || undefined);
+
+        if (typeof broadcastDashboardState === 'function') {
+          await broadcastDashboardState();
+        }
+
+        return res.json({
+          screen: screenRows[0],
+          screenSlug: slug,
+          command: command,
+          connectionId: connectionId || null,
+          deviceId: deviceId,
+          clientName: status ? status.client_name : resolvedClientName,
+          targetScreenSlug: targetScreenSlug,
+          playerUrl: targetPlayerUrl,
+          ok: true
+        });
+      }
+
       const commandPayload = req.body && typeof req.body === 'object' && !Array.isArray(req.body)
         ? Object.assign({}, req.body, { command: command })
         : { command: command };

src/web/routes/admin/content.js

@@ -2,7 +2,8 @@
 
 const fs = require('fs');
 const path = require('path');
-const { loadFontLibrary } = require('../../lib/media/font-library');
+const { loadFontLibrary } = require('#src/web/lib/media/font-library');
+const { PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 module.exports = function registerContentRoutes(app, deps) {
   const pool = deps.pool;
@@ -27,12 +28,39 @@ module.exports = function registerContentRoutes(app, deps) {
   const getCanvasSizeDeleteBlockMessage = deps.getCanvasSizeDeleteBlockMessage;
   const requirePermission = deps.requirePermission;
   const hasAnyPermission = deps.hasAnyPermission;
-  const { buildPagination } = require('../../lib/pagination');
+  const { buildPagination } = require('#src/web/lib/pagination');
 
   const LIST_PAGE_SIZE = 25;
   const IMAGE_UPLOAD_MAX_BYTES = 100 * 1024 * 1024;
   const VIDEO_UPLOAD_MAX_BYTES = 1024 * 1024 * 1024;
 
+  async function fetchSlideFormData() {
+    const data = await common.fetchTemplatesData(pool);
+    const rssData = await common.fetchRssFeedsData(pool);
+    const apiData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
+    const timetableData = typeof common.fetchTimetablesData === 'function' ? await common.fetchTimetablesData(pool) : { timetableGroups: [] };
+    const apiSources = Array.isArray(apiData.apiSources) ? apiData.apiSources.map(function (source) {
+      return Object.assign({}, source, {
+        responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
+      });
+    }) : [];
+    const rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
+      const items = typeof common.fetchRssFeedItemsByFeedId === 'function'
+        ? await common.fetchRssFeedItemsByFeedId(pool, feed.id)
+        : [];
+      return Object.assign({}, feed, { items: items.map(function (item) {
+        return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
+      }) });
+    }));
+
+    return Object.assign(data, rssData, apiData, timetableData, {
+      rssFeeds: rssFeeds,
+      apiSources: apiSources,
+      timetableGroups: timetableData.timetableGroups || [],
+      fontLibrary: loadFontLibrary(deps.uploadDir)
+    });
+  }
+
   if (!pool || !common || !pages || !upload || typeof fetchScreensBySlideId !== 'function' || typeof fetchScreensByTemplateId !== 'function' || typeof collectUploadReferencesFromSlide !== 'function' || typeof collectUploadReferencesFromTemplate !== 'function' || typeof collectUploadReferencesFromPayload !== 'function' || typeof removeUnusedUploadFiles !== 'function' || typeof syncPlaylistUploadsOnChange !== 'function' || typeof getAuditUserId !== 'function' || typeof redirectAfterSave !== 'function' || typeof notifyPlayerScreens !== 'function' || typeof broadcastDashboardState !== 'function' || typeof getSlideDeleteBlockMessage !== 'function' || typeof getTemplateDeleteBlockMessage !== 'function' || typeof getCanvasSizeDeleteBlockMessage !== 'function' || typeof hasAnyPermission !== 'function') {
     throw new Error('registerContentRoutes requires the content route dependencies.');
   }
@@ -68,7 +96,7 @@ module.exports = function registerContentRoutes(app, deps) {
       return next();
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);
@@ -271,24 +299,8 @@ module.exports = function registerContentRoutes(app, deps) {
 
   app.get('/slides/new', requirePermission('slides.create'), async function (req, res, next) {
     try {
-      const data = await common.fetchTemplatesData(pool);
-      const rssData = await common.fetchRssFeedsData(pool);
-      const apiData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
-      const apiSources = Array.isArray(apiData.apiSources) ? apiData.apiSources.map(function (source) {
-        return Object.assign({}, source, {
-          responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
-        });
-      }) : [];
-      const rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
-        const items = typeof common.fetchRssFeedItemsByFeedId === 'function'
-          ? await common.fetchRssFeedItemsByFeedId(pool, feed.id)
-          : [];
-        return Object.assign({}, feed, { items: items.map(function (item) {
-          return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
-        }) });
-      }));
-      Object.assign(data, rssData, apiData, { rssFeeds: rssFeeds, apiSources: apiSources, fontLibrary: loadFontLibrary(deps.uploadDir) });
-      res.send(pages.renderSlideFormPage(data, 'create', null, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const data = await fetchSlideFormData();
+      res.send(pages.renderSlideAddPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }
@@ -301,24 +313,8 @@ module.exports = function registerContentRoutes(app, deps) {
         return res.status(404).send('Slide not found');
       }
       slide.inUse = Boolean(await getSlideDeleteBlockMessage(pool, slide));
-      const data = await common.fetchTemplatesData(pool);
-      const rssData = await common.fetchRssFeedsData(pool);
-      const apiData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
-      const apiSources = Array.isArray(apiData.apiSources) ? apiData.apiSources.map(function (source) {
-        return Object.assign({}, source, {
-          responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
-        });
-      }) : [];
-      const rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
-        const items = typeof common.fetchRssFeedItemsByFeedId === 'function'
-          ? await common.fetchRssFeedItemsByFeedId(pool, feed.id)
-          : [];
-        return Object.assign({}, feed, { items: items.map(function (item) {
-          return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
-        }) });
-      }));
-      Object.assign(data, rssData, apiData, { rssFeeds: rssFeeds, apiSources: apiSources, fontLibrary: loadFontLibrary(deps.uploadDir) });
-      res.send(pages.renderSlideFormPage(data, 'edit', slide, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const data = await fetchSlideFormData();
+      res.send(pages.renderSlideEditPage(data, slide, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }
@@ -482,7 +478,7 @@ module.exports = function registerContentRoutes(app, deps) {
   app.get('/templates/new', requirePermission('templates.create'), async function (req, res, next) {
     try {
       const data = await common.fetchCanvasSizesData(pool);
-      res.send(pages.renderTemplateFormPage(null, 'create', req.query.message ? String(req.query.message) : '', data.canvasSizes, req.currentUser));
+      res.send(pages.renderTemplateAddPage(null, req.query.message ? String(req.query.message) : '', data.canvasSizes, req.currentUser));
     } catch (error) {
       next(error);
     }
@@ -505,8 +501,8 @@ module.exports = function registerContentRoutes(app, deps) {
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-          [result.insertId, region.region_key, region.region_type, region.label, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          [result.insertId, region.region_key, region.region_type, region.label, region.lock_ratio, JSON.stringify(region.animation_json || {}), region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
       await syncPlaylistUploadsOnChange({
@@ -534,7 +530,7 @@ module.exports = function registerContentRoutes(app, deps) {
       template.region_usage = await fetchTemplateRegionUsage(template);
       template.inUse = (await fetchSlidesByTemplateId(template.id)).length > 0;
       const sizeData = await common.fetchCanvasSizesData(pool);
-      res.send(pages.renderTemplateFormPage(template, 'edit', req.query.message ? String(req.query.message) : '', sizeData.canvasSizes, req.currentUser));
+      res.send(pages.renderTemplateEditPage(template, sizeData, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }
@@ -567,8 +563,8 @@ module.exports = function registerContentRoutes(app, deps) {
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-          [template.id, region.region_key, region.region_type, region.label, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          [template.id, region.region_key, region.region_type, region.label, region.lock_ratio, JSON.stringify(region.animation_json || {}), region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
       await syncPlaylistUploadsOnChange({
@@ -640,7 +636,7 @@ module.exports = function registerContentRoutes(app, deps) {
   });
 
   app.get('/canvas-sizes/new', requirePermission('canvas-sizes.create'), function (req, res) {
-    res.send(pages.renderCanvasSizeFormPage(null, 'create', req.query.message ? String(req.query.message) : '', req.currentUser));
+    res.send(pages.renderCanvasSizeAddPage(null, req.query.message ? String(req.query.message) : '', req.currentUser));
   });
 
   app.post('/canvas-sizes', requirePermission('canvas-sizes.create'), async function (req, res, next) {

src/web/routes/admin/data-sources.js

@@ -1,145 +1,10 @@
-// Admin data-source route registration for API and RSS sources.
+// Root data-source redirect only.
+
+const { PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 module.exports = function registerDataSourceRoutes(app, deps) {
-  const pool = deps.pool;
-  const common = deps.common;
-  const pages = deps.pages;
-  const backgroundTaskQueue = deps.backgroundTaskQueue;
   const setAuthMessageCookie = deps.setAuthMessageCookie;
   const { hasAnyPermission } = require('#src/rbac');
-  const formatDashboardDate = deps.formatDashboardDate || function (value) {
-    return value ? String(value) : '';
-  };
-  const getAuditUserId = deps.getAuditUserId;
-  const redirectAfterSave = deps.redirectAfterSave;
-  const requirePermission = deps.requirePermission;
-  const { buildPagination } = require('#src/web/lib/pagination');
-  const { createDataSourceTaskService } = require('#src/web/lib/background-tasks/tasks-scheduled/data-source-refresh');
-
-  const LIST_PAGE_SIZE = 25;
-
-  function toIsoTimestamp(value) {
-    if (!value) {
-      return '';
-    }
-
-    const date = new Date(value);
-    return Number.isNaN(date.getTime()) ? '' : date.toISOString();
-  }
-
-  function slideUsesDataSourceField(content, fieldName, targetId) {
-    const normalizedTargetId = Number(targetId);
-    if (!Number.isFinite(normalizedTargetId) || !content || typeof content !== 'object') {
-      return false;
-    }
-
-    if (Array.isArray(content)) {
-      return content.some(function (item) {
-        return slideUsesDataSourceField(item, fieldName, normalizedTargetId);
-      });
-    }
-
-    if (Object.prototype.hasOwnProperty.call(content, fieldName) && Number(content[fieldName]) === normalizedTargetId) {
-      return true;
-    }
-
-    return Object.keys(content).some(function (key) {
-      return slideUsesDataSourceField(content[key], fieldName, normalizedTargetId);
-    });
-  }
-
-  async function getDataSourceDeleteBlockMessage(fieldName, dataSourceId, label) {
-    const isInUse = await getDataSourceInUse(fieldName, dataSourceId);
-    if (isInUse) {
-      return 'This ' + label + ' is still used by one or more slides.';
-    }
-
-    return '';
-  }
-
-  async function getDataSourceInUse(fieldName, dataSourceId) {
-    const [slides] = await pool.query('SELECT id, content_json FROM c_slides WHERE content_json IS NOT NULL');
-    for (let index = 0; index < slides.length; index += 1) {
-      const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slides[index].content_json) : null;
-      if (slideUsesDataSourceField(content, fieldName, dataSourceId)) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  async function getDataSourceUsageMaps() {
-    const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
-    const apiSourceIds = new Set();
-    const rssFeedIds = new Set();
-
-    for (let index = 0; index < slides.length; index += 1) {
-      const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slides[index].content_json) : null;
-      if (!content || typeof content !== 'object') {
-        continue;
-      }
-
-      (function walk(value) {
-        if (!value || typeof value !== 'object') {
-          return;
-        }
-
-        if (Array.isArray(value)) {
-          value.forEach(walk);
-          return;
-        }
-
-        if (Object.prototype.hasOwnProperty.call(value, 'source_id')) {
-          const sourceId = Number(value.source_id);
-          if (Number.isFinite(sourceId)) {
-            apiSourceIds.add(sourceId);
-          }
-        }
-
-        if (Object.prototype.hasOwnProperty.call(value, 'feed_id')) {
-          const feedId = Number(value.feed_id);
-          if (Number.isFinite(feedId)) {
-            rssFeedIds.add(feedId);
-          }
-        }
-
-        Object.keys(value).forEach(function (key) {
-          walk(value[key]);
-        });
-      })(content);
-    }
-
-    return {
-      apiSourceIds: apiSourceIds,
-      rssFeedIds: rssFeedIds
-    };
-  }
-
-  if (!pool || !common || !pages || typeof getAuditUserId !== 'function' || typeof redirectAfterSave !== 'function' || typeof requirePermission !== 'function' || !backgroundTaskQueue) {
-    throw new Error('registerDataSourceRoutes requires the data source route dependencies.');
-  }
-
-  const dataSourceTasks = createDataSourceTaskService({
-    pool: pool,
-    common: common,
-    backgroundTaskQueue: backgroundTaskQueue
-  });
-
-  async function sendRefreshTaskState(req, res, sourceType, sourceId) {
-    const taskId = Number(req.query.refresh_task_id);
-    if (!Number.isFinite(taskId) || taskId <= 0) {
-      return res.status(400).json({ error: 'Missing refresh task id.' });
-    }
-
-    const task = await dataSourceTasks.getTaskStatusById(taskId);
-    const expectedKey = sourceType + '-refresh:' + Number(sourceId);
-    if (!task || task.key !== expectedKey) {
-      return res.status(404).json({ error: 'Refresh task not found.' });
-    }
-
-    res.json(task);
-  }
 
   app.get('/data-sources', function (req, res, next) {
     if (!req.currentUser) {
@@ -150,414 +15,19 @@ module.exports = function registerDataSourceRoutes(app, deps) {
       return res.redirect('/login');
     }
 
-    if (hasAnyPermission(req.currentUser, ['rss-feeds.read', 'api-sources.read'])) {
+    if (hasAnyPermission(req.currentUser, ['timetables.read', 'rss-feeds.read', 'api-sources.read'])) {
+      if (hasAnyPermission(req.currentUser, ['timetables.read'])) {
+        return res.redirect('/data-sources/timetables');
+      }
       if (hasAnyPermission(req.currentUser, ['rss-feeds.read'])) {
         return res.redirect('/data-sources/rss-feeds');
       }
       return res.redirect('/data-sources/api-sources');
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);
   });
-
-  app.get('/data-sources/api-sources', requirePermission('api-sources.read'), async function (req, res, next) {
-    try {
-      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-      const search = common.getSearchQuery(req);
-      const sort = common.getSortQuery(req);
-      const direction = common.getSortDirectionQuery(req);
-      const data = await common.fetchApiSourcesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
-      const usageMaps = await getDataSourceUsageMaps();
-      const apiSources = (data.apiSources || []).map(function (apiSource) {
-        return Object.assign({}, apiSource, {
-          authMethod: apiSource.auth_method || 'none',
-          authUsername: apiSource.auth_username || '',
-          authPassword: apiSource.auth_password || '',
-          authBearerToken: apiSource.auth_bearer_token || '',
-          authHeaderName: apiSource.auth_header_name || 'X-API-Key',
-          authHeaderValue: apiSource.auth_header_value || '',
-          itemsPath: apiSource.items_path || '',
-          intervalLabel: apiSource.update_interval_unit === 'seconds'
-            ? (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every second' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} seconds`)
-            : (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every minute' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} minutes`),
-          lastPullLabel: apiSource.last_pulled_at ? formatDashboardDate(apiSource.last_pulled_at) : 'Never',
-          lastPulledAtValue: apiSource.last_pulled_at ? new Date(apiSource.last_pulled_at).toISOString() : '',
-          inUse: usageMaps.apiSourceIds.has(Number(apiSource.id))
-        });
-      });
-      res.send(pages.renderApiSourcesPage({
-        apiSources: apiSources,
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'API sources', 'API source pages')
-      }, req.query.message ? String(req.query.message) : '', req.currentUser, formatDashboardDate));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.get('/data-sources/api-sources/new', requirePermission('api-sources.create'), function (req, res) {
-    res.send(pages.renderApiSourceFormPage(null, 'create', req.query.message ? String(req.query.message) : '', req.currentUser));
-  });
-
-  app.post('/data-sources/api-sources', requirePermission('api-sources.create'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const payload = common.buildApiSourcePayload(req, null);
-      if (await common.fetchDuplicateName(pool, 'i_api_sources', payload.name)) {
-        return res.redirect('/data-sources/api-sources/new?message=' + encodeURIComponent('An API source with that name already exists.'));
-      }
-      const actorId = getAuditUserId(req);
-      await connection.beginTransaction();
-      const [result] = await connection.query(
-        'INSERT INTO i_api_sources (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_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-        [payload.name, payload.apiUrl, payload.authMethod, payload.authUsername || null, payload.authPassword || null, payload.authBearerToken || null, payload.authHeaderName || null, payload.authHeaderValue || null, payload.itemsPath || null, payload.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, actorId]
-      );
-      await connection.commit();
-      dataSourceTasks.registerRecurringRefresh('api-source', result.insertId, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
-        return dataSourceTasks.refreshApiSourceInBackground(result.insertId, actorId);
-      });
-      const refreshTask = await backgroundTaskQueue.enqueueTask({
-        key: 'api-source-refresh:' + result.insertId,
-        title: 'API source refresh',
-        category: 'data-source',
-        taskType: 'data-source-refresh',
-        payload: {
-          sourceType: 'api-source',
-          sourceId: result.insertId,
-          sourceName: payload.name,
-          actorId: actorId
-        },
-        metadata: {
-          sourceType: 'api-source',
-          sourceId: result.insertId,
-          sourceName: payload.name
-        }
-      });
-      const message = 'API source created. Refresh is running in the background.';
-      res.redirect('/data-sources/api-sources/' + result.insertId + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
-    } catch (error) {
-      try {
-        await connection.rollback();
-      } catch (_rollbackError) {
-        // Ignore rollback failures and surface the original error.
-      }
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.get('/data-sources/api-sources/:id/edit', requirePermission('api-sources.update'), async function (req, res, next) {
-    try {
-      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
-      if (!apiSource) {
-        return res.status(404).send('API source not found');
-      }
-
-      const inUse = await getDataSourceInUse('source_id', apiSource.id);
-
-      res.send(pages.renderApiSourceEditPage(Object.assign({}, apiSource, {
-        apiUrl: apiSource.api_url,
-        authMethod: apiSource.auth_method || 'none',
-        authUsername: apiSource.auth_username || '',
-        authPassword: apiSource.auth_password || '',
-        authBearerToken: apiSource.auth_bearer_token || '',
-        authHeaderName: apiSource.auth_header_name || 'X-API-Key',
-        authHeaderValue: apiSource.auth_header_value || '',
-        itemsPath: apiSource.items_path || '',
-        updateIntervalValue: apiSource.update_interval_value,
-        updateIntervalUnit: apiSource.update_interval_unit || 'minutes',
-        lastPulledAtValue: toIsoTimestamp(apiSource.last_pulled_at),
-        lastPulledAtLabel: apiSource.last_pulled_at ? String(apiSource.last_pulled_at) : '',
-        lastPullError: apiSource.last_pull_error || '',
-        lastResponseStatus: apiSource.last_response_status,
-        lastResponseContentType: apiSource.last_response_content_type,
-        lastResponseJson: apiSource.last_response_json || '',
-        inUse: inUse
-      }), {
-        lastResponseJson: apiSource.last_response_json || '',
-        lastPullError: apiSource.last_pull_error || ''
-      }, req.query.message ? String(req.query.message) : '', req.currentUser));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.get('/data-sources/api-sources/:id/state', requirePermission('api-sources.update'), function (req, res, next) {
-    sendRefreshTaskState(req, res, 'api-source', Number(req.params.id)).catch(next);
-  });
-
-  app.post('/data-sources/api-sources/:id', requirePermission('api-sources.update'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
-      if (!apiSource) {
-        return res.status(404).send('API source not found');
-      }
-
-      const payload = common.buildApiSourcePayload(req, apiSource);
-      if (await common.fetchDuplicateName(pool, 'i_api_sources', payload.name, apiSource.id)) {
-        return res.redirect('/data-sources/api-sources/' + apiSource.id + '/edit?message=' + encodeURIComponent('An API source with that name already exists.'));
-      }
-      const actorId = getAuditUserId(req);
-      await connection.beginTransaction();
-      await connection.query(
-        'UPDATE i_api_sources SET 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 = ?, modified_by = ? WHERE id = ?',
-        [payload.name, payload.apiUrl, payload.authMethod, payload.authUsername || null, payload.authPassword || null, payload.authBearerToken || null, payload.authHeaderName || null, payload.authHeaderValue || null, payload.itemsPath || null, payload.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, apiSource.id]
-      );
-      await connection.commit();
-      dataSourceTasks.registerRecurringRefresh('api-source', apiSource.id, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
-        return dataSourceTasks.refreshApiSourceInBackground(apiSource.id, actorId);
-      });
-      const message = 'API source updated. Refresh is running in the background.';
-      const refreshTask = await backgroundTaskQueue.enqueueTask({
-        key: 'api-source-refresh:' + apiSource.id,
-        title: 'API source refresh',
-        category: 'data-source',
-        taskType: 'data-source-refresh',
-        payload: {
-          sourceType: 'api-source',
-          sourceId: apiSource.id,
-          sourceName: payload.name,
-          actorId: actorId
-        },
-        metadata: {
-          sourceType: 'api-source',
-          sourceId: apiSource.id,
-          sourceName: payload.name
-        }
-      });
-      res.redirect('/data-sources/api-sources/' + apiSource.id + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
-    } catch (error) {
-      try {
-        await connection.rollback();
-      } catch (_rollbackError) {
-        // Ignore rollback failures and surface the original error.
-      }
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.post('/data-sources/api-sources/:id/delete', requirePermission('api-sources.delete'), async function (req, res, next) {
-    try {
-      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
-      if (!apiSource) {
-        return res.status(404).send('API source not found');
-      }
-
-      const blockMessage = await getDataSourceDeleteBlockMessage('source_id', apiSource.id, 'API source');
-      if (blockMessage) {
-        return res.redirect('/data-sources/api-sources?message=' + encodeURIComponent(blockMessage));
-      }
-
-      const connection = await pool.getConnection();
-      try {
-        await connection.beginTransaction();
-        await connection.query('DELETE FROM i_api_sources WHERE id = ?', [apiSource.id]);
-        await connection.commit();
-        dataSourceTasks.removeRecurringRefresh('api-source', apiSource.id);
-      } catch (error) {
-        await connection.rollback();
-        throw error;
-      } finally {
-        connection.release();
-      }
-      res.redirect('/data-sources/api-sources?message=' + encodeURIComponent('API source deleted.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.get('/data-sources/rss-feeds', requirePermission('rss-feeds.read'), async function (req, res, next) {
-    try {
-      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-      const search = common.getSearchQuery(req);
-      const sort = common.getSortQuery(req);
-      const direction = common.getSortDirectionQuery(req);
-      const data = await common.fetchRssFeedsPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
-      const usageMaps = await getDataSourceUsageMaps();
-      const rssFeeds = (data.rssFeeds || []).map(function (rssFeed) {
-        return Object.assign({}, rssFeed, {
-          inUse: usageMaps.rssFeedIds.has(Number(rssFeed.id))
-        });
-      });
-      res.send(pages.renderRssFeedsPage({
-        rssFeeds: rssFeeds,
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'RSS feeds', 'RSS feed pages')
-      }, req.query.message ? String(req.query.message) : '', req.currentUser));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.get('/data-sources/rss-feeds/new', requirePermission('rss-feeds.create'), function (req, res) {
-    res.send(pages.renderRssFeedFormPage(null, 'create', req.query.message ? String(req.query.message) : '', req.currentUser));
-  });
-
-  app.post('/data-sources/rss-feeds', requirePermission('rss-feeds.create'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const payload = common.buildRssFeedPayload(req, null);
-      if (await common.fetchDuplicateName(pool, 'i_rss_feeds', payload.name)) {
-        return res.redirect('/data-sources/rss-feeds/new?message=' + encodeURIComponent('An RSS feed with that name already exists.'));
-      }
-      const actorId = getAuditUserId(req);
-      await connection.beginTransaction();
-      const [result] = await connection.query(
-        'INSERT INTO i_rss_feeds (name, feed_url, update_interval_value, update_interval_unit, item_limit, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
-        [payload.name, payload.feedUrl, payload.updateIntervalValue, payload.updateIntervalUnit, payload.itemLimit, actorId, actorId]
-      );
-      await connection.commit();
-      dataSourceTasks.registerRecurringRefresh('rss-feed', result.insertId, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
-        return dataSourceTasks.refreshRssFeedInBackground(result.insertId, payload.feedUrl, payload.itemLimit, actorId);
-      });
-      const refreshTask = await backgroundTaskQueue.enqueueTask({
-        key: 'rss-feed-refresh:' + result.insertId,
-        title: 'RSS feed refresh',
-        category: 'data-source',
-        taskType: 'data-source-refresh',
-        payload: {
-          sourceType: 'rss-feed',
-          sourceId: result.insertId,
-          sourceName: payload.name,
-          actorId: actorId
-        },
-        metadata: {
-          sourceType: 'rss-feed',
-          sourceId: result.insertId,
-          sourceName: payload.name
-        }
-      });
-      const message = 'RSS feed created. Refresh is running in the background.';
-      res.redirect('/data-sources/rss-feeds/' + result.insertId + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
-    } catch (error) {
-      try {
-        await connection.rollback();
-      } catch (_rollbackError) {
-        // Ignore rollback failures and surface the original error.
-      }
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.get('/data-sources/rss-feeds/:id/edit', requirePermission('rss-feeds.update'), async function (req, res, next) {
-    try {
-      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
-      if (!rssFeed) {
-        return res.status(404).send('RSS feed not found');
-      }
-
-      const inUse = await getDataSourceInUse('feed_id', rssFeed.id);
-
-      const pulledItems = typeof common.fetchRssFeedItemsByFeedId === 'function'
-        ? await common.fetchRssFeedItemsByFeedId(pool, rssFeed.id)
-        : [];
-
-      res.send(pages.renderRssFeedEditPage(Object.assign({}, rssFeed, {
-        feedUrl: rssFeed.feed_url,
-        updateIntervalValue: rssFeed.update_interval_value,
-        updateIntervalUnit: rssFeed.update_interval_unit || 'minutes',
-        itemLimit: rssFeed.item_limit,
-        inUse: inUse
-      }), {
-        pulledItems: pulledItems,
-        pullError: ''
-      }, req.query.message ? String(req.query.message) : '', req.currentUser));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.get('/data-sources/rss-feeds/:id/state', requirePermission('rss-feeds.update'), function (req, res, next) {
-    sendRefreshTaskState(req, res, 'rss-feed', Number(req.params.id)).catch(next);
-  });
-
-  app.post('/data-sources/rss-feeds/:id', requirePermission('rss-feeds.update'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
-      if (!rssFeed) {
-        return res.status(404).send('RSS feed not found');
-      }
-
-      const payload = common.buildRssFeedPayload(req, rssFeed);
-      if (await common.fetchDuplicateName(pool, 'i_rss_feeds', payload.name, rssFeed.id)) {
-        return res.redirect('/data-sources/rss-feeds/' + rssFeed.id + '/edit?message=' + encodeURIComponent('An RSS feed with that name already exists.'));
-      }
-      const actorId = getAuditUserId(req);
-      await connection.beginTransaction();
-      await connection.query(
-        'UPDATE i_rss_feeds SET name = ?, feed_url = ?, update_interval_value = ?, update_interval_unit = ?, item_limit = ?, modified_by = ? WHERE id = ?',
-        [payload.name, payload.feedUrl, payload.updateIntervalValue, payload.updateIntervalUnit, payload.itemLimit, actorId, rssFeed.id]
-      );
-      await connection.commit();
-      dataSourceTasks.registerRecurringRefresh('rss-feed', rssFeed.id, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
-        return dataSourceTasks.refreshRssFeedInBackground(rssFeed.id, payload.feedUrl, payload.itemLimit, actorId);
-      });
-      const message = 'RSS feed updated. Refresh is running in the background.';
-      const refreshTask = await backgroundTaskQueue.enqueueTask({
-        key: 'rss-feed-refresh:' + rssFeed.id,
-        title: 'RSS feed refresh',
-        category: 'data-source',
-        taskType: 'data-source-refresh',
-        payload: {
-          sourceType: 'rss-feed',
-          sourceId: rssFeed.id,
-          sourceName: payload.name,
-          actorId: actorId
-        },
-        metadata: {
-          sourceType: 'rss-feed',
-          sourceId: rssFeed.id,
-          sourceName: payload.name
-        }
-      });
-      res.redirect('/data-sources/rss-feeds/' + rssFeed.id + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
-    } catch (error) {
-      try {
-        await connection.rollback();
-      } catch (_rollbackError) {
-        // Ignore rollback failures and surface the original error.
-      }
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.post('/data-sources/rss-feeds/:id/delete', requirePermission('rss-feeds.delete'), async function (req, res, next) {
-    try {
-      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
-      if (!rssFeed) {
-        return res.status(404).send('RSS feed not found');
-      }
-
-      const blockMessage = await getDataSourceDeleteBlockMessage('feed_id', rssFeed.id, 'RSS feed');
-      if (blockMessage) {
-        return res.redirect('/data-sources/rss-feeds?message=' + encodeURIComponent(blockMessage));
-      }
-
-      const connection = await pool.getConnection();
-      try {
-        await connection.beginTransaction();
-        await connection.query('DELETE FROM i_rss_feeds WHERE id = ?', [rssFeed.id]);
-        await connection.commit();
-        dataSourceTasks.removeRecurringRefresh('rss-feed', rssFeed.id);
-      } catch (error) {
-        await connection.rollback();
-        throw error;
-      } finally {
-        connection.release();
-      }
-      res.redirect('/data-sources/rss-feeds?message=' + encodeURIComponent('RSS feed deleted.'));
-    } catch (error) {
-      next(error);
-    }
-  });
 };

src/web/routes/admin/manage.js

@@ -1,24 +1,15 @@
-// Admin manage routes for screens, playlists, slides, and templates.
+// Admin manage routes for screens and commands.
 
 module.exports = function registerManageRoutes(app, deps) {
   const pool = deps.pool;
   const common = deps.common;
   const pages = deps.pages;
-  const fetchOrderedPlaylistSlides = deps.fetchOrderedPlaylistSlides;
-  const fetchScreensByPlaylistId = deps.fetchScreensByPlaylistId;
-  const fetchPlaylistCanvasSignature = deps.fetchPlaylistCanvasSignature;
-  const getCanvasSignature = deps.getCanvasSignature;
-  const normalizeScheduleMode = deps.normalizeScheduleMode;
-  const parseDateTimeLocal = deps.parseDateTimeLocal;
-  const parseTimeLocal = deps.parseTimeLocal;
-  const readArrayField = deps.readArrayField;
   const getAuditUserId = deps.getAuditUserId;
   const redirectAfterSave = deps.redirectAfterSave;
   const notifyPlayerScreens = deps.notifyPlayerScreens;
   const broadcastDashboardState = deps.broadcastDashboardState;
   const getScreenDeleteBlockMessage = deps.getScreenDeleteBlockMessage;
   const getScreenConnections = deps.getScreenConnections;
-  const getPlaylistDeleteBlockMessage = deps.getPlaylistDeleteBlockMessage;
   const forwardPlayerCommand = deps.forwardPlayerCommand;
   const PLAYER_PUBLIC_BASE_URL = deps.playerPublicBaseUrl;
   const requirePermission = deps.requirePermission;
@@ -83,462 +74,6 @@ module.exports = function registerManageRoutes(app, deps) {
     }
   });
 
-  app.post('/playlists', requirePermission('playlists.create'), async function (req, res, next) {
-    try {
-      const name = String(req.body.name || '').trim();
-      const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
-      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
-      if (!name) {
-        return res.status(400).send('Playlist name is required.');
-      }
-      if (await common.fetchDuplicateName(pool, 'c_playlists', name)) {
-        return res.status(400).send('A playlist with that name already exists.');
-      }
-      const actorId = getAuditUserId(req);
-      const [result] = await pool.query('INSERT INTO c_playlists (name, fade_between_slides, skip_unavailable_rtmp, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, fadeBetweenSlides, skipUnavailableRtmp, actorId, actorId]);
-      redirectAfterSave(req, res, '/playlists?edit=' + result.insertId, {
-        closeUrl: '/playlists',
-        newUrl: '/playlists/new',
-        message: 'Playlist created.'
-      });
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id', requirePermission('playlists.update'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const name = String(req.body.name || '').trim();
-      const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
-      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
-      if (!name) {
-        return res.status(400).send('Playlist name is required.');
-      }
-      const playlist = await common.fetchPlaylistById(connection, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      if (await common.fetchDuplicateName(pool, 'c_playlists', name, playlist.id)) {
-        return res.status(400).send('A playlist with that name already exists.');
-      }
-
-      const affectedScreens = await fetchScreensByPlaylistId(connection, playlist.id);
-
-      const slideIds = readArrayField(req.body, ['slide_id[]', 'slide_id']);
-      const durations = readArrayField(req.body, ['duration_seconds[]', 'duration_seconds']);
-      const useVideoDurations = readArrayField(req.body, ['use_video_duration[]', 'use_video_duration']);
-      const scheduleModes = readArrayField(req.body, ['schedule_mode[]', 'schedule_mode']);
-      const scheduleStartDateTimes = readArrayField(req.body, ['schedule_start_datetime[]', 'schedule_start_datetime']);
-      const scheduleEndDateTimes = readArrayField(req.body, ['schedule_end_datetime[]', 'schedule_end_datetime']);
-      const scheduleStartTimes = readArrayField(req.body, ['schedule_start_time[]', 'schedule_start_time']);
-      const scheduleEndTimes = readArrayField(req.body, ['schedule_end_time[]', 'schedule_end_time']);
-      const scheduleDaysJsonValues = readArrayField(req.body, ['schedule_days_json[]', 'schedule_days_json']);
-
-      if (durations.length && durations.length !== slideIds.length) {
-        return res.status(400).send('Playlist slide data is invalid.');
-      }
-      if (useVideoDurations.length && useVideoDurations.length !== slideIds.length) {
-        return res.status(400).send('Playlist slide data is invalid.');
-      }
-      if (scheduleModes.length && scheduleModes.length !== slideIds.length) {
-        return res.status(400).send('Playlist schedule data is invalid.');
-      }
-
-      const normalizedSlides = [];
-      const seenSlideIds = new Set();
-      for (let i = 0; i < slideIds.length; i += 1) {
-        const slideId = Number(slideIds[i]);
-        if (!Number.isInteger(slideId) || slideId <= 0) {
-          return res.status(400).send('Invalid slide selection.');
-        }
-        if (seenSlideIds.has(slideId)) {
-          return res.status(400).send('A slide can only be added to a playlist once.');
-        }
-        seenSlideIds.add(slideId);
-
-        const durationRaw = Number(durations[i]);
-        const durationSeconds = Number.isFinite(durationRaw) ? Math.max(0.001, Math.round(durationRaw * 1000) / 1000) : 10;
-        const useVideoDuration = String(useVideoDurations[i] || '') === '1' ? 1 : 0;
-        const scheduleMode = normalizeScheduleMode(scheduleModes[i]);
-
-        let scheduleStartDatetime = null;
-        let scheduleEndDatetime = null;
-        let scheduleStartTime = null;
-        let scheduleEndTime = null;
-        let scheduleDaysJson = null;
-
-        if (scheduleMode === 'dates') {
-          scheduleStartDatetime = parseDateTimeLocal(scheduleStartDateTimes[i]);
-          scheduleEndDatetime = parseDateTimeLocal(scheduleEndDateTimes[i]);
-          if (!scheduleStartDatetime || !scheduleEndDatetime) {
-            return res.status(400).send('Start and end datetimes are required for date scheduling.');
-          }
-          if (scheduleEndDatetime < scheduleStartDatetime) {
-            return res.status(400).send('End datetime must be after start datetime.');
-          }
-        } else if (scheduleMode === 'times') {
-          scheduleStartTime = parseTimeLocal(scheduleStartTimes[i]);
-          scheduleEndTime = parseTimeLocal(scheduleEndTimes[i]);
-          if (!scheduleStartTime || !scheduleEndTime) {
-            return res.status(400).send('Start and end times are required for time scheduling.');
-          }
-
-          let scheduleDays = [];
-          try {
-            const parsedDays = JSON.parse(String(scheduleDaysJsonValues[i] || '[]'));
-            scheduleDays = Array.isArray(parsedDays) ? parsedDays : [];
-          } catch (_error) {
-            scheduleDays = [];
-          }
-          scheduleDays = scheduleDays
-            .map(function (value) { return Number(value); })
-            .filter(function (value) { return Number.isInteger(value) && value >= 0 && value <= 6; });
-          if (!scheduleDays.length) {
-            return res.status(400).send('Select at least one day for time scheduling.');
-          }
-          scheduleDaysJson = JSON.stringify(Array.from(new Set(scheduleDays)).sort());
-        }
-
-        normalizedSlides.push({
-          slideId,
-          position: i,
-          durationSeconds,
-          useVideoDuration,
-          scheduleMode,
-          scheduleStartDatetime,
-          scheduleEndDatetime,
-          scheduleStartTime,
-          scheduleEndTime,
-          scheduleDaysJson
-        });
-      }
-
-      if (normalizedSlides.length) {
-        const [slides] = await connection.query(
-          `SELECT sl.id, cs.width AS canvas_width, cs.height AS canvas_height
-           FROM c_slides sl
-           LEFT JOIN c_templates st ON st.id = sl.template_id
-           LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
-           WHERE sl.id IN (?)`,
-          [normalizedSlides.map(function (item) { return item.slideId; })]
-        );
-        if (slides.length !== normalizedSlides.length) {
-          return res.status(400).send('One or more selected slides no longer exist.');
-        }
-        const signatures = Array.from(new Set(
-          slides
-            .map(function (slide) { return getCanvasSignature(slide.canvas_width, slide.canvas_height); })
-            .filter(Boolean)
-        ));
-        if (signatures.length > 1) {
-          return res.status(400).send('All playlist slides must share the same canvas size.');
-        }
-      }
-
-      const actorId = getAuditUserId(req);
-
-      await connection.beginTransaction();
-      await connection.query('UPDATE c_playlists SET name = ?, fade_between_slides = ?, skip_unavailable_rtmp = ?, modified_by = ? WHERE id = ?', [name, fadeBetweenSlides, skipUnavailableRtmp, actorId, playlist.id]);
-      await connection.query('DELETE FROM c_playlist_slides WHERE playlist_id = ?', [playlist.id]);
-      for (let i = 0; i < normalizedSlides.length; i += 1) {
-        const item = normalizedSlides[i];
-        await connection.query(
-          'INSERT INTO c_playlist_slides (playlist_id, slide_id, position, duration_seconds, use_video_duration, schedule_mode, schedule_start_datetime, schedule_end_datetime, schedule_start_time, schedule_end_time, schedule_days_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-          [
-            playlist.id,
-            item.slideId,
-            item.position,
-            item.durationSeconds,
-            item.useVideoDuration,
-            item.scheduleMode,
-            item.scheduleStartDatetime,
-            item.scheduleEndDatetime,
-            item.scheduleStartTime,
-            item.scheduleEndTime,
-            item.scheduleDaysJson,
-            actorId,
-            actorId
-          ]
-        );
-      }
-      await connection.commit();
-      await notifyPlayerScreens(affectedScreens, 'refresh');
-      await broadcastDashboardState();
-      redirectAfterSave(req, res, '/playlists?edit=' + playlist.id, {
-        closeUrl: '/playlists',
-        newUrl: '/playlists/new',
-        message: 'Playlist updated.'
-      });
-    } catch (error) {
-      try {
-        await connection.rollback();
-      } catch (_rollbackError) {
-        // Ignore rollback failures and surface the original error.
-      }
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.post('/playlists/:id/delete', requirePermission('playlists.delete'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const blockMessage = await getPlaylistDeleteBlockMessage(pool, playlist);
-      if (blockMessage) {
-        return res.redirect('/playlists?message=' + encodeURIComponent(blockMessage));
-      }
-      await pool.query('DELETE FROM c_playlists WHERE id = ?', [playlist.id]);
-      res.redirect('/playlists?message=' + encodeURIComponent('Playlist deleted.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id/slides', requirePermission('playlists.update'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const slideId = Number(req.body.slide_id);
-      if (!slideId) {
-        return res.status(400).send('Slide is required.');
-      }
-      const playlistCanvasSignature = await fetchPlaylistCanvasSignature(pool, playlist.id);
-      if (playlistCanvasSignature === 'mismatch') {
-        return res.status(400).send('This playlist already contains slides with different canvas sizes.');
-      }
-      const slide = await common.fetchSlideById(pool, slideId);
-      if (!slide) {
-        return res.status(404).send('Slide not found');
-      }
-      const slideCanvasSignature = getCanvasSignature(slide.canvas_width, slide.canvas_height);
-      if (playlistCanvasSignature && slideCanvasSignature !== playlistCanvasSignature) {
-        return res.status(400).send('The slide canvas size must match the existing playlist items.');
-      }
-      const durationValue = Number(req.body.duration_seconds || 10);
-      const durationSeconds = Number.isFinite(durationValue) ? Math.max(0.001, Math.round(durationValue * 1000) / 1000) : 10;
-      const [positionRows] = await pool.query('SELECT COALESCE(MAX(position), -1) AS max_position FROM c_playlist_slides WHERE playlist_id = ?', [playlist.id]);
-      const nextPosition = Number(positionRows[0].max_position) + 1;
-      const actorId = getAuditUserId(req);
-      await pool.query('INSERT INTO c_playlist_slides (playlist_id, slide_id, position, duration_seconds, use_video_duration, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)', [playlist.id, slideId, nextPosition, durationSeconds, 0, actorId, actorId]);
-      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
-      await broadcastDashboardState();
-      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide added to playlist.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id/slides/:playlistSlideId', requirePermission('playlists.update'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const playlistSlideId = Number(req.params.playlistSlideId);
-      const durationValue = Number(req.body.duration_seconds || 10);
-      const durationSeconds = Number.isFinite(durationValue) ? Math.max(0.001, Math.round(durationValue * 1000) / 1000) : 10;
-      const actorId = getAuditUserId(req);
-      const [result] = await pool.query(
-        'UPDATE c_playlist_slides SET duration_seconds = ?, modified_by = ? WHERE id = ? AND playlist_id = ?',
-        [durationSeconds, actorId, playlistSlideId, playlist.id]
-      );
-      if (!result.affectedRows) {
-        return res.status(404).send('Playlist slide not found');
-      }
-      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
-      await broadcastDashboardState();
-      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide duration updated.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id/slides/:playlistSlideId/move', requirePermission('playlists.update'), async function (req, res, next) {
-    const connection = await pool.getConnection();
-    try {
-      const playlist = await common.fetchPlaylistById(connection, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const playlistSlideId = Number(req.params.playlistSlideId);
-      const direction = String(req.body.direction || '').toLowerCase();
-      if (direction !== 'up' && direction !== 'down') {
-        return res.status(400).send('Invalid move direction.');
-      }
-
-      await connection.beginTransaction();
-      const orderedSlides = await fetchOrderedPlaylistSlides(connection, playlist.id);
-      const currentIndex = orderedSlides.findIndex(function (item) {
-        return Number(item.id) === playlistSlideId;
-      });
-      if (currentIndex === -1) {
-        await connection.rollback();
-        return res.status(404).send('Playlist slide not found');
-      }
-
-      const swapIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
-      if (swapIndex < 0 || swapIndex >= orderedSlides.length) {
-        await connection.rollback();
-        return res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide is already at the ' + (direction === 'up' ? 'top' : 'bottom') + '.'));
-      }
-
-      const currentSlide = orderedSlides[currentIndex];
-      const swapSlide = orderedSlides[swapIndex];
-      const actorId = getAuditUserId(req);
-
-      await connection.query('UPDATE c_playlist_slides SET position = ?, modified_by = ? WHERE id = ? AND playlist_id = ?', [swapSlide.position, actorId, currentSlide.id, playlist.id]);
-      await connection.query('UPDATE c_playlist_slides SET position = ?, modified_by = ? WHERE id = ? AND playlist_id = ?', [currentSlide.position, actorId, swapSlide.id, playlist.id]);
-      await connection.commit();
-      await notifyPlayerScreens(await fetchScreensByPlaylistId(connection, playlist.id), 'refresh');
-      await broadcastDashboardState();
-      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide order updated.'));
-    } catch (error) {
-      await connection.rollback();
-      next(error);
-    } finally {
-      connection.release();
-    }
-  });
-
-  app.get('/playlists/:id/slides/:playlistSlideId/config', requirePermission('playlists.update'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const data = await common.fetchAdminData(pool);
-      let playlistSlide = (data.playlistSlides || []).find(function (item) {
-        return item.id === Number(req.params.playlistSlideId) && item.playlist_id === playlist.id;
-      });
-      if (!playlistSlide && Number(req.params.playlistSlideId) !== 0) {
-        return res.status(404).send('Playlist slide not found');
-      }
-      const scheduleMode = typeof req.query.schedule_mode === 'string' && req.query.schedule_mode ? String(req.query.schedule_mode) : String(playlistSlide && playlistSlide.schedule_mode || 'always');
-      const scheduleStartDatetime = typeof req.query.schedule_start_datetime === 'string' ? String(req.query.schedule_start_datetime) : (playlistSlide && playlistSlide.schedule_start_datetime) || null;
-      const scheduleEndDatetime = typeof req.query.schedule_end_datetime === 'string' ? String(req.query.schedule_end_datetime) : (playlistSlide && playlistSlide.schedule_end_datetime) || null;
-      const scheduleStartTime = typeof req.query.schedule_start_time === 'string' ? String(req.query.schedule_start_time) : (playlistSlide && playlistSlide.schedule_start_time) || null;
-      const scheduleEndTime = typeof req.query.schedule_end_time === 'string' ? String(req.query.schedule_end_time) : (playlistSlide && playlistSlide.schedule_end_time) || null;
-      const scheduleDaysJson = typeof req.query.schedule_days_json === 'string' ? String(req.query.schedule_days_json) : (playlistSlide && playlistSlide.schedule_days_json) || '[]';
-      const scheduleDays = common.parseJsonSafe(scheduleDaysJson) || [];
-
-      playlistSlide = Object.assign({}, playlistSlide || {}, {
-        id: playlistSlide ? playlistSlide.id : 0,
-        schedule_mode: scheduleMode,
-        schedule_days_json: scheduleDaysJson,
-        schedule_days: scheduleDays,
-        schedule_start_datetime: scheduleStartDatetime,
-        schedule_end_datetime: scheduleEndDatetime,
-        schedule_start_time: scheduleStartTime,
-        schedule_end_time: scheduleEndTime
-      });
-      return res.send(pages.renderPlaylistSlideConfigPage(playlist, playlistSlide, req.query.message ? String(req.query.message) : '', req.query.row_key ? String(req.query.row_key) : '', req.currentUser));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id/slides/:playlistSlideId/config', requirePermission('playlists.update'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      const rowKey = String(req.body.row_key || '').trim();
-      if (rowKey) {
-        return res.status(400).send('Schedule changes from the playlist editor are staged until you click Save changes.');
-      }
-      const playlistSlideId = Number(req.params.playlistSlideId);
-      let scheduleMode = normalizeScheduleMode(req.body.schedule_mode);
-      let scheduleStartDatetime = null;
-      let scheduleEndDatetime = null;
-      let scheduleStartTime = null;
-      let scheduleEndTime = null;
-      let scheduleDaysJson = null;
-
-      const hasDateRange = Boolean(req.body.schedule_start_datetime && req.body.schedule_end_datetime);
-      const hasTimeRange = Boolean(req.body.schedule_start_time && req.body.schedule_end_time);
-      const hasSelectedDays = Boolean(readArrayField(req.body, ['schedule_days', 'schedule_days[]']).length);
-
-      if (scheduleMode === 'dates' && !hasDateRange) {
-        scheduleMode = 'always';
-      } else if (scheduleMode === 'times' && (!hasTimeRange || !hasSelectedDays)) {
-        scheduleMode = 'always';
-      }
-
-      if (scheduleMode === 'dates') {
-        scheduleStartDatetime = parseDateTimeLocal(req.body.schedule_start_datetime);
-        scheduleEndDatetime = parseDateTimeLocal(req.body.schedule_end_datetime);
-        if (!scheduleStartDatetime || !scheduleEndDatetime) {
-          scheduleMode = 'always';
-          scheduleStartDatetime = null;
-          scheduleEndDatetime = null;
-        } else if (scheduleEndDatetime < scheduleStartDatetime) {
-          return res.status(400).send('End datetime must be after start datetime.');
-        }
-      } else if (scheduleMode === 'times') {
-        scheduleStartTime = parseTimeLocal(req.body.schedule_start_time);
-        scheduleEndTime = parseTimeLocal(req.body.schedule_end_time);
-        const scheduleDays = readArrayField(req.body, ['schedule_days', 'schedule_days[]']).map(function (value) {
-          return Number(value);
-        }).filter(function (value) {
-          return Number.isInteger(value) && value >= 0 && value <= 6;
-        });
-        if (!scheduleStartTime || !scheduleEndTime) {
-          scheduleMode = 'always';
-          scheduleStartTime = null;
-          scheduleEndTime = null;
-          scheduleDaysJson = null;
-        } else if (!scheduleDays.length) {
-          scheduleMode = 'always';
-          scheduleStartTime = null;
-          scheduleEndTime = null;
-          scheduleDaysJson = null;
-        } else {
-          if (scheduleEndTime < scheduleStartTime) {
-            return res.status(400).send('End time must be after start time.');
-          }
-          scheduleDaysJson = JSON.stringify(Array.from(new Set(scheduleDays)).sort());
-        }
-      }
-
-      const actorId = getAuditUserId(req);
-      const [result] = await pool.query(
-        'UPDATE c_playlist_slides SET schedule_mode = ?, schedule_start_datetime = ?, schedule_end_datetime = ?, schedule_start_time = ?, schedule_end_time = ?, schedule_days_json = ?, modified_by = ? WHERE id = ? AND playlist_id = ?',
-        [scheduleMode, scheduleStartDatetime, scheduleEndDatetime, scheduleStartTime, scheduleEndTime, scheduleDaysJson, actorId, playlistSlideId, playlist.id]
-      );
-      if (!result.affectedRows) {
-        return res.status(404).send('Playlist slide not found');
-      }
-      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
-      await broadcastDashboardState();
-      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide timings updated.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/playlists/:id/slides/:playlistSlideId/delete', requirePermission('playlists.update'), async function (req, res, next) {
-    try {
-      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
-      if (!playlist) {
-        return res.status(404).send('Playlist not found');
-      }
-      await pool.query('DELETE FROM c_playlist_slides WHERE id = ? AND playlist_id = ?', [Number(req.params.playlistSlideId), playlist.id]);
-      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
-      await broadcastDashboardState();
-      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide removed.'));
-    } catch (error) {
-      next(error);
-    }
-  });
-
   app.get('/screens/new', requirePermission('screens.create'), async function (req, res, next) {
     try {
       const data = await common.fetchScreenEditData(pool);

src/web/routes/admin/playlists.js

@@ -0,0 +1,642 @@
+// Playlist admin routes and playlist-slide management.
+
+module.exports = function registerPlaylistRoutes(app, deps) {
+  const pool = deps.pool;
+  const common = deps.common;
+  const pages = deps.pages;
+  const fetchOrderedPlaylistSlides = deps.fetchOrderedPlaylistSlides;
+  const fetchScreensByPlaylistId = deps.fetchScreensByPlaylistId;
+  const fetchPlaylistCanvasId = deps.fetchPlaylistCanvasId;
+  const readArrayField = deps.readArrayField;
+  const getAuditUserId = deps.getAuditUserId;
+  const redirectAfterSave = deps.redirectAfterSave;
+  const notifyPlayerScreens = deps.notifyPlayerScreens;
+  const broadcastDashboardState = deps.broadcastDashboardState;
+  const getPlaylistDeleteBlockMessage = deps.getPlaylistDeleteBlockMessage;
+  const requirePermission = deps.requirePermission;
+
+  function readRawFieldArray(reqBody, keys) {
+    const searchKeys = Array.isArray(keys) ? keys : [keys];
+    for (let index = 0; index < searchKeys.length; index += 1) {
+      const key = searchKeys[index];
+      if (!reqBody || !Object.prototype.hasOwnProperty.call(reqBody, key)) {
+        continue;
+      }
+      const value = reqBody[key];
+      if (Array.isArray(value)) {
+        return value.map(function (item) {
+          return item === undefined || item === null ? '' : String(item);
+        });
+      }
+      return [value === undefined || value === null ? '' : String(value)];
+    }
+    return [];
+  }
+
+  function normalizeScheduleRuleValuesFromBody(reqBody, index) {
+    const startDatetimeValues = readRawFieldArray(reqBody, ['schedule_rule_start_datetime[]', 'schedule_rule_start_datetime']);
+    const endDatetimeValues = readRawFieldArray(reqBody, ['schedule_rule_end_datetime[]', 'schedule_rule_end_datetime']);
+    const startTimeValues = readRawFieldArray(reqBody, ['schedule_rule_start_time[]', 'schedule_rule_start_time']);
+    const endTimeValues = readRawFieldArray(reqBody, ['schedule_rule_end_time[]', 'schedule_rule_end_time']);
+    const daysCsvValues = readRawFieldArray(reqBody, ['schedule_rule_days_csv[]', 'schedule_rule_days_csv']);
+
+    const startDatetime = String(startDatetimeValues[index] || '').trim() || null;
+    const endDatetime = String(endDatetimeValues[index] || '').trim() || null;
+    const startTime = String(startTimeValues[index] || '').trim() || null;
+    const endTime = String(endTimeValues[index] || '').trim() || null;
+    const daysCsv = String(daysCsvValues[index] || '').trim();
+    const days = daysCsv
+      ? Array.from(new Set(daysCsv.split(',').map(function (value) { return Number(value); }).filter(function (day) {
+          return Number.isInteger(day) && day >= 0 && day <= 6;
+        }))).sort(function (left, right) { return left - right; })
+      : [];
+
+    return {
+      start_datetime: startDatetime,
+      end_datetime: endDatetime,
+      start_time: startTime,
+      end_time: endTime,
+      schedule_days_json: days.length ? JSON.stringify(days) : null
+    };
+  }
+
+  function buildScheduleRulesFromRequestBody(reqBody) {
+    const rowKeys = readRawFieldArray(reqBody, ['schedule_rule_row_key[]', 'schedule_rule_row_key']);
+    const positions = readRawFieldArray(reqBody, ['schedule_rule_position[]', 'schedule_rule_position']);
+    const startDatetimeValues = readRawFieldArray(reqBody, ['schedule_rule_start_datetime[]', 'schedule_rule_start_datetime']);
+    const endDatetimeValues = readRawFieldArray(reqBody, ['schedule_rule_end_datetime[]', 'schedule_rule_end_datetime']);
+    const startTimeValues = readRawFieldArray(reqBody, ['schedule_rule_start_time[]', 'schedule_rule_start_time']);
+    const endTimeValues = readRawFieldArray(reqBody, ['schedule_rule_end_time[]', 'schedule_rule_end_time']);
+    const daysCsvValues = readRawFieldArray(reqBody, ['schedule_rule_days_csv[]', 'schedule_rule_days_csv']);
+
+    const lengths = [rowKeys.length, positions.length, startDatetimeValues.length, endDatetimeValues.length, startTimeValues.length, endTimeValues.length, daysCsvValues.length]
+      .filter(function (value) { return value > 0; });
+    if (lengths.length && lengths.some(function (length) { return length !== lengths[0]; })) {
+      return null;
+    }
+
+    return rowKeys.map(function (rowKey, index) {
+      const rule = normalizeScheduleRuleValuesFromBody(reqBody, index);
+      if (!rule.start_datetime && !rule.end_datetime && !rule.start_time && !rule.end_time && !rule.schedule_days_json) {
+        return null;
+      }
+      return {
+        rowKey: String(rowKey || '').trim(),
+        position: Number(positions[index] || index) || 0,
+        startDatetime: rule.start_datetime,
+        endDatetime: rule.end_datetime,
+        startTime: rule.start_time,
+        endTime: rule.end_time,
+        daysJson: rule.schedule_days_json
+      };
+    }).filter(Boolean);
+  }
+
+  async function replacePlaylistSlideScheduleRules(connection, playlistSlideId, scheduleRules, actorId) {
+    await connection.query('DELETE FROM c_playlist_slide_schedule_rules WHERE playlist_slide_id = ?', [playlistSlideId]);
+    for (let index = 0; index < scheduleRules.length; index += 1) {
+      const rule = scheduleRules[index];
+      await connection.query(
+        'INSERT INTO c_playlist_slide_schedule_rules (playlist_slide_id, position, start_datetime, end_datetime, start_time, end_time, schedule_days_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
+        [playlistSlideId, rule.position || index, rule.startDatetime, rule.endDatetime, rule.startTime, rule.endTime, rule.daysJson, actorId, actorId]
+      );
+    }
+  }
+
+  function createValidationError(message) {
+    const error = new Error(message);
+    error.statusCode = 400;
+    return error;
+  }
+
+  async function savePlaylistItems(connection, playlist, reqBody, actorId, options) {
+    const shouldUpdatePlaylist = !options || options.updatePlaylist !== false;
+    const name = String(reqBody.name || '').trim();
+    const fadeBetweenSlides = reqBody.fade_between_slides ? 1 : 0;
+    const skipUnavailableRtmp = reqBody.skip_unavailable_rtmp ? 1 : 0;
+    const canvasSizeId = Number(reqBody.canvas_size_id);
+    let requestedCanvasId = null;
+
+    if (!name) {
+      throw createValidationError('Playlist name is required.');
+    }
+
+    if (shouldUpdatePlaylist && reqBody.canvas_size_id !== undefined && reqBody.canvas_size_id !== null && String(reqBody.canvas_size_id).trim() !== '') {
+      if (!Number.isInteger(canvasSizeId) || canvasSizeId <= 0) {
+        throw createValidationError('Canvas size is invalid.');
+      }
+      const canvasSize = await common.fetchCanvasSizeById(connection, canvasSizeId);
+      if (!canvasSize) {
+        throw createValidationError('Canvas size not found.');
+      }
+      requestedCanvasId = Number(canvasSize.id);
+      if (Number.isInteger(Number(playlist.canvas_id)) && Number(playlist.canvas_id) > 0 && Number(playlist.canvas_id) !== requestedCanvasId) {
+        throw new Error('Canvas size cannot be changed after the playlist is created.');
+      }
+    }
+
+    const affectedScreens = await fetchScreensByPlaylistId(connection, playlist.id);
+
+    const slideIds = readArrayField(reqBody, ['slide_id[]', 'slide_id']);
+    const rowKeys = readRawFieldArray(reqBody, ['row_key[]', 'row_key']);
+    const durations = readArrayField(reqBody, ['duration_seconds[]', 'duration_seconds']);
+    const useVideoDurations = readArrayField(reqBody, ['use_video_duration[]', 'use_video_duration']);
+    const disableAudios = readArrayField(reqBody, ['disable_audio[]', 'disable_audio']);
+    const scheduleRules = buildScheduleRulesFromRequestBody(reqBody);
+
+    if (durations.length && durations.length !== slideIds.length) {
+      throw createValidationError('Playlist slide data is invalid.');
+    }
+    if (useVideoDurations.length && useVideoDurations.length !== slideIds.length) {
+      throw createValidationError('Playlist slide data is invalid.');
+    }
+    if (disableAudios.length && disableAudios.length !== slideIds.length) {
+      throw createValidationError('Playlist slide data is invalid.');
+    }
+    if (rowKeys.length && rowKeys.length !== slideIds.length) {
+      throw createValidationError('Playlist slide data is invalid.');
+    }
+
+    const scheduleRulesByRowKey = new Map();
+    if (scheduleRules === null) {
+      throw createValidationError('Playlist schedule data is invalid.');
+    }
+    scheduleRules.forEach(function (rule) {
+      const rowKey = String(rule.rowKey || '').trim();
+      if (!scheduleRulesByRowKey.has(rowKey)) {
+        scheduleRulesByRowKey.set(rowKey, []);
+      }
+      scheduleRulesByRowKey.get(rowKey).push(rule);
+    });
+
+    const normalizedSlides = [];
+    const seenSlideIds = new Set();
+    for (let i = 0; i < slideIds.length; i += 1) {
+      const slideId = Number(slideIds[i]);
+      if (!Number.isInteger(slideId) || slideId <= 0) {
+        throw createValidationError('Invalid slide selection.');
+      }
+      if (seenSlideIds.has(slideId)) {
+        throw createValidationError('A slide can only be added to a playlist once.');
+      }
+      seenSlideIds.add(slideId);
+
+      const durationRaw = Number(durations[i]);
+      const durationSeconds = Number.isFinite(durationRaw) ? Math.max(0.001, Math.round(durationRaw * 1000) / 1000) : 10;
+      const useVideoDuration = String(useVideoDurations[i] || '') === '1' ? 1 : 0;
+      const disableAudio = String(disableAudios[i] || '') !== '0' ? 1 : 0;
+      const rowKey = String(rowKeys[i] || '').trim();
+      const playlistScheduleRules = scheduleRulesByRowKey.get(rowKey) || [];
+      for (const rule of playlistScheduleRules) {
+        if (rule.start_datetime && rule.end_datetime && new Date(rule.end_datetime) < new Date(rule.start_datetime)) {
+          throw createValidationError('End datetime must be after start datetime.');
+        }
+        if (rule.start_time && rule.end_time && rule.end_time < rule.start_time) {
+          throw createValidationError('End time must be after start time.');
+        }
+      }
+
+      normalizedSlides.push({
+        slideId,
+        rowKey,
+        position: i,
+        durationSeconds,
+        useVideoDuration,
+        disableAudio,
+        scheduleRules: playlistScheduleRules
+      });
+    }
+
+    let selectedCanvasId = null;
+    if (normalizedSlides.length) {
+      const [slides] = await connection.query(
+        `SELECT sl.id, st.canvas_size_id AS canvas_size_id
+         FROM c_slides sl
+         LEFT JOIN c_templates st ON st.id = sl.template_id
+         WHERE sl.id IN (?)`,
+        [normalizedSlides.map(function (item) { return item.slideId; })]
+      );
+      if (slides.length !== normalizedSlides.length) {
+        throw createValidationError('One or more selected slides no longer exist.');
+      }
+      const signatures = Array.from(new Set(
+        slides
+          .map(function (slide) { return Number(slide.canvas_size_id); })
+          .filter(function (value) { return Number.isInteger(value) && value > 0; })
+      ));
+      selectedCanvasId = signatures.length === 1 ? signatures[0] : null;
+      if (signatures.length > 1) {
+        throw createValidationError('All playlist slides must share the same canvas size.');
+      }
+      if (Number.isInteger(Number(playlist.canvas_id)) && Number(playlist.canvas_id) > 0 && selectedCanvasId && Number(playlist.canvas_id) !== selectedCanvasId) {
+        throw createValidationError('All playlist slides must match the playlist canvas size.');
+      }
+    }
+
+    const nextCanvasId = Number.isInteger(Number(playlist.canvas_id)) && Number(playlist.canvas_id) > 0
+      ? Number(playlist.canvas_id)
+      : requestedCanvasId || selectedCanvasId || null;
+
+    if (shouldUpdatePlaylist) {
+      await connection.query('UPDATE c_playlists SET name = ?, fade_between_slides = ?, skip_unavailable_rtmp = ?, canvas_id = ?, modified_by = ? WHERE id = ?', [name, fadeBetweenSlides, skipUnavailableRtmp, nextCanvasId, actorId, playlist.id]);
+    }
+
+    await connection.query('DELETE FROM c_playlist_slides WHERE playlist_id = ?', [playlist.id]);
+    for (let i = 0; i < normalizedSlides.length; i += 1) {
+      const item = normalizedSlides[i];
+      const [insertResult] = await connection.query(
+        'INSERT INTO c_playlist_slides (playlist_id, slide_id, position, duration_seconds, use_video_duration, disable_audio, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+        [playlist.id, item.slideId, item.position, item.durationSeconds, item.useVideoDuration, item.disableAudio, actorId, actorId]
+      );
+      const insertedPlaylistSlideId = Number(insertResult.insertId);
+      const itemRules = Array.isArray(item.scheduleRules) ? item.scheduleRules : [];
+      for (let ruleIndex = 0; ruleIndex < itemRules.length; ruleIndex += 1) {
+        const rule = itemRules[ruleIndex];
+        await connection.query(
+          'INSERT INTO c_playlist_slide_schedule_rules (playlist_slide_id, position, start_datetime, end_datetime, start_time, end_time, schedule_days_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          [insertedPlaylistSlideId, rule.position || ruleIndex, rule.startDatetime || null, rule.endDatetime || null, rule.startTime || null, rule.endTime || null, rule.daysJson || null, actorId, actorId]
+        );
+      }
+    }
+
+    return {
+      affectedScreens: affectedScreens,
+      nextCanvasId: nextCanvasId,
+      selectedCanvasId: selectedCanvasId
+    };
+  }
+
+  app.post('/playlists', requirePermission('playlists.create'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const name = String(req.body.name || '').trim();
+      const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
+      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
+      const canvasSizeId = Number(req.body.canvas_size_id);
+      if (!name) {
+        return res.status(400).send('Playlist name is required.');
+      }
+      if (!Number.isInteger(canvasSizeId) || canvasSizeId <= 0) {
+        return res.status(400).send('Canvas size is required.');
+      }
+      if (await common.fetchDuplicateName(pool, 'c_playlists', name)) {
+        return res.status(400).send('A playlist with that name already exists.');
+      }
+      const canvasSize = await common.fetchCanvasSizeById(pool, canvasSizeId);
+      if (!canvasSize) {
+        return res.status(400).send('Canvas size not found.');
+      }
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      const [result] = await connection.query('INSERT INTO c_playlists (name, fade_between_slides, skip_unavailable_rtmp, canvas_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)', [name, fadeBetweenSlides, skipUnavailableRtmp, canvasSize.id, actorId, actorId]);
+      const playlist = {
+        id: Number(result.insertId),
+        canvas_id: Number(canvasSize.id)
+      };
+      await savePlaylistItems(connection, playlist, req.body, actorId, { updatePlaylist: false });
+      await connection.commit();
+      redirectAfterSave(req, res, '/playlists?edit=' + result.insertId, {
+        closeUrl: '/playlists',
+        newUrl: '/playlists/new',
+        message: 'Playlist created.'
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      if (error && error.statusCode === 400) {
+        return res.status(400).send(error.message || 'Playlist data is invalid.');
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/playlists/:id', requirePermission('playlists.update'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const name = String(req.body.name || '').trim();
+      const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
+      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
+      const canvasSizeId = Number(req.body.canvas_size_id);
+      const actorId = getAuditUserId(req);
+      let requestedCanvasId = null;
+      if (!name) {
+        return res.status(400).send('Playlist name is required.');
+      }
+      const playlist = await common.fetchPlaylistById(connection, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      if (await common.fetchDuplicateName(pool, 'c_playlists', name, playlist.id)) {
+        return res.status(400).send('A playlist with that name already exists.');
+      }
+      if (req.body.canvas_size_id !== undefined && req.body.canvas_size_id !== null && String(req.body.canvas_size_id).trim() !== '') {
+        if (!Number.isInteger(canvasSizeId) || canvasSizeId <= 0) {
+          return res.status(400).send('Canvas size is invalid.');
+        }
+        const canvasSize = await common.fetchCanvasSizeById(connection, canvasSizeId);
+        if (!canvasSize) {
+          return res.status(400).send('Canvas size not found.');
+        }
+        requestedCanvasId = Number(canvasSize.id);
+        if (Number.isInteger(Number(playlist.canvas_id)) && Number(playlist.canvas_id) > 0 && Number(playlist.canvas_id) !== requestedCanvasId) {
+          return res.status(400).send('Canvas size cannot be changed after the playlist is created.');
+        }
+      }
+
+      const saveResult = await savePlaylistItems(connection, playlist, req.body, actorId, { updatePlaylist: true });
+      await connection.commit();
+      await notifyPlayerScreens(saveResult.affectedScreens, 'refresh');
+      await broadcastDashboardState();
+      redirectAfterSave(req, res, '/playlists?edit=' + playlist.id, {
+        closeUrl: '/playlists',
+        newUrl: '/playlists/new',
+        message: 'Playlist updated.'
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      if (error && error.statusCode === 400) {
+        return res.status(400).send(error.message || 'Playlist data is invalid.');
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/playlists/:id/delete', requirePermission('playlists.delete'), async function (req, res, next) {
+    try {
+      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const blockMessage = await getPlaylistDeleteBlockMessage(pool, playlist);
+      if (blockMessage) {
+        return res.redirect('/playlists?message=' + encodeURIComponent(blockMessage));
+      }
+      await pool.query('DELETE FROM c_playlists WHERE id = ?', [playlist.id]);
+      res.redirect('/playlists?message=' + encodeURIComponent('Playlist deleted.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/playlists/:id/slides', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const slideId = Number(req.body.slide_id);
+      if (!slideId) {
+        return res.status(400).send('Slide is required.');
+      }
+      const playlistCanvasId = await fetchPlaylistCanvasId(pool, playlist.id);
+      if (playlistCanvasId === 'mismatch') {
+        return res.status(400).send('This playlist already contains slides with different canvas sizes.');
+      }
+      const slide = await common.fetchSlideById(pool, slideId);
+      if (!slide) {
+        return res.status(404).send('Slide not found');
+      }
+      const slideCanvasId = Number(slide.canvas_size_id);
+      if (playlistCanvasId && slideCanvasId !== playlistCanvasId) {
+        return res.status(400).send('The slide canvas size must match the existing playlist items.');
+      }
+      const durationValue = Number(req.body.duration_seconds || 10);
+      const durationSeconds = Number.isFinite(durationValue) ? Math.max(0.001, Math.round(durationValue * 1000) / 1000) : 10;
+      const [positionRows] = await pool.query('SELECT COALESCE(MAX(position), -1) AS max_position FROM c_playlist_slides WHERE playlist_id = ?', [playlist.id]);
+      const nextPosition = Number(positionRows[0].max_position) + 1;
+      const actorId = getAuditUserId(req);
+      await pool.query('INSERT INTO c_playlist_slides (playlist_id, slide_id, position, duration_seconds, use_video_duration, disable_audio, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?)', [playlist.id, slideId, nextPosition, durationSeconds, 0, 1, actorId, actorId]);
+      if (!Number.isInteger(Number(playlist.canvas_id)) || Number(playlist.canvas_id) <= 0) {
+        await pool.query('UPDATE c_playlists SET canvas_id = ?, modified_by = ? WHERE id = ?', [slideCanvasId, actorId, playlist.id]);
+      }
+      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
+      await broadcastDashboardState();
+      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide added to playlist.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/playlists/:id/slides/:playlistSlideId', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const playlistSlideId = Number(req.params.playlistSlideId);
+      const durationValue = Number(req.body.duration_seconds || 10);
+      const durationSeconds = Number.isFinite(durationValue) ? Math.max(0.001, Math.round(durationValue * 1000) / 1000) : 10;
+      const [currentRows] = await pool.query('SELECT disable_audio FROM c_playlist_slides WHERE id = ? AND playlist_id = ?', [playlistSlideId, playlist.id]);
+      if (!currentRows.length) {
+        return res.status(404).send('Playlist slide not found');
+      }
+      const disableAudio = req.body.disable_audio === undefined ? (Number(currentRows[0].disable_audio) ? 1 : 0) : (String(req.body.disable_audio || '') === '0' ? 0 : 1);
+      const actorId = getAuditUserId(req);
+      const [result] = await pool.query(
+        'UPDATE c_playlist_slides SET duration_seconds = ?, disable_audio = ?, modified_by = ? WHERE id = ? AND playlist_id = ?',
+        [durationSeconds, disableAudio, actorId, playlistSlideId, playlist.id]
+      );
+      if (!result.affectedRows) {
+        return res.status(404).send('Playlist slide not found');
+      }
+      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
+      await broadcastDashboardState();
+      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide config updated.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/playlists/:id/slides/:playlistSlideId/move', requirePermission('playlists.update'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const playlist = await common.fetchPlaylistById(connection, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const playlistSlideId = Number(req.params.playlistSlideId);
+      const direction = String(req.body.direction || '').toLowerCase();
+      if (direction !== 'up' && direction !== 'down') {
+        return res.status(400).send('Invalid move direction.');
+      }
+
+      await connection.beginTransaction();
+      const orderedSlides = await fetchOrderedPlaylistSlides(connection, playlist.id);
+      const currentIndex = orderedSlides.findIndex(function (item) {
+        return Number(item.id) === playlistSlideId;
+      });
+      if (currentIndex === -1) {
+        await connection.rollback();
+        return res.status(404).send('Playlist slide not found');
+      }
+
+      const swapIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+      if (swapIndex < 0 || swapIndex >= orderedSlides.length) {
+        await connection.rollback();
+        return res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide is already at the ' + (direction === 'up' ? 'top' : 'bottom') + '.'));
+      }
+
+      const currentSlide = orderedSlides[currentIndex];
+      const swapSlide = orderedSlides[swapIndex];
+      const actorId = getAuditUserId(req);
+
+      await connection.query('UPDATE c_playlist_slides SET position = ?, modified_by = ? WHERE id = ? AND playlist_id = ?', [swapSlide.position, actorId, currentSlide.id, playlist.id]);
+      await connection.query('UPDATE c_playlist_slides SET position = ?, modified_by = ? WHERE id = ? AND playlist_id = ?', [currentSlide.position, actorId, swapSlide.id, playlist.id]);
+      await connection.commit();
+      await notifyPlayerScreens(await fetchScreensByPlaylistId(connection, playlist.id), 'refresh');
+      await broadcastDashboardState();
+      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide order updated.'));
+    } catch (error) {
+      await connection.rollback();
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.get('/playlists/new/slides/:playlistSlideId/config', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const hasQueryScheduleRules = Object.keys(req.query || {}).some(function (key) {
+        return String(key || '').indexOf('schedule_rule_') === 0;
+      });
+      const scheduleRules = hasQueryScheduleRules
+        ? (buildScheduleRulesFromRequestBody(req.query) || []).map(function (rule) {
+            let days = [];
+            try {
+              days = rule && rule.daysJson ? JSON.parse(rule.daysJson) : [];
+            } catch (_error) {
+              days = [];
+            }
+
+            return {
+              start_datetime: rule.startDatetime,
+              end_datetime: rule.endDatetime,
+              start_time: rule.startTime,
+              end_time: rule.endTime,
+              days: Array.isArray(days) ? days : []
+            };
+          })
+        : [];
+
+      return res.send(pages.renderPlaylistSlideConfigPage({ id: null }, {
+        id: 0,
+        scheduleRules: scheduleRules
+      }, req.query.message ? String(req.query.message) : '', req.query.row_key ? String(req.query.row_key) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/playlists/:id/slides/:playlistSlideId/config', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const playlistId = Number(req.params.id);
+      if (!Number.isInteger(playlistId) || playlistId <= 0) {
+        return res.status(404).send('Playlist not found');
+      }
+
+      const playlist = await common.fetchPlaylistById(pool, playlistId);
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const data = await common.fetchAdminData(pool);
+      let playlistSlide = (data.playlistSlides || []).find(function (item) {
+        return item.id === Number(req.params.playlistSlideId) && item.playlist_id === playlist.id;
+      });
+      if (!playlistSlide && Number(req.params.playlistSlideId) !== 0) {
+        return res.status(404).send('Playlist slide not found');
+      }
+      const hasQueryScheduleRules = Object.keys(req.query || {}).some(function (key) {
+        return String(key || '').indexOf('schedule_rule_') === 0;
+      });
+      const scheduleRules = hasQueryScheduleRules
+        ? (buildScheduleRulesFromRequestBody(req.query) || []).map(function (rule) {
+            let days = [];
+            try {
+              days = rule && rule.daysJson ? JSON.parse(rule.daysJson) : [];
+            } catch (_error) {
+              days = [];
+            }
+
+            return {
+              start_datetime: rule.startDatetime,
+              end_datetime: rule.endDatetime,
+              start_time: rule.startTime,
+              end_time: rule.endTime,
+              days: Array.isArray(days) ? days : []
+            };
+          })
+        : (Array.isArray(playlistSlide && playlistSlide.scheduleRules) ? playlistSlide.scheduleRules : []);
+
+      playlistSlide = Object.assign({}, playlistSlide || {}, {
+        id: playlistSlide ? playlistSlide.id : 0,
+        scheduleRules: scheduleRules
+      });
+      return res.send(pages.renderPlaylistSlideConfigPage(playlist, playlistSlide, req.query.message ? String(req.query.message) : '', req.query.row_key ? String(req.query.row_key) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/playlists/:id/slides/:playlistSlideId/config', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      const playlistSlideId = Number(req.params.playlistSlideId);
+      const actorId = getAuditUserId(req);
+      const scheduleRules = buildScheduleRulesFromRequestBody(req.body);
+      if (scheduleRules === null) {
+        return res.status(400).send('Schedule rules are invalid.');
+      }
+      for (const rule of scheduleRules) {
+        if (rule.start_datetime && rule.end_datetime && new Date(rule.end_datetime) < new Date(rule.start_datetime)) {
+          return res.status(400).send('End datetime must be after start datetime.');
+        }
+        if (rule.start_time && rule.end_time && rule.end_time < rule.start_time) {
+          return res.status(400).send('End time must be after start time.');
+        }
+      }
+
+      const [result] = await pool.query(
+        'UPDATE c_playlist_slides SET modified_by = ? WHERE id = ? AND playlist_id = ?',
+        [actorId, playlistSlideId, playlist.id]
+      );
+      if (!result.affectedRows) {
+        return res.status(404).send('Playlist slide not found');
+      }
+      await replacePlaylistSlideScheduleRules(pool, playlistSlideId, scheduleRules, actorId);
+      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
+      await broadcastDashboardState();
+      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide timings updated.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/playlists/:id/slides/:playlistSlideId/delete', requirePermission('playlists.update'), async function (req, res, next) {
+    try {
+      const playlist = await common.fetchPlaylistById(pool, Number(req.params.id));
+      if (!playlist) {
+        return res.status(404).send('Playlist not found');
+      }
+      await pool.query('DELETE FROM c_playlist_slides WHERE id = ? AND playlist_id = ?', [Number(req.params.playlistSlideId), playlist.id]);
+      await notifyPlayerScreens(await fetchScreensByPlaylistId(pool, playlist.id), 'refresh');
+      await broadcastDashboardState();
+      res.redirect('/playlists?edit=' + playlist.id + '&message=' + encodeURIComponent('Slide removed.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+};

src/web/routes/admin/rbac.js

@@ -129,14 +129,19 @@
 		return groups;
 	}
 
-	async function buildRoleCreateViewModel(formValues, selectedPermissionKeys) {
+	async function buildRoleCreateViewModel(formValues, selectedPermissionKeys, selectedUserIds, page, search, sort, direction, currentUserId) {
 		const permissionRows = await rbacData.fetchPermissions(pool);
+		const data = await rbacData.fetchUsersWithRolesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction, {
+			excludeUserId: currentUserId
+		});
 		return {
 			formValues: {
 				name: String(formValues && formValues.name || '').trim(),
 				description: String(formValues && formValues.description || '').trim()
 			},
-			permissionGroups: buildPermissionGroups(mapPermissionsForView(permissionRows, selectedPermissionKeys))
+			permissionGroups: buildPermissionGroups(mapPermissionsForView(permissionRows, selectedPermissionKeys)),
+			users: mapUsersForView(data.users, selectedUserIds),
+			pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'users', 'User pages')
 		};
 	}
 
@@ -177,11 +182,16 @@
 	});
 
 	app.get('/rbac/new', requirePermission('rbac.create'), function (req, res, next) {
+		const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+		const search = common.getSearchQuery(req);
+		const sort = common.getSortQuery(req);
+		const direction = common.getSortDirectionQuery(req);
+		const currentUserId = req.currentUser ? Number(req.currentUser.id) : null;
 		buildRoleCreateViewModel({
 			name: String(req.query.name || '').trim(),
 			description: String(req.query.description || '').trim()
-		}, []).then(function (viewModel) {
-			res.send(pages.renderRbacAddPage(req.query.message ? String(req.query.message) : '', req.currentUser, viewModel.formValues, viewModel.permissionGroups, 'primary'));
+		}, [], [], page, search, sort, direction, currentUserId).then(function (viewModel) {
+			res.send(pages.renderRbacAddPage(req.query.message ? String(req.query.message) : '', req.currentUser, viewModel.formValues, viewModel.permissionGroups, viewModel.users, viewModel.pagination, 'primary'));
 		}).catch(function (error) {
 			next(error);
 		});
@@ -191,6 +201,10 @@
 		try {
 			const name = String(req.body.name || '').trim();
 			const description = String(req.body.description || '').trim();
+			const selectedUserIds = Object.prototype.hasOwnProperty.call(req.body || {}, 'users_present')
+				? readArrayField(req.body, ['user_ids[]', 'user_ids'])
+				: [];
+			const normalizedUserIds = normalizeSelectedIds(selectedUserIds);
 			const selectedPermissionKeys = normalizePermissionKeys(Array.isArray(req.body['permission_keys[]'])
 				? req.body['permission_keys[]']
 				: req.body.permission_keys
@@ -199,18 +213,33 @@
 			const validPermissionKeys = new Set(permissions.map(function (permission) {
 				return String(permission.key || '').trim();
 			}));
-			const createViewModel = await buildRoleCreateViewModel({ name: name, description: description }, selectedPermissionKeys);
+			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const currentUserId = req.currentUser ? Number(req.currentUser.id) : null;
+			const createViewModel = await buildRoleCreateViewModel({ name: name, description: description }, selectedPermissionKeys, selectedUserIds, page, search, sort, direction, currentUserId);
 			if (!name) {
-				return res.status(400).send(pages.renderRbacAddPage('Role name is required.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, 'warning'));
+				return res.status(400).send(pages.renderRbacAddPage('Role name is required.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, createViewModel.users, createViewModel.pagination, 'warning'));
 			}
 			if (await common.fetchDuplicateName(pool, 'a_roles', name)) {
-				return res.status(400).send(pages.renderRbacAddPage('A role with that name already exists.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, 'warning'));
+				return res.status(400).send(pages.renderRbacAddPage('A role with that name already exists.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, createViewModel.users, createViewModel.pagination, 'warning'));
 			}
 
 			if (selectedPermissionKeys.some(function (permissionKey) {
 				return !validPermissionKeys.has(permissionKey);
 			})) {
-				return res.status(400).send(pages.renderRbacAddPage('One or more selected permissions are invalid.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, 'warning'));
+				return res.status(400).send(pages.renderRbacAddPage('One or more selected permissions are invalid.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, createViewModel.users, createViewModel.pagination, 'warning'));
+			}
+
+			const availableUsers = await rbacData.fetchUsersWithRoles(pool);
+			const availableUserIds = new Set(availableUsers.map(function (user) {
+				return Number(user.id);
+			}));
+			if (normalizedUserIds.some(function (userId) {
+				return !availableUserIds.has(userId);
+			})) {
+				return res.status(400).send(pages.renderRbacAddPage('One or more selected users are invalid.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, createViewModel.users, createViewModel.pagination, 'warning'));
 			}
 
 			const roleKey = await createUniqueRoleKey(name);
@@ -227,6 +256,7 @@
 				if (selectedPermissionKeys.length) {
 					await rbacData.syncRolePermissions(connection, insertedRoleId, selectedPermissionKeys);
 				}
+				await rbacData.syncRoleUsers(connection, insertedRoleId, normalizedUserIds);
 				await connection.commit();
 			} catch (error) {
 				await connection.rollback();

src/web/routes/admin/users.js

@@ -123,7 +123,7 @@
 		const connection = await pool.getConnection();
 		try {
 			const name = String(req.body.name || '').trim();
-			const username = String(req.body.username || '').trim();
+			const username = String(req.body.username || user.username || '').trim();
 			const password = String(req.body.password || '');
 			const confirmPassword = String(req.body.confirm_password || '');
 			const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']);
@@ -171,7 +171,7 @@
 			);
 			await rbacData.syncUserRoles(connection, result.insertId, roleCheck.roleIds);
 			await connection.commit();
-			res.redirect('/users?message=' + encodeURIComponent('User created.'));
+			res.redirect('/users/' + result.insertId + '/edit?message=' + encodeURIComponent('User created.'));
 		} catch (error) {
 			try {
 				await connection.rollback();
@@ -213,46 +213,93 @@
 	});
 
 	app.post('/users/:id/username', requirePermission('users.update'), async function (req, res, next) {
+		const connection = await pool.getConnection();
 		try {
 			const userId = Number(req.params.id);
 			const name = String(req.body.name || '').trim();
+			const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']);
+			const password = String(req.body.password || '');
+			const confirmPassword = String(req.body.confirm_password || '');
+			const shouldUpdatePassword = Boolean(password || confirmPassword);
 
 			if (!Number.isInteger(userId) || userId <= 0) {
 				return res.status(400).send('Invalid user.');
 			}
-			if (!name) {
-				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('Name is required.'));
-			}
 			if (Number(req.currentUser.id) === userId) {
-				return res.redirect('/account?message=' + encodeURIComponent('Use My Account to update your own username or password.'));
+				return res.redirect('/account?message=' + encodeURIComponent('Use My Account to update your own login details.'));
 			}
 
-			const [userRows] = await pool.query('SELECT id, username FROM a_users WHERE id = ? LIMIT 1', [userId]);
-			if (!userRows.length) {
+			const user = await rbacData.fetchUserWithRoles(pool, userId);
+			if (!user) {
 				return res.status(404).send('User not found.');
 			}
 
-			const username = String(req.body.username || userRows[0].username || '').trim();
-			if (!username) {
-				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('Username is required.'));
+			const username = String(req.body.username || user.username || '').trim();
+
+			const [countRows] = await pool.query('SELECT COUNT(*) AS user_count FROM a_users');
+			const canDelete = !countRows.length || Number(countRows[0].user_count) > 1;
+
+			const roleCheck = await validateRoleIds(selectedRoleIds);
+			async function renderValidationError(message) {
+				const roles = await fetchRoleOptions();
+				return res.status(400).send(pages.renderUsersEditPage(Object.assign({}, user, {
+					name: name || user.name,
+					username: username || user.username,
+					roleIds: selectedRoleIds,
+					inUse: !canDelete
+				}), message, req.currentUser, mapRolesForForm(roles, selectedRoleIds)));
 			}
 
+			if (!name) {
+				return renderValidationError('Name is required.');
+			}
+			if (!username) {
+				return renderValidationError('Username is required.');
+			}
+			if (shouldUpdatePassword && (!password || password.length < 8)) {
+				return renderValidationError('Password must be at least 8 characters.');
+			}
+			if (shouldUpdatePassword && password !== confirmPassword) {
+				return renderValidationError('Passwords do not match.');
+			}
+			if (!roleCheck.ok) {
+				return renderValidationError(roleCheck.message);
+			}
 			if (await common.fetchDuplicateName(pool, 'a_users', name, userId)) {
-				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('That name already exists.'));
+				return renderValidationError('That name already exists.');
 			}
 
 			const [existingRows] = await pool.query('SELECT id FROM a_users WHERE username = ? AND id <> ? LIMIT 1', [username, userId]);
 			if (existingRows.length) {
-				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('That username already exists.'));
+				return renderValidationError('That username already exists.');
 			}
 
-			const [result] = await pool.query('UPDATE a_users SET name = ?, username = ?, modified_by = ? WHERE id = ?', [name, username, getAuditUserId(req), userId]);
+			await connection.beginTransaction();
+			const [result] = await connection.query('UPDATE a_users SET name = ?, username = ?, modified_by = ? WHERE id = ?', [name, username, getAuditUserId(req), userId]);
 			if (!result.affectedRows) {
+				await connection.rollback();
 				return res.status(404).send('User not found.');
 			}
+			await rbacData.syncUserRoles(connection, userId, roleCheck.roleIds);
+			if (shouldUpdatePassword) {
+				const passwordRecord = hashPassword(password);
+				await connection.query(
+					'UPDATE a_users SET password_hash = ?, password_salt = ?, password_iterations = ?, modified_by = ? WHERE id = ?',
+					[passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, getAuditUserId(req), userId]
+				);
+				await connection.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]);
+			}
+			await connection.commit();
 			res.redirect('/users?message=' + encodeURIComponent('User updated.'));
 		} catch (error) {
+			try {
+				await connection.rollback();
+			} catch (_rollbackError) {
+				// Ignore rollback failures and surface the original error.
+			}
 			next(error);
+		} finally {
+			connection.release();
 		}
 	});
 

src/web/routes/auth/login.js

@@ -7,6 +7,7 @@ module.exports = function renderLoginPage(message) {
     title: 'Sign in',
     authShell: true,
     bodyClass: 'login-page-body',
-    message: message || ''
+    message: message || '',
+    messageVariant: 'warning'
   });
 };

src/web/routes/data-sources/api-sources/add.js

@@ -1,41 +1,8 @@
-// API source add page renderer and form defaults.
+// API source add page renderer.
 
 const { renderView } = require('../../../view');
+const { buildApiSourceFormViewModel } = require('./form-view-model');
 
-function buildDefaultApiSource() {
-  return {
-    id: null,
-    name: '',
-    apiUrl: '',
-    authMethod: 'none',
-    authUsername: '',
-    authPassword: '',
-    authBearerToken: '',
-    authHeaderName: 'X-API-Key',
-    authHeaderValue: '',
-    itemsPath: '',
-    updateIntervalValue: 60,
-    updateIntervalUnit: 'minutes',
-    lastPulledAt: null,
-    lastPullError: '',
-    lastResponseStatus: null,
-    lastResponseContentType: '',
-    lastResponseJson: ''
-  };
-}
-
-module.exports = function renderApiSourceFormPage(apiSource, mode, message, currentUser) {
-  const isEdit = mode === 'edit';
-  const viewApiSource = Object.assign(buildDefaultApiSource(), apiSource || {});
-
-  return renderView(isEdit ? 'data-sources/api-sources/edit' : 'data-sources/api-sources/add', {
-    title: isEdit ? 'Edit API source' : 'Add API source',
-    active: 'api-sources',
-    message: message,
-    currentUser: currentUser || null,
-    apiSource: viewApiSource,
-    inUse: Boolean(viewApiSource.inUse),
-    lastResponseJson: viewApiSource.lastResponseJson || '',
-    lastPullError: viewApiSource.lastPullError || ''
-  });
+module.exports = function renderApiSourceAddPage(apiSource, message, currentUser, options) {
+  return renderView('data-sources/api-sources/form', buildApiSourceFormViewModel(apiSource, message, currentUser, options, false));
 };

src/web/routes/data-sources/api-sources/edit.js

@@ -1,6 +1,7 @@
-// API source edit page renderer that reuses the add form.
+// API source edit page renderer.
 
-const renderApiSourceFormPage = require('./add');
+const { renderView } = require('../../../view');
+const { buildApiSourceFormViewModel } = require('./form-view-model');
 
 module.exports = function renderApiSourceEditPage(apiSource, data, message, currentUser) {
   const viewData = Object.assign({
@@ -8,7 +9,7 @@ module.exports = function renderApiSourceEditPage(apiSource, data, message, curr
     lastPullError: ''
   }, data || {});
 
-  return renderApiSourceFormPage(Object.assign({}, apiSource, {
+  return renderView('data-sources/api-sources/form', buildApiSourceFormViewModel(Object.assign({}, apiSource, {
     lastResponseJson: viewData.lastResponseJson,
     lastPullError: viewData.lastPullError,
     authMethod: apiSource.auth_method || 'none',
@@ -18,5 +19,5 @@ module.exports = function renderApiSourceEditPage(apiSource, data, message, curr
     authHeaderName: apiSource.auth_header_name || 'X-API-Key',
     authHeaderValue: apiSource.auth_header_value || '',
     itemsPath: apiSource.items_path || ''
-  }), 'edit', message, currentUser);
+  }), message, currentUser, viewData, true));
 };

src/web/routes/data-sources/api-sources/form-view-model.js

@@ -0,0 +1,50 @@
+// Shared API source form view-model builder.
+
+function buildDefaultApiSource() {
+  return {
+    id: null,
+    name: '',
+    apiUrl: '',
+    authMethod: 'none',
+    authUsername: '',
+    authPassword: '',
+    authBearerToken: '',
+    authHeaderName: 'X-API-Key',
+    authHeaderValue: '',
+    itemsPath: '',
+    updateIntervalValue: 60,
+    updateIntervalUnit: 'minutes',
+    lastPulledAt: null,
+    lastPullError: '',
+    lastResponseStatus: null,
+    lastResponseContentType: '',
+    lastResponseJson: ''
+  };
+}
+
+function buildApiSourceFormViewModel(apiSource, message, currentUser, options, isEdit) {
+  const viewApiSource = Object.assign(buildDefaultApiSource(), apiSource || {});
+  const viewOptions = options || {};
+
+  return {
+    title: isEdit ? 'Edit API source' : 'Add API source',
+    active: 'api-sources',
+    message: message,
+    currentUser: currentUser || null,
+    apiSource: viewApiSource,
+    inUse: Boolean(viewApiSource.inUse),
+    lastResponseJson: viewOptions.lastResponseJson || viewApiSource.lastResponseJson || '',
+    lastPullError: viewOptions.lastPullError || viewApiSource.lastPullError || '',
+    isEdit: Boolean(isEdit),
+    showSaveSecondaryActions: Boolean(isEdit),
+    deleteDisabled: !isEdit || Boolean(viewApiSource.inUse),
+    formAction: isEdit && viewApiSource.id ? '/data-sources/api-sources/' + viewApiSource.id : '/data-sources/api-sources',
+    formAttrs: isEdit && viewApiSource.id ? 'data-async-save data-async-save-refresh-target="#api-source-response-panel" data-async-save-refresh-state-url="/data-sources/api-sources/' + viewApiSource.id + '/state" data-async-save-close-url="/data-sources/api-sources" data-async-save-new-url="/data-sources/api-sources/new"' : 'data-async-save data-async-save-close-url="/data-sources/api-sources" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/api-sources/new"',
+    cancelUrl: '/data-sources/api-sources',
+    deleteUrl: isEdit && viewApiSource.id ? '/data-sources/api-sources/' + viewApiSource.id + '/delete' : ''
+  };
+}
+
+module.exports = {
+  buildApiSourceFormViewModel: buildApiSourceFormViewModel
+};

src/web/routes/data-sources/api-sources/routes.js

@@ -0,0 +1,326 @@
+// API source route registration.
+
+const { buildPagination } = require('../../../lib/pagination');
+const renderApiSourcesPage = require('./list');
+const renderApiSourceAddPage = require('./add');
+const renderApiSourceEditPage = require('./edit');
+
+function toIsoTimestamp(value) {
+  if (!value) {
+    return '';
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? '' : date.toISOString();
+}
+
+async function getDataSourceUsageMaps(pool, common) {
+  const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
+  const apiSourceIds = new Set();
+
+  for (let index = 0; index < slides.length; index += 1) {
+    const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slides[index].content_json) : null;
+    if (!content || typeof content !== 'object') {
+      continue;
+    }
+
+    (function walk(value) {
+      if (!value || typeof value !== 'object') {
+        return;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach(walk);
+        return;
+      }
+
+      if (Object.prototype.hasOwnProperty.call(value, 'source_id')) {
+        const sourceId = Number(value.source_id);
+        if (Number.isFinite(sourceId)) {
+          apiSourceIds.add(sourceId);
+        }
+      }
+
+      Object.keys(value).forEach(function (key) {
+        walk(value[key]);
+      });
+    })(content);
+  }
+
+  return apiSourceIds;
+}
+
+async function isApiSourceInUse(pool, common, apiSourceId) {
+  const usageIds = await getDataSourceUsageMaps(pool, common);
+  return usageIds.has(Number(apiSourceId));
+}
+
+async function sendRefreshTaskState(req, res, dataSourceTasks, sourceId) {
+  const taskId = Number(req.query.refresh_task_id);
+  if (!Number.isFinite(taskId) || taskId <= 0) {
+    return res.status(400).json({ error: 'Missing refresh task id.' });
+  }
+
+  const task = await dataSourceTasks.getTaskStatusById(taskId);
+  const expectedKey = 'api-source-refresh:' + Number(sourceId);
+  if (!task || task.key !== expectedKey) {
+    return res.status(404).json({ error: 'Refresh task not found.' });
+  }
+
+  res.json(task);
+}
+
+module.exports = function registerApiSourceRoutes(app, deps) {
+  const pool = deps.pool;
+  const common = deps.common;
+  const pages = deps.pages;
+  const backgroundTaskQueue = deps.backgroundTaskQueue;
+  const dataSourceTasks = deps.dataSourceTasks;
+  const getAuditUserId = deps.getAuditUserId;
+  const redirectAfterSave = deps.redirectAfterSave;
+  const formatDashboardDate = deps.formatDashboardDate || function (value) {
+    return value ? String(value) : '';
+  };
+  const requirePermission = deps.requirePermission;
+
+  const LIST_PAGE_SIZE = 25;
+
+  app.get('/data-sources/api-sources', requirePermission('api-sources.read'), async function (req, res, next) {
+    try {
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchApiSourcesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      const usageIds = await getDataSourceUsageMaps(pool, common);
+      const apiSources = (data.apiSources || []).map(function (apiSource) {
+        return Object.assign({}, apiSource, {
+          authMethod: apiSource.auth_method || 'none',
+          authUsername: apiSource.auth_username || '',
+          authPassword: apiSource.auth_password || '',
+          authBearerToken: apiSource.auth_bearer_token || '',
+          authHeaderName: apiSource.auth_header_name || 'X-API-Key',
+          authHeaderValue: apiSource.auth_header_value || '',
+          itemsPath: apiSource.items_path || '',
+          intervalLabel: apiSource.update_interval_unit === 'seconds'
+            ? (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every second' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} seconds`)
+            : (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every minute' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} minutes`),
+          lastPullLabel: apiSource.last_pulled_at ? formatDashboardDate(apiSource.last_pulled_at) : 'Never',
+          lastPulledAtValue: apiSource.last_pulled_at ? new Date(apiSource.last_pulled_at).toISOString() : '',
+          inUse: usageIds.has(Number(apiSource.id))
+        });
+      });
+
+      res.send(renderApiSourcesPage({
+        apiSources: apiSources,
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'API sources', 'API source pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser, formatDashboardDate));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/data-sources/api-sources/new', requirePermission('api-sources.create'), function (req, res) {
+    res.send(renderApiSourceAddPage(null, req.query.message ? String(req.query.message) : '', req.currentUser));
+  });
+
+  app.get('/data-sources/api-sources/:id/edit', requirePermission('api-sources.update'), async function (req, res, next) {
+    try {
+      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
+      if (!apiSource) {
+        return res.status(404).send('API source not found');
+      }
+
+      const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
+      const inUse = (slides || []).some(function (row) {
+        const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(row.content_json) : null;
+        if (!content || typeof content !== 'object') {
+          return false;
+        }
+
+        const stack = [content];
+        while (stack.length) {
+          const value = stack.pop();
+          if (!value || typeof value !== 'object') {
+            continue;
+          }
+          if (Array.isArray(value)) {
+            value.forEach(function (item) { stack.push(item); });
+            continue;
+          }
+          if (Object.prototype.hasOwnProperty.call(value, 'source_id') && Number(value.source_id) === Number(apiSource.id)) {
+            return true;
+          }
+          Object.keys(value).forEach(function (key) {
+            stack.push(value[key]);
+          });
+        }
+        return false;
+      });
+
+      res.send(renderApiSourceEditPage(Object.assign({}, apiSource, {
+        apiUrl: apiSource.api_url,
+        authMethod: apiSource.auth_method || 'none',
+        authUsername: apiSource.auth_username || '',
+        authPassword: apiSource.auth_password || '',
+        authBearerToken: apiSource.auth_bearer_token || '',
+        authHeaderName: apiSource.auth_header_name || 'X-API-Key',
+        authHeaderValue: apiSource.auth_header_value || '',
+        itemsPath: apiSource.items_path || '',
+        updateIntervalValue: apiSource.update_interval_value,
+        updateIntervalUnit: apiSource.update_interval_unit || 'minutes',
+        lastPulledAtValue: toIsoTimestamp(apiSource.last_pulled_at),
+        lastPulledAtLabel: apiSource.last_pulled_at ? String(apiSource.last_pulled_at) : '',
+        lastPullError: apiSource.last_pull_error || '',
+        lastResponseStatus: apiSource.last_response_status,
+        lastResponseContentType: apiSource.last_response_content_type,
+        lastResponseJson: apiSource.last_response_json || '',
+        inUse: inUse
+      }), {
+        lastResponseJson: apiSource.last_response_json || '',
+        lastPullError: apiSource.last_pull_error || ''
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/data-sources/api-sources/:id/state', requirePermission('api-sources.update'), function (req, res, next) {
+    sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next);
+  });
+
+  app.post('/data-sources/api-sources', requirePermission('api-sources.create'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const payload = common.buildApiSourcePayload(req, null);
+      if (await common.fetchDuplicateName(pool, 'i_api_sources', payload.name)) {
+        return res.redirect('/data-sources/api-sources/new?message=' + encodeURIComponent('An API source with that name already exists.'));
+      }
+
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      const [result] = await connection.query(
+        'INSERT INTO i_api_sources (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_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+        [payload.name, payload.apiUrl, payload.authMethod, payload.authUsername || null, payload.authPassword || null, payload.authBearerToken || null, payload.authHeaderName || null, payload.authHeaderValue || null, payload.itemsPath || null, payload.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, actorId]
+      );
+      await connection.commit();
+      dataSourceTasks.registerRecurringRefresh('api-source', result.insertId, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
+        return dataSourceTasks.refreshApiSourceInBackground(result.insertId, actorId);
+      });
+      const refreshTask = await backgroundTaskQueue.enqueueTask({
+        key: 'api-source-refresh:' + result.insertId,
+        title: 'API source refresh',
+        category: 'data-source',
+        taskType: 'data-source-refresh',
+        payload: {
+          sourceType: 'api-source',
+          sourceId: result.insertId,
+          sourceName: payload.name,
+          actorId: actorId
+        },
+        metadata: {
+          sourceType: 'api-source',
+          sourceId: result.insertId,
+          sourceName: payload.name
+        }
+      });
+      const message = 'API source created. Refresh is running in the background.';
+      res.redirect('/data-sources/api-sources/' + result.insertId + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/api-sources/:id', requirePermission('api-sources.update'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
+      if (!apiSource) {
+        return res.status(404).send('API source not found');
+      }
+
+      const payload = common.buildApiSourcePayload(req, apiSource);
+      if (await common.fetchDuplicateName(pool, 'i_api_sources', payload.name, apiSource.id)) {
+        return res.redirect('/data-sources/api-sources/' + apiSource.id + '/edit?message=' + encodeURIComponent('An API source with that name already exists.'));
+      }
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      await connection.query(
+        'UPDATE i_api_sources SET 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 = ?, modified_by = ? WHERE id = ?',
+        [payload.name, payload.apiUrl, payload.authMethod, payload.authUsername || null, payload.authPassword || null, payload.authBearerToken || null, payload.authHeaderName || null, payload.authHeaderValue || null, payload.itemsPath || null, payload.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, apiSource.id]
+      );
+      await connection.commit();
+      dataSourceTasks.registerRecurringRefresh('api-source', apiSource.id, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
+        return dataSourceTasks.refreshApiSourceInBackground(apiSource.id, actorId);
+      });
+      const message = 'API source updated. Refresh is running in the background.';
+      const refreshTask = await backgroundTaskQueue.enqueueTask({
+        key: 'api-source-refresh:' + apiSource.id,
+        title: 'API source refresh',
+        category: 'data-source',
+        taskType: 'data-source-refresh',
+        payload: {
+          sourceType: 'api-source',
+          sourceId: apiSource.id,
+          sourceName: payload.name,
+          actorId: actorId
+        },
+        metadata: {
+          sourceType: 'api-source',
+          sourceId: apiSource.id,
+          sourceName: payload.name
+        }
+      });
+      redirectAfterSave(req, res, '/data-sources/api-sources/' + apiSource.id + '/edit?refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''), {
+        closeUrl: '/data-sources/api-sources',
+        newUrl: '/data-sources/api-sources/new',
+        message: message
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/api-sources/:id/delete', requirePermission('api-sources.delete'), async function (req, res, next) {
+    try {
+      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
+      if (!apiSource) {
+        return res.status(404).send('API source not found');
+      }
+
+      if (await isApiSourceInUse(pool, common, apiSource.id)) {
+        return res.redirect('/data-sources/api-sources?message=' + encodeURIComponent('This API source is still used by one or more slides.'));
+      }
+
+      const connection = await pool.getConnection();
+      try {
+        await connection.beginTransaction();
+        await connection.query('DELETE FROM i_api_sources WHERE id = ?', [apiSource.id]);
+        await connection.commit();
+        dataSourceTasks.removeRecurringRefresh('api-source', apiSource.id);
+      } catch (error) {
+        await connection.rollback();
+        throw error;
+      } finally {
+        connection.release();
+      }
+      res.redirect('/data-sources/api-sources?message=' + encodeURIComponent('API source deleted.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+};

src/web/routes/data-sources/index.js

@@ -1,4 +0,0 @@
-// Data-source route entry point that re-exports the admin handlers.
-
-module.exports = require('../admin/data-sources');
-

src/web/routes/data-sources/rss-feeds/add.js

@@ -1,30 +1,8 @@
-// RSS feed add page renderer and form defaults.
+// RSS feed add page renderer.
 
 const { renderView } = require('../../../view');
+const { buildRssFeedFormViewModel } = require('./form-view-model');
 
-function buildDefaultRssFeed() {
-  return {
-    id: null,
-    name: '',
-    feedUrl: '',
-    updateIntervalValue: 60,
-    updateIntervalUnit: 'minutes',
-    itemLimit: 1
-  };
-}
-
-module.exports = function renderRssFeedFormPage(rssFeed, mode, message, currentUser) {
-  const isEdit = mode === 'edit';
-  const viewRssFeed = Object.assign(buildDefaultRssFeed(), rssFeed || {});
-
-  return renderView(isEdit ? 'data-sources/rss-feeds/edit' : 'data-sources/rss-feeds/add', {
-    title: isEdit ? 'Edit RSS feed' : 'Add RSS feed',
-    active: 'rss-feeds',
-    message: message,
-    currentUser: currentUser || null,
-    rssFeed: viewRssFeed,
-    inUse: Boolean(viewRssFeed.inUse),
-    pulledItems: viewRssFeed.pulledItems || [],
-    pullError: viewRssFeed.pullError || ''
-  });
+module.exports = function renderRssFeedAddPage(rssFeed, message, currentUser, options) {
+  return renderView('data-sources/rss-feeds/form', buildRssFeedFormViewModel(rssFeed, message, currentUser, options, false));
 };

src/web/routes/data-sources/rss-feeds/edit.js

@@ -1,6 +1,7 @@
-// RSS feed edit page renderer that reuses the add form.
+// RSS feed edit page renderer.
 
-const renderRssFeedFormPage = require('./add');
+const { renderView } = require('../../../view');
+const { buildRssFeedFormViewModel } = require('./form-view-model');
 
 module.exports = function renderRssFeedEditPage(rssFeed, data, message, currentUser) {
   const viewData = Object.assign({
@@ -8,8 +9,8 @@ module.exports = function renderRssFeedEditPage(rssFeed, data, message, currentU
     pullError: ''
   }, data || {});
 
-  return renderRssFeedFormPage(Object.assign({}, rssFeed, {
+  return renderView('data-sources/rss-feeds/form', buildRssFeedFormViewModel(Object.assign({}, rssFeed, {
     pulledItems: viewData.pulledItems,
     pullError: viewData.pullError
-  }), 'edit', message, currentUser);
+  }), message, currentUser, viewData, true));
 };

src/web/routes/data-sources/rss-feeds/form-view-model.js

@@ -0,0 +1,39 @@
+// Shared RSS feed form view-model builder.
+
+function buildDefaultRssFeed() {
+  return {
+    id: null,
+    name: '',
+    feedUrl: '',
+    updateIntervalValue: 60,
+    updateIntervalUnit: 'minutes',
+    itemLimit: 1
+  };
+}
+
+function buildRssFeedFormViewModel(rssFeed, message, currentUser, options, isEdit) {
+  const viewRssFeed = Object.assign(buildDefaultRssFeed(), rssFeed || {});
+  const viewOptions = options || {};
+
+  return {
+    title: isEdit ? 'Edit RSS feed' : 'Add RSS feed',
+    active: 'rss-feeds',
+    message: message,
+    currentUser: currentUser || null,
+    rssFeed: viewRssFeed,
+    inUse: Boolean(viewRssFeed.inUse),
+    pulledItems: viewOptions.pulledItems || viewRssFeed.pulledItems || [],
+    pullError: viewOptions.pullError || viewRssFeed.pullError || '',
+    isEdit: Boolean(isEdit),
+    showSaveSecondaryActions: Boolean(isEdit),
+    deleteDisabled: !isEdit || Boolean(viewRssFeed.inUse),
+    formAction: isEdit && viewRssFeed.id ? '/data-sources/rss-feeds/' + viewRssFeed.id : '/data-sources/rss-feeds',
+    formAttrs: isEdit && viewRssFeed.id ? 'data-async-save data-async-save-refresh-target="#rss-feed-items-panel" data-async-save-refresh-state-url="/data-sources/rss-feeds/' + viewRssFeed.id + '/state" data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-url="/data-sources/rss-feeds/new"' : 'data-async-save data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/rss-feeds/new"',
+    cancelUrl: '/data-sources/rss-feeds',
+    deleteUrl: isEdit && viewRssFeed.id ? '/data-sources/rss-feeds/' + viewRssFeed.id + '/delete' : ''
+  };
+}
+
+module.exports = {
+  buildRssFeedFormViewModel: buildRssFeedFormViewModel
+};

src/web/routes/data-sources/rss-feeds/routes.js

@@ -0,0 +1,296 @@
+// RSS feed route registration.
+
+const { buildPagination } = require('../../../lib/pagination');
+const renderRssFeedsPage = require('./list');
+const renderRssFeedAddPage = require('./add');
+const renderRssFeedEditPage = require('./edit');
+
+async function getDataSourceUsageMaps(pool, common) {
+  const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
+  const rssFeedIds = new Set();
+
+  for (let index = 0; index < slides.length; index += 1) {
+    const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slides[index].content_json) : null;
+    if (!content || typeof content !== 'object') {
+      continue;
+    }
+
+    (function walk(value) {
+      if (!value || typeof value !== 'object') {
+        return;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach(walk);
+        return;
+      }
+
+      if (Object.prototype.hasOwnProperty.call(value, 'feed_id')) {
+        const feedId = Number(value.feed_id);
+        if (Number.isFinite(feedId)) {
+          rssFeedIds.add(feedId);
+        }
+      }
+
+      Object.keys(value).forEach(function (key) {
+        walk(value[key]);
+      });
+    })(content);
+  }
+
+  return rssFeedIds;
+}
+
+async function isRssFeedInUse(pool, common, rssFeedId) {
+  const usageIds = await getDataSourceUsageMaps(pool, common);
+  return usageIds.has(Number(rssFeedId));
+}
+
+async function sendRefreshTaskState(req, res, dataSourceTasks, sourceId) {
+  const taskId = Number(req.query.refresh_task_id);
+  if (!Number.isFinite(taskId) || taskId <= 0) {
+    return res.status(400).json({ error: 'Missing refresh task id.' });
+  }
+
+  const task = await dataSourceTasks.getTaskStatusById(taskId);
+  const expectedKey = 'rss-feed-refresh:' + Number(sourceId);
+  if (!task || task.key !== expectedKey) {
+    return res.status(404).json({ error: 'Refresh task not found.' });
+  }
+
+  res.json(task);
+}
+
+module.exports = function registerRssFeedRoutes(app, deps) {
+  const pool = deps.pool;
+  const common = deps.common;
+  const pages = deps.pages;
+  const dataSourceTasks = deps.dataSourceTasks;
+  const backgroundTaskQueue = deps.backgroundTaskQueue;
+  const getAuditUserId = deps.getAuditUserId;
+  const redirectAfterSave = deps.redirectAfterSave;
+  const formatDashboardDate = deps.formatDashboardDate || function (value) {
+    return value ? String(value) : '';
+  };
+  const requirePermission = deps.requirePermission;
+
+  const LIST_PAGE_SIZE = 25;
+
+  app.get('/data-sources/rss-feeds', requirePermission('rss-feeds.read'), async function (req, res, next) {
+    try {
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchRssFeedsPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      const usageIds = await getDataSourceUsageMaps(pool, common);
+      const rssFeeds = (data.rssFeeds || []).map(function (rssFeed) {
+        return Object.assign({}, rssFeed, {
+          inUse: usageIds.has(Number(rssFeed.id))
+        });
+      });
+      res.send(renderRssFeedsPage({
+        rssFeeds: rssFeeds,
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'RSS feeds', 'RSS feed pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/data-sources/rss-feeds/new', requirePermission('rss-feeds.create'), function (req, res) {
+    res.send(renderRssFeedAddPage(null, req.query.message ? String(req.query.message) : '', req.currentUser));
+  });
+
+  app.get('/data-sources/rss-feeds/:id/edit', requirePermission('rss-feeds.update'), async function (req, res, next) {
+    try {
+      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
+      if (!rssFeed) {
+        return res.status(404).send('RSS feed not found');
+      }
+
+      const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
+      const inUse = (slides || []).some(function (row) {
+        const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(row.content_json) : null;
+        if (!content || typeof content !== 'object') {
+          return false;
+        }
+
+        const stack = [content];
+        while (stack.length) {
+          const value = stack.pop();
+          if (!value || typeof value !== 'object') {
+            continue;
+          }
+          if (Array.isArray(value)) {
+            value.forEach(function (item) { stack.push(item); });
+            continue;
+          }
+          if (Object.prototype.hasOwnProperty.call(value, 'feed_id') && Number(value.feed_id) === Number(rssFeed.id)) {
+            return true;
+          }
+          Object.keys(value).forEach(function (key) {
+            stack.push(value[key]);
+          });
+        }
+        return false;
+      });
+
+      const pulledItems = typeof common.fetchRssFeedItemsByFeedId === 'function'
+        ? await common.fetchRssFeedItemsByFeedId(pool, rssFeed.id)
+        : [];
+
+      res.send(renderRssFeedEditPage(Object.assign({}, rssFeed, {
+        feedUrl: rssFeed.feed_url,
+        updateIntervalValue: rssFeed.update_interval_value,
+        updateIntervalUnit: rssFeed.update_interval_unit || 'minutes',
+        itemLimit: rssFeed.item_limit,
+        inUse: inUse
+      }), {
+        pulledItems: pulledItems,
+        pullError: ''
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/data-sources/rss-feeds/:id/state', requirePermission('rss-feeds.update'), function (req, res, next) {
+    sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next);
+  });
+
+  app.post('/data-sources/rss-feeds', requirePermission('rss-feeds.create'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const payload = common.buildRssFeedPayload(req, null);
+      if (await common.fetchDuplicateName(pool, 'i_rss_feeds', payload.name)) {
+        return res.redirect('/data-sources/rss-feeds/new?message=' + encodeURIComponent('An RSS feed with that name already exists.'));
+      }
+
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      const [result] = await connection.query(
+        'INSERT INTO i_rss_feeds (name, feed_url, update_interval_value, update_interval_unit, item_limit, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
+        [payload.name, payload.feedUrl, payload.updateIntervalValue, payload.updateIntervalUnit, payload.itemLimit, actorId, actorId]
+      );
+      await connection.commit();
+      dataSourceTasks.registerRecurringRefresh('rss-feed', result.insertId, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
+        return dataSourceTasks.refreshRssFeedInBackground(result.insertId, payload.feedUrl, payload.itemLimit, actorId);
+      });
+      const refreshTask = await backgroundTaskQueue.enqueueTask({
+        key: 'rss-feed-refresh:' + result.insertId,
+        title: 'RSS feed refresh',
+        category: 'data-source',
+        taskType: 'data-source-refresh',
+        payload: {
+          sourceType: 'rss-feed',
+          sourceId: result.insertId,
+          sourceName: payload.name,
+          actorId: actorId
+        },
+        metadata: {
+          sourceType: 'rss-feed',
+          sourceId: result.insertId,
+          sourceName: payload.name
+        }
+      });
+      const message = 'RSS feed created. Refresh is running in the background.';
+      res.redirect('/data-sources/rss-feeds/' + result.insertId + '/edit?message=' + encodeURIComponent(message) + '&refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''));
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/rss-feeds/:id', requirePermission('rss-feeds.update'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
+      if (!rssFeed) {
+        return res.status(404).send('RSS feed not found');
+      }
+
+      const payload = common.buildRssFeedPayload(req, rssFeed);
+      if (await common.fetchDuplicateName(pool, 'i_rss_feeds', payload.name, rssFeed.id)) {
+        return res.redirect('/data-sources/rss-feeds/' + rssFeed.id + '/edit?message=' + encodeURIComponent('An RSS feed with that name already exists.'));
+      }
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      await connection.query(
+        'UPDATE i_rss_feeds SET name = ?, feed_url = ?, update_interval_value = ?, update_interval_unit = ?, item_limit = ?, modified_by = ? WHERE id = ?',
+        [payload.name, payload.feedUrl, payload.updateIntervalValue, payload.updateIntervalUnit, payload.itemLimit, actorId, rssFeed.id]
+      );
+      await connection.commit();
+      dataSourceTasks.registerRecurringRefresh('rss-feed', rssFeed.id, payload.name, payload.updateIntervalValue, payload.updateIntervalUnit, function () {
+        return dataSourceTasks.refreshRssFeedInBackground(rssFeed.id, payload.feedUrl, payload.itemLimit, actorId);
+      });
+      const message = 'RSS feed updated. Refresh is running in the background.';
+      const refreshTask = await backgroundTaskQueue.enqueueTask({
+        key: 'rss-feed-refresh:' + rssFeed.id,
+        title: 'RSS feed refresh',
+        category: 'data-source',
+        taskType: 'data-source-refresh',
+        payload: {
+          sourceType: 'rss-feed',
+          sourceId: rssFeed.id,
+          sourceName: payload.name,
+          actorId: actorId
+        },
+        metadata: {
+          sourceType: 'rss-feed',
+          sourceId: rssFeed.id,
+          sourceName: payload.name
+        }
+      });
+      redirectAfterSave(req, res, '/data-sources/rss-feeds/' + rssFeed.id + '/edit?refresh_task_id=' + encodeURIComponent(refreshTask && refreshTask.id ? refreshTask.id : ''), {
+        closeUrl: '/data-sources/rss-feeds',
+        newUrl: '/data-sources/rss-feeds/new',
+        message: message
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/rss-feeds/:id/delete', requirePermission('rss-feeds.delete'), async function (req, res, next) {
+    try {
+      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
+      if (!rssFeed) {
+        return res.status(404).send('RSS feed not found');
+      }
+
+      if (await isRssFeedInUse(pool, common, rssFeed.id)) {
+        return res.redirect('/data-sources/rss-feeds?message=' + encodeURIComponent('This RSS feed is still used by one or more slides.'));
+      }
+
+      const connection = await pool.getConnection();
+      try {
+        await connection.beginTransaction();
+        await connection.query('DELETE FROM i_rss_feeds WHERE id = ?', [rssFeed.id]);
+        await connection.commit();
+        dataSourceTasks.removeRecurringRefresh('rss-feed', rssFeed.id);
+      } catch (error) {
+        await connection.rollback();
+        throw error;
+      } finally {
+        connection.release();
+      }
+      res.redirect('/data-sources/rss-feeds?message=' + encodeURIComponent('RSS feed deleted.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+};

src/web/routes/data-sources/timetables/add.js

@@ -0,0 +1,8 @@
+// Timetable group add page renderer.
+
+const { renderView } = require('../../../view');
+const { buildTimetableGroupFormViewModel } = require('./form-view-model');
+
+module.exports = function renderTimetableGroupAddPage(timetableGroup, timetableEntries, message, currentUser) {
+  return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, false));
+};

src/web/routes/data-sources/timetables/edit.js

@@ -0,0 +1,8 @@
+// Timetable group edit page renderer.
+
+const { renderView } = require('../../../view');
+const { buildTimetableGroupFormViewModel } = require('./form-view-model');
+
+module.exports = function renderTimetableGroupEditPage(timetableGroup, timetableEntries, message, currentUser) {
+  return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, true));
+};

src/web/routes/data-sources/timetables/form-view-model.js

@@ -0,0 +1,61 @@
+// Shared timetable group form view-model builder.
+
+function buildDefaultTimetableGroup() {
+  return {
+    id: null,
+    name: '',
+    shortDescription: ''
+  };
+}
+
+function formatDateTimeLocalValue(value) {
+  if (!value) {
+    return '';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  const year = String(date.getFullYear()).padStart(4, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
+function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, isEdit) {
+  const viewTimetableGroup = Object.assign(buildDefaultTimetableGroup(), timetableGroup || {});
+  const viewTimetableEntries = Array.isArray(timetableEntries) && timetableEntries.length
+    ? timetableEntries.map(function (entry) {
+        return Object.assign({}, entry, {
+          startValue: formatDateTimeLocalValue(entry.start_datetime),
+          endValue: formatDateTimeLocalValue(entry.end_datetime)
+        });
+      })
+    : [{ id: null, title: '', short_description: '', startValue: '', endValue: '', sort_order: 0 }];
+
+  return {
+    title: isEdit ? 'Edit timetable group' : 'Add timetable group',
+    active: 'timetables',
+    message: message,
+    currentUser: currentUser || null,
+    isEdit: Boolean(isEdit),
+    timetableGroup: viewTimetableGroup,
+    timetableEntries: viewTimetableEntries,
+    inUse: Boolean(viewTimetableGroup.inUse),
+    showSaveSecondaryActions: Boolean(isEdit),
+    deleteDisabled: !isEdit || Boolean(viewTimetableGroup.inUse),
+    formAction: isEdit && viewTimetableGroup.id ? '/data-sources/timetables/' + viewTimetableGroup.id : '/data-sources/timetables',
+    formAttrs: 'data-async-save' + (isEdit ? ' data-async-save-close-url="/data-sources/timetables"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/data-sources/timetables/new"',
+    cancelUrl: '/data-sources/timetables',
+    deleteUrl: isEdit && viewTimetableGroup.id ? '/data-sources/timetables/' + viewTimetableGroup.id + '/delete' : '',
+    assetVersion: Date.now().toString(36)
+  };
+}
+
+module.exports = {
+  buildTimetableGroupFormViewModel: buildTimetableGroupFormViewModel
+};

src/web/routes/data-sources/timetables/list.js

@@ -0,0 +1,32 @@
+// Timetable group list page renderer.
+
+const { renderView } = require('../../../view');
+
+function formatNextStartLabel(value, formatDashboardDate) {
+  if (!value) {
+    return 'No entries';
+  }
+
+  const label = typeof formatDashboardDate === 'function'
+    ? formatDashboardDate(value)
+    : String(value);
+  return label || 'No entries';
+}
+
+module.exports = function renderTimetableGroupsPage(data, message, currentUser, formatDashboardDate) {
+  const timetableGroups = (data.timetableGroups || []).map(function (timetableGroup) {
+    return Object.assign({}, timetableGroup, {
+      nextStartLabel: formatNextStartLabel(timetableGroup.next_start_datetime, formatDashboardDate),
+      nextStartValue: timetableGroup.next_start_datetime ? new Date(timetableGroup.next_start_datetime).toISOString() : ''
+    });
+  });
+
+  return renderView('data-sources/timetables/list', {
+    title: 'Timetables',
+    active: 'timetables',
+    message: message,
+    currentUser: currentUser || null,
+    timetableGroups: timetableGroups,
+    pagination: data.pagination || null
+  });
+};

src/web/routes/data-sources/timetables/routes.js

@@ -0,0 +1,319 @@
+// Timetable route registration.
+
+const { buildPagination } = require('../../../lib/pagination');
+const renderTimetableGroupsPage = require('./list');
+const renderTimetableGroupAddPage = require('./add');
+const renderTimetableGroupEditPage = require('./edit');
+
+async function getDataSourceUsageMaps(pool, common) {
+  const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
+  const timetableGroupIds = new Set();
+
+  for (let index = 0; index < slides.length; index += 1) {
+    const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slides[index].content_json) : null;
+    if (!content || typeof content !== 'object') {
+      continue;
+    }
+
+    (function walk(value) {
+      if (!value || typeof value !== 'object') {
+        return;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach(walk);
+        return;
+      }
+
+      if (Object.prototype.hasOwnProperty.call(value, 'schedule_group_id')) {
+        const timetableGroupId = Number(value.schedule_group_id);
+        if (Number.isFinite(timetableGroupId)) {
+          timetableGroupIds.add(timetableGroupId);
+        }
+      }
+
+      Object.keys(value).forEach(function (key) {
+        walk(value[key]);
+      });
+    })(content);
+  }
+
+  return timetableGroupIds;
+}
+
+function readScheduleArrayFieldValue(body, keys) {
+  const searchKeys = Array.isArray(keys) ? keys : [keys];
+  for (let index = 0; index < searchKeys.length; index += 1) {
+    const key = searchKeys[index];
+    const value = body && Object.prototype.hasOwnProperty.call(body, key) ? body[key] : undefined;
+    if (Array.isArray(value)) {
+      return value;
+    }
+    if (value !== undefined && value !== null) {
+      return [value];
+    }
+  }
+  return [];
+}
+
+function buildScheduleEntryRows(req, parseDateTimeLocal) {
+  const body = req.body || {};
+  const ids = readScheduleArrayFieldValue(body, ['entry_id[]', 'entry_id']);
+  const titles = readScheduleArrayFieldValue(body, ['entry_title[]', 'entry_title']);
+  const descriptions = readScheduleArrayFieldValue(body, ['entry_short_description[]', 'entry_short_description']);
+  const starts = readScheduleArrayFieldValue(body, ['entry_start_datetime[]', 'entry_start_datetime']);
+  const ends = readScheduleArrayFieldValue(body, ['entry_end_datetime[]', 'entry_end_datetime']);
+
+  const lengths = [ids.length, titles.length, descriptions.length, starts.length, ends.length].filter(Boolean);
+  if (lengths.length && lengths.some(function (value) { return value !== lengths[0]; })) {
+    const error = new Error('Schedule entry data is invalid.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  const rows = [];
+  for (let index = 0; index < titles.length; index += 1) {
+    const idValue = Number(ids[index]);
+    const title = String(titles[index] || '').trim();
+    const shortDescription = String(descriptions[index] || '').trim();
+    const startDatetime = parseDateTimeLocal(starts[index]);
+    const endDatetime = parseDateTimeLocal(ends[index]);
+    const hasContent = title || shortDescription || String(starts[index] || '').trim() || String(ends[index] || '').trim() || Number.isFinite(idValue);
+
+    if (!hasContent) {
+      continue;
+    }
+
+    if (!title) {
+      const error = new Error('Each schedule entry requires a title.');
+      error.statusCode = 400;
+      throw error;
+    }
+
+    if (!startDatetime) {
+      const error = new Error('Each schedule entry requires a start datetime.');
+      error.statusCode = 400;
+      throw error;
+    }
+
+    if (endDatetime && endDatetime < startDatetime) {
+      const error = new Error('Schedule entry end datetime must be after the start datetime.');
+      error.statusCode = 400;
+      throw error;
+    }
+
+    rows.push({
+      id: Number.isFinite(idValue) && idValue > 0 ? idValue : null,
+      title: title,
+      shortDescription: shortDescription,
+      startDatetime: startDatetime,
+      endDatetime: endDatetime
+    });
+  }
+
+  return rows;
+}
+
+module.exports = function registerTimetableRoutes(app, deps) {
+  const pool = deps.pool;
+  const common = deps.common;
+  const pages = deps.pages;
+  const getAuditUserId = deps.getAuditUserId;
+  const redirectAfterSave = deps.redirectAfterSave;
+  const parseDateTimeLocal = deps.parseDateTimeLocal;
+  const formatDashboardDate = deps.formatDashboardDate || function (value) {
+    return value ? String(value) : '';
+  };
+  const requirePermission = deps.requirePermission;
+
+  const LIST_PAGE_SIZE = 25;
+
+  app.get('/data-sources/timetables', requirePermission('timetables.read'), async function (req, res, next) {
+    try {
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchTimetableGroupsPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      const usageIds = await getDataSourceUsageMaps(pool, common);
+      const timetableGroups = (data.timetableGroups || []).map(function (timetableGroup) {
+        return Object.assign({}, timetableGroup, {
+          inUse: usageIds.has(Number(timetableGroup.id))
+        });
+      });
+
+      res.send(renderTimetableGroupsPage({
+        timetableGroups: timetableGroups,
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'Timetables', 'Timetable groups')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser, formatDashboardDate));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.get('/data-sources/timetables/new', requirePermission('timetables.create'), function (req, res) {
+    res.send(renderTimetableGroupAddPage(null, [], req.query.message ? String(req.query.message) : '', req.currentUser));
+  });
+
+  app.get('/data-sources/timetables/:id/edit', requirePermission('timetables.update'), async function (req, res, next) {
+    try {
+      const timetableGroup = await common.fetchTimetableGroupById(pool, Number(req.params.id));
+      if (!timetableGroup) {
+        return res.status(404).send('Timetable group not found');
+      }
+
+      const usageIds = await getDataSourceUsageMaps(pool, common);
+      const timetableEntries = typeof common.fetchTimetableEntriesByGroupId === 'function'
+        ? await common.fetchTimetableEntriesByGroupId(pool, timetableGroup.id)
+        : [];
+
+      res.send(renderTimetableGroupEditPage(Object.assign({}, timetableGroup, {
+        shortDescription: timetableGroup.short_description || '',
+        inUse: usageIds.has(Number(timetableGroup.id))
+      }), timetableEntries, req.query.message ? String(req.query.message) : '', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/data-sources/timetables', requirePermission('timetables.create'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const payload = common.buildTimetableGroupPayload(req, null);
+      if (await common.fetchDuplicateName(pool, 'i_schedule_groups', payload.name)) {
+        return res.redirect('/data-sources/timetables/new?message=' + encodeURIComponent('A timetable group with that name already exists.'));
+      }
+
+      const entryRows = buildScheduleEntryRows(req, parseDateTimeLocal);
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      const [result] = await connection.query(
+        'INSERT INTO i_schedule_groups (name, short_description, created_by, modified_by) VALUES (?, ?, ?, ?)',
+        [payload.name, payload.shortDescription || null, actorId, actorId]
+      );
+
+      if (entryRows.length) {
+        const insertRows = entryRows.map(function (entry) {
+          return [
+            result.insertId,
+            entry.title,
+            entry.shortDescription || null,
+            entry.startDatetime,
+            entry.endDatetime || null,
+            actorId,
+            actorId
+          ];
+        });
+
+        await connection.query(
+          'INSERT INTO i_schedule_entries (schedule_group_id, title, short_description, start_datetime, end_datetime, created_by, modified_by) VALUES ?',
+          [insertRows]
+        );
+      }
+
+      await connection.commit();
+      redirectAfterSave(req, res, '/data-sources/timetables/' + result.insertId + '/edit', {
+        closeUrl: '/data-sources/timetables',
+        newUrl: '/data-sources/timetables/new',
+        message: 'Timetable group created.'
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/timetables/:id', requirePermission('timetables.update'), async function (req, res, next) {
+    const connection = await pool.getConnection();
+    try {
+      const timetableGroup = await common.fetchTimetableGroupById(pool, Number(req.params.id));
+      if (!timetableGroup) {
+        return res.status(404).send('Timetable group not found');
+      }
+
+      const payload = common.buildTimetableGroupPayload(req, timetableGroup);
+      if (await common.fetchDuplicateName(pool, 'i_schedule_groups', payload.name, timetableGroup.id)) {
+        return res.redirect('/data-sources/timetables/' + timetableGroup.id + '/edit?message=' + encodeURIComponent('A timetable group with that name already exists.'));
+      }
+
+      const entryRows = buildScheduleEntryRows(req, parseDateTimeLocal);
+      const actorId = getAuditUserId(req);
+      await connection.beginTransaction();
+      await connection.query(
+        'UPDATE i_schedule_groups SET name = ?, short_description = ?, modified_by = ? WHERE id = ?',
+        [payload.name, payload.shortDescription || null, actorId, timetableGroup.id]
+      );
+      await connection.query('DELETE FROM i_schedule_entries WHERE schedule_group_id = ?', [timetableGroup.id]);
+
+      if (entryRows.length) {
+        const insertRows = entryRows.map(function (entry) {
+          return [
+            timetableGroup.id,
+            entry.title,
+            entry.shortDescription || null,
+            entry.startDatetime,
+            entry.endDatetime || null,
+            actorId,
+            actorId
+          ];
+        });
+
+        await connection.query(
+          'INSERT INTO i_schedule_entries (schedule_group_id, title, short_description, start_datetime, end_datetime, created_by, modified_by) VALUES ?',
+          [insertRows]
+        );
+      }
+
+      await connection.commit();
+      redirectAfterSave(req, res, '/data-sources/timetables/' + timetableGroup.id + '/edit', {
+        closeUrl: '/data-sources/timetables',
+        newUrl: '/data-sources/timetables/new',
+        message: 'Timetable group updated.'
+      });
+    } catch (error) {
+      try {
+        await connection.rollback();
+      } catch (_rollbackError) {
+        // Ignore rollback failures and surface the original error.
+      }
+      next(error);
+    } finally {
+      connection.release();
+    }
+  });
+
+  app.post('/data-sources/timetables/:id/delete', requirePermission('timetables.delete'), async function (req, res, next) {
+    try {
+      const timetableGroup = await common.fetchTimetableGroupById(pool, Number(req.params.id));
+      if (!timetableGroup) {
+        return res.status(404).send('Timetable group not found');
+      }
+
+      const usageIds = await getDataSourceUsageMaps(pool, common);
+      if (usageIds.has(Number(timetableGroup.id))) {
+        return res.redirect('/data-sources/timetables?message=' + encodeURIComponent('This timetable group is still used by one or more slides.'));
+      }
+
+      const connection = await pool.getConnection();
+      try {
+        await connection.beginTransaction();
+        await connection.query('DELETE FROM i_schedule_groups WHERE id = ?', [timetableGroup.id]);
+        await connection.commit();
+      } catch (error) {
+        await connection.rollback();
+        throw error;
+      } finally {
+        connection.release();
+      }
+      res.redirect('/data-sources/timetables?message=' + encodeURIComponent('Timetable group deleted.'));
+    } catch (error) {
+      next(error);
+    }
+  });
+};

src/web/routes/error.js

@@ -1,6 +1,7 @@
 // Error page route helpers and error copy selection.
 
-const { renderView } = require('../view');
+const { renderView } = require('#src/web/view');
+const { PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 function getErrorCopy(statusCode, message) {
   const normalizedStatusCode = Number(statusCode) || 500;
@@ -9,7 +10,7 @@ function getErrorCopy(statusCode, message) {
     return {
       title: 'Access denied',
       errorTitle: 'Access denied',
-      errorMessage: message || 'You do not have permission to access this area.',
+      errorMessage: message || PERMISSION_DENIED_MESSAGE,
       backLabel: 'Back to dashboard'
     };
   }
@@ -47,7 +48,7 @@ module.exports = function renderErrorPage(options, currentUser) {
   return renderView('error/error', {
     title: String(errorOptions.title || copy.title || 'Error').trim(),
     active: '',
-    messageVariant: 'primary',
+    messageVariant: statusCode === 403 ? 'warning' : 'primary',
     currentUser: currentUser || null,
     statusCode: statusCode,
     errorTitle: String(errorOptions.errorTitle || copy.errorTitle || errorOptions.title || 'Error').trim(),

src/web/routes/index.js

@@ -1,41 +0,0 @@
-// Aggregate the primary web route registrations.
-
-module.exports = {
-  renderLoginPage: require('./auth/login'),
-  renderAccountPage: require('./account/password'),
-  renderUsersPage: require('./users/list'),
-  renderUsersAddPage: require('./users/add'),
-  renderUsersEditPage: require('./users/edit'),
-  renderDashboardPage: require('./dashboard/index'),
-  renderConnectedClientsPage: require('./clients/list'),
-  renderPlaylistsPage: require('./playlists/list'),
-  renderPlaylistFormPage: require('./playlists/add'),
-  renderPlaylistEditPage: require('./playlists/edit'),
-  renderPlaylistSlideConfigPage: require('./playlists/slide-config'),
-  renderApiSourcesPage: require('./data-sources/api-sources/list'),
-  renderApiSourceFormPage: require('./data-sources/api-sources/add'),
-  renderApiSourceEditPage: require('./data-sources/api-sources/edit'),
-  renderRssFeedsPage: require('./data-sources/rss-feeds/list'),
-  renderRssFeedFormPage: require('./data-sources/rss-feeds/add'),
-  renderRssFeedEditPage: require('./data-sources/rss-feeds/edit'),
-  renderScreensPage: require('./screens/list'),
-  renderScreenFormPage: require('./screens/add'),
-  renderScreenEditPage: require('./screens/edit'),
-  renderAnnouncementsPage: require('./announcements/list'),
-  renderAnnouncementFormPage: require('./announcements/add'),
-  renderAnnouncementEditPage: require('./announcements/edit'),
-  renderSlidesPage: require('./slides/list'),
-  renderSlideFormPage: require('./slides/form'),
-  renderTemplatesPage: require('./templates/list'),
-  renderTemplateFormPage: require('./templates/add'),
-  renderTemplateEditPage: require('./templates/edit'),
-  renderCanvasSizesPage: require('./canvas-sizes/list'),
-  renderCanvasSizeFormPage: require('./canvas-sizes/add'),
-  renderCanvasSizeEditPage: require('./canvas-sizes/edit'),
-  renderBackgroundTasksPage: require('./settings/background-tasks-page').renderBackgroundTasksPage,
-  renderBackgroundTasksScheduledPage: require('./settings/background-tasks-page').renderBackgroundTasksScheduledPage,
-  renderErrorPage: require('./error'),
-  renderRbacPage: require('./rbac/list'),
-  renderRbacAddPage: require('./rbac/add'),
-  renderRbacEditPage: require('./rbac/edit')
-};

src/web/routes/register.js

@@ -4,11 +4,15 @@ const registerAuthRoutes = require('./auth');
 const registerPagesRoutes = require('./admin/pages');
 const registerAccountRoutes = require('./admin/account');
 const registerUsersRoutes = require('./admin/users');
+const registerPlaylistRoutes = require('./admin/playlists');
 const registerManageRoutes = require('./admin/manage');
 const registerScreenCommandRoutes = require('./admin/client-commands');
 const registerAnnouncementRoutes = require('./signage/announcements/routes');
 const registerContentRoutes = require('./admin/content');
-const registerDataSourceRoutes = require('./admin/data-sources');
+const registerRootDataSourceRoutes = require('./admin/data-sources');
+const registerApiSourceRoutes = require('./data-sources/api-sources/routes');
+const registerRssFeedRoutes = require('./data-sources/rss-feeds/routes');
+const registerTimetableRoutes = require('./data-sources/timetables/routes');
 const registerSettingsRoutes = require('./settings/background-tasks');
 const registerFontRoutes = require('./settings/fonts');
 const { PERMISSIONS, normalizePermissionKeys } = require('#src/rbac');
@@ -74,25 +78,32 @@ function registerAuthAndAccountRoutes(app, deps) {
 
 function registerSignageRoutes(app, deps) {
   // Screen, playlist, and command routes share the player-facing wiring.
-  registerManageRoutes(app, {
+  registerPlaylistRoutes(app, {
     pool: deps.pool,
     common: deps.common,
     pages: deps.pages,
     fetchOrderedPlaylistSlides: deps.fetchOrderedPlaylistSlides,
     fetchScreensByPlaylistId: deps.fetchScreensByPlaylistId,
-    fetchPlaylistCanvasSignature: deps.fetchPlaylistCanvasSignature,
-    getCanvasSignature: deps.getCanvasSignature,
-    normalizeScheduleMode: deps.normalizeScheduleMode,
-    parseDateTimeLocal: deps.parseDateTimeLocal,
-    parseTimeLocal: deps.parseTimeLocal,
+    fetchPlaylistCanvasId: deps.fetchPlaylistCanvasId,
     readArrayField: deps.readArrayField,
     getAuditUserId: deps.getAuditUserId,
     redirectAfterSave: deps.redirectAfterSave,
     notifyPlayerScreens: deps.notifyPlayerScreens,
     broadcastDashboardState: deps.broadcastDashboardState,
+    getPlaylistDeleteBlockMessage: deps.playerActionService.getPlaylistDeleteBlockMessage,
+    requirePermission: deps.requirePermission
+  });
+
+  registerManageRoutes(app, {
+    pool: deps.pool,
+    common: deps.common,
+    pages: deps.pages,
+    getAuditUserId: deps.getAuditUserId,
+    redirectAfterSave: deps.redirectAfterSave,
+    notifyPlayerScreens: deps.notifyPlayerScreens,
+    broadcastDashboardState: deps.broadcastDashboardState,
     getScreenDeleteBlockMessage: deps.playerActionService.getScreenDeleteBlockMessage,
     getScreenConnections: deps.playerActionService.getScreenConnections,
-    getPlaylistDeleteBlockMessage: deps.playerActionService.getPlaylistDeleteBlockMessage,
     forwardPlayerCommand: deps.playerActionService.forwardPlayerCommand,
     playerPublicBaseUrl: deps.playerPublicBaseUrl,
     requirePermission: deps.requirePermission
@@ -110,11 +121,13 @@ function registerSignageRoutes(app, deps) {
 
   registerScreenCommandRoutes(app, {
     pool: deps.pool,
+    common: deps.common,
     forwardPlayerCommand: deps.playerActionService.forwardPlayerCommand,
     getScreenConnections: deps.playerActionService.getScreenConnections,
     isClientNameAvailable: deps.isClientNameAvailable,
     withClientNameReservation: deps.withClientNameReservation,
     broadcastDashboardState: deps.broadcastDashboardState,
+    playerPublicBaseUrl: deps.playerPublicBaseUrl,
     requirePermission: deps.requirePermission
   });
 }
@@ -161,13 +174,57 @@ function registerSettingsAndContentRoutes(app, deps) {
     requirePermission: deps.requirePermission
   });
 
-  registerDataSourceRoutes(app, {
+  registerRootDataSourceRoutes(app, {
     pool: deps.pool,
     common: deps.common,
     pages: deps.pages,
     formatDashboardDate: deps.formatDashboardDate,
     getAuditUserId: deps.getAuditUserId,
     redirectAfterSave: deps.redirectAfterSave,
+    parseDateTimeLocal: deps.parseDateTimeLocal,
+    backgroundTaskQueue: deps.backgroundTaskQueue,
+    dataSourceTasks: deps.dataSourceTasks,
+    setAuthMessageCookie: deps.setAuthMessageCookie,
+    requirePermission: deps.requirePermission,
+    section: 'root'
+  });
+
+  registerApiSourceRoutes(app, {
+    pool: deps.pool,
+    common: deps.common,
+    pages: deps.pages,
+    formatDashboardDate: deps.formatDashboardDate,
+    getAuditUserId: deps.getAuditUserId,
+    redirectAfterSave: deps.redirectAfterSave,
+    parseDateTimeLocal: deps.parseDateTimeLocal,
+    backgroundTaskQueue: deps.backgroundTaskQueue,
+    dataSourceTasks: deps.dataSourceTasks,
+    setAuthMessageCookie: deps.setAuthMessageCookie,
+    requirePermission: deps.requirePermission
+  });
+
+  registerRssFeedRoutes(app, {
+    pool: deps.pool,
+    common: deps.common,
+    pages: deps.pages,
+    formatDashboardDate: deps.formatDashboardDate,
+    getAuditUserId: deps.getAuditUserId,
+    redirectAfterSave: deps.redirectAfterSave,
+    parseDateTimeLocal: deps.parseDateTimeLocal,
+    backgroundTaskQueue: deps.backgroundTaskQueue,
+    dataSourceTasks: deps.dataSourceTasks,
+    setAuthMessageCookie: deps.setAuthMessageCookie,
+    requirePermission: deps.requirePermission
+  });
+
+  registerTimetableRoutes(app, {
+    pool: deps.pool,
+    common: deps.common,
+    pages: deps.pages,
+    formatDashboardDate: deps.formatDashboardDate,
+    getAuditUserId: deps.getAuditUserId,
+    redirectAfterSave: deps.redirectAfterSave,
+    parseDateTimeLocal: deps.parseDateTimeLocal,
     backgroundTaskQueue: deps.backgroundTaskQueue,
     dataSourceTasks: deps.dataSourceTasks,
     setAuthMessageCookie: deps.setAuthMessageCookie,

src/web/routes/settings/background-tasks-page.js

@@ -1,9 +1,9 @@
 // Background tasks settings page renderer.
 
-const { renderView } = require('../../view');
-const { hasAnyPermission } = require('../../../rbac');
-const { buildPagination, buildQueryString } = require('../../lib/pagination');
-const { parsePageNumber, normalizeSortDirection, sortRows, createSearchMatcher } = require('../../lib/list-query');
+const { renderView } = require('#src/web/view');
+const { hasAnyPermission } = require('#src/rbac');
+const { buildPagination, buildQueryString } = require('#src/web/lib/pagination');
+const { parsePageNumber, normalizeSortDirection, sortRows, createSearchMatcher } = require('#src/web/lib/list-query');
 
 const TASKS_PER_PAGE = 25;
 const QUEUE_PAGE_URL = '/settings/tasks-background';

src/web/routes/settings/background-tasks.js

@@ -1,6 +1,6 @@
 // Settings route registration for the background tasks page.
 
-const { hasAnyPermission } = require('../../../rbac');
+const { hasAnyPermission, PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 function redirectToLogin(res, setAuthMessageCookie) {
   if (typeof setAuthMessageCookie === 'function') {
@@ -21,7 +21,7 @@ function requireSettingsAccess(setAuthMessageCookie) {
       return next();
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);
@@ -38,7 +38,7 @@ function requireScheduledSettingsAccess(setAuthMessageCookie) {
       return next();
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);
@@ -86,7 +86,7 @@ module.exports = function registerSettingsRoutes(app, deps) {
         return next();
       }
 
-      const error = new Error('You do not have permission to access this area.');
+      const error = new Error(PERMISSION_DENIED_MESSAGE);
       error.statusCode = 403;
       error.expose = true;
       next(error);
@@ -99,7 +99,7 @@ module.exports = function registerSettingsRoutes(app, deps) {
     }
 
     if (!hasAnyPermission(req.currentUser, ['scheduled-tasks.allow'])) {
-      const error = new Error('You do not have permission to access this area.');
+      const error = new Error(PERMISSION_DENIED_MESSAGE);
       error.statusCode = 403;
       error.expose = true;
       return next(error);

src/web/routes/settings/fonts.js

@@ -1,8 +1,8 @@
 // Settings route registration for managed fonts.
 
 const fs = require('fs');
-const { hasAnyPermission } = require('../../../rbac');
-const fontLibrary = require('../../lib/media/font-library');
+const { hasAnyPermission, PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
+const fontLibrary = require('#src/web/lib/media/font-library');
 
 function normalizeFontFamilyName(value) {
   return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase();
@@ -62,7 +62,7 @@ function requireFontsAccess(setAuthMessageCookie) {
       return next();
     }
 
-    const error = new Error('You do not have permission to access this area.');
+    const error = new Error(PERMISSION_DENIED_MESSAGE);
     error.statusCode = 403;
     error.expose = true;
     next(error);