Release 1.5.13

Reviewed-on: LZStealth/pulse-signage#4

.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

@@ -6,6 +6,121 @@ All notable changes to this project will be documented in this file.
 
 - No unreleased changes recorded yet.
 
+## 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
+
+- Upload removal requests now authenticate correctly when a deployed player parses a bodyless `DELETE` request as an empty object, which could cause 401s for newly uploaded images.
+
+## 1.5.6 - 2026-07-25
+
+### Changed
+
+- Playlist slide picker now uses a button to reveal already added slides, while still defaulting to showing only available slides.
+- Already-added slides in the picker are now labeled and visually muted to make them easier to spot.
+
+### Fixed
+
+- Thumbnails in slide and playlist tables now follow the slide canvas ratio and cap at 5.5rem tall.
+- Thumbnail-only table columns are no longer sortable.
+
+## 1.5.5 - 2026-07-25
+
+### Fixed
+
+- Fixed a migration gap that could leave `slides.thumbnail_path` missing on upgraded databases.
+
+## 1.5.4 - 2026-07-25
+
+### Added
+
+- Cropper.js has been added to aid with image uploading.
+
+### Changed
+
+- Upgraded Multer to 2.x to remove the deprecated 1.x dependency warning.
+- Tightened a few admin UI details, including slide editor and RBAC list spacing/typography adjustments.
+
+## 1.5.3 - 2026-07-25
+
+### Added
+
+- A modal-based slide picker for playlist editing with search, multi-select, and slide thumbnails.
+- Reusable modal and table-pagination helpers for the admin UI.
+- Slide thumbnail previews in playlist schedules, with image fallbacks when a thumbnail is missing.
+
+### Changed
+
+- RTMP playback now probes session readiness more aggressively and retries startup before surfacing failures.
+- Playlist editing now includes richer scheduling controls, live slide counts, and support for skipping unavailable RTMP slides.
+- Admin lists and background task pages now preserve filter and pagination state during AJAX navigation.
+- Shared admin shell styling and helpers were refreshed to support the newer list, modal, and pagination UI.
+
+### Fixed
+
+- Player upload sync and route handling now degrade more gracefully when backend services are unavailable.
+- RTMP and playlist playback now recover more cleanly when a stream fails to initialize or respond in time.
+
 ## 1.5.2 - 2026-07-25
 
 ### Fixed

Dockerfile

@@ -2,7 +2,7 @@ FROM node:24-alpine
 
 WORKDIR /app
 
-RUN apk add --no-cache ffmpeg
+RUN apk add --no-cache ffmpeg chromium nss freetype harfbuzz ttf-freefont
 
 COPY package*.json ./
 RUN npm install --omit=dev --no-audit --no-fund

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "1.5.2",
+  "version": "1.5.13",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "repository": {
@@ -16,14 +16,18 @@
     "dev:player": "nodemon -r dotenv/config src/player.js"
   },
   "dependencies": {
+    "@sparticuz/chromium": "^137.0.0",
     "bootstrap-icons": "1.11.3",
+    "cropperjs": "^1.6.2",
     "dotenv": "^17.4.2",
     "express": "^4.21.2",
-    "hls.js": "^1.5.15",
     "handlebars": "^4.7.8",
-    "multer": "^1.4.5-lts.1",
+    "hls.js": "^1.5.15",
+    "multer": "^2.2.0",
     "mysql2": "^3.14.3",
+    "puppeteer-core": "^24.16.0",
     "qrcode": "^1.5.4",
+    "sharp": "^0.35.3",
     "ws": "^8.21.0"
   },
   "devDependencies": {

src/common.js

@@ -2,6 +2,18 @@ const db = require('./db');
 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,
   ensureSchema: db.ensureSchema,
@@ -9,12 +21,22 @@ module.exports = {
   uniqueScreenSlug: data.uniqueScreenSlug,
   parseJsonSafe: data.parseJsonSafe,
   fetchAdminData: data.fetchAdminData,
+  fetchPlaylistsPage: data.fetchPlaylistsPage,
+  fetchSlidesPage: data.fetchSlidesPage,
+  fetchTemplatesPage: data.fetchTemplatesPage,
+  fetchCanvasSizesPage: data.fetchCanvasSizesPage,
+  fetchScreensPage: data.fetchScreensPage,
+  getSearchQuery: getSearchQuery,
+  getSortQuery: getSortQuery,
+  getSortDirectionQuery: getSortDirectionQuery,
   fetchPlaylistById: data.fetchPlaylistById,
   fetchApiSourcesData: data.fetchApiSourcesData,
+  fetchApiSourcesPage: data.fetchApiSourcesPage,
   fetchApiSourceById: data.fetchApiSourceById,
   fetchApiSourceResponse: data.fetchApiSourceResponse,
   buildApiSourcePayload: data.buildApiSourcePayload,
   fetchRssFeedsData: data.fetchRssFeedsData,
+  fetchRssFeedsPage: data.fetchRssFeedsPage,
   fetchRssFeedById: data.fetchRssFeedById,
   fetchRssFeedItemsByFeedId: data.fetchRssFeedItemsByFeedId,
   normalizeRssFeedItem: data.normalizeRssFeedItem,

src/data/admin.js

@@ -1,5 +1,7 @@
+const { fetchPagedRows } = require('./utils');
+
 async function fetchAdminData(pool) {
-  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, 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 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 [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,
@@ -10,7 +12,7 @@ async function fetchAdminData(pool) {
   `);
   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 [slides] = await pool.query(`
-    SELECT s.id, s.title, s.body, s.template_id, s.content_json, s.media_path, s.media_type, 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.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
     FROM slides s
     LEFT JOIN slide_templates st ON st.id = s.template_id
     LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -23,7 +25,7 @@ async function fetchAdminData(pool) {
     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, 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.media_path, sl.media_type, sl.content_json, sl.thumbnail_path, cs.width AS canvas_width, cs.height AS canvas_height
     FROM playlist_slides ps
     JOIN slides sl ON sl.id = ps.slide_id
     LEFT JOIN slide_templates st ON st.id = sl.template_id
@@ -33,6 +35,139 @@ async function fetchAdminData(pool) {
   return { playlists, canvasSizes, templates, templateRegions, slides, screens, playlistSlides };
 }
 
+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,
+            (SELECT COUNT(*) FROM playlist_slides ps WHERE ps.playlist_id = p.id) AS slide_count
+     FROM playlists p
+     ORDER BY p.id DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ playlists: paged.rows }, paged);
+}
+
+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
+     FROM slides s
+     LEFT JOIN slide_templates st ON st.id = s.template_id
+     LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+     ORDER BY s.id DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM slides',
+    searchColumns: ['s.title', 's.body', 's.media_path', '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
+  });
+
+  return Object.assign({ slides: paged.rows }, paged);
+}
+
+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 slides s WHERE s.template_id = st.id) AS slide_count
+    FROM slide_templates st
+    LEFT JOIN canvas_sizes cs ON cs.id = st.canvas_size_id
+    ORDER BY st.id DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM slide_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
+  });
+
+  return Object.assign({ templates: paged.rows }, paged);
+}
+
+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
+     FROM canvas_sizes
+     ORDER BY width ASC, height ASC, name ASC`,
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ canvasSizes: paged.rows }, paged);
+}
+
+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
+     LEFT JOIN playlists p ON p.id = s.playlist_id
+     ORDER BY s.id DESC`,
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ screens: paged.rows }, paged);
+}
+
 module.exports = {
-  fetchAdminData
+  fetchAdminData,
+  fetchPlaylistsPage,
+  fetchSlidesPage,
+  fetchTemplatesPage,
+  fetchCanvasSizesPage,
+  fetchScreensPage
 };

src/data/api-sources.js

@@ -1,5 +1,6 @@
 const http = require('http');
 const https = require('https');
+const { fetchPagedRows } = require('./utils');
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -14,6 +15,30 @@ async function fetchApiSourcesData(pool) {
   return { apiSources: apiSources };
 }
 
+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',
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ apiSources: paged.rows }, paged);
+}
+
 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 = ?',
@@ -144,6 +169,7 @@ function buildApiSourcePayload(req, existingApiSource) {
 
 module.exports = {
   fetchApiSourcesData: fetchApiSourcesData,
+  fetchApiSourcesPage: fetchApiSourcesPage,
   fetchApiSourceById: fetchApiSourceById,
   fetchApiSourceResponse: fetchApiSourceResponse,
   buildApiSourcePayload: buildApiSourcePayload

src/data/canvas-sizes.js

@@ -1,8 +1,31 @@
+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');
   return { canvasSizes };
 }
 
+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',
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ canvasSizes: paged.rows }, paged);
+}
+
 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]);
   return rows[0] || null;
@@ -28,6 +51,7 @@ function buildCanvasSizePayload(req, existingCanvasSize) {
 
 module.exports = {
   fetchCanvasSizesData,
+  fetchCanvasSizesPage,
   fetchCanvasSizeById,
   buildCanvasSizePayload
 };

src/data/index.js

@@ -1,7 +1,7 @@
-const { fetchAdminData } = require('./admin');
+const { fetchAdminData, fetchPlaylistsPage, fetchSlidesPage, fetchTemplatesPage, fetchCanvasSizesPage, fetchScreensPage } = require('./admin');
 const { fetchPlaylistById } = require('./playlists');
-const { fetchApiSourcesData, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
-const { fetchRssFeedsData, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
+const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
+const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData } = require('./screens');
 const { fetchTemplateById, fetchTemplatesData, extractTemplateRegions, buildTemplatePayload } = require('./templates');
 const { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload } = require('./canvas-sizes');
@@ -13,12 +13,19 @@ module.exports = {
   uniqueScreenSlug,
   parseJsonSafe,
   fetchAdminData,
+  fetchPlaylistsPage,
+  fetchSlidesPage,
+  fetchTemplatesPage,
+  fetchCanvasSizesPage,
+  fetchScreensPage,
   fetchPlaylistById,
   fetchApiSourcesData,
+  fetchApiSourcesPage,
   fetchApiSourceById,
   fetchApiSourceResponse,
   buildApiSourcePayload,
   fetchRssFeedsData,
+  fetchRssFeedsPage,
   fetchRssFeedById,
   fetchRssFeedItemsByFeedId,
   normalizeRssFeedItem,

src/data/playlists.js

@@ -1,5 +1,5 @@
 async function fetchPlaylistById(pool, id) {
-  const [rows] = await pool.query('SELECT id, name, fade_between_slides, 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 playlists WHERE id = ?', [id]);
   return rows[0] || null;
 }
 

src/data/rss-feeds.js

@@ -1,5 +1,6 @@
 const http = require('http');
 const https = require('https');
+const { fetchPagedRows } = require('./utils');
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -14,6 +15,29 @@ async function fetchRssFeedsData(pool) {
   return { rssFeeds: rssFeeds };
 }
 
+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',
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ rssFeeds: paged.rows }, paged);
+}
+
 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 = ?',
