Prepare v2.0.0 release

Reviewed-on: LZStealth/pulse-signage#4

.env.example

@@ -1,17 +1,15 @@
-NODE_ENV=production
+PULSE_SIGNAGE_IMAGE=git.lzstealth.com/lzstealth/pulse-signage:latest
-WEB_PORT=3000
+PULSE_SIGNAGE_SHARED_SECRET=9f4c2d8b7a1e4c0f8b2d6a9e1c7f3b5d4a8e6c1f0b9d7a3c5e2f1a6b8d4c0e7
-PLAYER_PORT=3001
 
 DB_HOST=mysql
 DB_PORT=3306
-DB_NAME=signage
+DB_NAME=pulse-signage
-DB_USER=signage_user
+DB_USER=pulse-signage
 DB_PASSWORD=signage_password
 MYSQL_ROOT_PASSWORD=root_password
 
-PLAYER_INTERNAL_BASE_URL=http://player:3001
+PLAYER_INTERNAL_BASE_URL=http://player:8081
-PLAYER_PUBLIC_BASE_URL=http://localhost:3001
+PLAYER_PUBLIC_BASE_URL=http://localhost:8081
-PULSE_SIGNAGE_SHARED_SECRET=
 
 SESSION_MAX_AGE_DAYS=14
 DASHBOARD_REFRESH_INTERVAL_MS=2000

.gitea/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,48 @@
+name: Bug report
+about: Report a problem with Pulse Signage
+labels:
+  - bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please provide enough detail to reproduce the problem.
+
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: List the actions that trigger the bug.
+      placeholder: |
+        1. Open the dashboard
+        2. Change the playlist on a screen
+        3. Save and wait for playback to refresh
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: What you expected to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual behavior
+      description: What actually happened.
+    validations:
+      required: true
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: Include version, browser, player setup, and any relevant logs.
+      placeholder: |
+        Version:
+        Browser:
+        Player version:
+        Logs:

.gitea/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Documentation
+    url: https://git.lzstealth.com/LZStealth/pulse-signage
+    about: Check the project repository and docs before opening an issue.

.gitea/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,37 @@
+name: Feature request
+about: Suggest an improvement or new capability
+labels:
+  - enhancement
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Share the problem you're trying to solve and the outcome you'd like.
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem statement
+      description: What limitation or workflow gap are you trying to address?
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposal
+    attributes:
+      label: Proposed solution
+      description: Describe the change you would like to see.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: Any workarounds or other approaches you've considered.
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Mockups, screenshots, examples, or related links.

CHANGELOG.md

@@ -2,11 +2,122 @@
 
 All notable changes to this project will be documented in this file.
 
-## Unreleased
+## 2.0.0 - 2026-07-28
 
-- No unreleased changes recorded yet.
+### Breaking Changes
 
-## 1.5.7 - 2026-07-25
+- Breaking database schema changes were introduced in this release; existing databases may require migration or recreation before upgrading.
+
+### Added
+
+- Broader player and admin release coverage across onboarding, playlist playback, background task handling, and media-region support.
+
+### Changed
+
+- The database bootstrap and migration flow were reorganized, with shared DB helpers split out to support the newer schema layout.
+- Admin and signage views were updated around the newer list, playlist, and RBAC behavior, including playlist scheduling and screen/client actions.
+- Player runtime, onboarding, and region rendering were tightened so HTML, image, RSS, RTMP, text, video, and webpage regions follow the newer playback flow.
+- Background task, upload sync, and data-source refresh handling were refined across the web app and startup paths.
+- Docker, environment, README, and websocket/api documentation were refreshed to match the current release structure.
+
+### Fixed
+
+- Client name checks, playlist editing, and slide/media synchronization paths were adjusted to better preserve existing references during admin and player updates.
+
+## 1.5.16 - 2026-07-26
+
+### Added
+
+- Background task handling was split into dedicated handler and scheduling modules, with startup data-source refreshes and unused-upload cleanup wired through the shared setup flow.
+
+### Changed
+
+- The admin shell, shared theme, and toast presentation were refreshed to match the newer layout and notification styling.
+- Playlist scheduling now handles video-duration toggles and already-assigned slides more clearly in the picker and editor UI.
+- RBAC and settings views were updated to align with the revised admin layout and shared table behavior.
+
+### Fixed
+
+- Template and slide thumbnail refreshes now run through the background task queue so template-wide thumbnail regeneration stays consistent.
+
+## 1.5.15 - 2026-07-26
+
+### Changed
+
+- Player slide transitions now start and pause video playback around the fade window so video regions stay aligned with the slide boundary.
+- Dashboard action cards now use a three-column grid on wider layouts.
+
+### Fixed
+
+- Slide video duration probes now preserve sub-second precision instead of rounding to whole seconds.
+
+## 1.5.14 - 2026-07-26
+
+### Fixed
+
+- Dashboard client action icons now render valid Bootstrap Icon classes without duplicating the `bi-` prefix.
+
+## 1.5.13 - 2026-07-26
+
+### Added
+
+- Shared table helpers for pagination, search, and sorting across the admin and signage views.
+
+### Changed
+
+- Refreshed the shared admin shell and moved common UI behavior into shared layout and helper modules.
+- Reworked dashboard, background tasks, RBAC, and signage list pages to use the newer shared table and state flow.
+- Updated the admin and player branding assets and tightened the page scripts around the new layout structure.
+
+## 1.5.12 - 2026-07-26
+
+### Changed
+
+- Shared web UI helpers are now loaded once in the admin shell and reused across the dashboard, admin, and template editor.
+- Template lists now show slide counts, and the template editor tracks which regions are already in use.
+
+### Fixed
+
+- Template editing now blocks removal of regions that are still referenced by slides.
+
+## 1.5.11 - 2026-07-26
+
+### Added
+
+- Video regions are now supported end to end, including player rendering, admin editing, playlist scheduling, and player sync.
+
+### Changed
+
+- The slide, template, and playlist flows were updated so video content can be created, configured, and scheduled alongside existing region types.
+- Player rendering and related media handling now recognize the new video region implementation.
+
+### Fixed
+
+- Region and upload handling were adjusted so video media syncs cleanly through the player and web admin paths.
+
+## 1.5.10 - 2026-07-26
+
+### Added
+
+- Scheduled background tasks now have their own settings page, separate permission gate, and manual run action alongside the main queue view.
+- The slide editor now includes a refreshed preview/sidebar layout and a cropper-based image upload flow.
+
+### Changed
+
+- Background task and admin list views now use richer pagination and filtering so queue state, task sources, and recurring jobs stay easier to navigate.
+- The admin shell and shared styling were refreshed to support the updated settings pages, slide editor layout, and task table presentation.
+
+### Fixed
+
+- Upload sync and slide thumbnail refresh handling were tightened so slide changes queue follow-up work more reliably.
+
+## 1.5.9 - 2026-07-26
+
+### Fixed
+
+- User creation now keeps the role checkboxes inside the add-user form so selected roles are submitted correctly.
+
+## 1.5.8 - 2026-07-25
 
 ### Fixed
 

README.md

@@ -19,12 +19,6 @@ It runs as two connected services:
 
 Admin permissions are split into CRUD actions per section, so you can grant read-only, editor, creator, or delete access separately.
 
-## 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.
-
-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.
-
 ## What You Need
 
 - Docker and Docker Compose
@@ -47,35 +41,46 @@ You can change the initial admin credentials with these optional environment var
 
 ## Configuration
 
-The app reads its settings from environment variables.
+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 `127.0.0.1`
+- `DB_HOST` - MySQL host, default `mysql`
 - `DB_PORT` - MySQL port, default `3306`
-- `DB_NAME` - database name, default `signage`
+- `DB_NAME` - database name, default `pulse-signage`
-- `DB_USER` - database user, default `signage_user`
+- `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`
-### Web Admin App
-
-- `WEB_PORT` - admin app port, default `3000`
-- `PLAYER_INTERNAL_BASE_URL` - player address used by the server, default `http://player:3001`
-- `PLAYER_PUBLIC_BASE_URL` - player address shown in browser links, default `http://localhost:3001`
-- `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
 
 ### Player App
 
-- `PLAYER_PORT` - player port, default `3001`
+- `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`
+- `DASHBOARD_REFRESH_INTERVAL_MS` - dashboard refresh interval in milliseconds, default `2000`
+- `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 on port `3000`
+- `web` - the admin app exposed on container port `8080`
-- `player` - the signage player on port `3001`
+- `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.
@@ -89,4 +94,12 @@ Outside Docker, the web app and player do not have to use the same upload locati
 - 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.
+- 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.

docker-compose.yml

@@ -4,10 +4,8 @@ services:
     container_name: signage-web
     restart: unless-stopped
     ports:
-      - "3000:3000"
+      - "8080:8080"
     environment:
-      NODE_ENV: ${NODE_ENV:-production}
-      WEB_PORT: ${WEB_PORT:-3000}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}
       DB_NAME: ${DB_NAME:-signage}
@@ -24,7 +22,7 @@ services:
       PASSWORD_HASH_ITERATIONS: ${PASSWORD_HASH_ITERATIONS:-310000}
     volumes:
       - media:/app/media
-    command: ["npm", "run", "start:web"]
+    command: ["node", "src/web.js"]
     depends_on:
       mysql:
         condition: service_healthy
@@ -36,11 +34,9 @@ services:
     container_name: signage-player
     restart: unless-stopped
     ports:
-      - "3001:3001"
+      - "8081:8081"
     environment:
-      NODE_ENV: ${NODE_ENV:-production}
+      PLAYER_PUBLIC_BASE_URL: ${PLAYER_PUBLIC_BASE_URL:-http://localhost:8081}
-      PLAYER_PORT: ${PLAYER_PORT:-3001}
-      PLAYER_PUBLIC_BASE_URL: ${PLAYER_PUBLIC_BASE_URL:-http://localhost:3001}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}
@@ -49,7 +45,7 @@ services:
       DB_PASSWORD: ${DB_PASSWORD:-signage_password}
     volumes:
       - media:/app/media
-    command: ["npm", "run", "start:player"]
+    command: ["node", "src/player.js"]
     depends_on:
       mysql:
         condition: service_healthy
@@ -60,8 +56,6 @@ services:
     image: mysql:8.4
     container_name: signage-mysql
     restart: unless-stopped
-    ports:
-      - "3306:3306"
     environment:
       MYSQL_DATABASE: ${DB_NAME:-signage}
       MYSQL_USER: ${DB_USER:-signage_user}

docs/api.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Player service base URL: `http://localhost:3001`
+Player service base URL: `http://localhost:8081`
 
 This document covers the player HTTP surface only. The admin dashboard exposes its own routes for screen commands and onboarding management.
 

docs/schema.md

@@ -0,0 +1,176 @@
+# Database Schema
+
+This app creates and maintains its schema at startup through `src/db/index.js`.
+The sections below summarize the current tables and their purpose.
+
+Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_at` and `modified_at` when a table supports auditing.
+
+## Admin
+
+- `a_users` - admin user accounts and password hashes.
+- `a_roles` - named role definitions.
+- `a_permissions` - permission catalog seeded from the application constants.
+- `a_role_permissions` - many-to-many mapping between roles and permissions.
+- `a_user_roles` - many-to-many mapping between users and roles.
+- `a_sessions` - persisted admin session tokens.
+
+### `a_users`
+
+- `id`, `name`, `username`, `password_hash`, `password_salt`, `password_iterations`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `username` is unique.
+
+### `a_roles`
+
+- `id`, `name`, `description`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `name` is unique.
+
+### `a_permissions`
+
+- `id`, `permission_key`, `name`, `section_name`, `description`, `created_at`, `modified_at`
+- `permission_key` is unique.
+
+### `a_role_permissions`
+
+- `role_id`, `permission_id`, `created_at`, `modified_at`
+- Foreign keys:
+        - `role_id` -> `a_roles.id`
+        - `permission_id` -> `a_permissions.id`
+- Composite primary key: `(role_id, permission_id)`
+
+### `a_user_roles`
+
+- `user_id`, `role_id`, `created_at`, `modified_at`
+- Foreign keys:
+        - `user_id` -> `a_users.id`
+        - `role_id` -> `a_roles.id`
+- Composite primary key: `(user_id, role_id)`
+
+### `a_sessions`
+
+- `session_hash`, `user_id`, `expires_at`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `session_hash` is the primary key.
+- Foreign key:
+        - `user_id` -> `a_users.id`
+
+## Content
+
+- `c_canvas_sizes` - reusable canvas presets for templates.
+- `c_playlists` - playlist definitions and playback options.
+- `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_canvas_sizes`
+
+- `id`, `name`, `width`, `height`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `(width, height)` is unique.
+
+### `c_playlists`
+
+- `id`, `name`, `fade_between_slides`, `skip_unavailable_rtmp`, `created_at`, `created_by`, `modified_at`, `modified_by`
+
+### `c_templates`
+
+- `id`, `name`, `canvas_size_id`, `background_image_path`, `background_color`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `canvas_size_id` -> `c_canvas_sizes.id` with `ON DELETE SET NULL`
+
+### `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`
+- Foreign key:
+        - `template_id` -> `c_templates.id` with `ON DELETE CASCADE`
+
+### `c_slides`
+
+- `id`, `title`, `template_id`, `content_json`, `thumbnail_path`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `template_id` -> `c_templates.id` with `ON DELETE SET NULL`
+
+### `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`
+- Foreign keys:
+        - `playlist_id` -> `c_playlists.id` with `ON DELETE CASCADE`
+        - `slide_id` -> `c_slides.id` with `ON DELETE CASCADE`
+        
+### `d_screens`
+
+- `id`, `name`, `slug`, `playlist_id`, `player_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `slug` is unique.
+- Foreign keys:
+        - `playlist_id` -> `c_playlists.id` with `ON DELETE SET NULL`
+        - `player_id` -> `d_players.id` with `ON DELETE SET NULL`
+
+## Onboarding
+
+- `d_onboarding_devices` - device-to-screen bindings and onboarded client names.
+
+### `d_onboarding_devices`
+
+- `device_id`, `client_name`, `screen_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `device_id` is the primary key.
+- Foreign key:
+        - `screen_id` -> `d_screens.id` with `ON DELETE SET NULL`
+
+## Integrations
+
+- `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_rss_feeds`
+
+- `id`, `name`, `feed_url`, `update_interval_value`, `update_interval_unit`, `item_limit`, `created_at`, `created_by`, `modified_at`, `modified_by`
+
+### `i_rss_feed_items`
+
+- `id`, `rss_feed_id`, `position`, `item_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- Foreign key:
+        - `rss_feed_id` -> `i_rss_feeds.id` with `ON DELETE CASCADE`
+- Unique key:
+        - `(rss_feed_id, position)`
+
+### `i_api_sources`
+
+- `id`, `name`, `api_url`, `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`
+
+## Operations
+
+- `o_background_tasks` - queue and history for background jobs.
+
+### `o_background_tasks`
+
+- `id`, `task_key`, `task_type`, `title`, `category`, `status`, `payload_json`, `metadata_json`, `attempts`, `created_at`, `created_by`, `started_at`, `finished_at`, `error_message`
+- Indexed by `status`, `task_key`, and `task_type`.
+
+## 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.
+- The migration module stays in place for future releases, but this version treats the current schema as the install baseline.
+
+```mermaid
+erDiagram
+        A_USERS ||--o{ A_USER_ROLES : has
+        A_ROLES ||--o{ A_USER_ROLES : assigned_to
+        A_ROLES ||--o{ A_ROLE_PERMISSIONS : has
+        A_PERMISSIONS ||--o{ A_ROLE_PERMISSIONS : granted_to
+        A_USERS ||--o{ A_SESSIONS : owns
+
+        C_CANVAS_SIZES ||--o{ C_TEMPLATES : 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
+
+        D_PLAYERS ||--o{ D_SCREENS : assigned_to
+        C_PLAYLISTS ||--o{ D_SCREENS : uses
+        D_SCREENS ||--o{ D_ONBOARDING_DEVICES : binds
+
+        I_RSS_FEEDS ||--o{ I_RSS_FEED_ITEMS : caches
+        O_BACKGROUND_TASKS {
+                BIGINT id
+        }
+```

docs/websocket.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Player service websocket base URL: `ws://localhost:3001`
+Player service websocket base URL: `ws://localhost:8081`
 
 This document uses OpenAPI-style sections, but stays in plain markdown.
 
@@ -28,29 +28,7 @@ Access: internal-only. The web backend subscribes with signed request headers; b
 
 ### Messages from player to server
 
-The player sends two message types:
+The player sends a state snapshot message.
-
-- `hello`
-- `state`
-
-#### `hello`
-
-Example payload:
-
-```json
-{
-  "type": "hello",
-  "clientId": "client-id",
-  "clientName": "friendly label",
-  "deviceId": "device-id",
-  "userAgent": "browser ua",
-  "page": "http://.../screen/demo",
-  "viewport": { "width": 1920, "height": 1080 },
-  "paused": false,
-  "blackout": false,
-  "currentSlide": null
-}
-```
 
 #### `state`
 
@@ -67,16 +45,13 @@ Example payload:
   "viewport": { "width": 1920, "height": 1080 },
   "paused": false,
   "blackout": false,
-  "currentSlide": {
+  "currentSlide": null
-    "id": 12,
-    "title": "Main Slide",
-    "kind": "image",
-    "playlistSignature": "..."
-  }
 }
 ```
 
-The server recognizes `clientId`, `clientName`, `deviceId`, `userAgent`, `page`, `viewport`, `paused`, `blackout`, and `currentSlide` from player messages. When `currentSlide` is present, the player includes the active slide id, title, kind, and playlist signature.
+When `currentSlide` is present, the player includes the active slide id, title, kind, and playlist signature.
+
+The server recognizes `clientId`, `clientName`, `deviceId`, `userAgent`, `page`, `viewport`, `paused`, `blackout`, and `currentSlide` from state messages.
 
 ### Messages from server to player
 
@@ -92,15 +67,13 @@ The server sends command messages with:
 
 Supported commands:
 
+- `blackout`
+- `next`
+- `pause`
+- `previous`
 - `refresh`
 - `reload`
 - `redirect`
-- `pause`
-- `blackout`
-- `previous`
-- `next`
-- `left`
-- `right`
 - `setclientname`
 
 #### `refresh`
@@ -130,10 +103,10 @@ Use `false` to restore and `true` to blackout.
 #### `redirect`
 Requests the player page to navigate to a new location. The destination is supplied as `url` by the caller that forwarded the command.
 
-#### `previous` / `left`
+#### `previous`
 Moves to the previous slide.
 
-#### `next` / `right`
+#### `next`
 Moves to the next slide.
 
 #### `setclientname`

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "1.5.4",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "1.5.4",
+      "version": "2.0.0",
       "dependencies": {
         "@sparticuz/chromium": "^137.0.0",
         "bootstrap-icons": "1.11.3",

package.json

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

src/common.js

@@ -1,10 +1,26 @@
+const dbCommon = require('./db/common');
 const db = require('./db');
+const dbBootstrap = require('./db/bootstrap');
 const data = require('./data');
 const player = require('./player/render');
 
+function getSearchQuery(req) {
+  return String(req && req.query && req.query.search || '').trim();
+}
+
+function getSortQuery(req) {
+  return String(req && req.query && req.query.sort || '').trim();
+}
+
+function getSortDirectionQuery(req) {
+  return String(req && req.query && req.query.direction || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+}
+
 module.exports = {
-  createPool: db.createPool,
+  createPool: dbCommon.createPool,
+  pruneStaleOnboardingDevices: dbCommon.pruneStaleOnboardingDevices,
   ensureSchema: db.ensureSchema,
+  bootstrapDatabase: dbBootstrap.bootstrapDatabase,
   slugify: data.slugify,
   uniqueScreenSlug: data.uniqueScreenSlug,
   parseJsonSafe: data.parseJsonSafe,
@@ -14,6 +30,9 @@ module.exports = {
   fetchTemplatesPage: data.fetchTemplatesPage,
   fetchCanvasSizesPage: data.fetchCanvasSizesPage,
   fetchScreensPage: data.fetchScreensPage,
+  getSearchQuery: getSearchQuery,
+  getSortQuery: getSortQuery,
+  getSortDirectionQuery: getSortDirectionQuery,
   fetchPlaylistById: data.fetchPlaylistById,
   fetchApiSourcesData: data.fetchApiSourcesData,
   fetchApiSourcesPage: data.fetchApiSourcesPage,

src/data/admin.js

@@ -1,47 +1,58 @@
 const { fetchPagedRows } = require('./utils');
 
 async function fetchAdminData(pool) {
-  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM playlists ORDER BY id DESC');
+  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM c_playlists ORDER BY id DESC');
-  const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM canvas_sizes ORDER BY width ASC, height ASC, name ASC');
+  const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC');
   const [templates] = await pool.query(`
     SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
-    FROM slide_templates st
+    FROM c_templates st
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    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, font_family, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM slide_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, font_family, 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.body, s.template_id, s.content_json, s.media_path, s.media_type, 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, cs.width AS canvas_width, cs.height AS canvas_height,
-    FROM slides s
+           (SELECT COUNT(DISTINCT ps.playlist_id) FROM c_playlist_slides ps WHERE ps.slide_id = s.id) AS playlist_count
-    LEFT JOIN slide_templates st ON st.id = s.template_id
+    FROM c_slides s
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    LEFT JOIN c_templates st ON st.id = s.template_id
+    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     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
-    FROM screens s
+    FROM d_screens s
-    LEFT JOIN playlists p ON p.id = s.playlist_id
+    LEFT JOIN c_playlists p ON p.id = s.playlist_id
     ORDER BY s.id DESC
   `);
   const [playlistSlides] = await pool.query(`
-    SELECT ps.id, ps.playlist_id, ps.position, ps.duration_seconds, 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.media_path, sl.media_type, 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.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
-    FROM playlist_slides ps
+    FROM c_playlist_slides ps
-    JOIN slides sl ON sl.id = ps.slide_id
+    JOIN c_slides sl ON sl.id = ps.slide_id
-    LEFT JOIN slide_templates st ON st.id = sl.template_id
+    LEFT JOIN c_templates st ON st.id = sl.template_id
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_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 };
 }
 
-async function fetchPlaylistsPage(pool, page, pageSize) {
+async function fetchPlaylistsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT p.id, p.name, p.fade_between_slides, p.skip_unavailable_rtmp, p.created_at, p.modified_at, p.created_by, p.modified_by,
+        selectSql: `SELECT p.id, p.name, p.fade_between_slides, p.skip_unavailable_rtmp, p.created_at, p.modified_at, p.created_by, p.modified_by,
-            (SELECT COUNT(*) FROM playlist_slides ps WHERE ps.playlist_id = p.id) AS slide_count
+          (SELECT COUNT(*) FROM c_playlist_slides ps WHERE ps.playlist_id = p.id) AS slide_count
-     FROM playlists p
+         FROM c_playlists p
      ORDER BY p.id DESC`,
-    countSql: 'SELECT COUNT(*) AS count FROM playlists',
+    countSql: 'SELECT COUNT(*) AS count FROM c_playlists',
+    searchColumns: ['p.name'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'p.name',
+      slides: 'slide_count',
+      created: 'p.created_at',
+      modified: 'p.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -49,14 +60,25 @@ async function fetchPlaylistsPage(pool, page, pageSize) {
   return Object.assign({ playlists: paged.rows }, paged);
 }
 
-async function fetchSlidesPage(pool, page, pageSize) {
+async function fetchSlidesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT s.id, s.title, s.body, s.template_id, s.content_json, s.media_path, s.media_type, 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
+    selectSql: `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,
-     FROM slides s
+          (SELECT COUNT(DISTINCT ps.playlist_id) FROM c_playlist_slides ps WHERE ps.slide_id = s.id) AS playlist_count
-     LEFT JOIN slide_templates st ON st.id = s.template_id
+    FROM c_slides s
-     LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    LEFT JOIN c_templates st ON st.id = s.template_id
+    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
      ORDER BY s.id DESC`,
-    countSql: 'SELECT COUNT(*) AS count FROM slides',
+    countSql: 'SELECT COUNT(*) AS count FROM c_slides',
+    searchColumns: ['s.title', 'st.name', 's.content_json'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      title: 's.title',
+      template: 'st.name',
+      created: 's.created_at',
+      modified: 's.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -64,15 +86,28 @@ async function fetchSlidesPage(pool, page, pageSize) {
   return Object.assign({ slides: paged.rows }, paged);
 }
 
-async function fetchTemplatesPage(pool, page, pageSize) {
+async function fetchTemplatesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
     selectSql: `SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height,
-           (SELECT COUNT(*) FROM slide_template_regions str WHERE str.template_id = st.id) AS region_count
+        (SELECT COUNT(*) FROM c_template_regions str WHERE str.template_id = st.id) AS region_count,
-    FROM slide_templates st
+           (SELECT COUNT(*) FROM c_slides s WHERE s.template_id = st.id) AS slide_count
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    FROM c_templates st
+    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     ORDER BY st.id DESC`,
-    countSql: 'SELECT COUNT(*) AS count FROM slide_templates',
+    countSql: 'SELECT COUNT(*) AS count FROM c_templates',
+    searchColumns: ['st.name', 'st.background_image_path', 'st.background_color', 'cs.name'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'st.name',
+      canvas: ['cs.width', 'cs.height', 'cs.name'],
+      regions: 'region_count',
+      slides: 'slide_count',
+      created: 'st.created_at',
+      modified: 'st.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -80,13 +115,24 @@ async function fetchTemplatesPage(pool, page, pageSize) {
   return Object.assign({ templates: paged.rows }, paged);
 }
 
-async function fetchCanvasSizesPage(pool, page, pageSize) {
+async function fetchCanvasSizesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
     selectSql: `SELECT id, name, width, height, created_at, modified_at, created_by, modified_by,
-            (SELECT COUNT(*) FROM slide_templates st WHERE st.canvas_size_id = canvas_sizes.id) AS template_count
+                 (SELECT COUNT(*) FROM c_templates st WHERE st.canvas_size_id = c_canvas_sizes.id) AS template_count
-     FROM canvas_sizes
+               FROM c_canvas_sizes
      ORDER BY width ASC, height ASC, name ASC`,
-    countSql: 'SELECT COUNT(*) AS count FROM canvas_sizes',
+    countSql: 'SELECT COUNT(*) AS count FROM c_canvas_sizes',
+    searchColumns: ['name', 'width', 'height'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      dimensions: ['width', 'height', 'name'],
+      templates: 'template_count',
+      created: 'created_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -94,13 +140,24 @@ async function fetchCanvasSizesPage(pool, page, pageSize) {
   return Object.assign({ canvasSizes: paged.rows }, paged);
 }
 
-async function fetchScreensPage(pool, page, pageSize) {
+async function fetchScreensPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
     selectSql: `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
-     FROM screens s
+     FROM d_screens s
-     LEFT JOIN playlists p ON p.id = s.playlist_id
+     LEFT JOIN c_playlists p ON p.id = s.playlist_id
      ORDER BY s.id DESC`,
-    countSql: 'SELECT COUNT(*) AS count FROM screens',
+    countSql: 'SELECT COUNT(*) AS count FROM d_screens',
+    searchColumns: ['s.name', 's.slug', 'p.name'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 's.name',
+      url: 's.slug',
+      playlist: 'p.name',
+      created: 's.created_at',
+      modified: 's.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });

src/data/api-sources.js

@@ -9,16 +9,29 @@ function normalizeUpdateIntervalUnit(value) {
 
 async function fetchApiSourcesData(pool) {
   const [apiSources] = await pool.query(
-    'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM api_sources ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC'
   );
 
   return { apiSources: apiSources };
 }
 
-async function fetchApiSourcesPage(pool, page, pageSize) {
+async function fetchApiSourcesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM api_sources ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC',
-    countSql: 'SELECT COUNT(*) AS count FROM api_sources',
+    countSql: 'SELECT COUNT(*) AS count FROM i_api_sources',
+    searchColumns: ['name', 'api_url', 'last_pull_error'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      url: 'api_url',
+      interval: ['update_interval_value', 'update_interval_unit'],
+      last_pulled: 'last_pulled_at',
+      last_response: 'last_response_status',
+      created: 'created_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -28,7 +41,7 @@ async function fetchApiSourcesPage(pool, page, pageSize) {
 
 async function fetchApiSourceById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM api_sources WHERE id = ?',
+    'SELECT id, name, api_url, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources WHERE id = ?',
     [id]
   );
 

src/data/canvas-sizes.js

@@ -1,14 +1,24 @@
 const { fetchPagedRows } = require('./utils');
 
 async function fetchCanvasSizesData(pool) {
-  const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM canvas_sizes ORDER BY width ASC, height ASC, name ASC');
+  const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC');
   return { canvasSizes };
 }
 
-async function fetchCanvasSizesPage(pool, page, pageSize) {
+async function fetchCanvasSizesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM canvas_sizes ORDER BY width ASC, height ASC, name ASC',
+    selectSql: 'SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC',
-    countSql: 'SELECT COUNT(*) AS count FROM canvas_sizes',
+    countSql: 'SELECT COUNT(*) AS count FROM c_canvas_sizes',
+    searchColumns: ['name', 'width', 'height'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      dimensions: ['width', 'height', 'name'],
+      created: 'created_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -17,7 +27,7 @@ async function fetchCanvasSizesPage(pool, page, pageSize) {
 }
 
 async function fetchCanvasSizeById(pool, id) {
-  const [rows] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM canvas_sizes WHERE id = ?', [id]);
+  const [rows] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes WHERE id = ?', [id]);
   return rows[0] || null;
 }
 

src/data/client-name-check.js

@@ -26,7 +26,7 @@ async function isClientNameAvailable(pool, clientName, excludeDeviceId, liveConn
     if (pool) {
       const [deviceRows] = await pool.query(
         `SELECT device_id
-         FROM player_onboarding_devices
+         FROM d_onboarding_devices
          WHERE client_name IS NOT NULL
            AND TRIM(client_name) <> ''
            AND LOWER(TRIM(client_name)) = LOWER(TRIM(?))

src/data/playlists.js

@@ -1,5 +1,5 @@
 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 playlists WHERE id = ?', [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]);
   return rows[0] || null;
 }
 

src/data/rss-feeds.js

@@ -9,16 +9,28 @@ function normalizeUpdateIntervalUnit(value) {
 
 async function fetchRssFeedsData(pool) {
   const [rssFeeds] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM rss_feeds ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC'
   );
 
   return { rssFeeds: rssFeeds };
 }
 
-async function fetchRssFeedsPage(pool, page, pageSize) {
+async function fetchRssFeedsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM rss_feeds ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC',
-    countSql: 'SELECT COUNT(*) AS count FROM rss_feeds',
+    countSql: 'SELECT COUNT(*) AS count FROM i_rss_feeds',
+    searchColumns: ['name', 'feed_url'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      url: 'feed_url',
+      interval: ['update_interval_value', 'update_interval_unit'],
+      items: 'item_limit',
+      created: 'created_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -28,7 +40,7 @@ async function fetchRssFeedsPage(pool, page, pageSize) {
 
 async function fetchRssFeedById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM rss_feeds WHERE id = ?',
+    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds WHERE id = ?',
     [id]
   );
 

src/data/screens.js

@@ -13,7 +13,7 @@ async function uniqueScreenSlug(pool, baseSlug, excludeId) {
   let counter = 2;
   while (true) {
     const params = [candidate];
-    let sql = 'SELECT id FROM screens WHERE slug = ?';
+    let sql = 'SELECT id FROM d_screens WHERE slug = ?';
     if (excludeId !== undefined && excludeId !== null) {
       sql += ' AND id <> ?';
       params.push(excludeId);
@@ -30,15 +30,15 @@ async function uniqueScreenSlug(pool, baseSlug, excludeId) {
 async function fetchScreenById(pool, id) {
   const [rows] = 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
-    FROM screens s
+    FROM d_screens s
-    LEFT JOIN playlists p ON p.id = s.playlist_id
+    LEFT JOIN c_playlists p ON p.id = s.playlist_id
     WHERE s.id = ?
   `, [id]);
   return rows[0] || null;
 }
 
 async function fetchScreenEditData(pool) {
-  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM playlists ORDER BY id DESC');
+  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM c_playlists ORDER BY id DESC');
   return { playlists };
 }
 

src/data/slides.js

@@ -27,11 +27,11 @@ function sanitizeRichText(html) {
 
 async function fetchSlideById(pool, id) {
   const [slides] = await pool.query(`
-    SELECT s.id, s.title, s.body, s.template_id, s.content_json, s.media_path, s.media_type, s.thumbnail_path, s.created_at, s.modified_at,
+    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
-    FROM slides s
+    FROM c_slides s
-    LEFT JOIN slide_templates st ON st.id = s.template_id
+    LEFT JOIN c_templates st ON st.id = s.template_id
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     WHERE s.id = ?
   `, [id]);
   if (!slides.length) {
@@ -92,6 +92,18 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         type: 'image',
         value: uploaded ? `/media/uploads/${uploaded.filename}` : String(existing || '').trim() || ((existingContent && existingContent[region.region_key]) ? existingContent[region.region_key].value : '')
       };
+    } else if (region.region_type === 'video') {
+      const uploaded = filesByField[`region_video_${region.id}`];
+      const existing = body[`existing_region_video_${region.id}`];
+      const durationValue = body[`existing_region_video_duration_${region.id}`];
+      const existingDuration = existingContent && existingContent[region.region_key] ? Number(existingContent[region.region_key].duration_seconds || 0) : 0;
+      const parsedDuration = Number(durationValue || existingDuration || 0);
+      const normalizedDuration = Math.round(parsedDuration * 1000) / 1000;
+      content[region.region_key] = {
+        type: 'video',
+        value: uploaded ? `/media/uploads/${uploaded.filename}` : String(existing || '').trim() || ((existingContent && existingContent[region.region_key]) ? existingContent[region.region_key].value : ''),
+        duration_seconds: Number.isFinite(normalizedDuration) && normalizedDuration > 0 ? normalizedDuration : null
+      };
     } else if (region.region_type === 'webpage') {
       const submitted = body[`region_webpage_${region.id}`];
       const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key].value : '';
@@ -186,21 +198,15 @@ async function buildSlidePayload(pool, req, existingSlide) {
   if (template) {
     return {
       title,
-      body: existingSlide ? existingSlide.body : null,
       templateId: template.id,
-      contentJson: JSON.stringify(buildTemplateContent(template, req.body, filesByField, existingContent)),
+      contentJson: JSON.stringify(buildTemplateContent(template, req.body, filesByField, existingContent))
-      mediaPath: null,
-      mediaType: null
     };
   }
 
   return {
     title,
-    body: existingSlide ? existingSlide.body : null,
     templateId: null,
-    contentJson: existingSlide ? existingSlide.content_json : null,
+    contentJson: existingSlide ? existingSlide.content_json : null
-    mediaPath: existingSlide ? existingSlide.media_path : null,
-    mediaType: existingSlide ? existingSlide.media_type : null
   };
 }
 

src/data/templates.js

@@ -1,6 +1,6 @@
 const { parseJsonSafe, readFormArray } = require('./utils');
 
-const ALLOWED_TEMPLATE_REGION_TYPES = ['text', 'image', 'webpage', 'html', 'rtmp', 'rss', 'api'];
+const ALLOWED_TEMPLATE_REGION_TYPES = ['text', 'image', 'video', 'webpage', 'html', 'rtmp', 'rss', 'api'];
 const FONT_FAMILY_REGION_TYPES = ['text', 'html', 'rss', 'api'];
 
 function sanitizeBackgroundColor(value) {
@@ -50,15 +50,15 @@ async function fetchTemplateById(pool, id) {
   const [templates] = await pool.query(`
     SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
-    FROM slide_templates st
+    FROM c_templates st
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     WHERE st.id = ?
   `, [id]);
   if (!templates.length) {
     return null;
   }
   const template = templates[0];
-  const [regions] = await pool.query('SELECT id, template_id, region_key, region_type, label, font_family, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM slide_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, font_family, 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]);
   template.regions = regions;
   return template;
 }
@@ -67,11 +67,11 @@ async function fetchTemplatesData(pool) {
   const [templates] = await pool.query(`
     SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
-    FROM slide_templates st
+    FROM c_templates st
-    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    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, font_family, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM slide_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, font_family, 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');
   return { templates, templateRegions };
 }
 
@@ -167,7 +167,7 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
 
   let resolvedCanvasSizeId = canvasSizeId;
   if (resolvedCanvasSizeId) {
-    const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM canvas_sizes WHERE id = ?', [resolvedCanvasSizeId]);
+    const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes WHERE id = ?', [resolvedCanvasSizeId]);
     const canvasSize = canvasSizes[0];
     if (!canvasSize) {
       const error = new Error('Canvas size not found.');

src/data/utils.js

@@ -27,23 +27,239 @@ function normalizePageNumber(value) {
   return Math.max(1, pageNumber);
 }
 
+function escapeLikeValue(value) {
+  return String(value || '').replace(/[\\%_]/g, '\\$&');
+}
+
+function normalizeSortDirection(value) {
+  return String(value || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+}
+
+function buildSortOrderClause(sortColumns, sortKey, sortDirection) {
+  const normalizedSortKey = String(sortKey || '').trim();
+  const normalizedSortDirection = normalizeSortDirection(sortDirection);
+  const sortColumnMap = sortColumns && typeof sortColumns === 'object' ? sortColumns : {};
+  const sortExpression = normalizedSortKey ? sortColumnMap[normalizedSortKey] : null;
+
+  if (!sortExpression) {
+    return {
+      clause: '',
+      sortKey: normalizedSortKey,
+      sortDirection: normalizedSortDirection
+    };
+  }
+
+  const expressions = Array.isArray(sortExpression) ? sortExpression : [sortExpression];
+  const orderBySql = expressions.map(function (expression) {
+    return `${expression} ${normalizedSortDirection.toUpperCase()}`;
+  }).join(', ');
+
+  return {
+    clause: ` ORDER BY ${orderBySql}`,
+    sortKey: normalizedSortKey,
+    sortDirection: normalizedSortDirection
+  };
+}
+
+function findTopLevelOrderByIndex(sql) {
+  const text = String(sql || '');
+  let depth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let lastOrderByIndex = -1;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const character = text[index];
+    const previousCharacter = index > 0 ? text[index - 1] : '';
+
+    if (inSingleQuote) {
+      if (character === '\'' && previousCharacter !== '\\') {
+        inSingleQuote = false;
+      }
+      continue;
+    }
+
+    if (inDoubleQuote) {
+      if (character === '"' && previousCharacter !== '\\') {
+        inDoubleQuote = false;
+      }
+      continue;
+    }
+
+    if (inBacktick) {
+      if (character === '`') {
+        inBacktick = false;
+      }
+      continue;
+    }
+
+    if (character === '\'') {
+      inSingleQuote = true;
+      continue;
+    }
+
+    if (character === '"') {
+      inDoubleQuote = true;
+      continue;
+    }
+
+    if (character === '`') {
+      inBacktick = true;
+      continue;
+    }
+
+    if (character === '(') {
+      depth += 1;
+      continue;
+    }
+
+    if (character === ')' && depth > 0) {
+      depth -= 1;
+      continue;
+    }
+
+    if (depth === 0 && /[oO]/.test(character)) {
+      const remaining = text.slice(index);
+      if (/^order\s+by\b/i.test(remaining)) {
+        lastOrderByIndex = index;
+      }
+    }
+  }
+
+  return lastOrderByIndex;
+}
+
+function findTopLevelWhereIndex(sql) {
+  const text = String(sql || '');
+  let depth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let lastWhereIndex = -1;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const character = text[index];
+    const previousCharacter = index > 0 ? text[index - 1] : '';
+
+    if (inSingleQuote) {
+      if (character === '\'' && previousCharacter !== '\\') {
+        inSingleQuote = false;
+      }
+      continue;
+    }
+
+    if (inDoubleQuote) {
+      if (character === '"' && previousCharacter !== '\\') {
+        inDoubleQuote = false;
+      }
+      continue;
+    }
+
+    if (inBacktick) {
+      if (character === '`') {
+        inBacktick = false;
+      }
+      continue;
+    }
+
+    if (character === '\'') {
+      inSingleQuote = true;
+      continue;
+    }
+
+    if (character === '"') {
+      inDoubleQuote = true;
+      continue;
+    }
+
+    if (character === '`') {
+      inBacktick = true;
+      continue;
+    }
+
+    if (character === '(') {
+      depth += 1;
+      continue;
+    }
+
+    if (character === ')' && depth > 0) {
+      depth -= 1;
+      continue;
+    }
+
+    if (depth === 0 && /[wW]/.test(character)) {
+      const remaining = text.slice(index);
+      if (/^where\b/i.test(remaining)) {
+        lastWhereIndex = index;
+      }
+    }
+  }
+
+  return lastWhereIndex;
+}
+
+function buildSearchFilter(searchColumns, searchTerm) {
+  const columns = Array.isArray(searchColumns) ? searchColumns.map(function (column) {
+    return String(column || '').trim();
+  }).filter(Boolean) : [];
+  const normalizedSearchTerm = String(searchTerm || '').trim().toLowerCase();
+
+  if (!columns.length || !normalizedSearchTerm) {
+    return {
+      clause: '',
+      params: []
+    };
+  }
+
+  const likeValue = `%${escapeLikeValue(normalizedSearchTerm)}%`;
+  return {
+    clause: ` WHERE (${columns.map(function (column) {
+      return `LOWER(COALESCE(CAST(${column} AS CHAR), '')) LIKE ? ESCAPE '\\\\'`;
+    }).join(' OR ')})`,
+    params: columns.map(function () {
+      return likeValue;
+    })
+  };
+}
+
 async function fetchPagedRows(pool, options) {
   const selectSql = String(options && options.selectSql || '').trim();
   const countSql = String(options && options.countSql || '').trim();
   const params = Array.isArray(options && options.params) ? options.params : [];
+  const searchFilter = buildSearchFilter(options && options.searchColumns, options && options.searchTerm);
+  const sortOrder = buildSortOrderClause(options && options.sortColumns, options && options.sortKey, options && options.sortDirection);
   const pageSize = Math.max(1, Number(options && options.pageSize) || 10);
   const currentPage = normalizePageNumber(options && options.page);
 
   if (!selectSql || !countSql) {
     throw new Error('fetchPagedRows requires selectSql and countSql.');
   }
+  const orderByIndex = findTopLevelOrderByIndex(selectSql);
+  let baseSelectSql = selectSql;
+  let orderBySql = '';
 
-  const [countRows] = await pool.query(countSql, params);
+  if (orderByIndex >= 0) {
+    baseSelectSql = selectSql.slice(0, orderByIndex).trim();
+    orderBySql = selectSql.slice(orderByIndex).trim();
+  }
+
+  const hasTopLevelWhere = findTopLevelWhereIndex(baseSelectSql) >= 0;
+  const searchClause = searchFilter.clause ? (hasTopLevelWhere ? searchFilter.clause.replace(/^\s*WHERE\s+/i, ' AND ') : searchFilter.clause) : '';
+  const filteredSelectSql = `${baseSelectSql}${searchClause}`;
+  const countQuery = searchFilter.clause
+    ? `SELECT COUNT(*) AS count FROM (${filteredSelectSql}) AS filtered_rows`
+    : countSql;
+  const countParams = searchFilter.clause ? params.concat(searchFilter.params) : params;
+  const [countRows] = await pool.query(countQuery, countParams);
   const totalItems = Number(countRows && countRows[0] && countRows[0].count) || 0;
   const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
   const safeCurrentPage = Math.min(currentPage, totalPages);
   const offset = (safeCurrentPage - 1) * pageSize;
-  const [rows] = await pool.query(`${selectSql} LIMIT ? OFFSET ?`, params.concat([pageSize, offset]));
+
+  const activeOrderBySql = sortOrder.clause || (orderBySql ? ` ${orderBySql}` : '');
+  const selectQuery = `${filteredSelectSql}${activeOrderBySql} LIMIT ? OFFSET ?`;
+  const [rows] = await pool.query(selectQuery, params.concat(searchFilter.params, [pageSize, offset]));
 
   return {
     rows: rows || [],
@@ -77,6 +293,10 @@ module.exports = {
   parseJsonSafe,
   readFormArray,
   normalizePageNumber,
+  normalizeSortDirection,
+  buildSortOrderClause,
+  findTopLevelOrderByIndex,
+  buildSearchFilter,
   fetchPagedRows,
   fetchDuplicateName
 };

src/db/bootstrap.js

@@ -0,0 +1,72 @@
+const { hashPassword } = require('../auth');
+const { PERMISSIONS, DEFAULT_ROLE } = require('../rbac');
+
+async function bootstrapDatabase(pool) {
+  for (const permission of PERMISSIONS) {
+    await pool.query(
+      `INSERT INTO a_permissions (permission_key, name, section_name, description, created_by, modified_by)
+       VALUES (?, ?, ?, ?, ?, ?)
+       ON DUPLICATE KEY UPDATE name = VALUES(name), section_name = VALUES(section_name), description = VALUES(description), modified_by = VALUES(modified_by)` ,
+      [permission.key, permission.name, permission.sectionName, permission.description || null, null, null]
+    );
+  }
+
+  const [userCountRows] = await pool.query('SELECT COUNT(*) AS user_count FROM a_users');
+  const username = String(process.env.DEFAULT_ADMIN_USERNAME || 'admin').trim() || 'admin';
+  if (!userCountRows.length || Number(userCountRows[0].user_count) === 0) {
+    const name = String(process.env.DEFAULT_ADMIN_NAME || 'Admin').trim() || 'Admin';
+    const password = String(process.env.DEFAULT_ADMIN_PASSWORD || 'admin').trim() || 'admin';
+    const passwordRecord = hashPassword(password);
+    await pool.query(
+      'INSERT IGNORE INTO a_users (name, username, password_hash, password_salt, password_iterations, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
+      [name, username, passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, null, null]
+    );
+  }
+
+  await pool.query('UPDATE a_users SET name = username WHERE name IS NULL OR name = ""');
+
+  await pool.query(
+    `INSERT INTO a_roles (role_key, name, description, created_by, modified_by)
+     VALUES (?, ?, ?, ?, ?)
+     ON DUPLICATE KEY UPDATE name = VALUES(name), description = VALUES(description), modified_by = VALUES(modified_by)`,
+    [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, null]
+  );
+
+  const [defaultRoleRows] = await pool.query('SELECT id FROM a_roles WHERE role_key = ? LIMIT 1', [DEFAULT_ROLE.key]);
+  const defaultRoleId = defaultRoleRows.length ? Number(defaultRoleRows[0].id) : null;
+  if (defaultRoleId) {
+    await pool.query(
+      `INSERT IGNORE INTO a_role_permissions (role_id, permission_id, created_by, modified_by)
+       SELECT ?, id, NULL, NULL FROM a_permissions`,
+      [defaultRoleId]
+    );
+  }
+
+  if (!userCountRows.length || Number(userCountRows[0].user_count) === 0) {
+    if (defaultRoleId) {
+      await pool.query(
+        `INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by)
+         SELECT id, ?, NULL, NULL FROM a_users`,
+        [defaultRoleId]
+      );
+    }
+  }
+
+  const [defaultAdminRows] = await pool.query('SELECT id FROM a_users WHERE username = ? LIMIT 1', [username]);
+  if (defaultAdminRows.length) {
+    const defaultAdminId = Number(defaultAdminRows[0].id);
+    const [defaultAdminRoleRows] = await pool.query('SELECT COUNT(*) AS role_count FROM a_user_roles WHERE user_id = ?', [defaultAdminId]);
+    if (!defaultAdminRoleRows.length || Number(defaultAdminRoleRows[0].role_count) === 0) {
+      if (defaultRoleId) {
+        await pool.query(
+          'INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)',
+          [defaultAdminId, defaultRoleId, null, null]
+        );
+      }
+    }
+  }
+}
+
+module.exports = {
+  bootstrapDatabase
+};

src/db/common.js

@@ -0,0 +1,26 @@
+const mysql = require('mysql2/promise');
+
+function createPool() {
+  return mysql.createPool({
+    host: process.env.DB_HOST || '127.0.0.1',
+    port: Number(process.env.DB_PORT || 3306),
+    user: process.env.DB_USER || 'signage_user',
+    password: process.env.DB_PASSWORD || 'signage_password',
+    database: process.env.DB_NAME || 'signage',
+    waitForConnections: true,
+    connectionLimit: 10,
+    namedPlaceholders: true
+  });
+}
+
+async function pruneStaleOnboardingDevices(pool) {
+  await pool.query(
+    `DELETE FROM d_onboarding_devices
+     WHERE modified_at < (CURRENT_TIMESTAMP - INTERVAL 1 MINUTE)`
+  );
+}
+
+module.exports = {
+  createPool,
+  pruneStaleOnboardingDevices
+};

src/db/index.js

@@ -1,31 +1,6 @@
-const mysql = require('mysql2/promise');
-const { hashPassword } = require('../auth');
-const { PERMISSIONS, DEFAULT_ROLE } = require('../rbac');
-const migrations = require('./migrations');
-
-function createPool() {
-  return mysql.createPool({
-    host: process.env.DB_HOST || '127.0.0.1',
-    port: Number(process.env.DB_PORT || 3306),
-    user: process.env.DB_USER || 'signage_user',
-    password: process.env.DB_PASSWORD || 'signage_password',
-    database: process.env.DB_NAME || 'signage',
-    waitForConnections: true,
-    connectionLimit: 10,
-    namedPlaceholders: true
-  });
-}
-
-async function pruneStaleOnboardingDevices(pool) {
-  await pool.query(
-    `DELETE FROM player_onboarding_devices
-     WHERE modified_at < (CURRENT_TIMESTAMP - INTERVAL 1 MINUTE)`
-  );
-}
-
 async function ensureSchema(pool, options) {
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS canvas_sizes (
+    CREATE TABLE IF NOT EXISTS c_canvas_sizes (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       width INT NOT NULL,
@@ -39,7 +14,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS playlists (
+    CREATE TABLE IF NOT EXISTS c_playlists (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       fade_between_slides TINYINT(1) NOT NULL DEFAULT 0,
@@ -52,7 +27,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS slide_templates (
+    CREATE TABLE IF NOT EXISTS c_templates (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       canvas_size_id INT NULL,
@@ -66,7 +41,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    INSERT IGNORE INTO canvas_sizes (name, width, height) VALUES
+    INSERT IGNORE INTO c_canvas_sizes (name, width, height) VALUES
       ('Full HD', 1920, 1080),
       ('HD', 1280, 720),
       ('4K UHD', 3840, 2160),
@@ -75,12 +50,13 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS slide_template_regions (
+    CREATE TABLE IF NOT EXISTS c_template_regions (
       id INT AUTO_INCREMENT PRIMARY KEY,
       template_id INT NOT NULL,
       region_key VARCHAR(100) NOT NULL,
       region_type VARCHAR(20) NOT NULL,
       label VARCHAR(255) NOT NULL,
+      font_family VARCHAR(100) NULL,
       lock_ratio VARCHAR(20) NULL,
       x INT NOT NULL DEFAULT 0,
       y INT NOT NULL DEFAULT 0,
@@ -95,14 +71,11 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS slides (
+    CREATE TABLE IF NOT EXISTS c_slides (
       id INT AUTO_INCREMENT PRIMARY KEY,
       title VARCHAR(255) NOT NULL,
-      body TEXT NULL,
       template_id INT NULL,
       content_json JSON NULL,
-      media_path VARCHAR(512) NULL,
-      media_type VARCHAR(100) NULL,
       thumbnail_path VARCHAR(512) NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
@@ -112,12 +85,13 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS playlist_slides (
+    CREATE TABLE IF NOT EXISTS c_playlist_slides (
       id INT AUTO_INCREMENT PRIMARY KEY,
       playlist_id INT NOT NULL,
       slide_id INT NOT NULL,
       position INT NOT NULL DEFAULT 0,
-      duration_seconds INT NOT NULL DEFAULT 10,
+      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,
@@ -128,27 +102,28 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      CONSTRAINT fk_playlist_slides_playlist FOREIGN KEY (playlist_id) REFERENCES playlists(id) ON DELETE CASCADE,
+      CONSTRAINT fk_playlist_slides_playlist FOREIGN KEY (playlist_id) REFERENCES c_playlists(id) ON DELETE CASCADE,
-      CONSTRAINT fk_playlist_slides_slide FOREIGN KEY (slide_id) REFERENCES slides(id) ON DELETE CASCADE
+      CONSTRAINT fk_playlist_slides_slide FOREIGN KEY (slide_id) REFERENCES c_slides(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS screens (
+    CREATE TABLE IF NOT EXISTS d_screens (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       slug VARCHAR(255) NOT NULL UNIQUE,
       playlist_id INT NULL,
+      player_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,
-      CONSTRAINT fk_screens_playlist FOREIGN KEY (playlist_id) REFERENCES playlists(id) ON DELETE SET NULL
+      CONSTRAINT fk_screens_playlist FOREIGN KEY (playlist_id) REFERENCES c_playlists(id) ON DELETE SET NULL
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS rss_feeds (
+    CREATE TABLE IF NOT EXISTS i_rss_feeds (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       feed_url VARCHAR(1024) NOT NULL,
@@ -163,7 +138,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS rss_feed_items (
+    CREATE TABLE IF NOT EXISTS i_rss_feed_items (
       id INT AUTO_INCREMENT PRIMARY KEY,
       rss_feed_id INT NOT NULL,
       position INT NOT NULL,
@@ -172,13 +147,13 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      CONSTRAINT fk_rss_feed_items_rss_feed FOREIGN KEY (rss_feed_id) REFERENCES rss_feeds(id) ON DELETE CASCADE,
+      CONSTRAINT fk_rss_feed_items_rss_feed FOREIGN KEY (rss_feed_id) REFERENCES i_rss_feeds(id) ON DELETE CASCADE,
       UNIQUE KEY uq_rss_feed_items_feed_position (rss_feed_id, position)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS api_sources (
+    CREATE TABLE IF NOT EXISTS i_api_sources (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       api_url VARCHAR(1024) NOT NULL,
@@ -197,7 +172,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS player_onboarding_devices (
+    CREATE TABLE IF NOT EXISTS d_onboarding_devices (
       device_id VARCHAR(128) PRIMARY KEY,
       client_name VARCHAR(255) NULL,
       screen_id INT NULL,
@@ -205,12 +180,12 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      CONSTRAINT fk_player_onboarding_devices_screen FOREIGN KEY (screen_id) REFERENCES screens(id) ON DELETE SET NULL
+      CONSTRAINT fk_player_onboarding_devices_screen FOREIGN KEY (screen_id) REFERENCES d_screens(id) ON DELETE SET NULL
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS users (
+    CREATE TABLE IF NOT EXISTS a_users (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NULL,
       username VARCHAR(255) NOT NULL UNIQUE,
@@ -225,7 +200,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS roles (
+    CREATE TABLE IF NOT EXISTS a_roles (
       id INT AUTO_INCREMENT PRIMARY KEY,
       role_key VARCHAR(100) NOT NULL UNIQUE,
       name VARCHAR(255) NOT NULL,
@@ -238,7 +213,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS permissions (
+    CREATE TABLE IF NOT EXISTS a_permissions (
       id INT AUTO_INCREMENT PRIMARY KEY,
       permission_key VARCHAR(100) NOT NULL UNIQUE,
       name VARCHAR(255) NOT NULL,
@@ -251,17 +226,8 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
-  for (const permission of PERMISSIONS) {
-    await pool.query(
-      `INSERT INTO permissions (permission_key, name, section_name, description, created_by, modified_by)
-       VALUES (?, ?, ?, ?, ?, ?)
-       ON DUPLICATE KEY UPDATE name = VALUES(name), section_name = VALUES(section_name), description = VALUES(description), modified_by = VALUES(modified_by)` ,
-      [permission.key, permission.name, permission.sectionName, permission.description || null, null, null]
-    );
-  }
-
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS role_permissions (
+    CREATE TABLE IF NOT EXISTS a_role_permissions (
       role_id INT NOT NULL,
       permission_id INT NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -269,13 +235,13 @@ async function ensureSchema(pool, options) {
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
       PRIMARY KEY (role_id, permission_id),
-      CONSTRAINT fk_role_permissions_role FOREIGN KEY (role_id) REFERENCES roles(id) ON DELETE CASCADE,
+      CONSTRAINT fk_role_permissions_role FOREIGN KEY (role_id) REFERENCES a_roles(id) ON DELETE CASCADE,
-      CONSTRAINT fk_role_permissions_permission FOREIGN KEY (permission_id) REFERENCES permissions(id) ON DELETE CASCADE
+      CONSTRAINT fk_role_permissions_permission FOREIGN KEY (permission_id) REFERENCES a_permissions(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS user_roles (
+    CREATE TABLE IF NOT EXISTS a_user_roles (
       user_id INT NOT NULL,
       role_id INT NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -283,13 +249,13 @@ async function ensureSchema(pool, options) {
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
       PRIMARY KEY (user_id, role_id),
-      CONSTRAINT fk_user_roles_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+      CONSTRAINT fk_user_roles_user FOREIGN KEY (user_id) REFERENCES a_users(id) ON DELETE CASCADE,
-      CONSTRAINT fk_user_roles_role FOREIGN KEY (role_id) REFERENCES roles(id) ON DELETE CASCADE
+      CONSTRAINT fk_user_roles_role FOREIGN KEY (role_id) REFERENCES a_roles(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS auth_sessions (
+    CREATE TABLE IF NOT EXISTS a_sessions (
       session_hash CHAR(64) PRIMARY KEY,
       user_id INT NOT NULL,
       expires_at DATETIME NOT NULL,
@@ -297,12 +263,12 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       last_used_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      CONSTRAINT fk_auth_sessions_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+      CONSTRAINT fk_auth_sessions_user FOREIGN KEY (user_id) REFERENCES a_users(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS background_tasks (
+    CREATE TABLE IF NOT EXISTS o_background_tasks (
       id BIGINT AUTO_INCREMENT PRIMARY KEY,
       task_key VARCHAR(191) NULL,
       task_type VARCHAR(100) NOT NULL,
@@ -321,61 +287,8 @@ async function ensureSchema(pool, options) {
       INDEX idx_background_tasks_type (task_type)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
-
-  const [userCountRows] = await pool.query('SELECT COUNT(*) AS user_count FROM users');
-  const username = String(process.env.DEFAULT_ADMIN_USERNAME || 'admin').trim() || 'admin';
-  if (!userCountRows.length || Number(userCountRows[0].user_count) === 0) {
-    const name = String(process.env.DEFAULT_ADMIN_NAME || 'Admin').trim() || 'Admin';
-    const password = String(process.env.DEFAULT_ADMIN_PASSWORD || 'admin').trim() || 'admin';
-    const passwordRecord = hashPassword(password);
-    await pool.query(
-      'INSERT INTO users (name, username, password_hash, password_salt, password_iterations, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
-      [name, username, passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, null, null]
-    );
-  }
-
-  await pool.query('UPDATE users SET name = username WHERE name IS NULL OR name = ""');
-
-  await pool.query(
-    `INSERT INTO roles (role_key, name, description, created_by, modified_by)
-     VALUES (?, ?, ?, ?, ?)
-     ON DUPLICATE KEY UPDATE name = VALUES(name), description = VALUES(description), modified_by = VALUES(modified_by)`,
-    [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, null]
-  );
-
-  await migrations.runMigrations(pool, options || {});
-
-  if (!userCountRows.length || Number(userCountRows[0].user_count) === 0) {
-    const [roleRows] = await pool.query('SELECT id FROM roles WHERE role_key = ? LIMIT 1', [DEFAULT_ROLE.key]);
-    const defaultRoleId = roleRows.length ? Number(roleRows[0].id) : null;
-    if (defaultRoleId) {
-      await pool.query(
-        `INSERT IGNORE INTO user_roles (user_id, role_id, created_by, modified_by)
-         SELECT id, ?, NULL, NULL FROM users`,
-        [defaultRoleId]
-      );
-    }
-  }
-
-  const [defaultAdminRows] = await pool.query('SELECT id FROM users WHERE username = ? LIMIT 1', [username]);
-  if (defaultAdminRows.length) {
-    const defaultAdminId = Number(defaultAdminRows[0].id);
-    const [defaultAdminRoleRows] = await pool.query('SELECT COUNT(*) AS role_count FROM user_roles WHERE user_id = ?', [defaultAdminId]);
-    if (!defaultAdminRoleRows.length || Number(defaultAdminRoleRows[0].role_count) === 0) {
-      const [roleRows] = await pool.query('SELECT id FROM roles WHERE role_key = ? LIMIT 1', [DEFAULT_ROLE.key]);
-      const defaultRoleId = roleRows.length ? Number(roleRows[0].id) : null;
-      if (defaultRoleId) {
-        await pool.query(
-          'INSERT IGNORE INTO user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)',
-          [defaultAdminId, defaultRoleId, null, null]
-        );
-      }
-    }
-  }
 }
 
 module.exports = {
-  createPool,
   ensureSchema,
-  pruneStaleOnboardingDevices
 };

src/db/migrations.js

@@ -1,830 +1,10 @@
-const fs = require('fs');
-const path = require('path');
 const { version: appVersion } = require('../../package.json');
 
-function parseVersion(value) {
+async function runMigrations(_pool, _options) {
-  const parts = String(value || '0.0.0').split('.').map(function (part) {
+  return;
-    return Math.max(0, Number(part) || 0);
-  });
-
-  return {
-    major: parts[0] || 0,
-    minor: parts[1] || 0,
-    patch: parts[2] || 0
-  };
-}
-
-function compareVersions(left, right) {
-  const leftVersion = parseVersion(left);
-  const rightVersion = parseVersion(right);
-
-  if (leftVersion.major !== rightVersion.major) {
-    return leftVersion.major - rightVersion.major;
-  }
-  if (leftVersion.minor !== rightVersion.minor) {
-    return leftVersion.minor - rightVersion.minor;
-  }
-  if (leftVersion.patch !== rightVersion.patch) {
-    return leftVersion.patch - rightVersion.patch;
-  }
-
-  return 0;
-}
-
-async function addColumnIfMissing(pool, tableName, columnName, columnDefinition) {
-  const [rows] = await pool.query(
-    `SELECT COUNT(*) AS column_count
-     FROM information_schema.columns
-     WHERE table_schema = DATABASE()
-       AND table_name = ?
-       AND column_name = ?`,
-    [tableName, columnName]
-  );
-
-  if (rows.length && Number(rows[0].column_count) > 0) {
-    return;
-  }
-
-  await pool.query(`ALTER TABLE \`${tableName}\` ADD COLUMN \`${columnName}\` ${columnDefinition}`);
-}
-
-async function dropColumnIfPresent(pool, tableName, columnName) {
-  const [rows] = await pool.query(
-    `SELECT COUNT(*) AS column_count
-     FROM information_schema.columns
-     WHERE table_schema = DATABASE()
-       AND table_name = ?
-       AND column_name = ?`,
-    [tableName, columnName]
-  );
-
-  if (!rows.length || Number(rows[0].column_count) === 0) {
-    return;
-  }
-
-  await pool.query(`ALTER TABLE \`${tableName}\` DROP COLUMN \`${columnName}\``);
-}
-
-async function addForeignKeyIfMissing(pool, tableName, columnName, constraintName, referencedTable, referencedColumn, onDeleteAction) {
-  const [rows] = await pool.query(
-    `SELECT COUNT(*) AS constraint_count
-     FROM information_schema.table_constraints
-     WHERE table_schema = DATABASE()
-       AND table_name = ?
-       AND constraint_name = ?`,
-    [tableName, constraintName]
-  );
-
-  if (rows.length && Number(rows[0].constraint_count) > 0) {
-    return;
-  }
-
-  await pool.query(
-    `ALTER TABLE \`${tableName}\`
-     ADD CONSTRAINT \`${constraintName}\`
-     FOREIGN KEY (\`${columnName}\`) REFERENCES \`${referencedTable}\`(\`${referencedColumn}\`)
-     ON DELETE ${onDeleteAction}
-     ON UPDATE CASCADE`
-  );
-}
-
-async function hasSingleColumnUniqueIndex(pool, tableName, columnName) {
-  const [rows] = await pool.query(
-    `SELECT INDEX_NAME, COUNT(*) AS column_count
-     FROM information_schema.statistics
-     WHERE table_schema = DATABASE()
-       AND table_name = ?
-       AND non_unique = 0
-       AND column_name = ?
-     GROUP BY INDEX_NAME`,
-    [tableName, columnName]
-  );
-
-  return (rows || []).some(function (row) {
-    return Number(row.column_count) === 1;
-  });
-}
-
-async function addUniqueIndexIfMissing(pool, tableName, columnName, indexName) {
-  const hasUniqueIndex = await hasSingleColumnUniqueIndex(pool, tableName, columnName);
-  if (hasUniqueIndex) {
-    return;
-  }
-
-  await pool.query(`ALTER TABLE \`${tableName}\` ADD UNIQUE KEY \`${indexName}\` (\`${columnName}\`)`);
-}
-
-async function dedupePermissionRows(pool) {
-  const [rows] = await pool.query('SELECT id, permission_key FROM permissions ORDER BY id ASC');
-  const canonicalIdByKey = new Map();
-  const duplicateRowsByKey = new Map();
-
-  for (const row of rows || []) {
-    const permissionKey = String((row && row.permission_key) || '').trim().toLowerCase();
-    const permissionId = Number(row.id);
-    if (!permissionKey || !Number.isInteger(permissionId) || permissionId <= 0) {
-      continue;
-    }
-
-    if (!canonicalIdByKey.has(permissionKey)) {
-      canonicalIdByKey.set(permissionKey, permissionId);
-      continue;
-    }
-
-    if (!duplicateRowsByKey.has(permissionKey)) {
-      duplicateRowsByKey.set(permissionKey, []);
-    }
-    duplicateRowsByKey.get(permissionKey).push(permissionId);
-  }
-
-  if (!duplicateRowsByKey.size) {
-    return;
-  }
-
-  for (const [permissionKey, duplicateIds] of duplicateRowsByKey.entries()) {
-    const canonicalId = canonicalIdByKey.get(permissionKey);
-    for (const duplicateId of duplicateIds) {
-      await pool.query(
-        'UPDATE IGNORE role_permissions SET permission_id = ? WHERE permission_id = ?',
-        [canonicalId, duplicateId]
-      );
-    }
-  }
-
-  const duplicateIds = [];
-  for (const duplicateList of duplicateRowsByKey.values()) {
-    duplicateIds.push.apply(duplicateIds, duplicateList);
-  }
-
-  if (duplicateIds.length) {
-    await pool.query('DELETE FROM permissions WHERE id IN (?)', [duplicateIds]);
-  }
-}
-
-async function addAuditColumns(pool, tableName) {
-  await addColumnIfMissing(pool, tableName, 'created_by', 'INT NULL');
-  await addColumnIfMissing(pool, tableName, 'modified_by', 'INT NULL');
-
-  await pool.query(
-    `UPDATE \`${tableName}\` t
-     LEFT JOIN users created_user ON created_user.id = t.created_by
-     SET t.created_by = NULL
-     WHERE t.created_by IS NOT NULL`
-  );
-  await pool.query(
-    `UPDATE \`${tableName}\` t
-     LEFT JOIN users modified_user ON modified_user.id = t.modified_by
-     SET t.modified_by = NULL
-     WHERE t.modified_by IS NOT NULL`
-  );
-
-  await addForeignKeyIfMissing(pool, tableName, 'created_by', `fk_${tableName}_created_by`, 'users', 'id', 'SET NULL');
-  await addForeignKeyIfMissing(pool, tableName, 'modified_by', `fk_${tableName}_modified_by`, 'users', 'id', 'SET NULL');
-}
-
-async function hasColumn(pool, tableName, columnName) {
-  const [rows] = await pool.query(
-    `SELECT COUNT(*) AS column_count
-     FROM information_schema.columns
-     WHERE table_schema = DATABASE()
-       AND table_name = ?
-       AND column_name = ?`,
-    [tableName, columnName]
-  );
-
-  return rows.length && Number(rows[0].column_count) > 0;
-}
-
-async function backfillLegacyRssFeedItemJson(pool) {
-  const [rows] = await pool.query(
-    `SELECT column_name
-     FROM information_schema.columns
-     WHERE table_schema = DATABASE()
-       AND table_name = 'rss_feed_items'`
-  );
-  const columnNames = new Set((rows || []).map(function (row) {
-    return String(row.COLUMN_NAME || row.column_name || '').trim().toLowerCase();
-  }).filter(Boolean));
-
-  if (!['title', 'link', 'pub_date', 'description'].every(function (columnName) {
-    return columnNames.has(columnName);
-  })) {
-    return;
-  }
-
-  await pool.query(
-    `UPDATE rss_feed_items
-     SET item_json = JSON_OBJECT(
-       'title', title,
-       'link', link,
-       'pubDate', pub_date,
-       'description', description
-     )
-     WHERE item_json IS NULL`
-  );
-}
-
-async function backfillLegacySlideTemplateCanvasSize(pool) {
-  const [legacyTemplateColumns] = await pool.query(`
-    SELECT COUNT(*) AS column_count
-    FROM information_schema.columns
-    WHERE table_schema = DATABASE()
-      AND table_name = 'slide_templates'
-      AND column_name IN ('canvas_width', 'canvas_height')
-  `);
-  if (!legacyTemplateColumns[0] || Number(legacyTemplateColumns[0].column_count) !== 2) {
-    return;
-  }
-
-  await pool.query(`
-    UPDATE slide_templates st
-    JOIN canvas_sizes cs ON cs.width = st.canvas_width AND cs.height = st.canvas_height
-    SET st.canvas_size_id = cs.id
-    WHERE st.canvas_size_id IS NULL
-  `);
-}
-
-function replaceUploadPrefixInValue(value) {
-  if (typeof value === 'string') {
-    return value.replace(/\/uploads\//g, '/media/');
-  }
-  if (Array.isArray(value)) {
-    return value.map(function (item) {
-      return replaceUploadPrefixInValue(item);
-    });
-  }
-  if (value && typeof value === 'object') {
-    return Object.keys(value).reduce(function (result, key) {
-      result[key] = replaceUploadPrefixInValue(value[key]);
-      return result;
-    }, {});
-  }
-  return value;
-}
-
-function replaceLegacyMediaUploadPathInValue(value) {
-  if (typeof value === 'string') {
-    if (!value.startsWith('/media/') || value.startsWith('/media/uploads/')) {
-      return value;
-    }
-    return '/media/uploads/' + path.basename(value);
-  }
-  if (Array.isArray(value)) {
-    return value.map(function (item) {
-      return replaceLegacyMediaUploadPathInValue(item);
-    });
-  }
-  if (value && typeof value === 'object') {
-    return Object.keys(value).reduce(function (result, key) {
-      result[key] = replaceLegacyMediaUploadPathInValue(value[key]);
-      return result;
-    }, {});
-  }
-  return value;
-}
-
-function parseJsonValue(value) {
-  if (value === null || value === undefined || value === '') {
-    return null;
-  }
-  if (typeof value !== 'string') {
-    return value;
-  }
-  try {
-    return JSON.parse(value);
-  } catch (_error) {
-    return value;
-  }
-}
-
-async function backfillLegacyMediaPaths(pool) {
-  const [slides] = await pool.query(`
-    SELECT id, media_path, content_json
-    FROM slides
-    WHERE media_path LIKE '/uploads/%'
-       OR content_json LIKE '%/uploads/%'
-  `);
-
-  for (const slide of slides || []) {
-    let mediaPath = String(slide.media_path || '').trim() || null;
-    let contentJson = slide.content_json;
-    let changed = false;
-
-    if (mediaPath && mediaPath.startsWith('/uploads/')) {
-      mediaPath = mediaPath.replace(/^\/uploads\//, '/media/');
-      changed = true;
-    }
-
-    const parsedContent = parseJsonValue(contentJson);
-    if (parsedContent && typeof parsedContent === 'object') {
-      const updatedContent = replaceUploadPrefixInValue(parsedContent);
-      if (JSON.stringify(updatedContent) !== JSON.stringify(parsedContent)) {
-        contentJson = JSON.stringify(updatedContent);
-        changed = true;
-      }
-    } else if (typeof parsedContent === 'string' && parsedContent.indexOf('/uploads/') !== -1) {
-      contentJson = parsedContent.replace(/\/uploads\//g, '/media/');
-      changed = true;
-    }
-
-    if (changed) {
-      await pool.query('UPDATE slides SET media_path = ?, content_json = ? WHERE id = ?', [mediaPath, contentJson, slide.id]);
-    }
-  }
-
-  const [templates] = await pool.query(`
-    SELECT id, background_image_path
-    FROM slide_templates
-    WHERE background_image_path LIKE '/uploads/%'
-  `);
-
-  for (const template of templates || []) {
-    const backgroundImagePath = String(template.background_image_path || '').trim();
-    if (!backgroundImagePath.startsWith('/uploads/')) {
-      continue;
-    }
-    await pool.query(
-      'UPDATE slide_templates SET background_image_path = ? WHERE id = ?',
-      [backgroundImagePath.replace(/^\/uploads\//, '/media/'), template.id]
-    );
-  }
-}
-
-async function moveFileIfMissing(sourcePath, targetPath) {
-  try {
-    await fs.promises.access(targetPath, fs.constants.F_OK);
-    return false;
-  } catch (_error) {
-    // target does not exist
-  }
-
-  try {
-    await fs.promises.access(sourcePath, fs.constants.F_OK);
-  } catch (_error) {
-    return false;
-  }
-
-  await fs.promises.mkdir(path.dirname(targetPath), { recursive: true });
-
-  try {
-    await fs.promises.rename(sourcePath, targetPath);
-  } catch (error) {
-    if (error && error.code === 'EXDEV') {
-      await fs.promises.copyFile(sourcePath, targetPath);
-      await fs.promises.unlink(sourcePath);
-      return true;
-    }
-    throw error;
-  }
-
-  return true;
-}
-
-async function backfillLegacyMediaUploadsToSubfolder(pool, mediaDir) {
-  const normalizedMediaDir = String(mediaDir || '').trim() ? path.resolve(String(mediaDir).trim()) : null;
-  if (!normalizedMediaDir) {
-    return;
-  }
-
-  const uploadsDir = path.join(normalizedMediaDir, 'uploads');
-  await fs.promises.mkdir(uploadsDir, { recursive: true });
-
-  const [slides] = await pool.query(`
-    SELECT id, media_path, content_json
-    FROM slides
-    WHERE media_path LIKE '/media/%'
-       OR content_json LIKE '%/media/%'
-  `);
-
-  for (const slide of slides || []) {
-    let mediaPath = String(slide.media_path || '').trim() || null;
-    let contentJson = slide.content_json;
-    let changed = false;
-
-    if (mediaPath && mediaPath.startsWith('/media/') && !mediaPath.startsWith('/media/uploads/')) {
-      const fileName = path.basename(mediaPath);
-      await moveFileIfMissing(path.join(normalizedMediaDir, fileName), path.join(uploadsDir, fileName));
-      mediaPath = '/media/uploads/' + fileName;
-      changed = true;
-    }
-
-    const parsedContent = parseJsonValue(contentJson);
-    if (parsedContent && typeof parsedContent === 'object') {
-      const updatedContent = replaceLegacyMediaUploadPathInValue(parsedContent);
-      if (JSON.stringify(updatedContent) !== JSON.stringify(parsedContent)) {
-        contentJson = JSON.stringify(updatedContent);
-        changed = true;
-      }
-    } else if (typeof parsedContent === 'string' && parsedContent.indexOf('/media/') !== -1) {
-      const updatedContent = replaceLegacyMediaUploadPathInValue(parsedContent);
-      if (updatedContent !== parsedContent) {
-        contentJson = updatedContent;
-        changed = true;
-      }
-    }
-
-    if (changed) {
-      await pool.query('UPDATE slides SET media_path = ?, content_json = ? WHERE id = ?', [mediaPath, contentJson, slide.id]);
-    }
-  }
-
-  const [templates] = await pool.query(`
-    SELECT id, background_image_path
-    FROM slide_templates
-    WHERE background_image_path LIKE '/media/%'
-  `);
-
-  for (const template of templates || []) {
-    const backgroundImagePath = String(template.background_image_path || '').trim();
-    if (!backgroundImagePath.startsWith('/media/') || backgroundImagePath.startsWith('/media/uploads/')) {
-      continue;
-    }
-
-    const fileName = path.basename(backgroundImagePath);
-    await moveFileIfMissing(path.join(normalizedMediaDir, fileName), path.join(uploadsDir, fileName));
-    await pool.query(
-      'UPDATE slide_templates SET background_image_path = ? WHERE id = ?',
-      ['/media/uploads/' + fileName, template.id]
-    );
-  }
-}
-
-async function backfillLooseMediaFilesToUploadsSubfolder(pool, mediaDir) {
-  const normalizedMediaDir = String(mediaDir || '').trim() ? path.resolve(String(mediaDir).trim()) : null;
-  if (!normalizedMediaDir) {
-    return;
-  }
-
-  const uploadsDir = path.join(normalizedMediaDir, 'uploads');
-  await fs.promises.mkdir(uploadsDir, { recursive: true });
-
-  const directoryEntries = await fs.promises.readdir(normalizedMediaDir, { withFileTypes: true });
-  for (const entry of directoryEntries || []) {
-    if (!entry || !entry.isFile()) {
-      continue;
-    }
-
-    const fileName = String(entry.name || '').trim();
-    if (!fileName) {
-      continue;
-    }
-
-    const sourcePath = path.join(normalizedMediaDir, fileName);
-    const targetPath = path.join(uploadsDir, fileName);
-    await moveFileIfMissing(sourcePath, targetPath);
-  }
-
-  const [slides] = await pool.query(`
-    SELECT id, media_path, content_json
-    FROM slides
-    WHERE media_path LIKE '/media/%'
-       OR content_json LIKE '%/media/%'
-  `);
-
-  for (const slide of slides || []) {
-    let mediaPath = String(slide.media_path || '').trim() || null;
-    let contentJson = slide.content_json;
-    let changed = false;
-
-    if (mediaPath && mediaPath.startsWith('/media/') && !mediaPath.startsWith('/media/uploads/')) {
-      mediaPath = '/media/uploads/' + path.basename(mediaPath);
-      changed = true;
-    }
-
-    const parsedContent = parseJsonValue(contentJson);
-    if (parsedContent && typeof parsedContent === 'object') {
-      const updatedContent = replaceLegacyMediaUploadPathInValue(parsedContent);
-      if (JSON.stringify(updatedContent) !== JSON.stringify(parsedContent)) {
-        contentJson = JSON.stringify(updatedContent);
-        changed = true;
-      }
-    } else if (typeof parsedContent === 'string' && parsedContent.indexOf('/media/') !== -1) {
-      const updatedContent = replaceLegacyMediaUploadPathInValue(parsedContent);
-      if (updatedContent !== parsedContent) {
-        contentJson = updatedContent;
-        changed = true;
-      }
-    }
-
-    if (changed) {
-      await pool.query('UPDATE slides SET media_path = ?, content_json = ? WHERE id = ?', [mediaPath, contentJson, slide.id]);
-    }
-  }
-
-  const [templates] = await pool.query(`
-    SELECT id, background_image_path
-    FROM slide_templates
-    WHERE background_image_path LIKE '/media/%'
-  `);
-
-  for (const template of templates || []) {
-    const backgroundImagePath = String(template.background_image_path || '').trim();
-    if (!backgroundImagePath.startsWith('/media/') || backgroundImagePath.startsWith('/media/uploads/')) {
-      continue;
-    }
-
-    const fileName = path.basename(backgroundImagePath);
-    await pool.query(
-      'UPDATE slide_templates SET background_image_path = ? WHERE id = ?',
-      ['/media/uploads/' + fileName, template.id]
-    );
-  }
-}
-
-async function ensureMigrationTable(pool) {
-  await pool.query(`
-    CREATE TABLE IF NOT EXISTS schema_migrations (
-      id INT AUTO_INCREMENT PRIMARY KEY,
-      migration_key VARCHAR(100) NOT NULL UNIQUE,
-      app_version VARCHAR(32) NOT NULL,
-      comment TEXT NOT NULL,
-      applied_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
-  `);
-}
-
-async function getAppliedMigrationRows(pool) {
-  await ensureMigrationTable(pool);
-
-  const [rows] = await pool.query(
-    'SELECT migration_key, app_version, comment, applied_at FROM schema_migrations ORDER BY id ASC'
-  );
-
-  return rows || [];
-}
-
-function getLatestAppliedVersion(rows) {
-  let latestVersion = '0.0.0';
-
-  for (const row of rows || []) {
-    const candidateVersion = String(row.app_version || '0.0.0');
-    if (compareVersions(candidateVersion, latestVersion) > 0) {
-      latestVersion = candidateVersion;
-    }
-  }
-
-  return latestVersion;
-}
-
-async function recordMigration(pool, migration) {
-  await pool.query(
-    'INSERT IGNORE INTO schema_migrations (migration_key, app_version, comment) VALUES (?, ?, ?)',
-    [migration.key, migration.version, migration.comment]
-  );
-}
-
-const migrations = [
-  {
-    key: 'interval-value-rename',
-    version: appVersion,
-    comment: 'Rename RSS and API refresh interval columns to update_interval_value so seconds and minutes share one neutral numeric field.',
-    order: 10,
-    up: async function (pool) {
-      await addColumnIfMissing(pool, 'rss_feeds', 'update_interval_value', 'INT NOT NULL DEFAULT 60');
-      await addColumnIfMissing(pool, 'rss_feeds', 'update_interval_unit', "VARCHAR(10) NOT NULL DEFAULT 'minutes'");
-      await addColumnIfMissing(pool, 'api_sources', 'update_interval_value', 'INT NOT NULL DEFAULT 60');
-      await addColumnIfMissing(pool, 'api_sources', 'update_interval_unit', "VARCHAR(10) NOT NULL DEFAULT 'minutes'");
-
-      if (await hasColumn(pool, 'rss_feeds', 'update_interval_minutes')) {
-        await pool.query(`
-          UPDATE rss_feeds
-          SET update_interval_value = update_interval_minutes
-        `);
-        await dropColumnIfPresent(pool, 'rss_feeds', 'update_interval_minutes');
-      }
-
-      if (await hasColumn(pool, 'api_sources', 'update_interval_minutes')) {
-        await pool.query(`
-          UPDATE api_sources
-          SET update_interval_value = update_interval_minutes
-        `);
-        await dropColumnIfPresent(pool, 'api_sources', 'update_interval_minutes');
-      }
-    }
-  },
-  {
-    key: 'schema-columns-current',
-    version: appVersion,
-    comment: 'Add the current table columns and audit fields that define the released schema.',
-    order: 20,
-    up: async function (pool) {
-      // v1.4.6: keep the current canvas_sizes shape available in older databases.
-      await addColumnIfMissing(pool, 'canvas_sizes', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'canvas_sizes');
-
-      // v1.4.6: playlists gained fade_between_slides plus audit fields.
-      await addColumnIfMissing(pool, 'playlists', 'fade_between_slides', 'TINYINT(1) NOT NULL DEFAULT 0');
-      await addColumnIfMissing(pool, 'playlists', 'skip_unavailable_rtmp', 'TINYINT(1) NOT NULL DEFAULT 0');
-      await addColumnIfMissing(pool, 'playlists', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'playlists');
-
-      // v1.4.6: slide_templates now store canvas sizing and background metadata.
-      await addColumnIfMissing(pool, 'slide_templates', 'canvas_size_id', 'INT NULL');
-      await addColumnIfMissing(pool, 'slide_templates', 'background_image_path', 'VARCHAR(512) NULL');
-      await addColumnIfMissing(pool, 'slide_templates', 'background_color', 'VARCHAR(32) NULL');
-      await addColumnIfMissing(pool, 'slide_templates', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'slide_templates');
-      await backfillLegacySlideTemplateCanvasSize(pool);
-
-      // v1.4.6: slide_template_regions gained font family and audit fields.
-      await addColumnIfMissing(pool, 'slide_template_regions', 'font_family', 'VARCHAR(100) NULL');
-      await addColumnIfMissing(pool, 'slide_template_regions', 'lock_ratio', 'VARCHAR(20) NULL');
-      await addColumnIfMissing(pool, 'slide_template_regions', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'slide_template_regions');
-
-      // v1.4.6: slides gained structured content and media fields.
-      await addColumnIfMissing(pool, 'slides', 'body', 'TEXT NULL');
-      await addColumnIfMissing(pool, 'slides', 'template_id', 'INT NULL');
-      await addColumnIfMissing(pool, 'slides', 'content_json', 'JSON NULL');
-      await addColumnIfMissing(pool, 'slides', 'media_path', 'VARCHAR(512) NULL');
-      await addColumnIfMissing(pool, 'slides', 'media_type', 'VARCHAR(100) NULL');
-      await addColumnIfMissing(pool, 'slides', 'thumbnail_path', 'VARCHAR(512) NULL');
-      await addColumnIfMissing(pool, 'slides', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'slides');
-
-      // v1.4.6: playlist_slides gained scheduling fields and audit fields.
-      await addColumnIfMissing(pool, 'playlist_slides', 'duration_seconds', 'INT NOT NULL DEFAULT 10');
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_mode', "VARCHAR(20) NOT NULL DEFAULT 'always'");
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_start_datetime', 'DATETIME NULL');
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_end_datetime', 'DATETIME NULL');
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_start_time', 'TIME NULL');
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_end_time', 'TIME NULL');
-      await addColumnIfMissing(pool, 'playlist_slides', 'schedule_days_json', 'JSON NULL');
-      await addColumnIfMissing(pool, 'playlist_slides', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'playlist_slides');
-
-      // v1.4.6: screens gained an optional playlist binding and audit fields.
-      await addColumnIfMissing(pool, 'screens', 'playlist_id', 'INT NULL');
-      await addColumnIfMissing(pool, 'screens', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'screens');
-
-      // v1.4.6: RSS feeds now use a neutral interval value plus unit.
-      await addColumnIfMissing(pool, 'rss_feeds', 'name', 'VARCHAR(255) NOT NULL');
-      await addColumnIfMissing(pool, 'rss_feeds', 'feed_url', 'VARCHAR(1024) NOT NULL');
-      await addColumnIfMissing(pool, 'rss_feeds', 'update_interval_value', 'INT NOT NULL DEFAULT 60');
-      await addColumnIfMissing(pool, 'rss_feeds', 'update_interval_unit', "VARCHAR(10) NOT NULL DEFAULT 'minutes'");
-      await addColumnIfMissing(pool, 'rss_feeds', 'item_limit', 'INT NOT NULL DEFAULT 1');
-      await addColumnIfMissing(pool, 'rss_feeds', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'rss_feeds');
-
-      // v1.4.6: rss_feed_items stores normalized JSON snapshots.
-      await addColumnIfMissing(pool, 'rss_feed_items', 'rss_feed_id', 'INT NOT NULL');
-      await addColumnIfMissing(pool, 'rss_feed_items', 'position', 'INT NOT NULL');
-      await addColumnIfMissing(pool, 'rss_feed_items', 'item_json', 'MEDIUMTEXT NULL');
-      await addColumnIfMissing(pool, 'rss_feed_items', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await backfillLegacyRssFeedItemJson(pool);
-
-      // v1.4.6: API sources now track their latest response snapshot.
-      await addColumnIfMissing(pool, 'api_sources', 'name', 'VARCHAR(255) NOT NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'api_url', 'VARCHAR(1024) NOT NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'update_interval_value', 'INT NOT NULL DEFAULT 60');
-      await addColumnIfMissing(pool, 'api_sources', 'update_interval_unit', "VARCHAR(10) NOT NULL DEFAULT 'minutes'");
-      await addColumnIfMissing(pool, 'api_sources', 'last_pulled_at', 'TIMESTAMP NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'last_pull_error', 'MEDIUMTEXT NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'last_response_status', 'INT NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'last_response_content_type', 'VARCHAR(255) NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'last_response_json', 'MEDIUMTEXT NULL');
-      await addColumnIfMissing(pool, 'api_sources', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'api_sources');
-
-      // v1.4.6: onboarding devices, users, roles, permissions, and link tables now carry audit fields.
-      await addColumnIfMissing(pool, 'player_onboarding_devices', 'client_name', 'VARCHAR(255) NULL');
-      await addColumnIfMissing(pool, 'player_onboarding_devices', 'screen_id', 'INT NULL');
-      await addColumnIfMissing(pool, 'player_onboarding_devices', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'player_onboarding_devices');
-
-      await addColumnIfMissing(pool, 'users', 'name', 'VARCHAR(255) NULL');
-      await addColumnIfMissing(pool, 'users', 'password_hash', 'CHAR(64) NOT NULL');
-      await addColumnIfMissing(pool, 'users', 'password_salt', 'VARCHAR(64) NOT NULL');
-      await addColumnIfMissing(pool, 'users', 'password_iterations', 'INT NOT NULL');
-      await addColumnIfMissing(pool, 'users', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'users');
-
-      await addColumnIfMissing(pool, 'roles', 'role_key', 'VARCHAR(100) NULL');
-      await addColumnIfMissing(pool, 'roles', 'description', 'TEXT NULL');
-      await addColumnIfMissing(pool, 'roles', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'roles');
-
-      await addColumnIfMissing(pool, 'permissions', 'permission_key', 'VARCHAR(100) NULL');
-      await addColumnIfMissing(pool, 'permissions', 'name', 'VARCHAR(255) NULL');
-      await addColumnIfMissing(pool, 'permissions', 'section_name', 'VARCHAR(255) NULL');
-      await addColumnIfMissing(pool, 'permissions', 'description', 'TEXT NULL');
-      await addColumnIfMissing(pool, 'permissions', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'permissions');
-      await dedupePermissionRows(pool);
-      await addUniqueIndexIfMissing(pool, 'permissions', 'permission_key', 'uq_permissions_permission_key');
-
-      await addColumnIfMissing(pool, 'role_permissions', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'role_permissions');
-
-      await addColumnIfMissing(pool, 'user_roles', 'modified_at', 'TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP');
-      await addAuditColumns(pool, 'user_roles');
-
-      await addAuditColumns(pool, 'auth_sessions');
-    }
-  },
-  {
-    key: 'playlist-skip-unavailable-rtmp',
-    version: appVersion,
-    comment: 'Add the playlist flag that skips RTMP slides when streams are unavailable.',
-    order: 21,
-    up: async function (pool) {
-      await addColumnIfMissing(pool, 'playlists', 'skip_unavailable_rtmp', 'TINYINT(1) NOT NULL DEFAULT 0');
-    }
-  },
-  {
-    key: 'slides-thumbnail-path-column',
-    version: appVersion,
-    comment: 'Backfill the slides.thumbnail_path column for databases that already recorded the broader schema migration.',
-    order: 22,
-    up: async function (pool) {
-      await addColumnIfMissing(pool, 'slides', 'thumbnail_path', 'VARCHAR(512) NULL');
-    }
-  },
-  {
-    key: 'media-path-prefix-rename',
-    version: appVersion,
-    comment: 'Rename stored media URLs from /uploads to /media so existing slides and templates keep working after the storage root move.',
-    order: 25,
-    up: async function (pool) {
-      await backfillLegacyMediaPaths(pool);
-    }
-  },
-  {
-    key: 'media-upload-subfolder-move',
-    version: appVersion,
-    comment: 'Move existing upload files and references from the media root into media/uploads.',
-    order: 26,
-    up: async function (pool, options) {
-      await backfillLegacyMediaUploadsToSubfolder(pool, options && options.mediaDir);
-    }
-  },
-  {
-    key: 'media-upload-subfolder-rescue',
-    version: appVersion,
-    comment: 'Rescan loose media files and promote them into media/uploads.',
-    order: 27,
-    up: async function (pool, options) {
-      await backfillLooseMediaFilesToUploadsSubfolder(pool, options && options.mediaDir);
-    }
-  },
-  {
-    key: 'background-tasks-table',
-    version: appVersion,
-    comment: 'Persist background tasks so queued work survives a web restart.',
-    order: 30,
-    up: async function (pool) {
-      await pool.query(`
-        CREATE TABLE IF NOT EXISTS background_tasks (
-          id BIGINT AUTO_INCREMENT PRIMARY KEY,
-          task_key VARCHAR(191) NULL,
-          task_type VARCHAR(100) NOT NULL,
-          title VARCHAR(255) NOT NULL,
-          category VARCHAR(100) NOT NULL DEFAULT 'general',
-          status VARCHAR(20) NOT NULL,
-          payload_json MEDIUMTEXT NULL,
-          metadata_json MEDIUMTEXT NULL,
-          attempts INT NOT NULL DEFAULT 0,
-          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-          started_at TIMESTAMP NULL,
-          finished_at TIMESTAMP NULL,
-          error_message MEDIUMTEXT NULL,
-          INDEX idx_background_tasks_status (status),
-          INDEX idx_background_tasks_key (task_key),
-          INDEX idx_background_tasks_type (task_type)
-        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
-      `);
-    }
-  }
-];
-
-async function runMigrations(pool, options) {
-  const appliedRows = await getAppliedMigrationRows(pool);
-  const appliedKeys = new Set((appliedRows || []).map(function (row) {
-    return String(row.migration_key || '').trim();
-  }).filter(Boolean));
-
-  const pendingMigrations = migrations
-    .filter(function (migration) {
-      return compareVersions(migration.version, appVersion) <= 0
-        && !appliedKeys.has(migration.key);
-    })
-    .sort(function (left, right) {
-      const versionOrder = compareVersions(left.version, right.version);
-      if (versionOrder !== 0) {
-        return versionOrder;
-      }
-      return Number(left.order || 0) - Number(right.order || 0);
-    });
-
-  for (const migration of pendingMigrations) {
-    await migration.up(pool, options || {});
-    await recordMigration(pool, migration);
-  }
 }
 
 module.exports = {
   appVersion: appVersion,
-  compareVersions: compareVersions,
   runMigrations: runMigrations
-};
+};

src/player.js

@@ -9,14 +9,13 @@ const { createRtmpStreamService } = require('./player/modules/rtmp-streams');
 const { normalizeDeviceId, registerPlayerOnboardingRoutes, commitDeviceBinding } = require('./player/onboarding');
 const { createOnboardingStore } = require('./player/onboarding/store');
 const { registerPlayerRoutes } = require('./player/routes');
-const { pruneStaleOnboardingDevices } = require('./db');
 
 
 // Player runtime, media API, and websocket wiring.
 async function start() {
   const app = express();
   const pool = common.createPool();
-  const PORT = Number(process.env.PLAYER_PORT || 3001);
+  const PORT = Number(process.env.PLAYER_PORT || 8081);
   const ASSET_DIR = path.join(__dirname, 'player', 'public');
   const MEDIA_DIR = path.join(__dirname, '..', 'media');
   const ONBOARDING_QUEUE_FILE = path.join(MEDIA_DIR, 'player-onboarding-queue.json');
@@ -68,9 +67,10 @@ async function start() {
   async function syncDatabaseState() {
     try {
       await common.ensureSchema(pool, { mediaDir: MEDIA_DIR });
+      await common.bootstrapDatabase(pool);
 
       if (playerRuntime.snapshotAllConnections().length > 0) {
-        await pruneStaleOnboardingDevices(pool);
+        await common.pruneStaleOnboardingDevices(pool);
       }
 
       await onboardingStore.flushBindings(function (entry) {

src/player/onboarding/index.js

@@ -74,8 +74,8 @@ async function getOnboardingStatus(pool, deviceId) {
 
   const [rows] = await pool.query(
     `SELECT d.device_id, d.client_name, d.screen_id, s.name AS screen_name, s.slug AS screen_slug, s.playlist_id
-     FROM player_onboarding_devices d
+    FROM d_onboarding_devices d
-     LEFT JOIN screens s ON s.id = d.screen_id
+    LEFT JOIN d_screens s ON s.id = d.screen_id
      WHERE d.device_id = ?`,
     [normalizedDeviceId]
   );
@@ -99,7 +99,7 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
   }
 
   return withClientNameReservation(pool, normalizedClientName, async function () {
-    const [screenRows] = await pool.query('SELECT id, name, slug FROM screens WHERE slug = ?', [normalizedScreenSlug]);
+    const [screenRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ?', [normalizedScreenSlug]);
     if (!screenRows.length) {
       throw new Error('Screen not found.');
     }
@@ -113,7 +113,7 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
     }
 
     await pool.query(
-      'INSERT INTO player_onboarding_devices (device_id, client_name, screen_id) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE client_name = VALUES(client_name), screen_id = VALUES(screen_id), modified_at = CURRENT_TIMESTAMP',
+      'INSERT INTO d_onboarding_devices (device_id, client_name, screen_id) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE client_name = VALUES(client_name), screen_id = VALUES(screen_id), modified_at = CURRENT_TIMESTAMP',
       [normalizedDeviceId, normalizedClientName, screen.id]
     );
 
@@ -218,7 +218,7 @@ function registerPlayerOnboardingRoutes(app, options) {
 
   app.get('/api/onboarding/screens', requireOnboardingPageAuth, async function (_req, res, next) {
     try {
-      const [rows] = await pool.query('SELECT id, name, slug FROM screens ORDER BY name ASC, id ASC');
+      const [rows] = await pool.query('SELECT id, name, slug FROM d_screens ORDER BY name ASC, id ASC');
       res.json({ screens: rows });
     } catch (error) {
       next(error);

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

@@ -58,7 +58,7 @@
       // ignore storage errors
     }
     if (socket && socket.readyState === WebSocket.OPEN) {
-      sendCommandHello(socket);
+      sendCommandState(socket);
     }
   }
 

src/player/player-page.script.html

@@ -13,6 +13,7 @@
   let slideMarkupCache = Object.create(null);
   let templateLayoutCache = Object.create(null);
   let templateRenderPlanCache = Object.create(null);
+  let videoRegionRenderVersion = 0;
   let renderCacheViewportKey = '';
   let index = 0;
   let timer = null;
@@ -71,13 +72,13 @@
   }
 
   // Announce the player to the command websocket.
-  function sendCommandHello(socket) {
+  function sendPlayerBootstrapState(socket) {
     if (!socket || socket.readyState !== WebSocket.OPEN) {
       return;
     }
     var clientName = getOnboardingClientName();
     socket.send(JSON.stringify({
-      type: 'hello',
+      type: 'state',
       clientId: getCommandClientId(),
       clientName: clientName || null,
       deviceId: getOnboardingDeviceId() || null,

src/player/playlist.js

@@ -56,7 +56,7 @@ function createPlayerPlaylistService(options) {
 
   async function buildScreenPlaylist(slug) {
     try {
-      const [screenRows] = await pool.query('SELECT id, name, slug, playlist_id, created_at, modified_at, created_by, modified_by FROM screens WHERE slug = ?', [slug]);
+      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: [] };
       }
@@ -73,16 +73,16 @@ function createPlayerPlaylistService(options) {
         return payloadWithoutPlaylist;
       }
 
-      const [playlistRows] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM playlists WHERE id = ?', [screen.playlist_id]);
+            const [playlistRows] = 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 = ?', [screen.playlist_id]);
       const playlist = playlistRows[0] || null;
       const [slideRows] = await pool.query(`
-        SELECT sl.id, sl.title, sl.body, sl.template_id, sl.content_json, sl.media_path, sl.media_type, sl.created_at, sl.modified_at,
+        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.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.schedule_mode, ps.schedule_start_datetime, ps.schedule_end_datetime, ps.schedule_start_time, ps.schedule_end_time, ps.schedule_days_json,
                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 playlist_slides ps
+        FROM c_playlist_slides ps
-        JOIN slides sl ON sl.id = ps.slide_id
+        JOIN c_slides sl ON sl.id = ps.slide_id
-        LEFT JOIN slide_templates st ON st.id = sl.template_id
+        LEFT JOIN c_templates st ON st.id = sl.template_id
-        LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+        LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
         WHERE ps.playlist_id = ?
         ORDER BY ps.position ASC, ps.id ASC
       `, [screen.playlist_id]);
@@ -97,35 +97,65 @@ function createPlayerPlaylistService(options) {
         [templateRows] = await pool.query(`
                 SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
                  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 slide_templates st
+          FROM c_templates st
-          LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+          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, font_family, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM slide_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, font_family, 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]);
         templateRows.forEach(function (template) {
           template.regions = regionRows.filter(function (region) { return region.template_id === template.id; });
           templatesById[template.id] = template;
         });
       }
 
+      function getVideoRegionDurationSeconds(contentJson) {
+        if (!contentJson) {
+          return null;
+        }
+
+        try {
+          const parsed = common.parseJsonSafe(contentJson) || {};
+          if (!parsed || typeof parsed !== 'object') {
+            return null;
+          }
+
+          const videoRegion = Object.keys(parsed).map(function (key) { return parsed[key]; }).find(function (region) {
+            return region && typeof region === 'object' && String(region.type || '').trim().toLowerCase() === 'video' && Number(region.duration_seconds || 0) > 0;
+          });
+
+          const duration = Math.round(Number(videoRegion && videoRegion.duration_seconds || 0) * 1000) / 1000;
+          return Number.isFinite(duration) && duration > 0 ? duration : null;
+        } catch (_error) {
+          return null;
+        }
+      }
+
       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 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' && String(region.type || '').trim().toLowerCase() === 'video') {
+            region.cache_bust = videoCacheBust;
+          }
+        });
         return {
           id: slide.id,
           title: slide.title,
-          body: slide.body,
+          modified_at: slide.modified_at,
-          duration_seconds: slide.duration_seconds,
+          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,
-          media_url: slide.media_path,
-          media_type: slide.media_type,
-          kind: common.mediaKind(slide.media_path),
           template_id: slide.template_id,
           template: slide.template_id ? templatesById[slide.template_id] || null : null,
-          content: common.parseJsonSafe(slide.content_json) || {}
+          content: content
         };
       });
 
@@ -185,14 +215,12 @@ function createPlayerPlaylistService(options) {
     (Array.isArray(slideRows) ? slideRows : []).forEach(function (slide) {
       updatePlaylistRevisionHash(hash, slide.id);
       updatePlaylistRevisionHash(hash, slide.title);
-      updatePlaylistRevisionHash(hash, slide.body);
       updatePlaylistRevisionHash(hash, slide.template_id);
       updatePlaylistRevisionHash(hash, slide.content_json);
-      updatePlaylistRevisionHash(hash, slide.media_path);
-      updatePlaylistRevisionHash(hash, slide.media_type);
       updatePlaylistRevisionHash(hash, slide.modified_at);
       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);

src/player/public/css/player.css

@@ -364,6 +364,19 @@ body.screen-blackout #app {
   display: block;
 }
 
+.template-region.video {
+  background: transparent;
+}
+
+.template-region.video video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  pointer-events: none;
+  background: transparent;
+}
+
 .template-region.webpage iframe {
   width: 100%;
   height: 100%;

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

@@ -89,10 +89,13 @@ function scheduleSlideAdvance(delayMs) {
   }, holdDelayMs);
 }
 
-// Add the fade time to a slide's hold duration so the configured duration remains visible.
+// Account for fade only when it is enabled so the transition is centered on the slide boundary.
 function getSlideHoldDelay(delayMs) {
   var holdDelayMs = Math.max(1, Number(delayMs || 0));
-  return holdDelayMs + (currentPlaylistFadeBetweenSlides ? slideFadeDurationMs : 0);
+  if (!currentPlaylistFadeBetweenSlides) {
+    return holdDelayMs;
+  }
+  return Math.max(1, holdDelayMs - (slideFadeDurationMs / 2));
 }
 
 // Cancel any pending fade-transition cleanup.
@@ -109,11 +112,67 @@ function renderSlideMarkup(markup, shouldFade) {
   if (typeof destroyRtmpRegions === 'function') {
     destroyRtmpRegions(app);
   }
+
+  function initializeRenderedVideoPlayback(root, delayMs) {
+    if (!root) {
+      return;
+    }
+
+    var startDelayMs = Math.max(0, Number(delayMs || 0));
+    var videos = root.querySelectorAll('.template-region.video video');
+    Array.prototype.forEach.call(videos, function (video) {
+      if (!video) {
+        return;
+      }
+
+      var playbackScheduled = false;
+
+      video.autoplay = true;
+      video.loop = true;
+      video.muted = true;
+      video.playsInline = true;
+
+      function startPlayback() {
+        var playPromise = video.play && video.play();
+        if (playPromise && typeof playPromise.catch === 'function') {
+          playPromise.catch(function () {
+            return null;
+          });
+        }
+      }
+
+      function schedulePlaybackStart() {
+        if (playbackScheduled) {
+          return;
+        }
+        playbackScheduled = true;
+        if (startDelayMs > 0) {
+          window.setTimeout(startPlayback, startDelayMs);
+          return;
+        }
+        startPlayback();
+      }
+
+      if (video.readyState >= 2) {
+        schedulePlaybackStart();
+        return;
+      }
+
+      video.addEventListener('canplay', schedulePlaybackStart, { once: true });
+      video.addEventListener('loadedmetadata', function () {
+        if (video.readyState >= 2) {
+          schedulePlaybackStart();
+        }
+      }, { once: true });
+    });
+  }
+
   if (!shouldFade) {
     app.innerHTML = markup;
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(app);
     }
+    initializeRenderedVideoPlayback(app);
     return app.firstElementChild;
   }
 
@@ -131,6 +190,28 @@ function renderSlideMarkup(markup, shouldFade) {
     });
   }
 
+  function pauseRenderedVideoPlayback(root, delayMs) {
+    if (!root) {
+      return;
+    }
+
+    var pauseDelayMs = Math.max(0, Number(delayMs || 0));
+    var videos = root.querySelectorAll('.template-region.video video, .slide-media video');
+    Array.prototype.forEach.call(videos, function (video) {
+      if (!video || typeof video.pause !== 'function') {
+        return;
+      }
+
+      window.setTimeout(function () {
+        try {
+          video.pause();
+        } catch (_error) {
+          // Ignore pause errors from detached or unsupported media elements.
+        }
+      }, pauseDelayMs);
+    });
+  }
+
   var nextShell = document.createElement('div');
   nextShell.className = 'slide-shell';
   nextShell.style.opacity = '0';
@@ -143,6 +224,7 @@ function renderSlideMarkup(markup, shouldFade) {
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(nextShell);
     }
+    initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
     return nextShell;
   }
 
@@ -150,6 +232,7 @@ function renderSlideMarkup(markup, shouldFade) {
     previousShell.classList.add('slide-shell');
   }
   previousShell.style.opacity = '1';
+  pauseRenderedVideoPlayback(previousShell, slideFadeDurationMs / 2);
 
   app.appendChild(nextShell);
   void nextShell.offsetHeight;
@@ -162,6 +245,8 @@ function renderSlideMarkup(markup, shouldFade) {
     syncRtmpRegions(nextShell);
   }
 
+  initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
+
   slideTransitionTimer = window.setTimeout(function () {
     if (previousShell && previousShell.parentNode) {
       previousShell.parentNode.removeChild(previousShell);
@@ -280,7 +365,12 @@ function handleCommandMessage(rawMessage) {
       }
       return;
     case 'pause':
-      setPaused(!isPaused);
+      var desiredPause = normalizeBoolean(payload.paused);
+      if (desiredPause !== null) {
+        setPaused(desiredPause);
+      } else {
+        setPaused(!isPaused);
+      }
       return;
     case 'blackout':
       var desiredBlackout = normalizeBoolean(payload.blackout);
@@ -291,11 +381,9 @@ function handleCommandMessage(rawMessage) {
       }
       return;
     case 'previous':
-    case 'left':
       navigateSlides(-1);
       return;
     case 'next':
-    case 'right':
       navigateSlides(1);
       return;
     case 'reload':
@@ -334,11 +422,11 @@ function connectCommandSocket() {
   socket.onopen = function () {
     if (typeof syncOnboardingClientNameFromServer === 'function') {
       syncOnboardingClientNameFromServer(socket).then(function () {
-        sendCommandHello(socket);
+        sendCommandState(socket);
       });
       return;
     }
-    sendCommandHello(socket);
+    sendCommandState(socket);
   };
 
   socket.onmessage = function (event) {

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

@@ -147,7 +147,7 @@ function refresh() {
       markRefreshHealthy();
       setOfflineBannerVisible(false);
       if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-        scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
+          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
       }
       return;
     }

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

@@ -452,6 +452,9 @@ function getTemplateRenderPlan(template) {
       if (region.regionType === 'image') {
         return renderImageRegion(region, regionContent);
       }
+      if (region.regionType === 'video') {
+        return renderVideoRegion(region, regionContent);
+      }
       if (region.regionType === 'webpage') {
         return renderWebpageRegion(region, regionContent);
       }
@@ -517,9 +520,21 @@ function renderSlideShell(slide, canvasClass, canvasWidth, canvasHeight, innerHt
 // Build the cache key for rendered slide markup.
 function getSlideMarkupCacheKey(slide) {
   var viewportKey = window.innerWidth + 'x' + window.innerHeight;
-  return [currentPlaylistSignature || '', slide && slide.id ? slide.id : '', slide && slide.template_id ? slide.template_id : '', viewportKey].join('|');
+  return [currentPlaylistSignature || '', slide && slide.id ? slide.id : '', slide && slide.template_id ? slide.template_id : '', slide && slide.modified_at ? slide.modified_at : '', viewportKey, videoRegionRenderVersion || 0].join('|');
 }
 
+function notifyVideoRegionSourceReady() {
+  if (typeof videoRegionRenderVersion === 'number') {
+    videoRegionRenderVersion += 1;
+  }
+  slideMarkupCache = Object.create(null);
+  if (typeof showCurrent === 'function' && slides && slides.length) {
+    showCurrent();
+  }
+}
+
+window.notifyVideoRegionSourceReady = notifyVideoRegionSourceReady;
+
 // Look up a previously rendered slide in the cache.
 function getCachedSlideMarkup(slide) {
   var cacheKey = getSlideMarkupCacheKey(slide);

src/player/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_VERSION = 'v1';
+const CACHE_VERSION = 'v2';
 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}`;
@@ -87,6 +87,10 @@ async function staleWhileRevalidate(request, cacheName) {
   return new Response('', { status: 504, statusText: 'Offline' });
 }
 
+async function networkOnly(request) {
+  return fetch(request);
+}
+
 self.addEventListener('install', function (event) {
   self.skipWaiting();
   event.waitUntil(Promise.resolve());
@@ -126,7 +130,7 @@ self.addEventListener('fetch', function (event) {
   }
 
   if (url.pathname.startsWith('/media/')) {
-    event.respondWith(staleWhileRevalidate(request, MEDIA_CACHE));
+    event.respondWith(networkOnly(request));
     return;
   }
 

src/player/regions/api.js

@@ -61,7 +61,7 @@ function substituteApiVariables(html, item) {
 
 function getApiPreviewFallback(item) {
   if (!item || typeof item !== 'object') {
-    return '<div class="template-region-placeholder">API item</div>';
+    return '';
   }
 
   var title = String(item.title || item.name || '').trim();
@@ -74,7 +74,7 @@ function getApiPreviewFallback(item) {
     summary.push('<div>' + sanitizeRichText(description) + '</div>');
   }
   if (!summary.length) {
-    return '<div class="template-region-placeholder">API item</div>';
+    return '';
   }
   return summary.join('');
 }
@@ -92,6 +92,9 @@ function renderApiRegion(region, regionContent) {
     body = getApiPreviewFallback(item);
   }
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
-  var renderedBody = body ? renderEditorJsContent(body) : '<div class="template-region-placeholder">API item</div>';
+  if (!body) {
-  return '<div class="template-region api" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>';
+    return '';
+  }
+  var renderedBody = renderEditorJsContent(body);
+  return renderedBody ? '<div class="template-region api" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>' : '';
 }

src/player/regions/html.js

@@ -1,7 +1,7 @@
 function renderHtmlRegionContent(value) {
   var html = String(value || '').trim();
   if (!html) {
-    return '<div class="template-region-placeholder">HTML</div>';
+    return '';
   }
   return '<iframe class="template-region-html-frame" sandbox="" scrolling="no" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="HTML region" loading="eager"></iframe>';
 }

src/player/regions/image.js

@@ -1,4 +1,7 @@
 function renderImageRegion(region, regionContent) {
   var src = regionContent.value || '';
+  if (!String(src || '').trim()) {
+    return '';
+  }
   return '<div class="template-region image" style="' + region.baseStyle + '"><img src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label) + '" /></div>';
 }

src/player/regions/rss.js

@@ -62,6 +62,9 @@ function renderRssRegion(region, regionContent) {
     body = summaryParts.join('');
   }
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
-  var renderedBody = body ? renderEditorJsContent(body) : '<div class="template-region-placeholder">RSS item</div>';
+  if (!body) {
-  return '<div class="template-region rss" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>';
+    return '';
+  }
+  var renderedBody = renderEditorJsContent(body);
+  return renderedBody ? '<div class="template-region rss" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>' : '';
 }

src/player/regions/rtmp.js

@@ -3,7 +3,7 @@ function renderRtmpRegion(region, regionContent) {
   var disableAudio = regionContent.disable_audio === undefined ? true : Boolean(regionContent.disable_audio);
   var skipUnavailable = Boolean(currentPlaylistSkipUnavailableRtmp);
   if (!url) {
-    return '<div class="template-region rtmp" style="' + region.baseStyle + '"><div class="template-region-placeholder">RTMP stream</div></div>';
+    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>';

src/player/regions/text.js

@@ -1,7 +1,13 @@
 function renderTextRegion(region, regionContent) {
+  var rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+  if (!String(rawValue || '').trim()) {
+    return '';
+  }
+
   var fontFamily = sanitizeFontFamily(regionContent.font_family || region.fontFamily);
   var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize);
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor);
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
-  return '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderEditorJsContent(regionContent.value || '') + '</div></div>';
+  var renderedBody = renderEditorJsContent(rawValue);
+  return renderedBody ? '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>' : '';
 }

src/player/regions/video.js

@@ -0,0 +1,145 @@
+var videoRegionLastGoodSrcCache = Object.create(null);
+var videoRegionProbeStateCache = Object.create(null);
+var videoRegionProbeTimerCache = Object.create(null);
+var VIDEO_REGION_RETRY_DELAY_MS = 5000;
+
+function getVideoRegionCacheKey(region) {
+  return String(region && (region.regionKey || region.label) || '').trim();
+}
+
+function isDirectlyRenderableSource(src) {
+  return /^(?:https?:)?\/\//i.test(src) || /^data:/i.test(src) || /^blob:/i.test(src) || /^\/media\//i.test(src);
+}
+
+function appendCacheBust(src, cacheBust) {
+  var key = String(cacheBust || '').trim();
+  var raw = String(src || '').trim();
+  if (!raw || !key) {
+    return raw;
+  }
+  return raw + (raw.indexOf('?') === -1 ? '?' : '&') + 'v=' + encodeURIComponent(key);
+}
+
+function getVideoSourceAvailability(src) {
+  return videoRegionProbeStateCache[String(src || '').trim()] || null;
+}
+
+function setVideoSourceAvailability(src, available) {
+  var key = String(src || '').trim();
+  if (!key) {
+    return;
+  }
+  videoRegionProbeStateCache[key] = {
+    available: available === null ? null : Boolean(available),
+    checkedAt: Date.now()
+  };
+}
+
+function logVideoRegionStatus(message, details, level) {
+  if (typeof logDebug === 'function') {
+    logDebug(message, details || '', level || 'info');
+  }
+}
+
+function triggerVideoRegionSourceRefresh() {
+  if (typeof window.notifyVideoRegionSourceReady === 'function') {
+    window.notifyVideoRegionSourceReady();
+    return;
+  }
+
+  if (typeof videoRegionRenderVersion === 'number') {
+    videoRegionRenderVersion += 1;
+  }
+  slideMarkupCache = Object.create(null);
+  if (typeof showCurrent === 'function' && slides && slides.length) {
+    showCurrent();
+  }
+}
+
+function scheduleVideoSourceProbe(regionKey, src, isRetry) {
+  var key = String(src || '').trim();
+  if (!regionKey || !key || isDirectlyRenderableSource(key)) {
+    if (key) {
+      setVideoSourceAvailability(key, true);
+    }
+    return;
+  }
+
+  if (videoRegionProbeTimerCache[key]) {
+    return;
+  }
+
+  if (!isRetry) {
+    logVideoRegionStatus('Video source changed; probing mirrored file before swapping.', 'region=' + regionKey + ' src=' + key);
+  } else {
+    logVideoRegionStatus('Video source still unavailable; retrying mirrored file probe.', 'region=' + regionKey + ' src=' + key, 'warn');
+  }
+
+  videoRegionProbeTimerCache[key] = window.setTimeout(function () {
+    delete videoRegionProbeTimerCache[key];
+    fetch(key, {
+      method: 'HEAD',
+      cache: 'no-store',
+      credentials: 'same-origin'
+    }).then(function (response) {
+      if (response && response.ok) {
+        setVideoSourceAvailability(key, true);
+        if (videoRegionLastGoodSrcCache[regionKey] !== key) {
+          videoRegionLastGoodSrcCache[regionKey] = key;
+          logVideoRegionStatus('Mirrored video is ready; switching to the new source.', 'region=' + regionKey + ' src=' + key);
+          triggerVideoRegionSourceRefresh();
+        }
+        return;
+      }
+
+      setVideoSourceAvailability(key, false);
+      logVideoRegionStatus('Mirrored video probe returned unavailable; keeping the old source for now.', 'region=' + regionKey + ' src=' + key, 'warn');
+      scheduleVideoSourceProbe(regionKey, key, true);
+    }).catch(function () {
+      setVideoSourceAvailability(key, false);
+      logVideoRegionStatus('Mirrored video probe failed; keeping the old source for now.', 'region=' + regionKey + ' src=' + key, 'warn');
+      scheduleVideoSourceProbe(regionKey, key, true);
+    });
+  }, isRetry ? VIDEO_REGION_RETRY_DELAY_MS : 0);
+}
+
+function renderVideoRegion(region, regionContent) {
+  var requestedSrc = String(regionContent && regionContent.value || '').trim();
+  var requestedSrcVersioned = appendCacheBust(requestedSrc, regionContent && regionContent.cache_bust);
+  var regionKey = getVideoRegionCacheKey(region);
+  var cachedSrc = regionKey ? String(videoRegionLastGoodSrcCache[regionKey] || '').trim() : '';
+  var cachedSrcVersioned = appendCacheBust(cachedSrc, regionContent && regionContent.cache_bust);
+
+  if (!requestedSrc) {
+    return '';
+  }
+
+  if (isDirectlyRenderableSource(requestedSrc)) {
+    if (regionKey) {
+      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>';
+  }
+
+  var requestedState = getVideoSourceAvailability(requestedSrc);
+  var requestedReady = Boolean(requestedState && requestedState.available === true);
+
+  if (requestedReady) {
+    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>';
+  }
+
+  scheduleVideoSourceProbe(regionKey, requestedSrc, false);
+
+  if (cachedSrc) {
+    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 '';
+}

src/player/regions/webpage.js

@@ -1,5 +1,7 @@
 function renderWebpageRegion(region, regionContent) {
   var url = String(regionContent.value || '').trim();
-  var iframe = url ? '<iframe src="' + escapeHtml(url) + '" title="' + escapeHtml(region.label) + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe>' : '<div class="template-region-placeholder">Webpage</div>';
+  if (!url) {
-  return '<div class="template-region webpage" style="' + region.baseStyle + '">' + iframe + '</div>';
+    return '';
+  }
+  return '<div class="template-region webpage" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(url) + '" title="' + escapeHtml(region.label) + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>';
 }

src/player/render-helpers.js

@@ -286,6 +286,7 @@ const playerPagePlaybackScriptPath = path.join(__dirname, 'public', 'js', 'playe
 const playerPageScriptPath = path.join(__dirname, 'player-page.script.html');
 const playerRegionScriptPaths = [
   path.join(__dirname, 'regions', 'image.js'),
+  path.join(__dirname, 'regions', 'video.js'),
   path.join(__dirname, 'regions', 'webpage.js'),
   path.join(__dirname, 'regions', 'html.js'),
   path.join(__dirname, 'regions', 'rtmp.js'),

src/player/routes.js

@@ -114,7 +114,7 @@ function registerPlayerRoutes(app, options) {
     });
   });
 
-  app.put('/api/media/:filename', express.raw({ type: '*/*', limit: '100mb' }), requireRequestAuth, async function (req, res, next) {
+  app.put('/api/media/:filename', express.raw({ type: '*/*', limit: '1gb' }), requireRequestAuth, async function (req, res, next) {
     try {
       const filePath = resolveMediaFilePath(req.params.filename);
       if (!filePath) {
@@ -279,7 +279,7 @@ function registerPlayerRoutes(app, options) {
       let screen = null;
       let screenLookupFailed = false;
       try {
-        const [screenRows] = await pool.query('SELECT id, name, slug FROM screens WHERE slug = ?', [req.params.slug]);
+        const [screenRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ?', [req.params.slug]);
         screen = screenRows[0] || null;
       } catch (error) {
         screenLookupFailed = isTransientDbError(error);
@@ -309,7 +309,7 @@ function registerPlayerRoutes(app, options) {
       if (!command) {
         return res.status(400).json({ error: 'Command is required' });
       }
-      if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'left', 'right', 'setclientname'].indexOf(command) === -1) {
+      if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname'].indexOf(command) === -1) {
         return res.status(400).json({ error: 'Unsupported command' });
       }
 
@@ -319,7 +319,7 @@ function registerPlayerRoutes(app, options) {
       let screenLookupFailed = false;
       if (!isRedirectCommand) {
         try {
-          const [screenRows] = await pool.query('SELECT id, name, slug FROM screens WHERE slug = ?', [req.params.slug]);
+          const [screenRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ?', [req.params.slug]);
           screen = screenRows[0] || null;
         } catch (error) {
           screenLookupFailed = isTransientDbError(error);

src/player/runtime.js

@@ -328,7 +328,7 @@ function createPlayerRuntime(options) {
         return;
       }
 
-      if (!payload || (payload.type !== 'hello' && payload.type !== 'state')) {
+      if (!payload || payload.type !== 'state') {
         return;
       }
 

src/rbac.js

@@ -109,10 +109,20 @@ const PERMISSION_SECTIONS = [
     name: 'Background tasks',
     sectionName: 'Settings',
     actions: [
-      { key: 'read', name: 'Read', description: 'View background tasks and scheduled refreshes.' },
+      { 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: 'users',
     order: 80,

src/web.js

@@ -16,7 +16,8 @@ const registerAdminScreenCommandRoutes = require('./web/routes/admin/client-comm
 const registerAdminContentRoutes = require('./web/routes/admin/content');
 const registerAdminDataSourceRoutes = require('./web/routes/data-sources');
 const registerAdminSettingsRoutes = require('./web/routes/settings/background-tasks');
-const { createBackgroundTaskQueue, normalizeIntervalMs } = require('./web/lib/background-task-queue');
+const { createBackgroundTaskQueue } = require('./web/lib/background-task-queue');
+const { createBackgroundTaskSetup } = require('./web/lib/background-task-setup');
 const { captureSlideThumbnail } = require('./web/lib/slide-thumbnails');
 const { refreshApiSource, refreshRssFeed } = require('./web/lib/data-source-refresh');
 const { createWebBootstrap } = require('./web/bootstrap');
@@ -25,6 +26,7 @@ const rbacData = require('./web/lib/rbac-data');
 const { createPlayerActionService } = require('./web/lib/player-actions');
 const { isClientNameAvailable, withClientNameReservation } = require('./data/client-name-check');
 const { createSessionService } = require('./web/lib/session');
+const { hasAnyPermission } = require('./rbac');
 const {
   formatDashboardDate,
   readArrayField,
@@ -40,8 +42,8 @@ const {
   fetchOrderedPlaylistSlides,
   redirectAfterSave
 } = require('./web/lib/helpers');
-const PLAYER_INTERNAL_BASE_URL = (process.env.PLAYER_INTERNAL_BASE_URL || process.env.PLAYER_BASE_URL || 'http://player:3001').replace(/\/$/, '');
+const PLAYER_INTERNAL_BASE_URL = (process.env.PLAYER_INTERNAL_BASE_URL || process.env.PLAYER_BASE_URL || 'http://player:8081').replace(/\/$/, '');
-const PLAYER_PUBLIC_BASE_URL = (process.env.PLAYER_PUBLIC_BASE_URL || process.env.PLAYER_BASE_URL || 'http://localhost:3001').replace(/\/$/, '');
+const PLAYER_PUBLIC_BASE_URL = (process.env.PLAYER_PUBLIC_BASE_URL || process.env.PLAYER_BASE_URL || 'http://localhost:8081').replace(/\/$/, '');
 const PLAYER_WS_BASE_URL = PLAYER_INTERNAL_BASE_URL.replace(/^http/, 'ws');
 const SESSION_COOKIE_NAME = 'digital_signage_session';
 const SESSION_MAX_AGE_DAYS = Number(process.env.SESSION_MAX_AGE_DAYS || 14);
@@ -51,7 +53,7 @@ async function start() {
   const app = express();
   const server = http.createServer(app);
   const pool = common.createPool();
-  const PORT = Number(process.env.WEB_PORT || 3000);
+  const PORT = Number(process.env.WEB_PORT || 8080);
   const MEDIA_DIR = path.join(__dirname, '..', 'media');
   const UPLOADS_DIR = path.join(MEDIA_DIR, 'uploads');
   const THUMBNAILS_DIR = path.join(MEDIA_DIR, 'thumbnails');
@@ -92,15 +94,33 @@ async function start() {
     dashboardRefreshIntervalMs: Number(process.env.DASHBOARD_REFRESH_INTERVAL_MS || 2000),
     formatDashboardDate: formatDashboardDate,
     notifyPlayerScreens: notifyPlayerScreens,
-    backgroundTaskQueue: backgroundTaskQueue
+    backgroundTaskQueue: backgroundTaskQueue,
+    hasAnyPermission: hasAnyPermission,
   });
   const upload = webBootstrap.upload;
   const collectUploadReferencesFromSlide = webBootstrap.collectUploadReferencesFromSlide;
   const collectUploadReferencesFromTemplate = webBootstrap.collectUploadReferencesFromTemplate;
   const collectUploadReferencesFromPayload = webBootstrap.collectUploadReferencesFromPayload;
+  const removeUnusedUploadFiles = webBootstrap.removeUnusedUploadFiles;
+  const collectUploadPathsFromDirectory = webBootstrap.collectUploadPathsFromDirectory;
   const syncPlaylistUploadsOnChange = webBootstrap.syncPlaylistUploadsOnChange;
   const syncExistingUploadsToPlayer = webBootstrap.syncExistingUploadsToPlayer;
   const runMediaSyncTask = webBootstrap.runMediaSyncTask;
+  const backgroundTaskSetup = createBackgroundTaskSetup({
+    pool: pool,
+    common: common,
+    backgroundTaskQueue: backgroundTaskQueue,
+    collectUploadPathsFromDirectory: collectUploadPathsFromDirectory,
+    removeUnusedUploadFiles: removeUnusedUploadFiles,
+    captureSlideThumbnail: captureSlideThumbnail,
+    refreshApiSource: refreshApiSource,
+    refreshRssFeed: refreshRssFeed,
+    runMediaSyncTask: runMediaSyncTask,
+    mediaDir: MEDIA_DIR,
+    uploadsDir: UPLOADS_DIR,
+    playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL,
+    dataSourceStartupRefreshStaggerMs: DATA_SOURCE_STARTUP_REFRESH_STAGGER_MS
+  });
   const broadcastDashboardState = webBootstrap.broadcastDashboardState;
   const sessionService = createSessionService({
     sessionCookieName: SESSION_COOKIE_NAME,
@@ -115,51 +135,6 @@ async function start() {
   const createUserSession = sessionService.createUserSession;
   const requireAuth = sessionService.requireAuth;
 
-  backgroundTaskQueue.setTaskHandler('media-sync', function (task) {
-    return runMediaSyncTask(task && task.payload ? task.payload : task);
-  });
-
-  backgroundTaskQueue.setTaskHandler('data-source-refresh', async function (task) {
-    const payload = task && task.payload ? task.payload : {};
-    const sourceType = String(payload.sourceType || '').trim();
-    const sourceId = Number(payload.sourceId || 0);
-
-    if (sourceType === 'api-source') {
-      const apiSource = await common.fetchApiSourceById(pool, sourceId);
-      if (!apiSource) {
-        throw new Error('API source not found.');
-      }
-      return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, Number(payload.actorId) || null);
-    }
-
-    if (sourceType === 'rss-feed') {
-      const rssFeed = await common.fetchRssFeedById(pool, sourceId);
-      if (!rssFeed) {
-        throw new Error('RSS feed not found.');
-      }
-      return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null);
-    }
-
-    throw new Error('Unsupported data source refresh task.');
-  });
-
-  backgroundTaskQueue.setTaskHandler('slide-thumbnail-refresh', async function (task) {
-    const payload = task && task.payload ? task.payload : {};
-    const slideId = Number(payload.slideId || 0);
-    if (!Number.isFinite(slideId) || slideId <= 0) {
-      throw new Error('Slide id is required.');
-    }
-
-    return captureSlideThumbnail({
-      pool: pool,
-      common: common,
-      mediaDir: MEDIA_DIR,
-      baseUrl: PLAYER_INTERNAL_BASE_URL,
-      slideId: slideId,
-      previousThumbnailPath: payload.previousThumbnailPath || null
-    });
-  });
-
   app.use(express.urlencoded({ extended: true }));
   app.use(express.json());
   app.use('/assets', express.static(ASSET_DIR));
@@ -259,6 +234,7 @@ async function start() {
     getScreenConnections: playerActionService.getScreenConnections,
     isClientNameAvailable: isClientNameAvailable,
     withClientNameReservation: withClientNameReservation,
+    broadcastDashboardState: broadcastDashboardState,
     requirePermission: requirePermission
   });
 
@@ -286,12 +262,14 @@ async function start() {
     collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
     collectUploadReferencesFromTemplate: collectUploadReferencesFromTemplate,
     collectUploadReferencesFromPayload: collectUploadReferencesFromPayload,
+    removeUnusedUploadFiles: removeUnusedUploadFiles,
     syncPlaylistUploadsOnChange: syncPlaylistUploadsOnChange,
     getAuditUserId: getAuditUserId,
     redirectAfterSave: redirectAfterSave,
     notifyPlayerScreens: notifyPlayerScreens,
     broadcastDashboardState: broadcastDashboardState,
     backgroundTaskQueue: backgroundTaskQueue,
+    hasAnyPermission: hasAnyPermission,
     getSlideDeleteBlockMessage: playerActionService.getSlideDeleteBlockMessage,
     getTemplateDeleteBlockMessage: playerActionService.getTemplateDeleteBlockMessage,
     getCanvasSizeDeleteBlockMessage: playerActionService.getCanvasSizeDeleteBlockMessage,
@@ -367,105 +345,9 @@ async function start() {
 
   // Ensure schema and mirror media before the web service starts handling traffic.
   await common.ensureSchema(pool, { mediaDir: MEDIA_DIR });
+  await common.bootstrapDatabase(pool);
   await backgroundTaskQueue.initialize();
-
+  await backgroundTaskSetup.initialize();
-  async function syncRecurringRefreshes() {
-    const apiSourcesData = await common.fetchApiSourcesData(pool);
-    (apiSourcesData.apiSources || []).forEach(function (apiSource) {
-      backgroundTaskQueue.registerRecurringTask({
-        key: 'api-source-refresh:' + Number(apiSource.id),
-        title: 'API source refresh',
-        category: 'data-source',
-        intervalMs: normalizeIntervalMs(apiSource.update_interval_value, apiSource.update_interval_unit),
-        metadata: {
-          sourceType: 'api-source',
-          sourceId: Number(apiSource.id),
-          sourceName: apiSource.name
-        },
-        run: function () {
-          return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, null);
-        }
-      });
-    });
-
-    const rssFeedsData = await common.fetchRssFeedsData(pool);
-    (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
-      backgroundTaskQueue.registerRecurringTask({
-        key: 'rss-feed-refresh:' + Number(rssFeed.id),
-        title: 'RSS feed refresh',
-        category: 'data-source',
-        intervalMs: normalizeIntervalMs(rssFeed.update_interval_value, rssFeed.update_interval_unit),
-        metadata: {
-          sourceType: 'rss-feed',
-          sourceId: Number(rssFeed.id),
-          sourceName: rssFeed.name
-        },
-        run: function () {
-          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
-        }
-      });
-    });
-  }
-
-  async function scheduleInitialDataSourceRefreshes() {
-    const apiSourcesData = await common.fetchApiSourcesData(pool);
-    const rssFeedsData = await common.fetchRssFeedsData(pool);
-    const startupSources = [];
-
-    (apiSourcesData.apiSources || []).forEach(function (apiSource) {
-      startupSources.push({
-        type: 'api-source',
-        id: Number(apiSource.id),
-        name: apiSource.name,
-        run: function () {
-          return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, null);
-        }
-      });
-    });
-
-    (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
-      startupSources.push({
-        type: 'rss-feed',
-        id: Number(rssFeed.id),
-        name: rssFeed.name,
-        run: function () {
-          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
-        }
-      });
-    });
-
-    startupSources.forEach(function (source, index) {
-      const startupDelayMs = index * DATA_SOURCE_STARTUP_REFRESH_STAGGER_MS;
-
-      setTimeout(function () {
-        backgroundTaskQueue.enqueueTask({
-          key: 'startup-data-source-refresh:' + source.type + ':' + source.id + ':' + Date.now(),
-          title: source.type === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh',
-          category: 'data-source',
-          taskType: 'data-source-refresh',
-          metadata: {
-            sourceType: source.type,
-            sourceId: source.id,
-            sourceName: source.name,
-            startupRefresh: true
-          },
-          payload: {
-            sourceType: source.type,
-            sourceId: source.id,
-            sourceName: source.name,
-            startupRefresh: true
-          }
-        }).catch(function (error) {
-          console.warn('Unable to queue startup refresh for ' + source.type + ' ' + source.id + ':', error);
-        });
-      }, startupDelayMs);
-    });
-  }
-
-  await syncRecurringRefreshes();
-  scheduleInitialDataSourceRefreshes().catch(function (error) {
-    console.warn('Unable to schedule startup data source refreshes:', error);
-  });
 
   fs.mkdirSync(MEDIA_DIR, { recursive: true });
   await syncExistingUploadsToPlayer(pool, MEDIA_DIR).catch(function (error) {

src/web/bootstrap.js

@@ -120,6 +120,8 @@ function createWebBootstrap(options) {
   const collectUploadReferencesFromSlide = uploadSyncService.collectUploadReferencesFromSlide;
   const collectUploadReferencesFromTemplate = uploadSyncService.collectUploadReferencesFromTemplate;
   const collectUploadReferencesFromPayload = uploadSyncService.collectUploadReferencesFromPayload;
+  const removeUnusedUploadFiles = uploadSyncService.removeUnusedUploadFiles;
+  const collectUploadPathsFromDirectory = uploadSyncService.collectUploadPathsFromDirectory;
   const syncPlaylistUploadsOnChange = uploadSyncService.syncPlaylistUploadsOnChange;
   const syncExistingUploadsToPlayer = uploadSyncService.syncExistingUploadsToPlayer;
   const runMediaSyncTask = uploadSyncService.runMediaSyncTask;
@@ -210,6 +212,8 @@ function createWebBootstrap(options) {
     collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
     collectUploadReferencesFromTemplate: collectUploadReferencesFromTemplate,
     collectUploadReferencesFromPayload: collectUploadReferencesFromPayload,
+    removeUnusedUploadFiles: removeUnusedUploadFiles,
+    collectUploadPathsFromDirectory: collectUploadPathsFromDirectory,
     syncPlaylistUploadsOnChange: syncPlaylistUploadsOnChange,
     syncExistingUploadsToPlayer: syncExistingUploadsToPlayer,
     runMediaSyncTask: runMediaSyncTask,

src/web/lib/background-task-handlers.js

@@ -0,0 +1,93 @@
+function registerBackgroundTaskHandlers(options) {
+  const pool = options && options.pool;
+  const common = options && options.common;
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const captureSlideThumbnail = options && options.captureSlideThumbnail;
+  const refreshApiSource = options && options.refreshApiSource;
+  const refreshRssFeed = options && options.refreshRssFeed;
+  const runMediaSyncTask = options && options.runMediaSyncTask;
+  const mediaDir = String(options && options.mediaDir || '').trim();
+  const playerInternalBaseUrl = String(options && options.playerInternalBaseUrl || '').trim();
+
+  if (!pool || !common || !backgroundTaskQueue || !captureSlideThumbnail || !refreshApiSource || !refreshRssFeed || !runMediaSyncTask || !mediaDir || !playerInternalBaseUrl) {
+    throw new Error('registerBackgroundTaskHandlers requires the background task dependencies.');
+  }
+
+  backgroundTaskQueue.setTaskHandler('media-sync', function (task) {
+    return runMediaSyncTask(task && task.payload ? task.payload : task);
+  });
+
+  backgroundTaskQueue.setTaskHandler('data-source-refresh', async function (task) {
+    const payload = task && task.payload ? task.payload : {};
+    const sourceType = String(payload.sourceType || '').trim();
+    const sourceId = Number(payload.sourceId || 0);
+
+    if (sourceType === 'api-source') {
+      const apiSource = await common.fetchApiSourceById(pool, sourceId);
+      if (!apiSource) {
+        throw new Error('API source not found.');
+      }
+      return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, Number(payload.actorId) || null);
+    }
+
+    if (sourceType === 'rss-feed') {
+      const rssFeed = await common.fetchRssFeedById(pool, sourceId);
+      if (!rssFeed) {
+        throw new Error('RSS feed not found.');
+      }
+      return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null);
+    }
+
+    throw new Error('Unsupported data source refresh task.');
+  });
+
+  backgroundTaskQueue.setTaskHandler('slide-thumbnail-refresh', async function (task) {
+    const payload = task && task.payload ? task.payload : {};
+    const slideId = Number(payload.slideId || 0);
+    if (!Number.isFinite(slideId) || slideId <= 0) {
+      throw new Error('Slide id is required.');
+    }
+
+    return captureSlideThumbnail({
+      pool: pool,
+      common: common,
+      mediaDir: mediaDir,
+      baseUrl: playerInternalBaseUrl,
+      slideId: slideId,
+      previousThumbnailPath: payload.previousThumbnailPath || null
+    });
+  });
+
+  backgroundTaskQueue.setTaskHandler('template-slide-thumbnail-refresh', async function (task) {
+    const payload = task && task.payload ? task.payload : {};
+    const templateId = Number(payload.templateId || 0);
+    if (!Number.isFinite(templateId) || templateId <= 0) {
+      throw new Error('Template id is required.');
+    }
+
+    const [slides] = await pool.query(
+      'SELECT id, thumbnail_path FROM c_slides WHERE template_id = ? ORDER BY id ASC',
+      [templateId]
+    );
+
+    for (const slide of slides || []) {
+      const slideId = Number(slide && slide.id || 0);
+      if (!Number.isFinite(slideId) || slideId <= 0) {
+        continue;
+      }
+
+      await captureSlideThumbnail({
+        pool: pool,
+        common: common,
+        mediaDir: mediaDir,
+        baseUrl: playerInternalBaseUrl,
+        slideId: slideId,
+        previousThumbnailPath: slide && slide.thumbnail_path ? slide.thumbnail_path : null
+      });
+    }
+
+    return { templateId: templateId, slideCount: Array.isArray(slides) ? slides.length : 0 };
+  });
+}
+
+module.exports = { registerBackgroundTaskHandlers };

src/web/lib/background-task-queue.js

@@ -154,7 +154,7 @@ function createBackgroundTaskQueue(options) {
 
     const record = buildTaskRecord(task);
     const [result] = await pool.query(
-      `INSERT INTO background_tasks (
+      `INSERT INTO o_background_tasks (
         task_key,
         task_type,
         title,
@@ -196,7 +196,7 @@ function createBackgroundTaskQueue(options) {
 
     const record = buildTaskRecord(task);
     await pool.query(
-      `UPDATE background_tasks
+      `UPDATE o_background_tasks
        SET task_key = ?, task_type = ?, title = ?, category = ?, status = ?, payload_json = ?, metadata_json = ?, attempts = ?, started_at = ?, finished_at = ?, error_message = ?
        WHERE id = ?`,
       [
@@ -221,7 +221,7 @@ function createBackgroundTaskQueue(options) {
       return;
     }
 
-    await pool.query('DELETE FROM background_tasks WHERE id = ?', [taskId]);
+    await pool.query('DELETE FROM o_background_tasks WHERE id = ?', [taskId]);
   }
 
   async function initialize() {
@@ -235,7 +235,7 @@ function createBackgroundTaskQueue(options) {
       }
 
       const [rows] = await pool.query(
-        'SELECT id, task_key, task_type, title, category, status, payload_json, metadata_json, attempts, created_at, started_at, finished_at, error_message FROM background_tasks ORDER BY id ASC'
+        'SELECT id, task_key, task_type, title, category, status, payload_json, metadata_json, attempts, created_at, started_at, finished_at, error_message FROM o_background_tasks ORDER BY id ASC'
       );
 
       let highestTaskId = 0;
@@ -254,7 +254,7 @@ function createBackgroundTaskQueue(options) {
           task.finishedAt = '';
           task.errorMessage = '';
           await pool.query(
-            'UPDATE background_tasks SET status = ?, started_at = NULL, finished_at = NULL, error_message = NULL WHERE id = ?',
+            'UPDATE o_background_tasks SET status = ?, started_at = NULL, finished_at = NULL, error_message = NULL WHERE id = ?',
             ['queued', task.id]
           );
         }
@@ -357,6 +357,16 @@ function createBackgroundTaskQueue(options) {
     scheduleRecurringRun(job, job.intervalMs);
   }
 
+  function runRecurringTask(recurringKey) {
+    const normalizedKey = normalizeText(recurringKey);
+    if (!normalizedKey || !recurringJobsByKey.has(normalizedKey)) {
+      return false;
+    }
+
+    triggerRecurringJob(normalizedKey);
+    return true;
+  }
+
   function syncRecurringTaskState(task, status, errorMessage) {
     const recurringKey = taskIdToRecurringKey.get(task.id) || (task && task.metadata && task.metadata.recurringKey);
     if (!recurringKey) {
@@ -618,14 +628,24 @@ function createBackgroundTaskQueue(options) {
     return Array.from(tasksById.values())
       .slice()
       .sort(function (left, right) {
-        const leftQueuedTime = left && left.createdAt ? Date.parse(left.createdAt) : NaN;
+        const leftStartedTime = left && left.startedAt ? Date.parse(left.startedAt) : NaN;
-        const rightQueuedTime = right && right.createdAt ? Date.parse(right.createdAt) : NaN;
+        const rightStartedTime = right && right.startedAt ? Date.parse(right.startedAt) : NaN;
-        if (Number.isFinite(leftQueuedTime) && Number.isFinite(rightQueuedTime) && leftQueuedTime !== rightQueuedTime) {
+        if (Number.isFinite(leftStartedTime) && Number.isFinite(rightStartedTime) && leftStartedTime !== rightStartedTime) {
-          return rightQueuedTime - leftQueuedTime;
+          return rightStartedTime - leftStartedTime;
         }
 
-        if (Number.isFinite(leftQueuedTime) !== Number.isFinite(rightQueuedTime)) {
+        if (Number.isFinite(leftStartedTime) !== Number.isFinite(rightStartedTime)) {
-          return Number.isFinite(leftQueuedTime) ? -1 : 1;
+          return Number.isFinite(leftStartedTime) ? -1 : 1;
+        }
+
+        const leftCreatedTime = left && left.createdAt ? Date.parse(left.createdAt) : NaN;
+        const rightCreatedTime = right && right.createdAt ? Date.parse(right.createdAt) : NaN;
+        if (Number.isFinite(leftCreatedTime) && Number.isFinite(rightCreatedTime) && leftCreatedTime !== rightCreatedTime) {
+          return rightCreatedTime - leftCreatedTime;
+        }
+
+        if (Number.isFinite(leftCreatedTime) !== Number.isFinite(rightCreatedTime)) {
+          return Number.isFinite(leftCreatedTime) ? -1 : 1;
         }
 
         return right.id - left.id;
@@ -737,6 +757,7 @@ function createBackgroundTaskQueue(options) {
     setTaskHandler: setTaskHandler,
     registerRecurringTask: registerRecurringTask,
     removeRecurringTask: removeRecurringTask,
+    runRecurringTask: runRecurringTask,
     listTasks: listTasks,
     listRecurringTasks: listRecurringTasks,
     getTaskById: getTaskById,

src/web/lib/background-task-scheduling.js

@@ -0,0 +1,146 @@
+const { normalizeIntervalMs } = require('./background-task-queue');
+
+function registerBackgroundTaskScheduling(options) {
+  const pool = options && options.pool;
+  const common = options && options.common;
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const collectUploadPathsFromDirectory = options && options.collectUploadPathsFromDirectory;
+  const removeUnusedUploadFiles = options && options.removeUnusedUploadFiles;
+  const refreshApiSource = options && options.refreshApiSource;
+  const refreshRssFeed = options && options.refreshRssFeed;
+  const mediaDir = String(options && options.mediaDir || '').trim();
+  const dataSourceStartupRefreshStaggerMs = Math.max(100, Number(options && options.dataSourceStartupRefreshStaggerMs || 250));
+
+  if (!pool || !common || !backgroundTaskQueue || !collectUploadPathsFromDirectory || !removeUnusedUploadFiles || !refreshApiSource || !refreshRssFeed || !mediaDir) {
+    throw new Error('registerBackgroundTaskScheduling requires the background task dependencies.');
+  }
+
+  async function syncRecurringRefreshes() {
+    const apiSourcesData = await common.fetchApiSourcesData(pool);
+    (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      backgroundTaskQueue.registerRecurringTask({
+        key: 'api-source-refresh:' + Number(apiSource.id),
+        title: 'API source refresh',
+        category: 'data-source',
+        intervalMs: normalizeIntervalMs(apiSource.update_interval_value, apiSource.update_interval_unit),
+        metadata: {
+          sourceType: 'api-source',
+          sourceId: Number(apiSource.id),
+          sourceName: apiSource.name
+        },
+        run: function () {
+          return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, null);
+        }
+      });
+    });
+
+    const rssFeedsData = await common.fetchRssFeedsData(pool);
+    (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      backgroundTaskQueue.registerRecurringTask({
+        key: 'rss-feed-refresh:' + Number(rssFeed.id),
+        title: 'RSS feed refresh',
+        category: 'data-source',
+        intervalMs: normalizeIntervalMs(rssFeed.update_interval_value, rssFeed.update_interval_unit),
+        metadata: {
+          sourceType: 'rss-feed',
+          sourceId: Number(rssFeed.id),
+          sourceName: rssFeed.name
+        },
+        run: function () {
+          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
+        }
+      });
+    });
+  }
+
+  async function registerRecurringMaintenanceTasks() {
+    async function runUnusedUploadSweep() {
+      const uploadPaths = await collectUploadPathsFromDirectory(mediaDir);
+      if (!uploadPaths.length) {
+        return;
+      }
+
+      await removeUnusedUploadFiles(pool, mediaDir, uploadPaths);
+    }
+
+    backgroundTaskQueue.registerRecurringTask({
+      key: 'unused-upload-sweep',
+      title: 'Unused upload sweep',
+      category: 'media-sync',
+      intervalMs: 24 * 60 * 60 * 1000,
+      metadata: {
+        mediaDir: mediaDir
+      },
+      run: runUnusedUploadSweep
+    });
+  }
+
+  async function scheduleInitialDataSourceRefreshes() {
+    const apiSourcesData = await common.fetchApiSourcesData(pool);
+    const rssFeedsData = await common.fetchRssFeedsData(pool);
+    const startupSources = [];
+
+    (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      startupSources.push({
+        type: 'api-source',
+        id: Number(apiSource.id),
+        name: apiSource.name,
+        run: function () {
+          return refreshApiSource(pool, common, apiSource.id, apiSource.api_url, null);
+        }
+      });
+    });
+
+    (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      startupSources.push({
+        type: 'rss-feed',
+        id: Number(rssFeed.id),
+        name: rssFeed.name,
+        run: function () {
+          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
+        }
+      });
+    });
+
+    startupSources.forEach(function (source, index) {
+      const startupDelayMs = index * dataSourceStartupRefreshStaggerMs;
+
+      setTimeout(function () {
+        backgroundTaskQueue.enqueueTask({
+          key: 'startup-data-source-refresh:' + source.type + ':' + source.id + ':' + Date.now(),
+          title: source.type === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh',
+          category: 'data-source',
+          taskType: 'data-source-refresh',
+          metadata: {
+            sourceType: source.type,
+            sourceId: source.id,
+            sourceName: source.name,
+            startupRefresh: true
+          },
+          payload: {
+            sourceType: source.type,
+            sourceId: source.id,
+            sourceName: source.name,
+            startupRefresh: true
+          }
+        }).catch(function (error) {
+          console.warn('Unable to queue startup refresh for ' + source.type + ' ' + source.id + ':', error);
+        });
+      }, startupDelayMs);
+    });
+  }
+
+  async function initialize() {
+    await syncRecurringRefreshes();
+    await registerRecurringMaintenanceTasks();
+    scheduleInitialDataSourceRefreshes().catch(function (error) {
+      console.warn('Unable to schedule startup data source refreshes:', error);
+    });
+  }
+
+  return {
+    initialize: initialize
+  };
+}
+
+module.exports = { registerBackgroundTaskScheduling };

src/web/lib/background-task-setup.js

@@ -0,0 +1,32 @@
+const { registerBackgroundTaskHandlers } = require('./background-task-handlers');
+const { registerBackgroundTaskScheduling } = require('./background-task-scheduling');
+
+function createBackgroundTaskSetup(options) {
+  const pool = options && options.pool;
+  const common = options && options.common;
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const collectUploadPathsFromDirectory = options && options.collectUploadPathsFromDirectory;
+  const removeUnusedUploadFiles = options && options.removeUnusedUploadFiles;
+  const refreshApiSource = options && options.refreshApiSource;
+  const refreshRssFeed = options && options.refreshRssFeed;
+  const uploadsDir = String(options && options.uploadsDir || '').trim();
+  const dataSourceStartupRefreshStaggerMs = Math.max(100, Number(options && options.dataSourceStartupRefreshStaggerMs || 250));
+
+  if (!pool || !common || !backgroundTaskQueue || !collectUploadPathsFromDirectory || !removeUnusedUploadFiles || !refreshApiSource || !refreshRssFeed || !uploadsDir) {
+    throw new Error('createBackgroundTaskSetup requires the background task dependencies.');
+  }
+
+  async function initialize() {
+    registerBackgroundTaskHandlers(options);
+    const backgroundTaskScheduling = registerBackgroundTaskScheduling(options);
+    if (backgroundTaskScheduling && typeof backgroundTaskScheduling.initialize === 'function') {
+      await backgroundTaskScheduling.initialize();
+    }
+  }
+
+  return {
+    initialize: initialize
+  };
+}
+
+module.exports = { createBackgroundTaskSetup };

src/web/lib/dashboard-state.js

@@ -33,6 +33,18 @@ function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboa
   });
 }
 
+function compareScreenNames(left, right) {
+  const leftName = String(left && left.name || '').trim();
+  const rightName = String(right && right.name || '').trim();
+  const nameCompare = leftName.localeCompare(rightName, undefined, { sensitivity: 'base', numeric: true });
+
+  if (nameCompare !== 0) {
+    return nameCompare;
+  }
+
+  return String(left && left.slug || '').localeCompare(String(right && right.slug || ''), undefined, { sensitivity: 'base', numeric: true });
+}
+
 function createDashboardStateService(options) {
   const pool = options && options.pool;
   const common = options && options.common;
@@ -55,8 +67,8 @@ function createDashboardStateService(options) {
 
     const [onboardingRows] = await pool.query(
       `SELECT s.slug, pod.device_id, pod.client_name
-       FROM player_onboarding_devices pod
+      FROM d_onboarding_devices pod
-       JOIN screens s ON s.id = pod.screen_id
+       JOIN d_screens s ON s.id = pod.screen_id
        WHERE pod.client_name IS NOT NULL
          AND TRIM(pod.client_name) <> ''`
     );
@@ -82,11 +94,13 @@ function createDashboardStateService(options) {
       }
     });
 
-    const screens = enrichScreensWithConnections(data.screens || [], connectionsBySlug, onboardingNameBySlug).map(function (screen) {
+    const screens = enrichScreensWithConnections(data.screens || [], connectionsBySlug, onboardingNameBySlug)
-      return Object.assign({}, screen, {
+      .map(function (screen) {
-        player_url: `${playerPublicBaseUrl}/screen/${encodeURIComponent(screen.slug)}`
+        return Object.assign({}, screen, {
-      });
+          player_url: `${playerPublicBaseUrl}/screen/${encodeURIComponent(screen.slug)}`
-    });
+        });
+      })
+      .sort(compareScreenNames);
     const clients = buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, playerPublicBaseUrl, formatDashboardDate);
     const playerServiceConnected = Array.from(playerSnapshotSockets.values()).some(function (socket) {
       return socket && socket.readyState === WebSocket.OPEN;

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

@@ -12,7 +12,7 @@ async function refreshApiSource(pool, common, apiSourceId, apiUrl, actorId) {
 
     await connection.beginTransaction();
     await connection.query(
-      'UPDATE api_sources SET last_pulled_at = ?, last_pull_error = ?, last_response_status = ?, last_response_content_type = ?, last_response_json = ?, modified_by = ? WHERE id = ?',
+      'UPDATE i_api_sources SET last_pulled_at = ?, last_pull_error = ?, last_response_status = ?, last_response_content_type = ?, last_response_json = ?, modified_by = ? WHERE id = ?',
       [new Date(), pullError || null, responseDetails ? responseDetails.responseStatus : null, responseDetails ? responseDetails.responseContentType : null, responseDetails ? responseDetails.responseJson : null, actorId, apiSourceId]
     );
     await connection.commit();

src/web/lib/helpers.js

@@ -91,10 +91,10 @@ function getCanvasSignature(width, height) {
 async function fetchPlaylistCanvasSignature(pool, playlistId) {
   const [rows] = await pool.query(
     `SELECT DISTINCT cs.width AS canvas_width, cs.height AS canvas_height
-     FROM playlist_slides ps
+    FROM c_playlist_slides ps
-     JOIN slides sl ON sl.id = ps.slide_id
+    JOIN c_slides sl ON sl.id = ps.slide_id
-     LEFT JOIN slide_templates st ON st.id = sl.template_id
+    LEFT JOIN c_templates st ON st.id = sl.template_id
-     LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_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`,
@@ -111,7 +111,7 @@ async function fetchPlaylistCanvasSignature(pool, playlistId) {
 
 async function fetchScreensByPlaylistId(connection, playlistId) {
   const [rows] = await connection.query(
-    'SELECT slug FROM screens WHERE playlist_id = ? AND slug IS NOT NULL',
+    'SELECT slug FROM d_screens WHERE playlist_id = ? AND slug IS NOT NULL',
     [playlistId]
   );
   return rows.map(function (row) {
@@ -122,8 +122,8 @@ async function fetchScreensByPlaylistId(connection, playlistId) {
 async function fetchScreensBySlideId(connection, slideId) {
   const [rows] = await connection.query(
     `SELECT DISTINCT s.slug
-     FROM screens s
+    FROM d_screens s
-     JOIN playlist_slides ps ON ps.playlist_id = s.playlist_id
+    JOIN c_playlist_slides ps ON ps.playlist_id = s.playlist_id
      WHERE ps.slide_id = ?
        AND s.slug IS NOT NULL`,
     [slideId]
@@ -136,9 +136,9 @@ async function fetchScreensBySlideId(connection, slideId) {
 async function fetchScreensByTemplateId(connection, templateId) {
   const [rows] = await connection.query(
     `SELECT DISTINCT s.slug
-     FROM screens s
+    FROM d_screens s
-     JOIN playlist_slides ps ON ps.playlist_id = s.playlist_id
+    JOIN c_playlist_slides ps ON ps.playlist_id = s.playlist_id
-     JOIN slides sl ON sl.id = ps.slide_id
+    JOIN c_slides sl ON sl.id = ps.slide_id
      WHERE sl.template_id = ?
        AND s.slug IS NOT NULL`,
     [templateId]
@@ -150,7 +150,7 @@ async function fetchScreensByTemplateId(connection, templateId) {
 
 async function fetchOrderedPlaylistSlides(connection, playlistId) {
   const [rows] = await connection.query(
-    'SELECT id, position FROM playlist_slides WHERE playlist_id = ? ORDER BY position ASC, id ASC',
+    'SELECT id, position FROM c_playlist_slides WHERE playlist_id = ? ORDER BY position ASC, id ASC',
     [playlistId]
   );
   return rows;

src/web/lib/list-query.js

@@ -0,0 +1,89 @@
+function parsePageNumber(value) {
+  const pageNumber = Math.floor(Number(value) || 1);
+  return Math.max(1, pageNumber);
+}
+
+function normalizeSortDirection(value) {
+  return String(value || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+}
+
+function getComparableSortValue(rawValue) {
+  const value = String(rawValue || '').trim();
+  if (!value) {
+    return { type: 'empty', value: '' };
+  }
+
+  const numericValue = Number(value.replace(/,/g, ''));
+  if (!Number.isNaN(numericValue)) {
+    return { type: 'number', value: numericValue };
+  }
+
+  const dateValue = Date.parse(value);
+  if (!Number.isNaN(dateValue)) {
+    return { type: 'date', value: dateValue };
+  }
+
+  return { type: 'string', value: value.toLowerCase() };
+}
+
+function compareSortValues(leftValue, rightValue) {
+  if (leftValue.type === 'empty' && rightValue.type === 'empty') {
+    return 0;
+  }
+  if (leftValue.type === 'empty') {
+    return 1;
+  }
+  if (rightValue.type === 'empty') {
+    return -1;
+  }
+  if (leftValue.type === rightValue.type) {
+    if (leftValue.value < rightValue.value) {
+      return -1;
+    }
+    if (leftValue.value > rightValue.value) {
+      return 1;
+    }
+    return 0;
+  }
+  return String(leftValue.value).localeCompare(String(rightValue.value), undefined, { numeric: true, sensitivity: 'base' });
+}
+
+function sortRows(rows, accessor, sortDirection) {
+  const multiplier = normalizeSortDirection(sortDirection) === 'desc' ? -1 : 1;
+  return (Array.isArray(rows) ? rows.slice() : []).sort(function (leftRow, rightRow) {
+    return compareSortValues(getComparableSortValue(accessor(leftRow)), getComparableSortValue(accessor(rightRow))) * multiplier;
+  });
+}
+
+function createSearchMatcher(searchTerm, fields) {
+  const query = String(searchTerm || '').trim().toLowerCase();
+
+  if (!query) {
+    return function () {
+      return true;
+    };
+  }
+
+  const normalizedFields = Array.isArray(fields) ? fields : [];
+  return function (item) {
+    const haystack = normalizedFields.map(function (field) {
+      if (typeof field === 'function') {
+        return field(item);
+      }
+      return item && field ? item[field] : '';
+    }).map(function (value) {
+      return String(value || '').trim().toLowerCase();
+    }).join(' ');
+
+    return haystack.indexOf(query) !== -1;
+  };
+}
+
+module.exports = {
+  parsePageNumber: parsePageNumber,
+  normalizeSortDirection: normalizeSortDirection,
+  getComparableSortValue: getComparableSortValue,
+  compareSortValues: compareSortValues,
+  sortRows: sortRows,
+  createSearchMatcher: createSearchMatcher
+};

src/web/lib/pagination.js

@@ -17,6 +17,64 @@ function buildQueryString(query) {
   return queryString ? `?${queryString}` : '';
 }
 
+function createPageEntry(pageNumber, currentPage, pageParam, queryState) {
+  const nextQuery = Object.assign({}, queryState, { [pageParam]: pageNumber });
+
+  return {
+    number: pageNumber,
+    active: pageNumber === currentPage,
+    url: buildQueryString(nextQuery)
+  };
+}
+
+function createEllipsisEntry() {
+  return {
+    ellipsis: true
+  };
+}
+
+function buildPaginationPages(totalPages, currentPage, pageParam, queryState, maxVisiblePages) {
+  const pages = [];
+  const visiblePageCount = Math.max(1, Math.min(Number(maxVisiblePages) || 7, totalPages));
+  const firstPage = 1;
+  const lastPage = totalPages;
+
+  if (totalPages <= visiblePageCount) {
+    for (let pageNumber = firstPage; pageNumber <= lastPage; pageNumber += 1) {
+      pages.push(createPageEntry(pageNumber, currentPage, pageParam, queryState));
+    }
+
+    return pages;
+  }
+
+  const innerPageCount = Math.max(1, visiblePageCount - 2);
+  let startPage = Math.max(2, currentPage - Math.floor(innerPageCount / 2));
+  let endPage = startPage + innerPageCount - 1;
+
+  if (endPage > lastPage - 1) {
+    endPage = lastPage - 1;
+    startPage = Math.max(2, endPage - innerPageCount + 1);
+  }
+
+  pages.push(createPageEntry(firstPage, currentPage, pageParam, queryState));
+
+  if (startPage > 2) {
+    pages.push(createEllipsisEntry());
+  }
+
+  for (let pageNumber = startPage; pageNumber <= endPage; pageNumber += 1) {
+    pages.push(createPageEntry(pageNumber, currentPage, pageParam, queryState));
+  }
+
+  if (endPage < lastPage - 1) {
+    pages.push(createEllipsisEntry());
+  }
+
+  pages.push(createPageEntry(lastPage, currentPage, pageParam, queryState));
+
+  return pages;
+}
+
 function buildPagination(totalItems, currentPage, pageParam, queryState, pageSize, itemLabel, ariaLabel) {
   const normalizedPageParam = String(pageParam || 'page').trim() || 'page';
   const normalizedPageSize = Math.max(1, Number(pageSize) || 10);
@@ -24,19 +82,12 @@ function buildPagination(totalItems, currentPage, pageParam, queryState, pageSiz
   const safeCurrentPage = Math.min(normalizePageNumber(currentPage), totalPages);
   const startIndex = totalItems <= 0 ? 0 : (safeCurrentPage - 1) * normalizedPageSize;
   const endIndex = totalItems <= 0 ? 0 : Math.min(totalItems, startIndex + normalizedPageSize);
-  const pages = [];
+  const pages = buildPaginationPages(totalPages, safeCurrentPage, normalizedPageParam, queryState, 7);
-
-  for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
-    const nextQuery = Object.assign({}, queryState, { [normalizedPageParam]: pageNumber });
-    pages.push({
-      number: pageNumber,
-      active: pageNumber === safeCurrentPage,
-      url: buildQueryString(nextQuery)
-    });
-  }
 
   const previousQuery = Object.assign({}, queryState, { [normalizedPageParam]: safeCurrentPage - 1 });
   const nextQuery = Object.assign({}, queryState, { [normalizedPageParam]: safeCurrentPage + 1 });
+  const firstQuery = Object.assign({}, queryState, { [normalizedPageParam]: 1 });
+  const lastQuery = Object.assign({}, queryState, { [normalizedPageParam]: totalPages });
 
   return {
     currentPage: safeCurrentPage,
@@ -45,8 +96,12 @@ function buildPagination(totalItems, currentPage, pageParam, queryState, pageSiz
     hasMultiplePages: totalPages > 1,
     startItem: startIndex + 1,
     endItem: endIndex,
+    hasFirst: safeCurrentPage > 1,
     hasPrevious: safeCurrentPage > 1,
     hasNext: safeCurrentPage < totalPages,
+    hasLast: safeCurrentPage < totalPages,
+    firstUrl: buildQueryString(firstQuery),
+    lastUrl: buildQueryString(lastQuery),
     previousUrl: buildQueryString(previousQuery),
     nextUrl: buildQueryString(nextQuery),
     pages: pages,
@@ -60,5 +115,6 @@ function buildPagination(totalItems, currentPage, pageParam, queryState, pageSiz
 module.exports = {
   normalizePageNumber,
   buildQueryString,
+  buildPaginationPages,
   buildPagination
 };

src/web/lib/player-actions.js

@@ -68,7 +68,7 @@ function createPlayerActionService(options) {
   }
 
   async function getScreenDeleteBlockMessage(pool, screen, getScreenConnections) {
-    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM player_onboarding_devices WHERE screen_id = ?', [screen.id]);
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM d_onboarding_devices WHERE screen_id = ?', [screen.id]);
     if (Number(rows[0] && rows[0].ref_count) > 0) {
       return 'This screen is still linked to onboarding devices.';
     }
@@ -89,22 +89,22 @@ function createPlayerActionService(options) {
   }
 
   async function getSlideDeleteBlockMessage(pool, slide) {
-    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM playlist_slides WHERE slide_id = ?', [slide.id]);
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_playlist_slides WHERE slide_id = ?', [slide.id]);
     return Number(rows[0] && rows[0].ref_count) > 0 ? 'This slide is still used by one or more playlists.' : '';
   }
 
   async function getTemplateDeleteBlockMessage(pool, template) {
-    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM slides WHERE template_id = ?', [template.id]);
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_slides WHERE template_id = ?', [template.id]);
     return Number(rows[0] && rows[0].ref_count) > 0 ? 'This template is still used by one or more slides.' : '';
   }
 
   async function getCanvasSizeDeleteBlockMessage(pool, canvasSize) {
-    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM slide_templates WHERE canvas_size_id = ?', [canvasSize.id]);
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_templates WHERE canvas_size_id = ?', [canvasSize.id]);
     return Number(rows[0] && rows[0].ref_count) > 0 ? 'This canvas size is still used by one or more templates.' : '';
   }
 
   async function getPlaylistDeleteBlockMessage(pool, playlist) {
-    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM screens WHERE playlist_id = ?', [playlist.id]);
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM d_screens WHERE playlist_id = ?', [playlist.id]);
     return Number(rows[0] && rows[0].ref_count) > 0 ? 'This playlist is still assigned to one or more screens.' : '';
   }
 

src/web/lib/rbac-data.js

@@ -13,29 +13,41 @@ function parseCsvIds(value) {
 }
 
 async function fetchPermissions(pool) {
-  const [rows] = await pool.query('SELECT id, permission_key, name, section_name, description FROM permissions ORDER BY section_name ASC, name ASC');
+  const [rows] = await pool.query('SELECT id, permission_key, name, section_name, description FROM a_permissions ORDER BY section_name ASC, name ASC');
   return rows || [];
 }
 
 async function fetchRoles(pool) {
   const [rows] = await pool.query(
     `SELECT r.id, r.role_key, r.name, r.description, r.created_at, r.modified_at,
-            (SELECT COUNT(*) FROM user_roles ur WHERE ur.role_id = r.id) AS user_count,
+                 (SELECT COUNT(*) FROM a_user_roles ur WHERE ur.role_id = r.id) AS user_count,
-            (SELECT COUNT(*) FROM role_permissions rp WHERE rp.role_id = r.id) AS permission_count
+                 (SELECT COUNT(*) FROM a_role_permissions rp WHERE rp.role_id = r.id) AS permission_count
-     FROM roles r
+               FROM a_roles r
      ORDER BY r.name ASC`
   );
   return rows || [];
 }
 
-async function fetchRolesPage(pool, page, pageSize) {
+async function fetchRolesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
     selectSql: `SELECT r.id, r.role_key, r.name, r.description, r.created_at, r.modified_at,
-            (SELECT COUNT(*) FROM user_roles ur WHERE ur.role_id = r.id) AS user_count,
+                 (SELECT COUNT(*) FROM a_user_roles ur WHERE ur.role_id = r.id) AS user_count,
-            (SELECT COUNT(*) FROM role_permissions rp WHERE rp.role_id = r.id) AS permission_count
+                 (SELECT COUNT(*) FROM a_role_permissions rp WHERE rp.role_id = r.id) AS permission_count
-     FROM roles r
+               FROM a_roles r
      ORDER BY r.name ASC`,
-    countSql: 'SELECT COUNT(*) AS count FROM roles',
+    countSql: 'SELECT COUNT(*) AS count FROM a_roles',
+    searchColumns: ['r.role_key', 'r.name', 'r.description'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      role: 'r.name',
+      description: 'r.description',
+      users: 'user_count',
+      permissions: 'permission_count',
+      created: 'r.created_at',
+      modified: 'r.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -46,9 +58,9 @@ async function fetchRolesPage(pool, page, pageSize) {
 async function fetchRoleById(pool, roleId) {
   const [rows] = await pool.query(
     `SELECT r.id, r.role_key, r.name, r.description, r.created_at, r.modified_at,
-            (SELECT COUNT(*) FROM user_roles ur WHERE ur.role_id = r.id) AS user_count,
+                 (SELECT COUNT(*) FROM a_user_roles ur WHERE ur.role_id = r.id) AS user_count,
-            (SELECT COUNT(*) FROM role_permissions rp WHERE rp.role_id = r.id) AS permission_count
+                 (SELECT COUNT(*) FROM a_role_permissions rp WHERE rp.role_id = r.id) AS permission_count
-     FROM roles r
+               FROM a_roles r
      WHERE r.id = ?
      LIMIT 1`,
     [roleId]
@@ -59,8 +71,8 @@ async function fetchRoleById(pool, roleId) {
 async function fetchRolePermissionKeys(pool, roleId) {
   const [rows] = await pool.query(
     `SELECT p.permission_key
-     FROM role_permissions rp
+     FROM a_role_permissions rp
-     JOIN permissions p ON p.id = rp.permission_id
+    JOIN a_permissions p ON p.id = rp.permission_id
      WHERE rp.role_id = ?
      ORDER BY p.section_name ASC, p.name ASC`,
     [roleId]
@@ -73,7 +85,7 @@ async function fetchRolePermissionKeys(pool, roleId) {
 async function fetchRoleUserIds(pool, roleId) {
   const [rows] = await pool.query(
     `SELECT ur.user_id
-     FROM user_roles ur
+     FROM a_user_roles ur
      WHERE ur.role_id = ?
      ORDER BY ur.user_id ASC`,
     [roleId]
@@ -88,8 +100,8 @@ async function fetchRoleUserIds(pool, roleId) {
 async function fetchRolesForUser(pool, userId) {
   const [rows] = await pool.query(
     `SELECT r.id, r.role_key, r.name, r.description
-     FROM user_roles ur
+    FROM a_user_roles ur
-     JOIN roles r ON r.id = ur.role_id
+    JOIN a_roles r ON r.id = ur.role_id
      WHERE ur.user_id = ?
      ORDER BY r.name ASC`,
     [userId]
@@ -102,13 +114,13 @@ async function fetchUsersWithRoles(pool) {
     `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
-     FROM users u
+    FROM a_users u
      LEFT JOIN (
        SELECT ur.user_id,
               GROUP_CONCAT(DISTINCT r.name ORDER BY r.name SEPARATOR ', ') AS role_names,
               GROUP_CONCAT(DISTINCT r.id ORDER BY r.name SEPARATOR ',') AS role_ids_csv
-       FROM user_roles ur
+      FROM a_user_roles ur
-       JOIN roles r ON r.id = ur.role_id
+      JOIN a_roles r ON r.id = ur.role_id
        GROUP BY ur.user_id
      ) role_data ON role_data.user_id = u.id
      ORDER BY u.id ASC`
@@ -122,22 +134,39 @@ async function fetchUsersWithRoles(pool) {
   });
 }
 
-async function fetchUsersWithRolesPage(pool, page, pageSize) {
+async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection, options) {
+  const excludedUserId = Number(options && options.excludeUserId);
+  const hasExcludedUserId = Number.isInteger(excludedUserId) && excludedUserId > 0;
+  const whereSql = hasExcludedUserId ? 'WHERE u.id <> ?' : '';
+  const queryArgs = hasExcludedUserId ? [excludedUserId] : [];
   const paged = await fetchPagedRows(pool, {
     selectSql: `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
-     FROM users u
+    FROM a_users u
      LEFT JOIN (
        SELECT ur.user_id,
               GROUP_CONCAT(DISTINCT r.name ORDER BY r.name SEPARATOR ', ') AS role_names,
               GROUP_CONCAT(DISTINCT r.id ORDER BY r.name SEPARATOR ',') AS role_ids_csv
-       FROM user_roles ur
+      FROM a_user_roles ur
-       JOIN roles r ON r.id = ur.role_id
+      JOIN a_roles r ON r.id = ur.role_id
        GROUP BY ur.user_id
      ) role_data ON role_data.user_id = u.id
+     ${whereSql}
      ORDER BY u.id ASC`,
-    countSql: 'SELECT COUNT(*) AS count FROM users',
+    countSql: `SELECT COUNT(*) AS count FROM a_users u ${whereSql}`,
+    params: queryArgs,
+    searchColumns: ['u.name', 'u.username', 'role_data.role_names'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      user: 'u.username',
+      name: 'u.name',
+      roles: 'role_names',
+      created: 'u.created_at',
+      modified: 'u.modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
     page: page,
     pageSize: pageSize
   });
@@ -161,13 +190,13 @@ async function fetchUserWithRoles(pool, userId) {
     `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
-     FROM users u
+    FROM a_users u
      LEFT JOIN (
        SELECT ur.user_id,
               GROUP_CONCAT(DISTINCT r.name ORDER BY r.name SEPARATOR ', ') AS role_names,
               GROUP_CONCAT(DISTINCT r.id ORDER BY r.name SEPARATOR ',') AS role_ids_csv
-       FROM user_roles ur
+      FROM a_user_roles ur
-       JOIN roles r ON r.id = ur.role_id
+      JOIN a_roles r ON r.id = ur.role_id
        GROUP BY ur.user_id
      ) role_data ON role_data.user_id = u.id
      WHERE u.id = ?
@@ -192,9 +221,9 @@ async function syncUserRoles(pool, userId, roleIds) {
     return Number.isInteger(roleId) && roleId > 0;
   })));
 
-  await pool.query('DELETE FROM user_roles WHERE user_id = ?', [userId]);
+  await pool.query('DELETE FROM a_user_roles WHERE user_id = ?', [userId]);
   for (const roleId of uniqueRoleIds) {
-    await pool.query('INSERT IGNORE INTO user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
+    await pool.query('INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
   }
 }
 
@@ -205,9 +234,9 @@ async function syncRoleUsers(pool, roleId, userIds) {
     return Number.isInteger(userId) && userId > 0;
   })));
 
-  await pool.query('DELETE FROM user_roles WHERE role_id = ?', [roleId]);
+  await pool.query('DELETE FROM a_user_roles WHERE role_id = ?', [roleId]);
   for (const userId of uniqueUserIds) {
-    await pool.query('INSERT IGNORE INTO user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
+    await pool.query('INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
   }
 }
 
@@ -215,18 +244,18 @@ async function syncRolePermissions(pool, roleId, permissionKeys) {
   const uniquePermissionKeys = normalizePermissionKeys(permissionKeys);
 
   if (!uniquePermissionKeys.length) {
-    await pool.query('DELETE FROM role_permissions WHERE role_id = ?', [roleId]);
+    await pool.query('DELETE FROM a_role_permissions WHERE role_id = ?', [roleId]);
     return;
   }
 
-  const [permissionRows] = await pool.query('SELECT id, permission_key FROM permissions WHERE permission_key IN (?)', [uniquePermissionKeys]);
+  const [permissionRows] = await pool.query('SELECT id, permission_key FROM a_permissions WHERE permission_key IN (?)', [uniquePermissionKeys]);
   if (permissionRows.length !== uniquePermissionKeys.length) {
     throw new Error('One or more selected permissions are invalid.');
   }
 
-  await pool.query('DELETE FROM role_permissions WHERE role_id = ?', [roleId]);
+  await pool.query('DELETE FROM a_role_permissions WHERE role_id = ?', [roleId]);
   for (const permissionRow of permissionRows) {
-    await pool.query('INSERT IGNORE INTO role_permissions (role_id, permission_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [roleId, Number(permissionRow.id), null, null]);
+    await pool.query('INSERT IGNORE INTO a_role_permissions (role_id, permission_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [roleId, Number(permissionRow.id), null, null]);
   }
 }
 

src/web/lib/session.js

@@ -57,8 +57,8 @@ function createSessionService(options) {
     const tokenHash = hashSessionToken(token);
     const [rows] = await pool.query(
       `SELECT s.user_id, u.id, u.name, u.username
-       FROM auth_sessions s
+      FROM a_sessions s
-       JOIN users u ON u.id = s.user_id
+      JOIN a_users u ON u.id = s.user_id
        WHERE s.session_hash = ?
          AND s.expires_at > NOW()
        LIMIT 1`,
@@ -71,23 +71,23 @@ function createSessionService(options) {
     const userId = Number(rows[0].id);
     const [roleRows] = await pool.query(
       `SELECT r.role_key
-       FROM user_roles ur
+      FROM a_user_roles ur
-       JOIN roles r ON r.id = ur.role_id
+      JOIN a_roles r ON r.id = ur.role_id
        WHERE ur.user_id = ?
        ORDER BY r.name ASC`,
       [userId]
     );
     const [permissionRows] = await pool.query(
       `SELECT p.permission_key
-       FROM user_roles ur
+      FROM a_user_roles ur
-       JOIN role_permissions rp ON rp.role_id = ur.role_id
+      JOIN a_role_permissions rp ON rp.role_id = ur.role_id
-       JOIN permissions p ON p.id = rp.permission_id
+      JOIN a_permissions p ON p.id = rp.permission_id
        WHERE ur.user_id = ?
        ORDER BY p.section_name ASC, p.name ASC`,
       [userId]
     );
 
-    await pool.query('UPDATE auth_sessions SET last_used_at = CURRENT_TIMESTAMP, modified_by = ? WHERE session_hash = ?', [rows[0].user_id, tokenHash]);
+    await pool.query('UPDATE a_sessions SET last_used_at = CURRENT_TIMESTAMP, modified_by = ? WHERE session_hash = ?', [rows[0].user_id, tokenHash]);
     return Object.assign({}, rows[0], {
       roleKeys: roleRows.map(function (row) {
         return String(row.role_key || '').trim();
@@ -103,7 +103,7 @@ function createSessionService(options) {
     const tokenHash = hashSessionToken(token);
     const expiresAt = new Date(Date.now() + sessionMaxAgeMs);
     await pool.query(
-      'INSERT INTO auth_sessions (session_hash, user_id, expires_at, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
+      'INSERT INTO a_sessions (session_hash, user_id, expires_at, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
       [tokenHash, userId, expiresAt, userId, userId]
     );
     return token;

src/web/lib/slide-thumbnails.js

@@ -98,6 +98,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
       : '';
   }
 
+  if (regionType === 'video') {
+    const src = resolveAssetUrl(baseUrl, rawValue);
+    return src
+      ? '<video src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'video') + '" muted playsinline preload="metadata"></video>'
+      : '';
+  }
+
   if (regionType === 'webpage') {
     const src = resolveAssetUrl(baseUrl, rawValue);
     return src
@@ -120,124 +127,6 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   return buildTextRegionMarkup(region, regionContent);
 }
 
-function buildSlideHtml(slide, baseUrl) {
-  const canvasSize = getCanvasSize(slide);
-  const template = slide && slide.template ? slide.template : null;
-  const backgroundColor = sanitizeTextColor(template && template.background_color ? template.background_color : '#111111', '#111111');
-  const backgroundImagePath = template && template.background_image_path ? resolveAssetUrl(baseUrl, template.background_image_path) : '';
-
-  if (!template) {
-    const mediaPath = String(slide && slide.media_path || '').trim();
-    const mediaUrl = resolveAssetUrl(baseUrl, mediaPath);
-    const kind = mediaKind(mediaPath || slide.media_type || '');
-    const mediaMarkup = kind === 'image' && mediaUrl
-      ? '<img src="' + escapeHtml(mediaUrl) + '" alt="' + escapeHtml(slide.title || 'slide') + '" />'
-      : '';
-
-    return [
-      '<!doctype html>',
-      '<html>',
-      '  <head>',
-      '    <meta charset="utf-8" />',
-      '    <meta name="viewport" content="width=' + canvasSize.width + ', initial-scale=1" />',
-      '    <link rel="stylesheet" href="' + escapeHtml(baseUrl + '/assets/css/player.css') + '" />',
-      '    <style>',
-      '      html, body { margin: 0; width: ' + canvasSize.width + 'px; height: ' + canvasSize.height + 'px; overflow: hidden; background: #111111; }',
-      '      body { display: flex; align-items: stretch; justify-content: stretch; }',
-      '      .thumbnail-stage { position: relative; width: ' + canvasSize.width + 'px; height: ' + canvasSize.height + 'px; overflow: hidden; background: ' + escapeHtml(backgroundColor) + '; }',
-      '      .thumbnail-stage .template-region.text { color: #fff; display: block; padding: 0; text-align: left; white-space: normal; word-break: break-word; line-height: 1.35; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale { display: block; transform-origin: top left; width: 100%; height: 100%; white-space: normal; word-break: break-word; line-height: 1.35; text-align: left; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale > * { margin: 0; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale > * + * { margin-top: 0.5em; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale ul,',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale ol { padding-left: 1.2em; }',
-      '      .thumbnail-stage .template-region.image img { width: 100%; height: 100%; object-fit: contain; display: block; }',
-      '      .thumbnail-stage .template-region.webpage iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.html iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.rtmp { background: #000; }',
-      '      .thumbnail-stage .template-region.rtmp video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }',
-      '      .thumbnail-stage .template-region-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); font-size: 0.9rem; }',
-      '      .thumbnail-stage .template-region-rtmp-placeholder { position: absolute; inset: 0; }',
-      '    </style>',
-      '  </head>',
-      '  <body>',
-      '    <div class="thumbnail-stage">',
-      mediaMarkup ? '<div class="slide"><div class="slide-canvas slide-media" style="width:' + canvasSize.width + 'px;height:' + canvasSize.height + 'px;">' + mediaMarkup + '</div></div>' : '',
-      '    </div>',
-      '  </body>',
-      '</html>'
-    ].join('\n');
-  }
-
-  const regions = Array.isArray(template && template.regions) ? template.regions.slice().sort(function (left, right) {
-    return Number(left.z_index || 0) - Number(right.z_index || 0) || Number(left.id || 0) - Number(right.id || 0);
-  }) : [];
-
-  const regionsHtml = regions.map(function (region) {
-    const content = getRegionContent(slide, region);
-    const left = Math.max(0, Number(region.x || 0));
-    const top = Math.max(0, Number(region.y || 0));
-    const width = Math.max(1, Number(region.width || 1));
-    const height = Math.max(1, Number(region.height || 1));
-    const regionType = String(region.region_type || 'text').toLowerCase();
-    const pixelWidth = Math.max(1, Math.round(Number(region.width || 0) || 1));
-    const pixelHeight = Math.max(1, Math.round(Number(region.height || 0) || 1));
-    const innerHtml = regionType === 'text'
-      ? buildTextRegionMarkup(Object.assign({}, region, { baseStyle: 'left:' + left + '%;top:' + top + '%;width:' + width + '%;height:' + height + '%;z-index:' + Number(region.z_index || 0) + ';', pixelWidth: pixelWidth, pixelHeight: pixelHeight }), content)
-      : buildRegionInnerHtml(Object.assign({}, region, { baseStyle: 'left:' + left + '%;top:' + top + '%;width:' + width + '%;height:' + height + '%;z-index:' + Number(region.z_index || 0) + ';', pixelWidth: pixelWidth, pixelHeight: pixelHeight }), content, baseUrl);
-
-    if (!innerHtml) {
-      return '';
-    }
-
-    return [
-      '<div class="template-region ' + escapeHtml(regionType) + '" style="left:' + left + '%;top:' + top + '%;width:' + width + '%;height:' + height + '%;z-index:' + Number(region.z_index || 0) + ';">',
-      innerHtml,
-      '</div>'
-    ].join('');
-  }).join('');
-
-  return [
-    '<!doctype html>',
-    '<html>',
-    '  <head>',
-    '    <meta charset="utf-8" />',
-    '    <meta name="viewport" content="width=' + canvasSize.width + ', initial-scale=1" />',
-      '    <link rel="stylesheet" href="' + escapeHtml(baseUrl + '/assets/css/player.css') + '" />',
-    '    <style>',
-    '      html, body { margin: 0; width: ' + canvasSize.width + 'px; height: ' + canvasSize.height + 'px; overflow: hidden; background: #111111; }',
-    '      body { display: flex; align-items: stretch; justify-content: stretch; }',
-    '      .thumbnail-stage { position: relative; width: ' + canvasSize.width + 'px; height: ' + canvasSize.height + 'px; overflow: hidden; background: ' + escapeHtml(backgroundColor) + '; }',
-      '      .thumbnail-stage .template-stage { position: relative; width: 100%; height: 100%; }',
-      '      .thumbnail-stage .template-stage .template-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; z-index: 0; }',
-      '      .thumbnail-stage .template-region { position: absolute; overflow: hidden; box-sizing: border-box; }',
-      '      .thumbnail-stage .template-region.image img { width: 100%; height: 100%; object-fit: contain; display: block; }',
-      '      .thumbnail-stage .template-region.webpage iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.html iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.rtmp { background: #000; }',
-      '      .thumbnail-stage .template-region.rtmp video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }',
-      '      .thumbnail-stage .template-region.text { color: #fff; display: block; padding: 0; text-align: left; white-space: normal; word-break: break-word; line-height: 1.35; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale { display: block; transform-origin: top left; width: 100%; height: 100%; white-space: normal; word-break: break-word; line-height: 1.35; text-align: left; overflow: hidden; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale > * { margin: 0; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale > * + * { margin-top: 0.5em; }',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale ul,',
-      '      .thumbnail-stage .template-region.text .template-region-text-scale ol { padding-left: 1.2em; }',
-      '      .thumbnail-stage .template-region-rtmp-placeholder { position: absolute; inset: 0; }',
-      '      .thumbnail-stage .template-region-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); font-size: 0.9rem; }',
-    '    </style>',
-    '  </head>',
-    '  <body>',
-    '    <div class="thumbnail-stage">',
-      '      <div class="template-stage" style="background-color:' + escapeHtml(backgroundColor) + ';">',
-    backgroundImagePath ? '        <img class="template-background" src="' + escapeHtml(backgroundImagePath) + '" alt="" />' : '',
-    regionsHtml,
-      '      </div>',
-    '    </div>',
-    '  </body>',
-    '</html>'
-  ].join('\n');
-}
-
 async function launchBrowser() {
   let executablePath = SYSTEM_CHROMIUM_PATHS.find(function (candidate) {
     return fs.existsSync(candidate);
@@ -304,6 +193,42 @@ async function captureSlideThumbnail(options) {
 
   await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
 
+  async function waitForThumbnailRender(page) {
+    await page.waitForFunction(function () {
+      return document.readyState === 'complete' && Boolean(document.querySelector('.slide-canvas'));
+    }, { timeout: 30000 });
+
+    await page.waitForFunction(function () {
+      var canvas = document.querySelector('.slide-canvas');
+      if (!canvas) {
+        return false;
+      }
+
+      var images = Array.prototype.slice.call(canvas.querySelectorAll('img'));
+      return images.every(function (image) {
+        return image.complete && typeof image.naturalWidth === 'number';
+      });
+    }, { timeout: 30000 });
+
+    await page.evaluate(async function () {
+      if (document.fonts && document.fonts.ready) {
+        try {
+          await document.fonts.ready;
+        } catch (_error) {
+          // Ignore font readiness failures and fall back to the rendered frame.
+        }
+      }
+    });
+
+    await page.evaluate(function () {
+      return new Promise(function (resolve) {
+        window.requestAnimationFrame(function () {
+          window.requestAnimationFrame(resolve);
+        });
+      });
+    });
+  }
+
   const browser = await launchBrowser();
   try {
     const page = await browser.newPage();
@@ -312,12 +237,11 @@ async function captureSlideThumbnail(options) {
       const previewUrl = baseUrl + previewPath;
       await page.setExtraHTTPHeaders(createRequestAuthHeaders({
         method: 'GET',
-        pathname: previewPath,
+        pathname: previewPath
-        body: {}
       }));
       await page.setViewport(PLAYER_VIEWPORT);
       await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
-      await page.waitForSelector('.slide-canvas', { timeout: 30000, visible: true });
+      await waitForThumbnailRender(page);
       const canvas = await page.$('.slide-canvas');
       if (!canvas) {
         throw new Error('Player render did not produce a slide canvas.');
@@ -352,13 +276,13 @@ async function captureSlideThumbnail(options) {
     }
   });
 
-  await pool.query('UPDATE slides SET thumbnail_path = ? WHERE id = ?', [thumbnailPath, slide.id]);
+  await pool.query('UPDATE c_slides SET thumbnail_path = ? WHERE id = ?', [thumbnailPath, slide.id]);
   return {
     slideId: slide.id,
     thumbnailPath: thumbnailPath,
     filePath: filePath,
     fullSizePath: fullSizePath,
-    mediaKind: mediaKind(slide.media_path || '')
+    mediaKind: mediaKind('')
   };
 }
 

src/web/lib/upload-sync.js

@@ -15,6 +15,7 @@ function createUploadSyncService(options) {
   const playerSnapshotCache = options && options.playerSnapshotCache;
   const notifyPlayerScreens = options && options.notifyPlayerScreens;
   const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const MAX_UPLOAD_BYTES = 1024 * 1024 * 1024;
 
   let playerUploadSyncMode = null;
   let playerUploadSyncModePromise = null;
@@ -40,7 +41,12 @@ function createUploadSyncService(options) {
         cb(null, `${stamp}${safeExt}`);
       }
     });
-    return multer({ storage });
+    return multer({
+      storage: storage,
+      limits: {
+        fileSize: MAX_UPLOAD_BYTES
+      }
+    });
   }
 
   function normalizeUploadReference(uploadPath) {
@@ -70,11 +76,15 @@ function createUploadSyncService(options) {
       return null;
     }
 
+    const mediaRoot = path.basename(normalizedUploadDir) === 'uploads'
+      ? path.dirname(normalizedUploadDir)
+      : normalizedUploadDir;
+
     if (relativePath.startsWith('uploads/')) {
-      return path.join(normalizedUploadDir, relativePath.slice('uploads/'.length));
+      return path.join(mediaRoot, relativePath);
     }
 
-    return path.join(path.dirname(normalizedUploadDir), relativePath);
+    return path.join(mediaRoot, relativePath);
   }
 
   function collectUploadReferencesFromValue(value, refs) {
@@ -111,7 +121,6 @@ function createUploadSyncService(options) {
     if (!slide) {
       return refs;
     }
-    collectUploadReferencesFromValue(slide.media_path, refs);
     collectUploadReferencesFromValue(common.parseJsonSafe(slide.content_json), refs);
     return refs;
   }
@@ -130,7 +139,6 @@ function createUploadSyncService(options) {
     if (!payload) {
       return refs;
     }
-    collectUploadReferencesFromValue(payload.mediaPath, refs);
     collectUploadReferencesFromValue(common.parseJsonSafe(payload.contentJson), refs);
     collectUploadReferencesFromValue(payload.backgroundImagePath, refs);
     return refs;
@@ -139,16 +147,19 @@ function createUploadSyncService(options) {
   async function countUploadReferences(pool, uploadPath) {
     const [slideRows] = await pool.query(
       `SELECT COUNT(*) AS ref_count
-       FROM slides
+      FROM c_slides
-       WHERE media_path = ?
+       WHERE JSON_SEARCH(COALESCE(content_json, JSON_OBJECT()), 'one', ?) IS NOT NULL`,
-         OR JSON_SEARCH(COALESCE(content_json, JSON_OBJECT()), 'one', ?) IS NOT NULL`,
-      [uploadPath, uploadPath]
-    );
-    const [templateRows] = await pool.query(
-      'SELECT COUNT(*) AS ref_count FROM slide_templates WHERE background_image_path = ?',
       [uploadPath]
     );
-    return Number(slideRows[0].ref_count || 0) + Number(templateRows[0].ref_count || 0);
+    const [thumbnailRows] = await pool.query(
+      'SELECT COUNT(*) AS ref_count FROM c_slides WHERE thumbnail_path = ?',
+      [uploadPath]
+    );
+    const [templateRows] = await pool.query(
+      'SELECT COUNT(*) AS ref_count FROM c_templates WHERE background_image_path = ?',
+      [uploadPath]
+    );
+    return Number(slideRows[0].ref_count || 0) + Number(thumbnailRows[0].ref_count || 0) + Number(templateRows[0].ref_count || 0);
   }
 
   async function removeUnusedUploadFiles(pool, uploadDir, uploadPaths) {
@@ -176,6 +187,51 @@ function createUploadSyncService(options) {
     }
   }
 
+  async function collectUploadPathsFromDirectory(uploadDir) {
+    const normalizedUploadDir = normalizeUploadRoot(uploadDir);
+    if (!normalizedUploadDir) {
+      return [];
+    }
+
+    const uploadPaths = [];
+
+    async function walkDirectory(currentDir, relativeDir) {
+      let entries = [];
+      try {
+        entries = await fs.promises.readdir(currentDir, { withFileTypes: true });
+      } catch (error) {
+        if (error && error.code !== 'ENOENT') {
+          console.warn('Unable to read upload directory:', currentDir, error);
+        }
+        return;
+      }
+
+      for (const entry of entries) {
+        const entryName = String(entry && entry.name || '').trim();
+        if (!entryName || entryName === '.' || entryName === '..') {
+          continue;
+        }
+
+        const nextRelativePath = relativeDir ? path.posix.join(relativeDir, entryName) : entryName;
+        const nextAbsolutePath = path.join(currentDir, entryName);
+
+        if (entry.isDirectory && entry.isDirectory()) {
+          await walkDirectory(nextAbsolutePath, nextRelativePath);
+          continue;
+        }
+
+        if (entry.isFile && !entry.isFile()) {
+          continue;
+        }
+
+        uploadPaths.push('/media/uploads/' + nextRelativePath.replace(/\\/g, '/'));
+      }
+    }
+
+    await walkDirectory(normalizedUploadDir, '');
+    return uploadPaths;
+  }
+
   async function getPlayerUploadSyncMode(localUploadDir) {
     if (playerUploadSyncMode) {
       return playerUploadSyncMode;
@@ -576,6 +632,10 @@ function createUploadSyncService(options) {
     if (mode === 'playlist') {
       const operation = normalizePlaylistUploadSyncOperation(taskPayload.operation || taskPayload);
 
+      if (operation.nextUploadRefs.length) {
+        await syncUploadRefsToPlayer(operation.nextUploadRefs, operation.localUploadDir);
+      }
+
       if (operation.previousUploadRefs.length) {
         const nextUploadRefSet = new Set(operation.nextUploadRefs);
         await removeUnusedUploadFiles(pool, operation.localUploadDir, operation.previousUploadRefs.filter(function (reference) {
@@ -583,10 +643,6 @@ function createUploadSyncService(options) {
         }));
       }
 
-      if (operation.nextUploadRefs.length) {
-        await syncUploadRefsToPlayer(operation.nextUploadRefs, operation.localUploadDir);
-      }
-
       if (operation.refreshScreenSlugs.length) {
         const refreshTargets = splitRefreshScreenSlugsByVisibility(operation.refreshScreenSlugs, operation.blockedSlideIds, operation.screenSlideCounts);
         if (refreshTargets.ready.length) {
@@ -639,6 +695,7 @@ function createUploadSyncService(options) {
     collectUploadReferencesFromPayload: collectUploadReferencesFromPayload,
     countUploadReferences: countUploadReferences,
     removeUnusedUploadFiles: removeUnusedUploadFiles,
+    collectUploadPathsFromDirectory: collectUploadPathsFromDirectory,
     getPlayerUploadSyncMode: getPlayerUploadSyncMode,
     shouldMirrorUploads: shouldMirrorUploads,
     queuePlayerUploadSync: queuePlayerUploadSync,

src/web/pages/index.js

@@ -33,7 +33,8 @@ module.exports = {
   renderCanvasSizesPage: require(routePath('signage', 'canvas-sizes', 'list')),
   renderCanvasSizeFormPage: require(routePath('signage', 'canvas-sizes', 'add')),
   renderCanvasSizeEditPage: require(routePath('signage', 'canvas-sizes', 'edit')),
-  renderBackgroundTasksPage: require(routePath('settings', 'background-tasks-page')),
+  renderBackgroundTasksPage: require(routePath('settings', 'background-tasks-page')).renderBackgroundTasksPage,
+  renderBackgroundTasksScheduledPage: require(routePath('settings', 'background-tasks-page')).renderBackgroundTasksScheduledPage,
   renderErrorPage: require('./error'),
   renderRbacPage: require(routePath('settings', 'rbac', 'list')),
   renderRbacAddPage: require(routePath('settings', 'rbac', 'add')),

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

@@ -267,7 +267,7 @@
 }
 
 .dashboard-actions-card .card-header,
-.dashboard-table-card .card-header {
+.dashboard-screen-card-shell .card-header {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
@@ -290,7 +290,7 @@
 
 .dashboard-action-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
 }
 
@@ -309,6 +309,107 @@
   font-size: 0.875rem;
 }
 
+.dashboard-screen-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.dashboard-screen-card-header .dashboard-card-heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.dashboard-screen-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 1rem;
+}
+
+.dashboard-screen-tile {
+  display: grid;
+  gap: 0.95rem;
+  padding: 1rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: calc(var(--bs-border-radius) + 0.25rem);
+  background: var(--bs-body-bg);
+}
+
+.dashboard-screen-tile-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.dashboard-screen-tile-text {
+  min-width: 0;
+}
+
+.dashboard-screen-name {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.dashboard-screen-link {
+  display: inline-block;
+  margin-top: 0.25rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.875rem;
+  overflow-wrap: anywhere;
+}
+
+.dashboard-screen-pill {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 0.3rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.dashboard-screen-pill.is-live {
+  background: rgba(25, 135, 84, 0.12);
+  color: var(--bs-success);
+}
+
+.dashboard-screen-pill.is-idle {
+  background: rgba(108, 117, 125, 0.12);
+  color: var(--bs-secondary-color);
+}
+
+.dashboard-screen-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.dashboard-screen-meta div {
+  min-width: 0;
+}
+
+.dashboard-screen-meta dt {
+  color: var(--bs-secondary-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dashboard-screen-meta dd {
+  margin: 0.15rem 0 0;
+  overflow-wrap: anywhere;
+}
+
+.dashboard-screen-empty {
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
 .page-header {
   display: flex;
   align-items: flex-end;
@@ -759,6 +860,13 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: block;
 }
 
+.slide-preview-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
 .slide-preview-background {
   width: 100%;
   height: 100%;
@@ -787,6 +895,246 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   z-index: 0;
 }
 
+.slide-preview-popup-body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+  color: #fff;
+  font-family: Arial, sans-serif;
+}
+
+.slide-preview-popup-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+}
+
+.slide-preview-popup-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: top left;
+  will-change: transform;
+}
+
+.slide-preview-popup-canvas,
+.slide-preview-popup-stage {
+  box-sizing: border-box;
+}
+
+.slide-image-cropper-frame {
+  position: relative;
+  width: 100%;
+  height: 560px;
+  min-height: 360px;
+  max-height: 70vh;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: var(--bs-body-bg);
+}
+
+.slide-image-cropper-frame img {
+  display: block;
+  max-width: 100%;
+  max-height: 65vh;
+}
+
+.slide-image-cropper-frame > .cropper-container {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  display: block;
+}
+
+.slide-image-cropper-frame > .cropper-container img {
+  max-width: none !important;
+  max-height: none !important;
+}
+
+.slide-image-cropper-frame .cropper-container,
+.slide-image-cropper-frame .cropper-canvas,
+.slide-image-cropper-frame .cropper-wrap-box,
+.slide-image-cropper-frame .cropper-crop-box,
+.slide-image-cropper-frame .cropper-view-box,
+.slide-image-cropper-frame .cropper-face {
+  border-radius: 0 !important;
+}
+
+.slide-image-cropper-frame .cropper-wrap-box,
+.slide-image-cropper-frame .cropper-crop-box {
+  border: 0 !important;
+}
+
+.slide-image-cropper-toolbar .btn {
+  white-space: nowrap;
+}
+
+.slide-image-region-preview-box {
+  display: grid;
+  gap: 0;
+  justify-items: end;
+}
+
+.slide-image-region-preview-shell {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 288px;
+  height: 176px;
+  cursor: pointer;
+}
+
+.slide-image-region-preview-shell:focus-visible,
+.slide-image-region-preview-shell:hover .slide-image-region-preview-remove,
+.slide-image-region-preview-shell:focus-visible .slide-image-region-preview-remove {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.slide-image-region-preview-remove {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 999px;
+  background: rgba(33, 37, 41, 0.82);
+  color: #fff;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.92);
+  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
+  pointer-events: none;
+}
+
+.slide-image-region-preview-shell:hover .slide-image-region-preview-remove,
+.slide-image-region-preview-shell:focus-visible .slide-image-region-preview-remove {
+  background: rgba(var(--bs-danger-rgb), 0.92);
+}
+
+.slide-image-region-preview-remove i {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.slide-image-region-upload-zone {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.9rem;
+  min-height: 176px;
+  padding: 1rem 1.1rem;
+  border: 1px dashed var(--bs-border-color);
+  border-radius: 0;
+  background: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.slide-image-region-upload-zone-content,
+.slide-image-region-upload-zone-progress {
+  display: contents;
+}
+
+.slide-image-region-upload-zone-progress {
+  display: none;
+  grid-column: 1 / -1;
+  gap: 0.5rem;
+}
+
+.slide-image-region-upload-zone-progress-label {
+  font-weight: 600;
+  color: var(--bs-body-color);
+}
+
+.slide-image-region-upload-zone-progress-bar {
+  width: 100%;
+  height: 0.85rem;
+}
+
+.slide-image-region-upload-zone-limit {
+  color: var(--bs-danger);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.slide-image-region-upload-zone.is-uploading {
+  grid-template-columns: 1fr;
+  pointer-events: none;
+  cursor: progress;
+  opacity: 0.95;
+}
+
+.slide-image-region-upload-zone.is-uploading .slide-image-region-upload-zone-content {
+  display: none;
+}
+
+.slide-image-region-upload-zone.is-uploading .slide-image-region-upload-zone-progress {
+  display: grid;
+}
+
+.slide-image-region-upload-zone:hover,
+.slide-image-region-upload-zone:focus-within,
+.slide-image-region-upload-zone.is-dragover {
+  border-color: var(--bs-primary);
+  background: var(--bs-secondary-bg);
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
+}
+
+.slide-image-region-upload-zone-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.25rem;
+  color: var(--bs-primary);
+}
+
+.slide-image-region-upload-zone-copy {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.slide-image-region-upload-zone-copy span {
+  color: var(--bs-secondary-color);
+  font-size: 0.875rem;
+}
+
+.slide-image-region-preview {
+  display: block;
+  width: 100%;
+  max-width: 288px;
+  height: 176px;
+  object-fit: contain;
+  border-radius: 0;
+  background: var(--bs-tertiary-bg);
+  border: 0;
+}
+
+.slide-image-region-preview-shell video.slide-image-region-preview {
+  pointer-events: none;
+}
+
+.slide-image-region-preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  color: var(--bs-secondary-color);
+  font-size: 0.8rem;
+}
+
 .template-designer-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 20rem;
@@ -803,7 +1151,7 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   position: relative;
   width: 100%;
   min-height: 18rem;
-  overflow: hidden;
+  /* overflow: hidden; */
   border: 1px solid var(--bs-border-color);
   border-radius: 0;
   background: var(--bs-body-bg);
@@ -832,7 +1180,7 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 
 .designer-overlay {
   z-index: 2;
-  cursor: crosshair;
+  cursor: default;
 }
 
 .designer-rect {
@@ -840,9 +1188,10 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   border: 2px solid rgba(13, 110, 253, 0.95);
   background: rgba(13, 110, 253, 0.12);
   box-sizing: border-box;
-  border-radius: 0.35rem;
+  border-radius: 0;
   min-width: 12px;
   min-height: 12px;
+  cursor: move;
 }
 
 .designer-rect.selected {
@@ -852,12 +1201,12 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 
 .designer-rect-label {
   position: absolute;
-  left: 0;
+  left: 0.4rem;
-  top: -1.55rem;
+  top: 0.35rem;
   max-width: 100%;
   padding: 0.15rem 0.45rem;
   border-radius: 999px;
-  background: rgba(33, 37, 41, 0.88);
+  background: rgba(33, 37, 41, 0.92);
   color: #fff;
   font-size: 0.75rem;
   line-height: 1.2;
@@ -881,26 +1230,30 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 }
 
 .resize-handle.nw {
-  left: -0.4rem;
+  left: 0;
-  top: -0.4rem;
+  top: 0;
+  transform: translate(-50%, -50%);
   cursor: nwse-resize;
 }
 
 .resize-handle.ne {
-  right: -0.4rem;
+  right: 0;
-  top: -0.4rem;
+  top: 0;
+  transform: translate(50%, -50%);
   cursor: nesw-resize;
 }
 
 .resize-handle.sw {
-  left: -0.4rem;
+  left: 0;
-  bottom: -0.4rem;
+  bottom: 0;
+  transform: translate(-50%, 50%);
   cursor: nesw-resize;
 }
 
 .resize-handle.se {
-  right: -0.4rem;
+  right: 0;
-  bottom: -0.4rem;
+  bottom: 0;
+  transform: translate(50%, 50%);
   cursor: nwse-resize;
 }
 
@@ -984,7 +1337,6 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
 }
 
 .region-info-card .card-title {
@@ -1130,8 +1482,14 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   margin: 0;
 }
 
-.region-item .remove-region {
+.region-item [data-region-remove-button] {
-  justify-self: end;
+  width: 100%;
+}
+
+.region-item [data-region-remove-button]:disabled {
+  opacity: 0.65;
+  box-shadow: none;
+  cursor: not-allowed;
 }
 
 .region-item .form-control:focus,
@@ -1194,6 +1552,10 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   z-index: 1085;
 }
 
+.app-toast-container {
+  top: calc(40px + 1rem);
+}
+
 .is-hidden {
   display: none !important;
 }
@@ -1339,10 +1701,6 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   white-space: nowrap;
 }
 
-.playlist-slide-picker-meta {
-  display: none;
-}
-
 .playlist-slide-picker-check {
   position: absolute;
   top: 0.5rem;
@@ -1393,9 +1751,8 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   background: transparent;
   max-width: none;
   overflow: hidden;
-  width: min(calc(100vw - 1rem), 42rem);
+  width: min(calc(100vw - 2rem), 56rem);
-  max-height: calc(100vh - 1rem);
+  max-height: calc(100vh - 0.25rem);
-  height: auto;
   margin: 0;
 }
 
@@ -1444,6 +1801,34 @@ td[data-label="Actions"] > div {
   min-width: 6rem;
 }
 
+.playlist-duration-input::-webkit-outer-spin-button,
+.playlist-duration-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.playlist-duration-input {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.playlist-duration-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  text-align: left;
+}
+
+.playlist-use-video-duration {
+  white-space: nowrap;
+}
+
+td[data-label="Duration"] {
+  text-align: left;
+}
+
 table.table > :not(caption) > * > * {
   vertical-align: middle;
 }
@@ -1582,16 +1967,6 @@ table.table thead th.sort-desc .table-sort-indicator {
     grid-template-columns: 1fr;
   }
 
-  .dashboard-hero-body {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .dashboard-hero-stats {
-    grid-template-columns: 1fr;
-    min-width: 0;
-  }
-
   .page-header {
     align-items: flex-start;
     flex-direction: column;

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

@@ -1,599 +0,0 @@
-(function () {
-
-  function escapeHtml(value) {
-    return String(value ?? '')
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
-  function formatDashboardDate(value) {
-    if (!value) {
-      return '';
-    }
-    var date = new Date(value);
-    if (Number.isNaN(date.getTime())) {
-      return '';
-    }
-    return new Intl.DateTimeFormat('en-US', {
-      month: 'short',
-      day: '2-digit',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      second: '2-digit'
-    }).format(date);
-  }
-
-  function getClientRowKey(client) {
-    return String(client && client.id ? client.id : client && client.clientId ? client.clientId : '').trim();
-  }
-
-  function getClientDisplayName(client) {
-    if (client && client.client_name) {
-      return String(client.client_name).trim();
-    }
-    var clientId = String(client && client.clientId ? client.clientId : '').trim();
-    if (clientId) {
-      return clientId;
-    }
-    return '';
-  }
-
-  function setButtonVariant(button, classesToRemove, classToAdd) {
-    if (!button) {
-      return;
-    }
-
-    if (button.classList) {
-      classesToRemove.forEach(function (className) {
-        button.classList.remove(className);
-      });
-      if (classToAdd) {
-        button.classList.add(classToAdd);
-      }
-      return;
-    }
-
-    var className = String(button.className || '');
-    classesToRemove.forEach(function (removeClass) {
-      className = className.replace(new RegExp('(^|\\s)' + removeClass + '(?=\\s|$)', 'g'), ' ');
-    });
-    if (classToAdd) {
-      className += ' ' + classToAdd;
-    }
-    button.className = className.replace(/\s+/g, ' ').trim();
-  }
-
-  function normalizeDisplayIp(value) {
-    var ip = String(value || '').trim();
-    if (!ip) {
-      return '';
-    }
-
-    if (ip.toLowerCase().indexOf('::ffff:') === 0) {
-      return ip.slice(7).trim();
-    }
-
-    return ip;
-  }
-
-  function initConfirmForms() {
-    document.addEventListener('submit', function (event) {
-      var form = event.target;
-      if (!form || !form.getAttribute) {
-        return;
-      }
-      if (form.hasAttribute && form.hasAttribute('data-async-command')) {
-        return;
-      }
-      var message = form.getAttribute('data-confirm-message');
-      if (message && !window.confirm(message)) {
-        event.preventDefault();
-      }
-    });
-  }
-
-  function markFormDirty(form) {
-    if (!form || !form.hasAttribute || form.hasAttribute('data-clean-on-load')) {
-      return;
-    }
-    form.dataset.dirty = 'true';
-  }
-
-  function clearFormDirty(form) {
-    if (!form) {
-      return;
-    }
-    form.dataset.dirty = 'false';
-  }
-
-  function isFormDirty(form) {
-    return Boolean(form && form.dataset && form.dataset.dirty === 'true');
-  }
-
-  function initDirtyTracking() {
-    document.addEventListener('input', function (event) {
-      var target = event.target;
-      if (!target || !target.form) {
-        return;
-      }
-      markFormDirty(target.form);
-    }, true);
-
-    document.addEventListener('change', function (event) {
-      var target = event.target;
-      if (!target || !target.form) {
-        return;
-      }
-      markFormDirty(target.form);
-    }, true);
-  }
-
-  function initCancelConfirm() {
-    document.addEventListener('click', function (event) {
-      var cancelTarget = event.target.closest('[data-confirm-unsaved]');
-      if (!cancelTarget) {
-        return;
-      }
-
-      var form = cancelTarget.form || cancelTarget.closest('form') || document.querySelector('form[data-dirty="true"]');
-      if (!isFormDirty(form)) {
-        return;
-      }
-
-      var message = cancelTarget.getAttribute('data-confirm-unsaved') || 'You have unsaved changes. Leave this page?';
-      if (!window.confirm(message)) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }, true);
-  }
-
-  function initAsyncCommandForms() {
-    document.addEventListener('submit', function (event) {
-      var form = event.target;
-      if (!form || !form.hasAttribute || !form.hasAttribute('data-async-command')) {
-        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 formData = new FormData(form);
-      var body = new URLSearchParams();
-      formData.forEach(function (value, key) {
-        body.append(key, value);
-      });
-
-      fetch(form.action, {
-        method: (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'
-      }).finally(function () {
-        delete form.dataset.busy;
-      });
-    }, true);
-  }
-
-  function initAsyncSaveForms() {
-    var refreshSequence = 0;
-
-    function setSaveActionValue(form, value) {
-      if (!form) {
-        return;
-      }
-
-      var hiddenInput = form.querySelector('input[type="hidden"][name="save_action"]');
-      if (!hiddenInput) {
-        hiddenInput = document.createElement('input');
-        hiddenInput.type = 'hidden';
-        hiddenInput.name = 'save_action';
-        form.appendChild(hiddenInput);
-      }
-
-      hiddenInput.value = String(value || '').trim().toLowerCase();
-    }
-
-    function getResponseQueryValue(responseUrl, key) {
-      try {
-        var url = new URL(responseUrl, window.location.href);
-        return String(url.searchParams.get(key) || '').trim();
-      } catch (_error) {
-        return '';
-      }
-    }
-
-    function rebindRefreshTarget(targetElement) {
-      if (!targetElement) {
-        return;
-      }
-
-      if (typeof window.initJsonTogglePanels === 'function') {
-        window.initJsonTogglePanels(targetElement);
-      }
-      if (typeof window.initLocalDateTimes === 'function') {
-        window.initLocalDateTimes(targetElement);
-      }
-    }
-
-    function replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId) {
-      if (sequenceId !== refreshSequence) {
-        return;
-      }
-
-      fetch(window.location.href, {
-        method: 'GET',
-        headers: {
-          'X-Requested-With': 'XMLHttpRequest',
-          'Accept': 'text/html, application/xhtml+xml'
-        },
-        credentials: 'same-origin',
-        cache: 'no-store'
-      }).then(function (response) {
-        if (!response.ok) {
-          throw new Error('Unable to refresh saved data.');
-        }
-        return response.text();
-      }).then(function (text) {
-        if (sequenceId !== refreshSequence) {
-          return;
-        }
-
-        var responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
-        var currentTarget = document.querySelector(refreshTargetSelector);
-        var nextTarget = responseDocument.querySelector(refreshTargetSelector);
-        if (!currentTarget || !nextTarget) {
-          return;
-        }
-
-        currentTarget.outerHTML = nextTarget.outerHTML;
-        rebindRefreshTarget(document.querySelector(refreshTargetSelector));
-      }).catch(function (_error) {
-        // Ignore refresh replacement failures and leave the existing content in place.
-      });
-    }
-
-    function watchRefreshTask(refreshStateUrl, refreshTaskId, refreshTargetSelector, sequenceId) {
-      var pollDelayMs = 1000;
-      var maxAttempts = 60;
-
-      function poll(attempt) {
-        if (sequenceId !== refreshSequence) {
-          return;
-        }
-
-        var stateUrl;
-        try {
-          stateUrl = new URL(refreshStateUrl, window.location.href);
-        } catch (_error) {
-          return;
-        }
-        stateUrl.searchParams.set('refresh_task_id', refreshTaskId);
-
-        fetch(stateUrl.toString(), {
-          method: 'GET',
-          headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'Accept': 'application/json, text/plain, */*'
-          },
-          credentials: 'same-origin',
-          cache: 'no-store'
-        }).then(function (response) {
-          if (!response.ok) {
-            throw new Error('Unable to check refresh status.');
-          }
-          return response.json();
-        }).then(function (payload) {
-          if (sequenceId !== refreshSequence) {
-            return;
-          }
-
-          var status = String(payload && payload.status || '').trim().toLowerCase();
-          if (status === 'queued' || status === 'running') {
-            if (attempt < maxAttempts) {
-              window.setTimeout(function () {
-                poll(attempt + 1);
-              }, pollDelayMs);
-            }
-            return;
-          }
-
-          replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId);
-        }).catch(function () {
-          if (attempt < maxAttempts) {
-            window.setTimeout(function () {
-              poll(attempt + 1);
-            }, pollDelayMs);
-          }
-        });
-      }
-
-      poll(0);
-    }
-
-    document.addEventListener('click', function (event) {
-      var target = event.target;
-      if (!target || !target.closest) {
-        return;
-      }
-
-      var button = target.closest('button[name="save_action"]');
-      if (!button) {
-        return;
-      }
-
-      var form = button.form || button.closest('form');
-      if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
-        return;
-      }
-
-      setSaveActionValue(form, button.value || '');
-      form.dataset.submitterValue = String(button.value || '').trim().toLowerCase();
-    }, true);
-
-    document.addEventListener('submit', function (event) {
-      var form = event.target;
-      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 || '');
-        }
-        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 = '';
-          }
-
-          if (refreshTargetSelector && refreshStateUrl && refreshTaskId) {
-            refreshSequence += 1;
-            watchRefreshTask(refreshStateUrl, refreshTaskId, refreshTargetSelector, refreshSequence);
-          } else if (refreshTargetSelector && responseDocument) {
-            var currentTarget = document.querySelector(refreshTargetSelector);
-            var nextTarget = 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);
-  }
-
-  function initSubmitOnChange() {
-    var fields = document.querySelectorAll('[data-submit-on-change]');
-    Array.prototype.forEach.call(fields, function (field) {
-      field.addEventListener('change', function () {
-        var form = field.form || field.closest('form');
-        if (form) {
-          form.submit();
-        }
-      });
-    });
-  }
-
-  function initJsonTogglePanels(root) {
-    var scope = root && root.querySelectorAll ? root : document;
-    var panels = scope.querySelectorAll('[data-json-toggle-panel]');
-    Array.prototype.forEach.call(panels, function (panel) {
-      var output = panel.querySelector('[data-json-toggle-output]');
-      if (!output) {
-        return;
-      }
-
-      var card = panel.closest ? panel.closest('.card') : null;
-      var button = card ? card.querySelector('[data-json-toggle]') : null;
-      var label = button ? button.querySelector('[data-json-toggle-label]') : null;
-      var sourceNode = panel.querySelector('[data-json-toggle-source]');
-      var rawJson = '';
-      try {
-        rawJson = JSON.parse(String(sourceNode ? sourceNode.textContent : '""'));
-      } catch (_error) {
-        rawJson = '';
-      }
-
-      if (typeof rawJson !== 'string' || !rawJson.trim()) {
-        if (button) {
-          button.classList.add('d-none');
-        }
-        return;
-      }
-
-      var parsedJson;
-      try {
-        parsedJson = JSON.parse(rawJson);
-      } catch (_error) {
-        if (button) {
-          button.classList.add('d-none');
-        }
-        return;
-      }
-
-      var compactJson = JSON.stringify(parsedJson);
-      var formattedJson = JSON.stringify(parsedJson, null, 2);
-      var isFormatted = true;
-
-      function syncButtonLabel() {
-        if (!button || !label) {
-          return;
-        }
-        label.textContent = isFormatted
-          ? String(button.getAttribute('data-json-toggle-label-compact') || 'Unformat JSON')
-          : String(button.getAttribute('data-json-toggle-label-formatted') || 'Format JSON');
-        button.setAttribute('aria-pressed', isFormatted ? 'true' : 'false');
-      }
-
-      function syncOutput() {
-        output.textContent = isFormatted ? formattedJson : compactJson;
-        syncButtonLabel();
-      }
-
-      output.textContent = formattedJson;
-      syncButtonLabel();
-
-      if (button) {
-        button.addEventListener('click', function () {
-          isFormatted = !isFormatted;
-          syncOutput();
-        });
-      }
-    });
-  }
-
-  function initLocalDateTimes(root) {
-    var scope = root && root.querySelectorAll ? root : document;
-    var elements = scope.querySelectorAll('[data-local-datetime]');
-    Array.prototype.forEach.call(elements, function (element) {
-      var rawValue = String(element.getAttribute('datetime') || element.getAttribute('data-local-datetime') || element.textContent || '').trim();
-      if (!rawValue) {
-        return;
-      }
-
-      var date = new Date(rawValue);
-      if (Number.isNaN(date.getTime())) {
-        return;
-      }
-
-      element.textContent = formatDashboardDate(date);
-    });
-  }
-
-  if (window.initSortableTables) {
-    window.initSortableTables();
-  }
-
-  initConfirmForms();
-  initDirtyTracking();
-  initCancelConfirm();
-  initAsyncCommandForms();
-  initAsyncSaveForms();
-  initSubmitOnChange();
-  initJsonTogglePanels();
-  initLocalDateTimes();
-  window.initJsonTogglePanels = initJsonTogglePanels;
-  window.initLocalDateTimes = initLocalDateTimes;
-}());

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

@@ -1,84 +1,11 @@
 (function () {
-
+  var webUiHelpers = window.webUiHelpers || {};
-  function escapeHtml(value) {
+  var escapeHtml = webUiHelpers.escapeHtml;
-    return String(value ?? '')
+  var formatDashboardDate = webUiHelpers.formatDashboardDate;
-      .replace(/&/g, '&')
+  var getClientRowKey = webUiHelpers.getClientRowKey;
-      .replace(/</g, '&lt;')
+  var getClientDisplayName = webUiHelpers.getClientDisplayName;
-      .replace(/>/g, '&gt;')
+  var setButtonVariant = webUiHelpers.setButtonVariant;
-      .replace(/"/g, '&quot;')
+  var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
-      .replace(/'/g, '&#39;');
-  }
-
-  function formatDashboardDate(value) {
-    if (!value) {
-      return '';
-    }
-    var date = new Date(value);
-    if (Number.isNaN(date.getTime())) {
-      return '';
-    }
-    return new Intl.DateTimeFormat('en-US', {
-      month: 'short',
-      day: '2-digit',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      second: '2-digit'
-    }).format(date);
-  }
-
-  function getClientRowKey(client) {
-    return String(client && client.id ? client.id : client && client.clientId ? client.clientId : '').trim();
-  }
-
-  function getClientDisplayName(client) {
-    if (client && client.client_name) {
-      return String(client.client_name).trim();
-    }
-    var clientId = String(client && client.clientId ? client.clientId : '').trim();
-    if (clientId) {
-      return clientId;
-    }
-    return '';
-  }
-
-  function setButtonVariant(button, classesToRemove, classToAdd) {
-    if (!button) {
-      return;
-    }
-
-    if (button.classList) {
-      classesToRemove.forEach(function (className) {
-        button.classList.remove(className);
-      });
-      if (classToAdd) {
-        button.classList.add(classToAdd);
-      }
-      return;
-    }
-
-    var className = String(button.className || '');
-    classesToRemove.forEach(function (removeClass) {
-      className = className.replace(new RegExp('(^|\\s)' + removeClass + '(?=\\s|$)', 'g'), ' ');
-    });
-    if (classToAdd) {
-      className += ' ' + classToAdd;
-    }
-    button.className = className.replace(/\s+/g, ' ').trim();
-  }
-
-  function normalizeDisplayIp(value) {
-    var ip = String(value || '').trim();
-    if (!ip) {
-      return '';
-    }
-
-    if (ip.toLowerCase().indexOf('::ffff:') === 0) {
-      return ip.slice(7).trim();
-    }
-
-    return ip;
-  }
 
   function initConfirmForms() {
     document.addEventListener('submit', function (event) {
@@ -237,9 +164,6 @@
       if (typeof window.initTableSearches === 'function') {
         window.initTableSearches(targetElement);
       }
-      if (typeof window.initTablePaginations === 'function') {
-        window.initTablePaginations(targetElement);
-      }
     }
 
     function replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId) {
@@ -274,7 +198,7 @@
 
         currentTarget.outerHTML = nextTarget.outerHTML;
         rebindRefreshTarget(document.querySelector(refreshTargetSelector));
-      }).catch(function (_error) {
+      }).catch(function () {
         // Ignore refresh replacement failures and leave the existing content in place.
       });
     }
@@ -588,303 +512,10 @@
     });
   }
 
-  function initTablePaginations(root) {
-    var scope = root && root.querySelectorAll ? root : document;
-
-    Array.prototype.forEach.call(scope.querySelectorAll('[data-table-pagination="auto"]'), function (container) {
-      if (container.getAttribute('data-table-pagination-bound') === 'true') {
-        return;
-      }
-
-      var table = container.querySelector('[data-table-searchable]');
-      var cardHeader = container.querySelector('.card-header');
-      var cardBody = container.querySelector('.card-body.table-responsive') || container.querySelector('.card-body');
-      var footer = container.querySelector('[data-table-pagination-controls]');
-      var footerSummary = null;
-      var footerList = null;
-      var syncFrame = 0;
-      var state = {
-        currentPage: 1,
-        pageSize: 1,
-        totalPages: 1
-      };
-
-      if (!table || !cardBody || !table.tBodies.length) {
-        return;
-      }
-
-      container.setAttribute('data-table-pagination-bound', 'true');
-
-      function getRows() {
-        return Array.prototype.slice.call(table.querySelectorAll('tbody tr[data-table-search-row]'));
-      }
-
-      function isSearchMatched(row) {
-        return String(row.getAttribute('data-table-search-match') || 'true') !== 'false';
-      }
-
-      function ensureFooter() {
-        if (footer) {
-          footerSummary = footer.querySelector('[data-table-pagination-summary]');
-          footerList = footer.querySelector('[data-table-pagination-list]');
-          return footer;
-        }
-
-        footer = document.createElement('div');
-        footer.className = 'card-footer d-none';
-        footer.setAttribute('data-table-pagination-controls', 'true');
-        footer.innerHTML = '' +
-          '<div class="d-flex flex-wrap align-items-center justify-content-between gap-3">' +
-            '<div class="text-muted small" data-table-pagination-summary></div>' +
-            '<nav aria-label="Table pages">' +
-              '<ul class="pagination pagination-sm mb-0" data-table-pagination-list></ul>' +
-            '</nav>' +
-          '</div>';
-        cardBody.parentNode.insertBefore(footer, cardBody.nextSibling);
-        footerSummary = footer.querySelector('[data-table-pagination-summary]');
-        footerList = footer.querySelector('[data-table-pagination-list]');
-        return footer;
-      }
-
-      function setRowVisible(row, visible) {
-        row.hidden = !visible;
-        row.classList.toggle('d-none', !visible);
-      }
-
-      function getAvailableHeight() {
-        var containerRect = container.getBoundingClientRect();
-        var headerHeight = cardHeader ? cardHeader.getBoundingClientRect().height : 0;
-        var footerEstimate = footer && !footer.classList.contains('d-none') ? footer.getBoundingClientRect().height : 56;
-        return Math.max(0, window.innerHeight - Math.max(0, containerRect.top) - headerHeight - footerEstimate - 24);
-      }
-
-      function renderFooter(totalItems) {
-        var pageButtons = [];
-
-        ensureFooter();
-
-        if (state.totalPages <= 1 || totalItems <= 0) {
-          footer.classList.add('d-none');
-          footerSummary.textContent = '';
-          footerList.innerHTML = '';
-          return;
-        }
-
-        footer.classList.remove('d-none');
-        footerSummary.textContent = 'Showing ' + (((state.currentPage - 1) * state.pageSize) + 1) + '-' + Math.min(totalItems, state.currentPage * state.pageSize) + ' of ' + totalItems;
-
-        pageButtons.push('<li class="page-item' + (state.currentPage <= 1 ? ' disabled' : '') + '"><a class="page-link" href="#" data-table-pagination-page="' + (state.currentPage - 1) + '" aria-label="Previous page">Previous</a></li>');
-        for (var pageNumber = 1; pageNumber <= state.totalPages; pageNumber += 1) {
-          pageButtons.push('<li class="page-item' + (pageNumber === state.currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-table-pagination-page="' + pageNumber + '">' + pageNumber + '</a></li>');
-        }
-        pageButtons.push('<li class="page-item' + (state.currentPage >= state.totalPages ? ' disabled' : '') + '"><a class="page-link" href="#" data-table-pagination-page="' + (state.currentPage + 1) + '" aria-label="Next page">Next</a></li>');
-        footerList.innerHTML = pageButtons.join('');
-      }
-
-      function applyPagination(resetPage) {
-        var rows = getRows();
-        var matchedRows = rows.filter(isSearchMatched);
-        var totalItems = matchedRows.length;
-        var rowHeight = 48;
-        var pageSize;
-        var startIndex;
-        var endIndex;
-
-        if (resetPage) {
-          state.currentPage = 1;
-        }
-
-        rows.forEach(function (row) {
-          if (!isSearchMatched(row)) {
-            setRowVisible(row, false);
-          }
-        });
-
-        if (!totalItems) {
-          state.pageSize = 1;
-          state.totalPages = 1;
-          state.currentPage = 1;
-          renderFooter(0);
-          return;
-        }
-
-        matchedRows.forEach(function (row) {
-          setRowVisible(row, true);
-        });
-
-        if (matchedRows[0]) {
-          rowHeight = Math.max(24, matchedRows[0].getBoundingClientRect().height || matchedRows[0].offsetHeight || 48);
-        }
-
-        pageSize = Math.max(1, Math.floor(getAvailableHeight() / rowHeight));
-
-        if (pageSize >= totalItems) {
-          state.pageSize = totalItems;
-          state.totalPages = 1;
-          state.currentPage = 1;
-          matchedRows.forEach(function (row) {
-            setRowVisible(row, true);
-          });
-          renderFooter(totalItems);
-          return;
-        }
-
-        state.pageSize = pageSize;
-        state.totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-        state.currentPage = Math.min(Math.max(1, state.currentPage), state.totalPages);
-        startIndex = (state.currentPage - 1) * pageSize;
-        endIndex = startIndex + pageSize;
-
-        matchedRows.forEach(function (row, index) {
-          setRowVisible(row, index >= startIndex && index < endIndex);
-        });
-
-        renderFooter(totalItems);
-      }
-
-      function scheduleSync(options) {
-        if (syncFrame) {
-          window.cancelAnimationFrame(syncFrame);
-        }
-
-        syncFrame = window.requestAnimationFrame(function () {
-          syncFrame = 0;
-          applyPagination(Boolean(options && options.resetPage));
-        });
-      }
-
-      ensureFooter();
-
-      if (footer) {
-        footer.addEventListener('click', function (event) {
-          var target = event.target && event.target.closest ? event.target.closest('[data-table-pagination-page]') : null;
-          var pageValue;
-
-          if (!target || target.closest('.disabled')) {
-            return;
-          }
-
-          event.preventDefault();
-          pageValue = Math.max(1, Math.floor(Number(target.getAttribute('data-table-pagination-page')) || 1));
-          state.currentPage = pageValue;
-          scheduleSync();
-        });
-      }
-
-      window.addEventListener('resize', function () {
-        scheduleSync();
-      });
-
-      if (typeof ResizeObserver === 'function') {
-        try {
-          new ResizeObserver(function () {
-            scheduleSync();
-          }).observe(container);
-        } catch (_error) {
-          // Ignore observer setup failures and rely on window resize.
-        }
-      }
-
-      container.syncTablePagination = scheduleSync;
-      scheduleSync({ resetPage: true });
-    });
-  }
-
   function initTableSearches(root) {
-    var scope = root && root.querySelectorAll ? root : document;
+    if (typeof window.initTableSearches === 'function') {
-
+      window.initTableSearches(root);
-    Array.prototype.forEach.call(scope.querySelectorAll('[data-table-search]'), function (input) {
+    }
-      if (input.getAttribute('data-table-search-bound') === 'true') {
-        return;
-      }
-
-      var container = input.closest('[data-table-search-container]') || input.closest('.card') || document;
-      var table = container.querySelector('[data-table-searchable]');
-      var emptyRow = null;
-
-      if (!table) {
-        return;
-      }
-
-      input.setAttribute('data-table-search-bound', 'true');
-
-      function getSearchableRows() {
-        return Array.prototype.slice.call(table.querySelectorAll('tbody tr[data-table-search-row]'));
-      }
-
-      function getDefaultEmptyRow() {
-        return table.querySelector('tbody tr[data-table-search-empty-default]');
-      }
-
-      function removeGeneratedEmptyRow() {
-        if (emptyRow && emptyRow.parentNode) {
-          emptyRow.parentNode.removeChild(emptyRow);
-        }
-        emptyRow = null;
-      }
-
-      function ensureGeneratedEmptyRow(message) {
-        var tbody = table.tBodies[0] || table.querySelector('tbody');
-        var columnCount = 1;
-
-        if (!tbody) {
-          return;
-        }
-
-        if (!emptyRow) {
-          emptyRow = document.createElement('tr');
-          emptyRow.setAttribute('data-table-search-empty-row', 'true');
-          var cell = document.createElement('td');
-          cell.className = 'empty';
-          cell.setAttribute('data-table-search-empty-cell', 'true');
-          emptyRow.appendChild(cell);
-        }
-
-        columnCount = table.tHead && table.tHead.rows && table.tHead.rows[0] ? table.tHead.rows[0].cells.length : (getSearchableRows()[0] ? getSearchableRows()[0].cells.length : 1);
-        emptyRow.firstElementChild.colSpan = Math.max(1, columnCount);
-        emptyRow.firstElementChild.textContent = message;
-
-        if (!emptyRow.parentNode) {
-          tbody.appendChild(emptyRow);
-        }
-      }
-
-      function syncSearch() {
-        var query = String(input.value || '').trim().toLowerCase();
-        var rows = getSearchableRows();
-        var visibleCount = 0;
-        var defaultEmptyRow = getDefaultEmptyRow();
-
-        removeGeneratedEmptyRow();
-
-        rows.forEach(function (row) {
-          var haystack = String(row.getAttribute('data-search-text') || row.textContent || '').toLowerCase();
-          var visible = !query || haystack.indexOf(query) !== -1;
-          row.setAttribute('data-table-search-match', visible ? 'true' : 'false');
-          row.classList.toggle('d-none', !visible);
-          row.hidden = !visible;
-          if (visible) {
-            visibleCount += 1;
-          }
-        });
-
-        if (defaultEmptyRow) {
-          defaultEmptyRow.classList.toggle('d-none', Boolean(query));
-          defaultEmptyRow.hidden = Boolean(query);
-        }
-
-        if (query && visibleCount === 0) {
-          ensureGeneratedEmptyRow('No results match your search.');
-        }
-
-        if (typeof window.syncTablePagination === 'function') {
-          window.syncTablePagination(container, { resetPage: true });
-        }
-      }
-
-      input.addEventListener('input', syncSearch);
-      syncSearch();
-    });
   }
 
   function createSlideThumbPlaceholder() {
@@ -914,10 +545,6 @@
     });
   }
 
-  if (window.initSortableTables) {
-    window.initSortableTables();
-  }
-
   initConfirmForms();
   initDirtyTracking();
   initCancelConfirm();
@@ -927,19 +554,9 @@
   initJsonTogglePanels();
   initLocalDateTimes();
   initTableSearches();
-  initTablePaginations();
   attachSlideThumbFallbacks(document);
   window.initJsonTogglePanels = initJsonTogglePanels;
   window.initLocalDateTimes = initLocalDateTimes;
-  window.initTableSearches = initTableSearches;
-  window.initTablePaginations = initTablePaginations;
-  window.syncTablePagination = function (container, options) {
-    if (!container || !container.syncTablePagination) {
-      return;
-    }
-
-    container.syncTablePagination(options);
-  };
   window.createSlideThumbPlaceholder = createSlideThumbPlaceholder;
   window.attachSlideThumbFallbacks = attachSlideThumbFallbacks;
 }());

src/web/public/js/admin/rbac-permissions.js

@@ -1,111 +0,0 @@
-(function () {
-  function getGroupCheckboxes(group) {
-    return Array.prototype.slice.call(group.querySelectorAll('input[name="permission_keys[]"]'));
-  }
-
-  function getPermissionKey(checkbox) {
-    return String((checkbox && (checkbox.getAttribute('data-permission-key') || checkbox.value)) || '').trim().toLowerCase();
-  }
-
-  function getActionKey(checkbox) {
-    var permissionKey = getPermissionKey(checkbox);
-    var parts = permissionKey.split('.');
-    if (parts.length !== 2) {
-      return '';
-    }
-
-    return String(parts[1] || '').trim().toLowerCase();
-  }
-
-  function syncPermissionGroup(group) {
-    var checkboxes = getGroupCheckboxes(group);
-    if (!checkboxes.length) {
-      return;
-    }
-
-    var readCheckbox = null;
-    var nonReadChecked = false;
-
-    checkboxes.forEach(function (checkbox) {
-      if (getActionKey(checkbox) === 'read') {
-        readCheckbox = checkbox;
-        return;
-      }
-      if (checkbox.checked) {
-        nonReadChecked = true;
-      }
-    });
-
-    if (!readCheckbox) {
-      return;
-    }
-
-    if (!readCheckbox.checked && nonReadChecked) {
-      readCheckbox.checked = true;
-    }
-
-    if (!readCheckbox.checked) {
-      checkboxes.forEach(function (checkbox) {
-        if (getActionKey(checkbox) !== 'read') {
-          checkbox.checked = false;
-        }
-      });
-    }
-  }
-
-  function handleGroupChange(event) {
-    var checkbox = event.target && event.target.matches ? event.target : null;
-    if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') {
-      return;
-    }
-
-    var actionKey = getActionKey(checkbox);
-    var group = checkbox.closest('.accordion-item');
-    if (!group) {
-      return;
-    }
-
-    var checkboxes = getGroupCheckboxes(group);
-    var readCheckbox = checkboxes.find(function (candidate) {
-      return getActionKey(candidate) === 'read';
-    }) || null;
-
-    if (!readCheckbox) {
-      return;
-    }
-
-    if (actionKey === 'read' && !checkbox.checked) {
-      checkboxes.forEach(function (candidate) {
-        if (candidate !== checkbox) {
-          candidate.checked = false;
-        }
-      });
-      return;
-    }
-
-    if (actionKey !== 'read' && checkbox.checked) {
-      readCheckbox.checked = true;
-    }
-  }
-
-  function initPermissionGroups() {
-    document.querySelectorAll('.accordion-item').forEach(function (group) {
-      syncPermissionGroup(group);
-    });
-
-    document.addEventListener('change', function (event) {
-      var checkbox = event.target;
-      if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') {
-        return;
-      }
-      if (String(checkbox.getAttribute('name') || '') !== 'permission_keys[]') {
-        return;
-      }
-
-      handleGroupChange(event);
-      syncPermissionGroup(checkbox.closest('.accordion-item'));
-    });
-  }
-
-  initPermissionGroups();
-}());

src/web/public/js/admin/system-status.js

@@ -1,102 +0,0 @@
-(function () {
-  function updateSidebarStatus(status, label) {
-    var dot = document.getElementById('sidebar-status-dot');
-    var text = document.getElementById('sidebar-status-text');
-    var pill = document.getElementById('sidebar-status-pill');
-    if (!dot && !text && !pill) {
-      return;
-    }
-
-    var normalizedStatus = status === 'online' || status === 'offline' || status === 'unknown'
-      ? status
-      : (status ? 'online' : 'offline');
-    var statusLabel = normalizedStatus === 'online'
-      ? (label || 'Connected to player feed')
-      : normalizedStatus === 'offline'
-        ? 'Disconnected from player feed'
-        : (label || 'Connecting to player feed');
-    var pillLabel = normalizedStatus === 'online' ? 'Connected' : normalizedStatus === 'offline' ? 'Disconnected' : 'Connecting';
-
-    dot.classList.remove('status-dot--unknown', 'status-dot--online', 'status-dot--offline');
-    dot.classList.add(normalizedStatus === 'online' ? 'status-dot--online' : normalizedStatus === 'offline' ? 'status-dot--offline' : 'status-dot--unknown');
-    dot.setAttribute('aria-label', statusLabel);
-    dot.setAttribute('title', statusLabel);
-
-    if (text) {
-      text.textContent = statusLabel;
-    }
-
-    if (pill) {
-      pill.classList.remove('status-pill--unknown', 'status-pill--online', 'status-pill--offline');
-      pill.classList.add(normalizedStatus === 'online' ? 'status-pill--online' : normalizedStatus === 'offline' ? 'status-pill--offline' : 'status-pill--unknown');
-      pill.textContent = pillLabel;
-    }
-  }
-
-  function connectDashboardSocket() {
-    if (!window.WebSocket) {
-      return;
-    }
-
-    var hasStatusIndicators = document.getElementById('sidebar-status-dot') || document.getElementById('sidebar-status-text') || document.getElementById('sidebar-status-pill');
-    if (!hasStatusIndicators) {
-      return;
-    }
-
-    var socket = null;
-    var reconnectTimer = null;
-
-    function scheduleReconnect() {
-      if (reconnectTimer) {
-        return;
-      }
-      reconnectTimer = window.setTimeout(function () {
-        reconnectTimer = null;
-        connect();
-      }, 5000);
-    }
-
-    function connect() {
-      var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      socket = new WebSocket(protocol + '//' + window.location.host + '/ws/dashboard');
-      updateSidebarStatus('unknown', 'Connecting to player feed');
-
-      socket.onmessage = function (event) {
-        try {
-          var payload = JSON.parse(String(event.data || '{}'));
-          if (payload && payload.type === 'dashboard-state') {
-            if (typeof window.webHandleDashboardState === 'function') {
-              window.webHandleDashboardState(payload.state);
-            }
-            updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), 'Live player feed');
-          }
-        } catch (_error) {
-          // Ignore malformed dashboard payloads.
-        }
-      };
-
-      socket.onclose = function () {
-        updateSidebarStatus('offline');
-        scheduleReconnect();
-      };
-
-      socket.onerror = function () {
-        updateSidebarStatus('offline');
-        try {
-          socket.close();
-        } catch (_error) {
-          // ignore close errors
-        }
-      };
-
-      socket.onopen = function () {
-        updateSidebarStatus('unknown', 'Connecting to player feed');
-      };
-    }
-
-    connect();
-  }
-
-  connectDashboardSocket();
-}());
-

src/web/public/js/admin/theme-sidebar.js

@@ -1,171 +0,0 @@
-(function () {
-  var THEME_STORAGE_KEY = 'web-theme';
-  var CKEDITOR_THEME_STYLE_ID = 'ckeditor-dark-theme-overrides';
-
-  function getPreferredTheme() {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-
-  function getStoredTheme() {
-    try {
-      var storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
-      if (storedTheme === 'dark' || storedTheme === 'light') {
-        return storedTheme;
-      }
-    } catch (error) {
-      return null;
-    }
-    return null;
-  }
-
-  function setStoredTheme(theme) {
-    try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch (error) {
-      return;
-    }
-  }
-
-  function getOrCreateCkeditorThemeStyleElement() {
-    var styleElement = document.getElementById(CKEDITOR_THEME_STYLE_ID);
-
-    if (styleElement) {
-      return styleElement;
-    }
-
-    styleElement = document.createElement('style');
-    styleElement.id = CKEDITOR_THEME_STYLE_ID;
-    document.head.appendChild(styleElement);
-
-    return styleElement;
-  }
-
-  function syncCkeditorTheme(theme) {
-    var styleElement = getOrCreateCkeditorThemeStyleElement();
-
-    if (theme !== 'dark') {
-      styleElement.textContent = '';
-      return;
-    }
-
-    styleElement.textContent = [
-      '.ck-body-wrapper .ck.ck-dropdown__panel,',
-      '.ck-body-wrapper .ck.ck-list__panel,',
-      '.ck-body-wrapper .ck.ck-list,',
-      '.ck-body-wrapper .ck.ck-balloon-panel {',
-      '  background: var(--bs-body-bg) !important;',
-      '  background-color: var(--bs-body-bg) !important;',
-      '  border-color: var(--bs-border-color) !important;',
-      '  color: var(--bs-body-color) !important;',
-      '}',
-      '.ck-body-wrapper .ck.ck-list .ck-list-item-button {',
-      '  background: transparent !important;',
-      '  background-color: transparent !important;',
-      '  color: var(--bs-body-color) !important;',
-      '}',
-      '.ck-body-wrapper .ck.ck-list .ck-list-item-button:hover {',
-      '  background: var(--bs-secondary-bg) !important;',
-      '  background-color: var(--bs-secondary-bg) !important;',
-      '}',
-      '.ck-body-wrapper .ck.ck-color-grid,',
-      '.ck-body-wrapper .ck.ck-color-grid__tile {',
-      '  color: var(--bs-body-color) !important;',
-      '}',
-      '.ck-body-wrapper .ck.ck-color-grid__tile {',
-      '  border-color: var(--bs-border-color) !important;',
-      '}'
-    ].join('\n');
-  }
-
-  function applyTheme(theme) {
-    var normalizedTheme = theme === 'dark' ? 'dark' : 'light';
-    var nextTheme = normalizedTheme === 'dark' ? 'light' : 'dark';
-    var nextThemeLabel = nextTheme === 'dark' ? 'Dark mode' : 'Light mode';
-
-    document.documentElement.dataset.bsTheme = normalizedTheme;
-    document.documentElement.style.colorScheme = normalizedTheme;
-    syncCkeditorTheme(normalizedTheme);
-
-    Array.prototype.forEach.call(document.querySelectorAll('[data-theme-toggle]'), function (toggleButton) {
-      var icon = toggleButton.querySelector('.theme-toggle__icon');
-      toggleButton.setAttribute('aria-pressed', normalizedTheme === 'dark' ? 'true' : 'false');
-      toggleButton.setAttribute('aria-label', 'Switch to ' + nextThemeLabel.toLowerCase());
-      if (icon) {
-        icon.classList.remove('theme-toggle__icon--moon', 'theme-toggle__icon--sun');
-        icon.classList.add(normalizedTheme === 'dark' ? 'theme-toggle__icon--sun' : 'theme-toggle__icon--moon');
-      }
-    });
-
-    return normalizedTheme;
-  }
-
-  function initThemeToggle() {
-    var toggleButtons = Array.prototype.slice.call(document.querySelectorAll('[data-theme-toggle]'));
-    var storedTheme = getStoredTheme();
-    var theme = storedTheme || getPreferredTheme();
-
-    applyTheme(theme);
-
-    if (!toggleButtons.length) {
-      return;
-    }
-
-    Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-      toggleButton.addEventListener('click', function () {
-        var nextTheme = document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark';
-        setStoredTheme(nextTheme);
-        applyTheme(nextTheme);
-      });
-    });
-  }
-
-  function initSidebarToggle() {
-    var body = document.body;
-    var toggleButtons = Array.prototype.slice.call(document.querySelectorAll('[data-sidebar-toggle]'));
-    var backdrop = document.querySelector('[data-sidebar-backdrop]');
-
-    if (!toggleButtons.length || !backdrop) {
-      return;
-    }
-
-    function setSidebarOpen(isOpen) {
-      body.classList.toggle('is-sidebar-open', isOpen);
-      Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-        toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-      });
-    }
-
-    function toggleSidebar() {
-      setSidebarOpen(!body.classList.contains('is-sidebar-open'));
-    }
-
-    Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-      toggleButton.addEventListener('click', function () {
-        toggleSidebar();
-      });
-    });
-
-    backdrop.addEventListener('click', function () {
-      setSidebarOpen(false);
-    });
-
-    document.addEventListener('keydown', function (event) {
-      if (event.key === 'Escape') {
-        setSidebarOpen(false);
-      }
-    });
-  }
-
-  window.getPreferredTheme = getPreferredTheme;
-  window.getStoredTheme = getStoredTheme;
-  window.setStoredTheme = setStoredTheme;
-  window.applyTheme = applyTheme;
-  window.initThemeToggle = initThemeToggle;
-  window.initSidebarToggle = initSidebarToggle;
-
-  initThemeToggle();
-  initSidebarToggle();
-}());

src/web/public/js/admin/toast.js

@@ -1,134 +0,0 @@
-(function () {
-  function getBootstrapToast(toast) {
-    if (!toast || !window.bootstrap || !window.bootstrap.Toast) {
-      return null;
-    }
-
-    return window.bootstrap.Toast.getOrCreateInstance(toast, {
-      autohide: true,
-      delay: 4000
-    });
-  }
-
-  function removeToast(toast) {
-    if (toast && toast.parentNode) {
-      toast.parentNode.removeChild(toast);
-    }
-  }
-
-  function dismissToast(toast) {
-    var instance = getBootstrapToast(toast);
-    if (instance) {
-      instance.hide();
-      return;
-    }
-    removeToast(toast);
-  }
-
-  function setToastVariant(toast, variant) {
-    if (!toast || !toast.classList) {
-      return;
-    }
-
-    var nextVariant = String(variant || 'info').trim().toLowerCase();
-    var variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-    variants.forEach(function (value) {
-      toast.classList.remove('text-bg-' + value);
-    });
-    toast.classList.add('text-bg-' + (variants.indexOf(nextVariant) === -1 ? 'info' : nextVariant));
-  }
-
-  function getMessageVariant(message, fallbackVariant) {
-    var text = String(message || '').trim();
-    if (/\b(?:unable to|cannot|can't|could not|failed to)\s+delete\b/i.test(text) || /\bdelete\b.*\b(?:before|first)\b/i.test(text) || /\bstill (?:in use|linked|assigned|used)\b/i.test(text)) {
-      return 'danger';
-    }
-    if (/\b(?:already exists|already exist|already taken|duplicate|must be unique|name already exists)\b/i.test(text)) {
-      return 'warning';
-    }
-    return String(fallbackVariant || 'info').trim().toLowerCase() || 'info';
-  }
-
-  function showToast(message, variant) {
-    var text = String(message || '').trim();
-    if (!text) {
-      return;
-    }
-
-    var container = document.getElementById('app-toast-container');
-    if (!container) {
-      return;
-    }
-
-    var existingToast = document.getElementById('app-toast');
-    if (existingToast) {
-      var existingBody = existingToast.querySelector('.toast-body');
-      if (existingBody) {
-        existingBody.textContent = text;
-      }
-      var nextVariant = getMessageVariant(text, variant);
-      existingToast.setAttribute('data-toast-variant', nextVariant);
-      setToastVariant(existingToast, nextVariant);
-      var existingInstance = getBootstrapToast(existingToast);
-      if (existingInstance) {
-        existingInstance.show();
-      }
-      return;
-    }
-
-    var toast = document.createElement('div');
-  toast.className = 'toast align-items-center border-0';
-    toast.id = 'app-toast';
-    toast.setAttribute('role', 'status');
-    toast.setAttribute('aria-live', 'polite');
-    toast.setAttribute('aria-atomic', 'true');
-    toast.setAttribute('data-bs-autohide', 'true');
-    toast.setAttribute('data-bs-delay', '4000');
-    toast.innerHTML = '<div class="d-flex"><div class="toast-body"></div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Dismiss notification"></button></div>';
-    var toastVariant = getMessageVariant(text, variant);
-    toast.setAttribute('data-toast-variant', toastVariant);
-    setToastVariant(toast, toastVariant);
-    toast.querySelector('.toast-body').textContent = text;
-
-    toast.addEventListener('hidden.bs.toast', function () {
-      removeToast(toast);
-    });
-
-    container.appendChild(toast);
-    var instance = getBootstrapToast(toast);
-    if (instance) {
-      instance.show();
-    }
-  }
-
-  function initToast() {
-    var toast = document.getElementById('app-toast');
-    if (!toast) {
-      return;
-    }
-
-    try {
-      var url = new URL(window.location.href);
-      if (url.searchParams.has('message')) {
-        url.searchParams.delete('message');
-        window.history.replaceState({}, document.title, url.pathname + url.search + url.hash);
-      }
-    } catch (_error) {
-      // 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');
-    setToastVariant(toast, existingVariant);
-
-    var instance = getBootstrapToast(toast);
-    if (instance) {
-      instance.show();
-    }
-  }
-
-  window.dismissToast = dismissToast;
-  window.showToast = showToast;
-  window.initToast = initToast;
-
-  initToast();
-}());

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

@@ -1,83 +1,11 @@
 (function () {
-  function escapeHtml(value) {
+  var webUiHelpers = window.webUiHelpers || {};
-    return String(value ?? '')
+  var escapeHtml = webUiHelpers.escapeHtml;
-      .replace(/&/g, '&')
+  var formatDashboardDate = webUiHelpers.formatDashboardDate;
-      .replace(/</g, '&lt;')
+  var getClientRowKey = webUiHelpers.getClientRowKey;
-      .replace(/>/g, '&gt;')
+  var getClientDisplayName = webUiHelpers.getClientDisplayName;
-      .replace(/"/g, '&quot;')
+  var setButtonVariant = webUiHelpers.setButtonVariant;
-      .replace(/'/g, '&#39;');
+  var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
-  }
-
-  function formatDashboardDate(value) {
-    if (!value) {
-      return '';
-    }
-    var date = new Date(value);
-    if (Number.isNaN(date.getTime())) {
-      return '';
-    }
-    return new Intl.DateTimeFormat('en-US', {
-      month: 'short',
-      day: '2-digit',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      second: '2-digit'
-    }).format(date);
-  }
-
-  function getClientRowKey(client) {
-    return String(client && client.id ? client.id : client && client.clientId ? client.clientId : '').trim();
-  }
-
-  function getClientDisplayName(client) {
-    if (client && client.client_name) {
-      return String(client.client_name).trim();
-    }
-    var clientId = String(client && client.clientId ? client.clientId : '').trim();
-    if (clientId) {
-      return clientId;
-    }
-    return '';
-  }
-
-  function setButtonVariant(button, classesToRemove, classToAdd) {
-    if (!button) {
-      return;
-    }
-
-    if (button.classList) {
-      classesToRemove.forEach(function (className) {
-        button.classList.remove(className);
-      });
-      if (classToAdd) {
-        button.classList.add(classToAdd);
-      }
-      return;
-    }
-
-    var className = String(button.className || '');
-    classesToRemove.forEach(function (removeClass) {
-      className = className.replace(new RegExp('(^|\\s)' + removeClass + '(?=\\s|$)', 'g'), ' ');
-    });
-    if (classToAdd) {
-      className += ' ' + classToAdd;
-    }
-    button.className = className.replace(/\s+/g, ' ').trim();
-  }
-
-  function normalizeDisplayIp(value) {
-    var ip = String(value || '').trim();
-    if (!ip) {
-      return '';
-    }
-
-    if (ip.toLowerCase().indexOf('::ffff:') === 0) {
-      return ip.slice(7).trim();
-    }
-
-    return ip;
-  }
 
   function renderClientActionCell(client) {
     var paused = Boolean(client.paused);
@@ -91,7 +19,7 @@
     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-outline-secondary" 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-outline-secondary" 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 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 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"><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>';
   }
 
   function updateClientActionCell(cell, client) {
@@ -107,7 +35,7 @@
 
     var paused = Boolean(client.paused);
     setButtonVariant(pauseButton, ['btn-secondary', 'btn-outline-primary'], 'btn-info');
-    pauseButton.innerHTML = '<i class="bi bi-' + (paused ? 'play-fill' : 'pause-fill') + ' me-1" aria-hidden="true"></i>' + (paused ? 'Resume' : 'Pause');
+    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;
     if (pauseForm) {
@@ -252,18 +180,50 @@
     ].join('');
   }
 
-  function renderScreenRow(screen) {
+  function renderScreenTile(screen) {
     var clientCount = Number(screen.player_connection_count || 0);
+    var playerUrl = String(screen.player_url || '').trim();
+    var connectionLabel = clientCount ? clientCount + ' live' : 'No clients';
+    var connectionStateClass = clientCount ? 'is-live' : 'is-idle';
+    var playlistLabel = screen.playlist_name ? escapeHtml(screen.playlist_name) : 'Unassigned';
+    var connectionsLabel = clientCount ? clientCount + ' connected' : 'No clients connected';
+
     return [
-      '<tr>',
+      '<article class="dashboard-screen-tile" data-screen-key="' + escapeHtml(screen.id || '') + '">',
-      '<td data-label="Name">' + escapeHtml(screen.name) + '</td>',
+      '<div class="dashboard-screen-tile-top">',
-      '<td data-label="Player URL"><a href="' + escapeHtml(screen.player_url || '') + '" target="_blank">' + escapeHtml(screen.player_url || '') + '</a></td>',
+      '<div class="dashboard-screen-tile-text">',
-      '<td data-label="Playlist">' + escapeHtml(screen.playlist_name || '') + '</td>',
+      '<h4 class="dashboard-screen-name">' + escapeHtml(screen.name || '') + '</h4>',
-      '<td data-label="Connected clients">' + (clientCount ? '<div class="connection-count" data-screen-connection-count="' + escapeHtml(screen.slug) + '">' + clientCount + ' connected</div>' : '<span class="empty">No clients connected.</span>') + '</td>',
+      '<a class="dashboard-screen-link" href="' + escapeHtml(playerUrl) + '" target="_blank">' + escapeHtml(playerUrl) + '</a>',
-      '</tr>'
+      '</div>',
+      '<span class="dashboard-screen-pill ' + connectionStateClass + '">' + escapeHtml(connectionLabel) + '</span>',
+      '</div>',
+      '<dl class="dashboard-screen-meta">',
+      '<div><dt>Playlist</dt><dd>' + playlistLabel + '</dd></div>',
+      '<div><dt>Connections</dt><dd>' + escapeHtml(connectionsLabel) + '</dd></div>',
+      '</dl>',
+      '</article>'
     ].join('');
   }
 
+  function compareScreensByConnectedClients(left, right) {
+    var leftCount = Number(left && left.player_connection_count || 0);
+    var rightCount = Number(right && right.player_connection_count || 0);
+
+    if (leftCount !== rightCount) {
+      return rightCount - leftCount;
+    }
+
+    var leftName = String(left && left.name || '').trim();
+    var rightName = String(right && right.name || '').trim();
+    var nameCompare = leftName.localeCompare(rightName, undefined, { sensitivity: 'base', numeric: true });
+
+    if (nameCompare !== 0) {
+      return nameCompare;
+    }
+
+    return String(left && left.slug || '').localeCompare(String(right && right.slug || ''), undefined, { sensitivity: 'base', numeric: true });
+  }
+
   function updateStats(state) {
     var clientCount = document.getElementById('dashboard-client-count');
     var screenCount = document.getElementById('dashboard-screen-count');
@@ -352,36 +312,52 @@
       tbody.removeChild(tbody.lastElementChild);
     }
 
-    window.applyTableSort(document.getElementById('dashboard-clients-table'));
   }
 
-  function updateScreenTable(state) {
+  function updateScreenGrid(state) {
-    var table = document.getElementById('dashboard-screens-table');
+    var grid = document.getElementById('dashboard-screens-grid');
-    if (!table || !Array.isArray(state.screens)) {
+    if (!grid || !Array.isArray(state.screens)) {
       return;
     }
-    var tbody = table.tBodies && table.tBodies[0] ? table.tBodies[0] : null;
+    var screens = state.screens.slice().sort(compareScreensByConnectedClients);
-    if (!tbody) {
+
+    if (!screens.length) {
+      grid.innerHTML = '<div class="empty dashboard-screen-empty">No screens yet.</div>';
       return;
     }
-    if (!state.screens.length) {
+    grid.innerHTML = screens.map(renderScreenTile).join('');
-      tbody.innerHTML = '<tr><td colspan="4" class="empty">No screens yet.</td></tr>';
-      return;
-    }
-    tbody.innerHTML = state.screens.map(renderScreenRow).join('');
-    window.applyTableSort(table);
   }
 
   function updateDashboardQuickActions(state) {
+    var pauseButton = document.getElementById('dashboard-pause-all-button');
     var blackoutButton = document.getElementById('dashboard-blackout-all-button');
-    if (!blackoutButton || !state || !Array.isArray(state.clients)) {
+    if ((!pauseButton && !blackoutButton) || !state || !Array.isArray(state.clients)) {
       return;
     }
 
     var hasClients = state.clients.length > 0;
+    var allPaused = hasClients && state.clients.every(function (client) {
+      return Boolean(client && client.paused);
+    });
     var allBlackout = hasClients && state.clients.every(function (client) {
       return Boolean(client && client.blackout);
     });
+    if (pauseButton) {
+      var pauseForm = pauseButton.form;
+      var pauseInput = pauseForm ? pauseForm.querySelector('input[name="paused"]') : null;
+      var pauseLabel = allPaused ? 'Resume all clients' : 'Pause all clients';
+      var pauseButtonIcon = allPaused ? 'bi-play-fill' : 'bi-pause-fill';
+      pauseButton.innerHTML = '<i class="bi ' + pauseButtonIcon + ' me-1" aria-hidden="true"></i>' + escapeHtml(pauseLabel);
+      setButtonVariant(pauseButton, ['btn-success', 'btn-secondary', 'btn-outline-secondary', 'btn-outline-dark'], allPaused ? 'btn-success' : 'btn-info');
+      if (pauseInput) {
+        pauseInput.value = allPaused ? 'false' : 'true';
+      }
+      if (pauseForm) {
+        pauseForm.setAttribute('data-confirm-message', allPaused ? 'Resume all connected clients?' : 'Pause all connected clients?');
+      }
+      pauseButton.setAttribute('aria-label', pauseLabel);
+    }
+
     var label = allBlackout ? 'Restore all clients' : 'Blackout all clients';
     var blackoutForm = blackoutButton.form;
     var blackoutInput = blackoutForm ? blackoutForm.querySelector('input[name="blackout"]') : null;
@@ -403,7 +379,7 @@
       return;
     }
     updateStats(state);
-    updateScreenTable(state);
+    updateScreenGrid(state);
     updateClientTable(state);
     updateDashboardQuickActions(state);
   }

src/web/public/js/playlists/playlist-schedule.js

@@ -1,6 +1,26 @@
-(function () {
+(function () {
+  // Shared constants used across the playlist schedule editor.
   var DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  var VIDEO_DURATION_LABEL = 'Use video duration';
+  var VIDEO_DURATION_ACTIVE_LABEL = 'Use Video Duration';
+  var VIDEO_DURATION_LOADING_LABEL = 'Loading...';
+  var PICKER_THUMB_EMPTY_LABEL = 'No thumbnail';
+  var PICKER_ASSIGNED_BADGE_LABEL = 'Already in playlist';
+  var PICKER_CARD_CLASS = 'playlist-slide-picker-card';
+  var PICKER_MEDIA_CLASS = 'playlist-slide-picker-media';
+  var PICKER_TITLE_CLASS = 'playlist-slide-picker-title';
+  var PICKER_CHECK_CLASS = 'playlist-slide-picker-check bi bi-check2-circle';
+  var PICKER_BADGE_CLASS = 'playlist-slide-picker-badge badge text-bg-primary';
+  var SCHEDULE_ROW_FIELD_NAMES = {
+    mode: '[name="schedule_mode[]"]',
+    startDatetime: '[name="schedule_start_datetime[]"]',
+    endDatetime: '[name="schedule_end_datetime[]"]',
+    startTime: '[name="schedule_start_time[]"]',
+    endTime: '[name="schedule_end_time[]"]',
+    daysJson: '[name="schedule_days_json[]"]'
+  };
 
+  // Schedule helpers.
   function formatDays(daysValue) {
     var days = [];
     if (Array.isArray(daysValue)) {
@@ -21,12 +41,198 @@
       .join(', ');
   }
 
+  function getScheduleRowFields(row) {
+    return {
+      mode: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.mode) : null,
+      startDatetime: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.startDatetime) : null,
+      endDatetime: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.endDatetime) : null,
+      startTime: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.startTime) : null,
+      endTime: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.endTime) : null,
+      daysJson: row ? row.querySelector(SCHEDULE_ROW_FIELD_NAMES.daysJson) : null
+    };
+  }
+
+  // Video duration helpers.
+  function buildVideoDurationButtonMarkup(isPressed, enabled) {
+    if (!enabled) {
+      return '';
+    }
+
+    return '<button type="button" class="btn btn-outline-secondary btn-sm playlist-use-video-duration' + (isPressed ? ' active' : '') + '" data-use-video-duration-button aria-pressed="' + (isPressed ? 'true' : 'false') + '">' + (isPressed ? VIDEO_DURATION_ACTIVE_LABEL : VIDEO_DURATION_LABEL) + '</button>';
+  }
+
+  function syncVideoDurationButtonState(button, isPressed, label) {
+    if (!button) {
+      return;
+    }
+
+    button.classList.toggle('active', Boolean(isPressed));
+    button.setAttribute('aria-pressed', isPressed ? 'true' : 'false');
+    button.textContent = label || (isPressed ? VIDEO_DURATION_ACTIVE_LABEL : VIDEO_DURATION_LABEL);
+  }
+
+  // Slide picker helpers.
+  function getSlidePickerEmptyMessage(query, showAssignedSlides, assignedCount, visibleCount) {
+    if (!showAssignedSlides && assignedCount && visibleCount === 0) {
+      return query ? 'No available slides match your search.' : 'No available slides are currently left for this playlist.';
+    }
+
+    return query ? 'No slides match your search.' : 'No slides are currently available for this playlist.';
+  }
+
+  function updateSlidePickerCardState(card, isAssigned, isCanvasMismatch) {
+    if (!card) {
+      return;
+    }
+
+    card.setAttribute('data-is-assigned', isAssigned ? 'true' : 'false');
+    card.disabled = isAssigned || isCanvasMismatch;
+    card.classList.toggle('is-assigned', isAssigned);
+    card.classList.toggle('is-mismatch', isCanvasMismatch);
+    card.classList.toggle('is-hidden', false);
+    card.setAttribute('aria-disabled', card.disabled ? 'true' : 'false');
+  }
+
+  function createElementWithClass(tagName, className, textContent) {
+    var element = document.createElement(tagName);
+
+    if (className) {
+      element.className = className;
+    }
+    if (textContent !== undefined) {
+      element.textContent = textContent;
+    }
+
+    return element;
+  }
+
+  function buildSlidePickerThumbPlaceholder() {
+    var placeholder = createElementWithClass('div', 'playlist-slide-picker-thumb-placeholder');
+    var icon = createElementWithClass('i', 'bi bi-image playlist-slide-picker-thumb-placeholder-icon');
+    var label = createElementWithClass('span', 'playlist-slide-picker-thumb-placeholder-label', PICKER_THUMB_EMPTY_LABEL);
+
+    icon.setAttribute('aria-hidden', 'true');
+    placeholder.appendChild(icon);
+    placeholder.appendChild(label);
+    return placeholder;
+  }
+
+  function buildSlidePickerThumbImage(slide) {
+    var image = createElementWithClass('img', 'playlist-slide-picker-thumb-image');
+
+    image.loading = 'lazy';
+    image.alt = String(slide.title || 'Slide');
+    image.src = String(slide.thumbnail_path || '');
+    image.addEventListener('error', function () {
+      if (image.parentNode) {
+        image.parentNode.replaceChild(buildSlidePickerThumbPlaceholder(), image);
+      }
+    });
+
+    return image;
+  }
+
+  function buildSlidePickerMedia(slide) {
+    var media = createElementWithClass('div', PICKER_MEDIA_CLASS);
+    var check = createElementWithClass('span', PICKER_CHECK_CLASS);
+    var badge = createElementWithClass('span', PICKER_BADGE_CLASS, PICKER_ASSIGNED_BADGE_LABEL);
+
+    check.setAttribute('aria-hidden', 'true');
+    badge.setAttribute('aria-hidden', 'true');
+
+    media.appendChild(slide && slide.thumbnail_path ? buildSlidePickerThumbImage(slide) : buildSlidePickerThumbPlaceholder());
+    media.appendChild(check);
+    media.appendChild(badge);
+
+    return media;
+  }
+
+  // Playlist row helpers.
+  function getPlaylistSlideRow(target) {
+    return target && target.closest ? target.closest('tr[data-playlist-slide-row]') : null;
+  }
+
+  function getPlaylistSlideRowKey(row) {
+    return String(row && row.getAttribute('data-row-key') || '');
+  }
+
+  function isDurationControl(target) {
+    return Boolean(target && target.closest && target.closest('.playlist-use-video-duration'));
+  }
+
+  function getDurationPointerState(target, type) {
+    var row = getPlaylistSlideRow(target);
+    var pointerType = type === 'button' ? 'button' : 'input';
+
+    if (!row) {
+      return null;
+    }
+
+    return {
+      type: pointerType,
+      rowKey: getPlaylistSlideRowKey(row)
+    };
+  }
+
+  function buildPlaylistOrderCellMarkup() {
+    return '' +
+      '<td class="playlist-order-cell" data-label="Order">' +
+        '<div class="playlist-order-cell-inner">' +
+          '<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><svg class="playlist-drag-handle-svg" viewBox="0 0 24 32" focusable="false" aria-hidden="true"><polygon points="12,2 20,9 4,9"></polygon><rect x="4" y="14" width="16" height="4" rx="2"></rect><polygon points="4,23 20,23 12,30"></polygon></svg></span></button>' +
+          '<span class="playlist-order-number"></span>' +
+        '</div>' +
+      '</td>';
+  }
+
+  function buildPlaylistSlideCellMarkup(values, thumbnailStyle, thumbnailMarkup) {
+    return '' +
+      '<td data-label="Slide">' +
+        '<div class="playlist-slide-cell">' +
+          '<div class="playlist-slide-thumb" aria-hidden="true"' + thumbnailStyle + '>' + thumbnailMarkup + '</div>' +
+          '<div class="playlist-slide-cell-content"><span class="playlist-slide-title">' + values.title + '</span></div>' +
+        '</div>' +
+        '<input type="hidden" name="slide_id[]" value="' + values.slide_id + '" form="playlist-edit-form" />' +
+      '</td>';
+  }
+
+  function buildPlaylistScheduleCellMarkup(values) {
+    return '' +
+      '<td>' +
+        '<div class="playlist-schedule-summary">' + values.summary + '</div>' +
+        '<input type="hidden" name="schedule_mode[]" value="' + values.schedule_mode + '" form="playlist-edit-form" />' +
+        '<input type="hidden" name="schedule_start_datetime[]" value="' + values.schedule_start_datetime + '" form="playlist-edit-form" />' +
+        '<input type="hidden" name="schedule_end_datetime[]" value="' + values.schedule_end_datetime + '" form="playlist-edit-form" />' +
+        '<input type="hidden" name="schedule_start_time[]" value="' + values.schedule_start_time + '" form="playlist-edit-form" />' +
+        '<input type="hidden" name="schedule_end_time[]" value="' + values.schedule_end_time + '" form="playlist-edit-form" />' +
+        '<input type="hidden" name="schedule_days_json[]" value="' + values.schedule_days_json + '" form="playlist-edit-form" />' +
+      '</td>';
+  }
+
+  function buildPlaylistDurationCellMarkup(values, durationActionMarkup) {
+    return '' +
+      '<td><div class="playlist-duration-field">' +
+        '<input name="duration_seconds[]" type="text" inputmode="decimal" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end"' + (values.useVideoDuration ? ' disabled' : '') + ' />' +
+        '<input type="hidden" name="use_video_duration[]" value="' + (values.useVideoDuration ? '1' : '0') + '" form="playlist-edit-form" />' +
+        (values.useVideoDuration ? '<input type="hidden" name="duration_seconds[]" value="' + values.duration_seconds + '" form="playlist-edit-form" data-video-duration-mirror />' : '') +
+        durationActionMarkup +
+      '</div></td>';
+  }
+
+  function buildPlaylistActionsCellMarkup(playlistId, rowKey) {
+    return '' +
+      '<td><div class="actions playlist-item-actions">' +
+        '<button type="button" class="btn btn-sm btn-primary" data-schedule-config="/playlists/' + encodeURIComponent(playlistId) + '/slides/0/config" data-schedule-config-row="' + rowKey + '">Schedule</button>' +
+        '<button type="button" class="btn btn-sm btn-danger" data-playlist-remove-row>Remove</button>' +
+      '</div></td>';
+  }
+
+  // Schedule modal wiring.
   function initPlaylistScheduleModal() {
     var dialog = document.getElementById('slide-schedule-dialog');
     var content = document.getElementById('slide-schedule-content');
     var triggers = document.querySelectorAll('[data-schedule-config]');
 
-    if (!dialog || !content || !triggers.length) {
+    if (!dialog || !content) {
       return;
     }
 
@@ -38,14 +244,9 @@
 
     function collectScheduleParams(row, rowKey) {
       var params = new URLSearchParams();
-      var scheduleFields = [
+      var scheduleFields = Object.keys(SCHEDULE_ROW_FIELD_NAMES).map(function (key) {
-        'schedule_mode[]',
+        return SCHEDULE_ROW_FIELD_NAMES[key].replace(/^\[name="|"\]$/g, '');
-        'schedule_start_datetime[]',
+      });
-        'schedule_end_datetime[]',
-        'schedule_start_time[]',
-        'schedule_end_time[]',
-        'schedule_days_json[]'
-      ];
 
       params.set('row_key', String(rowKey || ''));
       scheduleFields.forEach(function (fieldName) {
@@ -96,23 +297,26 @@
     window.openScheduleModal = openScheduleModal;
     window.closeScheduleModal = closeScheduleModal;
 
-    Array.prototype.forEach.call(triggers, function (trigger) {
+    if (triggers.length) {
-      trigger.addEventListener('click', function () {
+      Array.prototype.forEach.call(triggers, function (trigger) {
-        var url = trigger.getAttribute('data-schedule-config');
+        trigger.addEventListener('click', function () {
-        var rowKey = trigger.getAttribute('data-schedule-config-row') || '';
+          var url = trigger.getAttribute('data-schedule-config');
-        var row = trigger.closest('tr[data-playlist-slide-row]');
+          var rowKey = trigger.getAttribute('data-schedule-config-row') || '';
-        if (row) {
+          var row = trigger.closest('tr[data-playlist-slide-row]');
-          var params = collectScheduleParams(row, rowKey || row.getAttribute('data-row-key') || '');
+          if (row) {
-          url += (url.indexOf('?') === -1 ? '?' : '&') + params.toString();
+            var params = collectScheduleParams(row, rowKey || row.getAttribute('data-row-key') || '');
-        } else if (rowKey && url.indexOf('row_key=') === -1) {
+            url += (url.indexOf('?') === -1 ? '?' : '&') + params.toString();
-          url += (url.indexOf('?') === -1 ? '?' : '&') + 'row_key=' + encodeURIComponent(rowKey);
+          } else if (rowKey && url.indexOf('row_key=') === -1) {
-        }
+            url += (url.indexOf('?') === -1 ? '?' : '&') + 'row_key=' + encodeURIComponent(rowKey);
-        openScheduleModal(url);
+          }
+          openScheduleModal(url);
+        });
       });
-    });
+    }
 
   }
 
+  // Schedule form behavior.
   function scheduleSummary(values) {
     var mode = String(values.schedule_mode || 'always');
     if (mode === 'dates') {
@@ -151,6 +355,25 @@
     var rowKeyInput = form.querySelector('[name="row_key"]');
     var dayCheckboxes = form.querySelectorAll('[name="schedule_days"]');
 
+    function getDayButton(checkbox) {
+      return checkbox && checkbox.id ? form.querySelector('label[for="' + checkbox.id + '"]') : null;
+    }
+
+    function syncDayButtonState(checkbox) {
+      var button = getDayButton(checkbox);
+
+      if (!button) {
+        return;
+      }
+
+      button.classList.toggle('active', Boolean(checkbox.checked));
+      button.setAttribute('aria-pressed', checkbox.checked ? 'true' : 'false');
+    }
+
+    function syncAllDayButtonStates() {
+      Array.prototype.forEach.call(dayCheckboxes, syncDayButtonState);
+    }
+
     function clearScheduleValidity() {
       [startDateInput, endDateInput, startTimeInput, endTimeInput].forEach(function (input) {
         if (input) {
@@ -210,14 +433,23 @@
       }
     });
     Array.prototype.forEach.call(dayCheckboxes, function (checkbox) {
-      checkbox.addEventListener('change', clearScheduleValidity);
+      checkbox.addEventListener('change', function () {
+        syncDayButtonState(checkbox);
+        clearScheduleValidity();
+      });
+
+      var button = getDayButton(checkbox);
+      if (button) {
+        button.addEventListener('click', function (event) {
+          event.preventDefault();
+          checkbox.checked = !checkbox.checked;
+          checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+          checkbox.focus();
+        });
+      }
     });
     select.addEventListener('change', clearScheduleValidity);
 
-    function notifyParentResize() {
-      return;
-    }
-
     function updateVisibility() {
       var mode = select.value;
       if (datesPanel) {
@@ -234,13 +466,11 @@
           endTimeInput.value = DEFAULT_END_TIME;
         }
       }
-      window.requestAnimationFrame(function () {
-        notifyParentResize();
-      });
     }
 
     select.addEventListener('change', updateVisibility);
     updateVisibility();
+    syncAllDayButtonStates();
 
     form.addEventListener('submit', function (event) {
       event.preventDefault();
@@ -302,6 +532,7 @@
     });
   }
 
+  // Playlist editor behavior.
   function initPlaylistEditStaging() {
     var tbody = document.getElementById('playlist-items-body');
     var form = document.getElementById('playlist-edit-form');
@@ -317,6 +548,9 @@
     var slidePickerCards = [];
     var slidePickerSelection = new Set();
     var slidePickerSlides = [];
+    var videoDurationCache = Object.create(null);
+    var lastDurationPointerDown = null;
+    var lastDurationPointerUp = null;
 
     if (!tbody || !form) {
       return;
@@ -331,13 +565,7 @@
       }
     }
 
-    function getModalInstance() {
+    // Selection state helpers for the picker modal.
-      if (!window.pulseModal) {
-        return null;
-      }
-      return window.pulseModal.getOrCreate(addSlideModal);
-    }
-
     function setCardSelected(card, selected) {
       if (!card) {
         return;
@@ -370,50 +598,13 @@
       }
     }
 
-    function createPickerThumb(slide) {
+    // Picker card rendering.
-      function createPlaceholder() {
-        var placeholder = document.createElement('div');
-        var icon = document.createElement('i');
-        var label = document.createElement('span');
-
-        placeholder.className = 'playlist-slide-picker-thumb-placeholder';
-        icon.className = 'bi bi-image playlist-slide-picker-thumb-placeholder-icon';
-        icon.setAttribute('aria-hidden', 'true');
-        label.className = 'playlist-slide-picker-thumb-placeholder-label';
-        label.textContent = 'No thumbnail';
-
-        placeholder.appendChild(icon);
-        placeholder.appendChild(label);
-        return placeholder;
-      }
-
-      if (slide && slide.thumbnail_path) {
-        var image = document.createElement('img');
-        image.className = 'playlist-slide-picker-thumb-image';
-        image.loading = 'lazy';
-        image.alt = String(slide.title || 'Slide');
-        image.src = String(slide.thumbnail_path || '');
-        image.addEventListener('error', function () {
-          if (image.parentNode) {
-            image.parentNode.replaceChild(createPlaceholder(), image);
-          }
-        });
-        return image;
-      }
-
-      return createPlaceholder();
-    }
-
     function createPickerCard(slide) {
       var button = document.createElement('button');
-      var media = document.createElement('div');
-      var title = document.createElement('div');
-      var check = document.createElement('span');
-      var badge = document.createElement('span');
       var searchText = String(slide && slide.title ? slide.title : '').toLowerCase();
 
       button.type = 'button';
-      button.className = 'playlist-slide-picker-card';
+      button.className = PICKER_CARD_CLASS;
       button.setAttribute('aria-pressed', 'false');
       button.setAttribute('data-slide-id', String(slide.id || ''));
       button.setAttribute('data-search-text', searchText);
@@ -424,18 +615,9 @@
         button.classList.add('is-assigned');
       }
 
-      media.className = 'playlist-slide-picker-media';
+      var media = buildSlidePickerMedia(slide);
-      media.appendChild(createPickerThumb(slide));
+      var title = document.createElement('div');
-      check.className = 'playlist-slide-picker-check bi bi-check2-circle';
+      title.className = PICKER_TITLE_CLASS;
-      check.setAttribute('aria-hidden', 'true');
-      media.appendChild(check);
-
-      badge.className = 'playlist-slide-picker-badge badge text-bg-primary';
-      badge.textContent = 'Already in playlist';
-      badge.setAttribute('aria-hidden', 'true');
-      media.appendChild(badge);
-
-      title.className = 'playlist-slide-picker-title';
       title.textContent = String(slide && slide.title ? slide.title : 'Slide');
 
       button.appendChild(media);
@@ -444,6 +626,7 @@
       return button;
     }
 
+    // Picker filtering and modal controls.
     function setShowAssignedState(showAssignedSlides) {
       if (!addSlideShowAssigned) {
         return;
@@ -489,11 +672,7 @@
       });
 
       if (addSlideEmpty) {
-        if (!showAssignedSlides && assignedCount && visibleCount === 0) {
+        addSlideEmpty.textContent = getSlidePickerEmptyMessage(query, showAssignedSlides, assignedCount, visibleCount);
-          addSlideEmpty.textContent = query ? 'No available slides match your search.' : 'No available slides are currently left for this playlist.';
-        } else {
-          addSlideEmpty.textContent = query ? 'No slides match your search.' : 'No slides are currently available for this playlist.';
-        }
         addSlideEmpty.classList.toggle('is-hidden', visibleCount !== 0);
       }
 
@@ -547,6 +726,9 @@
           canvas_width: slide.canvas_width,
           canvas_height: slide.canvas_height,
           canvas_signature: String(slide.canvasSignature || ''),
+          showVideoDurationButton: slide.showVideoDurationButton,
+          videoSourcePath: slide.videoSourcePath,
+          videoDurationSeconds: slide.videoDurationSeconds,
           title: slide.title || 'Slide',
           duration_seconds: 10,
           schedule_mode: 'always',
@@ -607,30 +789,53 @@
     }
 
     function scheduleSummaryForRow(row) {
-      var modeInput = row.querySelector('[name="schedule_mode[]"]');
+      var fields = getScheduleRowFields(row);
-      var startDatetime = row.querySelector('[name="schedule_start_datetime[]"]');
+      var mode = String(fields.mode ? fields.mode.value : 'always');
-      var endDatetime = row.querySelector('[name="schedule_end_datetime[]"]');
+      var days = formatDays(fields.daysJson && fields.daysJson.value ? fields.daysJson.value : '[]');
-      var startTime = row.querySelector('[name="schedule_start_time[]"]');
-      var endTime = row.querySelector('[name="schedule_end_time[]"]');
-      var daysJson = row.querySelector('[name="schedule_days_json[]"]');
-      var mode = String(modeInput ? modeInput.value : 'always');
-      var days = formatDays(daysJson && daysJson.value ? daysJson.value : '[]');
 
       if (mode === 'dates') {
-        if (startDatetime && endDatetime && startDatetime.value && endDatetime.value) {
+        if (fields.startDatetime && fields.endDatetime && fields.startDatetime.value && fields.endDatetime.value) {
-          return 'Dates: ' + startDatetime.value.replace('T', ' ') + ' to ' + endDatetime.value.replace('T', ' ');
+          return 'Dates: ' + fields.startDatetime.value.replace('T', ' ') + ' to ' + fields.endDatetime.value.replace('T', ' ');
         }
         return 'Dates: not set';
       }
       if (mode === 'times') {
-        if (days && startTime && endTime && startTime.value && endTime.value) {
+        if (days && fields.startTime && fields.endTime && fields.startTime.value && fields.endTime.value) {
-          return 'Times: ' + days + ' ' + startTime.value.slice(0, 5) + '-' + endTime.value.slice(0, 5);
+          return 'Times: ' + days + ' ' + fields.startTime.value.slice(0, 5) + '-' + fields.endTime.value.slice(0, 5);
         }
         return 'Times: not set';
       }
       return 'Always visible';
     }
 
+    function collectScheduleParams(row, rowKey) {
+      var params = new URLSearchParams();
+      var fields = getScheduleRowFields(row);
+
+      params.set('row_key', String(rowKey || ''));
+
+      if (fields.mode && fields.mode.value) {
+        params.set('schedule_mode', String(fields.mode.value || ''));
+      }
+      if (fields.startDatetime && fields.startDatetime.value) {
+        params.set('schedule_start_datetime', String(fields.startDatetime.value || ''));
+      }
+      if (fields.endDatetime && fields.endDatetime.value) {
+        params.set('schedule_end_datetime', String(fields.endDatetime.value || ''));
+      }
+      if (fields.startTime && fields.startTime.value) {
+        params.set('schedule_start_time', String(fields.startTime.value || ''));
+      }
+      if (fields.endTime && fields.endTime.value) {
+        params.set('schedule_end_time', String(fields.endTime.value || ''));
+      }
+      if (fields.daysJson && fields.daysJson.value) {
+        params.set('schedule_days_json', String(fields.daysJson.value || ''));
+      }
+
+      return params;
+    }
+
     function syncAddSlideOptions() {
       var activeSlideIds = {};
       var activeCanvasSignatures = {};
@@ -662,14 +867,7 @@
 
         slide.isAssigned = isAssigned;
 
-        if (card) {
+        updateSlidePickerCardState(card, isAssigned, isCanvasMismatch);
-          card.setAttribute('data-is-assigned', isAssigned ? 'true' : 'false');
-          card.disabled = isAssigned || isCanvasMismatch;
-          card.classList.toggle('is-assigned', isAssigned);
-          card.classList.toggle('is-mismatch', isCanvasMismatch);
-          card.classList.toggle('is-hidden', false);
-          card.setAttribute('aria-disabled', card.disabled ? 'true' : 'false');
-        }
         if (isAssigned) {
           slidePickerSelection.delete(slideId);
           if (card) {
@@ -737,31 +935,26 @@
     }
 
     function setRowSchedule(row, values) {
-      var modeInput = row.querySelector('[name="schedule_mode[]"]');
+      var fields = getScheduleRowFields(row);
-      var startDatetime = row.querySelector('[name="schedule_start_datetime[]"]');
-      var endDatetime = row.querySelector('[name="schedule_end_datetime[]"]');
-      var startTime = row.querySelector('[name="schedule_start_time[]"]');
-      var endTime = row.querySelector('[name="schedule_end_time[]"]');
-      var daysJson = row.querySelector('[name="schedule_days_json[]"]');
       var summary = row.querySelector('.playlist-schedule-summary');
 
-      if (modeInput) {
+      if (fields.mode) {
-        modeInput.value = values.schedule_mode || 'always';
+        fields.mode.value = values.schedule_mode || 'always';
       }
-      if (startDatetime) {
+      if (fields.startDatetime) {
-        startDatetime.value = values.schedule_start_datetime || '';
+        fields.startDatetime.value = values.schedule_start_datetime || '';
       }
-      if (endDatetime) {
+      if (fields.endDatetime) {
-        endDatetime.value = values.schedule_end_datetime || '';
+        fields.endDatetime.value = values.schedule_end_datetime || '';
       }
-      if (startTime) {
+      if (fields.startTime) {
-        startTime.value = values.schedule_start_time || '';
+        fields.startTime.value = values.schedule_start_time || '';
       }
-      if (endTime) {
+      if (fields.endTime) {
-        endTime.value = values.schedule_end_time || '';
+        fields.endTime.value = values.schedule_end_time || '';
       }
-      if (daysJson) {
+      if (fields.daysJson) {
-        daysJson.value = values.schedule_days_json || '[]';
+        fields.daysJson.value = values.schedule_days_json || '[]';
       }
       if (summary) {
         summary.textContent = values.summary || scheduleSummaryForRow(row);
@@ -786,40 +979,214 @@
       row.setAttribute('data-row-key', rowKey);
       row.setAttribute('data-slide-id', String(values.slide_id));
       row.setAttribute('data-canvas-signature', String(values.canvas_signature || ''));
+      row.setAttribute('data-video-source-path', String(values.videoSourcePath || ''));
+      row.setAttribute('data-video-duration-seconds', String(values.videoDurationSeconds || ''));
+      row.setAttribute('data-use-video-duration-state', String(Boolean(values.useVideoDuration)));
+      var durationActionMarkup = buildVideoDurationButtonMarkup(
+        Boolean(values.useVideoDuration),
+        Boolean(values.showVideoDurationButton)
+      );
       row.innerHTML = '' +
-        '<td class="playlist-order-cell" data-label="Order">' +
+        buildPlaylistOrderCellMarkup() +
-          '<div class="playlist-order-cell-inner">' +
+        buildPlaylistSlideCellMarkup(values, thumbnailStyle, thumbnailMarkup) +
-            '<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><svg class="playlist-drag-handle-svg" viewBox="0 0 24 32" focusable="false" aria-hidden="true"><polygon points="12,2 20,9 4,9"></polygon><rect x="4" y="14" width="16" height="4" rx="2"></rect><polygon points="4,23 20,23 12,30"></polygon></svg></span></button>' +
+        buildPlaylistScheduleCellMarkup(values) +
-            '<span class="playlist-order-number"></span>' +
+        buildPlaylistDurationCellMarkup(values, durationActionMarkup) +
-          '</div>' +
+        buildPlaylistActionsCellMarkup(playlistId, rowKey);
-        '</td>' +
-        '<td data-label="Slide">' +
-          '<div class="playlist-slide-cell">' +
-            '<div class="playlist-slide-thumb" aria-hidden="true"' + thumbnailStyle + '>' + thumbnailMarkup + '</div>' +
-            '<div class="playlist-slide-cell-content"><span class="playlist-slide-title">' + values.title + '</span></div>' +
-          '</div>' +
-          '<input type="hidden" name="slide_id[]" value="' + values.slide_id + '" form="playlist-edit-form" /></td>' +
-        '<td>' +
-          '<div class="playlist-schedule-summary">' + values.summary + '</div>' +
-          '<input type="hidden" name="schedule_mode[]" value="' + values.schedule_mode + '" form="playlist-edit-form" />' +
-          '<input type="hidden" name="schedule_start_datetime[]" value="' + values.schedule_start_datetime + '" form="playlist-edit-form" />' +
-          '<input type="hidden" name="schedule_end_datetime[]" value="' + values.schedule_end_datetime + '" form="playlist-edit-form" />' +
-          '<input type="hidden" name="schedule_start_time[]" value="' + values.schedule_start_time + '" form="playlist-edit-form" />' +
-          '<input type="hidden" name="schedule_end_time[]" value="' + values.schedule_end_time + '" form="playlist-edit-form" />' +
-          '<input type="hidden" name="schedule_days_json[]" value="' + values.schedule_days_json + '" form="playlist-edit-form" />' +
-        '</td>' +
-        '<td><input name="duration_seconds[]" type="number" min="1" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end" /></td>' +
-        '<td><div class="actions playlist-item-actions">' +
-          '<button type="button" class="btn btn-sm btn-primary" data-schedule-config="/playlists/' + encodeURIComponent(playlistId) + '/slides/0/config" data-schedule-config-row="' + rowKey + '">Schedule</button>' +
-          '<button type="button" class="btn btn-sm btn-danger" data-playlist-remove-row>Remove</button>' +
-        '</div></td>';
       return row;
     }
 
+    function loadVideoDuration(mediaPath) {
+      var cacheKey = String(mediaPath || '').trim();
+      var cachedPromise;
+
+      if (!cacheKey) {
+        return Promise.reject(new Error('No video source is available for this slide.'));
+      }
+
+      cachedPromise = videoDurationCache[cacheKey];
+      if (cachedPromise) {
+        return cachedPromise;
+      }
+
+      cachedPromise = new Promise(function (resolve, reject) {
+        var video = document.createElement('video');
+        var timeoutId = window.setTimeout(function () {
+          cleanup();
+          reject(new Error('Timed out loading the video metadata.'));
+        }, 15000);
+
+        function cleanup() {
+          window.clearTimeout(timeoutId);
+          video.removeAttribute('src');
+          video.load();
+          if (video.parentNode) {
+            video.parentNode.removeChild(video);
+          }
+        }
+
+        video.preload = 'metadata';
+        video.muted = true;
+        video.playsInline = true;
+        video.setAttribute('playsinline', '');
+        video.setAttribute('muted', '');
+        video.style.position = 'absolute';
+        video.style.left = '-9999px';
+        video.style.top = '0';
+        video.style.width = '1px';
+        video.style.height = '1px';
+        video.style.opacity = '0';
+        video.style.pointerEvents = 'none';
+
+        video.addEventListener('loadedmetadata', function () {
+          var duration = Number(video.duration);
+          cleanup();
+          if (Number.isFinite(duration) && duration > 0) {
+            resolve(Math.round(duration * 1000) / 1000);
+          } else {
+            reject(new Error('The video duration could not be read.'));
+          }
+        }, { once: true });
+
+        video.addEventListener('error', function () {
+          cleanup();
+          reject(new Error('The video duration could not be read.'));
+        }, { once: true });
+
+        video.addEventListener('abort', function () {
+          cleanup();
+          reject(new Error('The video duration could not be read.'));
+        }, { once: true });
+
+        document.body.appendChild(video);
+        video.src = cacheKey;
+        video.load();
+      }).catch(function (error) {
+        delete videoDurationCache[cacheKey];
+        throw error;
+      });
+
+      videoDurationCache[cacheKey] = cachedPromise;
+      return cachedPromise;
+    }
+
+    function setVideoDurationToggleState(row, button, isPressed) {
+      var input = row ? row.querySelector('[name="duration_seconds[]"]') : null;
+      var flag = row ? row.querySelector('[name="use_video_duration[]"]') : null;
+      var mirror = row ? row.querySelector('[data-video-duration-mirror]') : null;
+
+      if (row && input && isPressed && !row.getAttribute('data-video-duration-previous-value')) {
+        row.setAttribute('data-video-duration-previous-value', String(input.value || ''));
+      }
+
+      syncVideoDurationButtonState(button, isPressed);
+
+      if (input) {
+        if (!isPressed && row) {
+          var previousValue = String(row.getAttribute('data-video-duration-previous-value') || '').trim();
+          if (previousValue) {
+            input.value = previousValue;
+          }
+          row.removeAttribute('data-video-duration-previous-value');
+        }
+        input.disabled = Boolean(isPressed);
+        input.classList.toggle('playlist-duration-input-locked', Boolean(isPressed));
+      }
+
+      if (flag) {
+        flag.value = isPressed ? '1' : '0';
+      }
+
+      if (row) {
+        row.setAttribute('data-use-video-duration-state', isPressed ? 'true' : 'false');
+      }
+
+      if (!row || !input) {
+        return;
+      }
+
+      if (isPressed) {
+        if (!mirror) {
+          mirror = document.createElement('input');
+          mirror.type = 'hidden';
+          mirror.setAttribute('data-video-duration-mirror', '');
+          input.parentNode.insertBefore(mirror, input.nextSibling);
+        }
+        mirror.name = input.name;
+        mirror.value = input.value;
+        if (input.getAttribute('form')) {
+          mirror.setAttribute('form', input.getAttribute('form'));
+        }
+      } else if (mirror && mirror.parentNode) {
+        mirror.parentNode.removeChild(mirror);
+      }
+    }
+
+    async function applyVideoDurationToRow(row, button) {
+      var mediaPath = String(row && row.getAttribute('data-video-source-path') || '').trim();
+      var input = row ? row.querySelector('[name="duration_seconds[]"]') : null;
+      var isVideoRow = Boolean(mediaPath);
+      var storedDuration = Number(row && row.getAttribute('data-video-duration-seconds') || 0);
+
+      if (!isVideoRow || !input) {
+        return;
+      }
+
+      if (button && button.getAttribute('aria-pressed') === 'true') {
+        setVideoDurationToggleState(row, button, false);
+        return;
+      }
+
+      setVideoDurationToggleState(row, button, true);
+
+      if (Number.isFinite(storedDuration) && storedDuration > 0) {
+        input.value = String(storedDuration);
+        var existingMirror = row ? row.querySelector('[data-video-duration-mirror]') : null;
+        if (existingMirror) {
+          existingMirror.value = input.value;
+        }
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        return;
+      }
+
+      if (button) {
+        button.disabled = true;
+        button.textContent = VIDEO_DURATION_LOADING_LABEL;
+      }
+
+      try {
+        var durationSeconds = await loadVideoDuration(mediaPath);
+        if (row) {
+          row.setAttribute('data-video-duration-seconds', String(durationSeconds));
+        }
+        input.value = String(durationSeconds);
+        var mirror = row ? row.querySelector('[data-video-duration-mirror]') : null;
+        if (mirror) {
+          mirror.value = input.value;
+        }
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      } catch (error) {
+        setVideoDurationToggleState(row, button, false);
+        alert(error && error.message ? error.message : 'Unable to read the video duration.');
+      } finally {
+        if (button) {
+          button.disabled = false;
+          syncVideoDurationButtonState(button, button.getAttribute('aria-pressed') === 'true');
+        }
+      }
+    }
+
     tbody.addEventListener('click', function (event) {
+      if (event.target && event.target.matches('[name="duration_seconds[]"]')) {
+        event.stopPropagation();
+        return;
+      }
+
       var removeButton = event.target.closest('[data-playlist-remove-row]');
       var scheduleButton = event.target.closest('[data-schedule-config]');
-      var row = event.target.closest('tr[data-playlist-slide-row]');
+      var durationButton = event.target.closest('.playlist-use-video-duration');
+      var row = getPlaylistSlideRow(event.target);
 
       if (!row) {
         return;
@@ -835,8 +1202,96 @@
       if (scheduleButton) {
         event.preventDefault();
         if (typeof window.openScheduleModal === 'function') {
-          window.openScheduleModal(scheduleButton.getAttribute('data-schedule-config') + '?row_key=' + encodeURIComponent(row.getAttribute('data-row-key') || ''));
+          var rowKey = getPlaylistSlideRowKey(row);
+          var url = scheduleButton.getAttribute('data-schedule-config') || '';
+          var params = collectScheduleParams(row, rowKey);
+          url += (url.indexOf('?') === -1 ? '?' : '&') + params.toString();
+          window.openScheduleModal(url);
         }
+        return;
+      }
+
+      if (durationButton) {
+        var rowKey = getPlaylistSlideRowKey(row);
+        var pressedOnInput = lastDurationPointerDown && lastDurationPointerDown.type === 'input' && lastDurationPointerDown.rowKey === rowKey;
+        var releasedOnButton = lastDurationPointerUp && lastDurationPointerUp.type === 'button' && lastDurationPointerUp.rowKey === rowKey;
+
+        if (event.detail > 0 && (pressedOnInput || !releasedOnButton)) {
+          lastDurationPointerDown = null;
+          lastDurationPointerUp = null;
+          event.preventDefault();
+          return;
+        }
+
+        event.preventDefault();
+        void applyVideoDurationToRow(row, durationButton);
+      }
+
+      lastDurationPointerDown = null;
+      lastDurationPointerUp = null;
+    });
+
+    tbody.addEventListener('mousedown', function (event) {
+      var row = getPlaylistSlideRow(event.target);
+      var dragHandle = event.target && event.target.closest ? event.target.closest('[data-playlist-drag-handle]') : null;
+      var durationInput = event.target && event.target.matches('[name="duration_seconds[]"]') ? event.target : null;
+      var durationToggle = isDurationControl(event.target) ? event.target.closest('.playlist-use-video-duration') : null;
+
+      if (row && !dragHandle) {
+        event.stopPropagation();
+      }
+
+      if (durationInput) {
+        lastDurationPointerDown = getDurationPointerState(event.target, 'input');
+        event.stopPropagation();
+        return;
+      }
+
+      if (durationToggle) {
+        lastDurationPointerDown = getDurationPointerState(durationToggle, 'button');
+        return;
+      }
+
+      lastDurationPointerDown = null;
+    });
+
+    tbody.addEventListener('mouseup', function (event) {
+      var durationInput = event.target && event.target.matches('[name="duration_seconds[]"]') ? event.target : null;
+      var durationToggle = isDurationControl(event.target) ? event.target.closest('.playlist-use-video-duration') : null;
+      var row = getPlaylistSlideRow(event.target);
+
+      if (durationInput) {
+        lastDurationPointerUp = getDurationPointerState(row, 'input');
+        return;
+      }
+
+      if (durationToggle) {
+        lastDurationPointerUp = getDurationPointerState(row, 'button');
+        return;
+      }
+
+      lastDurationPointerUp = null;
+    });
+
+    tbody.addEventListener('input', function (event) {
+      if (event.target && event.target.matches('[name="duration_seconds[]"]')) {
+        var editedRow = getPlaylistSlideRow(event.target);
+        var editedButton = editedRow ? editedRow.querySelector('.playlist-use-video-duration') : null;
+        var editedMirror = editedRow ? editedRow.querySelector('[data-video-duration-mirror]') : null;
+        var useVideoDuration = Boolean(editedButton && editedButton.getAttribute('aria-pressed') === 'true');
+
+        if (editedRow) {
+          editedRow.setAttribute('data-use-video-duration-state', useVideoDuration ? 'true' : 'false');
+        }
+
+        if (useVideoDuration && editedMirror) {
+          editedMirror.value = event.target.value;
+        }
+
+        if (editedMirror && !useVideoDuration) {
+          editedMirror.parentNode.removeChild(editedMirror);
+        }
+        markPlaylistDirty();
       }
     });
 

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

@@ -1,285 +1,16 @@
 (function () {
-  var REFRESH_INTERVAL_MS = 10000;
+  if (window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-background' && window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-scheduled') {
-  var pathname = window.location.pathname.replace(/\/$/, '');
-  var stateNode = document.getElementById('background-tasks-state');
-  var currentVersion = stateNode ? String(stateNode.getAttribute('data-state-version') || '') : '';
-
-  if (pathname !== '/settings/background-tasks') {
     return;
   }
 
-  function getPageUrl(href) {
+  try {
-    try {
+    var url = new URL(window.location.href);
-      return new URL(href, window.location.href);
+    if (!url.searchParams.has('message')) {
-    } catch (_error) {
-      return null;
-    }
-  }
-
-  function updateLocalDateTimes(root) {
-    if (typeof window.initLocalDateTimes === 'function') {
-      window.initLocalDateTimes(root || document);
-    }
-  }
-
-  function replaceSectionFromDocument(sectionName, responseDocument) {
-    var currentCard = document.querySelector('[data-pagination-card="' + sectionName + '"]');
-    var nextCard = responseDocument.querySelector('[data-pagination-card="' + sectionName + '"]');
-
-    if (!currentCard || !nextCard) {
-      return false;
-    }
-
-    currentCard.outerHTML = nextCard.outerHTML;
-    updateLocalDateTimes(document.querySelector('[data-pagination-card="' + sectionName + '"]'));
-    return true;
-  }
-
-  function replaceSummaryFromDocument(responseDocument) {
-    var currentSummary = document.getElementById('background-tasks-summary');
-    var nextSummary = responseDocument.getElementById('background-tasks-summary');
-
-    if (!currentSummary || !nextSummary) {
-      return false;
-    }
-
-    currentSummary.outerHTML = nextSummary.outerHTML;
-    return true;
-  }
-
-  function replaceFiltersFromDocument(responseDocument) {
-    var currentFilters = document.getElementById('background-tasks-filters');
-    var nextFilters = responseDocument.getElementById('background-tasks-filters');
-
-    if (!currentFilters || !nextFilters) {
-      return false;
-    }
-
-    currentFilters.outerHTML = nextFilters.outerHTML;
-    return true;
-  }
-
-  function replaceStateFromDocument(responseDocument) {
-    var currentState = document.getElementById('background-tasks-state');
-    var nextState = responseDocument.getElementById('background-tasks-state');
-
-    if (!currentState || !nextState) {
-      return false;
-    }
-
-    currentState.outerHTML = nextState.outerHTML;
-    stateNode = document.getElementById('background-tasks-state');
-    currentVersion = stateNode ? String(stateNode.getAttribute('data-state-version') || '') : currentVersion;
-    return true;
-  }
-
-  function applyPageResponse(responseDocument, sectionNames) {
-    var updated = false;
-
-    if (replaceStateFromDocument(responseDocument)) {
-      updated = true;
-    }
-
-    if (replaceSummaryFromDocument(responseDocument)) {
-      updated = true;
-    }
-
-    if (replaceFiltersFromDocument(responseDocument)) {
-      updated = true;
-    }
-
-    sectionNames.forEach(function (sectionName) {
-      if (replaceSectionFromDocument(sectionName, responseDocument)) {
-        updated = true;
-      }
-    });
-
-    return updated;
-  }
-
-  function loadPage(nextUrl, options) {
-    var url = getPageUrl(nextUrl);
-    var sectionNames = options && options.sectionNames ? options.sectionNames : [];
-    var replaceHistory = Boolean(options && options.replaceHistory);
-
-    if (!url) {
       return;
     }
-
+    url.searchParams.delete('message');
-    fetch(url.toString(), {
+    window.history.replaceState({}, document.title, url.pathname + (url.search ? url.search : '') + url.hash);
-      method: 'GET',
+  } catch (_error) {
-      headers: {
+    // Ignore URL cleanup failures.
-        'Accept': 'text/html, application/xhtml+xml',
-        'X-Requested-With': 'XMLHttpRequest'
-      },
-      credentials: 'same-origin',
-      cache: 'no-store'
-    }).then(function (response) {
-      if (!response.ok) {
-        throw new Error('Unable to load background tasks page.');
-      }
-      return response.text();
-    }).then(function (text) {
-      var responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
-      if (!applyPageResponse(responseDocument, sectionNames.length ? sectionNames : ['tasks', 'recurring'])) {
-        return;
-      }
-
-      if (replaceHistory) {
-        window.history.replaceState({}, document.title, url.pathname + url.search + url.hash);
-      } else {
-        window.history.pushState({}, document.title, url.pathname + url.search + url.hash);
-      }
-    }).catch(function (_error) {
-      window.location.assign(url.pathname + url.search + url.hash);
-    });
   }
-
-  function stripMessageParameter() {
-    try {
-      var url = new URL(window.location.href);
-      if (!url.searchParams.has('message')) {
-        return;
-      }
-      url.searchParams.delete('message');
-      window.history.replaceState({}, document.title, url.pathname + (url.search ? url.search : '') + url.hash);
-    } catch (_error) {
-      // Ignore URL cleanup failures.
-    }
-  }
-
-  function findPaginationLink(target) {
-    if (!target || !target.closest) {
-      return null;
-    }
-
-    var link = target.closest('.pagination .page-link');
-    if (!link) {
-      return null;
-    }
-
-    var href = String(link.getAttribute('href') || '').trim();
-    if (!href || href === '#') {
-      return null;
-    }
-
-    var card = link.closest('[data-pagination-card]');
-    if (!card) {
-      return null;
-    }
-
-    return {
-      href: href,
-      sectionName: String(card.getAttribute('data-pagination-card') || '').trim()
-    };
-  }
-
-  function findFilterLink(target) {
-    if (!target || !target.closest) {
-      return null;
-    }
-
-    var link = target.closest('a[data-background-tasks-nav]');
-    if (!link) {
-      return null;
-    }
-
-    var href = String(link.getAttribute('href') || '').trim();
-    if (!href || href === '#') {
-      return null;
-    }
-
-    return {
-      href: href
-    };
-  }
-
-  function initPaginationNavigation() {
-    document.addEventListener('click', function (event) {
-      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-        return;
-      }
-
-      var paginationLink = findPaginationLink(event.target);
-      if (paginationLink && paginationLink.sectionName) {
-        var currentUrl = getPageUrl(window.location.href);
-        var nextUrl = getPageUrl(paginationLink.href);
-        if (!currentUrl || !nextUrl) {
-          return;
-        }
-
-        if (currentUrl.pathname === nextUrl.pathname && currentUrl.search === nextUrl.search && currentUrl.hash === nextUrl.hash) {
-          event.preventDefault();
-          return;
-        }
-
-        event.preventDefault();
-        loadPage(nextUrl.toString(), { sectionNames: [paginationLink.sectionName] });
-        return;
-      }
-
-      var filterLink = findFilterLink(event.target);
-      if (!filterLink) {
-        return;
-      }
-
-      var filterUrl = getPageUrl(filterLink.href);
-      if (!filterUrl) {
-        return;
-      }
-
-      if (filterUrl.pathname === window.location.pathname && filterUrl.search === window.location.search && filterUrl.hash === window.location.hash) {
-        event.preventDefault();
-        return;
-      }
-
-      event.preventDefault();
-      loadPage(filterUrl.toString(), { sectionNames: ['tasks'] });
-    }, true);
-
-    window.addEventListener('popstate', function () {
-      loadPage(window.location.href, { replaceHistory: true });
-    });
-  }
-
-  function refreshPage() {
-    if (document.visibilityState !== 'visible') {
-      return;
-    }
-
-    fetch('/settings/background-tasks/state', {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'X-Requested-With': 'XMLHttpRequest'
-      },
-      credentials: 'same-origin',
-      cache: 'no-store'
-    }).then(function (response) {
-      if (!response.ok) {
-        return null;
-      }
-      return response.json();
-    }).then(function (payload) {
-      if (!payload || !payload.version) {
-        return;
-      }
-
-      var nextVersion = String(payload.version || '');
-      if (!currentVersion) {
-        currentVersion = nextVersion;
-        return;
-      }
-
-      if (nextVersion !== currentVersion) {
-        window.location.reload();
-      }
-    }).catch(function (_error) {
-      // Ignore refresh probe errors and try again on the next interval.
-    });
-  }
-
-  stripMessageParameter();
-  initPaginationNavigation();
-  window.setInterval(refreshPage, REFRESH_INTERVAL_MS);
 }());

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

@@ -58,6 +58,11 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
   var openPreviewPopupButton = document.getElementById('open-preview-popup');
   var editorInstances = new Map();
   var submitting = false;
+  var uploadMaxBytes = 100 * 1024 * 1024;
+  var uploadMaxLabel = '100 MB';
+  var uploadVideoMaxBytes = 1024 * 1024 * 1024;
+  var uploadVideoMaxLabel = '1 GB';
+  var videoDurationCache = Object.create(null);
   var previewRenderFrame = 0;
   var previewPopupWindow = null;
   var previewPopupRenderFrame = 0;
@@ -253,6 +258,12 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
     return current && current.value !== undefined ? current.value : '';
   }
 
+  function getCurrentRegionVideoDuration(region) {
+    var current = existingContent[region.region_key] || {};
+    var duration = Math.round(Number(current.duration_seconds || 0) * 1000) / 1000;
+    return Number.isFinite(duration) && duration > 0 ? String(duration) : '';
+  }
+
   function normalizeEditorData(value) {
     return String(value || '');
   }
@@ -456,6 +467,47 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
     return '<iframe class="slide-preview-html-frame" sandbox="" scrolling="no" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="HTML preview" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
   }
 
+  function startPreviewVideoPlayback(root) {
+    if (!root) {
+      return;
+    }
+
+    var videos = root.querySelectorAll('video.slide-preview-video');
+    Array.prototype.forEach.call(videos, function (video) {
+      if (!video) {
+        return;
+      }
+
+      video.autoplay = true;
+      video.loop = true;
+      video.muted = true;
+      video.playsInline = true;
+
+      function tryPlay() {
+        try {
+          video.load();
+        } catch (_error) {
+          // Ignore load failures and try to play anyway.
+        }
+
+        var playPromise = video.play && video.play();
+        if (playPromise && typeof playPromise.catch === 'function') {
+          playPromise.catch(function () {
+            return null;
+          });
+        }
+      }
+
+      if (video.readyState >= 2) {
+        tryPlay();
+        return;
+      }
+
+      video.addEventListener('canplay', tryPlay, { once: true });
+      video.addEventListener('loadedmetadata', tryPlay, { once: true });
+    });
+  }
+
   function destroyEditors() {
     editorInstances.forEach(function (editor) {
       if (editor && typeof editor.destroy === 'function') {
@@ -765,7 +817,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
   }
 
   function clearImagePreviewUrls() {
-    templateFields.querySelectorAll('input[type="file"][name^="region_image_"]').forEach(function (input) {
+    templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]').forEach(function (input) {
       if (input.dataset.previewUrl) {
         URL.revokeObjectURL(input.dataset.previewUrl);
         delete input.dataset.previewUrl;
@@ -773,18 +825,370 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
     });
   }
 
+  function getRegionMediaType(card) {
+    if (card && card.dataset && String(card.dataset.regionMediaType || '').trim()) {
+      return String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
+    }
+
+    var regionTypeInput = card && card.querySelector ? card.querySelector('input[type="hidden"][name="region_type[]"]') : null;
+    return regionTypeInput && String(regionTypeInput.value || '').trim() === 'video' ? 'video' : 'image';
+  }
+
+  function getRegionMediaPrefix(mediaType) {
+    return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
+  }
+
+  function getRegionExistingMediaPrefix(mediaType) {
+    return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
+  }
+
+  function getRegionExistingVideoDurationName(regionId) {
+    return 'existing_region_video_duration_' + regionId;
+  }
+
+  function getRegionVideoDurationHiddenInput(regionId) {
+    var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+    return card ? card.querySelector('input[type="hidden"][name="' + getRegionExistingVideoDurationName(regionId) + '"]') : null;
+  }
+
+  function getRegionUploadZone(input) {
+    return input ? input.closest('[data-region-upload-zone]') : null;
+  }
+
+  function getRegionUploadHiddenValue(input) {
+    var mediaType = input && input.name && input.name.indexOf('region_video_') === 0 ? 'video' : 'image';
+    var regionId = input && input.name ? input.name.replace(/^region_(?:image|video)_/, '') : '';
+    var card = regionId ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
+    var hidden = card && card.querySelector('input[type="hidden"][name="' + getRegionExistingMediaPrefix(mediaType) + regionId + '"]');
+    return hidden ? hidden.value : '';
+  }
+
+  function getRegionUploadProgressNode(zone) {
+    return zone ? zone.querySelector('[data-region-upload-progress]') : null;
+  }
+
+  function getRegionUploadProgressBar(zone) {
+    return zone ? zone.querySelector('[data-region-upload-progress-bar]') : null;
+  }
+
+  function getRegionUploadProgressText(zone) {
+    return zone ? zone.querySelector('[data-region-upload-progress-text]') : null;
+  }
+
+  function setRegionUploadProgress(zone, percent, text, isIndeterminate) {
+    var progress = getRegionUploadProgressNode(zone);
+    var bar = getRegionUploadProgressBar(zone);
+    var progressText = getRegionUploadProgressText(zone);
+    var normalizedPercent = Math.max(0, Math.min(100, Math.round(Number(percent || 0))));
+
+    if (!progress || !bar) {
+      return;
+    }
+
+    if (progressText) {
+      progressText.textContent = text || 'Uploading...';
+    }
+
+    progress.hidden = false;
+    bar.style.width = (isIndeterminate ? 100 : normalizedPercent) + '%';
+    bar.textContent = isIndeterminate ? 'Uploading...' : normalizedPercent + '%';
+    bar.setAttribute('aria-valuenow', String(isIndeterminate ? 100 : normalizedPercent));
+    bar.classList.toggle('progress-bar-striped', Boolean(isIndeterminate));
+    bar.classList.toggle('progress-bar-animated', Boolean(isIndeterminate));
+  }
+
+  function setRegionUploadState(input, isUploading, percent, text, isIndeterminate) {
+    var zone = getRegionUploadZone(input);
+    var progress = getRegionUploadProgressNode(zone);
+
+    if (!zone || !progress) {
+      return;
+    }
+
+    zone.classList.toggle('is-uploading', Boolean(isUploading));
+    zone.setAttribute('aria-busy', isUploading ? 'true' : 'false');
+    input.disabled = Boolean(isUploading);
+
+    if (isUploading) {
+      setRegionUploadProgress(zone, percent, text, isIndeterminate);
+      return;
+    }
+
+    progress.hidden = true;
+    if (input) {
+      input.disabled = false;
+    }
+  }
+
+  function isRegionImageFileWithinLimit(file) {
+    return Boolean(file) && Number(file.size || 0) <= uploadMaxBytes;
+  }
+
+  function getRegionMediaTypeFromInput(input) {
+    return input && input.name && input.name.indexOf('region_video_') === 0 ? 'video' : 'image';
+  }
+
+  function getRegionMediaUploadLimitBytes(mediaType) {
+    return String(mediaType || '').trim() === 'video' ? uploadVideoMaxBytes : uploadMaxBytes;
+  }
+
+  function getRegionMediaUploadLimitLabel(mediaType) {
+    return String(mediaType || '').trim() === 'video' ? uploadVideoMaxLabel : uploadMaxLabel;
+  }
+
+  function isRegionMediaFileWithinLimit(file, mediaType) {
+    return Boolean(file) && Number(file.size || 0) <= getRegionMediaUploadLimitBytes(mediaType);
+  }
+
+  function rejectOversizeRegionImage(input, file) {
+    return rejectOversizeRegionMedia(input, file, 'image');
+  }
+
+  function rejectOversizeRegionMedia(input, file, mediaType) {
+    var zone = getRegionUploadZone(input);
+    var hiddenValue = getRegionUploadHiddenValue(input);
+    var limitLabel = getRegionMediaUploadLimitLabel(mediaType || getRegionMediaTypeFromInput(input));
+
+    if (typeof window.showToast === 'function') {
+      window.showToast('File must be ' + limitLabel + ' or smaller.', 'warning');
+    } else {
+      window.alert('File must be ' + limitLabel + ' or smaller.');
+    }
+    input.value = '';
+    if (input.dataset.previewUrl) {
+      URL.revokeObjectURL(input.dataset.previewUrl);
+      delete input.dataset.previewUrl;
+    }
+    renderRegionMediaPreview(zone ? zone.closest('[data-region-id]') : null, hiddenValue);
+    if (file) {
+      return false;
+    }
+
+    return false;
+  }
+
   function setRegionImageInputFile(input, file) {
+    return setRegionMediaInputFile(input, file);
+  }
+
+  function setRegionMediaInputFile(input, file) {
     if (!input || !file) {
       return;
     }
 
+    var mediaType = getRegionMediaTypeFromInput(input);
+
+    if (!isRegionMediaFileWithinLimit(file, mediaType)) {
+      rejectOversizeRegionMedia(input, file, mediaType);
+      return;
+    }
+
     var dataTransfer = new DataTransfer();
     dataTransfer.items.add(file);
     input.files = dataTransfer.files;
     input.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
-  function renderImageRegionPreview(card, value) {
+  function uploadRegionImageFile(input, file) {
+    return uploadRegionMediaFile(input, file);
+  }
+
+  function uploadRegionMediaFile(input, file) {
+    if (!input || !file) {
+      return Promise.resolve(null);
+    }
+
+    var mediaType = getRegionMediaTypeFromInput(input);
+
+    if (!isRegionMediaFileWithinLimit(file, mediaType)) {
+      rejectOversizeRegionMedia(input, file, mediaType);
+      return Promise.resolve(null);
+    }
+
+    var regionId = input.name.replace(/^region_(?:image|video)_/, '');
+    var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+    var hidden = card && card.querySelector('input[type="hidden"][name="' + getRegionExistingMediaPrefix(mediaType) + regionId + '"]');
+    var zone = getRegionUploadZone(input);
+    var uploadToken = String(Date.now()) + ':' + Math.random().toString(16).slice(2);
+    var previousUploadedPath = String(input.dataset.uploadedPath || '').trim();
+    var previousNeedsCleanup = String(input.dataset.uploadedNeedsCleanup || '') === '1';
+
+    input.dataset.uploadToken = uploadToken;
+    setRegionUploadState(input, true, 0, 'Uploading...', true);
+
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      var formData = new FormData();
+      formData.append('file', file, file.name || 'upload');
+
+      xhr.open('POST', '/slides/uploads', true);
+      xhr.responseType = 'text';
+      xhr.withCredentials = true;
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+
+      xhr.upload.onprogress = function (event) {
+        if (input.dataset.uploadToken !== uploadToken) {
+          return;
+        }
+
+        if (!event || !event.lengthComputable || !event.total) {
+          setRegionUploadProgress(zone, 100, 'Uploading...', true);
+          return;
+        }
+
+        var percent = Math.round((event.loaded / event.total) * 100);
+        setRegionUploadProgress(zone, percent, 'Uploading ' + percent + '%', false);
+      };
+
+      xhr.onload = function () {
+        if (input.dataset.uploadToken !== uploadToken) {
+          resolve(null);
+          return;
+        }
+
+        var response = {
+          ok: xhr.status >= 200 && xhr.status < 300,
+          status: xhr.status,
+          statusText: xhr.statusText,
+          responseText: xhr.responseText || ''
+        };
+
+        if (!response.ok) {
+          var error = new Error(response.responseText || 'Unable to upload media.');
+          error.status = response.status;
+          error.responseText = response.responseText;
+          reject(error);
+          return;
+        }
+
+        var payload = {};
+        try {
+          payload = JSON.parse(response.responseText || '{}') || {};
+        } catch (_error) {
+          payload = {};
+        }
+
+        var uploadedPath = String(payload.path || '').trim();
+        if (!uploadedPath) {
+          reject(new Error('Unable to upload media.'));
+          return;
+        }
+
+        if (input.dataset.previewUrl) {
+          URL.revokeObjectURL(input.dataset.previewUrl);
+          delete input.dataset.previewUrl;
+        }
+
+        if (hidden) {
+          hidden.value = uploadedPath;
+        }
+        input.dataset.uploadedPath = uploadedPath;
+        input.dataset.uploadedNeedsCleanup = '1';
+        input.value = '';
+        input.setCustomValidity('');
+        renderRegionMediaPreview(card, uploadedPath);
+        void syncVideoRegionDuration(card, uploadedPath);
+        templateSelectorLock.markEdited();
+        requestPreviewRender();
+        if (previousNeedsCleanup && previousUploadedPath && previousUploadedPath !== uploadedPath) {
+          queueUploadCleanup([previousUploadedPath]);
+        }
+        setRegionUploadState(input, false);
+        resolve(payload);
+      };
+
+      xhr.onerror = function () {
+        if (input.dataset.uploadToken !== uploadToken) {
+          resolve(null);
+          return;
+        }
+
+        reject(new Error('Unable to upload media.'));
+      };
+
+      xhr.onabort = function () {
+        if (input.dataset.uploadToken !== uploadToken) {
+          resolve(null);
+          return;
+        }
+
+        reject(new Error('Unable to upload media.'));
+      };
+
+      xhr.onloadend = function () {
+        if (input.dataset.uploadToken === uploadToken) {
+          delete input.dataset.uploadToken;
+          setRegionUploadState(input, false);
+        }
+      };
+
+      xhr.send(formData);
+    }).catch(function (error) {
+      if (input.dataset.uploadToken === uploadToken) {
+        delete input.dataset.uploadToken;
+        setRegionUploadState(input, false);
+      }
+      throw error;
+    });
+  }
+
+  function getPendingUploadCleanupPaths() {
+    return getRegionMediaInputs().map(function (input) {
+      if (!input || String(input.dataset.uploadedNeedsCleanup || '') !== '1') {
+        return null;
+      }
+
+      return String(input.dataset.uploadedPath || '').trim();
+    }).filter(Boolean);
+  }
+
+  function clearPendingUploadCleanupPaths() {
+    getRegionMediaInputs().forEach(function (input) {
+      if (!input) {
+        return;
+      }
+
+      delete input.dataset.uploadedNeedsCleanup;
+    });
+  }
+
+  function queueUploadCleanup(uploadPaths) {
+    var normalizedPaths = Array.from(new Set((uploadPaths || []).map(function (value) {
+      return String(value || '').trim();
+    }).filter(Boolean)));
+
+    if (!normalizedPaths.length) {
+      return;
+    }
+
+    var payload = JSON.stringify({ uploadPaths: normalizedPaths });
+    var url = '/slides/uploads/cleanup';
+
+    if (navigator.sendBeacon) {
+      try {
+        navigator.sendBeacon(url, new Blob([payload], { type: 'application/json' }));
+        return;
+      } catch (_error) {
+        // Fall back to fetch below.
+      }
+    }
+
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: payload,
+      credentials: 'same-origin',
+      keepalive: true
+    }).catch(function () {
+      // Best-effort cleanup only.
+    });
+  }
+
+  function renderRegionMediaPreview(card, value) {
     if (!card) {
       return;
     }
@@ -794,9 +1198,158 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       return;
     }
 
+    var mediaType = getRegionMediaType(card);
+    var isVideo = mediaType === 'video';
+
     previewBox.innerHTML = value
-      ? '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="Current image preview" />'
+      ? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : 'image') + '">' +
-      : '<div class="slide-image-region-preview slide-image-region-preview-empty">No image</div>';
+          (isVideo
+            ? '<video class="slide-image-region-preview" src="' + escapeHtml(value) + '" autoplay loop muted playsinline preload="metadata"></video>'
+            : '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="Current image preview" />') +
+          '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
+        '</div>'
+      : '<div class="slide-image-region-preview slide-image-region-preview-empty">No ' + (isVideo ? 'video' : 'image') + '</div>';
+
+    if (isVideo) {
+      window.requestAnimationFrame(function () {
+        var video = previewBox.querySelector('video.slide-image-region-preview');
+        if (!video) {
+          return;
+        }
+        try {
+          video.load();
+        } catch (_error) {
+          // Ignore load failures; play() will retry if the browser allows it.
+        }
+        var playPromise = video.play && video.play();
+        if (playPromise && typeof playPromise.catch === 'function') {
+          playPromise.catch(function () {
+            return null;
+          });
+        }
+      });
+    }
+  }
+
+  function loadVideoDuration(mediaPath) {
+    var cacheKey = String(mediaPath || '').trim();
+    var cachedPromise;
+
+    if (!cacheKey) {
+      return Promise.reject(new Error('No video source is available for this slide.'));
+    }
+
+    cachedPromise = videoDurationCache[cacheKey];
+    if (cachedPromise) {
+      return cachedPromise;
+    }
+
+    cachedPromise = new Promise(function (resolve, reject) {
+      var video = document.createElement('video');
+      var timeoutId = window.setTimeout(function () {
+        cleanup();
+        reject(new Error('Timed out loading the video metadata.'));
+      }, 15000);
+
+      function cleanup() {
+        window.clearTimeout(timeoutId);
+        video.removeAttribute('src');
+        video.load();
+        if (video.parentNode) {
+          video.parentNode.removeChild(video);
+        }
+      }
+
+      video.preload = 'metadata';
+      video.muted = true;
+      video.playsInline = true;
+      video.setAttribute('playsinline', '');
+      video.setAttribute('muted', '');
+      video.style.position = 'absolute';
+      video.style.left = '-9999px';
+      video.style.top = '0';
+      video.style.width = '1px';
+      video.style.height = '1px';
+      video.style.opacity = '0';
+      video.style.pointerEvents = 'none';
+
+      video.addEventListener('loadedmetadata', function () {
+        var duration = Number(video.duration);
+        cleanup();
+        if (Number.isFinite(duration) && duration > 0) {
+          resolve(Math.max(0.001, Math.round(duration * 1000) / 1000));
+        } else {
+          reject(new Error('The video duration could not be read.'));
+        }
+      }, { once: true });
+
+      video.addEventListener('error', function () {
+        cleanup();
+        reject(new Error('The video duration could not be read.'));
+      }, { once: true });
+
+      video.addEventListener('abort', function () {
+        cleanup();
+        reject(new Error('The video duration could not be read.'));
+      }, { once: true });
+
+      document.body.appendChild(video);
+      video.src = cacheKey;
+      video.load();
+    }).catch(function (error) {
+      delete videoDurationCache[cacheKey];
+      throw error;
+    });
+
+    videoDurationCache[cacheKey] = cachedPromise;
+    return cachedPromise;
+  }
+
+  async function syncVideoRegionDuration(card, source) {
+    if (!card) {
+      return;
+    }
+
+    var regionId = card.getAttribute('data-region-id');
+    var hidden = regionId ? getRegionVideoDurationHiddenInput(regionId) : null;
+
+    if (!hidden) {
+      return;
+    }
+
+    var mediaPath = String(source || '').trim();
+    if (!mediaPath) {
+      hidden.value = '';
+      return;
+    }
+
+    try {
+      hidden.value = String(await loadVideoDuration(mediaPath));
+    } catch (_error) {
+      hidden.value = '';
+    }
+  }
+
+  function renderImageRegionPreview(card, value) {
+    return renderRegionMediaPreview(card, value);
+  }
+
+  function getRegionImageInputs() {
+    return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]'));
+  }
+
+  function getRegionMediaInputs() {
+    return getRegionImageInputs();
+  }
+
+  function hasPendingRegionImageUpload() {
+    return getRegionImageInputs().some(function (input) {
+      return Boolean(input && input.files && input.files.length);
+    });
+  }
+
+  function hasPendingRegionMediaUpload() {
+    return hasPendingRegionImageUpload();
   }
 
   function getRegionBox(region, canvasWidth, canvasHeight) {
@@ -822,23 +1375,11 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       '<meta charset="utf-8" />' +
       '<meta name="viewport" content="width=device-width, initial-scale=1" />' +
       '<title>Slide preview</title>' +
-      '<style>' +
+      '<link rel="stylesheet" href="/assets/css/theme-custom.css" />' +
-      'html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#fff;font-family:Arial,sans-serif;}' +
-      '#popup-preview-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#111;}' +
-      '#popup-preview-canvas{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform;}' +
-      '#popup-preview-canvas,#popup-preview-stage{box-sizing:border-box;}' +
-      '.slide-preview-background,.slide-preview-overlay,.slide-preview-empty{position:absolute;inset:0;}' +
-      '.slide-preview-background{width:100%;height:100%;object-fit:contain;display:block;z-index:1;}' +
-      '.slide-preview-overlay{z-index:2;}' +
-      '.slide-preview-empty{display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;color:rgba(255,255,255,0.75);z-index:0;}' +
-      '.slide-preview-region{position:absolute;overflow:hidden;box-sizing:border-box;}' +
-      '.slide-preview-image{width:100%;height:100%;object-fit:contain;display:block;}' +
-      '.slide-preview-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.65);background:rgba(255,255,255,0.06);font-size:0.9rem;}' +
-      '</style>' +
       '</head>' +
-      '<body>' +
+      '<body class="slide-preview-popup-body">' +
-      '<div id="popup-preview-stage">' +
+      '<div class="slide-preview-popup-stage" id="popup-preview-stage">' +
-        '<div id="popup-preview-canvas"></div>' +
+        '<div class="slide-preview-popup-canvas" id="popup-preview-canvas"></div>' +
       '</div>' +
       '</body>' +
       '</html>';
@@ -886,6 +1427,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       if (popupOverlay) {
         popupOverlay.innerHTML = '';
       }
+      startPreviewVideoPlayback(popupCanvas);
       return;
     }
 
@@ -907,6 +1449,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       popupEmpty.style.display = 'none';
     }
 
+    startPreviewVideoPlayback(popupCanvas);
+
     var stageRect = popupStage.getBoundingClientRect();
     if (!stageRect.width || !stageRect.height) {
       if (previewPopupRenderFrame) {
@@ -1058,6 +1602,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       var htmlInput = card && card.querySelector('textarea[name="region_html_' + region.id + '"]');
       var imageHidden = card && card.querySelector('input[type="hidden"][name="existing_region_image_' + region.id + '"]');
       var imageFileInput = card && card.querySelector('input[type="file"][name="region_image_' + region.id + '"]');
+      var videoHidden = card && card.querySelector('input[type="hidden"][name="existing_region_video_' + region.id + '"]');
+      var videoFileInput = card && card.querySelector('input[type="file"][name="region_video_' + region.id + '"]');
       var webpageInput = card && card.querySelector('input[type="url"][name="region_webpage_' + region.id + '"]');
       var rtmpInput = card && card.querySelector('input[type="url"][name="region_rtmp_' + region.id + '"]');
       var disableAudioInput = card && card.querySelector('input[type="checkbox"][name="region_disable_audio_' + region.id + '"]');
@@ -1070,6 +1616,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       var existingApi = existingContent[region.region_key] || {};
       var value = region.region_type === 'image'
         ? ((imageFileInput && imageFileInput.dataset.previewUrl) ? imageFileInput.dataset.previewUrl : (imageHidden ? imageHidden.value : ''))
+        : region.region_type === 'video'
+          ? ((videoFileInput && videoFileInput.dataset.previewUrl) ? videoFileInput.dataset.previewUrl : (videoHidden ? videoHidden.value : ''))
         : region.region_type === 'webpage'
           ? (webpageInput ? webpageInput.value : '')
           : region.region_type === 'rtmp'
@@ -1092,6 +1640,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
           : getTextStyleFromCard(card, region);
       var content = region.region_type === 'image'
         ? (value ? '<img class="slide-preview-image" src="' + escapeHtml(value) + '" alt="" />' : '<div class="slide-preview-placeholder">Image</div>')
+        : region.region_type === 'video'
+          ? (value ? '<video class="slide-preview-video" src="' + escapeHtml(value) + '" autoplay loop muted playsinline preload="metadata"></video>' : '<div class="slide-preview-placeholder">Video</div>')
         : region.region_type === 'webpage'
           ? renderPreviewWebpageRegion(value)
           : region.region_type === 'rtmp'
@@ -1116,6 +1666,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
           : renderPreviewTextRegion(region, value, style, scale);
       var selected = region.region_type === 'image'
         ? ' slide-preview-image-region'
+        : region.region_type === 'video'
+          ? ' slide-preview-video-region'
         : region.region_type === 'webpage'
           ? ' slide-preview-webpage-region'
           : region.region_type === 'rtmp'
@@ -1130,6 +1682,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       return '<div class="slide-preview-region' + selected + '" style="left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px;">' + content + '</div>';
     }).join('');
 
+    startPreviewVideoPlayback(slidePreviewOverlay);
+
     syncPopupPreview();
   }
 
@@ -1319,7 +1873,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
     var regionHeight = Math.max(1, Math.round(Number(region && region.height ? region.height : 0) || 1));
     var regionRatio = reduceAspectRatio(regionWidth, regionHeight);
     return '' +
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
+      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="image">' +
         '<div class="card-header template-field-head">' +
           '<strong>' + escapeHtml(region.label) + '</strong>' +
           '<span class="chip">Image</span>' +
@@ -1329,10 +1883,19 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
             '<div class="col-12 col-md-8 d-flex flex-column">' +
               '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_image_' + region.id + '">' +
                 '<input type="file" id="region_image_' + region.id + '" name="region_image_' + region.id + '" class="visually-hidden" accept="image/*" data-slide-image-cropper-region-ratio="' + escapeHtml(regionRatio) + '" data-slide-image-cropper-region-ratio-label="Region" />' +
-                '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
+                '<span class="slide-image-region-upload-zone-content">' +
-                '<span class="slide-image-region-upload-zone-copy">' +
+                  '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
-                  '<strong>Drop an image here or click to upload</strong>' +
+                  '<span class="slide-image-region-upload-zone-copy">' +
-                  '<span>PNG, JPG, GIF, or WebP</span>' +
+                    '<strong>Drop an image here or click to upload</strong>' +
+                    '<span>PNG, JPG, GIF, or WebP</span>' +
+                    '<span class="slide-image-region-upload-zone-limit">Max ' + uploadMaxLabel + ' per file</span>' +
+                  '</span>' +
+                '</span>' +
+                '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
+                  '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
+                  '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Image upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
+                    '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
+                  '</div>' +
                 '</span>' +
               '</label>' +
             '</div>' +
@@ -1352,6 +1915,53 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       '</div>';
   }
 
+  function renderVideoRegion(region) {
+    var current = getCurrentRegionValue(region);
+    var currentDuration = getCurrentRegionVideoDuration(region);
+    return '' +
+      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="video">' +
+        '<div class="card-header template-field-head">' +
+          '<strong>' + escapeHtml(region.label) + '</strong>' +
+          '<span class="chip">Video</span>' +
+        '</div>' +
+        '<div class="card-body p-3 d-grid">' +
+          '<div class="row g-3 align-items-start">' +
+            '<div class="col-12 col-md-8 d-flex flex-column">' +
+              '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_video_' + region.id + '">' +
+                '<input type="file" id="region_video_' + region.id + '" name="region_video_' + region.id + '" class="visually-hidden" accept="video/*" />' +
+                '<span class="slide-image-region-upload-zone-content">' +
+                  '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-camera-video" aria-hidden="true"></i></span>' +
+                  '<span class="slide-image-region-upload-zone-copy">' +
+                    '<strong>Drop a video here or click to upload</strong>' +
+                    '<span>MP4, WebM, or Ogg</span>' +
+                    '<span class="slide-image-region-upload-zone-limit">Max ' + uploadVideoMaxLabel + ' per file</span>' +
+                  '</span>' +
+                '</span>' +
+                '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
+                  '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
+                  '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Video upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
+                    '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
+                  '</div>' +
+                '</span>' +
+              '</label>' +
+            '</div>' +
+            '<div class="col-12 col-md-4">' +
+              '<div class="slide-image-region-preview-box">' +
+                (current
+                  ? '<div class="slide-image-region-preview-shell" data-remove-region-video="' + region.id + '" role="button" tabindex="0" aria-label="Remove video">' +
+                      '<video class="slide-image-region-preview" src="' + escapeHtml(current) + '" muted playsinline preload="metadata"></video>' +
+                      '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
+                    '</div>'
+                  : '<div class="slide-image-region-preview slide-image-region-preview-empty">No video</div>') +
+              '</div>' +
+            '</div>' +
+          '</div>' +
+          '<input type="hidden" name="existing_region_video_' + region.id + '" value="' + escapeHtml(current) + '" />' +
+          '<input type="hidden" name="' + getRegionExistingVideoDurationName(region.id) + '" value="' + escapeHtml(currentDuration) + '" />' +
+        '</div>' +
+      '</div>';
+  }
+
   function renderTemplate() {
     templateSelectorLock.reset();
     clearImagePreviewUrls();
@@ -1367,6 +1977,9 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       if (region.region_type === 'image') {
         return renderImageRegion(region);
       }
+      if (region.region_type === 'video') {
+        return renderVideoRegion(region);
+      }
       if (region.region_type === 'webpage') {
         return renderWebpageRegion(region);
       }
@@ -1385,6 +1998,14 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       return renderTextRegion(region);
     }).join('') : '<div class="muted">This template has no regions.</div>';
 
+    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;
+      if (hidden && hidden.value) {
+        void syncVideoRegionDuration(card, hidden.value);
+      }
+    });
+
     templateFields.querySelectorAll('.ckeditor-holder').forEach(function (holder) {
       var regionId = holder.getAttribute('data-region-id');
       var source = holder.querySelector('.ckeditor-source');
@@ -1492,26 +2113,62 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       });
     });
 
-    templateFields.querySelectorAll('input[type="file"][name^="region_image_"]').forEach(function (input) {
+    templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]').forEach(function (input) {
       input.addEventListener('change', function () {
+        var mediaType = getRegionMediaTypeFromInput(input);
+        var regionId = input.name.replace(/^region_(?:image|video)_/, '');
+        var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+        var hidden = card && card.querySelector('input[type="hidden"][name="' + getRegionExistingMediaPrefix(mediaType) + regionId + '"]');
+        var file = input.files && input.files.length ? input.files[0] : null;
+
+        if (file && !isRegionMediaFileWithinLimit(file, mediaType)) {
+          if (input.dataset.previewUrl) {
+            URL.revokeObjectURL(input.dataset.previewUrl);
+            delete input.dataset.previewUrl;
+          }
+          input.value = '';
+          if (typeof window.showToast === 'function') {
+            window.showToast('File must be ' + getRegionMediaUploadLimitLabel(mediaType) + ' or smaller.', 'warning');
+          } else {
+            window.alert('File must be ' + getRegionMediaUploadLimitLabel(mediaType) + ' or smaller.');
+          }
+          renderRegionMediaPreview(card, hidden ? hidden.value : '');
+          return;
+        }
+
         if (input.dataset.previewUrl) {
           URL.revokeObjectURL(input.dataset.previewUrl);
           delete input.dataset.previewUrl;
         }
-        if (input.files && input.files.length) {
+        if (file) {
-          input.dataset.previewUrl = URL.createObjectURL(input.files[0]);
+          input.dataset.previewUrl = URL.createObjectURL(file);
         }
-        var regionId = input.name.replace(/^region_image_/, '');
+        renderRegionMediaPreview(card, input.dataset.previewUrl || (hidden ? hidden.value : ''));
-        var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
+        void syncVideoRegionDuration(card, input.dataset.previewUrl || (hidden ? hidden.value : ''));
-        var hidden = card && card.querySelector('input[type="hidden"][name="existing_region_image_' + regionId + '"]');
-        renderImageRegionPreview(card, input.dataset.previewUrl || (hidden ? hidden.value : ''));
         templateSelectorLock.markEdited();
         requestPreviewRender();
+        if (file) {
+          uploadRegionMediaFile(input, file).catch(function (error) {
+            if (input.dataset.previewUrl) {
+              URL.revokeObjectURL(input.dataset.previewUrl);
+              delete input.dataset.previewUrl;
+            }
+            input.value = '';
+            if (typeof showToast === 'function') {
+              showToast(error && error.message ? error.message : 'Unable to upload media.', 'danger');
+            } else {
+              window.alert(error && error.message ? error.message : 'Unable to upload media.');
+            }
+            renderRegionMediaPreview(card, hidden ? hidden.value : '');
+            void syncVideoRegionDuration(card, hidden ? hidden.value : '');
+            requestPreviewRender();
+          });
+        }
       });
     });
     templateFields.querySelectorAll('[data-region-upload-zone]').forEach(function (zone) {
       var regionId = zone.getAttribute('data-region-upload-zone');
-      var input = zone.querySelector('input[type="file"][name="region_image_' + regionId + '"]');
+      var input = zone.querySelector('input[type="file"]');
       if (!input) {
         return;
       }
@@ -1531,66 +2188,54 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
 
         var files = event.dataTransfer && event.dataTransfer.files ? event.dataTransfer.files : null;
         var file = files && files.length ? files[0] : null;
-        if (!file || !/^image\//i.test(file.type || '')) {
+        var card = zone.closest('[data-region-id]');
+        var mediaType = getRegionMediaType(card);
+        if (!file || !(mediaType === 'video' ? /^video\//i.test(file.type || '') : /^image\//i.test(file.type || ''))) {
           return;
         }
 
-        setRegionImageInputFile(input, file);
+        if (!isRegionMediaFileWithinLimit(file, mediaType)) {
+          rejectOversizeRegionMedia(input, file, mediaType);
+          return;
+        }
+
+        setRegionMediaInputFile(input, file);
       });
     });
-    templateFields.querySelectorAll('button[data-remove-region-image]').forEach(function (button) {
+    templateFields.querySelectorAll('[data-remove-region-image], [data-remove-region-video]').forEach(function (button) {
       button.addEventListener('click', function () {
-        var regionId = button.getAttribute('data-remove-region-image');
+        var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video');
         var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
-        var hidden = card && card.querySelector('input[type="hidden"][name="existing_region_image_' + regionId + '"]');
+        var mediaType = getRegionMediaType(card);
-        var input = card && card.querySelector('input[type="file"][name="region_image_' + regionId + '"]');
+        var hidden = card && card.querySelector('input[type="hidden"][name="' + getRegionExistingMediaPrefix(mediaType) + regionId + '"]');
+        var input = card && card.querySelector('input[type="file"][name="' + getRegionMediaPrefix(mediaType) + regionId + '"]');
+        var uploadPath = input ? String(input.dataset.uploadedPath || '').trim() : '';
 
         if (input && input.dataset.previewUrl) {
           URL.revokeObjectURL(input.dataset.previewUrl);
           delete input.dataset.previewUrl;
         }
+        if (input && input.dataset.uploadedNeedsCleanup === '1' && uploadPath) {
+          queueUploadCleanup([uploadPath]);
+        }
         if (input) {
           input.value = '';
+          delete input.dataset.uploadedPath;
+          delete input.dataset.uploadedNeedsCleanup;
         }
         if (hidden) {
           hidden.value = '';
         }
+        var durationHidden = card ? getRegionVideoDurationHiddenInput(regionId) : null;
+        if (durationHidden) {
+          durationHidden.value = '';
+        }
 
-        renderImageRegionPreview(card, '');
+        renderRegionMediaPreview(card, '');
         templateSelectorLock.markEdited();
         requestPreviewRender();
       });
     });
-    templateFields.querySelectorAll('.slide-image-region-preview-shell').forEach(function (shell) {
-      shell.addEventListener('click', function () {
-        var regionId = shell.getAttribute('data-remove-region-image');
-        var card = templateFields.querySelector('[data-region-id="' + regionId + '"]');
-        var hidden = card && card.querySelector('input[type="hidden"][name="existing_region_image_' + regionId + '"]');
-        var input = card && card.querySelector('input[type="file"][name="region_image_' + regionId + '"]');
-
-        if (input && input.dataset.previewUrl) {
-          URL.revokeObjectURL(input.dataset.previewUrl);
-          delete input.dataset.previewUrl;
-        }
-        if (input) {
-          input.value = '';
-        }
-        if (hidden) {
-          hidden.value = '';
-        }
-
-        renderImageRegionPreview(card, '');
-        templateSelectorLock.markEdited();
-        requestPreviewRender();
-      });
-
-      shell.addEventListener('keydown', function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          shell.click();
-        }
-      });
-    });
     templateFields.querySelectorAll('select[name^="region_rss_feed_id_"], input[name^="region_rss_item_number_"], select[name^="region_api_source_id_"], input[name^="region_api_item_number_"]').forEach(function (input) {
       input.addEventListener('input', function () {
         var regionId = input.name.replace(/^region_(?:rss_feed_id|rss_item_number|api_source_id|api_item_number)_/, '');
@@ -1656,6 +2301,9 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
     });
     submitting = true;
     try {
+      if (hasPendingRegionImageUpload()) {
+        throw new Error('Wait for the image upload to finish before saving.');
+      }
       await Promise.all(saves);
       var formData = new FormData(slideForm);
       if (event.submitter && event.submitter.name) {
@@ -1686,6 +2334,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
       if (isCreateForm) {
         try {
           if (response.url) {
+            clearPendingUploadCleanupPaths();
             window.location.replace(response.url);
             return;
           }
@@ -1711,6 +2360,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
 
       showToast(savedMessage || 'Saved slide.', 'success');
       slideForm.dataset.dirty = 'false';
+      clearPendingUploadCleanupPaths();
     } catch (error) {
       if (typeof showToast === 'function') {
         var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
@@ -1761,6 +2411,7 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
   window.addEventListener('resize', requestPreviewRender);
   window.addEventListener('resize', requestSidebarSync);
   window.addEventListener('beforeunload', function () {
+    queueUploadCleanup(getPendingUploadCleanupPaths());
     if (previewPopupWindow && !previewPopupWindow.closed) {
       previewPopupWindow.close();
     }

src/web/public/js/slides/slide-image-cropper.js

@@ -18,6 +18,8 @@
   var currentRegionAspectRatio = NaN;
   var currentRegionAspectRatioLabel = 'Region';
   var listenersAttached = false;
+  var uploadMaxBytes = 100 * 1024 * 1024;
+  var uploadMaxLabel = '100 MB';
 
   function getRegionId(input) {
     var match = String(input && input.name || '').match(/^region_image_(\d+)$/);
@@ -249,6 +251,19 @@
     input.files = dataTransfer.files;
   }
 
+  function rejectOversizeFile(input) {
+    if (!input) {
+      return;
+    }
+
+    if (typeof window.showToast === 'function') {
+      window.showToast('File must be ' + uploadMaxLabel + ' or smaller.', 'warning');
+    } else {
+      window.alert('File must be ' + uploadMaxLabel + ' or smaller.');
+    }
+    input.value = '';
+  }
+
   function finalizeCropFile(file) {
     if (!currentInput) {
       return;
@@ -357,6 +372,13 @@
       return;
     }
 
+    if (Number(file.size || 0) > uploadMaxBytes) {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      rejectOversizeFile(input);
+      return;
+    }
+
     if (!/^image\//i.test(file.type || '')) {
       input.value = '';
       return;

src/web/public/js/system-status.js

@@ -68,7 +68,12 @@
             if (typeof window.webHandleDashboardState === 'function') {
               window.webHandleDashboardState(payload.state);
             }
-            updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), 'Live player feed');
+            var screenCount = Array.isArray(payload.state && payload.state.screens) ? payload.state.screens.length : 0;
+            if (!screenCount) {
+              updateSidebarStatus('unknown', 'No screens configured');
+            } else {
+              updateSidebarStatus(Boolean(payload.state && payload.state.playerServiceConnected), 'Live player feed');
+            }
           }
         } catch (_error) {
           // Ignore malformed dashboard payloads.

src/web/public/js/table-sort.js

@@ -1,242 +0,0 @@
-(function () {
-  function getTableHeaderText(headerCell) {
-    return String(headerCell && headerCell.textContent ? headerCell.textContent : '').trim().toLowerCase();
-  }
-
-  function cellHasButtonContent(cell) {
-    return Boolean(cell && cell.querySelector && cell.querySelector('button, form, input, select, textarea'));
-  }
-
-  function getCellSortValue(cell) {
-    if (!cell) {
-      return '';
-    }
-    var sortValue = cell.getAttribute && cell.getAttribute('data-sort-value');
-    if (sortValue !== null && sortValue !== undefined && sortValue !== '') {
-      return String(sortValue).trim();
-    }
-    return String(cell.textContent || '').replace(/\s+/g, ' ').trim();
-  }
-
-  function getComparableSortValue(rawValue) {
-    var value = String(rawValue || '').trim();
-    if (!value) {
-      return { type: 'empty', value: '' };
-    }
-
-    var numericValue = Number(value.replace(/,/g, ''));
-    if (!Number.isNaN(numericValue) && value !== '') {
-      return { type: 'number', value: numericValue };
-    }
-
-    var dateValue = Date.parse(value);
-    if (!Number.isNaN(dateValue)) {
-      return { type: 'date', value: dateValue };
-    }
-
-    return { type: 'string', value: value.toLowerCase() };
-  }
-
-  function compareSortValues(leftValue, rightValue) {
-    if (leftValue.type === 'empty' && rightValue.type === 'empty') {
-      return 0;
-    }
-    if (leftValue.type === 'empty') {
-      return 1;
-    }
-    if (rightValue.type === 'empty') {
-      return -1;
-    }
-    if (leftValue.type === rightValue.type) {
-      if (leftValue.value < rightValue.value) {
-        return -1;
-      }
-      if (leftValue.value > rightValue.value) {
-        return 1;
-      }
-      return 0;
-    }
-    return String(leftValue.value).localeCompare(String(rightValue.value), undefined, { numeric: true, sensitivity: 'base' });
-  }
-
-  function getSortableTableState(table) {
-    if (!table._sortableState) {
-      table._sortableState = {
-        columnIndex: null,
-        direction: 'asc'
-      };
-    }
-    return table._sortableState;
-  }
-
-  function ensureSortableHeaderIndicator(headerCell) {
-    var indicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
-    if (indicator) {
-      return indicator;
-    }
-
-    indicator = document.createElement('i');
-    indicator.className = 'table-sort-indicator bi bi-arrow-down-up ms-1';
-    indicator.setAttribute('aria-hidden', 'true');
-    headerCell.appendChild(indicator);
-    return indicator;
-  }
-
-  function updateSortableHeaderIndicator(headerCell, isSortable, isActive, direction) {
-    if (!isSortable) {
-      var hiddenIndicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
-      if (hiddenIndicator) {
-        hiddenIndicator.style.display = 'none';
-      }
-      return;
-    }
-
-    var indicator = ensureSortableHeaderIndicator(headerCell);
-    indicator.style.display = '';
-    indicator.className = 'table-sort-indicator bi ms-1';
-
-    if (isActive && direction === 'desc') {
-      indicator.classList.add('bi-caret-down-fill');
-      return;
-    }
-
-    if (isActive && direction === 'asc') {
-      indicator.classList.add('bi-caret-up-fill');
-      return;
-    }
-
-    indicator.classList.add('bi-arrow-down-up');
-  }
-
-  function isSortableTableColumn(table, columnIndex) {
-    var headerCell = table.tHead && table.tHead.rows && table.tHead.rows.length ? table.tHead.rows[0].cells[columnIndex] : null;
-    if (!headerCell) {
-      return false;
-    }
-
-    if (headerCell.getAttribute && headerCell.getAttribute('data-sortable') === 'false') {
-      return false;
-    }
-
-    if (/actions?|buttons?/i.test(getTableHeaderText(headerCell))) {
-      return false;
-    }
-
-    var bodies = table.tBodies ? Array.prototype.slice.call(table.tBodies) : [];
-    for (var i = 0; i < bodies.length; i += 1) {
-      var rows = Array.prototype.slice.call(bodies[i].rows || []);
-      for (var j = 0; j < rows.length; j += 1) {
-        var cell = rows[j].cells ? rows[j].cells[columnIndex] : null;
-        if (cell && cellHasButtonContent(cell)) {
-          return false;
-        }
-      }
-    }
-
-    return true;
-  }
-
-  function updateSortableHeaderState(table) {
-    var state = getSortableTableState(table);
-    var headerCells = table.tHead && table.tHead.rows && table.tHead.rows.length ? Array.prototype.slice.call(table.tHead.rows[0].cells || []) : [];
-    headerCells.forEach(function (headerCell, index) {
-      if (!headerCell) {
-        return;
-      }
-      var sortable = isSortableTableColumn(table, index);
-      headerCell.classList.remove('sort-asc', 'sort-desc', 'sortable', 'unsortable');
-      headerCell.removeAttribute('aria-sort');
-      headerCell.removeAttribute('role');
-      headerCell.removeAttribute('tabindex');
-
-      if (sortable) {
-        headerCell.classList.add('sortable');
-        updateSortableHeaderIndicator(headerCell, true, state.columnIndex === index, state.direction);
-        headerCell.setAttribute('role', 'button');
-        headerCell.setAttribute('tabindex', '0');
-        if (state.columnIndex === index) {
-          headerCell.classList.add(state.direction === 'desc' ? 'sort-desc' : 'sort-asc');
-          headerCell.setAttribute('aria-sort', state.direction === 'desc' ? 'descending' : 'ascending');
-        } else {
-          headerCell.setAttribute('aria-sort', 'none');
-        }
-      } else {
-        headerCell.classList.add('unsortable');
-        updateSortableHeaderIndicator(headerCell, false);
-      }
-    });
-  }
-
-  function sortTable(table, columnIndex, direction) {
-    var tbody = table.tBodies && table.tBodies[0] ? table.tBodies[0] : null;
-    if (!tbody) {
-      return;
-    }
-
-    var rows = Array.prototype.slice.call(tbody.rows || []);
-    if (!rows.length) {
-      return;
-    }
-
-    var multiplier = direction === 'desc' ? -1 : 1;
-    rows.sort(function (leftRow, rightRow) {
-      var leftCell = leftRow.cells ? leftRow.cells[columnIndex] : null;
-      var rightCell = rightRow.cells ? rightRow.cells[columnIndex] : null;
-      var leftComparable = getComparableSortValue(getCellSortValue(leftCell));
-      var rightComparable = getComparableSortValue(getCellSortValue(rightCell));
-      return compareSortValues(leftComparable, rightComparable) * multiplier;
-    });
-
-    rows.forEach(function (row) {
-      tbody.appendChild(row);
-    });
-  }
-
-  function applyTableSort(table) {
-    var state = getSortableTableState(table);
-    if (state.columnIndex === null || state.columnIndex === undefined) {
-      return;
-    }
-    sortTable(table, state.columnIndex, state.direction);
-    updateSortableHeaderState(table);
-  }
-
-  function initSortableTables() {
-    var tables = Array.prototype.slice.call(document.querySelectorAll('table'));
-    tables.forEach(function (table) {
-      var headerRow = table.tHead && table.tHead.rows && table.tHead.rows.length ? table.tHead.rows[0] : null;
-      if (!headerRow) {
-        return;
-      }
-
-      Array.prototype.forEach.call(headerRow.cells, function (headerCell, index) {
-        if (!isSortableTableColumn(table, index)) {
-          return;
-        }
-
-        ensureSortableHeaderIndicator(headerCell);
-
-        headerCell.addEventListener('click', function () {
-          var state = getSortableTableState(table);
-          var nextDirection = state.columnIndex === index && state.direction === 'asc' ? 'desc' : 'asc';
-          state.columnIndex = index;
-          state.direction = nextDirection;
-          sortTable(table, index, nextDirection);
-          updateSortableHeaderState(table);
-        });
-
-        headerCell.addEventListener('keydown', function (event) {
-          if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            headerCell.click();
-          }
-        });
-      });
-
-      updateSortableHeaderState(table);
-    });
-  }
-
-  window.applyTableSort = applyTableSort;
-  window.initSortableTables = initSortableTables;
-}());

src/web/public/js/table/table-search.js

@@ -0,0 +1,170 @@
+(function () {
+  function rebindTableContainer(container) {
+    if (!container) {
+      return;
+    }
+
+    if (typeof window.initSortableTables === 'function') {
+      window.initSortableTables(container);
+    }
+
+    if (typeof window.initTableSearches === 'function') {
+      window.initTableSearches(container);
+    }
+
+    if (typeof window.initLocalDateTimes === 'function') {
+      window.initLocalDateTimes(container);
+    }
+  }
+
+  function focusSearchInput(input) {
+    if (!input || !input.focus) {
+      return;
+    }
+
+    input.focus();
+
+    if (typeof input.setSelectionRange === 'function') {
+      var valueLength = String(input.value || '').length;
+      try {
+        input.setSelectionRange(valueLength, valueLength);
+      } catch (_error) {
+        // Ignore selection failures on unsupported input types.
+      }
+    }
+  }
+
+  function replaceTableResults(container, responseDocument) {
+    if (!container || !responseDocument || !responseDocument.querySelector) {
+      return false;
+    }
+
+    var currentTable = container.querySelector('[data-table-searchable]');
+    var nextContainer = responseDocument.querySelector('[data-table-search-container]') || responseDocument.querySelector('.card');
+    var nextTable = nextContainer ? nextContainer.querySelector('[data-table-searchable]') : null;
+    var currentFooter = container.querySelector('.card-footer');
+    var nextFooter = nextContainer ? nextContainer.querySelector('.card-footer') : null;
+
+    if (!currentTable || !nextTable) {
+      return false;
+    }
+
+    var currentBody = currentTable.tBodies && currentTable.tBodies[0] ? currentTable.tBodies[0] : null;
+    var nextBody = nextTable.tBodies && nextTable.tBodies[0] ? nextTable.tBodies[0] : null;
+
+    if (!currentBody || !nextBody) {
+      return false;
+    }
+
+    currentBody.outerHTML = nextBody.outerHTML;
+
+    if (currentFooter && nextFooter) {
+      currentFooter.outerHTML = nextFooter.outerHTML;
+    } else if (currentFooter && !nextFooter) {
+      currentFooter.parentNode.removeChild(currentFooter);
+    } else if (!currentFooter && nextFooter) {
+      currentTable.parentNode.appendChild(nextFooter.cloneNode(true));
+    }
+
+    return true;
+  }
+
+  function initTableSearches(root) {
+    var scope = root && root.querySelectorAll ? root : document;
+
+    Array.prototype.forEach.call(scope.querySelectorAll('[data-table-search]'), function (input) {
+      if (input.getAttribute('data-table-search-bound') === 'true') {
+        return;
+      }
+
+      input.setAttribute('data-table-search-bound', 'true');
+
+      var searchParam = String(input.getAttribute('data-table-search-param') || 'search').trim() || 'search';
+      var currentUrl = new URL(window.location.href);
+      var pendingSearchTimer = null;
+      var requestSequence = 0;
+      var container = input.closest('[data-table-search-container]') || input.closest('.card') || null;
+
+      input.value = String(currentUrl.searchParams.get(searchParam) || '').trim();
+
+      function updateSearch() {
+        var query = String(input.value || '').trim();
+        var nextUrl = new URL(window.location.href);
+
+        if (query) {
+          nextUrl.searchParams.set(searchParam, query);
+        } else {
+          nextUrl.searchParams.delete(searchParam);
+        }
+        nextUrl.searchParams.delete('page');
+
+        if (nextUrl.toString() === currentUrl.toString()) {
+          return;
+        }
+
+        requestSequence += 1;
+        var sequenceId = requestSequence;
+
+        fetch(nextUrl.toString(), {
+          method: 'GET',
+          headers: {
+            'Accept': 'text/html, application/xhtml+xml',
+            'X-Requested-With': 'XMLHttpRequest'
+          },
+          credentials: 'same-origin',
+          cache: 'no-store'
+        }).then(function (response) {
+          if (!response.ok) {
+            throw new Error('Unable to load search results.');
+          }
+          return response.text();
+        }).then(function (text) {
+          if (sequenceId !== requestSequence) {
+            return;
+          }
+
+          var responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
+
+          if (window.history && window.history.replaceState) {
+            window.history.replaceState({}, document.title, nextUrl.pathname + nextUrl.search + nextUrl.hash);
+          }
+
+          if (replaceTableResults(container, responseDocument)) {
+            currentUrl = nextUrl;
+            rebindTableContainer(container || document);
+            focusSearchInput(input);
+          }
+        }).catch(function () {
+          window.location.assign(nextUrl.toString());
+        });
+      }
+
+      function scheduleSearchUpdate() {
+        if (pendingSearchTimer) {
+          window.clearTimeout(pendingSearchTimer);
+        }
+        pendingSearchTimer = window.setTimeout(function () {
+          pendingSearchTimer = null;
+          updateSearch();
+        }, 300);
+      }
+
+      input.addEventListener('input', scheduleSearchUpdate);
+      input.addEventListener('search', scheduleSearchUpdate);
+      input.addEventListener('change', updateSearch);
+      input.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          if (pendingSearchTimer) {
+            window.clearTimeout(pendingSearchTimer);
+            pendingSearchTimer = null;
+          }
+          updateSearch();
+        }
+      });
+    });
+  }
+
+  window.initTableSearches = initTableSearches;
+  window.replaceTableResults = replaceTableResults;
+}());

src/web/public/js/table/table-sort.js

@@ -0,0 +1,197 @@
+(function () {
+  function getTableSortState(table) {
+    if (!table._tableSortState) {
+      table._tableSortState = {
+        sortKey: '',
+        direction: 'asc'
+      };
+    }
+    return table._tableSortState;
+  }
+
+  function ensureSortableHeaderIndicator(headerCell) {
+    var indicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
+    if (indicator) {
+      return indicator;
+    }
+
+    indicator = document.createElement('i');
+    indicator.className = 'table-sort-indicator bi bi-arrow-down-up ms-1';
+    indicator.setAttribute('aria-hidden', 'true');
+    headerCell.appendChild(indicator);
+    return indicator;
+  }
+
+  function updateSortableHeaderState(table) {
+    var state = getTableSortState(table);
+    var currentUrl = new URL(window.location.href);
+    var activeSortKey = String(currentUrl.searchParams.get('sort') || '').trim();
+    var activeDirection = String(currentUrl.searchParams.get('direction') || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+    var headerCells = table.tHead && table.tHead.rows && table.tHead.rows.length ? Array.prototype.slice.call(table.tHead.rows[0].cells || []) : [];
+
+    state.sortKey = activeSortKey;
+    state.direction = activeDirection;
+
+    headerCells.forEach(function (headerCell) {
+      if (!headerCell) {
+        return;
+      }
+
+      var sortKey = String(headerCell.getAttribute && headerCell.getAttribute('data-table-sort-key') || '').trim();
+      var sortable = Boolean(sortKey) && String(headerCell.getAttribute('data-sortable') || '').toLowerCase() !== 'false';
+
+      headerCell.classList.remove('sort-asc', 'sort-desc', 'sortable', 'unsortable');
+      headerCell.removeAttribute('aria-sort');
+
+      if (!sortable) {
+        headerCell.classList.add('unsortable');
+        var hiddenIndicator = headerCell.querySelector && headerCell.querySelector('.table-sort-indicator');
+        if (hiddenIndicator) {
+          hiddenIndicator.style.display = 'none';
+        }
+        return;
+      }
+
+      var indicator = ensureSortableHeaderIndicator(headerCell);
+      indicator.style.display = '';
+      indicator.className = 'table-sort-indicator bi ms-1';
+      headerCell.classList.add('sortable');
+      headerCell.setAttribute('role', 'button');
+      headerCell.setAttribute('tabindex', '0');
+
+      if (sortKey === activeSortKey) {
+        headerCell.classList.add(activeDirection === 'desc' ? 'sort-desc' : 'sort-asc');
+        headerCell.setAttribute('aria-sort', activeDirection === 'desc' ? 'descending' : 'ascending');
+        if (activeDirection === 'desc') {
+          indicator.classList.add('bi-caret-down-fill');
+        } else {
+          indicator.classList.add('bi-caret-up-fill');
+        }
+        return;
+      }
+
+      headerCell.setAttribute('aria-sort', 'none');
+      indicator.classList.add('bi-arrow-down-up');
+    });
+  }
+
+  function buildSortedUrl(sortKey) {
+    var currentUrl = new URL(window.location.href);
+    var nextUrl = new URL(window.location.href);
+    var currentSortKey = String(currentUrl.searchParams.get('sort') || '').trim();
+    var currentDirection = String(currentUrl.searchParams.get('direction') || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+
+    if (currentSortKey === sortKey) {
+      nextUrl.searchParams.set('direction', currentDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      nextUrl.searchParams.set('sort', sortKey);
+      nextUrl.searchParams.set('direction', 'asc');
+    }
+
+    nextUrl.searchParams.delete('page');
+    return nextUrl;
+  }
+
+  function updateUrlState(nextUrl) {
+    if (window.history && window.history.replaceState) {
+      window.history.replaceState({}, document.title, nextUrl.pathname + nextUrl.search + nextUrl.hash);
+    }
+  }
+
+  function refreshSortedTable(table, nextUrl, requestSequence, sequenceId) {
+    var container = table ? (table.closest('[data-table-search-container]') || table.closest('.card') || null) : null;
+
+    fetch(nextUrl.toString(), {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/html, application/xhtml+xml',
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+      credentials: 'same-origin',
+      cache: 'no-store'
+    }).then(function (response) {
+      if (!response.ok) {
+        throw new Error('Unable to load sorted results.');
+      }
+      return response.text();
+    }).then(function (text) {
+      if (sequenceId !== requestSequence.value) {
+        return;
+      }
+
+      var responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
+      updateUrlState(nextUrl);
+
+      if (window.replaceTableResults && replaceTableResults(container, responseDocument)) {
+        if (typeof window.initSortableTables === 'function') {
+          window.initSortableTables(container || document);
+        }
+        if (typeof window.initTableSearches === 'function') {
+          window.initTableSearches(container || document);
+        }
+        if (typeof window.initLocalDateTimes === 'function') {
+          window.initLocalDateTimes(container || document);
+        }
+      }
+    }).catch(function () {
+      window.location.assign(nextUrl.toString());
+    });
+  }
+
+  function initSortableTables(root) {
+    var scope = root && root.querySelectorAll ? root : document;
+
+    Array.prototype.forEach.call(scope.querySelectorAll('table[data-table-searchable]'), function (table) {
+      var headerRow = table.tHead && table.tHead.rows && table.tHead.rows.length ? table.tHead.rows[0] : null;
+      if (!headerRow) {
+        return;
+      }
+
+      if (table.getAttribute('data-table-sort-bound') === 'true') {
+        updateSortableHeaderState(table);
+        return;
+      }
+
+      table.setAttribute('data-table-sort-bound', 'true');
+      var requestSequence = { value: 0 };
+
+      Array.prototype.forEach.call(headerRow.cells, function (headerCell) {
+        if (!headerCell) {
+          return;
+        }
+
+        var sortKey = String(headerCell.getAttribute && headerCell.getAttribute('data-table-sort-key') || '').trim();
+        var isSortable = Boolean(sortKey) && String(headerCell.getAttribute('data-sortable') || '').toLowerCase() !== 'false';
+        if (!isSortable) {
+          return;
+        }
+
+        if (headerCell.getAttribute('data-table-sort-bound') === 'true') {
+          return;
+        }
+
+        headerCell.setAttribute('data-table-sort-bound', 'true');
+        ensureSortableHeaderIndicator(headerCell);
+
+        headerCell.addEventListener('click', function () {
+          var nextUrl = buildSortedUrl(sortKey);
+          requestSequence.value += 1;
+          var sequenceId = requestSequence.value;
+          refreshSortedTable(table, nextUrl, requestSequence, sequenceId);
+        });
+
+        headerCell.addEventListener('keydown', function (event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            headerCell.click();
+          }
+        });
+      });
+
+      updateSortableHeaderState(table);
+    });
+  }
+
+  window.initSortableTables = initSortableTables;
+  initSortableTables();
+}());

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

@@ -1,606 +0,0 @@
-(function () {
-  var dataElement = document.getElementById('template-editor-data');
-  if (!dataElement) {
-    return;
-  }
-
-  var utils = window.templateDesignerUtils || {};
-
-  var templateData = {};
-  try {
-    templateData = JSON.parse(dataElement.getAttribute('data-json') || dataElement.textContent || '{}') || {};
-  } catch (_error) {
-    templateData = {};
-  }
-
-  var existingRegions = Array.isArray(templateData.regions)
-    ? templateData.regions
-    : (Array.isArray(templateData) ? templateData : []);
-  var stage = document.getElementById('designer-stage');
-  var overlay = document.getElementById('designer-overlay');
-  var regionList = document.getElementById('region-list');
-  var regionSelect = document.getElementById('region-select');
-  var canvasSizeSelect = document.getElementById('canvas-size-select');
-  var canvasSizeIdInput = document.getElementById('canvas-size-id');
-  var canvasSizeSummary = document.getElementById('canvas-size-summary');
-  var canvasWidthInput = document.getElementById('canvas-width');
-  var canvasHeightInput = document.getElementById('canvas-height');
-  var backgroundInput = document.getElementById('background-image');
-  var backgroundColorInput = document.getElementById('background-color');
-  var backgroundPreview = document.getElementById('background-preview');
-  var backgroundEmpty = document.getElementById('background-empty');
-  var removeBackgroundButton = document.getElementById('remove-background-image');
-  var removeBackgroundFlag = document.getElementById('remove-background-image-flag');
-  var addRegionButton = document.getElementById('add-region-button');
-  var regionAddModal = document.getElementById('region-add-modal');
-  var regionCardTemplate = document.getElementById('region-card-template');
-  var regionsJsonInput = document.getElementById('regions-json');
-  var templateForm = document.getElementById('template-form');
-  var draft = null;
-  var selectedIndex = -1;
-  var overlayRenderFrame = 0;
-
-  function escapeHtml(value) {
-    return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
-  }
-
-  function valueOrDefault(value, fallback) {
-    return utils.valueOrDefault ? utils.valueOrDefault(value, fallback) : (value === undefined || value === null || value === '' ? fallback : value);
-  }
-
-  function getCanvasSize() {
-    return {
-      width: Math.max(1, Number(canvasWidthInput.value || 1920)),
-      height: Math.max(1, Number(canvasHeightInput.value || 1080))
-    };
-  }
-
-  function clamp(value, min, max) {
-    return utils.clamp ? utils.clamp(value, min, max) : Math.max(min, Math.min(max, value));
-  }
-
-  function getCards() {
-    return Array.prototype.slice.call(regionList.querySelectorAll('.region-item'));
-  }
-
-  function cardAt(index) {
-    return getCards()[index] || null;
-  }
-
-  function getRegionName(card) {
-    return utils.getRegionName ? utils.getRegionName(card) : String(card.querySelector('[name="region_name[]"]').value || '').trim();
-  }
-
-  function syncRegionIdentity(card, value) {
-    if (utils.syncRegionIdentity) {
-      utils.syncRegionIdentity(card, value);
-      return;
-    }
-    var next = String(value || '').trim();
-    card.querySelector('[name="region_name[]"]').value = next;
-    card.querySelector('[name="region_key[]"]').value = next;
-    card.querySelector('[name="region_label[]"]').value = next;
-  }
-
-  function validateRegionNames() {
-    var cards = getCards();
-    var names = {};
-    var hasDuplicate = false;
-
-    cards.forEach(function (card) {
-      var input = card.querySelector('[name="region_name[]"]');
-      if (!input) {
-        return;
-      }
-
-      var normalized = String(input.value || '').trim().toLowerCase();
-      if (!normalized) {
-        input.setCustomValidity('Region name is required.');
-        return;
-      }
-
-      if (!names[normalized]) {
-        names[normalized] = [];
-      }
-      names[normalized].push(input);
-    });
-
-    Object.keys(names).forEach(function (key) {
-      var inputs = names[key];
-      if (inputs.length > 1) {
-        hasDuplicate = true;
-        inputs.forEach(function (input) {
-          input.setCustomValidity('Region names must be unique on this template.');
-        });
-      } else {
-        inputs[0].setCustomValidity('');
-      }
-    });
-
-    return !hasDuplicate;
-  }
-
-  function readCard(card) {
-    return utils.readCard ? utils.readCard(card) : {
-      region_key: getRegionName(card),
-      label: getRegionName(card),
-      region_type: card.querySelector('[name="region_type[]"]').value,
-      font_family: card.querySelector('[name="font_family[]"]').value,
-      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),
-      height: Number(card.querySelector('[name="region_height[]"]').value || 0),
-      z_index: Number(card.querySelector('[name="region_z[]"]').value || 0)
-    };
-  }
-
-  function writeCard(card, values) {
-    if (utils.writeCard) {
-      utils.writeCard(card, values);
-      return;
-    }
-    if (values.region_name !== undefined) {
-      syncRegionIdentity(card, values.region_name);
-    } else if (values.region_key !== undefined) {
-      syncRegionIdentity(card, values.region_key);
-    } else if (values.label !== undefined) {
-      syncRegionIdentity(card, values.label);
-    }
-    if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
-    if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
-    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); }
-    if (values.height !== undefined) { card.querySelector('[name="region_height[]"]').value = Math.round(values.height); }
-    if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.round(values.z_index); }
-  }
-
-  function getOverlayRect() {
-    return utils.getOverlayRect ? utils.getOverlayRect(overlay) : overlay.getBoundingClientRect();
-  }
-
-  function toCanvasPoint(event) {
-    return utils.toCanvasPoint ? utils.toCanvasPoint(event, overlay, getCanvasSize()) : {
-      x: 0,
-      y: 0
-    };
-  }
-
-  function canvasRectToPixels(region) {
-    return utils.canvasRectToPixels ? utils.canvasRectToPixels(region, overlay, getCanvasSize()) : {
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0
-    };
-  }
-
-  function updateAspectRatio() {
-    var size = getCanvasSize();
-    stage.style.aspectRatio = size.width + ' / ' + size.height;
-  }
-
-  function updateCanvasSizeSummary() {
-    var option = canvasSizeSelect.options[canvasSizeSelect.selectedIndex];
-    canvasSizeSummary.textContent = option ? option.textContent : '';
-  }
-
-  function updateCanvasSizeLock() {
-    var lockOnExistingTemplate = canvasSizeSelect.dataset.lockOnExistingTemplate === 'true';
-    var locked = lockOnExistingTemplate && getCards().length > 0;
-    canvasSizeSelect.disabled = locked;
-    canvasSizeSummary.classList.toggle('is-locked', locked);
-  }
-
-  function syncCanvasSizeSelection() {
-    var option = canvasSizeSelect.options[canvasSizeSelect.selectedIndex];
-    if (!option) {
-      return;
-    }
-    if (canvasSizeIdInput) {
-      canvasSizeIdInput.value = option.value;
-    }
-    canvasWidthInput.value = Math.max(1, Number(option.dataset.width || canvasWidthInput.value || 1920));
-    canvasHeightInput.value = Math.max(1, Number(option.dataset.height || canvasHeightInput.value || 1080));
-    updateAspectRatio();
-    updateCanvasSizeSummary();
-  }
-
-  function updateBackgroundPreview(file) {
-    if (!file) {
-      return;
-    }
-    if (removeBackgroundFlag) {
-      removeBackgroundFlag.checked = false;
-    }
-    var reader = new FileReader();
-    reader.onload = function () {
-      backgroundPreview.src = reader.result;
-      backgroundPreview.style.display = 'block';
-      backgroundEmpty.style.display = 'none';
-    };
-    reader.readAsDataURL(file);
-  }
-
-  function updateStageBackgroundColor() {
-    if (!stage) {
-      return;
-    }
-    stage.style.backgroundColor = backgroundColorInput && backgroundColorInput.value ? backgroundColorInput.value : '#111111';
-  }
-
-  function getRegionChipLabel(regionType) {
-    return regionType === 'image' ? 'Image' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : regionType === 'rss' ? 'RSS' : 'Text';
-  }
-
-  function populateRegionCard(card, region) {
-    var chip = card.querySelector('[data-region-chip]');
-    var title = card.querySelector('[data-region-title]');
-    var nameInput = card.querySelector('[name="region_name[]"]');
-    var fontFamilyInput = card.querySelector('[name="font_family[]"]');
-    var regionTypeInput = card.querySelector('[name="region_type[]"]');
-    var regionKeyInput = card.querySelector('[name="region_key[]"]');
-    var regionLabelInput = card.querySelector('[name="region_label[]"]');
-
-    if (title) {
-      title.textContent = region.label || region.region_key || 'Region';
-    }
-    if (chip) {
-      chip.textContent = getRegionChipLabel(region.region_type);
-    }
-    if (nameInput) {
-      nameInput.value = region.region_key || region.label || '';
-    }
-    if (fontFamilyInput) {
-      fontFamilyInput.value = region.region_type === 'image' ? '' : (region.font_family || 'Arial');
-    }
-    if (regionTypeInput) {
-      regionTypeInput.value = region.region_type || 'text';
-    }
-    if (regionKeyInput) {
-      regionKeyInput.value = region.region_key || region.label || '';
-    }
-    if (regionLabelInput) {
-      regionLabelInput.value = region.label || region.region_key || '';
-    }
-    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);
-    card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300);
-    card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120);
-  }
-
-  function updateRegionLabel(card) {
-    var label = getRegionName(card) || 'Region';
-    var cards = getCards();
-    var index = cards.indexOf(card);
-    var title = card.querySelector('.template-field-head strong');
-    if (title) {
-      title.textContent = label;
-    }
-    if (index >= 0 && regionSelect.options[index]) {
-      regionSelect.options[index].textContent = label;
-    }
-  }
-
-  function makeRegionCard(region) {
-    var card;
-    if (regionCardTemplate && regionCardTemplate.content) {
-      card = regionCardTemplate.content.firstElementChild.cloneNode(true);
-    } else {
-      card = document.createElement('div');
-      card.className = 'card card-outline card-secondary admin-form-card region-item mb-3';
-    }
-    populateRegionCard(card, region);
-    var nameInput = card.querySelector('[name="region_name[]"]');
-    nameInput.addEventListener('input', function () {
-      syncRegionIdentity(card, nameInput.value);
-      updateRegionLabel(card);
-      validateRegionNames();
-      renderRegionSidebar();
-      renderOverlay();
-    });
-    card.addEventListener('click', function (event) {
-      if (event.target && event.target.classList && event.target.classList.contains('remove-region')) {
-        return;
-      }
-      setSelected(getCards().indexOf(card));
-    });
-    card.querySelector('.remove-region').addEventListener('click', function (event) {
-      event.preventDefault();
-      card.remove();
-      if (!getCards().length) {
-        selectedIndex = -1;
-      } else if (selectedIndex >= getCards().length) {
-        selectedIndex = getCards().length - 1;
-      }
-      renderRegionSidebar();
-      renderOverlay();
-    });
-    return card;
-  }
-
-  function renderRegionList(initialRegions) {
-    regionList.innerHTML = '';
-    initialRegions.forEach(function (region) {
-      regionList.appendChild(makeRegionCard(region));
-    });
-  }
-
-  function renderRegionSidebar() {
-    var cards = getCards();
-    regionSelect.innerHTML = '';
-    if (!cards.length) {
-      regionSelect.disabled = true;
-      regionList.innerHTML = '';
-      updateCanvasSizeLock();
-      return;
-    }
-    regionSelect.disabled = false;
-    if (selectedIndex < 0 || selectedIndex >= cards.length) {
-      selectedIndex = 0;
-    }
-    cards.forEach(function (card, index) {
-      var option = document.createElement('option');
-      option.value = String(index);
-      option.textContent = getRegionName(card) || ('Region ' + (index + 1));
-      if (index === selectedIndex) {
-        option.selected = true;
-      }
-      regionSelect.appendChild(option);
-      card.hidden = index !== selectedIndex;
-    });
-    regionSelect.value = String(selectedIndex);
-    updateCanvasSizeLock();
-    validateRegionNames();
-  }
-
-  function renderOverlay() {
-    var cards = getCards();
-    var selectedCard = selectedIndex >= 0 ? cards[selectedIndex] : null;
-    var selectedNow = selectedCard ? cards.indexOf(selectedCard) : -1;
-    var regions = cards.map(readCard);
-    regionsJsonInput.value = JSON.stringify(regions);
-    overlay.innerHTML = regions.map(function (region, index) {
-      var box = canvasRectToPixels(region);
-      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>';
-    }).join('');
-    if (draft) {
-      var rect = getOverlayRect();
-      var size = getCanvasSize();
-      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>';
-    }
-  }
-
-  function requestOverlayRender() {
-    if (overlayRenderFrame) {
-      return;
-    }
-
-    overlayRenderFrame = window.requestAnimationFrame(function () {
-      overlayRenderFrame = 0;
-      renderOverlay();
-    });
-  }
-
-  function render() {
-    updateAspectRatio();
-    renderRegionSidebar();
-    renderOverlay();
-  }
-
-  function setSelected(index) {
-    var cards = getCards();
-    if (!cards.length) {
-      selectedIndex = -1;
-    } else if (index < 0) {
-      selectedIndex = 0;
-    } else {
-      selectedIndex = clamp(index, 0, cards.length - 1);
-    }
-    renderRegionSidebar();
-    renderOverlay();
-  }
-
-  function addRegion(region) {
-    var hint = regionList.querySelector('.muted');
-    if (hint) {
-      hint.remove();
-    }
-    regionList.appendChild(makeRegionCard(region));
-    setSelected(getCards().length - 1);
-  }
-
-  function openAddRegionModal() {
-    if (!regionAddModal || !window.bootstrap || !window.bootstrap.Modal) {
-      return;
-    }
-    window.bootstrap.Modal.getOrCreateInstance(regionAddModal).show();
-  }
-
-  function createDefaultRegion(type) {
-    var count = getCards().length + 1;
-    var name = 'region_' + count;
-    return {
-      region_key: name,
-      label: name,
-      region_type: type,
-      font_family: type === 'text' || type === 'html' ? 'Arial' : '',
-      x: 80,
-      y: 80,
-      width: type === 'image' || type === 'webpage' || type === 'html' ? 420 : 300,
-      height: type === 'image' || type === 'webpage' || type === 'html' ? 240 : 120,
-      z_index: 1
-    };
-  }
-
-  function clampRegion(region) {
-    var size = getCanvasSize();
-    var minSize = 12;
-    var x = clamp(region.x, 0, size.width - minSize);
-    var y = clamp(region.y, 0, size.height - minSize);
-    var width = Math.max(minSize, region.width);
-    var height = Math.max(minSize, region.height);
-    if (x + width > size.width) {
-      width = size.width - x;
-    }
-    if (y + height > size.height) {
-      height = size.height - y;
-    }
-    return { x: Math.round(x), y: Math.round(y), width: Math.round(Math.max(minSize, width)), height: Math.round(Math.max(minSize, height)) };
-  }
-
-  function startDraw(event) {
-    var start = toCanvasPoint(event);
-    draft = { start: start, end: start };
-    renderOverlay();
-    function moveHandler(moveEvent) {
-      draft.end = toCanvasPoint(moveEvent);
-      requestOverlayRender();
-    }
-    function upHandler(upEvent) {
-      draft.end = toCanvasPoint(upEvent);
-      var width = Math.abs(draft.end.x - draft.start.x);
-      var height = Math.abs(draft.end.y - draft.start.y);
-      if (width >= 8 && height >= 8) {
-        var region = clampRegion({ x: Math.min(draft.start.x, draft.end.x), y: Math.min(draft.start.y, draft.end.y), width: width, height: height });
-        addRegion({ region_key: 'region_' + (getCards().length + 1), label: 'Region ' + (getCards().length + 1), region_type: 'text', x: region.x, y: region.y, width: region.width, height: region.height, z_index: 1 });
-      }
-      draft = null;
-      requestOverlayRender();
-      document.removeEventListener('mousemove', moveHandler);
-      document.removeEventListener('mouseup', upHandler);
-    }
-    document.addEventListener('mousemove', moveHandler);
-    document.addEventListener('mouseup', upHandler);
-  }
-
-  function startMove(index, event) {
-    var startPoint = toCanvasPoint(event);
-    var startRegion = readCard(cardAt(index));
-    function moveHandler(moveEvent) {
-      var currentPoint = toCanvasPoint(moveEvent);
-      var dx = currentPoint.x - startPoint.x;
-      var dy = currentPoint.y - startPoint.y;
-      var next = clampRegion({ x: startRegion.x + dx, y: startRegion.y + dy, width: startRegion.width, height: startRegion.height });
-      writeCard(cardAt(index), { x: next.x, y: next.y });
-      requestOverlayRender();
-    }
-    function upHandler() {
-      document.removeEventListener('mousemove', moveHandler);
-      document.removeEventListener('mouseup', upHandler);
-    }
-    document.addEventListener('mousemove', moveHandler);
-    document.addEventListener('mouseup', upHandler);
-  }
-
-  function resizeFromHandle(index, dir, event) {
-    var startPoint = toCanvasPoint(event);
-    var startRegion = readCard(cardAt(index));
-    function moveHandler(moveEvent) {
-      var currentPoint = toCanvasPoint(moveEvent);
-      var dx = currentPoint.x - startPoint.x;
-      var dy = currentPoint.y - startPoint.y;
-      var next = { x: startRegion.x, y: startRegion.y, width: startRegion.width, height: startRegion.height };
-      if (dir.indexOf('w') !== -1) { next.x = startRegion.x + dx; next.width = startRegion.width - dx; }
-      if (dir.indexOf('e') !== -1) { next.width = startRegion.width + dx; }
-      if (dir.indexOf('n') !== -1) { next.y = startRegion.y + dy; next.height = startRegion.height - dy; }
-      if (dir.indexOf('s') !== -1) { next.height = startRegion.height + dy; }
-      if (next.width < 12) { if (dir.indexOf('w') !== -1) { next.x -= 12 - next.width; } next.width = 12; }
-      if (next.height < 12) { if (dir.indexOf('n') !== -1) { next.y -= 12 - next.height; } next.height = 12; }
-      next = clampRegion(next);
-      writeCard(cardAt(index), { x: next.x, y: next.y, width: next.width, height: next.height });
-      requestOverlayRender();
-    }
-    function upHandler() {
-      document.removeEventListener('mousemove', moveHandler);
-      document.removeEventListener('mouseup', upHandler);
-    }
-    document.addEventListener('mousemove', moveHandler);
-    document.addEventListener('mouseup', upHandler);
-  }
-
-  if (addRegionButton && regionAddModal) {
-    var addRegionTypeButtons = regionAddModal.querySelectorAll('[data-add-region-type]');
-    addRegionButton.addEventListener('click', function () {
-      openAddRegionModal();
-    });
-    Array.prototype.forEach.call(addRegionTypeButtons, function (button) {
-      button.addEventListener('click', function () {
-        var regionType = button.getAttribute('data-add-region-type');
-        addRegion(createDefaultRegion(regionType));
-        if (window.bootstrap && window.bootstrap.Modal) {
-          window.bootstrap.Modal.getOrCreateInstance(regionAddModal).hide();
-        }
-      });
-    });
-  }
-  backgroundInput.addEventListener('change', function () {
-    var file = backgroundInput.files && backgroundInput.files[0];
-    if (file) {
-      updateBackgroundPreview(file);
-    }
-  });
-  if (removeBackgroundButton && removeBackgroundFlag) {
-    removeBackgroundButton.addEventListener('click', function () {
-      removeBackgroundFlag.checked = true;
-      backgroundInput.value = '';
-      backgroundPreview.removeAttribute('src');
-      backgroundPreview.style.display = 'none';
-      backgroundEmpty.style.display = 'block';
-    });
-  }
-  if (backgroundColorInput) {
-    backgroundColorInput.addEventListener('input', updateStageBackgroundColor);
-  }
-  canvasSizeSelect.addEventListener('change', function () { syncCanvasSizeSelection(); render(); });
-  canvasWidthInput.addEventListener('input', render);
-  canvasHeightInput.addEventListener('input', render);
-  regionSelect.addEventListener('change', function () { setSelected(Number(regionSelect.value || 0)); });
-  overlay.addEventListener('mousedown', function (event) {
-    var rect = event.target.closest('.designer-rect');
-    if (rect) {
-      var index = Number(rect.getAttribute('data-index'));
-      var handle = event.target.closest('.resize-handle');
-      event.preventDefault();
-      setSelected(index);
-      if (handle) {
-        resizeFromHandle(index, handle.getAttribute('data-dir'), event);
-      } else {
-        startMove(index, event);
-      }
-      return;
-    }
-    if (event.target !== overlay && !event.target.classList.contains('designer-overlay')) {
-      return;
-    }
-    event.preventDefault();
-    setSelected(-1);
-    startDraw(event);
-  });
-  if (templateForm) {
-    templateForm.addEventListener('formdata', function (event) {
-      if (!validateRegionNames()) {
-        event.preventDefault();
-        return;
-      }
-      syncCanvasSizeSelection();
-      event.formData.set('regions_json', JSON.stringify(getCards().map(readCard)));
-    });
-
-    templateForm.addEventListener('submit', function () {
-      if (!validateRegionNames()) {
-        return;
-      }
-      syncCanvasSizeSelection();
-      regionsJsonInput.value = JSON.stringify(getCards().map(readCard));
-    });
-  }
-
-  renderRegionList(existingRegions);
-  syncCanvasSizeSelection();
-  updateStageBackgroundColor();
-  render();
-})();

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

@@ -44,7 +44,7 @@
 
   function getDefaultRegionSize(regionType, lockRatio) {
     var ratio = parseLockRatio(lockRatio);
-    var locked = regionType === 'image' || regionType === 'webpage' || regionType === 'html' || regionType === 'rtmp' || regionType === 'rss' || regionType === 'api';
+    var locked = regionType === 'image' || regionType === 'video' || regionType === 'webpage' || regionType === 'html' || regionType === 'rtmp' || regionType === 'rss' || regionType === 'api';
 
     if (ratio) {
       if (ratio.ratio >= 1) {

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

@@ -36,10 +36,26 @@
   var regionCardTemplate = document.getElementById('region-card-template');
   var regionsJsonInput = document.getElementById('regions-json');
   var templateForm = document.getElementById('template-form');
+  var templateRegionUsageElement = document.getElementById('template-region-usage');
+  var regionUsageSet = new Set();
   var draft = null;
   var selectedIndex = -1;
   var overlayRenderFrame = 0;
 
+  try {
+    var regionUsageData = JSON.parse((templateRegionUsageElement && templateRegionUsageElement.textContent) || '[]');
+    if (Array.isArray(regionUsageData)) {
+      regionUsageData.forEach(function (regionKey) {
+        var normalized = String(regionKey || '').trim();
+        if (normalized) {
+          regionUsageSet.add(normalized);
+        }
+      });
+    }
+  } catch (_error) {
+    regionUsageSet = new Set();
+  }
+
   function escapeHtml(value) {
     return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
   }
@@ -312,7 +328,7 @@
   }
 
   function getRegionChipLabel(regionType) {
-    return regionType === 'image' ? 'Image' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : regionType === 'rtmp' ? 'RTMP' : regionType === 'rss' ? 'RSS' : 'Text';
+    return regionType === 'image' ? 'Image' : regionType === 'video' ? 'Video' : regionType === 'webpage' ? 'Webpage' : regionType === 'html' ? 'HTML' : regionType === 'rtmp' ? 'RTMP' : regionType === 'rss' ? 'RSS' : 'Text';
   }
 
   function populateRegionCard(card, region) {
@@ -334,7 +350,7 @@
       nameInput.value = region.region_key || region.label || '';
     }
     if (fontFamilyInput) {
-      fontFamilyInput.value = region.region_type === 'image' || region.region_type === 'rtmp' ? '' : (region.font_family || 'Arial');
+      fontFamilyInput.value = region.region_type === 'image' || region.region_type === 'video' || region.region_type === 'rtmp' ? '' : (region.font_family || 'Arial');
     }
     if (regionTypeInput) {
       regionTypeInput.value = region.region_type || 'text';
@@ -357,6 +373,21 @@
     updateRegionLockBadge(card);
   }
 
+  function setRegionRemovalState(card) {
+    var removeButton = card.querySelector('[data-region-remove-button]');
+    if (!removeButton) {
+      return;
+    }
+    var regionKey = String(card.dataset.regionKey || getRegionName(card) || '').trim();
+    var regionDeletionLocked = regionUsageSet.has(regionKey);
+    removeButton.disabled = regionDeletionLocked;
+    if (regionDeletionLocked) {
+      removeButton.title = 'Regions cannot be deleted while this template is used by slides.';
+    } else {
+      removeButton.removeAttribute('title');
+    }
+  }
+
   function updateRegionLabel(card) {
     var label = getRegionName(card) || 'Region';
     var cards = getCards();
@@ -379,6 +410,8 @@
       card.className = 'card card-outline card-secondary admin-form-card region-item mb-3';
     }
     populateRegionCard(card, region);
+    card.dataset.regionKey = String(region.region_key || region.label || getRegionName(card) || '').trim();
+    setRegionRemovalState(card);
     var nameInput = card.querySelector('[name="region_name[]"]');
     var lockRatioInput = card.querySelector('[name="region_lock_ratio[]"]');
     var widthInput = card.querySelector('[name="region_width[]"]');
@@ -415,12 +448,12 @@
       });
     }
     card.addEventListener('click', function (event) {
-      if (event.target && event.target.classList && event.target.classList.contains('remove-region')) {
+      if (event.target && event.target.closest && event.target.closest('[data-region-remove-button]')) {
         return;
       }
       setSelected(getCards().indexOf(card));
     });
-    card.querySelector('.remove-region').addEventListener('click', function (event) {
+    card.querySelector('[data-region-remove-button]').addEventListener('click', function (event) {
       event.preventDefault();
       card.remove();
       if (!getCards().length) {
@@ -523,7 +556,9 @@
     if (hint) {
       hint.remove();
     }
-    regionList.appendChild(makeRegionCard(region));
+    var card = makeRegionCard(region);
+    setRegionRemovalState(card);
+    regionList.appendChild(card);
     setSelected(getCards().length - 1);
   }
 
@@ -600,8 +635,12 @@
       var currentPoint = toCanvasPoint(moveEvent);
       var dx = currentPoint.x - startPoint.x;
       var dy = currentPoint.y - startPoint.y;
-      var next = clampRegion({ x: startRegion.x + dx, y: startRegion.y + dy, width: startRegion.width, height: startRegion.height });
+      var size = getCanvasSize();
-      writeCard(cardAt(index), { x: next.x, y: next.y });
+      var maxX = Math.max(0, size.width - startRegion.width);
+      var maxY = Math.max(0, size.height - startRegion.height);
+      var nextX = clamp(startRegion.x + dx, 0, maxX);
+      var nextY = clamp(startRegion.y + dy, 0, maxY);
+      writeCard(cardAt(index), { x: nextX, y: nextY, width: startRegion.width, height: startRegion.height });
       requestOverlayRender();
     }
     function upHandler() {
@@ -617,6 +656,24 @@
     var startRegion = readCard(cardAt(index));
     var lockRatio = normalizeLockRatio(startRegion.lock_ratio);
     var aspect = lockRatio ? parseLockRatio(lockRatio) : null;
+    var canvasSize = getCanvasSize();
+    var minSize = 12;
+
+    function clampResizeDelta(dx, dy) {
+      if (dir.indexOf('w') !== -1) {
+        dx = clamp(dx, -startRegion.x, startRegion.width - minSize);
+      }
+      if (dir.indexOf('e') !== -1) {
+        dx = clamp(dx, minSize - startRegion.width, canvasSize.width - startRegion.x - startRegion.width);
+      }
+      if (dir.indexOf('n') !== -1) {
+        dy = clamp(dy, -startRegion.y, startRegion.height - minSize);
+      }
+      if (dir.indexOf('s') !== -1) {
+        dy = clamp(dy, minSize - startRegion.height, canvasSize.height - startRegion.y - startRegion.height);
+      }
+      return { dx: dx, dy: dy };
+    }
 
     function fitFromWidth(width) {
       var nextWidth = Math.max(12, Math.round(width));
@@ -638,6 +695,9 @@
       var currentPoint = toCanvasPoint(moveEvent);
       var dx = currentPoint.x - startPoint.x;
       var dy = currentPoint.y - startPoint.y;
+      var constrainedDelta = clampResizeDelta(dx, dy);
+      dx = constrainedDelta.dx;
+      dy = constrainedDelta.dy;
       var next = { x: startRegion.x, y: startRegion.y, width: startRegion.width, height: startRegion.height };
       if (aspect) {
         if (dir === 'e') {
@@ -748,7 +808,6 @@
     }
     event.preventDefault();
     setSelected(-1);
-    startDraw(event);
   });
   if (templateForm) {
     templateForm.addEventListener('formdata', function (event) {

src/web/public/js/theme-sidebar.js

@@ -1,118 +0,0 @@
-(function () {
-  var THEME_STORAGE_KEY = 'web-theme';
-
-  function getPreferredTheme() {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-
-  function getStoredTheme() {
-    try {
-      var storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
-      if (storedTheme === 'dark' || storedTheme === 'light') {
-        return storedTheme;
-      }
-    } catch (error) {
-      return null;
-    }
-    return null;
-  }
-
-  function setStoredTheme(theme) {
-    try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch (error) {
-      return;
-    }
-  }
-
-  function applyTheme(theme) {
-    var normalizedTheme = theme === 'dark' ? 'dark' : 'light';
-    var nextTheme = normalizedTheme === 'dark' ? 'light' : 'dark';
-    var nextThemeLabel = nextTheme === 'dark' ? 'Dark mode' : 'Light mode';
-
-    document.documentElement.dataset.bsTheme = normalizedTheme;
-    document.documentElement.style.colorScheme = normalizedTheme;
-
-    Array.prototype.forEach.call(document.querySelectorAll('[data-theme-toggle]'), function (toggleButton) {
-      var icon = toggleButton.querySelector('.theme-toggle__icon');
-      toggleButton.setAttribute('aria-pressed', normalizedTheme === 'dark' ? 'true' : 'false');
-      toggleButton.setAttribute('aria-label', 'Switch to ' + nextThemeLabel.toLowerCase());
-      if (icon) {
-        icon.classList.remove('theme-toggle__icon--moon', 'theme-toggle__icon--sun');
-        icon.classList.add(normalizedTheme === 'dark' ? 'theme-toggle__icon--sun' : 'theme-toggle__icon--moon');
-      }
-    });
-
-    return normalizedTheme;
-  }
-
-  function initThemeToggle() {
-    var toggleButtons = Array.prototype.slice.call(document.querySelectorAll('[data-theme-toggle]'));
-    var storedTheme = getStoredTheme();
-    var theme = storedTheme || getPreferredTheme();
-
-    applyTheme(theme);
-
-    if (!toggleButtons.length) {
-      return;
-    }
-
-    Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-      toggleButton.addEventListener('click', function () {
-        var nextTheme = document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark';
-        setStoredTheme(nextTheme);
-        applyTheme(nextTheme);
-      });
-    });
-  }
-
-  function initSidebarToggle() {
-    var body = document.body;
-    var toggleButtons = Array.prototype.slice.call(document.querySelectorAll('[data-sidebar-toggle]'));
-    var backdrop = document.querySelector('[data-sidebar-backdrop]');
-
-    if (!toggleButtons.length || !backdrop) {
-      return;
-    }
-
-    function setSidebarOpen(isOpen) {
-      body.classList.toggle('is-sidebar-open', isOpen);
-      Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-        toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-      });
-    }
-
-    function toggleSidebar() {
-      setSidebarOpen(!body.classList.contains('is-sidebar-open'));
-    }
-
-    Array.prototype.forEach.call(toggleButtons, function (toggleButton) {
-      toggleButton.addEventListener('click', function () {
-        toggleSidebar();
-      });
-    });
-
-    backdrop.addEventListener('click', function () {
-      setSidebarOpen(false);
-    });
-
-    document.addEventListener('keydown', function (event) {
-      if (event.key === 'Escape') {
-        setSidebarOpen(false);
-      }
-    });
-  }
-
-  window.getPreferredTheme = getPreferredTheme;
-  window.getStoredTheme = getStoredTheme;
-  window.setStoredTheme = setStoredTheme;
-  window.applyTheme = applyTheme;
-  window.initThemeToggle = initThemeToggle;
-  window.initSidebarToggle = initSidebarToggle;
-
-  initThemeToggle();
-  initSidebarToggle();
-}());

src/web/public/js/toast.js

@@ -1,4 +1,110 @@
 (function () {
+  function getToastTitle(variant) {
+    var textVariant = String(variant || '').trim().toLowerCase();
+    if (textVariant === 'danger') {
+      return 'Error';
+    }
+    if (textVariant === 'warning') {
+      return 'Warning';
+    }
+    if (textVariant === 'success') {
+      return 'Success';
+    }
+    return 'Pulse';
+  }
+
+  function getToastTimeLabel(createdAt) {
+    var timestamp = Number(createdAt);
+    if (!timestamp || Number.isNaN(timestamp)) {
+      return 'just now';
+    }
+
+    var elapsed = Date.now() - timestamp;
+    if (elapsed < 60 * 1000) {
+      return 'just now';
+    }
+
+    var minutes = Math.floor(elapsed / (60 * 1000));
+    if (minutes < 60) {
+      return minutes + ' min' + (minutes === 1 ? '' : 's') + ' ago';
+    }
+
+    var hours = Math.floor(minutes / 60);
+    if (hours < 24) {
+      return hours + ' hour' + (hours === 1 ? '' : 's') + ' ago';
+    }
+
+    var days = Math.floor(hours / 24);
+    if (days < 7) {
+      return days + ' day' + (days === 1 ? '' : 's') + ' ago';
+    }
+
+    return new Date(timestamp).toLocaleString();
+  }
+
+  function getToastButtonClass(variant) {
+    var textVariant = String(variant || '').trim().toLowerCase();
+    return textVariant === 'light' || textVariant === 'warning' ? 'btn-close' : 'btn-close-white';
+  }
+
+  function getToastIconClass(variant) {
+    var textVariant = String(variant || '').trim().toLowerCase();
+    if (textVariant === 'success') {
+      return 'bi-check-circle-fill';
+    }
+    if (textVariant === 'warning') {
+      return 'bi-exclamation-triangle-fill';
+    }
+    if (textVariant === 'danger') {
+      return 'bi-x-circle-fill';
+    }
+    if (textVariant === 'primary') {
+      return 'bi-bell-fill';
+    }
+    return 'bi-info-circle-fill';
+  }
+
+  function buildToastMarkup(title, timeLabel, buttonClass, iconClass) {
+    return '<div class="toast-header border-0">' +
+      '<i class="bi ' + iconClass + ' me-2"></i>' +
+      '<strong class="me-auto">' + title + '</strong>' +
+      '<small class="toast-time text-nowrap">' + timeLabel + '</small>' +
+      '<button type="button" class="btn-close ' + buttonClass + ' ms-2" data-bs-dismiss="toast" aria-label="Dismiss notification"></button>' +
+      '</div>' +
+      '<div class="toast-body"></div>';
+  }
+
+  function setToastHeader(toast, variant, createdAt) {
+    if (!toast) {
+      return;
+    }
+
+    var header = toast.querySelector('.toast-header');
+    var icon = toast.querySelector('.toast-header i');
+    var title = toast.querySelector('.toast-header .me-auto');
+    var time = toast.querySelector('.toast-time');
+    var closeButton = toast.querySelector('.toast-header .btn-close');
+    var nextVariant = getMessageVariant('', variant);
+
+    if (!header) {
+      return;
+    }
+
+    header.className = 'toast-header border-0 text-bg-' + nextVariant;
+    if (icon) {
+      icon.className = 'bi ' + getToastIconClass(nextVariant) + ' me-2';
+    }
+    if (title) {
+      title.textContent = getToastTitle(nextVariant);
+    }
+    if (time) {
+      time.textContent = getToastTimeLabel(createdAt);
+    }
+    if (closeButton) {
+      closeButton.className = 'btn-close ' + getToastButtonClass(nextVariant) + ' ms-2';
+    }
+  }
+
   function getBootstrapToast(toast) {
     if (!toast || !window.bootstrap || !window.bootstrap.Toast) {
       return null;
@@ -30,12 +136,7 @@
       return;
     }
 
-    var nextVariant = String(variant || 'info').trim().toLowerCase();
+    setToastHeader(toast, variant, toast.getAttribute('data-toast-created-at') || Date.now());
-    var variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-    variants.forEach(function (value) {
-      toast.classList.remove('text-bg-' + value);
-    });
-    toast.classList.add('text-bg-' + (variants.indexOf(nextVariant) === -1 ? 'info' : nextVariant));
   }
 
   function getMessageVariant(message, fallbackVariant) {
@@ -68,7 +169,9 @@
       }
       var nextVariant = getMessageVariant(text, variant);
       existingToast.setAttribute('data-toast-variant', nextVariant);
+      existingToast.setAttribute('data-toast-created-at', String(Date.now()));
       setToastVariant(existingToast, nextVariant);
+      setToastHeader(existingToast, nextVariant, Date.now());
       var existingInstance = getBootstrapToast(existingToast);
       if (existingInstance) {
         existingInstance.show();
@@ -77,18 +180,19 @@
     }
 
     var toast = document.createElement('div');
-  toast.className = 'toast align-items-center border-0';
+    toast.className = 'toast shadow-lg border-0';
     toast.id = 'app-toast';
     toast.setAttribute('role', 'status');
     toast.setAttribute('aria-live', 'polite');
     toast.setAttribute('aria-atomic', 'true');
     toast.setAttribute('data-bs-autohide', 'true');
     toast.setAttribute('data-bs-delay', '4000');
-    toast.innerHTML = '<div class="d-flex"><div class="toast-body"></div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Dismiss notification"></button></div>';
+    toast.setAttribute('data-toast-created-at', String(Date.now()));
     var toastVariant = getMessageVariant(text, variant);
     toast.setAttribute('data-toast-variant', toastVariant);
-    setToastVariant(toast, toastVariant);
+    toast.innerHTML = buildToastMarkup(getToastTitle(toastVariant), getToastTimeLabel(Date.now()), getToastButtonClass(toastVariant), getToastIconClass(toastVariant));
     toast.querySelector('.toast-body').textContent = text;
+    setToastVariant(toast, toastVariant);
 
     toast.addEventListener('hidden.bs.toast', function () {
       removeToast(toast);

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

@@ -0,0 +1,94 @@
+(function () {
+  function escapeHtml(value) {
+    return String(value ?? '')
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function formatDashboardDate(value) {
+    if (!value) {
+      return '';
+    }
+
+    var date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit'
+    }).format(date);
+  }
+
+  function getClientRowKey(client) {
+    return String(client && client.id ? client.id : client && client.clientId ? client.clientId : '').trim();
+  }
+
+  function getClientDisplayName(client) {
+    if (client && client.client_name) {
+      return String(client.client_name).trim();
+    }
+
+    var clientId = String(client && client.clientId ? client.clientId : '').trim();
+    if (clientId) {
+      return clientId;
+    }
+
+    return '';
+  }
+
+  function setButtonVariant(button, classesToRemove, classToAdd) {
+    if (!button) {
+      return;
+    }
+
+    if (button.classList) {
+      classesToRemove.forEach(function (className) {
+        button.classList.remove(className);
+      });
+      if (classToAdd) {
+        button.classList.add(classToAdd);
+      }
+      return;
+    }
+
+    var className = String(button.className || '');
+    classesToRemove.forEach(function (removeClass) {
+      className = className.replace(new RegExp('(^|\\s)' + removeClass + '(?=\\s|$)', 'g'), ' ');
+    });
+    if (classToAdd) {
+      className += ' ' + classToAdd;
+    }
+    button.className = className.replace(/\s+/g, ' ').trim();
+  }
+
+  function normalizeDisplayIp(value) {
+    var ip = String(value || '').trim();
+    if (!ip) {
+      return '';
+    }
+
+    if (ip.toLowerCase().indexOf('::ffff:') === 0) {
+      return ip.slice(7).trim();
+    }
+
+    return ip;
+  }
+
+  window.webUiHelpers = {
+    escapeHtml: escapeHtml,
+    formatDashboardDate: formatDashboardDate,
+    getClientRowKey: getClientRowKey,
+    getClientDisplayName: getClientDisplayName,
+    setButtonVariant: setButtonVariant,
+    normalizeDisplayIp: normalizeDisplayIp
+  };
+}());

src/web/routes/admin/account.js

@@ -20,12 +20,12 @@ module.exports = function registerAdminAccountRoutes(app, deps) {
         return res.status(400).send('Name is required.');
       }
 
-      if (await common.fetchDuplicateName(pool, 'users', name, req.currentUser.id)) {
+      if (await common.fetchDuplicateName(pool, 'a_users', name, req.currentUser.id)) {
         return res.redirect('/account?message=' + encodeURIComponent('That name already exists.'));
       }
 
       const actorId = getAuditUserId(req);
-      const [result] = await pool.query('UPDATE users SET name = ?, modified_by = ? WHERE id = ?', [name, actorId, req.currentUser.id]);
+      const [result] = await pool.query('UPDATE a_users SET name = ?, modified_by = ? WHERE id = ?', [name, actorId, req.currentUser.id]);
       if (!result.affectedRows) {
         return res.status(404).send('User not found.');
       }
@@ -42,7 +42,7 @@ module.exports = function registerAdminAccountRoutes(app, deps) {
       const newPassword = String(req.body.new_password || '');
       const confirmPassword = String(req.body.confirm_password || '');
 
-      const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM users WHERE id = ? LIMIT 1', [req.currentUser.id]);
+      const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM a_users WHERE id = ? LIMIT 1', [req.currentUser.id]);
       const user = rows[0] || null;
       if (!user) {
         return res.status(404).send('User not found.');
@@ -59,10 +59,10 @@ module.exports = function registerAdminAccountRoutes(app, deps) {
 
       const passwordRecord = hashPassword(newPassword);
       await pool.query(
-        'UPDATE users SET password_hash = ?, password_salt = ?, password_iterations = ?, modified_by = ? WHERE id = ?',
+        'UPDATE a_users SET password_hash = ?, password_salt = ?, password_iterations = ?, modified_by = ? WHERE id = ?',
         [passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, getAuditUserId(req), user.id]
       );
-      await pool.query('DELETE FROM auth_sessions WHERE user_id = ?', [user.id]);
+      await pool.query('DELETE FROM a_sessions WHERE user_id = ?', [user.id]);
 
       const token = await createUserSession(pool, user.id);
       setSessionCookie(res, token);

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

@@ -4,6 +4,7 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
   const getScreenConnections = deps.getScreenConnections;
   const isClientNameAvailable = deps.isClientNameAvailable;
   const withClientNameReservation = deps.withClientNameReservation;
+  const broadcastDashboardState = deps.broadcastDashboardState;
   const requirePermission = deps.requirePermission;
 
   app.post('/clients/:slug/commands', requirePermission('clients.allow'), async function (req, res, next) {
@@ -22,7 +23,7 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
         return res.status(400).json({ error: 'Command is required' });
       }
 
-      const [screenRows] = await pool.query('SELECT id, name, slug FROM screens WHERE slug = ?', [slug]);
+      const [screenRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ?', [slug]);
       if (!screenRows.length) {
         return res.status(404).json({ error: 'Screen not found' });
       }
@@ -39,7 +40,7 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
 
         const [currentRows] = await pool.query(
           `SELECT client_name
-           FROM player_onboarding_devices
+           FROM d_onboarding_devices
            WHERE device_id = ?
            LIMIT 1`,
           [deviceId]
@@ -65,7 +66,7 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
         return withClientNameReservation(pool, clientName, async function () {
           let liveConnections = [];
           try {
-            const [screenSlugs] = await pool.query('SELECT slug FROM screens ORDER BY slug ASC');
+            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') {
@@ -96,6 +97,10 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
               deviceId: deviceId || null
             }, connectionId || deviceId || undefined);
 
+            if (typeof broadcastDashboardState === 'function') {
+              await broadcastDashboardState();
+            }
+
             return res.json({
               screen: screenRows[0],
               screenSlug: slug,
@@ -109,8 +114,8 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
           }
 
           const [updateResult] = await pool.query(
-            `UPDATE player_onboarding_devices pod
+            `UPDATE d_onboarding_devices pod
-             JOIN screens s ON s.id = pod.screen_id
+             JOIN d_screens s ON s.id = pod.screen_id
              SET pod.client_name = ?, pod.modified_at = CURRENT_TIMESTAMP
              WHERE s.slug = ? AND pod.device_id = ?`,
             [clientName, slug, deviceId]
@@ -142,6 +147,10 @@ module.exports = function registerAdminScreenCommandRoutes(app, deps) {
         ? await forwardPlayerCommand(slug, commandPayload, connectionId)
         : await forwardPlayerCommand(slug, commandPayload);
 
+      if (typeof broadcastDashboardState === 'function') {
+        await broadcastDashboardState();
+      }
+
       return res.json(Object.assign({
         screen: screenRows[0],
         screenSlug: slug,

src/web/routes/admin/content.js

@@ -1,3 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
 module.exports = function registerAdminContentRoutes(app, deps) {
   const pool = deps.pool;
   const common = deps.common;
@@ -8,6 +11,7 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   const collectUploadReferencesFromSlide = deps.collectUploadReferencesFromSlide;
   const collectUploadReferencesFromTemplate = deps.collectUploadReferencesFromTemplate;
   const collectUploadReferencesFromPayload = deps.collectUploadReferencesFromPayload;
+  const removeUnusedUploadFiles = deps.removeUnusedUploadFiles;
   const syncPlaylistUploadsOnChange = deps.syncPlaylistUploadsOnChange;
   const getAuditUserId = deps.getAuditUserId;
   const redirectAfterSave = deps.redirectAfterSave;
@@ -18,14 +22,160 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   const getTemplateDeleteBlockMessage = deps.getTemplateDeleteBlockMessage;
   const getCanvasSizeDeleteBlockMessage = deps.getCanvasSizeDeleteBlockMessage;
   const requirePermission = deps.requirePermission;
+  const hasAnyPermission = deps.hasAnyPermission;
   const { buildPagination } = require('../../lib/pagination');
 
   const LIST_PAGE_SIZE = 10;
+  const IMAGE_UPLOAD_MAX_BYTES = 100 * 1024 * 1024;
+  const VIDEO_UPLOAD_MAX_BYTES = 1024 * 1024 * 1024;
 
-  if (!pool || !common || !pages || !upload || typeof fetchScreensBySlideId !== 'function' || typeof fetchScreensByTemplateId !== 'function' || typeof collectUploadReferencesFromSlide !== 'function' || typeof collectUploadReferencesFromTemplate !== 'function' || typeof collectUploadReferencesFromPayload !== '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') {
+  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('registerAdminContentRoutes requires the content route dependencies.');
   }
 
+  async function removeMediaFile(uploadPath) {
+    const normalizedPath = String(uploadPath || '').trim();
+    if (!normalizedPath || !normalizedPath.startsWith('/media/')) {
+      return;
+    }
+
+    const mediaRoot = path.dirname(deps.uploadDir);
+    const filePath = path.join(mediaRoot, normalizedPath.replace(/^\/+media\//, ''));
+
+    try {
+      await fs.promises.unlink(filePath);
+    } catch (error) {
+      if (!error || error.code !== 'ENOENT') {
+        throw error;
+      }
+    }
+  }
+
+  function requireSlideUploadPermission(req, res, next) {
+    if (!req.currentUser) {
+      return res.redirect('/login?message=' + encodeURIComponent('Please sign in to continue.'));
+    }
+
+    if (hasAnyPermission(req.currentUser, ['slides.create', 'slides.update'])) {
+      return next();
+    }
+
+    const error = new Error('You do not have permission to access this area.');
+    error.statusCode = 403;
+    error.expose = true;
+    next(error);
+  }
+
+  function getUploadedFileMediaType(file) {
+    const mimeType = String(file && file.mimetype || '').trim().toLowerCase();
+    const extension = path.extname(String(file && file.originalname || '')).toLowerCase();
+    if (mimeType.indexOf('video/') === 0 || ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.avi', '.mkv'].indexOf(extension) !== -1) {
+      return 'video';
+    }
+    if (mimeType.indexOf('image/') === 0 || ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.avif', '.tif', '.tiff'].indexOf(extension) !== -1) {
+      return 'image';
+    }
+    return null;
+  }
+
+  function getUploadedFileLimitBytes(file) {
+    return getUploadedFileMediaType(file) === 'video' ? VIDEO_UPLOAD_MAX_BYTES : IMAGE_UPLOAD_MAX_BYTES;
+  }
+
+  function getUploadedFileLimitLabel(file) {
+    return getUploadedFileMediaType(file) === 'video' ? '1 GB' : '100 MB';
+  }
+
+  async function removeUploadedFile(file) {
+    if (!file || !file.filename || !deps.uploadDir) {
+      return;
+    }
+
+    const filePath = path.join(deps.uploadDir, file.filename);
+    try {
+      await fs.promises.unlink(filePath);
+    } catch (_error) {
+      // Ignore cleanup failures.
+    }
+  }
+
+  async function validateUploadedFiles(files) {
+    const list = Array.isArray(files) ? files.filter(Boolean) : [];
+    for (let i = 0; i < list.length; i += 1) {
+      const file = list[i];
+      const mediaType = getUploadedFileMediaType(file);
+      if (!mediaType) {
+        await removeUploadedFile(file);
+        const error = new Error('Unsupported upload type.');
+        error.statusCode = 400;
+        error.expose = true;
+        throw error;
+      }
+
+      if (Number(file.size || 0) > getUploadedFileLimitBytes(file)) {
+        await removeUploadedFile(file);
+        const error = new Error('File must be ' + getUploadedFileLimitLabel(file) + ' or smaller.');
+        error.statusCode = 400;
+        error.expose = true;
+        throw error;
+      }
+    }
+  }
+
+  async function fetchTemplateSlideCount(templateId) {
+    const [rows] = await pool.query('SELECT COUNT(*) AS slide_count FROM c_slides WHERE template_id = ?', [templateId]);
+    return Number(rows[0] && rows[0].slide_count) || 0;
+  }
+
+  async function fetchTemplateRegionUsage(template) {
+    const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE template_id = ?', [template.id]);
+    const usage = new Set();
+    const regionKeys = new Set((Array.isArray(template && template.regions) ? template.regions : [])
+      .map((region) => String(region && region.region_key || '').trim())
+      .filter(Boolean));
+
+    if (!regionKeys.size || !slides.length) {
+      return [];
+    }
+
+    slides.forEach((slide) => {
+      const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(slide.content_json) : null;
+      if (!content || typeof content !== 'object') {
+        return;
+      }
+      regionKeys.forEach((regionKey) => {
+        if (Object.prototype.hasOwnProperty.call(content, regionKey)) {
+          usage.add(regionKey);
+        }
+      });
+    });
+
+    return Array.from(usage);
+  }
+
+  async function fetchSlidesByTemplateId(templateId) {
+    const [slides] = await pool.query('SELECT id, thumbnail_path FROM c_slides WHERE template_id = ? ORDER BY id ASC', [templateId]);
+    return slides;
+  }
+
+  function getRemovedTemplateRegionKeys(existingRegions, nextRegions) {
+    const nextKeys = new Set((Array.isArray(nextRegions) ? nextRegions : []).map((region) => String(region && region.region_key || '').trim()).filter(Boolean));
+    return (Array.isArray(existingRegions) ? existingRegions : [])
+      .map((region) => String(region && region.region_key || '').trim())
+      .filter((regionKey) => regionKey && !nextKeys.has(regionKey));
+  }
+
+  async function getTemplateRegionDeleteBlockMessage(template, nextRegions) {
+    const removedRegionKeys = getRemovedTemplateRegionKeys(template && template.regions ? template.regions : [], nextRegions);
+    if (!removedRegionKeys.length) {
+      return '';
+    }
+
+    const usedRegionKeys = Array.isArray(template && template.region_usage) ? template.region_usage : [];
+    const blockedKeys = removedRegionKeys.filter((regionKey) => usedRegionKeys.includes(regionKey));
+    return blockedKeys.length > 0 ? 'This region is still used by one or more slides.' : '';
+  }
+
   function queueSlideThumbnailRefresh(slideId, previousThumbnailPath) {
     if (!backgroundTaskQueue || typeof backgroundTaskQueue.enqueueTask !== 'function') {
       return Promise.resolve(null);
@@ -44,9 +194,26 @@ module.exports = function registerAdminContentRoutes(app, deps) {
     });
   }
 
+  function queueTemplateSlideThumbnailRefresh(templateId) {
+    if (!backgroundTaskQueue || typeof backgroundTaskQueue.enqueueTask !== 'function') {
+      return Promise.resolve(null);
+    }
+
+    return backgroundTaskQueue.enqueueTask({
+      key: 'template-slide-thumbnail:' + Number(templateId),
+      title: 'Refresh slide thumbnails',
+      category: 'slides',
+      taskType: 'template-slide-thumbnail-refresh',
+      payload: {
+        templateId: Number(templateId)
+      },
+      persist: true
+    });
+  }
+
   async function canvasSizeExists(width, height, ignoreId) {
     const params = [width, height];
-    let query = 'SELECT COUNT(*) AS count FROM canvas_sizes WHERE width = ? AND height = ?';
+    let query = 'SELECT COUNT(*) AS count FROM c_canvas_sizes WHERE width = ? AND height = ?';
     if (ignoreId) {
       query += ' AND id <> ?';
       params.push(ignoreId);
@@ -65,8 +232,8 @@ module.exports = function registerAdminContentRoutes(app, deps) {
 
     const [rows] = await pool.query(
       `SELECT s.slug, COUNT(ps.id) AS slide_count
-       FROM screens s
+      FROM d_screens s
-       LEFT JOIN playlist_slides ps ON ps.playlist_id = s.playlist_id
+      LEFT JOIN c_playlist_slides ps ON ps.playlist_id = s.playlist_id
        WHERE s.slug IN (?)
        GROUP BY s.id, s.slug`,
       [uniqueSlugs]
@@ -81,10 +248,13 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   app.get('/slides', requirePermission('slides.read'), async function (req, res, next) {
     try {
       const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-      const data = await common.fetchSlidesPage(pool, page, LIST_PAGE_SIZE);
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchSlidesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
       res.send(pages.renderSlidesPage({
         slides: data.slides || [],
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'slides', 'Slide pages')
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'slides', 'Slide pages')
       }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
@@ -145,16 +315,50 @@ module.exports = function registerAdminContentRoutes(app, deps) {
     }
   });
 
+  app.post('/slides/uploads', requireSlideUploadPermission, upload.single('file'), async function (req, res, next) {
+    try {
+      if (!req.file) {
+        return res.status(400).json({ error: 'No file was uploaded.' });
+      }
+
+      await validateUploadedFiles([req.file]);
+
+      res.json({
+        path: '/media/uploads/' + req.file.filename,
+        filename: req.file.filename,
+        originalName: req.file.originalname || ''
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/slides/uploads/cleanup', requireSlideUploadPermission, async function (req, res, next) {
+    try {
+      const uploadPaths = Array.isArray(req.body && req.body.uploadPaths)
+        ? req.body.uploadPaths
+        : Array.isArray(req.body && req.body.paths)
+          ? req.body.paths
+          : [];
+
+      await removeUnusedUploadFiles(pool, deps.uploadDir, uploadPaths);
+      res.json({ ok: true });
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.post('/slides', requirePermission('slides.create'), upload.any(), async function (req, res, next) {
     try {
+      await validateUploadedFiles(req.files || []);
       const payload = await common.buildSlidePayload(pool, req, null);
-      if (await common.fetchDuplicateName(pool, 'slides', payload.title, null, 'title')) {
+      if (await common.fetchDuplicateName(pool, 'c_slides', payload.title, null, 'title')) {
         return res.status(400).send('A slide with that title already exists.');
       }
       const actorId = getAuditUserId(req);
       const [result] = await pool.query(
-        'INSERT INTO slides (title, body, template_id, content_json, media_path, media_type, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+        'INSERT INTO c_slides (title, template_id, content_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
-        [payload.title, payload.body, payload.templateId, payload.contentJson, payload.mediaPath, payload.mediaType, actorId, actorId]
+        [payload.title, payload.templateId, payload.contentJson, actorId, actorId]
       );
       await syncPlaylistUploadsOnChange({
         key: 'slide:create:' + result.insertId,
@@ -177,6 +381,7 @@ module.exports = function registerAdminContentRoutes(app, deps) {
 
   app.post('/slides/:id', requirePermission('slides.update'), upload.any(), async function (req, res, next) {
     try {
+      await validateUploadedFiles(req.files || []);
       const slide = await common.fetchSlideById(pool, Number(req.params.id));
       if (!slide) {
         return res.status(404).send('Slide not found');
@@ -185,14 +390,14 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       const screenSlideCounts = await fetchScreenSlideCountsBySlug(affectedScreens);
       const existingUploadRefs = collectUploadReferencesFromSlide(slide);
       const payload = await common.buildSlidePayload(pool, req, slide);
-      if (await common.fetchDuplicateName(pool, 'slides', payload.title, slide.id, 'title')) {
+      if (await common.fetchDuplicateName(pool, 'c_slides', payload.title, slide.id, 'title')) {
         return res.status(400).send('A slide with that title already exists.');
       }
       const nextUploadRefs = collectUploadReferencesFromPayload(payload);
       const actorId = getAuditUserId(req);
       await pool.query(
-        'UPDATE slides SET title = ?, body = ?, template_id = ?, content_json = ?, media_path = ?, media_type = ?, modified_by = ? WHERE id = ?',
+        'UPDATE c_slides SET title = ?, template_id = ?, content_json = ?, modified_by = ? WHERE id = ?',
-        [payload.title, payload.body, payload.templateId, payload.contentJson, payload.mediaPath, payload.mediaType, actorId, slide.id]
+        [payload.title, payload.templateId, payload.contentJson, actorId, slide.id]
       );
       await syncPlaylistUploadsOnChange({
         key: 'slide:update:' + slide.id,
@@ -231,7 +436,8 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       const affectedScreens = await fetchScreensBySlideId(pool, slide.id);
       const screenSlideCounts = await fetchScreenSlideCountsBySlug(affectedScreens);
       const uploadRefs = collectUploadReferencesFromSlide(slide);
-      await pool.query('DELETE FROM slides WHERE id = ?', [slide.id]);
+      await pool.query('DELETE FROM c_slides WHERE id = ?', [slide.id]);
+      await removeMediaFile(slide.thumbnail_path);
       await syncPlaylistUploadsOnChange({
         key: 'slide:delete:' + slide.id,
         pool: pool,
@@ -251,10 +457,13 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   app.get('/templates', requirePermission('templates.read'), async function (req, res, next) {
     try {
       const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-      const data = await common.fetchTemplatesPage(pool, page, LIST_PAGE_SIZE);
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchTemplatesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
       res.send(pages.renderTemplatesPage({
         templates: data.templates || [],
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'templates', 'Template pages')
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'templates', 'Template pages')
       }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
@@ -273,18 +482,18 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   app.post('/templates', requirePermission('templates.create'), upload.any(), async function (req, res, next) {
     try {
       const payload = await common.buildTemplatePayload(pool, req, null);
-      if (await common.fetchDuplicateName(pool, 'slide_templates', payload.name)) {
+      if (await common.fetchDuplicateName(pool, 'c_templates', payload.name)) {
         return res.redirect('/templates/new?message=' + encodeURIComponent('A template with that name already exists.'));
       }
       const actorId = getAuditUserId(req);
       const [result] = await pool.query(
-        'INSERT INTO slide_templates (name, canvas_size_id, background_image_path, background_color, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)',
+        'INSERT INTO c_templates (name, canvas_size_id, background_image_path, background_color, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)',
         [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, actorId, actorId]
       );
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO slide_template_regions (template_id, region_key, region_type, label, font_family, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, font_family, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
           [result.insertId, region.region_key, region.region_type, region.label, region.font_family, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
@@ -310,6 +519,7 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       if (!template) {
         return res.status(404).send('Template not found');
       }
+      template.region_usage = await fetchTemplateRegionUsage(template);
       const sizeData = await common.fetchCanvasSizesData(pool);
       res.send(pages.renderTemplateFormPage(template, 'edit', req.query.message ? String(req.query.message) : '', sizeData.canvasSizes, req.currentUser));
     } catch (error) {
@@ -323,23 +533,28 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       if (!template) {
         return res.status(404).send('Template not found');
       }
+      template.region_usage = await fetchTemplateRegionUsage(template);
       const existingUploadRefs = collectUploadReferencesFromTemplate(template);
       const payload = await common.buildTemplatePayload(pool, req, template);
-      if (await common.fetchDuplicateName(pool, 'slide_templates', payload.name, template.id)) {
+      if (await common.fetchDuplicateName(pool, 'c_templates', payload.name, template.id)) {
         return res.redirect('/templates/' + template.id + '/edit?message=' + encodeURIComponent('A template with that name already exists.'));
       }
+      const regionDeleteBlockMessage = await getTemplateRegionDeleteBlockMessage(template, payload.regions);
+      if (regionDeleteBlockMessage) {
+        return res.redirect('/templates/' + template.id + '/edit?message=' + encodeURIComponent(regionDeleteBlockMessage));
+      }
       const nextUploadRefs = collectUploadReferencesFromPayload(payload);
       const affectedScreens = await fetchScreensByTemplateId(pool, template.id);
       const actorId = getAuditUserId(req);
       await pool.query(
-        'UPDATE slide_templates SET name = ?, canvas_size_id = ?, background_image_path = ?, background_color = ?, modified_by = ? WHERE id = ?',
+        'UPDATE c_templates SET name = ?, canvas_size_id = ?, background_image_path = ?, background_color = ?, modified_by = ? WHERE id = ?',
         [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, actorId, template.id]
       );
-      await pool.query('DELETE FROM slide_template_regions WHERE template_id = ?', [template.id]);
+      await pool.query('DELETE FROM c_template_regions WHERE template_id = ?', [template.id]);
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO slide_template_regions (template_id, region_key, region_type, label, font_family, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, font_family, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
           [template.id, region.region_key, region.region_type, region.label, region.font_family, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
@@ -350,6 +565,12 @@ module.exports = function registerAdminContentRoutes(app, deps) {
         previousUploadRefs: existingUploadRefs,
         nextUploadRefs: nextUploadRefs
       });
+      const templateSlides = await fetchSlidesByTemplateId(template.id);
+      if (templateSlides.length > 0) {
+        queueTemplateSlideThumbnailRefresh(template.id).catch(function (error) {
+          console.warn('Unable to queue template slide thumbnail refresh:', error);
+        });
+      }
       await notifyPlayerScreens(affectedScreens, 'refresh');
       redirectAfterSave(req, res, '/templates/' + template.id + '/edit', {
         closeUrl: '/templates',
@@ -373,9 +594,9 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       }
       const uploadRefs = collectUploadReferencesFromTemplate(template);
       const affectedScreens = await fetchScreensByTemplateId(pool, template.id);
-      await pool.query('UPDATE slides SET template_id = NULL, modified_by = ? WHERE template_id = ?', [getAuditUserId(req), template.id]);
+      await pool.query('UPDATE c_slides SET template_id = NULL, modified_by = ? WHERE template_id = ?', [getAuditUserId(req), template.id]);
-      await pool.query('DELETE FROM slide_template_regions WHERE template_id = ?', [template.id]);
+      await pool.query('DELETE FROM c_template_regions WHERE template_id = ?', [template.id]);
-      await pool.query('DELETE FROM slide_templates WHERE id = ?', [template.id]);
+      await pool.query('DELETE FROM c_templates WHERE id = ?', [template.id]);
       await syncPlaylistUploadsOnChange({
         key: 'template:delete:' + template.id,
         pool: pool,
@@ -392,10 +613,13 @@ module.exports = function registerAdminContentRoutes(app, deps) {
   app.get('/canvas-sizes', requirePermission('canvas-sizes.read'), async function (req, res, next) {
     try {
       const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-      const data = await common.fetchCanvasSizesPage(pool, page, LIST_PAGE_SIZE);
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchCanvasSizesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
       res.send(pages.renderCanvasSizesPage({
         canvasSizes: data.canvasSizes || [],
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'canvas sizes', 'Canvas size pages')
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'canvas sizes', 'Canvas size pages')
       }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
@@ -416,7 +640,7 @@ module.exports = function registerAdminContentRoutes(app, deps) {
         return res.redirect('/canvas-sizes/new?message=' + encodeURIComponent('That canvas size already exists.'));
       }
       const actorId = getAuditUserId(req);
-      const [result] = await pool.query('INSERT INTO canvas_sizes (name, width, height, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [payload.name, payload.width, payload.height, actorId, actorId]);
+      const [result] = await pool.query('INSERT INTO c_canvas_sizes (name, width, height, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [payload.name, payload.width, payload.height, actorId, actorId]);
       redirectAfterSave(req, res, '/canvas-sizes/' + result.insertId + '/edit', {
         closeUrl: '/canvas-sizes',
         newUrl: '/canvas-sizes/new',
@@ -452,7 +676,7 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       if (await canvasSizeExists(payload.width, payload.height, canvasSize.id)) {
         return res.redirect('/canvas-sizes/' + canvasSize.id + '/edit?message=' + encodeURIComponent('That canvas size already exists.'));
       }
-      await pool.query('UPDATE canvas_sizes SET name = ?, width = ?, height = ?, modified_by = ? WHERE id = ?', [payload.name, payload.width, payload.height, getAuditUserId(req), canvasSize.id]);
+      await pool.query('UPDATE c_canvas_sizes SET name = ?, width = ?, height = ?, modified_by = ? WHERE id = ?', [payload.name, payload.width, payload.height, getAuditUserId(req), canvasSize.id]);
       redirectAfterSave(req, res, '/canvas-sizes', {
         closeUrl: '/canvas-sizes',
         newUrl: '/canvas-sizes/new',
@@ -473,8 +697,8 @@ module.exports = function registerAdminContentRoutes(app, deps) {
       if (blockMessage) {
         return res.redirect('/canvas-sizes?message=' + encodeURIComponent(blockMessage));
       }
-      await pool.query('UPDATE slide_templates SET canvas_size_id = NULL, modified_by = ? WHERE canvas_size_id = ?', [getAuditUserId(req), canvasSize.id]);
+      await pool.query('UPDATE c_templates SET canvas_size_id = NULL, modified_by = ? WHERE canvas_size_id = ?', [getAuditUserId(req), canvasSize.id]);
-      await pool.query('DELETE FROM canvas_sizes WHERE id = ?', [canvasSize.id]);
+      await pool.query('DELETE FROM c_canvas_sizes WHERE id = ?', [canvasSize.id]);
       res.redirect('/canvas-sizes?message=' + encodeURIComponent('Canvas size deleted.'));
     } catch (error) {
       next(error);

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

@@ -40,7 +40,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
 
       await connection.beginTransaction();
       await connection.query(
-        'UPDATE api_sources SET last_pulled_at = ?, last_pull_error = ?, last_response_status = ?, last_response_content_type = ?, last_response_json = ?, modified_by = ? WHERE id = ?',
+        'UPDATE i_api_sources SET last_pulled_at = ?, last_pull_error = ?, last_response_status = ?, last_response_content_type = ?, last_response_json = ?, modified_by = ? WHERE id = ?',
         [new Date(), pullError || null, responseDetails ? responseDetails.responseStatus : null, responseDetails ? responseDetails.responseContentType : null, responseDetails ? responseDetails.responseJson : null, actorId, apiSourceId]
       );
       await connection.commit();
@@ -70,7 +70,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
 
       await connection.beginTransaction();
       await connection.query(
-        'UPDATE rss_feeds SET modified_by = ? WHERE id = ?',
+        'UPDATE i_rss_feeds SET modified_by = ? WHERE id = ?',
         [actorId, rssFeedId]
       );
       if (replaceRssFeedItems) {
@@ -199,7 +199,10 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
   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 data = await common.fetchApiSourcesPage(pool, page, LIST_PAGE_SIZE);
+      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 apiSources = (data.apiSources || []).map(function (apiSource) {
         return Object.assign({}, apiSource, {
           intervalLabel: apiSource.update_interval_unit === 'seconds'
@@ -211,7 +214,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       });
       res.send(pages.renderApiSourcesPage({
         apiSources: apiSources,
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'API sources', 'API source pages')
+        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);
@@ -226,13 +229,13 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
     const connection = await pool.getConnection();
     try {
       const payload = common.buildApiSourcePayload(req, null);
-      if (await common.fetchDuplicateName(pool, 'api_sources', payload.name)) {
+      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 api_sources (name, api_url, 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 (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+        'INSERT INTO i_api_sources (name, api_url, 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.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, actorId]
       );
       await connection.commit();
@@ -315,7 +318,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       const actorId = getAuditUserId(req);
       await connection.beginTransaction();
       await connection.query(
-        'UPDATE api_sources SET name = ?, api_url = ?, 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 = ?',
+        'UPDATE i_api_sources SET name = ?, api_url = ?, 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.updateIntervalValue, payload.updateIntervalUnit, null, null, null, null, null, actorId, apiSource.id]
       );
       await connection.commit();
@@ -363,7 +366,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       const connection = await pool.getConnection();
       try {
         await connection.beginTransaction();
-        await connection.query('DELETE FROM api_sources WHERE id = ?', [apiSource.id]);
+        await connection.query('DELETE FROM i_api_sources WHERE id = ?', [apiSource.id]);
         await connection.commit();
         removeRecurringRefresh('api-source', apiSource.id);
       } catch (error) {
@@ -381,10 +384,13 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
   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 data = await common.fetchRssFeedsPage(pool, page, LIST_PAGE_SIZE);
+      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);
       res.send(pages.renderRssFeedsPage({
         rssFeeds: data.rssFeeds || [],
-        pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'RSS feeds', 'RSS feed pages')
+        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);
@@ -405,7 +411,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       const actorId = getAuditUserId(req);
       await connection.beginTransaction();
       const [result] = await connection.query(
-        'INSERT INTO rss_feeds (name, feed_url, update_interval_value, update_interval_unit, item_limit, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
+        '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();
@@ -487,7 +493,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       const actorId = getAuditUserId(req);
       await connection.beginTransaction();
       await connection.query(
-        'UPDATE rss_feeds SET name = ?, feed_url = ?, update_interval_value = ?, update_interval_unit = ?, item_limit = ?, modified_by = ? WHERE id = ?',
+        '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();
@@ -535,7 +541,7 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
       const connection = await pool.getConnection();
       try {
         await connection.beginTransaction();
-        await connection.query('DELETE FROM rss_feeds WHERE id = ?', [rssFeed.id]);
+        await connection.query('DELETE FROM i_rss_feeds WHERE id = ?', [rssFeed.id]);
         await connection.commit();
         removeRecurringRefresh('rss-feed', rssFeed.id);
       } catch (error) {

src/web/routes/admin/manage.js

@@ -22,7 +22,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
   const requirePermission = deps.requirePermission;
 
   async function fetchAllScreenSlugs() {
-    const [rows] = await pool.query('SELECT slug FROM screens ORDER BY slug ASC');
+    const [rows] = await pool.query('SELECT slug FROM d_screens ORDER BY slug ASC');
     return (rows || [])
       .map(function (row) {
         return String(row && row.slug ? row.slug : '').trim();
@@ -36,12 +36,15 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       const blackoutValue = req.body && Object.prototype.hasOwnProperty.call(req.body, 'blackout')
         ? req.body.blackout
         : req.query.blackout;
+      const pausedValue = req.body && Object.prototype.hasOwnProperty.call(req.body, 'paused')
+        ? req.body.paused
+        : req.query.paused;
 
       if (!command) {
         return res.status(400).json({ error: 'Command is required' });
       }
 
-      if (command !== 'reload' && command !== 'blackout') {
+      if (command !== 'reload' && command !== 'blackout' && command !== 'pause') {
         return res.status(400).json({ error: 'Unsupported command' });
       }
 
@@ -56,7 +59,12 @@ module.exports = function registerAdminManageRoutes(app, deps) {
             command: 'blackout',
             blackout: blackoutValue === true || blackoutValue === 'true' || blackoutValue === '1' ? true : false
           }
-        : 'reload';
+        : command === 'pause'
+          ? {
+              command: 'pause',
+              paused: pausedValue === true || pausedValue === 'true' || pausedValue === '1' ? true : false
+            }
+          : 'reload';
 
       const sentCount = await notifyPlayerScreens(slugs, payload);
       await broadcastDashboardState();
@@ -65,7 +73,8 @@ module.exports = function registerAdminManageRoutes(app, deps) {
         ok: true,
         command: command,
         sent: sentCount,
-        blackout: command === 'blackout' ? Boolean(payload.blackout) : undefined
+        blackout: command === 'blackout' ? Boolean(payload.blackout) : undefined,
+        paused: command === 'pause' ? Boolean(payload.paused) : undefined
       });
     } catch (error) {
       next(error);
@@ -80,11 +89,11 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (!name) {
         return res.status(400).send('Playlist name is required.');
       }
-      if (await common.fetchDuplicateName(pool, 'playlists', name)) {
+      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 playlists (name, fade_between_slides, skip_unavailable_rtmp, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, fadeBetweenSlides, skipUnavailableRtmp, actorId, actorId]);
+      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',
@@ -108,7 +117,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (!playlist) {
         return res.status(404).send('Playlist not found');
       }
-      if (await common.fetchDuplicateName(pool, 'playlists', name, playlist.id)) {
+      if (await common.fetchDuplicateName(pool, 'c_playlists', name, playlist.id)) {
         return res.status(400).send('A playlist with that name already exists.');
       }
 
@@ -116,6 +125,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
 
       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']);
@@ -126,6 +136,9 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       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.');
       }
@@ -143,7 +156,8 @@ module.exports = function registerAdminManageRoutes(app, deps) {
         seenSlideIds.add(slideId);
 
         const durationRaw = Number(durations[i]);
-        const durationSeconds = Number.isFinite(durationRaw) ? Math.max(1, Math.trunc(durationRaw)) : 10;
+        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;
@@ -188,6 +202,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
           slideId,
           position: i,
           durationSeconds,
+          useVideoDuration,
           scheduleMode,
           scheduleStartDatetime,
           scheduleEndDatetime,
@@ -200,9 +215,9 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (normalizedSlides.length) {
         const [slides] = await connection.query(
           `SELECT sl.id, cs.width AS canvas_width, cs.height AS canvas_height
-           FROM slides sl
+           FROM c_slides sl
-           LEFT JOIN slide_templates st ON st.id = sl.template_id
+           LEFT JOIN c_templates st ON st.id = sl.template_id
-           LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_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; })]
         );
@@ -222,17 +237,18 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       const actorId = getAuditUserId(req);
 
       await connection.beginTransaction();
-      await connection.query('UPDATE playlists SET name = ?, fade_between_slides = ?, skip_unavailable_rtmp = ?, modified_by = ? WHERE id = ?', [name, fadeBetweenSlides, skipUnavailableRtmp, actorId, playlist.id]);
+      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 playlist_slides WHERE playlist_id = ?', [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 playlist_slides (playlist_id, slide_id, position, duration_seconds, schedule_mode, schedule_start_datetime, schedule_end_datetime, schedule_start_time, schedule_end_time, schedule_days_json, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          '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,
@@ -274,7 +290,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (blockMessage) {
         return res.redirect('/playlists?message=' + encodeURIComponent(blockMessage));
       }
-      await pool.query('DELETE FROM playlists WHERE id = ?', [playlist.id]);
+      await pool.query('DELETE FROM c_playlists WHERE id = ?', [playlist.id]);
       res.redirect('/playlists?message=' + encodeURIComponent('Playlist deleted.'));
     } catch (error) {
       next(error);
@@ -303,11 +319,12 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (playlistCanvasSignature && slideCanvasSignature !== playlistCanvasSignature) {
         return res.status(400).send('The slide canvas size must match the existing playlist items.');
       }
-      const durationSeconds = Math.max(1, Number(req.body.duration_seconds || 10));
+      const durationValue = Number(req.body.duration_seconds || 10);
-      const [positionRows] = await pool.query('SELECT COALESCE(MAX(position), -1) AS max_position FROM playlist_slides WHERE playlist_id = ?', [playlist.id]);
+      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 playlist_slides (playlist_id, slide_id, position, duration_seconds, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)', [playlist.id, slideId, nextPosition, durationSeconds, actorId, actorId]);
+      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.'));
@@ -323,10 +340,11 @@ module.exports = function registerAdminManageRoutes(app, deps) {
         return res.status(404).send('Playlist not found');
       }
       const playlistSlideId = Number(req.params.playlistSlideId);
-      const durationSeconds = Math.max(1, Number(req.body.duration_seconds || 10));
+      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 playlist_slides SET duration_seconds = ?, modified_by = ? WHERE id = ? AND playlist_id = ?',
+        'UPDATE c_playlist_slides SET duration_seconds = ?, modified_by = ? WHERE id = ? AND playlist_id = ?',
         [durationSeconds, actorId, playlistSlideId, playlist.id]
       );
       if (!result.affectedRows) {
@@ -373,8 +391,8 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       const swapSlide = orderedSlides[swapIndex];
       const actorId = getAuditUserId(req);
 
-      await connection.query('UPDATE 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 = ?', [swapSlide.position, actorId, currentSlide.id, playlist.id]);
-      await connection.query('UPDATE playlist_slides SET position = ?, modified_by = ? WHERE id = ? AND playlist_id = ?', [currentSlide.position, actorId, swapSlide.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();
@@ -490,7 +508,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
 
       const actorId = getAuditUserId(req);
       const [result] = await pool.query(
-        'UPDATE 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 = ?',
+        '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) {
@@ -510,7 +528,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (!playlist) {
         return res.status(404).send('Playlist not found');
       }
-      await pool.query('DELETE FROM playlist_slides WHERE id = ? AND playlist_id = ?', [Number(req.params.playlistSlideId), playlist.id]);
+      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.'));
@@ -534,14 +552,14 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (!name) {
         return res.status(400).send('Screen name is required.');
       }
-      if (await common.fetchDuplicateName(pool, 'screens', name)) {
+      if (await common.fetchDuplicateName(pool, 'd_screens', name)) {
         return res.status(400).send('A screen with that name already exists.');
       }
       const slugInput = String(req.body.slug || '').trim();
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
       const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name));
       const actorId = getAuditUserId(req);
-      const [result] = await pool.query('INSERT INTO screens (name, slug, playlist_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, slug, playlistId, actorId, actorId]);
+      const [result] = await pool.query('INSERT INTO d_screens (name, slug, playlist_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, slug, playlistId, actorId, actorId]);
       redirectAfterSave(req, res, '/screens?edit=' + result.insertId, {
         closeUrl: '/screens',
         newUrl: '/screens/new',
@@ -562,7 +580,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (!screen) {
         return res.status(404).send('Screen not found');
       }
-      if (await common.fetchDuplicateName(pool, 'screens', name, screen.id)) {
+      if (await common.fetchDuplicateName(pool, 'd_screens', name, screen.id)) {
         return res.status(400).send('A screen with that name already exists.');
       }
       const slugInput = String(req.body.slug || '').trim();
@@ -570,7 +588,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       const previousPlaylistId = screen.playlist_id;
       const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id);
       const previousSlug = String(screen.slug || '').trim();
-      await pool.query('UPDATE screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
+      await pool.query('UPDATE d_screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
       if (previousPlaylistId !== playlistId && previousSlug) {
         await notifyPlayerScreens([previousSlug], 'refresh');
       }
@@ -600,7 +618,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
       if (blockMessage) {
         return res.redirect('/screens?message=' + encodeURIComponent(blockMessage));
       }
-      await pool.query('DELETE FROM screens WHERE id = ?', [screen.id]);
+      await pool.query('DELETE FROM d_screens WHERE id = ?', [screen.id]);
       res.redirect('/screens?message=' + encodeURIComponent('Screen deleted.'));
     } catch (error) {
       next(error);

src/web/routes/admin/rbac.js

@@ -46,7 +46,7 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 		let suffix = 2;
 
 		while (true) {
-			const [rows] = await pool.query('SELECT id FROM roles WHERE role_key = ? LIMIT 1', [candidate]);
+			const [rows] = await pool.query('SELECT id FROM a_roles WHERE role_key = ? LIMIT 1', [candidate]);
 			if (!rows.length) {
 				return candidate;
 			}
@@ -147,7 +147,6 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 		const permissionRows = await rbacData.fetchPermissions(pool);
 		const selectedPermissionKeys = await rbacData.fetchRolePermissionKeys(pool, role.id);
 		const selectedUserIds = await rbacData.fetchRoleUserIds(pool, role.id);
-		const users = await rbacData.fetchUsersWithRoles(pool);
 		return {
 			role: Object.assign({}, role, {
 				permissionKeys: selectedPermissionKeys,
@@ -155,17 +154,20 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 				userCount: Number(role.user_count) || 0
 			}),
 			permissionGroups: buildPermissionGroups(mapPermissionsForView(permissionRows, selectedPermissionKeys)),
-			users: mapUsersForView(users, selectedUserIds)
+			selectedUserIds: selectedUserIds
 		};
 	}
 
 	app.get('/rbac', requirePermission('rbac.read'), async function (req, res, next) {
 		try {
 			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-			const data = await rbacData.fetchRolesPage(pool, page, LIST_PAGE_SIZE);
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const data = await rbacData.fetchRolesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
 			res.send(pages.renderRbacPage({
 				roles: data.roles || [],
-				pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'roles', 'Role pages')
+				pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'roles', 'Role pages')
 			}, req.query.message ? String(req.query.message) : '', req.currentUser));
 		} catch (error) {
 			next(error);
@@ -199,7 +201,7 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 			if (!name) {
 				return res.status(400).send(pages.renderRbacAddPage('Role name is required.', req.currentUser, createViewModel.formValues, createViewModel.permissionGroups, 'warning'));
 			}
-			if (await common.fetchDuplicateName(pool, 'roles', name)) {
+			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'));
 			}
 
@@ -216,7 +218,7 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 			try {
 				await connection.beginTransaction();
 				const [result] = await connection.query(
-					'INSERT INTO roles (role_key, name, description, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
+					'INSERT INTO a_roles (role_key, name, description, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
 					[roleKey, name, description || null, actorId, actorId]
 				);
 				insertedRoleId = Number(result.insertId);
@@ -248,14 +250,17 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 				return res.status(404).send('Role not found.');
 			}
 
+			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 users = Array.isArray(viewModel.users)
+			const data = await rbacData.fetchUsersWithRolesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction, {
-				? viewModel.users.filter(function (user) {
+				excludeUserId: currentUserId
-					return Number(user && user.id) !== currentUserId;
+			});
-				})
+			const users = mapUsersForView(data.users, viewModel.selectedUserIds);
-				: [];
 
-			res.send(pages.renderRbacEditPage(viewModel.role, req.query.message ? String(req.query.message) : '', req.currentUser, viewModel.permissionGroups, users));
+			res.send(pages.renderRbacEditPage(viewModel.role, req.query.message ? String(req.query.message) : '', req.currentUser, viewModel.permissionGroups, users, buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'users', 'User pages')));
 		} catch (error) {
 			next(error);
 		}
@@ -320,7 +325,7 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 			try {
 				await connection.beginTransaction();
 				await connection.query(
-					'UPDATE roles SET name = ?, description = ?, modified_by = ? WHERE id = ?',
+					'UPDATE a_roles SET name = ?, description = ?, modified_by = ? WHERE id = ?',
 					[name, description || null, getAuditUserId(req), roleId]
 				);
 				if (shouldSyncPermissions) {
@@ -369,7 +374,17 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 				return res.redirect('/rbac/' + roleId + '/edit?message=' + encodeURIComponent('One or more selected permissions are invalid.'));
 			}
 
-			await rbacData.syncRolePermissions(pool, roleId, normalizedPermissionKeys);
+			const connection = await pool.getConnection();
+			try {
+				await connection.beginTransaction();
+				await rbacData.syncRolePermissions(connection, roleId, normalizedPermissionKeys);
+				await connection.commit();
+			} catch (error) {
+				await connection.rollback();
+				throw error;
+			} finally {
+				connection.release();
+			}
 			res.redirect('/rbac/' + roleId + '/edit?message=' + encodeURIComponent('Permissions updated.'));
 		} catch (error) {
 			next(error);
@@ -430,7 +445,7 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 				return res.redirect('/rbac?message=' + encodeURIComponent('Remove all users from this role before deleting it.'));
 			}
 
-			await pool.query('DELETE FROM roles WHERE id = ?', [roleId]);
+			await pool.query('DELETE FROM a_roles WHERE id = ?', [roleId]);
 			res.redirect('/rbac?message=' + encodeURIComponent('Role deleted.'));
 		} catch (error) {
 			next(error);

src/web/routes/admin/users.js

@@ -57,7 +57,10 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 	app.get('/users', requirePermission('users.read'), async function (req, res, next) {
 		try {
 			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
-			const data = await rbacData.fetchUsersWithRolesPage(pool, page, LIST_PAGE_SIZE);
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const data = await rbacData.fetchUsersWithRolesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
 			const mappedUsers = (data.users || []).map(function (user) {
 				return Object.assign({}, user, {
 					isCurrentUser: Number(user.id) === Number(req.currentUser.id),
@@ -68,7 +71,7 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 			});
 			res.send(pages.renderUsersPage({
 				users: mappedUsers,
-				pagination: buildPagination(data.totalItems, data.currentPage, 'page', {}, LIST_PAGE_SIZE, 'users', 'Users pages')
+				pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'users', 'Users pages')
 			}, req.query.message ? String(req.query.message) : '', req.currentUser));
 		} catch (error) {
 			next(error);
@@ -144,11 +147,11 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 			if (!roleCheck.ok) {
 				return renderValidationError(roleCheck.message);
 			}
-			if (await common.fetchDuplicateName(pool, 'users', name)) {
+			if (await common.fetchDuplicateName(pool, 'a_users', name)) {
 				return renderValidationError('That name already exists.');
 			}
 
-			const [existingRows] = await connection.query('SELECT id FROM users WHERE username = ? LIMIT 1', [username]);
+			const [existingRows] = await connection.query('SELECT id FROM a_users WHERE username = ? LIMIT 1', [username]);
 			if (existingRows.length) {
 				return renderValidationError('That username already exists.');
 			}
@@ -157,7 +160,7 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 			const actorId = getAuditUserId(req);
 			await connection.beginTransaction();
 			const [result] = await connection.query(
-				'INSERT INTO users (name, username, password_hash, password_salt, password_iterations, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
+				'INSERT INTO a_users (name, username, password_hash, password_salt, password_iterations, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
 				[name, username, passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, actorId, actorId]
 			);
 			await rbacData.syncUserRoles(connection, result.insertId, roleCheck.roleIds);
@@ -185,7 +188,7 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 				return res.redirect('/account?message=' + encodeURIComponent('Use My Account to update your own login details.'));
 			}
 
-			const [rows] = await pool.query('SELECT id FROM users WHERE id = ? LIMIT 1', [userId]);
+			const [rows] = await pool.query('SELECT id FROM a_users WHERE id = ? LIMIT 1', [userId]);
 			if (!rows.length) {
 				return res.status(404).send('User not found.');
 			}
@@ -218,7 +221,7 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 				return res.redirect('/account?message=' + encodeURIComponent('Use My Account to update your own username or password.'));
 			}
 
-			const [userRows] = await pool.query('SELECT id, username FROM users WHERE id = ? LIMIT 1', [userId]);
+			const [userRows] = await pool.query('SELECT id, username FROM a_users WHERE id = ? LIMIT 1', [userId]);
 			if (!userRows.length) {
 				return res.status(404).send('User not found.');
 			}
@@ -228,16 +231,16 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('Username is required.'));
 			}
 
-			if (await common.fetchDuplicateName(pool, 'users', name, userId)) {
+			if (await common.fetchDuplicateName(pool, 'a_users', name, userId)) {
 				return res.redirect('/users/' + userId + '/edit?message=' + encodeURIComponent('That name already exists.'));
 			}
 
-			const [existingRows] = await pool.query('SELECT id FROM users WHERE username = ? AND id <> ? LIMIT 1', [username, userId]);
+			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.'));
 			}
 
-			const [result] = await pool.query('UPDATE users SET name = ?, username = ?, modified_by = ? WHERE id = ?', [name, username, getAuditUserId(req), userId]);
+			const [result] = await pool.query('UPDATE a_users SET name = ?, username = ?, modified_by = ? WHERE id = ?', [name, username, getAuditUserId(req), userId]);
 			if (!result.affectedRows) {
 				return res.status(404).send('User not found.');
 			}
@@ -266,17 +269,17 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 				return res.redirect('/users?message=' + encodeURIComponent('Passwords do not match.'));
 			}
 
-			const [rows] = await pool.query('SELECT id FROM users WHERE id = ? LIMIT 1', [userId]);
+			const [rows] = await pool.query('SELECT id FROM a_users WHERE id = ? LIMIT 1', [userId]);
 			if (!rows.length) {
 				return res.status(404).send('User not found.');
 			}
 
 			const passwordRecord = hashPassword(password);
 			await pool.query(
-				'UPDATE users SET password_hash = ?, password_salt = ?, password_iterations = ?, modified_by = ? WHERE id = ?',
+				'UPDATE a_users SET password_hash = ?, password_salt = ?, password_iterations = ?, modified_by = ? WHERE id = ?',
 				[passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, getAuditUserId(req), userId]
 			);
-			await pool.query('DELETE FROM auth_sessions WHERE user_id = ?', [userId]);
+			await pool.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]);
 			res.redirect('/users?message=' + encodeURIComponent('Password updated.'));
 		} catch (error) {
 			next(error);
@@ -293,12 +296,12 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 				return res.redirect('/users?message=' + encodeURIComponent('You cannot delete your own account from the users page.'));
 			}
 
-			const [countRows] = await pool.query('SELECT COUNT(*) AS user_count FROM users');
+			const [countRows] = await pool.query('SELECT COUNT(*) AS user_count FROM a_users');
 			if (!countRows.length || Number(countRows[0].user_count) <= 1) {
 				return res.redirect('/users?message=' + encodeURIComponent('At least one user must remain.'));
 			}
 
-			const [result] = await pool.query('DELETE FROM users WHERE id = ?', [userId]);
+			const [result] = await pool.query('DELETE FROM a_users WHERE id = ?', [userId]);
 			if (!result.affectedRows) {
 				return res.status(404).send('User not found.');
 			}

src/web/routes/auth/index.js

@@ -28,7 +28,7 @@ module.exports = function registerAuthRoutes(app, deps) {
         return res.status(400).send('Username and password are required.');
       }
 
-      const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM users WHERE username = ? LIMIT 1', [username]);
+      const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM a_users WHERE username = ? LIMIT 1', [username]);
       const user = rows[0] || null;
       if (!user || !verifyPassword(password, user)) {
         return res.redirect('/login?message=' + encodeURIComponent('Invalid username or password.'));
@@ -47,7 +47,7 @@ module.exports = function registerAuthRoutes(app, deps) {
       const cookies = parseCookies(req.headers.cookie || '');
       const token = cookies[sessionCookieName];
       if (token) {
-        await pool.query('DELETE FROM auth_sessions WHERE session_hash = ?', [hashSessionToken(token)]);
+        await pool.query('DELETE FROM a_sessions WHERE session_hash = ?', [hashSessionToken(token)]);
       }
       clearSessionCookie(res);
       res.redirect('/login?message=' + encodeURIComponent('You have been signed out.'));

src/web/routes/index.js

@@ -27,7 +27,8 @@ module.exports = {
   renderCanvasSizesPage: require('./canvas-sizes/list'),
   renderCanvasSizeFormPage: require('./canvas-sizes/add'),
   renderCanvasSizeEditPage: require('./canvas-sizes/edit'),
-  renderBackgroundTasksPage: require('./settings/background-tasks-page'),
+  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'),