Release 1.5.7

CHANGELOG.md

@@ -6,6 +6,24 @@ All notable changes to this project will be documented in this file.
 
 - No unreleased changes recorded yet.
 
+## 1.5.7 - 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

package.json

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

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/public/css/theme-custom.css

@@ -1265,6 +1265,19 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   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;
 }
@@ -1322,6 +1335,10 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   padding: 0 0.9rem 0.6rem;
 }
 
+.playlist-slide-picker-filter-button {
+  white-space: nowrap;
+}
+
 .playlist-slide-picker-meta {
   display: none;
 }
@@ -1335,7 +1352,7 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   opacity: 0;
   background: rgba(var(--bs-body-bg-rgb), 0.88);
   border-radius: 999px;
-  padding: 0.2rem 0.3rem;
+  padding: 0.2rem 0.45rem;
   box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
 }
 
@@ -1345,6 +1362,17 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
 
 .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 {
@@ -1438,8 +1466,9 @@ table.table > :not(caption) > * > * {
 
 .playlist-slide-thumb {
   flex: 0 0 auto;
-  width: 5.5rem;
-  height: 3.5rem;
+  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);
@@ -1456,13 +1485,19 @@ table.table > :not(caption) > * > * {
 }
 
 .playlist-slide-thumb-placeholder {
-  display: inline-flex;
+  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);
-  font-size: 1.1rem;
+  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 {

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

@@ -308,6 +308,7 @@
     var addSlideModal = document.getElementById('playlist-add-slide-modal');
     var addSlideGrid = document.getElementById('playlist-slide-picker-grid');
     var addSlideSearch = document.getElementById('playlist-slide-picker-search');
+    var addSlideShowAssigned = document.getElementById('playlist-slide-picker-show-assigned');
     var addSlideEmpty = document.getElementById('playlist-slide-picker-empty');
     var addSlideConfirm = document.getElementById('playlist-confirm-add-slides');
     var addSlideCount = document.getElementById('playlist-slide-picker-selected-count');
@@ -408,6 +409,7 @@
       var media = document.createElement('div');
       var title = document.createElement('div');
       var check = document.createElement('span');
+      var badge = document.createElement('span');
       var searchText = String(slide && slide.title ? slide.title : '').toLowerCase();
 
       button.type = 'button';
@@ -415,6 +417,7 @@
       button.setAttribute('aria-pressed', 'false');
       button.setAttribute('data-slide-id', String(slide.id || ''));
       button.setAttribute('data-search-text', searchText);
+      button.setAttribute('data-is-assigned', slide && slide.isAssigned ? 'true' : 'false');
 
       if (slide && slide.isAssigned) {
         button.disabled = true;
@@ -427,6 +430,11 @@
       check.setAttribute('aria-hidden', 'true');
       media.appendChild(check);
 
+      badge.className = 'playlist-slide-picker-badge badge text-bg-primary';
+      badge.textContent = 'Already in playlist';
+      badge.setAttribute('aria-hidden', 'true');
+      media.appendChild(badge);
+
       title.className = 'playlist-slide-picker-title';
       title.textContent = String(slide && slide.title ? slide.title : 'Slide');
 
@@ -436,6 +444,16 @@
       return button;
     }
 
+    function setShowAssignedState(showAssignedSlides) {
+      if (!addSlideShowAssigned) {
+        return;
+      }
+
+      addSlideShowAssigned.setAttribute('aria-pressed', showAssignedSlides ? 'true' : 'false');
+      addSlideShowAssigned.classList.toggle('btn-secondary', showAssignedSlides);
+      addSlideShowAssigned.classList.toggle('btn-outline-secondary', !showAssignedSlides);
+    }
+
     function renderSlidePicker() {
       if (!addSlideGrid) {
         return;
@@ -451,19 +469,31 @@
 
     function syncSlidePickerState() {
       var query = String(addSlideSearch && addSlideSearch.value ? addSlideSearch.value : '').trim().toLowerCase();
+      var showAssignedSlides = Boolean(addSlideShowAssigned && addSlideShowAssigned.getAttribute('aria-pressed') === 'true');
       var visibleCount = 0;
+      var assignedCount = 0;
 
       slidePickerCards.forEach(function (card) {
         var searchText = String(card.getAttribute('data-search-text') || '');
-        var matches = !query || searchText.indexOf(query) !== -1;
+        var isAssigned = card.getAttribute('data-is-assigned') === 'true';
+        var matchesSearch = !query || searchText.indexOf(query) !== -1;
+        var matchesAssignment = showAssignedSlides || !isAssigned;
+        var matches = matchesSearch && matchesAssignment;
         setCardVisible(card, matches);
+        if (isAssigned) {
+          assignedCount += 1;
+        }
         if (matches) {
           visibleCount += 1;
         }
       });
 
       if (addSlideEmpty) {
-        addSlideEmpty.textContent = query ? 'No slides match your search.' : 'No slides are currently available for this playlist.';
+        if (!showAssignedSlides && assignedCount && visibleCount === 0) {
+          addSlideEmpty.textContent = query ? 'No available slides match your search.' : 'No available slides are currently left for this playlist.';
+        } else {
+          addSlideEmpty.textContent = query ? 'No slides match your search.' : 'No slides are currently available for this playlist.';
+        }
         addSlideEmpty.classList.toggle('is-hidden', visibleCount !== 0);
       }
 
@@ -474,6 +504,8 @@
       if (addSlideConfirm) {
         addSlideConfirm.disabled = slidePickerSelection.size === 0;
       }
+
+      setShowAssignedState(showAssignedSlides);
     }
 
     function toggleCardSelection(card) {
@@ -512,6 +544,8 @@
           row_key: 'new-' + Date.now() + '-' + slide.id,
           slide_id: String(slide.id),
           thumbnail_path: String(slide.thumbnail_path || ''),
+          canvas_width: slide.canvas_width,
+          canvas_height: slide.canvas_height,
           canvas_signature: String(slide.canvasSignature || ''),
           title: slide.title || 'Slide',
           duration_seconds: 10,
@@ -626,7 +660,10 @@
         var isAssigned = Boolean(activeSlideIds[slideId]);
         var isCanvasMismatch = Boolean(allowedCanvasSignature && canvasSignature && canvasSignature !== allowedCanvasSignature);
 
+        slide.isAssigned = isAssigned;
+
         if (card) {
+          card.setAttribute('data-is-assigned', isAssigned ? 'true' : 'false');
           card.disabled = isAssigned || isCanvasMismatch;
           card.classList.toggle('is-assigned', isAssigned);
           card.classList.toggle('is-mismatch', isCanvasMismatch);
@@ -736,6 +773,12 @@
       var row = document.createElement('tr');
       var rowKey = values.row_key || ('new-' + Date.now() + '-' + Math.random().toString(36).slice(2));
       var playlistId = tbody.getAttribute('data-playlist-id') || '';
+      var canvasWidth = Number(values.canvas_width);
+      var canvasHeight = Number(values.canvas_height);
+      var thumbnailStyle = '';
+      if (Number.isFinite(canvasWidth) && Number.isFinite(canvasHeight) && canvasWidth > 0 && canvasHeight > 0) {
+        thumbnailStyle = ' style="--playlist-slide-thumb-aspect-ratio: ' + canvasWidth + ' / ' + canvasHeight + ';"';
+      }
       var thumbnailMarkup = values.thumbnail_path
         ? '<img class="playlist-slide-thumb-image" src="' + values.thumbnail_path + '" alt="" loading="lazy" />'
         : '<span class="playlist-slide-thumb-placeholder"><i class="bi bi-image" aria-hidden="true"></i></span>';
@@ -752,7 +795,7 @@
         '</td>' +
         '<td data-label="Slide">' +
           '<div class="playlist-slide-cell">' +
-            '<div class="playlist-slide-thumb" aria-hidden="true">' + thumbnailMarkup + '</div>' +
+            '<div class="playlist-slide-thumb" aria-hidden="true"' + thumbnailStyle + '>' + thumbnailMarkup + '</div>' +
             '<div class="playlist-slide-cell-content"><span class="playlist-slide-title">' + values.title + '</span></div>' +
           '</div>' +
           '<input type="hidden" name="slide_id[]" value="' + values.slide_id + '" form="playlist-edit-form" /></td>' +
@@ -839,6 +882,14 @@
         addSlideSearch.addEventListener('input', syncSlidePickerState);
       }
 
+      if (addSlideShowAssigned) {
+        addSlideShowAssigned.addEventListener('click', function () {
+          var nextState = addSlideShowAssigned.getAttribute('aria-pressed') !== 'true';
+          setShowAssignedState(nextState);
+          syncSlidePickerState();
+        });
+      }
+
       if (addSlideConfirm) {
         addSlideConfirm.addEventListener('click', function () {
           addSelectedSlides();

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

@@ -114,6 +114,10 @@
       return false;
     }
 
+    if (headerCell.getAttribute && headerCell.getAttribute('data-sortable') === 'false') {
+      return false;
+    }
+
     if (/actions?|buttons?/i.test(getTableHeaderText(headerCell))) {
       return false;
     }

src/web/views/signage/playlists/edit.hbs

@@ -100,7 +100,7 @@
                     </td>
                     <td data-label="Slide">
                       <div class="playlist-slide-cell">
-                        <div class="playlist-slide-thumb" aria-hidden="true">
+                        <div class="playlist-slide-thumb" aria-hidden="true" {{#if canvas_width}}style="--playlist-slide-thumb-aspect-ratio: {{canvas_width}} / {{canvas_height}};"{{/if}}>
                             {{#if thumbnail_path}}
                               <img class="playlist-slide-thumb-image" src="{{thumbnail_path}}" alt="" loading="lazy" />
                             {{else}}
@@ -153,11 +153,16 @@
     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
   </div>
   <div class="modal-body playlist-slide-picker-modal-body">
-    <div class="playlist-slide-picker-toolbar">
-      <label class="form-label mb-1" for="playlist-slide-picker-search">Search</label>
-      <div class="input-group">
-        <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
-        <input type="search" class="form-control" id="playlist-slide-picker-search" placeholder="Search slide titles" autocomplete="off" />
+    <div class="playlist-slide-picker-toolbar d-flex flex-column flex-lg-row gap-3 align-items-stretch align-items-lg-end">
+      <div class="flex-grow-1">
+        <label class="form-label mb-1" for="playlist-slide-picker-search">Search</label>
+        <div class="input-group">
+          <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
+          <input type="search" class="form-control" id="playlist-slide-picker-search" placeholder="Search slide titles" autocomplete="off" />
+        </div>
+      </div>
+      <div class="playlist-slide-picker-filter mb-0">
+        <button type="button" class="btn btn-outline-secondary playlist-slide-picker-filter-button" id="playlist-slide-picker-show-assigned" aria-pressed="false">Show already added slides</button>
       </div>
     </div>
     <div class="playlist-slide-picker-empty empty is-hidden" id="playlist-slide-picker-empty">No slides match your search.</div>

src/web/views/signage/slides/list.hbs

@@ -22,7 +22,7 @@
   <table class="table table-striped w-100 mb-0" data-table-searchable>
     <thead>
       <tr>
-        <th>Thumbnail</th>
+        <th data-sortable="false">Thumbnail</th>
         <th>Title</th>
         <th>Template</th>
         <th>Actions</th>
@@ -33,7 +33,7 @@
         {{#each slides}}
           <tr data-table-search-row data-search-text="{{title}} {{template_name}}">
             <td data-label="Thumbnail">
-              <div class="playlist-slide-thumb" aria-hidden="true">
+              <div class="playlist-slide-thumb" aria-hidden="true" {{#if canvas_width}}style="--playlist-slide-thumb-aspect-ratio: {{canvas_width}} / {{canvas_height}};"{{/if}}>
                 {{#if thumbnail_path}}
                   <img class="playlist-slide-thumb-image" src="{{thumbnail_path}}" alt="" loading="lazy" />
                 {{else}}