Release 2.20.6: saved-image slide previews

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

@@ -2477,9 +2477,8 @@ td[data-label="Slides"] {
   padding: 0.875rem;
 }
 
-.slide-editor-shell .slide-preview-scroll {
-  max-height: calc(100vh - 8rem);
-  overflow: auto;
+.slide-editor-shell .slide-preview-stage {
+  max-height: max(12rem, calc(100vh - 22rem));
 }
 
 .slide-preview-header h3 {
@@ -4658,10 +4657,15 @@ table.table > :not(caption) > * > * {
   width: 100%;
   height: auto;
   aspect-ratio: var(--slide-preview-aspect-ratio, 16 / 9);
+  object-fit: contain;
   border: 0;
   background: var(--bs-body-bg);
 }
 
+.slide-list-preview-frame[hidden] {
+  display: none;
+}
+
 #slide-preview-modal .modal-content {
   overflow: hidden;
 }

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

@@ -899,7 +899,7 @@
     return '' +
       '<td data-label="Slide">' +
         '<div class="playlist-slide-cell">' +
-          '<div class="playlist-slide-thumb" aria-hidden="true"' + thumbnailStyle + '>' + thumbnailMarkup + '</div>' +
+          '<button type="button" class="playlist-slide-thumb slide-list-thumbnail-button" data-bs-toggle="modal" data-bs-target="#slide-preview-modal" data-slide-preview-url="' + escapeHtmlAttribute(String(values.thumbnail_path || '')) + '" data-slide-preview-title="' + escapeHtmlAttribute(String(values.title || 'Slide')) + '" data-canvas-width="' + escapeHtmlAttribute(String(values.canvas_width || '')) + '" data-canvas-height="' + escapeHtmlAttribute(String(values.canvas_height || '')) + '" aria-label="Preview slide: ' + escapeHtmlAttribute(String(values.title || 'Slide')) + '"' + thumbnailStyle + '>' + thumbnailMarkup + '</button>' +
           '<div class="playlist-slide-cell-content"><span class="playlist-slide-title">' + values.title + '</span></div>' +
         '</div>' +
         '<input type="hidden" name="slide_id[]" value="' + values.slide_id + '" form="playlist-edit-form" />' +
@@ -3327,6 +3327,11 @@
         thumb.style.setProperty('--playlist-slide-thumb-aspect-ratio', canvasWidth + ' / ' + canvasHeight);
       }
       if (thumb) {
+        thumb.setAttribute('data-slide-preview-url', thumbnailPath);
+        thumb.setAttribute('data-slide-preview-title', String(values.title || 'Slide'));
+        thumb.setAttribute('data-canvas-width', String(canvasWidth || ''));
+        thumb.setAttribute('data-canvas-height', String(canvasHeight || ''));
+        thumb.setAttribute('aria-label', 'Preview slide: ' + String(values.title || 'Slide'));
         thumb.innerHTML = thumbnailPath
           ? '<img class="playlist-slide-thumb-image" src="' + escapeHtmlAttribute(thumbnailPath) + '" alt="" loading="lazy" data-playlist-slide-thumb-image />'
           : '<span class="playlist-slide-thumb-placeholder" data-playlist-slide-thumb-placeholder><i class="bi bi-image" aria-hidden="true"></i></span>';

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

@@ -706,6 +706,21 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
     if (!getSelectedTemplate()) {
       return;
     }
+
+    if (previewPopupWindow && !previewPopupWindow.closed) {
+      try {
+        if (previewPopupWindow.location.pathname === '/slides/popup-preview') {
+          previewPopupWindow.location.hash = buildPreviewPopupHash();
+        } else {
+          previewPopupWindow.location.replace(buildPreviewPopupUrl());
+        }
+      } catch (_error) {
+        previewPopupWindow.location.href = buildPreviewPopupUrl();
+      }
+      previewPopupWindow.focus();
+      return;
+    }
+
     var popupWidth = 1280;
     var popupHeight = 900;
     var left = Math.max(0, Math.round((window.screen.width - popupWidth) / 2));
@@ -772,6 +787,19 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
     sidebarSyncFrame = window.requestAnimationFrame(syncSlideEditorSidebar);
   }
 
+  function sizePreviewStage(canvasWidth, canvasHeight) {
+    var stageContainer = slidePreviewStage.parentElement;
+    var containerStyle = window.getComputedStyle(stageContainer);
+    var availableWidth = stageContainer.clientWidth - parseFloat(containerStyle.paddingLeft) - parseFloat(containerStyle.paddingRight);
+    var maxHeight = parseFloat(window.getComputedStyle(slidePreviewStage).maxHeight);
+    if (!availableWidth || !Number.isFinite(maxHeight)) {
+      return;
+    }
+
+    slidePreviewStage.style.width = Math.min(availableWidth, maxHeight * canvasWidth / canvasHeight) + 'px';
+    slidePreviewStage.style.marginInline = 'auto';
+  }
+
   function renderPreview() {
     var template = getSelectedTemplate();
     if (openPreviewPopupButton) openPreviewPopupButton.disabled = !template;
@@ -787,6 +815,7 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
       slidePreviewOverlay.style.height = '';
       slidePreviewOverlay.style.transform = '';
       slidePreviewStage.style.aspectRatio = '16 / 9';
+      sizePreviewStage(16, 9);
       applyBackdropStyle(slidePreviewStage, '#111111');
       return;
     }
@@ -798,6 +827,7 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
     currentPreviewCanvasHeight = canvasHeight;
     slidePreviewStage.style.aspectRatio = canvasWidth + ' / ' + canvasHeight;
     slidePreviewStage.style.setProperty('--slide-layout-ratio', String(canvasWidth / canvasHeight));
+    sizePreviewStage(canvasWidth, canvasHeight);
     applyBackdropStyle(slidePreviewStage, template.background_color || '#111111', template.background_image_path, template.background_gradient);
     slidePreviewMeta.textContent = canvasWidth + 'x' + canvasHeight;
     if (!(template.regions || []).length) {