@@ -285,6 +309,7 @@ function buildRssFeedPayload(req, existingRssFeed) {
 
 module.exports = {
   fetchRssFeedsData,
+  fetchRssFeedsPage,
   fetchRssFeedById,
   fetchRssFeedItemsByFeedId,
   normalizeRssFeedItem,

src/data/screens.js

@@ -38,7 +38,7 @@ async function fetchScreenById(pool, id) {
 }
 
 async function fetchScreenEditData(pool) {
-  const [playlists] = await pool.query('SELECT id, name, fade_between_slides, 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 playlists ORDER BY id DESC');
   return { playlists };
 }
 

src/data/slides.js

@@ -27,7 +27,7 @@ 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.created_at, s.modified_at,
+    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,
            st.name AS template_name, cs.name AS canvas_size_name, cs.width AS canvas_width, cs.height AS canvas_height
     FROM slides s
     LEFT JOIN slide_templates st ON st.id = s.template_id
@@ -90,7 +90,19 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
       const existing = body[`existing_region_image_${region.id}`];
       content[region.region_key] = {
         type: 'image',
-        value: uploaded ? `/media/${uploaded.filename}` : String(existing || '').trim() || ((existingContent && existingContent[region.region_key]) ? existingContent[region.region_key].value : '')
+        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}`];

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) {
@@ -154,7 +154,7 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
   const removeBackgroundImage = Boolean(req.body.remove_background_image);
   const backgroundColor = sanitizeBackgroundColor(req.body.background_color || (existingTemplate && existingTemplate.background_color));
   const backgroundImagePath = backgroundImage
-    ? `/media/${backgroundImage.filename}`
+    ? `/media/uploads/${backgroundImage.filename}`
     : removeBackgroundImage
       ? null
       : String(req.body.existing_background_image_path || (existingTemplate && existingTemplate.background_image_path) || '').trim() || null;

src/data/utils.js

@@ -22,6 +22,183 @@ function readFormArray(body, key) {
   return [body[key]];
 }
 
+function normalizePageNumber(value) {
+  const pageNumber = Math.floor(Number(value) || 1);
+  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 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 = '';
+
+  if (orderByIndex >= 0) {
+    baseSelectSql = selectSql.slice(0, orderByIndex).trim();
+    orderBySql = selectSql.slice(orderByIndex).trim();
+  }
+
+  const filteredSelectSql = `${baseSelectSql}${searchFilter.clause}`;
+  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 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 || [],
+    totalItems: totalItems,
+    totalPages: totalPages,
+    currentPage: safeCurrentPage,
+    pageSize: pageSize
+  };
+}
+
 async function fetchDuplicateName(pool, tableName, name, excludeId, columnName) {
   const normalizedName = String(name || '').trim();
   if (!normalizedName) {
@@ -44,5 +221,11 @@ async function fetchDuplicateName(pool, tableName, name, excludeId, columnName)
 module.exports = {
   parseJsonSafe,
   readFormArray,
+  normalizePageNumber,
+  normalizeSortDirection,
+  buildSortOrderClause,
+  findTopLevelOrderByIndex,
+  buildSearchFilter,
+  fetchPagedRows,
   fetchDuplicateName
 };

src/db/index.js

@@ -23,7 +23,7 @@ async function pruneStaleOnboardingDevices(pool) {
   );
 }
 
-async function ensureSchema(pool) {
+async function ensureSchema(pool, options) {
   await pool.query(`
     CREATE TABLE IF NOT EXISTS canvas_sizes (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -43,6 +43,7 @@ async function ensureSchema(pool) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       fade_between_slides TINYINT(1) NOT NULL DEFAULT 0,
+      skip_unavailable_rtmp TINYINT(1) NOT NULL DEFAULT 0,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -102,6 +103,7 @@ async function ensureSchema(pool) {
       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,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -115,7 +117,8 @@ async function ensureSchema(pool) {
       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,
@@ -341,7 +344,7 @@ async function ensureSchema(pool) {
     [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, null]
   );
 
-  await migrations.runMigrations(pool);
+  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]);

src/db/migrations.js

@@ -1,3 +1,5 @@
+const fs = require('fs');
+const path = require('path');
 const { version: appVersion } = require('../../package.json');
 
 function parseVersion(value) {
@@ -260,6 +262,27 @@ function replaceUploadPrefixInValue(value) {
   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;
@@ -327,6 +350,187 @@ async function backfillLegacyMediaPaths(pool) {
   }
 }
 
+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 (
@@ -401,19 +605,20 @@ const migrations = [
   {
     key: 'schema-columns-current',
     version: appVersion,
-    comment: 'Add the current table columns and audit fields that define the released schema.',
+    comment: 'Backfill the released schema columns for older databases.',
     order: 20,
     up: async function (pool) {
-      // v1.4.6: keep the current canvas_sizes shape available in older databases.
+      // Current released schema: keep canvas_sizes audit fields 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.
+      // Current released schema: ensure playlists carry the playback and 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.
+      // Current released schema: keep slide template canvas and background fields available.
       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');
@@ -421,23 +626,24 @@ const migrations = [
       await addAuditColumns(pool, 'slide_templates');
       await backfillLegacySlideTemplateCanvasSize(pool);
 
-      // v1.4.6: slide_template_regions gained font family and audit fields.
+      // Current released schema: keep slide template region typography and audit fields available.
       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.
+      // Current released schema: keep structured slide content and media fields available.
       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');
+      // Current released schema: keep playlist slide duration, schedule, and audit fields available.
+      await addColumnIfMissing(pool, 'playlist_slides', 'duration_seconds', 'DECIMAL(10,3) NOT NULL DEFAULT 10.000');
       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');
@@ -447,12 +653,12 @@ const migrations = [
       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.
+      // Current released schema: keep screen playlist bindings and audit fields available.
       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.
+      // Current released schema: keep RSS feed interval and audit fields available.
       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');
@@ -461,14 +667,14 @@ const migrations = [
       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.
+      // Current released schema: keep normalized RSS feed item snapshots available.
       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.
+      // Current released schema: keep API source polling and snapshot fields available.
       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');
@@ -481,7 +687,7 @@ const migrations = [
       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.
+      // Current released schema: keep onboarding device and RBAC audit fields available.
       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');
@@ -517,6 +723,42 @@ const migrations = [
       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: 'playlist-slide-use-video-duration-flag',
+    version: appVersion,
+    comment: 'Add the playlist slide flag that follows the current video duration.',
+    order: 23,
+    up: async function (pool) {
+      await addColumnIfMissing(pool, 'playlist_slides', 'use_video_duration', 'TINYINT(1) NOT NULL DEFAULT 0');
+    }
+  },
+  {
+    key: 'playlist-slide-duration-decimals',
+    version: appVersion,
+    comment: 'Widen playlist slide durations to preserve fractional seconds.',
+    order: 24,
+    up: async function (pool) {
+      await pool.query('ALTER TABLE playlist_slides MODIFY duration_seconds DECIMAL(10,3) NOT NULL DEFAULT 10.000');
+    }
+  },
   {
     key: 'media-path-prefix-rename',
     version: appVersion,
@@ -526,6 +768,24 @@ const migrations = [
       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,
@@ -556,7 +816,7 @@ const migrations = [
   }
 ];
 
-async function runMigrations(pool) {
+async function runMigrations(pool, options) {
   const appliedRows = await getAppliedMigrationRows(pool);
   const appliedKeys = new Set((appliedRows || []).map(function (row) {
     return String(row.migration_key || '').trim();
@@ -576,7 +836,7 @@ async function runMigrations(pool) {
     });
 
   for (const migration of pendingMigrations) {
-    await migration.up(pool);
+    await migration.up(pool, options || {});
     await recordMigration(pool, migration);
   }
 }

src/player.js

@@ -67,7 +67,7 @@ async function start() {
 
   async function syncDatabaseState() {
     try {
-      await common.ensureSchema(pool);
+      await common.ensureSchema(pool, { mediaDir: MEDIA_DIR });
 
       if (playerRuntime.snapshotAllConnections().length > 0) {
         await pruneStaleOnboardingDevices(pool);

src/player/modules/rtmp-streams.js

@@ -6,7 +6,13 @@ const { spawn } = require('child_process');
 function createRtmpStreamService(options) {
   const mediaDir = options && options.mediaDir ? options.mediaDir : null;
   const ffmpegPath = options && options.ffmpegPath ? options.ffmpegPath : 'ffmpeg';
+  const ffprobePath = options && options.ffprobePath ? options.ffprobePath : 'ffprobe';
+  const probeIntervalMs = options && options.probeIntervalMs ? Number(options.probeIntervalMs) : 2000;
   const sessions = new Map();
+  const watchedSources = new Set();
+  const sourceStatusCache = new Map();
+  const sourceProbePromises = new Map();
+  let probeTimer = null;
 
   if (!mediaDir) {
     throw new Error('mediaDir is required');
@@ -48,6 +54,207 @@ function createRtmpStreamService(options) {
     return false;
   }
 
+  function runCommand(command, args, timeoutMs) {
+    return new Promise(function (resolve) {
+      var child = spawn(command, args, {
+        stdio: ['ignore', 'pipe', 'pipe']
+      });
+      var stdout = '';
+      var stderr = '';
+      var finished = false;
+      var timer = null;
+
+      function done(result) {
+        if (finished) {
+          return;
+        }
+        finished = true;
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        resolve(result);
+      }
+
+      child.stdout.on('data', function (chunk) {
+        stdout += String(chunk || '');
+      });
+
+      child.stderr.on('data', function (chunk) {
+        stderr += String(chunk || '');
+      });
+
+      child.on('error', function (error) {
+        done({ ok: false, error: error, stdout: stdout, stderr: stderr, timedOut: false });
+      });
+
+      child.on('exit', function (code, signal) {
+        done({ ok: code === 0, code: code, signal: signal, stdout: stdout, stderr: stderr, timedOut: false });
+      });
+
+      timer = setTimeout(function () {
+        try {
+          child.kill('SIGKILL');
+        } catch (_error) {
+          // ignore timeout cleanup errors
+        }
+        done({ ok: false, code: null, signal: 'SIGKILL', stdout: stdout, stderr: stderr, timedOut: true });
+      }, Math.max(1000, Number(timeoutMs || 0) || 4000));
+    });
+  }
+
+  async function probeSourceUrl(sourceUrl) {
+    const normalizedSource = normalizeSourceUrl(sourceUrl);
+    const result = await runCommand(ffprobePath, [
+      '-hide_banner',
+      '-loglevel', 'error',
+      '-rw_timeout', '3000000',
+      '-show_streams',
+      '-of', 'json',
+      normalizedSource
+    ], 4000);
+
+    if (!result.ok) {
+      return {
+        live: false,
+        timedOut: Boolean(result.timedOut),
+        stderr: String(result.stderr || '').trim()
+      };
+    }
+
+    try {
+      const parsed = JSON.parse(String(result.stdout || '{}'));
+      const streams = Array.isArray(parsed && parsed.streams) ? parsed.streams : [];
+      return {
+        live: streams.length > 0,
+        timedOut: false,
+        stderr: String(result.stderr || '').trim()
+      };
+    } catch (_error) {
+      return {
+        live: false,
+        timedOut: false,
+        stderr: String(result.stderr || '').trim()
+      };
+    }
+  }
+
+  function getSourceStatus(sourceUrl) {
+    return sourceStatusCache.get(String(sourceUrl || '').trim()) || null;
+  }
+
+  function setSourceStatus(sourceUrl, nextStatus) {
+    const normalizedSource = String(sourceUrl || '').trim();
+    if (!normalizedSource) {
+      return null;
+    }
+    const status = Object.assign({
+      live: false,
+      probing: false,
+      checkedAt: Date.now(),
+      timedOut: false,
+      stderr: ''
+    }, nextStatus || {});
+    status.live = Boolean(status.live);
+    status.probing = Boolean(status.probing);
+    status.checkedAt = Number(status.checkedAt || Date.now());
+    sourceStatusCache.set(normalizedSource, status);
+    return status;
+  }
+
+  function registerSourceWatch(sourceUrl) {
+    const normalizedSource = normalizeSourceUrl(sourceUrl);
+    watchedSources.add(normalizedSource);
+    return normalizedSource;
+  }
+
+  async function refreshSourceStatus(sourceUrl) {
+    const normalizedSource = registerSourceWatch(sourceUrl);
+    const existingPromise = sourceProbePromises.get(normalizedSource) || null;
+    if (existingPromise) {
+      return existingPromise;
+    }
+
+    setSourceStatus(normalizedSource, Object.assign({}, getSourceStatus(normalizedSource) || {}, {
+      probing: true
+    }));
+
+    const probePromise = probeSourceUrl(normalizedSource).then(function (probe) {
+      return setSourceStatus(normalizedSource, {
+        live: Boolean(probe.live),
+        probing: false,
+        checkedAt: Date.now(),
+        timedOut: Boolean(probe.timedOut),
+        stderr: String(probe.stderr || '')
+      });
+    }).catch(function (error) {
+      return setSourceStatus(normalizedSource, {
+        live: false,
+        probing: false,
+        checkedAt: Date.now(),
+        timedOut: false,
+        stderr: String(error && error.message ? error.message : '')
+      });
+    }).finally(function () {
+      sourceProbePromises.delete(normalizedSource);
+    });
+
+    sourceProbePromises.set(normalizedSource, probePromise);
+    return probePromise;
+  }
+
+  function scheduleSourceRefresh(sourceUrl) {
+    const normalizedSource = registerSourceWatch(sourceUrl);
+    const currentStatus = getSourceStatus(normalizedSource);
+    if (currentStatus && currentStatus.probing) {
+      return sourceProbePromises.get(normalizedSource) || Promise.resolve(currentStatus);
+    }
+    return refreshSourceStatus(normalizedSource);
+  }
+
+  function isSourceStatusFresh(status) {
+    if (!status || !status.checkedAt) {
+      return false;
+    }
+    return Date.now() - Number(status.checkedAt || 0) < probeIntervalMs;
+  }
+
+  function sweepWatchedSources() {
+    watchedSources.forEach(function (sourceUrl) {
+      const status = getSourceStatus(sourceUrl);
+      if (!status || !isSourceStatusFresh(status) || status.live === false) {
+        scheduleSourceRefresh(sourceUrl);
+      }
+    });
+  }
+
+  if (probeIntervalMs > 0) {
+    probeTimer = setInterval(function () {
+      sweepWatchedSources();
+    }, probeIntervalMs);
+    if (probeTimer && typeof probeTimer.unref === 'function') {
+      probeTimer.unref();
+    }
+  }
+
+  async function isSessionLive(session) {
+    if (!session || !session.process) {
+      return false;
+    }
+    if (session.exitCode !== undefined && session.exitCode !== null) {
+      return false;
+    }
+    if (session.exitSignal !== undefined && session.exitSignal !== null) {
+      return false;
+    }
+    try {
+      const stat = await fs.promises.stat(session.manifestPath);
+      return stat.isFile() && stat.size > 0;
+    } catch (_error) {
+      return false;
+    }
+  }
+
   function buildPlaylistUrl(key) {
     return '/api/rtmp/streams/' + encodeURIComponent(key) + '/index.m3u8';
   }
@@ -56,14 +263,30 @@ function createRtmpStreamService(options) {
     const normalizedSource = normalizeSourceUrl(sourceUrl);
     const normalizedDisableAudio = Boolean(disableAudio);
     const key = getSessionKey(normalizedSource, normalizedDisableAudio);
-
-    if (sessions.has(key)) {
-      return sessions.get(key);
-    }
-
     const directory = path.join(cacheRoot, key);
     const manifestPath = path.join(directory, 'index.m3u8');
 
+    const existingSession = sessions.get(key) || null;
+    if (existingSession && existingSession.process && existingSession.exitCode === null && existingSession.exitSignal === null) {
+      return existingSession;
+    }
+
+    if (existingSession) {
+      sessions.delete(key);
+      try {
+        if (existingSession.process && typeof existingSession.process.kill === 'function') {
+          existingSession.process.kill('SIGKILL');
+        }
+      } catch (_error) {
+        // ignore cleanup errors
+      }
+      try {
+        await fs.promises.rm(directory, { recursive: true, force: true });
+      } catch (_error2) {
+        // ignore cleanup errors
+      }
+    }
+
     await ensureDirectory(directory);
 
     const args = [
@@ -117,6 +340,8 @@ function createRtmpStreamService(options) {
       manifestPath: manifestPath,
       playlistUrl: buildPlaylistUrl(key),
       process: child,
+      exitCode: null,
+      exitSignal: null,
       ready: waitForFile(manifestPath, 5000)
     };
 
@@ -132,6 +357,51 @@ function createRtmpStreamService(options) {
     return session.playlistUrl + '?t=' + Date.now();
   }
 
+  async function getSessionStatus(sourceUrl, disableAudio) {
+    const normalizedSource = normalizeSourceUrl(sourceUrl);
+    const normalizedDisableAudio = Boolean(disableAudio);
+    registerSourceWatch(normalizedSource);
+
+    let sourceStatus = getSourceStatus(normalizedSource);
+    if (!sourceStatus) {
+      scheduleSourceRefresh(normalizedSource).catch(function (_error) {
+        return null;
+      });
+      sourceStatus = getSourceStatus(normalizedSource);
+    } else if (!isSourceStatusFresh(sourceStatus) && !sourceStatus.probing) {
+      scheduleSourceRefresh(normalizedSource).catch(function (_error) {
+        return null;
+      });
+    }
+
+    if (!sourceStatus || !sourceStatus.live) {
+      return {
+        session: null,
+        ready: false,
+        live: false,
+        probing: Boolean(sourceStatus && sourceStatus.probing),
+        checkedAt: sourceStatus ? sourceStatus.checkedAt : null,
+        timedOut: Boolean(sourceStatus && sourceStatus.timedOut),
+        stderr: String(sourceStatus && sourceStatus.stderr || '')
+      };
+    }
+
+    const session = await ensureSession(normalizedSource, normalizedDisableAudio);
+    const ready = await session.ready.catch(function () {
+      return false;
+    });
+    const live = ready && Boolean(session && session.process && session.exitCode === null && session.exitSignal === null);
+    return {
+      session: session,
+      ready: ready,
+      live: live,
+      probing: Boolean(sourceStatus && sourceStatus.probing),
+      checkedAt: sourceStatus ? sourceStatus.checkedAt : null,
+      timedOut: false,
+      stderr: ''
+    };
+  }
+
   function getSessionByKey(key) {
     return sessions.get(String(key || '').trim()) || null;
   }
@@ -141,9 +411,13 @@ function createRtmpStreamService(options) {
     if (!session) {
       return null;
     }
-    await session.ready.catch(function () {
-      return false;
-    });
+    if (!session.process || session.exitCode !== null || session.exitSignal !== null) {
+      return null;
+    }
+    const live = await isSessionLive(session);
+    if (!live) {
+      return null;
+    }
     return session.manifestPath;
   }
 
@@ -163,6 +437,11 @@ function createRtmpStreamService(options) {
     ensureSession: ensureSession,
     getPlaylistUrl: getPlaylistUrl,
     getSessionByKey: getSessionByKey,
+    isSessionLive: isSessionLive,
+    getSessionStatus: getSessionStatus,
+    refreshSourceStatus: refreshSourceStatus,
+    scheduleSourceRefresh: scheduleSourceRefresh,
+    getSourceStatus: getSourceStatus,
     getManifestFilePath: getManifestFilePath,
     getSegmentFilePath: getSegmentFilePath
   };

src/player/player-page.script.html

@@ -6,16 +6,19 @@
   let currentPlaylistSignature = '';
   let currentPlaylistEtag = '';
   let currentPlaylistFadeBetweenSlides = false;
+  let currentPlaylistSkipUnavailableRtmp = false;
   let pendingPlaylistUpdate = null;
   let activeSlidesCacheKey = '';
   let activeSlidesCacheValue = [];
   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;
   let slideTransitionTimer = null;
+  let slideRenderRequestId = 0;
   let preloadContainer = null;
   let preloadSignature = '';
   let commandSocket = null;
@@ -154,16 +157,18 @@
     }
     if (initialData && initialData.playlist) {
       currentPlaylistFadeBetweenSlides = Boolean(initialData.playlist.fade_between_slides);
+      currentPlaylistSkipUnavailableRtmp = Boolean(initialData.playlist.skip_unavailable_rtmp);
     }
     savePlaylistSnapshot({
       slides: slides,
       signature: currentPlaylistSignature,
       fadeBetweenSlides: currentPlaylistFadeBetweenSlides,
+      skipUnavailableRtmp: currentPlaylistSkipUnavailableRtmp,
       etag: currentPlaylistEtag
     });
     syncWebpagePreloads(getActiveSlidesFrom(slides), index);
-    if (typeof syncRtmpPreloads === 'function') {
-      syncRtmpPreloads(getActiveSlidesFrom(slides), index);
+    if (typeof syncRtmpWarmups === 'function') {
+      syncRtmpWarmups(getActiveSlidesFrom(slides), index);
     }
     syncBlackoutState();
     showCurrent();

src/player/playlist.js

@@ -73,11 +73,11 @@ function createPlayerPlaylistService(options) {
         return payloadWithoutPlaylist;
       }
 
-      const [playlistRows] = await pool.query('SELECT id, name, fade_between_slides, 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 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,
-               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,
+         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,
+           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
         JOIN slides sl ON sl.id = ps.slide_id
@@ -108,12 +108,46 @@ function createPlayerPlaylistService(options) {
         });
       }
 
+      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,
-          duration_seconds: slide.duration_seconds,
+          modified_at: slide.modified_at,
+          duration_seconds: videoDuration || storedDuration,
+          use_video_duration: Boolean(slide.use_video_duration),
           schedule_mode: slide.schedule_mode,
           schedule_start_datetime: slide.schedule_start_datetime,
           schedule_end_datetime: slide.schedule_end_datetime,
@@ -125,7 +159,7 @@ function createPlayerPlaylistService(options) {
           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
         };
       });
 
@@ -180,6 +214,7 @@ function createPlayerPlaylistService(options) {
     updatePlaylistRevisionHash(hash, playlist && playlist.id);
     updatePlaylistRevisionHash(hash, playlist && playlist.modified_at);
     updatePlaylistRevisionHash(hash, playlist && playlist.fade_between_slides);
+    updatePlaylistRevisionHash(hash, playlist && playlist.skip_unavailable_rtmp);
 
     (Array.isArray(slideRows) ? slideRows : []).forEach(function (slide) {
       updatePlaylistRevisionHash(hash, slide.id);
@@ -192,6 +227,7 @@ function createPlayerPlaylistService(options) {
       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%;
@@ -397,6 +410,7 @@ body.screen-blackout #app {
 .template-region-rtmp-placeholder {
   position: absolute;
   inset: 0;
+  display: flex;
 }
 
 .template-region-placeholder {

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

@@ -89,6 +89,12 @@ function scheduleSlideAdvance(delayMs) {
   }, holdDelayMs);
 }
 
+// Add the fade time to a slide's hold duration unless the slide duration already accounts for it.
+function getSlideHoldDelay(delayMs, skipFadePadding) {
+  var holdDelayMs = Math.max(1, Number(delayMs || 0));
+  return holdDelayMs + (currentPlaylistFadeBetweenSlides && !skipFadePadding ? slideFadeDurationMs : 0);
+}
+
 // Cancel any pending fade-transition cleanup.
 function clearSlideTransitionTimer() {
   if (slideTransitionTimer) {
@@ -103,11 +109,48 @@ function renderSlideMarkup(markup, shouldFade) {
   if (typeof destroyRtmpRegions === 'function') {
     destroyRtmpRegions(app);
   }
+
+  function initializeRenderedVideoPlayback(root) {
+    if (!root) {
+      return;
+    }
+
+    var videos = root.querySelectorAll('.template-region.video video');
+    Array.prototype.forEach.call(videos, function (video) {
+      if (!video) {
+        return;
+      }
+
+      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;
+          });
+        }
+      }
+
+      if (video.readyState >= 2) {
+        startPlayback();
+        return;
+      }
+
+      video.addEventListener('canplay', startPlayback, { once: true });
+      video.addEventListener('loadedmetadata', startPlayback, { once: true });
+    });
+  }
+
   if (!shouldFade) {
     app.innerHTML = markup;
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(app);
     }
+    initializeRenderedVideoPlayback(app);
     return app.firstElementChild;
   }
 
@@ -137,6 +180,7 @@ function renderSlideMarkup(markup, shouldFade) {
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(nextShell);
     }
+    initializeRenderedVideoPlayback(nextShell);
     return nextShell;
   }
 
@@ -156,6 +200,8 @@ function renderSlideMarkup(markup, shouldFade) {
     syncRtmpRegions(nextShell);
   }
 
+  initializeRenderedVideoPlayback(nextShell);
+
   slideTransitionTimer = window.setTimeout(function () {
     if (previousShell && previousShell.parentNode) {
       previousShell.parentNode.removeChild(previousShell);
@@ -274,7 +320,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);

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

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

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

@@ -1,5 +1,5 @@
 // Render the slide at the requested index within the active set.
-function renderSlideAtIndex(sourceSlides, targetIndex) {
+async function renderSlideAtIndex(sourceSlides, targetIndex) {
   const availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
   if (!availableSlides.length) {
     renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
@@ -11,18 +11,52 @@ function renderSlideAtIndex(sourceSlides, targetIndex) {
   if (!Number.isFinite(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= availableSlides.length) {
   }
 
-  const slide = availableSlides[normalizedIndex];
+  var slideCount = availableSlides.length;
+  var currentIndex = normalizedIndex;
+  var slide = null;
+  var attempts = 0;
+  var renderRequestId = ++slideRenderRequestId;
+
+  while (attempts < slideCount) {
+    slide = availableSlides[currentIndex];
+    if (!slide) {
+      break;
+    }
+    if (currentPlaylistSkipUnavailableRtmp && typeof probeRtmpSlideAvailability === 'function') {
+      var isAvailable = await probeRtmpSlideAvailability(slide);
+      if (!isAvailable) {
+        if (renderRequestId !== slideRenderRequestId) {
+          return false;
+        }
+        currentIndex = (currentIndex + 1) % slideCount;
+        attempts += 1;
+        slide = null;
+        continue;
+      }
+    }
+    if (renderRequestId !== slideRenderRequestId) {
+      break;
+    }
+    break;
+  }
+
   if (!slide) {
+    if (currentPlaylistSkipUnavailableRtmp) {
+      renderEmpty(slides.length ? 'No RTMP slides are currently available.' : 'No slides assigned to this screen yet.');
+      lastRenderedViewKey = getCurrentRenderKey(availableSlides);
+      scheduleRefreshRetry();
+      return false;
+    }
     renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
     return false;
   }
 
-  index = normalizedIndex;
+  index = currentIndex;
   var markup = buildSlideMarkup(slide);
   renderSlideMarkup(markup, currentPlaylistFadeBetweenSlides);
   sendCommandState(slide);
   if (!isPaused) {
-    scheduleSlideAdvance(Math.max(1, Number(slide.duration_seconds || 10)) * 1000);
+    scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(slide.duration_seconds || 10)) * 1000));
   }
   lastRenderedViewKey = getCurrentRenderKey(availableSlides);
   return true;
@@ -36,6 +70,7 @@ function applyPendingPlaylistUpdate() {
   slides = pendingPlaylistUpdate.slides;
   currentPlaylistSignature = pendingPlaylistUpdate.signature;
   currentPlaylistFadeBetweenSlides = pendingPlaylistUpdate.fadeBetweenSlides;
+  currentPlaylistSkipUnavailableRtmp = Boolean(pendingPlaylistUpdate.skipUnavailableRtmp);
   pendingPlaylistUpdate = null;
   clearActiveSlidesCache();
   slideMarkupCache = Object.create(null);
@@ -53,18 +88,45 @@ function showCurrent() {
   applyPendingPlaylistUpdate();
   const activeSlides = getCurrentActiveSlides();
   syncWebpagePreloads(activeSlides, index);
-  if (typeof syncRtmpPreloads === 'function') {
-    syncRtmpPreloads(activeSlides, index);
+  if (typeof syncRtmpWarmups === 'function') {
+    syncRtmpWarmups(activeSlides, index);
   }
   if (!activeSlides.length) {
     renderEmpty(slides.length ? 'No slides are scheduled for this time.' : 'No slides assigned to this screen yet.');
     lastRenderedViewKey = getCurrentRenderKey(activeSlides);
     return;
   }
-  renderSlideAtIndex(activeSlides, index);
+  void renderSlideAtIndex(activeSlides, index);
   lastRenderedViewKey = getCurrentRenderKey(activeSlides);
 }
 
+// Skip the current slide when an RTMP feed is unavailable and the playlist asks for it.
+function handleRtmpPlaybackFailure(message, options) {
+  if (!currentPlaylistSkipUnavailableRtmp) {
+    return false;
+  }
+
+  var silent = Boolean(options && options.silent);
+  const activeSlides = getCurrentActiveSlides();
+  if (!activeSlides.length) {
+    return false;
+  }
+
+  clearSlideTimer();
+  if (!silent) {
+    logDebug('Skipping RTMP slide because the stream is unavailable.', String(message || ''), 'error');
+  }
+
+  const nextIndex = (Number(index || 0) + 1) % activeSlides.length;
+  window.setTimeout(function () {
+    if (!getCurrentActiveSlides().length) {
+      return;
+    }
+    void renderSlideAtIndex(getCurrentActiveSlides(), nextIndex);
+  }, 0);
+  return true;
+}
+
 // Fetch the latest playlist and queue any updates.
 function refresh() {
   var request = new XMLHttpRequest();
@@ -85,7 +147,7 @@ function refresh() {
       markRefreshHealthy();
       setOfflineBannerVisible(false);
       if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-        scheduleSlideAdvance(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000);
+          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
       }
       return;
     }
@@ -105,10 +167,12 @@ function refresh() {
       const nextSignature = getPlaylistRevision(data);
       const nextSlides = Array.isArray(data.slides) ? data.slides.map(normalizeSlide) : [];
       const nextFadeBetweenSlides = Boolean(data && data.playlist && data.playlist.fade_between_slides);
+      const nextSkipUnavailableRtmp = Boolean(data && data.playlist && data.playlist.skip_unavailable_rtmp);
       savePlaylistSnapshot({
         slides: nextSlides,
         signature: nextSignature,
         fadeBetweenSlides: nextFadeBetweenSlides,
+        skipUnavailableRtmp: nextSkipUnavailableRtmp,
         etag: responseEtag
       });
       markRefreshHealthy();
@@ -121,6 +185,7 @@ function refresh() {
         slides = nextSlides;
         currentPlaylistSignature = nextSignature;
         currentPlaylistFadeBetweenSlides = nextFadeBetweenSlides;
+        currentPlaylistSkipUnavailableRtmp = nextSkipUnavailableRtmp;
         index = 0;
         showCurrent();
         sendCommandState(lastRenderedSlide);
@@ -128,18 +193,19 @@ function refresh() {
       }
       if (nextSignature === currentPlaylistSignature || (pendingPlaylistUpdate && nextSignature === pendingPlaylistUpdate.signature)) {
         if (currentActiveSlides.length < 2 && lastRenderedSlide) {
-          scheduleSlideAdvance(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000);
+          scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
         }
         return;
       }
       syncWebpagePreloads(getActiveSlidesFrom(nextSlides), index);
-      if (typeof syncRtmpPreloads === 'function') {
-        syncRtmpPreloads(getActiveSlidesFrom(nextSlides), index);
+      if (typeof syncRtmpWarmups === 'function') {
+        syncRtmpWarmups(getActiveSlidesFrom(nextSlides), index);
       }
       if (currentActiveSlides.length < 2) {
         slides = nextSlides;
         currentPlaylistSignature = nextSignature;
         currentPlaylistFadeBetweenSlides = nextFadeBetweenSlides;
+        currentPlaylistSkipUnavailableRtmp = nextSkipUnavailableRtmp;
         pendingPlaylistUpdate = null;
         index = 0;
         showCurrent();
@@ -149,7 +215,8 @@ function refresh() {
       pendingPlaylistUpdate = {
         slides: nextSlides,
         signature: nextSignature,
-        fadeBetweenSlides: nextFadeBetweenSlides
+        fadeBetweenSlides: nextFadeBetweenSlides,
+        skipUnavailableRtmp: nextSkipUnavailableRtmp
       };
       logDebug('Playlist update detected; applying on next slide transition.');
     } catch (_error) {
@@ -171,7 +238,7 @@ function refresh() {
       setOfflineBannerVisible(true);
       scheduleRefreshRetry();
     if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-      scheduleSlideAdvance(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000);
+      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
     }
   };
   request.ontimeout = function () {
@@ -183,7 +250,7 @@ function refresh() {
     setOfflineBannerVisible(true);
     scheduleRefreshRetry();
     if (lastRenderedSlide && getCurrentActiveSlides().length < 2) {
-      scheduleSlideAdvance(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000);
+      scheduleSlideAdvance(getSlideHoldDelay(Math.max(1, Number(lastRenderedSlide.duration_seconds || 10)) * 1000));
     }
   };
   request.send();

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

@@ -411,6 +411,22 @@ function getTemplateLayout(template) {
   return layout;
 }
 
+// Build a dark backdrop style for template and media canvases.
+function buildBackdropStyle(backgroundColor, backgroundImagePath) {
+  var color = String(backgroundColor || '#111111').trim() || '#111111';
+  var style = 'background-color:' + escapeHtml(color) + ';';
+  var gradient = 'linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42))';
+
+  if (backgroundImagePath) {
+    style += 'background-image:' + gradient + ',url("' + escapeHtml(backgroundImagePath) + '");';
+    style += 'background-position:center,center;background-size:100% 100%,cover;background-repeat:no-repeat,no-repeat;';
+    return style;
+  }
+
+  style += 'background-image:' + gradient + ';background-position:center;background-size:100% 100%;background-repeat:no-repeat;';
+  return style;
+}
+
 // Build the cache key for a template render plan.
 function getTemplateRenderPlanCacheKey(template) {
   return getTemplateLayoutCacheKey(template);
@@ -436,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);
       }
@@ -469,7 +488,7 @@ function renderTemplateSlideMarkup(slide) {
     const regionContent = content[region.regionKey] || {};
     return plan.renderRegion(region, regionContent);
   }).join('') : '';
-  const stageStyle = layout ? 'background-color:' + escapeHtml(layout.backgroundColor || '#111111') + ';' : '';
+  const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path) : '';
   return renderSlideShell(slide, '', (layout ? layout.canvasWidth : 0) + 'px', (layout ? layout.canvasHeight : 0) + 'px', '<div class="template-stage" style="' + stageStyle + '">' + (layout ? layout.background : '') + regions + '</div>');
 }
 
@@ -486,22 +505,36 @@ function renderMediaSlideContent(slide) {
 function renderMediaSlideMarkup(slide) {
   const canvasSize = fitCanvasSize(16, 9, window.innerWidth, window.innerHeight);
   const media = renderMediaSlideContent(slide);
-  return renderSlideShell(slide, 'slide-media', canvasSize.width + 'px', canvasSize.height + 'px', media);
+  const canvasStyle = slide.kind === 'image' ? buildBackdropStyle('#111111', slide.media_url) : '';
+  return renderSlideShell(slide, 'slide-media', canvasSize.width + 'px', canvasSize.height + 'px', media, canvasStyle);
 }
 
 // Render the shared slide shell around slide-specific inner content.
-function renderSlideShell(slide, canvasClass, canvasWidth, canvasHeight, innerHtml) {
+function renderSlideShell(slide, canvasClass, canvasWidth, canvasHeight, innerHtml, canvasStyle) {
   const body = slide.body ? '<div class="body">' + escapeHtml(slide.body) + '</div>' : '';
   const className = canvasClass ? 'slide-canvas ' + canvasClass : 'slide-canvas';
-  return '<div class="slide"><div class="' + className + '" style="width:' + canvasWidth + ';height:' + canvasHeight + ';">' + innerHtml + body + '</div></div>';
+  const style = 'width:' + canvasWidth + ';height:' + canvasHeight + ';' + (canvasStyle || '');
+  return '<div class="slide"><div class="' + className + '" style="' + style + '">' + innerHtml + body + '</div></div>';
 }
 
 // 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/rtmp.js

@@ -1,20 +1,296 @@
 function renderRtmpRegion(region, regionContent) {
   var url = String(regionContent.value || '').trim();
   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 '<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') + '" autoplay playsinline preload="auto" tabindex="-1" disablepictureinpicture></video><div class="template-region-placeholder template-region-rtmp-placeholder">Loading RTMP stream...</div></div>';
+  return '<div class="template-region rtmp" style="' + region.baseStyle + '"><video class="template-region-rtmp-video" data-rtmp-source="' + escapeHtml(url) + '" data-rtmp-disable-audio="' + (disableAudio ? '1' : '0') + '" data-rtmp-skip-unavailable="' + (skipUnavailable ? '1' : '0') + '" autoplay playsinline preload="auto" tabindex="-1" disablepictureinpicture></video><div class="template-region-placeholder template-region-rtmp-placeholder">Loading RTMP stream...</div></div>';
 }
 
 function getRtmpSessionUrl(sourceUrl, disableAudio) {
   return '/api/rtmp/session?source=' + encodeURIComponent(sourceUrl) + '&disableAudio=' + (disableAudio ? '1' : '0');
 }
 
-var rtmpPreloadSignature = '';
+var rtmpAvailabilityCache = Object.create(null);
+var rtmpAvailabilityRetryMs = 5000;
+var rtmpWarmupTimers = Object.create(null);
+var rtmpBrowserReadyCache = Object.create(null);
+var rtmpBrowserWarmupTimers = Object.create(null);
+var rtmpBrowserWarmupContainer = null;
+var rtmpBrowserWarmupStates = Object.create(null);
 
-function getRtmpPreloadSlides(sourceSlides, targetIndex) {
+function getRtmpAvailabilityKey(sourceUrl, disableAudio) {
+  return String(sourceUrl || '').trim() + '\n' + (disableAudio ? '1' : '0');
+}
+
+function setRtmpAvailability(sourceUrl, disableAudio, available) {
+  var key = getRtmpAvailabilityKey(sourceUrl, disableAudio);
+  rtmpAvailabilityCache[key] = {
+    available: available === null ? null : Boolean(available),
+    pending: available === null,
+    checkedAt: Date.now()
+  };
+}
+
+function getRtmpAvailability(sourceUrl, disableAudio) {
+  return rtmpAvailabilityCache[getRtmpAvailabilityKey(sourceUrl, disableAudio)] || null;
+}
+
+function isRtmpAvailabilityStale(status) {
+  if (!status || !status.checkedAt) {
+    return true;
+  }
+  return Date.now() - Number(status.checkedAt || 0) >= rtmpAvailabilityRetryMs;
+}
+
+function isRtmpSlideUnavailable(slide) {
+  if (!slide || !slide.template || !Array.isArray(slide.template.regions)) {
+    return false;
+  }
+
+  var content = slide.content || {};
+  return slide.template.regions.some(function (region) {
+    if (region.region_type !== 'rtmp') {
+      return false;
+    }
+
+    var regionContent = content[region.region_key] || {};
+    var sourceUrl = String(regionContent.value || '').trim();
+    if (!sourceUrl) {
+      return false;
+    }
+
+    var disableAudio = regionContent.disable_audio === undefined ? true : Boolean(regionContent.disable_audio);
+    var serverStatus = getRtmpAvailability(sourceUrl, disableAudio);
+    return Boolean(!serverStatus || isRtmpAvailabilityStale(serverStatus) || serverStatus.available !== true);
+  });
+}
+
+function clearRtmpAvailabilityForSlide(slide) {
+  if (!slide || !slide.template || !Array.isArray(slide.template.regions)) {
+    return;
+  }
+
+  var content = slide.content || {};
+  slide.template.regions.forEach(function (region) {
+    if (region.region_type !== 'rtmp') {
+      return;
+    }
+
+    var regionContent = content[region.region_key] || {};
+    var sourceUrl = String(regionContent.value || '').trim();
+    if (!sourceUrl) {
+      return;
+    }
+
+    var disableAudio = regionContent.disable_audio === undefined ? true : Boolean(regionContent.disable_audio);
+    setRtmpAvailability(sourceUrl, disableAudio, null);
+  });
+}
+
+function setRtmpBrowserReady(sourceUrl, disableAudio, ready) {
+  var key = getRtmpAvailabilityKey(sourceUrl, disableAudio);
+  rtmpBrowserReadyCache[key] = {
+    ready: ready === null ? null : Boolean(ready),
+    checkedAt: Date.now()
+  };
+}
+
+function getRtmpBrowserReady(sourceUrl, disableAudio) {
+  return rtmpBrowserReadyCache[getRtmpAvailabilityKey(sourceUrl, disableAudio)] || null;
+}
+
+function isRtmpBrowserReadyStale(status) {
+  if (!status || !status.checkedAt) {
+    return true;
+  }
+  return Date.now() - Number(status.checkedAt || 0) >= rtmpAvailabilityRetryMs;
+}
+
+function ensureRtmpBrowserWarmupContainer() {
+  if (rtmpBrowserWarmupContainer) {
+    return rtmpBrowserWarmupContainer;
+  }
+
+  rtmpBrowserWarmupContainer = document.createElement('div');
+  rtmpBrowserWarmupContainer.className = 'rtmp-browser-warmups';
+  rtmpBrowserWarmupContainer.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(rtmpBrowserWarmupContainer);
+  return rtmpBrowserWarmupContainer;
+}
+
+function getRtmpBrowserWarmupState(sourceUrl, disableAudio) {
+  return rtmpBrowserWarmupStates[getRtmpAvailabilityKey(sourceUrl, disableAudio)] || null;
+}
+
+function clearRtmpBrowserWarmupState(sourceUrl, disableAudio) {
+  var key = getRtmpAvailabilityKey(sourceUrl, disableAudio);
+  var state = rtmpBrowserWarmupStates[key];
+  if (!state) {
+    return;
+  }
+
+  if (state.video && state.video.__rtmpBrowserWarmupTimer) {
+    window.clearTimeout(state.video.__rtmpBrowserWarmupTimer);
+    state.video.__rtmpBrowserWarmupTimer = null;
+  }
+  if (state.video && state.video.__rtmpHls) {
+    try {
+      state.video.__rtmpHls.destroy();
+    } catch (_error) {
+      // ignore cleanup errors
+    }
+    state.video.__rtmpHls = null;
+  }
+  if (state.wrapper && state.wrapper.parentNode) {
+    state.wrapper.parentNode.removeChild(state.wrapper);
+  }
+  delete rtmpBrowserWarmupStates[key];
+}
+
+function warmupRtmpBrowser(sourceUrl, disableAudio) {
+  var key = getRtmpAvailabilityKey(sourceUrl, disableAudio);
+  var existing = rtmpBrowserWarmupStates[key];
+  if (existing) {
+    return existing;
+  }
+
+  var wrapper = document.createElement('div');
+  wrapper.className = 'rtmp-browser-warmup-entry';
+  wrapper.setAttribute('aria-hidden', 'true');
+
+  var video = document.createElement('video');
+  video.className = 'template-region-rtmp-video';
+  video.dataset.rtmpSource = sourceUrl;
+  video.dataset.rtmpDisableAudio = disableAudio ? '1' : '0';
+  video.autoplay = true;
+  video.playsInline = true;
+  video.preload = 'auto';
+  video.tabIndex = -1;
+  video.disablePictureInPicture = true;
+  video.muted = disableAudio;
+
+  wrapper.appendChild(video);
+  ensureRtmpBrowserWarmupContainer().appendChild(wrapper);
+
+  var state = {
+    wrapper: wrapper,
+    video: video,
+    sourceUrl: sourceUrl,
+    disableAudio: disableAudio
+  };
+  rtmpBrowserWarmupStates[key] = state;
+  setRtmpBrowserReady(sourceUrl, disableAudio, null);
+
+  var markReady = function () {
+    setRtmpBrowserReady(sourceUrl, disableAudio, true);
+    clearRtmpBrowserWarmupState(sourceUrl, disableAudio);
+  };
+
+  var markNotReady = function () {
+    setRtmpBrowserReady(sourceUrl, disableAudio, false);
+  };
+
+  video.addEventListener('canplay', markReady, { once: true });
+  video.addEventListener('playing', markReady, { once: true });
+  video.addEventListener('error', markNotReady, { once: true });
+
+  if (window.Hls && window.Hls.isSupported && window.Hls.isSupported()) {
+    var hls = new window.Hls({
+      enableWorker: true,
+      lowLatencyMode: true,
+      liveSyncDurationCount: 4,
+      liveMaxLatencyDurationCount: 8,
+      maxBufferLength: 10,
+      maxLiveSyncPlaybackRate: 1,
+      backBufferLength: 10
+    });
+    video.__rtmpHls = hls;
+    hls.attachMedia(video);
+    hls.on(window.Hls.Events.MEDIA_ATTACHED, function () {
+      requestWarmupPlaylist(sourceUrl, disableAudio, video, markNotReady);
+    });
+    hls.on(window.Hls.Events.ERROR, function (_event, data) {
+      if (data && data.fatal) {
+        markNotReady();
+        clearRtmpBrowserWarmupState(sourceUrl, disableAudio);
+      }
+    });
+    return state;
+  }
+
+  if (video.canPlayType && video.canPlayType('application/vnd.apple.mpegurl')) {
+    requestWarmupPlaylist(sourceUrl, disableAudio, video, markNotReady);
+    return state;
+  }
+
+  markNotReady();
+  return state;
+}
+
+function requestWarmupPlaylist(sourceUrl, disableAudio, video, onFailure) {
+  fetch(getRtmpSessionUrl(sourceUrl, disableAudio), {
+    credentials: 'same-origin'
+  }).then(function (response) {
+    return response.json().catch(function () {
+      return null;
+    }).then(function (payload) {
+      return {
+        response: response,
+        payload: payload
+      };
+    });
+  }).then(function (result) {
+    if (!result || !result.response) {
+      throw new Error('Unable to initialize RTMP stream.');
+    }
+
+    var response = result.response;
+    var payload = result.payload || null;
+    var playlistUrl = payload && payload.playlistUrl ? String(payload.playlistUrl).trim() : '';
+
+    if (!response.ok) {
+      if (response.status === 503 && payload && payload.probing) {
+        setRtmpBrowserReady(sourceUrl, disableAudio, null);
+        if (video && !video.__rtmpBrowserWarmupTimer) {
+          video.__rtmpBrowserWarmupTimer = window.setTimeout(function () {
+            video.__rtmpBrowserWarmupTimer = null;
+            requestWarmupPlaylist(sourceUrl, disableAudio, video, onFailure);
+          }, 500);
+        }
+        return;
+      }
+      throw new Error('Unable to initialize RTMP stream.');
+    }
+
+    if (!playlistUrl) {
+      throw new Error('RTMP playlist URL was not returned.');
+    }
+
+    setRtmpBrowserReady(sourceUrl, disableAudio, false);
+
+    if (video.__rtmpHls && window.Hls && window.Hls.isSupported && window.Hls.isSupported()) {
+      video.__rtmpHls.loadSource(playlistUrl);
+      return;
+    }
+
+    if (video) {
+      video.src = playlistUrl;
+      video.play().catch(function () {
+        return null;
+      });
+    }
+  }).catch(function () {
+    setRtmpBrowserReady(sourceUrl, disableAudio, false);
+    if (typeof onFailure === 'function') {
+      onFailure();
+    }
+  });
+}
+
+function getRtmpWarmupSlides(sourceSlides, targetIndex) {
   var availableSlides = Array.isArray(sourceSlides) ? sourceSlides : [];
   if (!availableSlides.length) {
     return [];
@@ -25,21 +301,21 @@ function getRtmpPreloadSlides(sourceSlides, targetIndex) {
     normalizedIndex = 0;
   }
 
-  var preloadSlides = [];
+  var warmupSlides = [];
   var currentSlide = availableSlides[normalizedIndex];
   var nextSlide = availableSlides[normalizedIndex + 1];
 
   if (currentSlide) {
-    preloadSlides.push(currentSlide);
+    warmupSlides.push(currentSlide);
   }
   if (nextSlide && nextSlide !== currentSlide) {
-    preloadSlides.push(nextSlide);
+    warmupSlides.push(nextSlide);
   }
 
-  return preloadSlides;
+  return warmupSlides;
 }
 
-function getRtmpPreloadEntries(sourceSlides) {
+function getRtmpWarmupEntries(sourceSlides) {
   var entries = [];
   var seen = Object.create(null);
 
@@ -50,20 +326,24 @@ function getRtmpPreloadEntries(sourceSlides) {
       if (region.region_type !== 'rtmp') {
         return;
       }
+
       var regionContent = content[region.region_key] || {};
       var url = String(regionContent.value || '').trim();
       if (!url) {
         return;
       }
+
       var disableAudio = regionContent.disable_audio === undefined ? true : Boolean(regionContent.disable_audio);
-      var key = url + '\n' + (disableAudio ? '1' : '0');
+      var key = getRtmpAvailabilityKey(url, disableAudio);
       if (seen[key]) {
         return;
       }
+
       seen[key] = true;
       entries.push({
         url: url,
-        disableAudio: disableAudio
+        disableAudio: disableAudio,
+        key: key
       });
     });
   });
@@ -71,30 +351,397 @@ function getRtmpPreloadEntries(sourceSlides) {
   return entries;
 }
 
-function syncRtmpPreloads(sourceSlides, targetIndex) {
-  var entries = getRtmpPreloadEntries(getRtmpPreloadSlides(sourceSlides, targetIndex));
-  var signature = entries.map(function (entry) {
-    return entry.url + '\n' + (entry.disableAudio ? '1' : '0');
-  }).join('\n');
-
-  if (signature === rtmpPreloadSignature) {
-    return;
-  }
-
-  rtmpPreloadSignature = signature;
-  if (!entries.length) {
-    return;
-  }
+function syncRtmpWarmups(sourceSlides, targetIndex) {
+  var entries = getRtmpWarmupEntries(getRtmpWarmupSlides(sourceSlides, targetIndex));
 
   entries.forEach(function (entry) {
-    fetch(getRtmpSessionUrl(entry.url, entry.disableAudio), {
-      credentials: 'same-origin'
-    }).catch(function () {
-      return null;
-    });
+    var status = getRtmpAvailability(entry.url, entry.disableAudio);
+    if (status && !isRtmpAvailabilityStale(status) && status.available === true) {
+      return;
+    }
+
+    if (rtmpWarmupTimers[entry.key]) {
+      return;
+    }
+
+    function requestWarmup() {
+      fetch(getRtmpSessionUrl(entry.url, entry.disableAudio), {
+        credentials: 'same-origin'
+      }).then(function (response) {
+        return response.json().catch(function () {
+          return null;
+        }).then(function (payload) {
+          return {
+            response: response,
+            payload: payload
+          };
+        });
+      }).then(function (result) {
+        rtmpWarmupTimers[entry.key] = null;
+        if (!result || !result.response) {
+          setRtmpAvailability(entry.url, entry.disableAudio, false);
+          return;
+        }
+
+        if (!result.response.ok) {
+          if (result.response.status === 503 && result.payload && result.payload.probing) {
+            setRtmpAvailability(entry.url, entry.disableAudio, null);
+            rtmpWarmupTimers[entry.key] = window.setTimeout(function () {
+              rtmpWarmupTimers[entry.key] = null;
+              requestWarmup();
+            }, 500);
+            return;
+          }
+          setRtmpAvailability(entry.url, entry.disableAudio, false);
+          return;
+        }
+
+        setRtmpAvailability(entry.url, entry.disableAudio, true);
+      }).catch(function () {
+        rtmpWarmupTimers[entry.key] = null;
+        setRtmpAvailability(entry.url, entry.disableAudio, false);
+      });
+    }
+
+    setRtmpAvailability(entry.url, entry.disableAudio, null);
+    requestWarmup();
   });
 }
 
+async function probeRtmpSlideAvailability(slide) {
+  var entries = getRtmpWarmupEntries([slide]);
+  if (!entries.length) {
+    return true;
+  }
+
+  var results = await Promise.all(entries.map(function (entry) {
+    setRtmpAvailability(entry.url, entry.disableAudio, null);
+    return fetch(getRtmpSessionUrl(entry.url, entry.disableAudio), {
+      credentials: 'same-origin'
+    }).then(function (response) {
+      return response.json().catch(function () {
+        return null;
+      }).then(function (payload) {
+        return {
+          response: response,
+          payload: payload
+        };
+      });
+    }).then(function (result) {
+      if (!result || !result.response) {
+        setRtmpAvailability(entry.url, entry.disableAudio, false);
+        return false;
+      }
+
+      if (!result.response.ok) {
+        if (result.response.status === 503 && result.payload && result.payload.probing) {
+          setRtmpAvailability(entry.url, entry.disableAudio, null);
+          return false;
+        }
+        setRtmpAvailability(entry.url, entry.disableAudio, false);
+        return false;
+      }
+
+      setRtmpAvailability(entry.url, entry.disableAudio, true);
+      return true;
+    }).catch(function () {
+      setRtmpAvailability(entry.url, entry.disableAudio, false);
+      return false;
+    });
+  }));
+
+  return results.every(function (value) {
+    return Boolean(value);
+  });
+}
+
+function syncRtmpBrowserWarmups(sourceSlides, targetIndex) {
+  return;
+}
+
+function isRtmpBrowserUnavailable(slide) {
+  if (!slide || !slide.template || !Array.isArray(slide.template.regions)) {
+    return false;
+  }
+
+  var content = slide.content || {};
+  return slide.template.regions.some(function (region) {
+    if (region.region_type !== 'rtmp') {
+      return false;
+    }
+
+    var regionContent = content[region.region_key] || {};
+    var sourceUrl = String(regionContent.value || '').trim();
+    if (!sourceUrl) {
+      return false;
+    }
+
+    var disableAudio = regionContent.disable_audio === undefined ? true : Boolean(regionContent.disable_audio);
+    var status = getRtmpBrowserReady(sourceUrl, disableAudio);
+    return Boolean(!status || isRtmpBrowserReadyStale(status) || status.ready !== true);
+  });
+}
+
+function bindRtmpVideoPlaceholder(video, placeholder) {
+  if (!video) {
+    return;
+  }
+
+  var markReady = function () {
+    if (placeholder) {
+      placeholder.style.display = 'none';
+    }
+  };
+
+  video.addEventListener('canplay', markReady, { once: true });
+  video.addEventListener('playing', markReady, { once: true });
+  if (video.readyState >= 2) {
+    markReady();
+  }
+}
+
+function startRtmpPlayback(video, sourceUrl, disableAudio, skipUnavailable, placeholder, isPreload, onFailure) {
+  var startupTimeoutMs = skipUnavailable ? 6000 : 0;
+  var startupTimer = null;
+  var probeRetryTimer = null;
+  var webReceiveTimer = null;
+  var webReceiveRetryUsed = false;
+
+  function failPlayback(message, silent) {
+    if (video.dataset.rtmpFailureHandled === '1') {
+      return;
+    }
+    video.dataset.rtmpFailureHandled = '1';
+    if (typeof onFailure === 'function') {
+      onFailure(message, silent);
+      return;
+    }
+    if (!isPreload && skipUnavailable && typeof handleRtmpPlaybackFailure === 'function' && handleRtmpPlaybackFailure(message, { silent: Boolean(silent) })) {
+      return;
+    }
+    if (placeholder) {
+      placeholder.style.display = 'flex';
+      placeholder.textContent = message;
+    }
+  }
+
+  function clearStartupTimer() {
+    if (startupTimer) {
+      window.clearTimeout(startupTimer);
+      startupTimer = null;
+    }
+    if (video.__rtmpStartupTimer) {
+      video.__rtmpStartupTimer = null;
+    }
+    if (probeRetryTimer) {
+      window.clearTimeout(probeRetryTimer);
+      probeRetryTimer = null;
+    }
+    if (video.__rtmpProbeRetryTimer) {
+      video.__rtmpProbeRetryTimer = null;
+    }
+    if (webReceiveTimer) {
+      window.clearTimeout(webReceiveTimer);
+      webReceiveTimer = null;
+    }
+    if (video.__rtmpWebReceiveTimer) {
+      video.__rtmpWebReceiveTimer = null;
+    }
+  }
+
+  function tryPlay() {
+    if (video && typeof video.play === 'function') {
+      video.play().catch(function () {
+        return null;
+      });
+    }
+  }
+
+  function markReceiving() {
+    if (webReceiveTimer) {
+      window.clearTimeout(webReceiveTimer);
+      webReceiveTimer = null;
+    }
+    if (video.__rtmpWebReceiveTimer) {
+      video.__rtmpWebReceiveTimer = null;
+    }
+  }
+
+  function scheduleReceiveRetry() {
+    if (isPreload || webReceiveRetryUsed || video.dataset.rtmpFailureHandled === '1') {
+      return;
+    }
+    if (webReceiveTimer) {
+      return;
+    }
+    webReceiveTimer = window.setTimeout(function () {
+      webReceiveTimer = null;
+      video.__rtmpWebReceiveTimer = null;
+      if (video.dataset.rtmpFailureHandled === '1' || webReceiveRetryUsed) {
+        return;
+      }
+      if (video.readyState >= 2) {
+        return;
+      }
+      webReceiveRetryUsed = true;
+      clearStartupTimer();
+      try {
+        if (video.__rtmpHls) {
+          video.__rtmpHls.destroy();
+        }
+      } catch (_error) {
+        // ignore cleanup errors
+      }
+      video.__rtmpHls = null;
+      requestSession();
+    }, 1200);
+    video.__rtmpWebReceiveTimer = webReceiveTimer;
+  }
+
+  function retryWebReceiveOrFail(message, silent) {
+    if (isPreload || video.dataset.rtmpFailureHandled === '1') {
+      return;
+    }
+    if (!webReceiveRetryUsed) {
+      webReceiveRetryUsed = true;
+      clearStartupTimer();
+      if (webReceiveTimer) {
+        window.clearTimeout(webReceiveTimer);
+        webReceiveTimer = null;
+      }
+      if (video.__rtmpWebReceiveTimer) {
+        video.__rtmpWebReceiveTimer = null;
+      }
+      window.setTimeout(function () {
+        requestSession();
+      }, 500);
+      return;
+    }
+    failPlayback(message, silent);
+  }
+
+  video.dataset.rtmpInitialized = '1';
+  video.muted = disableAudio;
+  video.controls = false;
+  video.playsInline = true;
+  video.autoplay = true;
+
+  bindRtmpVideoPlaceholder(video, placeholder);
+  video.addEventListener('canplay', markReceiving, { once: true });
+  video.addEventListener('playing', markReceiving, { once: true });
+
+  if (startupTimeoutMs > 0) {
+    startupTimer = window.setTimeout(function () {
+      startupTimer = null;
+      video.__rtmpStartupTimer = null;
+      failPlayback('Unable to load RTMP stream.', true);
+    }, startupTimeoutMs);
+    video.__rtmpStartupTimer = startupTimer;
+  }
+
+  function retryWhileProbing() {
+    if (probeRetryTimer || video.dataset.rtmpFailureHandled === '1') {
+      return;
+    }
+    probeRetryTimer = window.setTimeout(function () {
+      probeRetryTimer = null;
+      video.__rtmpProbeRetryTimer = null;
+      requestSession();
+    }, 500);
+    video.__rtmpProbeRetryTimer = probeRetryTimer;
+  }
+
+  function requestSession() {
+    fetch(getRtmpSessionUrl(sourceUrl, disableAudio), {
+      credentials: 'same-origin'
+    }).then(function (response) {
+      return response.json().catch(function () {
+        return null;
+      }).then(function (payload) {
+        return {
+          response: response,
+          payload: payload
+        };
+      });
+    }).then(function (result) {
+      if (!result || !result.response) {
+        throw new Error('Unable to initialize RTMP stream.');
+      }
+
+      var response = result.response;
+      var payload = result.payload || null;
+      var playlistUrl = payload && payload.playlistUrl ? String(payload.playlistUrl).trim() : '';
+
+      if (!response.ok) {
+        if (response.status === 503 && payload && payload.probing) {
+          setRtmpAvailability(sourceUrl, disableAudio, null);
+          retryWhileProbing();
+          return null;
+        }
+        setRtmpAvailability(sourceUrl, disableAudio, false);
+        retryWebReceiveOrFail('Unable to load RTMP stream.', true);
+        return null;
+      }
+
+      setRtmpAvailability(sourceUrl, disableAudio, true);
+      if (!playlistUrl) {
+        throw new Error('RTMP playlist URL was not returned.');
+      }
+
+    if (window.Hls && window.Hls.isSupported && window.Hls.isSupported()) {
+      var hls = new window.Hls({
+        enableWorker: true,
+        lowLatencyMode: true,
+        liveSyncDurationCount: 4,
+        liveMaxLatencyDurationCount: 8,
+        maxBufferLength: 20,
+        maxLiveSyncPlaybackRate: 1,
+        backBufferLength: 30
+      });
+      video.__rtmpHls = hls;
+      hls.attachMedia(video);
+      hls.on(window.Hls.Events.MEDIA_ATTACHED, function () {
+        hls.loadSource(playlistUrl);
+        scheduleReceiveRetry();
+      });
+      hls.on(window.Hls.Events.MANIFEST_PARSED, function () {
+        tryPlay();
+      });
+      hls.on(window.Hls.Events.ERROR, function (_event, data) {
+        if (data && data.fatal) {
+          clearStartupTimer();
+          setRtmpAvailability(sourceUrl, disableAudio, false);
+          try {
+            hls.destroy();
+          } catch (_error) {
+            // ignore cleanup errors
+          }
+          video.__rtmpHls = null;
+          retryWebReceiveOrFail('RTMP playback failed.', true);
+        }
+      });
+      return;
+    }
+
+    if (video.canPlayType && video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = playlistUrl;
+      tryPlay();
+      scheduleReceiveRetry();
+      return;
+    }
+
+    failPlayback('RTMP playback is not supported in this browser.', true);
+        return null;
+      }).catch(function () {
+        clearStartupTimer();
+        setRtmpAvailability(sourceUrl, disableAudio, false);
+        retryWebReceiveOrFail('Unable to load RTMP stream.', true);
+      });
+  }
+
+  requestSession();
+}
+
 function syncRtmpRegions(root) {
   if (!root) {
     return;
@@ -118,93 +765,32 @@ function syncRtmpRegions(root) {
       return;
     }
 
-    video.dataset.rtmpInitialized = '1';
-    video.muted = disableAudio;
-    video.controls = false;
-    video.playsInline = true;
-    video.autoplay = true;
+    var skipUnavailable = String(video.dataset.rtmpSkipUnavailable || '0') === '1';
+    var startupTimer = null;
 
-    var markReady = function () {
-      if (placeholder) {
-        placeholder.style.display = 'none';
-      }
-    };
-
-    var tryPlay = function () {
-      if (video && typeof video.play === 'function') {
-        video.play().catch(function () {
-          return null;
-        });
-      }
-    };
-
-    video.addEventListener('canplay', markReady, { once: true });
-    video.addEventListener('playing', markReady, { once: true });
-
-    fetch(getRtmpSessionUrl(sourceUrl, disableAudio), {
-      credentials: 'same-origin'
-    }).then(function (response) {
-      if (!response.ok) {
-        throw new Error('Unable to initialize RTMP stream.');
-      }
-      return response.json();
-    }).then(function (payload) {
-      var playlistUrl = payload && payload.playlistUrl ? String(payload.playlistUrl).trim() : '';
-      if (!playlistUrl) {
-        throw new Error('RTMP playlist URL was not returned.');
-      }
-
-      if (window.Hls && window.Hls.isSupported && window.Hls.isSupported()) {
-        var hls = new window.Hls({
-          enableWorker: true,
-          lowLatencyMode: true,
-          liveSyncDurationCount: 4,
-          liveMaxLatencyDurationCount: 8,
-          maxBufferLength: 20,
-          maxLiveSyncPlaybackRate: 1,
-          backBufferLength: 30
-        });
-        video.__rtmpHls = hls;
-        hls.attachMedia(video);
-        hls.on(window.Hls.Events.MEDIA_ATTACHED, function () {
-          hls.loadSource(playlistUrl);
-        });
-        hls.on(window.Hls.Events.MANIFEST_PARSED, function () {
-          tryPlay();
-        });
-        hls.on(window.Hls.Events.ERROR, function (_event, data) {
-          if (data && data.fatal) {
-            try {
-              hls.destroy();
-            } catch (_error) {
-              // ignore cleanup errors
-            }
-            video.__rtmpHls = null;
-            if (placeholder) {
-              placeholder.style.display = 'flex';
-              placeholder.textContent = 'RTMP playback failed.';
-            }
-          }
-        });
+    if (skipUnavailable) {
+      var preflightStatus = getRtmpAvailability(sourceUrl, disableAudio);
+      if (preflightStatus && !isRtmpAvailabilityStale(preflightStatus) && preflightStatus.available === false) {
+        failPlayback('Unable to load RTMP stream.', true);
         return;
       }
+    }
 
-      if (video.canPlayType && video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = playlistUrl;
-        tryPlay();
+    function failPlayback(message, silent) {
+      if (video.dataset.rtmpFailureHandled === '1') {
         return;
       }
+      video.dataset.rtmpFailureHandled = '1';
+      if (skipUnavailable && typeof handleRtmpPlaybackFailure === 'function' && handleRtmpPlaybackFailure(message, { silent: Boolean(silent) })) {
+        return;
+      }
+      if (placeholder) {
+        placeholder.style.display = 'flex';
+        placeholder.textContent = message;
+      }
+    }
 
-      if (placeholder) {
-        placeholder.style.display = 'flex';
-        placeholder.textContent = 'RTMP playback is not supported in this browser.';
-      }
-    }).catch(function (_error) {
-      if (placeholder) {
-        placeholder.style.display = 'flex';
-        placeholder.textContent = 'Unable to load RTMP stream.';
-      }
-    });
+    startRtmpPlayback(video, sourceUrl, disableAudio, skipUnavailable, placeholder, false);
   });
 }
 
@@ -215,6 +801,18 @@ function destroyRtmpRegions(root) {
 
   var videos = root.querySelectorAll('video[data-rtmp-source]');
   Array.prototype.forEach.call(videos, function (video) {
+    if (video.__rtmpStartupTimer) {
+      window.clearTimeout(video.__rtmpStartupTimer);
+      video.__rtmpStartupTimer = null;
+    }
+    if (video.__rtmpProbeRetryTimer) {
+      window.clearTimeout(video.__rtmpProbeRetryTimer);
+      video.__rtmpProbeRetryTimer = null;
+    }
+    if (video.__rtmpWebReceiveTimer) {
+      window.clearTimeout(video.__rtmpWebReceiveTimer);
+      video.__rtmpWebReceiveTimer = null;
+    }
     if (video.__rtmpHls) {
       try {
         video.__rtmpHls.destroy();

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 '<div class="template-region video" style="' + region.baseStyle + '"><div class="template-region-placeholder">Video</div></div>';
+  }
+
+  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 '<div class="template-region video" style="' + region.baseStyle + '"><div class="template-region-placeholder">Video</div></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/render.js

@@ -1,5 +1,6 @@
 const Handlebars = require('handlebars');
 const { mediaKind, safeJsonForScript, getPlayerPageTemplate, getPlayerClientNameScript, getPlayerPageOfflineScript, getPlayerPagePlaylistScript, getPlayerPageCommandsScript, getPlayerPageRenderingScript, getPlayerPagePlaybackScript, getPlayerPageScript, getPlayerRegionScripts, getPlayerOnboardingLandingScript, getPlayerOnboardingFormScript } = require('./render-helpers');
+const { createThumbnailPreviewBootstrapScript } = require('./thumbnail-preview');
 const { createPageAuthBundle, createPageFetchAuthScript } = require('../request-auth');
 
 function renderPage(template, options) {
@@ -117,7 +118,7 @@ function renderPlayerPage(slug, initialData) {
   return renderPage(template, {
     title: 'Screen ' + slug,
     body: '<div id="app"><div class="empty">Loading screen...</div></div>',
-    script: createPageFetchAuthScript(pageAuthToken) + hlsScriptTag + serviceWorkerScript + '<script>' + offlineScript + '</script>' + '<script>' + playlistScript + '</script>' + '<script>' + commandScript + '</script>' + '<script>' + renderingScript + '</script>' + '<script>' + playbackScript + '</script>' + onboardingScript + script
+    script: createPageFetchAuthScript(pageAuthToken) + hlsScriptTag + serviceWorkerScript + createThumbnailPreviewBootstrapScript(initialData) + '<script>' + offlineScript + '</script>' + '<script>' + playlistScript + '</script>' + '<script>' + commandScript + '</script>' + '<script>' + renderingScript + '</script>' + '<script>' + playbackScript + '</script>' + onboardingScript + script
   });
 }
 

src/player/routes.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const express = require('express');
 const path = require('path');
 const { getSharedSecret, createPageAuthBundle, verifyPageAuthToken, verifyRequestAuth } = require('../request-auth');
+const { buildThumbnailPreviewData } = require('./thumbnail-preview');
 
 const TRANSIENT_DB_ERROR_CODES = ['ECONNREFUSED', 'ECONNRESET', 'ETIMEDOUT', 'EPIPE', 'ENOTFOUND', 'PROTOCOL_CONNECTION_LOST', 'POOL_CLOSED', 'ERR_POOL_CLOSED'];
 
@@ -58,6 +59,21 @@ function registerPlayerRoutes(app, options) {
     next();
   }
 
+  function resolveMediaFilePath(fileName) {
+    const relativePath = path.normalize(String(fileName || '').trim()).replace(/^([\\/])+/, '');
+    if (!relativePath || relativePath === '.' || relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+      return null;
+    }
+
+    const resolvedMediaDir = path.resolve(mediaDir);
+    const resolvedFilePath = path.resolve(mediaDir, relativePath);
+    if (resolvedFilePath !== resolvedMediaDir && !resolvedFilePath.startsWith(resolvedMediaDir + path.sep)) {
+      return null;
+    }
+
+    return resolvedFilePath;
+  }
+
   app.use('/assets', express.static(assetDir));
   app.use('/media', express.static(mediaDir));
   app.use('/assets/vendor', express.static(path.join(__dirname, '..', '..', 'node_modules', 'hls.js', 'dist')));
@@ -93,21 +109,21 @@ function registerPlayerRoutes(app, options) {
 
   app.get('/api/media/config', requireRequestAuth, function (_req, res) {
     res.json({
-      mediaDir: mediaDir
+      mediaDir: mediaDir,
+      uploadDir: path.join(mediaDir, 'uploads')
     });
   });
 
-  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 filename = require('path').basename(String(req.params.filename || '').trim());
-      if (!filename) {
+      const filePath = resolveMediaFilePath(req.params.filename);
+      if (!filePath) {
         return res.status(400).json({ error: 'Filename is required' });
       }
-      const filePath = require('path').join(mediaDir, filename);
       const body = Buffer.isBuffer(req.body) ? req.body : Buffer.from(req.body || '');
-      await fs.promises.mkdir(mediaDir, { recursive: true });
+      await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
       await fs.promises.writeFile(filePath, body);
-      res.json({ ok: true, filename: filename });
+      res.json({ ok: true, filename: req.params.filename });
     } catch (error) {
       next(error);
     }
@@ -115,11 +131,10 @@ function registerPlayerRoutes(app, options) {
 
   app.delete('/api/media/:filename', requireRequestAuth, async function (req, res, next) {
     try {
-      const filename = require('path').basename(String(req.params.filename || '').trim());
-      if (!filename) {
+      const filePath = resolveMediaFilePath(req.params.filename);
+      if (!filePath) {
         return res.status(400).json({ error: 'Filename is required' });
       }
-      const filePath = require('path').join(mediaDir, filename);
       try {
         await fs.promises.unlink(filePath);
       } catch (error) {
@@ -127,7 +142,7 @@ function registerPlayerRoutes(app, options) {
           throw error;
         }
       }
-      res.json({ ok: true, filename: filename });
+      res.json({ ok: true, filename: req.params.filename });
     } catch (error) {
       next(error);
     }
@@ -138,16 +153,25 @@ function registerPlayerRoutes(app, options) {
       const source = String(req.query.source || '').trim();
       const disableAudio = String(req.query.disableAudio || '').trim().toLowerCase();
       const useMutedOutput = disableAudio === '1' || disableAudio === 'true' || disableAudio === 'yes' || disableAudio === 'on';
-      const session = await rtmpStreamService.ensureSession(source, useMutedOutput);
-      await session.ready.catch(function () {
-        return false;
-      });
+      const status = await rtmpStreamService.getSessionStatus(source, useMutedOutput);
+      const session = status.session;
+      const ready = Boolean(status.ready);
+      const live = Boolean(status.live);
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+      if (!ready || !live) {
+        return res.status(503).json({
+          ready: false,
+          live: false,
+          timedOut: Boolean(status.timedOut),
+          stderr: String(status.stderr || '')
+        });
+      }
       res.json({
         key: session.key,
         playlistUrl: session.playlistUrl,
         disableAudio: session.disableAudio,
-        ready: true
+        ready: true,
+        live: true
       });
     } catch (error) {
       next(error);
@@ -192,6 +216,43 @@ function registerPlayerRoutes(app, options) {
     });
   });
 
+  app.get('/api/internal/slide-thumbnails/:id/preview', requireRequestAuth, async function (req, res, next) {
+    try {
+      const slide = await common.fetchSlideById(pool, Number(req.params.id));
+      if (!slide) {
+        return res.status(404).send('Slide not found');
+      }
+
+      const data = buildThumbnailPreviewData(slide);
+
+      if (typeof common.fetchRssFeedsData === 'function' && typeof common.fetchRssFeedItemsByFeedId === 'function') {
+        const rssData = await common.fetchRssFeedsData(pool);
+        data.rssFeeds = await Promise.all((rssData.rssFeeds || []).map(async function (feed) {
+          const items = await common.fetchRssFeedItemsByFeedId(pool, feed.id);
+          return Object.assign({}, feed, {
+            items: items.map(function (item) {
+              return typeof common.normalizeRssFeedItem === 'function' ? common.normalizeRssFeedItem(item) : item;
+            })
+          });
+        }));
+      }
+
+      if (typeof common.fetchApiSourcesData === 'function') {
+        const apiData = await common.fetchApiSourcesData(pool);
+        data.apiSources = (apiData.apiSources || []).map(function (source) {
+          return Object.assign({}, source, {
+            responseJson: typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(source.last_response_json) : null
+          });
+        });
+      }
+
+      res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+      res.send(common.renderPlayerPage('slide-thumbnail-preview-' + slide.id, data));
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/api/screens/:slug/playlist', requirePageAuth(['player']), async function (req, res, next) {
     try {
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');

src/player/thumbnail-preview.js

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

src/rbac.js

@@ -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/request-auth.js

@@ -47,6 +47,19 @@ function canonicalize(value) {
   return value === undefined ? undefined : value;
 }
 
+function normalizeRequestPath(pathValue) {
+  const value = String(pathValue || '').trim();
+  if (!value) {
+    return '';
+  }
+
+  try {
+    return decodeURIComponent(value);
+  } catch (_error) {
+    return value;
+  }
+}
+
 function stableJson(value) {
   return JSON.stringify(canonicalize(value));
 }
@@ -56,10 +69,38 @@ function hashPayload(value) {
   return crypto.createHash('sha256').update(normalized).digest('hex');
 }
 
+function normalizeRequestAuthBody(req) {
+  if (!req) {
+    return null;
+  }
+
+  const body = req.body;
+  if (body === undefined || body === null) {
+    return null;
+  }
+
+  if (Buffer.isBuffer(body)) {
+    return body;
+  }
+
+  if (typeof body === 'object' && !Array.isArray(body)) {
+    const hasFields = Object.keys(body).length > 0;
+    if (!hasFields) {
+      const contentLength = Number(String(req.headers && req.headers['content-length'] || '').trim() || 0);
+      const contentType = String(req.headers && req.headers['content-type'] || '').trim();
+      if (!contentLength || !contentType) {
+        return null;
+      }
+    }
+  }
+
+  return body;
+}
+
 function getRequestPath(req) {
   const explicitPath = String(req && req.path ? req.path : '').trim();
   if (explicitPath) {
-    return explicitPath;
+    return normalizeRequestPath(explicitPath);
   }
 
   const rawUrl = String(req && req.url ? req.url : '').trim();
@@ -68,9 +109,9 @@ function getRequestPath(req) {
   }
 
   try {
-    return new URL(rawUrl, 'http://localhost').pathname;
+    return normalizeRequestPath(new URL(rawUrl, 'http://localhost').pathname);
   } catch (_error) {
-    return rawUrl.split('?')[0] || '';
+    return normalizeRequestPath(rawUrl.split('?')[0] || '');
   }
 }
 
@@ -167,7 +208,7 @@ function createRequestAuthHeaders(options) {
   }
 
   const method = String(options && options.method || 'GET').trim().toUpperCase();
-  const pathname = String(options && options.pathname || '').trim();
+  const pathname = normalizeRequestPath(options && options.pathname || '');
   const timestamp = String(options && options.timestamp || Date.now()).trim();
   const bodyDigest = hashPayload(options && Object.prototype.hasOwnProperty.call(options, 'body') ? options.body : null);
   const signature = signText(secret, `request\n${method}\n${pathname}\n${timestamp}\n${bodyDigest}`);
@@ -199,7 +240,7 @@ function verifyRequestAuth(req) {
     return false;
   }
 
-  const expectedSignature = signText(secret, `request\n${String(req.method || 'GET').trim().toUpperCase()}\n${getRequestPath(req)}\n${timestamp}\n${hashPayload(req.body)}`);
+  const expectedSignature = signText(secret, `request\n${String(req.method || 'GET').trim().toUpperCase()}\n${getRequestPath(req)}\n${timestamp}\n${hashPayload(normalizeRequestAuthBody(req))}`);
   return timingSafeEqualHex(expectedSignature, signature);
 }
 

src/web.js

@@ -17,6 +17,7 @@ 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 { captureSlideThumbnail } = require('./web/lib/slide-thumbnails');
 const { refreshApiSource, refreshRssFeed } = require('./web/lib/data-source-refresh');
 const { createWebBootstrap } = require('./web/bootstrap');
 const { requirePermission } = require('./rbac');
@@ -24,6 +25,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,
@@ -52,7 +54,11 @@ async function start() {
   const pool = common.createPool();
   const PORT = Number(process.env.WEB_PORT || 3000);
   const MEDIA_DIR = path.join(__dirname, '..', 'media');
+  const UPLOADS_DIR = path.join(MEDIA_DIR, 'uploads');
+  const THUMBNAILS_DIR = path.join(MEDIA_DIR, 'thumbnails');
   const ASSET_DIR = path.join(__dirname, 'web', 'public');
+  const WEB_BASE_URL = (process.env.WEB_PUBLIC_BASE_URL || process.env.WEB_BASE_URL || ('http://127.0.0.1:' + PORT)).replace(/\/$/, '');
+  const DATA_SOURCE_STARTUP_REFRESH_STAGGER_MS = Math.max(100, Number(process.env.DATA_SOURCE_STARTUP_REFRESH_STAGGER_MS || 250));
   const backgroundTaskQueue = createBackgroundTaskQueue({
     pool: pool,
     maxConcurrent: 1
@@ -83,16 +89,19 @@ async function start() {
     common: common,
     playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL,
     playerPublicBaseUrl: PLAYER_PUBLIC_BASE_URL,
-    uploadDir: MEDIA_DIR,
+    uploadDir: UPLOADS_DIR,
     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;
@@ -138,10 +147,30 @@ async function start() {
     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));
+  app.use('/assets/vendor/cropperjs', express.static(path.join(__dirname, '..', 'node_modules', 'cropperjs', 'dist')));
   app.use('/media', express.static(MEDIA_DIR));
+  fs.mkdirSync(UPLOADS_DIR, { recursive: true });
+  fs.mkdirSync(THUMBNAILS_DIR, { recursive: true });
 
   app.use(async function (req, _res, next) {
     try {
@@ -153,7 +182,7 @@ async function start() {
   });
 
   app.use(function (req, res, next) {
-    if (req.path === '/' || req.path === '/login' || req.path === '/logout') {
+    if (req.path === '/' || req.path === '/login' || req.path === '/logout' || req.path.indexOf('/api/internal/slide-thumbnails/') === 0) {
       return next();
     }
 
@@ -255,17 +284,20 @@ async function start() {
     common: common,
     pages: pages,
     upload: upload,
-    uploadDir: MEDIA_DIR,
+    uploadDir: UPLOADS_DIR,
     fetchScreensBySlideId: fetchScreensBySlideId,
     fetchScreensByTemplateId: fetchScreensByTemplateId,
     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,
@@ -340,7 +372,7 @@ async function start() {
   });
 
   // Ensure schema and mirror media before the web service starts handling traffic.
-  await common.ensureSchema(pool);
+  await common.ensureSchema(pool, { mediaDir: MEDIA_DIR });
   await backgroundTaskQueue.initialize();
 
   async function syncRecurringRefreshes() {
@@ -381,7 +413,88 @@ async function start() {
     });
   }
 
+  async function registerRecurringMaintenanceTasks() {
+    async function runUnusedUploadSweep() {
+      const uploadPaths = await collectUploadPathsFromDirectory(UPLOADS_DIR);
+      if (!uploadPaths.length) {
+        return;
+      }
+
+      await removeUnusedUploadFiles(pool, UPLOADS_DIR, uploadPaths);
+    }
+
+    backgroundTaskQueue.registerRecurringTask({
+      key: 'unused-upload-sweep',
+      title: 'Unused upload sweep',
+      category: 'media-sync',
+      intervalMs: 24 * 60 * 60 * 1000,
+      metadata: {
+        uploadDir: UPLOADS_DIR
+      },
+      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 * 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();
+  await registerRecurringMaintenanceTasks();
+  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-queue.js

@@ -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) {
@@ -600,22 +610,32 @@ function createBackgroundTaskQueue(options) {
     };
   }
 
+  function getTaskSortTime(task) {
+    const finishedTime = task && task.finishedAt ? Date.parse(task.finishedAt) : NaN;
+    if (Number.isFinite(finishedTime)) {
+      return finishedTime;
+    }
+
+    const createdTime = task && task.createdAt ? Date.parse(task.createdAt) : NaN;
+    if (Number.isFinite(createdTime)) {
+      return createdTime;
+    }
+
+    return 0;
+  }
+
   function listTasks() {
     return Array.from(tasksById.values())
       .slice()
       .sort(function (left, right) {
-        const statusRank = {
-          running: 0,
-          queued: 1,
-          failed: 2,
-          completed: 3,
-          canceled: 4
-        };
+        const leftQueuedTime = left && left.createdAt ? Date.parse(left.createdAt) : NaN;
+        const rightQueuedTime = right && right.createdAt ? Date.parse(right.createdAt) : NaN;
+        if (Number.isFinite(leftQueuedTime) && Number.isFinite(rightQueuedTime) && leftQueuedTime !== rightQueuedTime) {
+          return rightQueuedTime - leftQueuedTime;
+        }
 
-        const leftRank = Object.prototype.hasOwnProperty.call(statusRank, left.status) ? statusRank[left.status] : 9;
-        const rightRank = Object.prototype.hasOwnProperty.call(statusRank, right.status) ? statusRank[right.status] : 9;
-        if (leftRank !== rightRank) {
-          return leftRank - rightRank;
+        if (Number.isFinite(leftQueuedTime) !== Number.isFinite(rightQueuedTime)) {
+          return Number.isFinite(leftQueuedTime) ? -1 : 1;
         }
 
         return right.id - left.id;
@@ -727,6 +747,7 @@ function createBackgroundTaskQueue(options) {
     setTaskHandler: setTaskHandler,
     registerRecurringTask: registerRecurringTask,
     removeRecurringTask: removeRecurringTask,
+    runRecurringTask: runRecurringTask,
     listTasks: listTasks,
     listRecurringTasks: listRecurringTasks,
     getTaskById: getTaskById,

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;
@@ -82,11 +94,13 @@ function createDashboardStateService(options) {
       }
     });
 
-    const screens = enrichScreensWithConnections(data.screens || [], connectionsBySlug, onboardingNameBySlug).map(function (screen) {
-      return Object.assign({}, screen, {
-        player_url: `${playerPublicBaseUrl}/screen/${encodeURIComponent(screen.slug)}`
-      });
-    });
+    const screens = enrichScreensWithConnections(data.screens || [], connectionsBySlug, onboardingNameBySlug)
+      .map(function (screen) {
+        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/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

@@ -0,0 +1,120 @@
+function normalizePageNumber(value) {
+  const pageNumber = Math.floor(Number(value) || 1);
+  return Math.max(1, pageNumber);
+}
+
+function buildQueryString(query) {
+  const searchParams = new URLSearchParams();
+  Object.keys(query || {}).forEach(function (key) {
+    const value = query[key];
+    if (value === undefined || value === null || value === '') {
+      return;
+    }
+    searchParams.set(key, String(value));
+  });
+
+  const queryString = searchParams.toString();
+  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);
+  const totalPages = Math.max(1, Math.ceil(Number(totalItems) / normalizedPageSize));
+  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 = buildPaginationPages(totalPages, safeCurrentPage, normalizedPageParam, queryState, 7);
+
+  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,
+    totalPages: totalPages,
+    totalItems: Number(totalItems) || 0,
+    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,
+    pageSize: normalizedPageSize,
+    pageParam: normalizedPageParam,
+    itemLabel: String(itemLabel || 'items'),
+    ariaLabel: String(ariaLabel || 'Pagination')
+  };
+}
+
+module.exports = {
+  normalizePageNumber,
+  buildQueryString,
+  buildPaginationPages,
+  buildPagination
+};

src/web/lib/rbac-data.js

@@ -1,4 +1,5 @@
 const { PERMISSIONS, normalizePermissionKeys } = require('../../rbac');
+const { fetchPagedRows } = require('../../data/utils');
 
 function parseCsvIds(value) {
   return String(value || '')
@@ -27,6 +28,33 @@ async function fetchRoles(pool) {
   return rows || [];
 }
 
+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 role_permissions rp WHERE rp.role_id = r.id) AS permission_count
+     FROM roles r
+     ORDER BY r.name ASC`,
+    countSql: 'SELECT COUNT(*) AS count FROM 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
+  });
+
+  return Object.assign({ roles: paged.rows }, paged);
+}
+
 async function fetchRoleById(pool, roleId) {
   const [rows] = await pool.query(
     `SELECT r.id, r.role_key, r.name, r.description, r.created_at, r.modified_at,
@@ -106,6 +134,51 @@ async function fetchUsersWithRoles(pool) {
   });
 }
 
+async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
+  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
+     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
+       JOIN 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`,
+    countSql: 'SELECT COUNT(*) AS count FROM users',
+    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
+  });
+
+  return {
+    users: (paged.rows || []).map(function (row) {
+      return Object.assign({}, row, {
+        roleIds: parseCsvIds(row.role_ids_csv),
+        roleNames: String(row.role_names || '').trim()
+      });
+    }),
+    totalItems: paged.totalItems,
+    totalPages: paged.totalPages,
+    currentPage: paged.currentPage,
+    pageSize: paged.pageSize
+  };
+}
+
 async function fetchUserWithRoles(pool, userId) {
   const [rows] = await pool.query(
     `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
@@ -184,11 +257,13 @@ module.exports = {
   PERMISSIONS,
   fetchPermissions,
   fetchRoles,
+  fetchRolesPage,
   fetchRoleById,
   fetchRolePermissionKeys,
   fetchRoleUserIds,
   fetchRolesForUser,
   fetchUsersWithRoles,
+  fetchUsersWithRolesPage,
   fetchUserWithRoles,
   syncUserRoles,
   syncRoleUsers,

src/web/lib/slide-thumbnails.js

@@ -0,0 +1,291 @@
+const fs = require('fs');
+const path = require('path');
+const puppeteer = require('puppeteer-core');
+const chromiumModule = require('@sparticuz/chromium');
+const sharp = require('sharp');
+const chromium = chromiumModule && typeof chromiumModule.executablePath === 'function'
+  ? chromiumModule
+  : chromiumModule && chromiumModule.default && typeof chromiumModule.default.executablePath === 'function'
+    ? chromiumModule.default
+    : chromiumModule;
+const {
+  escapeHtml,
+  mediaKind,
+  renderEditorJsContent,
+  sanitizeFontFamily,
+  sanitizeFontSize,
+  sanitizeTextColor
+} = require('../../player/render-helpers');
+const { createRequestAuthHeaders } = require('../../request-auth');
+
+const SYSTEM_CHROMIUM_PATHS = [
+  process.env.PUPPETEER_EXECUTABLE_PATH,
+  process.env.CHROMIUM_PATH,
+  '/usr/bin/chromium',
+  '/usr/bin/chromium-browser',
+  '/usr/local/bin/chromium',
+  '/snap/bin/chromium'
+].filter(Boolean);
+const PLAYER_VIEWPORT = {
+  width: 1920,
+  height: 1080,
+  deviceScaleFactor: 1
+};
+const THUMBNAIL_MAX_SIZE = {
+  width: 480,
+  height: 270
+};
+
+function normalizeBaseUrl(baseUrl) {
+  return String(baseUrl || '').trim().replace(/\/$/, '');
+}
+
+function resolveAssetUrl(baseUrl, value) {
+  const raw = String(value || '').trim();
+  if (!raw) {
+    return '';
+  }
+  if (/^(?:https?:)?\/\//i.test(raw) || raw.startsWith('data:')) {
+    return raw;
+  }
+  const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
+  if (!normalizedBaseUrl) {
+    return raw;
+  }
+  if (raw.startsWith('/')) {
+    return normalizedBaseUrl + raw;
+  }
+  return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
+}
+
+function getCanvasSize(slide) {
+  const template = slide && slide.template ? slide.template : null;
+  return {
+    width: Math.max(1, Number(template && template.canvas_size_width ? template.canvas_size_width : 1920)),
+    height: Math.max(1, Number(template && template.canvas_size_height ? template.canvas_size_height : 1080))
+  };
+}
+
+function getRegionContent(slide, region) {
+  const content = slide && slide.content && slide.content[region.region_key] ? slide.content[region.region_key] : {};
+  return content && typeof content === 'object' ? content : { value: content };
+}
+
+function hasVisibleContent(html) {
+  return Boolean(String(html || '').replace(/<[^>]+>/g, '').trim());
+}
+
+function buildTextRegionMarkup(region, regionContent) {
+  const fontFamily = sanitizeFontFamily(regionContent.font_family || region.font_family);
+  const fontSize = sanitizeFontSize(regionContent.font_size || region.font_size);
+  const fontColor = sanitizeTextColor(regionContent.font_color || region.font_color);
+  const renderedBody = renderEditorJsContent(regionContent.value || '');
+  if (!hasVisibleContent(renderedBody)) {
+    return '';
+  }
+
+  return '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
+}
+
+function buildRegionInnerHtml(region, regionContent, baseUrl) {
+  const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
+  const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+
+  if (regionType === 'image') {
+    const src = resolveAssetUrl(baseUrl, rawValue);
+    return src
+      ? '<img src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'image') + '" />'
+      : '';
+  }
+
+  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
+      ? '<iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe>'
+      : '';
+  }
+
+  if (regionType === 'html') {
+    const html = String(rawValue || '').trim();
+    return html
+      ? '<iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe>'
+      : '';
+  }
+
+  if (regionType === 'rtmp') {
+    const label = String(rawValue || '').trim() || 'RTMP source';
+    return '<div class="template-region-rtmp-placeholder">' + escapeHtml(label) + '</div>';
+  }
+
+  return buildTextRegionMarkup(region, regionContent);
+}
+
+async function launchBrowser() {
+  let executablePath = SYSTEM_CHROMIUM_PATHS.find(function (candidate) {
+    return fs.existsSync(candidate);
+  }) || '';
+  const usingSystemChromium = Boolean(executablePath);
+
+  if (!executablePath && chromium && typeof chromium.executablePath === 'function') {
+    executablePath = await chromium.executablePath();
+  }
+
+  if (!executablePath || !fs.existsSync(executablePath)) {
+    throw new Error('Chromium executable was not found.');
+  }
+
+  if (usingSystemChromium) {
+    return puppeteer.launch({
+      args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--disable-gpu'
+      ],
+      defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 1 },
+      executablePath: executablePath,
+      headless: true
+    });
+  }
+
+  return puppeteer.launch({
+    args: puppeteer.defaultArgs({
+      args: chromium && chromium.args ? chromium.args : [],
+      headless: 'shell'
+    }),
+    defaultViewport: chromium && chromium.defaultViewport ? chromium.defaultViewport : null,
+    executablePath: executablePath,
+    headless: 'shell'
+  });
+}
+
+async function captureSlideThumbnail(options) {
+  const pool = options && options.pool;
+  const common = options && options.common;
+  const mediaDir = String(options && options.mediaDir || '').trim();
+  const baseUrl = normalizeBaseUrl(options && options.baseUrl);
+  const slideId = Number(options && options.slideId || 0);
+  const previousThumbnailPath = String(options && options.previousThumbnailPath || '').trim();
+
+  if (!pool || !common || !mediaDir || !Number.isFinite(slideId) || slideId <= 0) {
+    throw new Error('captureSlideThumbnail requires pool, common, mediaDir, and slideId.');
+  }
+
+  const slide = await common.fetchSlideById(pool, slideId);
+  if (!slide) {
+    throw new Error('Slide not found.');
+  }
+
+  const canvasSize = getCanvasSize(slide);
+  const thumbnailDir = path.join(mediaDir, 'thumbnails');
+  const thumbnailRelativePath = String(slide.thumbnail_path || '').trim() || '/media/thumbnails/slides/slide-' + slide.id + '.png';
+  const filePath = path.join(mediaDir, thumbnailRelativePath.replace(/^\/+media\//, ''));
+  const fullSizePath = filePath.replace(/\.png$/i, '.full.png');
+  const thumbnailTempPath = filePath.replace(/\.png$/i, '.tmp.png');
+  const thumbnailPath = thumbnailRelativePath;
+
+  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();
+    try {
+      const previewPath = '/api/internal/slide-thumbnails/' + slide.id + '/preview';
+      const previewUrl = baseUrl + previewPath;
+      await page.setExtraHTTPHeaders(createRequestAuthHeaders({
+        method: 'GET',
+        pathname: previewPath
+      }));
+      await page.setViewport(PLAYER_VIEWPORT);
+      await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      await waitForThumbnailRender(page);
+      const canvas = await page.$('.slide-canvas');
+      if (!canvas) {
+        throw new Error('Player render did not produce a slide canvas.');
+      }
+      await canvas.screenshot({ path: fullSizePath });
+    } finally {
+      await page.close().catch(function () {
+        return null;
+      });
+    }
+  } finally {
+    await browser.close().catch(function () {
+      return null;
+    });
+  }
+
+  await sharp(fullSizePath)
+    .resize({
+      width: THUMBNAIL_MAX_SIZE.width,
+      height: THUMBNAIL_MAX_SIZE.height,
+      fit: 'inside',
+      withoutEnlargement: true
+    })
+    .png()
+    .toFile(thumbnailTempPath);
+
+  await fs.promises.rm(filePath, { force: true });
+  await fs.promises.rename(thumbnailTempPath, filePath);
+  await fs.promises.unlink(fullSizePath).catch(function (error) {
+    if (!error || error.code !== 'ENOENT') {
+      throw error;
+    }
+  });
+
+  await pool.query('UPDATE slides SET thumbnail_path = ? WHERE id = ?', [thumbnailPath, slide.id]);
+  return {
+    slideId: slide.id,
+    thumbnailPath: thumbnailPath,
+    filePath: filePath,
+    fullSizePath: fullSizePath,
+    mediaKind: mediaKind(slide.media_path || '')
+  };
+}
+
+module.exports = {
+  captureSlideThumbnail: captureSlideThumbnail
+};

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) {
@@ -51,6 +57,32 @@ function createUploadSyncService(options) {
     return value;
   }
 
+  function getUploadRelativePath(uploadPath) {
+    const value = normalizeUploadReference(uploadPath);
+    if (!value) {
+      return null;
+    }
+    return value.replace(/^\/media\//, '');
+  }
+
+  function resolveUploadFilePath(uploadDir, uploadPath) {
+    const relativePath = getUploadRelativePath(uploadPath);
+    if (!relativePath) {
+      return null;
+    }
+
+    const normalizedUploadDir = normalizeUploadRoot(uploadDir);
+    if (!normalizedUploadDir) {
+      return null;
+    }
+
+    if (relativePath.startsWith('uploads/')) {
+      return path.join(normalizedUploadDir, relativePath.slice('uploads/'.length));
+    }
+
+    return path.join(path.dirname(normalizedUploadDir), relativePath);
+  }
+
   function collectUploadReferencesFromValue(value, refs) {
     if (!value) {
       return refs;
@@ -134,7 +166,7 @@ function createUploadSyncService(options) {
         continue;
       }
 
-      const filePath = path.join(uploadDir, path.basename(uploadPath));
+      const filePath = resolveUploadFilePath(uploadDir, uploadPath);
       try {
         await fs.promises.unlink(filePath);
       } catch (error) {
@@ -150,6 +182,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;
@@ -174,7 +251,7 @@ function createUploadSyncService(options) {
           return null;
         }
         const data = await response.json();
-        const playerUploadDir = data && data.mediaDir ? normalizeUploadRoot(data.mediaDir) : null;
+        const playerUploadDir = data && (data.uploadDir || data.mediaDir) ? normalizeUploadRoot(data.uploadDir || data.mediaDir) : null;
         if (!playerUploadDir) {
           return null;
         }
@@ -232,8 +309,11 @@ function createUploadSyncService(options) {
       return false;
     }
 
-    const filename = path.basename(uploadPath);
-    const sourcePath = path.join(localUploadDir, filename);
+    const relativePath = getUploadRelativePath(uploadPath);
+    const sourcePath = resolveUploadFilePath(localUploadDir, uploadPath);
+    if (!relativePath || !sourcePath) {
+      return false;
+    }
     let fileBuffer = null;
     try {
       fileBuffer = await fs.promises.readFile(sourcePath);
@@ -247,10 +327,10 @@ function createUploadSyncService(options) {
     try {
       const authHeaders = createRequestAuthHeaders({
         method: 'PUT',
-        pathname: `/api/media/${encodeURIComponent(filename)}`,
+        pathname: `/api/media/${encodeURIComponent(relativePath)}`,
         body: fileBuffer
       });
-      const response = await fetch(`${playerInternalBaseUrl}/api/media/${encodeURIComponent(filename)}`, {
+      const response = await fetch(`${playerInternalBaseUrl}/api/media/${encodeURIComponent(relativePath)}`, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/octet-stream',
@@ -259,12 +339,12 @@ function createUploadSyncService(options) {
         body: fileBuffer
       });
       if (!response.ok) {
-        console.warn('Unable to sync upload to player:', filename, response.status, response.statusText);
+        console.warn('Unable to sync upload to player:', relativePath, response.status, response.statusText);
         return false;
       }
       return true;
     } catch (error) {
-      console.warn('Unable to sync upload to player:', filename, error);
+      console.warn('Unable to sync upload to player:', relativePath, error);
       return false;
     }
   }
@@ -274,13 +354,16 @@ function createUploadSyncService(options) {
       return false;
     }
 
-    const filename = path.basename(uploadPath);
+    const relativePath = getUploadRelativePath(uploadPath);
+    if (!relativePath) {
+      return false;
+    }
     try {
       const authHeaders = createRequestAuthHeaders({
         method: 'DELETE',
-        pathname: `/api/media/${encodeURIComponent(filename)}`
+        pathname: `/api/media/${encodeURIComponent(relativePath)}`
       });
-      const response = await fetch(`${playerInternalBaseUrl}/api/media/${encodeURIComponent(filename)}`, {
+      const response = await fetch(`${playerInternalBaseUrl}/api/media/${encodeURIComponent(relativePath)}`, {
         method: 'DELETE',
         headers: {
           Accept: 'application/json',
@@ -288,12 +371,12 @@ function createUploadSyncService(options) {
         }
       });
       if (!response.ok && response.status !== 404) {
-        console.warn('Unable to remove upload from player:', filename, response.status, response.statusText);
+        console.warn('Unable to remove upload from player:', relativePath, response.status, response.statusText);
         return false;
       }
       return true;
     } catch (error) {
-      console.warn('Unable to remove upload from player:', filename, error);
+      console.warn('Unable to remove upload from player:', relativePath, error);
       return false;
     }
   }
@@ -544,6 +627,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) {
@@ -551,10 +638,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) {
@@ -607,6 +690,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

@@ -168,6 +168,32 @@
   top: 12px;
 }
 
+.card-header .card-tools > .btn,
+.card-header .card-tools > a.btn {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.card-header .card-tools .input-group {
+  flex: 1 1 11rem;
+  min-width: 8rem;
+  max-width: 14rem;
+}
+
+.background-tasks-task-tools {
+  flex-wrap: nowrap;
+}
+
+.background-tasks-task-search {
+  flex: 0 1 12rem;
+  min-width: 9rem;
+  max-width: 12rem;
+}
+
+.background-tasks-task-status {
+  flex: 0 0 auto;
+}
+
 .admin-form-card {
   box-shadow: none;
 }
@@ -241,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;
 }
@@ -283,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;
@@ -733,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%;
@@ -761,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;
@@ -777,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);
@@ -806,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 {
@@ -814,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 {
@@ -826,12 +1201,12 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 
 .designer-rect-label {
   position: absolute;
-  left: 0;
-  top: -1.55rem;
+  left: 0.4rem;
+  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;
@@ -855,26 +1230,30 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 }
 
 .resize-handle.nw {
-  left: -0.4rem;
-  top: -0.4rem;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
   cursor: nwse-resize;
 }
 
 .resize-handle.ne {
-  right: -0.4rem;
-  top: -0.4rem;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
   cursor: nesw-resize;
 }
 
 .resize-handle.sw {
-  left: -0.4rem;
-  bottom: -0.4rem;
+  left: 0;
+  bottom: 0;
+  transform: translate(-50%, 50%);
   cursor: nesw-resize;
 }
 
 .resize-handle.se {
-  right: -0.4rem;
-  bottom: -0.4rem;
+  right: 0;
+  bottom: 0;
+  transform: translate(50%, 50%);
   cursor: nwse-resize;
 }
 
@@ -958,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 {
@@ -1028,7 +1406,7 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: 0;
   min-height: 3.25rem;
 }
 
@@ -1104,8 +1482,14 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   margin: 0;
 }
 
-.region-item .remove-region {
-  justify-self: end;
+.region-item [data-region-remove-button] {
+  width: 100%;
+}
+
+.region-item [data-region-remove-button]:disabled {
+  opacity: 0.65;
+  box-shadow: none;
+  cursor: not-allowed;
 }
 
 .region-item .form-control:focus,
@@ -1182,6 +1566,173 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: none !important;
 }
 
+.playlist-slide-picker-modal-body {
+  display: grid;
+  gap: 1rem;
+}
+
+.playlist-slide-picker-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-bottom: 0.25rem;
+  background: var(--bs-modal-bg, var(--bs-body-bg));
+}
+
+.playlist-slide-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1.25rem;
+  max-height: min(64vh, 48rem);
+  overflow: auto;
+  padding: 0.25rem 0.5rem 0.5rem 0.25rem;
+}
+
+.playlist-slide-picker-card {
+  appearance: none;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1.1rem;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  padding: 0;
+  display: grid;
+  gap: 0.3rem;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.playlist-slide-picker-card:hover,
+.playlist-slide-picker-card:focus-visible {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
+  transform: translateY(-1px);
+  outline: 0;
+}
+
+.playlist-slide-picker-card.is-selected {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
+}
+
+.playlist-slide-picker-card.is-assigned,
+.playlist-slide-picker-card:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+  box-shadow: none;
+}
+
+.playlist-slide-picker-card.is-assigned {
+  border-color: rgba(var(--bs-primary-rgb), 0.35);
+  background: rgba(var(--bs-primary-rgb), 0.08);
+}
+
+.playlist-slide-picker-card.is-assigned .playlist-slide-picker-media {
+  filter: saturate(0.85) grayscale(0.25);
+}
+
+.playlist-slide-picker-card.is-assigned .playlist-slide-picker-title {
+  color: var(--bs-body-secondary);
+}
+
+.playlist-slide-picker-card.is-hidden {
+  display: none !important;
+}
+
+.playlist-slide-picker-media {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 1.05rem 1.05rem 0 0;
+  background: rgba(15, 23, 42, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.playlist-slide-picker-thumb-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.playlist-slide-picker-thumb-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  color: var(--bs-secondary-color, #6c757d);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.12) 100%),
+    repeating-linear-gradient(45deg, rgba(108, 117, 125, 0.08), rgba(108, 117, 125, 0.08) 12px, rgba(108, 117, 125, 0.04) 12px, rgba(108, 117, 125, 0.04) 24px);
+  font-size: 0.8rem;
+  text-align: center;
+  padding: 0.75rem;
+}
+
+.playlist-slide-picker-thumb-placeholder-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.playlist-slide-picker-thumb-placeholder-label {
+  display: block;
+  font-weight: 500;
+}
+
+.playlist-slide-picker-title {
+  font-weight: 600;
+  line-height: 1.25;
+  min-height: 0;
+  font-size: 0.98rem;
+  padding: 0 0.9rem 0.6rem;
+}
+
+.playlist-slide-picker-filter-button {
+  white-space: nowrap;
+}
+
+.playlist-slide-picker-check {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+  color: var(--bs-primary);
+  opacity: 0;
+  background: rgba(var(--bs-body-bg-rgb), 0.88);
+  border-radius: 999px;
+  padding: 0.2rem 0.45rem;
+  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
+}
+
+.playlist-slide-picker-card.is-selected .playlist-slide-picker-check {
+  opacity: 1;
+}
+
+.playlist-slide-picker-badge {
+  display: none;
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  z-index: 1;
+  font-size: 0.65rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.playlist-slide-picker-card.is-assigned .playlist-slide-picker-badge {
+  display: inline-flex;
+}
+
+.playlist-slide-picker-empty.is-hidden {
+  display: none !important;
+}
+
 .schedule-day-grid .schedule-day-button {
   flex: 1 1 0;
 }
@@ -1242,10 +1793,95 @@ td[data-label="Actions"] > div {
   flex: 0 0 auto;
 }
 
+.playlist-duration-input {
+  width: 6rem;
+  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;
 }
 
+.playlist-slide-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.playlist-slide-cell-content {
+  min-width: 0;
+}
+
+.playlist-slide-title {
+  display: block;
+  line-height: 1.25;
+}
+
+.playlist-slide-thumb {
+  flex: 0 0 auto;
+  max-width: 5.5rem;
+  max-height: 5.5rem;
+  aspect-ratio: var(--playlist-slide-thumb-aspect-ratio, 16 / 9);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: rgba(15, 23, 42, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.playlist-slide-thumb-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.playlist-slide-thumb-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 5.5rem;
+  min-height: 3.5rem;
+  color: var(--bs-secondary-color, #6c757d);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
+    rgba(15, 23, 42, 0.18);
+  font-size: 2.25rem;
+  line-height: 1;
+}
+
 .playlist-order-cell {
   width: 1%;
   white-space: nowrap;
@@ -1328,16 +1964,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,594 +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;
-        }
-        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 () {
-
-  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;
-  }
+  var webUiHelpers = window.webUiHelpers || {};
+  var escapeHtml = webUiHelpers.escapeHtml;
+  var formatDashboardDate = webUiHelpers.formatDashboardDate;
+  var getClientRowKey = webUiHelpers.getClientRowKey;
+  var getClientDisplayName = webUiHelpers.getClientDisplayName;
+  var setButtonVariant = webUiHelpers.setButtonVariant;
+  var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
 
   function initConfirmForms() {
     document.addEventListener('submit', function (event) {
@@ -234,6 +161,9 @@
       if (typeof window.initLocalDateTimes === 'function') {
         window.initLocalDateTimes(targetElement);
       }
+      if (typeof window.initTableSearches === 'function') {
+        window.initTableSearches(targetElement);
+      }
     }
 
     function replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId) {
@@ -268,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.
       });
     }
@@ -434,6 +364,11 @@
           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 = '';
@@ -577,8 +512,37 @@
     });
   }
 
-  if (window.initSortableTables) {
-    window.initSortableTables();
+  function initTableSearches(root) {
+    if (typeof window.initTableSearches === 'function') {
+      window.initTableSearches(root);
+    }
+  }
+
+  function createSlideThumbPlaceholder() {
+    var placeholder = document.createElement('span');
+    var icon = document.createElement('i');
+
+    placeholder.className = 'playlist-slide-thumb-placeholder';
+    icon.className = 'bi bi-image';
+    icon.setAttribute('aria-hidden', 'true');
+    placeholder.appendChild(icon);
+    return placeholder;
+  }
+
+  function attachSlideThumbFallbacks(root) {
+    var scope = root && root.querySelectorAll ? root : document;
+
+    Array.prototype.forEach.call(scope.querySelectorAll('.playlist-slide-thumb-image'), function (image) {
+      if (image.getAttribute('data-slide-thumb-fallback-bound') === 'true') {
+        return;
+      }
+      image.setAttribute('data-slide-thumb-fallback-bound', 'true');
+      image.addEventListener('error', function () {
+        if (image.parentNode) {
+          image.parentNode.replaceChild(createSlideThumbPlaceholder(), image);
+        }
+      });
+    });
   }
 
   initConfirmForms();
@@ -589,6 +553,10 @@
   initSubmitOnChange();
   initJsonTogglePanels();
   initLocalDateTimes();
+  initTableSearches();
+  attachSlideThumbFallbacks(document);
   window.initJsonTogglePanels = initJsonTogglePanels;
   window.initLocalDateTimes = initLocalDateTimes;
+  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) {
-    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;
-  }
+  var webUiHelpers = window.webUiHelpers || {};
+  var escapeHtml = webUiHelpers.escapeHtml;
+  var formatDashboardDate = webUiHelpers.formatDashboardDate;
+  var getClientRowKey = webUiHelpers.getClientRowKey;
+  var getClientDisplayName = webUiHelpers.getClientDisplayName;
+  var setButtonVariant = webUiHelpers.setButtonVariant;
+  var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
 
   function renderClientActionCell(client) {
     var paused = Boolean(client.paused);
@@ -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>',
-      '<td data-label="Name">' + escapeHtml(screen.name) + '</td>',
-      '<td data-label="Player URL"><a href="' + escapeHtml(screen.player_url || '') + '" target="_blank">' + escapeHtml(screen.player_url || '') + '</a></td>',
-      '<td data-label="Playlist">' + escapeHtml(screen.playlist_name || '') + '</td>',
-      '<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>',
-      '</tr>'
+      '<article class="dashboard-screen-tile" data-screen-key="' + escapeHtml(screen.id || '') + '">',
+      '<div class="dashboard-screen-tile-top">',
+      '<div class="dashboard-screen-tile-text">',
+      '<h4 class="dashboard-screen-name">' + escapeHtml(screen.name || '') + '</h4>',
+      '<a class="dashboard-screen-link" href="' + escapeHtml(playerUrl) + '" target="_blank">' + escapeHtml(playerUrl) + '</a>',
+      '</div>',
+      '<span class="dashboard-screen-pill ' + connectionStateClass + '">' + escapeHtml(connectionLabel) + '</span>',
+      '</div>',
+      '<dl class="dashboard-screen-meta">',
+      '<div><dt>Playlist</dt><dd>' + playlistLabel + '</dd></div>',
+      '<div><dt>Connections</dt><dd>' + escapeHtml(connectionsLabel) + '</dd></div>',
+      '</dl>',
+      '</article>'
     ].join('');
   }
 
+  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) {
-    var table = document.getElementById('dashboard-screens-table');
-    if (!table || !Array.isArray(state.screens)) {
+  function updateScreenGrid(state) {
+    var grid = document.getElementById('dashboard-screens-grid');
+    if (!grid || !Array.isArray(state.screens)) {
       return;
     }
-    var tbody = table.tBodies && table.tBodies[0] ? table.tBodies[0] : null;
-    if (!tbody) {
+    var screens = state.screens.slice().sort(compareScreensByConnectedClients);
+
+    if (!screens.length) {
+      grid.innerHTML = '<div class="empty dashboard-screen-empty">No screens yet.</div>';
       return;
     }
-    if (!state.screens.length) {
-      tbody.innerHTML = '<tr><td colspan="4" class="empty">No screens yet.</td></tr>';
-      return;
-    }
-    tbody.innerHTML = state.screens.map(renderScreenRow).join('');
-    window.applyTableSort(table);
+    grid.innerHTML = screens.map(renderScreenTile).join('');
   }
 
   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/lib/modal.js

@@ -0,0 +1,32 @@
+(function () {
+  function getOrCreate(modalElement) {
+    if (!modalElement || !window.bootstrap || !window.bootstrap.Modal) {
+      return null;
+    }
+    return window.bootstrap.Modal.getOrCreateInstance(modalElement);
+  }
+
+  function show(modalElement) {
+    var modal = getOrCreate(modalElement);
+    if (modal) {
+      modal.show();
+      return true;
+    }
+    return false;
+  }
+
+  function hide(modalElement) {
+    var modal = getOrCreate(modalElement);
+    if (modal) {
+      modal.hide();
+      return true;
+    }
+    return false;
+  }
+
+  window.pulseModal = {
+    getOrCreate: getOrCreate,
+    show: show,
+    hide: hide
+  };
+}());

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

@@ -1,63 +1,16 @@
 (function () {
-  var REFRESH_INTERVAL_MS = 10000;
-  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') {
+  if (window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-background' && window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-scheduled') {
     return;
   }
 
-  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 refreshPage() {
-    if (document.visibilityState !== 'visible') {
+  try {
+    var url = new URL(window.location.href);
+    if (!url.searchParams.has('message')) {
       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.
-    });
+    url.searchParams.delete('message');
+    window.history.replaceState({}, document.title, url.pathname + (url.search ? url.search : '') + url.hash);
+  } catch (_error) {
+    // Ignore URL cleanup failures.
   }
-
-  stripMessageParameter();
-  window.setInterval(refreshPage, REFRESH_INTERVAL_MS);
 }());

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

@@ -0,0 +1,437 @@
+(function () {
+  var templateFields = document.getElementById('template-fields');
+  var modal = document.getElementById('slide-image-cropper-modal');
+  var image = document.getElementById('slide-image-cropper-image');
+  var status = document.getElementById('slide-image-cropper-status');
+
+  if (!templateFields || !modal || !image || !status) {
+    return;
+  }
+
+  var cropper = null;
+  var currentInput = null;
+  var currentFile = null;
+  var currentObjectUrl = '';
+  var flipX = 1;
+  var flipY = 1;
+  var currentAspectRatio = NaN;
+  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+)$/);
+    return match ? match[1] : '';
+  }
+
+  function getExistingInput(regionId) {
+    if (!regionId) {
+      return null;
+    }
+
+    return document.querySelector('input[type="hidden"][name="existing_region_image_' + regionId + '"]');
+  }
+
+  function setStatus(message) {
+    status.textContent = String(message || '');
+  }
+
+  function showModal() {
+    if (window.pulseModal && typeof window.pulseModal.show === 'function') {
+      window.pulseModal.show(modal);
+      return;
+    }
+
+    if (window.bootstrap && window.bootstrap.Modal) {
+      window.bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+  }
+
+  function hideModal() {
+    if (window.pulseModal && typeof window.pulseModal.hide === 'function') {
+      window.pulseModal.hide(modal);
+      return;
+    }
+
+    if (window.bootstrap && window.bootstrap.Modal) {
+      window.bootstrap.Modal.getOrCreateInstance(modal).hide();
+    }
+  }
+
+  function destroyCropper() {
+    if (cropper) {
+      cropper.destroy();
+      cropper = null;
+    }
+  }
+
+  function revokeObjectUrl() {
+    if (currentObjectUrl) {
+      URL.revokeObjectURL(currentObjectUrl);
+      currentObjectUrl = '';
+    }
+  }
+
+  function resetModalState() {
+    destroyCropper();
+    revokeObjectUrl();
+    currentInput = null;
+    currentFile = null;
+    flipX = 1;
+    flipY = 1;
+    image.removeAttribute('src');
+    image.alt = 'Selected image to crop';
+    setStatus('');
+  }
+
+  function setButtonState(disabled) {
+    modal.querySelectorAll('[data-slide-image-cropper-action]').forEach(function (button) {
+      button.disabled = Boolean(disabled) && button.getAttribute('data-slide-image-cropper-action') !== 'reset';
+    });
+  }
+
+  function ratioLabelForValue(value) {
+    if (value === 'free') {
+      return 'free';
+    }
+
+    if (value === 'region') {
+      return 'region';
+    }
+
+    return String(value || '').trim();
+  }
+
+  function parseAspectRatio(value) {
+    var parts = String(value || '').trim().split(/[:/]/);
+    var width = Number(parts[0]);
+    var height = Number(parts[1]);
+
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return NaN;
+    }
+
+    return width / height;
+  }
+
+  function setActiveRatioButton(value) {
+    var targetValue = ratioLabelForValue(value);
+    modal.querySelectorAll('[data-slide-image-cropper-action="ratio"]').forEach(function (button) {
+      var buttonValue = ratioLabelForValue(button.getAttribute('data-slide-image-cropper-ratio'));
+      var isActive = buttonValue === targetValue;
+      button.classList.toggle('active', isActive);
+      button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+    });
+  }
+
+  function applyAspectRatio(value) {
+    if (!cropper) {
+      return;
+    }
+
+    currentAspectRatio = value;
+    if (value === 'free') {
+      cropper.setAspectRatio(NaN);
+      setActiveRatioButton('free');
+      return;
+    }
+
+    if (value === 'region') {
+      if (!Number.isFinite(currentRegionAspectRatio) || currentRegionAspectRatio <= 0) {
+        cropper.setAspectRatio(NaN);
+        setActiveRatioButton('free');
+        return;
+      }
+
+      cropper.setAspectRatio(currentRegionAspectRatio);
+      setActiveRatioButton('region');
+      return;
+    }
+
+    var parts = String(value || '').split(':');
+    var width = Number(parts[0]);
+    var height = Number(parts[1]);
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return;
+    }
+
+    cropper.setAspectRatio(width / height);
+    setActiveRatioButton(value);
+  }
+
+  function initCropper() {
+    if (!currentInput || !currentFile || !window.Cropper) {
+      return;
+    }
+
+    destroyCropper();
+    cropper = new window.Cropper(image, {
+      aspectRatio: NaN,
+      autoCropArea: 1,
+      background: false,
+      dragMode: 'move',
+      initialAspectRatio: NaN,
+      movable: true,
+      responsive: true,
+      rotatable: true,
+      scalable: true,
+      viewMode: 1,
+      zoomOnTouch: true,
+      zoomOnWheel: true,
+      ready: function () {
+        if (cropper && cropper.container) {
+          cropper.container.style.width = '100%';
+          cropper.container.style.height = '560px';
+          cropper.container.style.maxHeight = '70vh';
+        }
+
+        var containerData = cropper.getContainerData();
+        var imageData = cropper.getImageData();
+        var fitRatio = Math.min(
+          Number(containerData.width || 0) / Number(imageData.naturalWidth || 1),
+          Number(containerData.height || 0) / Number(imageData.naturalHeight || 1),
+          1
+        );
+
+        if (Number.isFinite(fitRatio) && fitRatio > 0) {
+          cropper.zoomTo(fitRatio);
+        } else {
+          cropper.reset();
+        }
+
+        applyAspectRatio(currentAspectRatio === undefined ? 'free' : currentAspectRatio);
+      }
+    });
+
+    setButtonState(false);
+    setActiveRatioButton(currentAspectRatio === undefined ? 'free' : currentAspectRatio);
+    setStatus('Use the toolbar to crop, rotate, or flip the image before applying it.');
+  }
+
+  function openEditor(input, file) {
+    currentInput = input;
+    currentFile = file;
+    flipX = 1;
+    flipY = 1;
+    currentAspectRatio = 'free';
+    currentRegionAspectRatio = parseAspectRatio(input && input.dataset && input.dataset.slideImageCropperRegionRatio);
+    currentRegionAspectRatioLabel = String(input && input.dataset && input.dataset.slideImageCropperRegionRatioLabel || 'Region').trim() || 'Region';
+    setButtonState(true);
+    setStatus('Loading image editor...');
+
+    modal.querySelectorAll('[data-slide-image-cropper-action="ratio"][data-slide-image-cropper-ratio="region"]').forEach(function (button) {
+      button.title = currentRegionAspectRatioLabel ? 'Region ratio ' + currentRegionAspectRatioLabel : 'Region ratio';
+    });
+
+    revokeObjectUrl();
+    currentObjectUrl = URL.createObjectURL(file);
+    image.alt = file.name || 'Selected image to crop';
+    image.src = currentObjectUrl;
+
+    if (!listenersAttached) {
+      listenersAttached = true;
+      modal.addEventListener('shown.bs.modal', function () {
+        if (currentInput && currentFile) {
+          initCropper();
+        }
+      });
+      modal.addEventListener('hidden.bs.modal', function () {
+        resetModalState();
+      });
+    }
+
+    showModal();
+  }
+
+  function setInputFile(input, file) {
+    var dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    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;
+    }
+
+    var input = currentInput;
+    var existing = getExistingInput(getRegionId(input));
+
+    input.dataset.cropperBypass = '1';
+    setInputFile(input, file);
+    if (existing) {
+      existing.value = '';
+    }
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    window.setTimeout(function () {
+      delete input.dataset.cropperBypass;
+    }, 0);
+    hideModal();
+  }
+
+  function commitCrop() {
+    if (!currentInput || !currentFile) {
+      return;
+    }
+
+    if (!cropper) {
+      finalizeCropFile(currentFile);
+      return;
+    }
+
+    setButtonState(true);
+    setStatus('Creating the cropped image...');
+
+    var canvas = cropper.getCroppedCanvas({
+      fillColor: 'transparent',
+      imageSmoothingEnabled: true,
+      imageSmoothingQuality: 'high'
+    });
+
+    if (!canvas) {
+      setStatus('Unable to create the cropped image.');
+      setButtonState(false);
+      return;
+    }
+
+    var outputType = /^image\/(jpeg|jpg|webp|png)$/i.test(currentFile.type || '') ? currentFile.type : 'image/png';
+    canvas.toBlob(function (blob) {
+      if (!blob) {
+        setStatus('Unable to create the cropped image.');
+        setButtonState(false);
+        return;
+      }
+
+      var finalFile = new File([blob], currentFile.name || 'slide-region-image.png', {
+        lastModified: Date.now(),
+        type: blob.type || outputType
+      });
+
+      finalizeCropFile(finalFile);
+    }, outputType, outputType.indexOf('jpeg') !== -1 ? 0.92 : undefined);
+  }
+
+  function rotateImage(direction) {
+    if (cropper) {
+      cropper.rotate(direction);
+    }
+  }
+
+  function flipImage(axis) {
+    if (!cropper) {
+      return;
+    }
+
+    if (axis === 'x') {
+      flipX *= -1;
+      cropper.scaleX(flipX);
+      return;
+    }
+
+    flipY *= -1;
+    cropper.scaleY(flipY);
+  }
+
+  function resetImage() {
+    if (!cropper) {
+      return;
+    }
+
+    cropper.reset();
+    flipX = 1;
+    flipY = 1;
+  }
+
+  templateFields.addEventListener('change', function (event) {
+    var input = event.target;
+    if (!input || !input.matches || !input.matches('input[type="file"][name^="region_image_"]')) {
+      return;
+    }
+
+    if (input.dataset.cropperBypass === '1') {
+      return;
+    }
+
+    var file = input.files && input.files[0];
+    if (!file) {
+      return;
+    }
+
+    if (Number(file.size || 0) > uploadMaxBytes) {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      rejectOversizeFile(input);
+      return;
+    }
+
+    if (!/^image\//i.test(file.type || '')) {
+      input.value = '';
+      return;
+    }
+
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+    input.value = '';
+
+    if (!window.Cropper) {
+      currentInput = input;
+      currentFile = file;
+      commitCrop();
+      return;
+    }
+
+    openEditor(input, file);
+  }, true);
+
+  modal.addEventListener('click', function (event) {
+    var button = event.target && event.target.closest ? event.target.closest('[data-slide-image-cropper-action]') : null;
+    if (!button) {
+      return;
+    }
+
+    var action = button.getAttribute('data-slide-image-cropper-action');
+    if (action === 'apply') {
+      commitCrop();
+      return;
+    }
+    if (action === 'ratio') {
+      applyAspectRatio(button.getAttribute('data-slide-image-cropper-ratio') || 'free');
+      return;
+    }
+    if (action === 'rotate-left') {
+      rotateImage(-90);
+      return;
+    }
+    if (action === 'rotate-right') {
+      rotateImage(90);
+      return;
+    }
+    if (action === 'flip-horizontal') {
+      flipImage('x');
+      return;
+    }
+    if (action === 'flip-vertical') {
+      flipImage('y');
+      return;
+    }
+    if (action === 'reset') {
+      resetImage();
+      return;
+    }
+  });
+}());

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

@@ -1,238 +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 (/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,15 +556,17 @@
     if (hint) {
       hint.remove();
     }
-    regionList.appendChild(makeRegionCard(region));
+    var card = makeRegionCard(region);
+    setRegionRemovalState(card);
+    regionList.appendChild(card);
     setSelected(getCards().length - 1);
   }
 
   function openAddRegionModal() {
-    if (!regionAddModal || !window.bootstrap || !window.bootstrap.Modal) {
+    if (!window.pulseModal) {
       return;
     }
-    window.bootstrap.Modal.getOrCreateInstance(regionAddModal).show();
+    window.pulseModal.show(regionAddModal);
   }
 
   function createDefaultRegion(type) {
@@ -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 });
-      writeCard(cardAt(index), { x: next.x, y: next.y });
+      var size = getCanvasSize();
+      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') {
@@ -701,8 +761,8 @@
       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();
+        if (window.pulseModal) {
+          window.pulseModal.hide(regionAddModal);
         }
       });
     });
@@ -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/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/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,20 +11,166 @@ 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;
   const notifyPlayerScreens = deps.notifyPlayerScreens;
   const broadcastDashboardState = deps.broadcastDashboardState;
+  const backgroundTaskQueue = deps.backgroundTaskQueue;
   const getSlideDeleteBlockMessage = deps.getSlideDeleteBlockMessage;
   const getTemplateDeleteBlockMessage = deps.getTemplateDeleteBlockMessage;
   const getCanvasSizeDeleteBlockMessage = deps.getCanvasSizeDeleteBlockMessage;
   const requirePermission = deps.requirePermission;
+  const hasAnyPermission = deps.hasAnyPermission;
+  const { buildPagination } = require('../../lib/pagination');
 
-  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') {
+  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 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.');
   }
 
+  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 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 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);
+  }
+
+  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);
+    }
+
+    return backgroundTaskQueue.enqueueTask({
+      key: 'slide-thumbnail:' + Number(slideId),
+      title: 'Refresh slide thumbnail',
+      category: 'slides',
+      taskType: 'slide-thumbnail-refresh',
+      payload: {
+        slideId: Number(slideId),
+        previousThumbnailPath: String(previousThumbnailPath || '').trim()
+      },
+      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 = ?';
@@ -58,8 +207,15 @@ module.exports = function registerAdminContentRoutes(app, deps) {
 
   app.get('/slides', requirePermission('slides.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchAdminData(pool);
-      res.send(pages.renderSlidesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchSlidesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderSlidesPage({
+        slides: data.slides || [],
+        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);
     }
@@ -119,8 +275,42 @@ 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')) {
         return res.status(400).send('A slide with that title already exists.');
@@ -136,6 +326,9 @@ module.exports = function registerAdminContentRoutes(app, deps) {
         localUploadDir: deps.uploadDir,
         nextUploadRefs: collectUploadReferencesFromPayload(payload)
       });
+      queueSlideThumbnailRefresh(result.insertId, null).catch(function (error) {
+        console.warn('Unable to queue slide thumbnail refresh:', error);
+      });
       redirectAfterSave(req, res, '/slides/' + result.insertId + '/edit', {
         closeUrl: '/slides',
         newUrl: '/slides/new',
@@ -148,6 +341,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');
@@ -176,6 +370,9 @@ module.exports = function registerAdminContentRoutes(app, deps) {
         screenSlideCounts: screenSlideCounts
       });
       await broadcastDashboardState();
+      queueSlideThumbnailRefresh(slide.id, slide.thumbnail_path).catch(function (error) {
+        console.warn('Unable to queue slide thumbnail refresh:', error);
+      });
       redirectAfterSave(req, res, '/slides/' + slide.id + '/edit', {
         closeUrl: '/slides',
         newUrl: '/slides/new',
@@ -218,8 +415,15 @@ module.exports = function registerAdminContentRoutes(app, deps) {
 
   app.get('/templates', requirePermission('templates.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchTemplatesData(pool);
-      res.send(pages.renderTemplatesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchTemplatesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderTemplatesPage({
+        templates: data.templates || [],
+        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);
     }
@@ -274,6 +478,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) {
@@ -287,11 +492,16 @@ 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)) {
         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);
@@ -355,8 +565,15 @@ module.exports = function registerAdminContentRoutes(app, deps) {
 
   app.get('/canvas-sizes', requirePermission('canvas-sizes.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchAdminData(pool);
-      res.send(pages.renderCanvasSizesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchCanvasSizesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderCanvasSizesPage({
+        canvasSizes: data.canvasSizes || [],
+        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);
     }

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

@@ -13,6 +13,9 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
   const fetchRssFeedItems = deps.fetchRssFeedItems || (common && common.fetchRssFeedItems) || null;
   const replaceRssFeedItems = deps.replaceRssFeedItems || (common && common.replaceRssFeedItems) || null;
   const fetchApiSourceResponse = common && common.fetchApiSourceResponse ? common.fetchApiSourceResponse : null;
+  const { buildPagination } = require('../../lib/pagination');
+
+  const LIST_PAGE_SIZE = 10;
 
   function toIsoTimestamp(value) {
     if (!value) {
@@ -195,8 +198,24 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
 
   app.get('/data-sources/api-sources', requirePermission('api-sources.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchApiSourcesData(pool);
-      res.send(pages.renderApiSourcesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser, formatDashboardDate));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchApiSourcesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      const apiSources = (data.apiSources || []).map(function (apiSource) {
+        return Object.assign({}, apiSource, {
+          intervalLabel: apiSource.update_interval_unit === 'seconds'
+            ? (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every second' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} seconds`)
+            : (Math.max(1, Number(apiSource.update_interval_value) || 0) === 1 ? 'Every minute' : `Every ${Math.max(1, Number(apiSource.update_interval_value) || 0)} minutes`),
+          lastPullLabel: apiSource.last_pulled_at ? formatDashboardDate(apiSource.last_pulled_at) : 'Never',
+          lastPulledAtValue: apiSource.last_pulled_at ? new Date(apiSource.last_pulled_at).toISOString() : ''
+        });
+      });
+      res.send(pages.renderApiSourcesPage({
+        apiSources: apiSources,
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'API sources', 'API source pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser, formatDashboardDate));
     } catch (error) {
       next(error);
     }
@@ -364,8 +383,15 @@ module.exports = function registerAdminDataSourceRoutes(app, deps) {
 
   app.get('/data-sources/rss-feeds', requirePermission('rss-feeds.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchRssFeedsData(pool);
-      res.send(pages.renderRssFeedsPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchRssFeedsPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderRssFeedsPage({
+        rssFeeds: data.rssFeeds || [],
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'RSS feeds', 'RSS feed pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }

src/web/routes/admin/manage.js

@@ -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);
@@ -76,6 +85,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
     try {
       const name = String(req.body.name || '').trim();
       const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
+      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
       if (!name) {
         return res.status(400).send('Playlist name is required.');
       }
@@ -83,7 +93,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
         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, created_by, modified_by) VALUES (?, ?, ?, ?)', [name, fadeBetweenSlides, actorId, actorId]);
+      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]);
       redirectAfterSave(req, res, '/playlists?edit=' + result.insertId, {
         closeUrl: '/playlists',
         newUrl: '/playlists/new',
@@ -99,6 +109,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
     try {
       const name = String(req.body.name || '').trim();
       const fadeBetweenSlides = req.body.fade_between_slides ? 1 : 0;
+      const skipUnavailableRtmp = req.body.skip_unavailable_rtmp ? 1 : 0;
       if (!name) {
         return res.status(400).send('Playlist name is required.');
       }
@@ -114,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']);
@@ -124,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.');
       }
@@ -141,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;
@@ -186,6 +202,7 @@ module.exports = function registerAdminManageRoutes(app, deps) {
           slideId,
           position: i,
           durationSeconds,
+          useVideoDuration,
           scheduleMode,
           scheduleStartDatetime,
           scheduleEndDatetime,
@@ -220,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 = ?, modified_by = ? WHERE id = ?', [name, fadeBetweenSlides, actorId, playlist.id]);
+      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('DELETE FROM 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 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,
@@ -301,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 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 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 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.'));
@@ -321,7 +340,8 @@ 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 = ?',

src/web/routes/admin/rbac.js

@@ -7,8 +7,11 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 	const permissions = Array.isArray(deps.permissions) ? deps.permissions : [];
 	const readArrayField = deps.readArrayField;
 	const normalizePermissionKeys = deps.normalizePermissionKeys;
+	const { buildPagination } = require('../../lib/pagination');
 	const requirePermission = deps.requirePermission;
 
+	const LIST_PAGE_SIZE = 10;
+
 	function slugifyRoleKey(name) {
 		const value = String(name || '').trim().toLowerCase();
 		const slug = value.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
@@ -158,8 +161,15 @@ module.exports = function registerAdminRbacRoutes(app, deps) {
 
 	app.get('/rbac', requirePermission('rbac.read'), async function (req, res, next) {
 		try {
-			const roles = await rbacData.fetchRoles(pool);
-			res.send(pages.renderRbacPage({ roles: roles }, req.query.message ? String(req.query.message) : '', req.currentUser));
+			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const data = await rbacData.fetchRolesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+			res.send(pages.renderRbacPage({
+				roles: data.roles || [],
+				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);
 		}
@@ -362,7 +372,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);

src/web/routes/admin/users.js

@@ -7,8 +7,11 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 	const hashPassword = deps.hashPassword;
 	const readArrayField = deps.readArrayField;
 	const rbacData = deps.rbacData;
+	const { buildPagination } = require('../../lib/pagination');
 	const requirePermission = deps.requirePermission;
 
+	const LIST_PAGE_SIZE = 10;
+
 	async function fetchRoleOptions() {
 		return rbacData.fetchRoles(pool);
 	}
@@ -53,8 +56,12 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 
 	app.get('/users', requirePermission('users.read'), async function (req, res, next) {
 		try {
-			const users = await rbacData.fetchUsersWithRoles(pool);
-			const mappedUsers = users.map(function (user) {
+			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const data = await 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),
 					createdAtLabel: formatDashboardDate(user.created_at),
@@ -62,7 +69,10 @@ module.exports = function registerAdminUsersRoutes(app, deps) {
 					roleNames: String(user.roleNames || '').trim() || 'No roles assigned'
 				});
 			});
-			res.send(pages.renderUsersPage({ users: mappedUsers }, req.query.message ? String(req.query.message) : '', req.currentUser));
+			res.send(pages.renderUsersPage({
+				users: mappedUsers,
+				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);
 		}

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

@@ -43,6 +43,7 @@ module.exports = function renderApiSourcesPage(data, message, currentUser, forma
     active: 'api-sources',
     message: message,
     currentUser: currentUser || null,
-    apiSources: apiSources
+    apiSources: apiSources,
+    pagination: data.pagination || null
   });
 };

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

@@ -27,6 +27,7 @@ module.exports = function renderRssFeedsPage(data, message, currentUser) {
     active: 'rss-feeds',
     message: message,
     currentUser: currentUser || null,
-    rssFeeds: rssFeeds
+    rssFeeds: rssFeeds,
+    pagination: data.pagination || null
   });
 };

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'),

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

@@ -1,7 +1,11 @@
 const { renderView } = require('../../view');
 const { hasAnyPermission } = require('../../../rbac');
+const { buildPagination, buildQueryString } = require('../../lib/pagination');
+const { parsePageNumber, normalizeSortDirection, sortRows, createSearchMatcher } = require('../../lib/list-query');
 
 const TASKS_PER_PAGE = 10;
+const QUEUE_PAGE_URL = '/settings/tasks-background';
+const SCHEDULED_PAGE_URL = '/settings/tasks-scheduled';
 
 function formatIntervalLabel(intervalMs) {
   const value = Math.max(1, Number(intervalMs) || 0);
@@ -16,73 +20,262 @@ function formatIntervalLabel(intervalMs) {
   return `${value} ms`;
 }
 
-function parsePageNumber(value) {
-  const pageNumber = Math.floor(Number(value) || 1);
-  return Math.max(1, pageNumber);
-}
+function normalizeSourceFilter(sourceType, sourceId) {
+  const normalizedSourceType = String(sourceType || '').trim();
+  const normalizedSourceId = Math.floor(Number(sourceId) || 0);
 
-function buildPagination(totalItems, currentPage, pageParam) {
-  const normalizedPageParam = String(pageParam || 'page').trim() || 'page';
-  const totalPages = Math.max(1, Math.ceil(totalItems / TASKS_PER_PAGE));
-  const safeCurrentPage = Math.min(Math.max(1, currentPage), totalPages);
-  const startIndex = (safeCurrentPage - 1) * TASKS_PER_PAGE;
-  const endIndex = Math.min(totalItems, startIndex + TASKS_PER_PAGE);
-  const pages = [];
-
-  for (let pageNumber = 1; pageNumber <= totalPages; pageNumber += 1) {
-    pages.push({
-      number: pageNumber,
-      active: pageNumber === safeCurrentPage,
-      url: `?${normalizedPageParam}=${pageNumber}`
-    });
+  if (!normalizedSourceType || !Number.isFinite(normalizedSourceId) || normalizedSourceId <= 0) {
+    return { sourceType: '', sourceId: '' };
   }
 
   return {
-    currentPage: safeCurrentPage,
-    totalPages: totalPages,
-    totalItems: totalItems,
-    hasMultiplePages: totalPages > 1,
-    startItem: totalItems === 0 ? 0 : startIndex + 1,
-    endItem: endIndex,
-    hasPrevious: safeCurrentPage > 1,
-    hasNext: safeCurrentPage < totalPages,
-    previousUrl: `?${normalizedPageParam}=${safeCurrentPage - 1}`,
-    nextUrl: `?${normalizedPageParam}=${safeCurrentPage + 1}`,
-    pages: pages,
-    pageSize: TASKS_PER_PAGE,
-    pageParam: normalizedPageParam
+    sourceType: normalizedSourceType,
+    sourceId: normalizedSourceId
   };
 }
 
-module.exports = function renderBackgroundTasksPage(data, message, currentUser) {
+function taskMatchesFilters(task, sourceFilter) {
+  if (!sourceFilter || !sourceFilter.sourceType || !sourceFilter.sourceId) {
+    return true;
+  }
+
+  const metadata = task.metadata || {};
+  return String(metadata.sourceType || '').trim() === sourceFilter.sourceType && Number(metadata.sourceId || 0) === sourceFilter.sourceId;
+}
+
+const taskMatchesSearch = createSearchMatcher;
+
+function formatStatusLabel(status) {
+  const normalized = String(status || '').trim().toLowerCase();
+  if (!normalized) {
+    return '';
+  }
+  if (normalized === 'queued') {
+    return 'Queued';
+  }
+  if (normalized === 'running') {
+    return 'Running';
+  }
+  if (normalized === 'completed') {
+    return 'Completed';
+  }
+  if (normalized === 'failed') {
+    return 'Failed';
+  }
+  if (normalized === 'canceled') {
+    return 'Canceled';
+  }
+  return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+}
+
+function buildTaskSourceFilterUrl(queryState, task, sourceFilter) {
+  const metadata = task.metadata || {};
+  const sourceType = String(metadata.sourceType || '').trim();
+  const sourceId = Math.floor(Number(metadata.sourceId) || 0);
+
+  if (!sourceType || !Number.isFinite(sourceId) || sourceId <= 0) {
+    return '';
+  }
+
+  const isActive = sourceFilter && sourceFilter.sourceType === sourceType && sourceFilter.sourceId === sourceId;
+  const nextQuery = Object.assign({}, queryState, {
+    page: 1,
+    sourceType: isActive ? '' : sourceType,
+    sourceId: isActive ? '' : sourceId
+  });
+
+  return buildQueryString(nextQuery);
+}
+
+function buildQueuePageViewModel(data, message, currentUser) {
   const tasks = (data && data.tasks) || [];
-  const recurringTasks = (data && data.recurringTasks) || [];
   const summary = (data && data.summary) || { counts: {}, total: 0, activeCount: 0 };
   const canManage = hasAnyPermission(currentUser, ['background-tasks.allow']);
-  const pagination = buildPagination(tasks.length, parsePageNumber(data && data.page), 'page');
-  const recurringPagination = buildPagination(recurringTasks.length, parsePageNumber(data && data.recurringPage), 'recurringPage');
-  const visibleTasks = tasks.slice((pagination.currentPage - 1) * TASKS_PER_PAGE, pagination.currentPage * TASKS_PER_PAGE);
-  const visibleRecurringTasks = recurringTasks.slice((recurringPagination.currentPage - 1) * TASKS_PER_PAGE, recurringPagination.currentPage * TASKS_PER_PAGE);
+  const sort = String(data && data.sort || '').trim();
+  const direction = normalizeSortDirection(data && data.direction);
+  const queryState = {
+    page: parsePageNumber(data && data.page),
+    sourceType: '',
+    sourceId: '',
+    search: String(data && data.search || '').trim(),
+    sort: sort,
+    direction: direction
+  };
+  const sourceFilter = normalizeSourceFilter(data && data.sourceType, data && data.sourceId);
+  queryState.sourceType = sourceFilter.sourceType;
+  queryState.sourceId = sourceFilter.sourceId;
+  const filteredTasks = tasks.filter(function (task) {
+    return taskMatchesFilters(task, sourceFilter) && taskMatchesSearch(queryState.search, [
+      'title',
+      'key',
+      'category',
+      'status',
+      'errorMessage',
+      function (item) { return item && item.metadata && item.metadata.sourceName; },
+      function (item) { return item && item.metadata && item.metadata.sourceType; },
+      function (item) { return item && item.metadata && item.metadata.sourceId; }
+    ])(task);
+  });
+  const sortedTasks = sortRows(filteredTasks, function (task) {
+    if (sort === 'task') {
+      return task && task.title;
+    }
+    if (sort === 'category') {
+      return task && task.category;
+    }
+    if (sort === 'status') {
+      return task && task.status;
+    }
+    if (sort === 'queued') {
+      return task && task.createdAt;
+    }
+    if (sort === 'started') {
+      return task && task.startedAt;
+    }
+    if (sort === 'finished') {
+      return task && task.finishedAt;
+    }
+    if (sort === 'source') {
+      return [task && task.metadata && task.metadata.sourceName, task && task.metadata && task.metadata.sourceType, task && task.metadata && task.metadata.sourceId].map(function (value) {
+        return String(value || '').trim();
+      }).join(' ');
+    }
+    return task && task.createdAt;
+  }, direction);
+  const pagination = buildPagination(sortedTasks.length, queryState.page, 'page', queryState, TASKS_PER_PAGE, 'tasks', 'Background task pages');
+  const visibleTasks = sortedTasks.slice((pagination.currentPage - 1) * TASKS_PER_PAGE, pagination.currentPage * TASKS_PER_PAGE);
+  const statusCards = [
+    {
+      status: 'queued',
+      label: 'Queued',
+      count: summary.counts.queued,
+      variant: 'primary'
+    },
+    {
+      status: 'running',
+      label: 'Running',
+      count: summary.counts.running,
+      variant: 'info'
+    },
+    {
+      status: 'failed',
+      label: 'Failed',
+      count: summary.counts.failed,
+      variant: 'danger'
+    },
+    {
+      status: 'completed',
+      label: 'Finished',
+      count: summary.counts.completed,
+      variant: 'success'
+    }
+  ].map(function (card) {
+    return Object.assign({}, card, {
+      active: false
+    });
+  });
 
-  return renderView('settings/background-tasks/index', {
+  const visibleTasksWithSources = visibleTasks.map(function (task) {
+    return Object.assign({}, task, {
+      sourceUrl: buildTaskSourceFilterUrl(queryState, task, sourceFilter),
+      sourceLabel: task.metadata && task.metadata.sourceName ? String(task.metadata.sourceName).trim() : '',
+      sourceTypeLabel: task.metadata && task.metadata.sourceType ? String(task.metadata.sourceType).trim() : '',
+      sourceIdLabel: task.metadata && task.metadata.sourceId ? Number(task.metadata.sourceId) : ''
+    });
+  });
+  const hasActiveFilters = Boolean(queryState.sourceType || queryState.sourceId);
+
+  return renderView('settings/tasks-background/index', {
     title: 'Background tasks',
     active: 'background-tasks',
     message: message,
     currentUser: currentUser || null,
     scripts: ['js/settings/background-tasks.js'],
-    stateVersion: data && data.stateVersion ? String(data.stateVersion) : '',
-    tasks: visibleTasks,
-    recurringTasks: visibleRecurringTasks.map(function (task) {
-      return Object.assign({}, task, {
-        intervalLabel: formatIntervalLabel(task.intervalMs)
-      });
-    }),
+    backgroundTasksMenuOpen: true,
+    tasks: visibleTasksWithSources,
     summary: summary,
+    statusCards: statusCards,
+    activeSourceLabel: queryState.sourceType && queryState.sourceId ? `${queryState.sourceType} #${queryState.sourceId}` : '',
+    clearFiltersUrl: QUEUE_PAGE_URL,
+    hasActiveFilters: hasActiveFilters,
     pagination: pagination,
-    recurringPagination: recurringPagination,
     canManage: canManage,
     canClearFinished: tasks.some(function (task) {
       return task.status !== 'queued' && task.status !== 'running';
     })
   });
+}
+
+function buildScheduledPageViewModel(data, message, currentUser) {
+  const recurringTasks = (data && data.recurringTasks) || [];
+  const summary = (data && data.summary) || { counts: {}, total: 0, activeCount: 0, scheduledCount: 0 };
+  const canManage = hasAnyPermission(currentUser, ['scheduled-tasks.allow']);
+  const search = String(data && data.search || '').trim();
+  const sort = String(data && data.sort || '').trim();
+  const direction = normalizeSortDirection(data && data.direction);
+  const filteredRecurringTasks = recurringTasks.filter(function (task) {
+    return taskMatchesSearch(search, [
+      'title',
+      'intervalLabel',
+      'nextRunAt',
+      'lastRunAt',
+      'lastStatus',
+      'lastError',
+      function (item) { return item && item.metadata && item.metadata.sourceName; },
+      function (item) { return item && item.metadata && item.metadata.sourceType; },
+      function (item) { return item && item.metadata && item.metadata.sourceId; }
+    ])(task);
+  });
+  const sortedRecurringTasks = sortRows(filteredRecurringTasks, function (task) {
+    if (sort === 'task') {
+      return task && task.title;
+    }
+    if (sort === 'interval') {
+      return task && task.intervalMs;
+    }
+    if (sort === 'next_run') {
+      return task && task.nextRunAt;
+    }
+    if (sort === 'last_run') {
+      return task && task.lastRunAt;
+    }
+    if (sort === 'last_result') {
+      return [task && task.lastStatus, task && task.lastError].map(function (value) {
+        return String(value || '').trim();
+      }).join(' ');
+    }
+    if (sort === 'source') {
+      return [task && task.metadata && task.metadata.sourceName, task && task.metadata && task.metadata.sourceType, task && task.metadata && task.metadata.sourceId].map(function (value) {
+        return String(value || '').trim();
+      }).join(' ');
+    }
+    return task && task.nextRunAt;
+  }, direction);
+
+  return renderView('settings/tasks-scheduled/index', {
+    title: 'Scheduled tasks',
+    active: 'background-tasks-scheduled',
+    message: message,
+    currentUser: currentUser || null,
+    scripts: ['js/settings/background-tasks.js'],
+    backgroundTasksMenuOpen: true,
+    recurringTasks: sortedRecurringTasks.map(function (task) {
+      return Object.assign({}, task, {
+        intervalLabel: formatIntervalLabel(task.intervalMs)
+      });
+    }),
+    summary: summary,
+    canManage: canManage,
+    scheduledCount: Number(summary.scheduledCount || filteredRecurringTasks.length || 0),
+    recurringPagination: buildPagination(sortedRecurringTasks.length, parsePageNumber(data && data.recurringPage), 'recurringPage', { recurringPage: parsePageNumber(data && data.recurringPage), search: search, sort: sort, direction: direction })
+  });
+}
+
+module.exports = {
+  renderBackgroundTasksPage: function (data, message, currentUser) {
+    return buildQueuePageViewModel(data, message, currentUser);
+  },
+  renderBackgroundTasksScheduledPage: function (data, message, currentUser) {
+    return buildScheduledPageViewModel(data, message, currentUser);
+  }
 };

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

@@ -17,6 +17,23 @@ function requireSettingsAccess() {
   };
 }
 
+function requireScheduledSettingsAccess() {
+  return function (req, res, next) {
+    if (!req.currentUser) {
+      return res.redirect('/login?message=' + encodeURIComponent('Please sign in to continue.'));
+    }
+
+    if (hasAnyPermission(req.currentUser, ['scheduled-tasks.read', 'scheduled-tasks.allow'])) {
+      return next();
+    }
+
+    const error = new Error('You do not have permission to access this area.');
+    error.statusCode = 403;
+    error.expose = true;
+    next(error);
+  };
+}
+
 module.exports = function registerAdminSettingsRoutes(app, deps) {
   const pages = deps.pages;
   const backgroundTaskQueue = deps.backgroundTaskQueue;
@@ -25,44 +42,18 @@ module.exports = function registerAdminSettingsRoutes(app, deps) {
     throw new Error('registerAdminSettingsRoutes requires pages and backgroundTaskQueue.');
   }
 
-  function buildQueueVersion(tasks, recurringTasks, summary) {
-    return [
-      'q:' + Number(summary && summary.counts && summary.counts.queued || 0),
-      'r:' + Number(summary && summary.counts && summary.counts.running || 0),
-      'f:' + Number(summary && summary.counts && summary.counts.failed || 0),
-      'c:' + Number(summary && summary.counts && summary.counts.completed || 0),
-      'a:' + Number(summary && summary.activeCount || 0),
-      't:' + Number(summary && summary.total || 0),
-      'tasks:' + (tasks || []).map(function (task) {
-        return [task.id, task.status, task.startedAt || '', task.finishedAt || '', task.errorMessage || '', task.attempts || 0].join(':');
-      }).join('|'),
-      'recurring:' + (recurringTasks || []).map(function (task) {
-        return [task.key, task.nextRunAt || '', task.lastRunAt || '', task.lastStatus || '', task.lastError || ''].join(':');
-      }).join('|')
-    ].join('~');
-  }
-
-  app.get('/settings/background-tasks', requireSettingsAccess(), function (req, res) {
+  app.get('/settings/tasks-background', requireSettingsAccess(), function (req, res) {
     const tasks = backgroundTaskQueue.listTasks();
     const recurringTasks = backgroundTaskQueue.listRecurringTasks();
     const summary = backgroundTaskQueue.getSummary();
-    const version = buildQueueVersion(tasks, recurringTasks, summary);
-    res.send(pages.renderBackgroundTasksPage({ tasks: tasks, recurringTasks: recurringTasks, summary: summary, stateVersion: version, page: req.query.page, recurringPage: req.query.recurringPage }, req.query.message ? String(req.query.message) : '', req.currentUser));
+    res.send(pages.renderBackgroundTasksPage({ tasks: tasks, recurringTasks: recurringTasks, summary: summary, page: req.query.page, recurringPage: req.query.recurringPage, search: req.query.search, sort: req.query.sort, direction: req.query.direction }, req.query.message ? String(req.query.message) : '', req.currentUser));
   });
 
-  app.get('/settings/background-tasks/state', requireSettingsAccess(), function (req, res) {
+  app.get('/settings/tasks-scheduled', requireScheduledSettingsAccess(), function (req, res) {
     const tasks = backgroundTaskQueue.listTasks();
     const recurringTasks = backgroundTaskQueue.listRecurringTasks();
     const summary = backgroundTaskQueue.getSummary();
-    const version = buildQueueVersion(tasks, recurringTasks, summary);
-
-    res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private');
-    res.json({
-      version: version,
-      summary: summary,
-      taskCount: tasks.length,
-      recurringCount: recurringTasks.length
-    });
+    res.send(pages.renderBackgroundTasksScheduledPage({ tasks: tasks, recurringTasks: recurringTasks, summary: summary, page: req.query.page, recurringPage: req.query.recurringPage, search: req.query.search, sort: req.query.sort, direction: req.query.direction }, req.query.message ? String(req.query.message) : '', req.currentUser));
   });
 
   function requireSettingsManageAccess() {
@@ -82,18 +73,38 @@ module.exports = function registerAdminSettingsRoutes(app, deps) {
     };
   }
 
-  app.post('/settings/background-tasks/clear-finished', requireSettingsManageAccess(), function (req, res) {
+  function requireRecurringTaskAccess(req, res, next) {
+    if (!req.currentUser) {
+      return res.redirect('/login?message=' + encodeURIComponent('Please sign in to continue.'));
+    }
+
+    if (!hasAnyPermission(req.currentUser, ['scheduled-tasks.allow'])) {
+      const error = new Error('You do not have permission to access this area.');
+      error.statusCode = 403;
+      error.expose = true;
+      return next(error);
+    }
+
+    return next();
+  }
+
+  app.post('/settings/tasks-background/clear-finished', requireSettingsManageAccess(), function (req, res) {
     const removedCount = backgroundTaskQueue.clearFinishedTasks();
-    res.redirect('/settings/background-tasks?message=' + encodeURIComponent(removedCount ? 'Cleared ' + removedCount + ' finished task' + (removedCount === 1 ? '' : 's') + '.' : 'No finished tasks to clear.'));
+    res.redirect('/settings/tasks-background?message=' + encodeURIComponent(removedCount ? 'Cleared ' + removedCount + ' finished task' + (removedCount === 1 ? '' : 's') + '.' : 'No finished tasks to clear.'));
   });
 
-  app.post('/settings/background-tasks/:id/cancel', requireSettingsManageAccess(), function (req, res) {
+  app.post('/settings/tasks-background/:id/cancel', requireSettingsManageAccess(), function (req, res) {
     const canceled = backgroundTaskQueue.cancelTask(Number(req.params.id));
-    res.redirect('/settings/background-tasks?message=' + encodeURIComponent(canceled ? 'Task canceled.' : 'Unable to cancel that task.'));
+    res.redirect('/settings/tasks-background?message=' + encodeURIComponent(canceled ? 'Task canceled.' : 'Unable to cancel that task.'));
   });
 
-  app.post('/settings/background-tasks/:id/retry', requireSettingsManageAccess(), function (req, res) {
-    const retryTask = backgroundTaskQueue.retryTask(Number(req.params.id));
-    res.redirect('/settings/background-tasks?message=' + encodeURIComponent(retryTask ? 'Task requeued.' : 'Unable to retry that task.'));
+  app.post('/settings/tasks-background/:id/retry', requireSettingsManageAccess(), function (req, res) {
+    const retriedTask = backgroundTaskQueue.retryTask(Number(req.params.id));
+    res.redirect('/settings/tasks-background?message=' + encodeURIComponent(retriedTask ? 'Task requeued.' : 'Unable to retry that task.'));
+  });
+
+  app.post('/settings/tasks-scheduled/recurring/:key/run', requireRecurringTaskAccess, function (req, res) {
+    const ran = backgroundTaskQueue.runRecurringTask(String(req.params.key || '').trim());
+    res.redirect('/settings/tasks-scheduled?message=' + encodeURIComponent(ran ? 'Scheduled refresh run queued.' : 'Unable to run that scheduled refresh.'));
   });
 };

src/web/routes/settings/rbac/list.js

@@ -6,6 +6,7 @@ module.exports = function renderRbacPage(data, message, currentUser) {
     active: 'rbac',
     message: message,
     currentUser: currentUser || null,
-    roles: data.roles || []
+    roles: data.roles || [],
+    pagination: data.pagination || null
   });
 };

src/web/routes/settings/users/list.js

@@ -6,6 +6,7 @@ module.exports = function renderUsersPage(data, message, currentUser) {
     active: 'users',
     message: message,
     currentUser: currentUser || null,
-    users: data.users || []
+    users: data.users || [],
+    pagination: data.pagination || null
   });
 };

src/web/routes/signage/canvas-sizes/list.js

@@ -6,7 +6,9 @@ module.exports = function renderCanvasSizesPage(data, message, currentUser) {
     name: size.name,
     width: size.width,
     height: size.height,
-    templateCount: (data.templates || []).filter((template) => Number(template.canvas_size_id) === Number(size.id)).length
+    templateCount: size.template_count !== undefined
+      ? Number(size.template_count) || 0
+      : (data.templates || []).filter((template) => Number(template.canvas_size_id) === Number(size.id)).length
   }));
 
   return renderView('canvas-sizes/list', {
@@ -14,6 +16,7 @@ module.exports = function renderCanvasSizesPage(data, message, currentUser) {
     active: 'canvas-sizes',
     message: message,
     currentUser: currentUser || null,
-    canvasSizes: canvasSizes
+    canvasSizes: canvasSizes,
+    pagination: data.pagination || null
   });
 };

src/web/routes/signage/canvas-sizes/routes.js

@@ -2,12 +2,22 @@ module.exports = function registerCanvasSizeRoutes(app, deps) {
   const pages = deps.pages;
   const common = deps.common;
   const pool = deps.pool;
+  const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
   app.get('/canvas-sizes', requirePermission('canvas-sizes.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchCanvasSizesData(pool);
-      res.send(pages.renderCanvasSizesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchCanvasSizesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderCanvasSizesPage({
+        canvasSizes: data.canvasSizes || [],
+        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);
     }

src/web/routes/signage/clients/list.js

@@ -7,6 +7,7 @@ module.exports = function renderConnectedClientsPage(data, message, currentUser)
     message: message,
     currentUser: currentUser || null,
     scripts: ['js/dashboard/dashboard-page.js'],
-    clients: data.clients || []
+    clients: data.clients || [],
+    pagination: data.pagination || null
   });
 };

src/web/routes/signage/clients/routes.js

@@ -1,13 +1,66 @@
 module.exports = function registerClientsRoutes(app, deps) {
   const pool = deps.pool;
+  const common = deps.common;
   const pages = deps.pages;
   const buildDashboardState = deps.buildDashboardState;
+  const { buildPagination } = require('../../../lib/pagination');
+  const { sortRows, createSearchMatcher } = require('../../../lib/list-query');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
+  function sortClients(clients, sortKey, sortDirection) {
+    const normalizedSortKey = String(sortKey || '').trim();
+    const normalizedDirection = String(sortDirection || '').trim().toLowerCase() === 'desc' ? 'desc' : 'asc';
+    const accessors = {
+      client: function (client) { return String(client && (client.client_name || client.name || client.clientId) || '').trim(); },
+      screen: function (client) { return String(client && (client.screen_name || client.screen_slug) || '').trim(); },
+      slide: function (client) { return String(client && client.currentSlideTitle || '').trim(); },
+      ip: function (client) { return String(client && client.clientIp || '').trim(); },
+      viewport: function (client) {
+        const viewport = client && client.viewport;
+        if (!viewport || !viewport.width || !viewport.height) {
+          return '';
+        }
+        return `${Number(viewport.width) || 0}x${Number(viewport.height) || 0}`;
+      },
+      connected: function (client) { return String(client && (client.connectedAt || client.lastSeenAt) || '').trim(); }
+    };
+
+    if (!accessors[normalizedSortKey]) {
+      return Array.isArray(clients) ? clients.slice() : [];
+    }
+
+    return sortRows(clients, function (client) {
+      return accessors[normalizedSortKey](client);
+    }, normalizedDirection);
+  }
+
   app.get('/clients', requirePermission('clients.read'), async function (req, res, next) {
     try {
       const data = await buildDashboardState(pool);
-      res.send(pages.renderConnectedClientsPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      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 matchesSearch = createSearchMatcher(search, [
+        'name',
+        'client_name',
+        'clientId',
+        'deviceId',
+        'slug',
+        'screen_slug',
+        'ipAddress',
+        'status'
+      ]);
+      const filteredClients = (data.clients || []).filter(matchesSearch);
+      const sortedClients = sortClients(filteredClients, sort, direction);
+      const startIndex = (page - 1) * LIST_PAGE_SIZE;
+      const clients = sortedClients.slice(startIndex, startIndex + LIST_PAGE_SIZE);
+      res.send(pages.renderConnectedClientsPage({
+        clients: clients,
+        pagination: buildPagination(sortedClients.length, page, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'clients', 'Client pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }

src/web/routes/signage/playlists/add.js

@@ -5,7 +5,8 @@ module.exports = function renderPlaylistFormPage(message, currentUser) {
     title: 'Create playlist',
     active: 'playlists',
     playlist: {
-      fade_between_slides: false
+      fade_between_slides: false,
+      skip_unavailable_rtmp: false
     },
     message: message,
     currentUser: currentUser || null

src/web/routes/signage/playlists/edit.js

@@ -61,6 +61,86 @@ function getCanvasSignature(width, height) {
   return normalizedWidth + 'x' + normalizedHeight;
 }
 
+function hasVideoRegion(contentJson) {
+  if (!contentJson) {
+    return false;
+  }
+
+  try {
+    const parsed = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson;
+    return Boolean(parsed && typeof parsed === 'object' && Object.keys(parsed).some((key) => {
+      const region = parsed[key];
+      return region && typeof region === 'object' && String(region.type || '').trim().toLowerCase() === 'video';
+    }));
+  } catch (_error) {
+    return false;
+  }
+}
+
+function getVideoSourcePath(slide) {
+  if (!slide) {
+    return '';
+  }
+
+  const directMediaPath = String(slide.media_path || '').trim();
+  if (String(slide.media_type || '').trim().toLowerCase() === 'video' && directMediaPath) {
+    return directMediaPath;
+  }
+
+  const contentJson = slide.content_json;
+  if (!contentJson) {
+    return directMediaPath;
+  }
+
+  try {
+    const parsed = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson;
+    if (!parsed || typeof parsed !== 'object') {
+      return directMediaPath;
+    }
+
+    const videoRegion = Object.keys(parsed).map((key) => parsed[key]).find((region) => {
+      return region && typeof region === 'object' && String(region.type || '').trim().toLowerCase() === 'video' && String(region.value || '').trim();
+    });
+
+    return videoRegion ? String(videoRegion.value || '').trim() : directMediaPath;
+  } catch (_error) {
+    return directMediaPath;
+  }
+}
+
+function getVideoDurationSeconds(slide) {
+  if (!slide) {
+    return null;
+  }
+
+  const contentJson = slide.content_json;
+  if (!contentJson) {
+    return null;
+  }
+
+  try {
+    const parsed = typeof contentJson === 'string' ? JSON.parse(contentJson) : contentJson;
+    if (!parsed || typeof parsed !== 'object') {
+      return null;
+    }
+
+    const videoRegion = Object.keys(parsed).map((key) => parsed[key]).find((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;
+  }
+}
+
+function getVideoDurationValue(slide) {
+  const storedDuration = Number(slide && slide.duration_seconds || 0);
+  const videoDuration = getVideoDurationSeconds(slide);
+  return Boolean(slide && slide.use_video_duration) && videoDuration ? videoDuration : storedDuration;
+}
+
 module.exports = function renderPlaylistEditPage(playlist, data, message, currentUser) {
   const playlistSlides = (data.playlistSlides || [])
     .filter((item) => item.playlist_id === playlist.id)
@@ -75,6 +155,11 @@ module.exports = function renderPlaylistEditPage(playlist, data, message, curren
       isFirst: index === 0,
       isLast: index === items.length - 1,
       canvasSignature: getCanvasSignature(item.canvas_width, item.canvas_height) || '',
+      showVideoDurationButton: String(item.media_type || '').trim().toLowerCase() === 'video' || hasVideoRegion(item.content_json),
+      videoSourcePath: getVideoSourcePath(item),
+      videoDurationSeconds: getVideoDurationSeconds(item),
+      useVideoDuration: Boolean(item.use_video_duration),
+      durationSeconds: getVideoDurationValue(item),
       scheduleSummary: scheduleSummary(item)
     }));
   const assignedSlideIds = new Set(playlistSlides.map((item) => item.slide_id));
@@ -91,7 +176,12 @@ module.exports = function renderPlaylistEditPage(playlist, data, message, curren
     return getCanvasSignature(slide.canvas_width, slide.canvas_height) === playlistCanvasSignature;
   }).map((slide) => Object.assign({}, slide, {
     canvasSignature: getCanvasSignature(slide.canvas_width, slide.canvas_height) || '',
-    isAssigned: assignedSlideIds.has(slide.id)
+    isAssigned: assignedSlideIds.has(slide.id),
+    showVideoDurationButton: String(slide.media_type || '').trim().toLowerCase() === 'video' || hasVideoRegion(slide.content_json),
+    videoSourcePath: getVideoSourcePath(slide),
+    videoDurationSeconds: getVideoDurationSeconds(slide),
+    useVideoDuration: Boolean(slide.use_video_duration),
+    durationSeconds: getVideoDurationValue(slide)
   }));
   const hasAddableSlides = selectableSlides.some((slide) => !slide.isAssigned);
 
@@ -102,6 +192,7 @@ module.exports = function renderPlaylistEditPage(playlist, data, message, curren
     currentUser: currentUser || null,
     playlist: playlist,
     playlistFadeBetweenSlides: Boolean(playlist.fade_between_slides),
+    playlistSkipUnavailableRtmp: Boolean(playlist.skip_unavailable_rtmp),
     playlistSlides: playlistSlides,
     slides: data.slides || [],
     hasSlides: (data.slides || []).length > 0,
@@ -110,6 +201,6 @@ module.exports = function renderPlaylistEditPage(playlist, data, message, curren
     selectableSlides: selectableSlides,
     playlistCanvasSignature: playlistCanvasSignature,
     playlistCanvasMismatch: playlistCanvasMismatch,
-    scripts: ['js/vendor/sortable.min.js', 'js/playlists/playlist-schedule.js']
+    scripts: ['js/lib/modal.js?v=20260726.7', 'js/vendor/sortable.min.js?v=20260726.7', 'js/playlists/playlist-schedule.js?v=20260726.7']
   });
 };

src/web/routes/signage/playlists/list.js

@@ -1,9 +1,10 @@
 const { renderView } = require('../../../view');
 
 module.exports = function renderPlaylistsPage(data, message, currentUser) {
-  const playlistSlides = data.playlistSlides || [];
   const playlists = (data.playlists || []).map((playlist) => {
-    const slideCount = playlistSlides.filter((item) => item.playlist_id === playlist.id).length;
+    const slideCount = playlist.slide_count !== undefined
+      ? Number(playlist.slide_count) || 0
+      : (data.playlistSlides || []).filter((item) => item.playlist_id === playlist.id).length;
     return Object.assign({}, playlist, {
       slideCount: slideCount,
       slideCountIsOne: slideCount === 1
@@ -15,7 +16,8 @@ module.exports = function renderPlaylistsPage(data, message, currentUser) {
     active: 'playlists',
     message: message,
     currentUser: currentUser || null,
-    playlists: playlists
+    playlists: playlists,
+    pagination: data.pagination || null
   });
 };
 

src/web/routes/signage/playlists/routes.js

@@ -2,8 +2,11 @@ module.exports = function registerPlaylistsRoutes(app, deps) {
   const pool = deps.pool;
   const common = deps.common;
   const pages = deps.pages;
+  const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
   function requireQueryPermission(readPermissionKey, editPermissionKey) {
     return function (req, res, next) {
       const permissionKey = req.query && req.query.edit ? editPermissionKey : readPermissionKey;
@@ -13,15 +16,23 @@ module.exports = function registerPlaylistsRoutes(app, deps) {
 
   app.get('/playlists', requireQueryPermission('playlists.read', 'playlists.update'), async function (req, res, next) {
     try {
-      const data = await common.fetchAdminData(pool);
+      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);
       if (req.query.edit) {
+        const data = await common.fetchAdminData(pool);
         const playlist = await common.fetchPlaylistById(pool, Number(req.query.edit));
         if (!playlist) {
           return res.status(404).send('Playlist not found');
         }
         return res.send(pages.renderPlaylistEditPage(playlist, data, req.query.message ? String(req.query.message) : '', req.currentUser));
       }
-      res.send(pages.renderPlaylistsPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const data = await common.fetchPlaylistsPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderPlaylistsPage({
+        playlists: data.playlists || [],
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'playlists', 'Playlist pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }

src/web/routes/signage/playlists/slide-config.js

@@ -74,6 +74,6 @@ module.exports = function renderPlaylistSlideConfigPage(playlist, playlistSlide,
       ...day,
       checked: selectedDays.has(day.value)
     })),
-    scripts: ['js/playlists/playlist-schedule.js']
+    scripts: ['js/lib/modal.js', 'js/playlists/playlist-schedule.js']
   });
 };

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

@@ -6,7 +6,8 @@ module.exports = function renderScreensPage(data, message, currentUser) {
     active: 'screens',
     message: message,
     currentUser: currentUser || null,
-    screens: data.screens || []
+    screens: data.screens || [],
+    pagination: data.pagination || null
   });
 };
 

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

@@ -3,8 +3,11 @@ module.exports = function registerScreensRoutes(app, deps) {
   const common = deps.common;
   const pages = deps.pages;
   const buildDashboardState = deps.buildDashboardState;
+  const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
   function requireQueryPermission(readPermissionKey, editPermissionKey) {
     return function (req, res, next) {
       const permissionKey = req.query && req.query.edit ? editPermissionKey : readPermissionKey;
@@ -12,9 +15,38 @@ module.exports = function registerScreensRoutes(app, deps) {
     };
   }
 
+  function applyConnectionCounts(screens, dashboardScreens) {
+    const countsById = new Map();
+    const countsBySlug = new Map();
+
+    (dashboardScreens || []).forEach(function (screen) {
+      const count = Number(screen && screen.player_connection_count || 0);
+      const id = screen && screen.id !== undefined && screen.id !== null ? String(screen.id) : '';
+      const slug = String(screen && screen.slug || '').trim();
+
+      if (id) {
+        countsById.set(id, count);
+      }
+      if (slug) {
+        countsBySlug.set(slug, count);
+      }
+    });
+
+    return (screens || []).map(function (screen) {
+      const slug = String(screen && screen.slug || '').trim();
+      const id = screen && screen.id !== undefined && screen.id !== null ? String(screen.id) : '';
+      const playerConnectionCount = countsBySlug.has(slug)
+        ? countsBySlug.get(slug)
+        : countsById.get(id) || 0;
+
+      return Object.assign({}, screen, {
+        player_connection_count: playerConnectionCount
+      });
+    });
+  }
+
   app.get('/screens', requireQueryPermission('screens.read', 'screens.update'), async function (req, res, next) {
     try {
-      const data = await buildDashboardState(pool);
       if (req.query.edit) {
         const screen = await common.fetchScreenById(pool, Number(req.query.edit));
         if (!screen) {
@@ -23,7 +55,16 @@ module.exports = function registerScreensRoutes(app, deps) {
         const editData = await common.fetchScreenEditData(pool);
         return res.send(pages.renderScreenEditPage(screen, editData, req.query.message ? String(req.query.message) : '', req.currentUser));
       }
-      res.send(pages.renderScreensPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      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 dashboardState = await buildDashboardState(pool);
+      const data = await common.fetchScreensPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderScreensPage({
+        screens: applyConnectionCounts(data.screens || [], dashboardState.screens || []),
+        pagination: buildPagination(data.totalItems, data.currentPage, 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'screens', 'Screen pages')
+      }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }

src/web/routes/signage/slides/list.js

@@ -6,7 +6,8 @@ module.exports = function renderSlidesPage(data, message, currentUser) {
     active: 'slides',
     message: message,
     currentUser: currentUser || null,
-    slides: data.slides || []
+    slides: data.slides || [],
+    pagination: data.pagination || null
   });
 };
 

src/web/routes/signage/slides/routes.js

@@ -2,12 +2,22 @@ module.exports = function registerSlidesRoutes(app, deps) {
   const pages = deps.pages;
   const common = deps.common;
   const pool = deps.pool;
+  const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
   app.get('/slides', requirePermission('slides.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchAdminData(pool);
-      res.send(pages.renderSlidesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchSlidesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderSlidesPage({
+        slides: data.slides || [],
+        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);
     }

src/web/routes/signage/templates/add.js

@@ -9,6 +9,7 @@ function buildDefaultTemplate() {
     canvas_size_height: 1080,
     background_color: '#111111',
     background_image_path: '',
+    region_usage: [],
     regions: []
   };
 }
@@ -50,6 +51,6 @@ module.exports = function renderTemplateFormPage(template, mode, message, canvas
     currentUser: currentUser || null,
     template: current,
     canvasSizes: canvasSizes || [],
-    scripts: ['js/templates/template-designer-utils.js', 'js/templates/template-designer.js']
+    scripts: ['js/lib/modal.js', 'js/templates/template-designer-utils.js', 'js/templates/template-designer.js']
   });
 };

src/web/routes/signage/templates/list.js

@@ -6,7 +6,12 @@ module.exports = function renderTemplatesPage(data, message, currentUser) {
     name: template.name,
     canvas_size_width: template.canvas_size_width,
     canvas_size_height: template.canvas_size_height,
-    regionCount: (data.templateRegions || []).filter((region) => region.template_id === template.id).length
+    slideCount: template.slide_count !== undefined
+      ? Number(template.slide_count) || 0
+      : 0,
+    regionCount: template.region_count !== undefined
+      ? Number(template.region_count) || 0
+      : (data.templateRegions || []).filter((region) => region.template_id === template.id).length
   }));
 
   return renderView('templates/list', {
@@ -14,6 +19,7 @@ module.exports = function renderTemplatesPage(data, message, currentUser) {
     active: 'templates',
     message: message,
     currentUser: currentUser || null,
-    templates: templates
+    templates: templates,
+    pagination: data.pagination || null
   });
 };

src/web/routes/signage/templates/routes.js

@@ -2,12 +2,22 @@ module.exports = function registerTemplatesRoutes(app, deps) {
   const pages = deps.pages;
   const common = deps.common;
   const pool = deps.pool;
+  const { buildPagination } = require('../../../lib/pagination');
   const requirePermission = deps.requirePermission;
 
+  const LIST_PAGE_SIZE = 10;
+
   app.get('/templates', requirePermission('templates.read'), async function (req, res, next) {
     try {
-      const data = await common.fetchTemplatesData(pool);
-      res.send(pages.renderTemplatesPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+      const search = common.getSearchQuery(req);
+      const sort = common.getSortQuery(req);
+      const direction = common.getSortDirectionQuery(req);
+      const data = await common.fetchTemplatesPage(pool, page, LIST_PAGE_SIZE, search, sort, direction);
+      res.send(pages.renderTemplatesPage({
+        templates: data.templates || [],
+        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);
     }