Release 2.20.6: saved-image slide previews

test/playlist-form-view-model.test.js

@@ -5,6 +5,42 @@ require('../src/common');
 
 const { buildPlaylistFormViewModel } = require('../src/web/routes/signage/playlists/form-view-model');
 
+test('playlist add and edit forms share the saved-image preview and accessible thumbnail buttons', () => {
+  const { renderView } = require('../src/web/view');
+  for (const isEdit of [false, true]) {
+    const html = renderView('playlists/form', {
+      isEdit,
+      playlist: { id: 3, name: 'Preview test' },
+      selectableSlides: [],
+      playlistSlideTemplate: { scheduleRules: [] },
+      playlistSlides: [{ slide_id: 124, title: 'Landscape', thumbnail_path: '/media/thumbnails/slides/slide-124.png', canvas_width: 1920, canvas_height: 1080, scheduleRules: [] }]
+    });
+    assert.equal((html.match(/id="slide-preview-modal"/g) || []).length, 1);
+    assert.match(html, /<button[^>]*data-slide-preview-url="\/media\/thumbnails\/slides\/slide-124.png"[^>]*data-canvas-width="1920"[^>]*aria-label="Preview slide: Landscape"/);
+    assert.match(html, /data-slide-preview-image/);
+    assert.doesNotMatch(html, /data-slide-preview-frame/);
+  }
+});
+
+test('new playlist rows receive preview URLs, titles and canvas dimensions', () => {
+  const fs = require('node:fs');
+  const vm = require('node:vm');
+  const source = fs.readFileSync(require.resolve('../src/web/public/js/playlists/playlist-schedule'), 'utf8');
+  const start = source.indexOf('    function populatePlaylistSlideRow(');
+  const end = source.indexOf('    function createRow(', start);
+  const sandbox = { escapeHtmlAttribute: value => value };
+  vm.runInNewContext(source.slice(start, end), sandbox);
+  const attrs = {};
+  const thumb = { setAttribute(name, value) { attrs[name] = value; }, style: { setProperty() {} } };
+  const row = { setAttribute() {}, querySelector(selector) { return selector === '[data-playlist-slide-thumb]' ? thumb : null; } };
+  sandbox.populatePlaylistSlideRow(row, { slide_id: 125, title: 'Portrait', thumbnail_path: '/media/thumbnails/slides/slide-125.png', canvas_width: 1080, canvas_height: 1920, summary: 'Always visible' }, 'new-1');
+  assert.equal(attrs['data-slide-preview-url'], '/media/thumbnails/slides/slide-125.png');
+  assert.equal(attrs['data-slide-preview-title'], 'Portrait');
+  assert.equal(attrs['data-canvas-width'], '1080');
+  assert.equal(attrs['data-canvas-height'], '1920');
+  assert.equal(attrs['aria-label'], 'Preview slide: Portrait');
+});
+
 test('playlist schedule summaries show up to two short rules on separate lines and count longer summaries', () => {
   const fs = require('node:fs');
   const path = require('node:path');