Release v2.13.2

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.13.2 - 2026-09-11
+
+### Changed
+
+- Refined the Media Library upload flow with a compact Add media modal, clearer toolbar controls, full-height scrolling, and more obvious selection feedback for media that is already in use.
+
 ## 2.13.1 - 2026-09-11
 
 ### Added

build/package.player.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "private": false,
   "description": "Pulse Signage player application bundle",
   "engines": {

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.13.1",
+      "version": "2.13.2",
       "dependencies": {
         "@sparticuz/chromium": "^149.0.0",
         "animate.css": "^4.1.1",

package.json

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

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

@@ -30,12 +30,16 @@
 
 .media-gallery-toolbar {
   display: flex;
-  align-items: end;
+  align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
 }
 
+.media-gallery-count {
+  flex: 0 0 auto;
+}
+
 .media-gallery-search {
   width: min(100%, 52rem);
 }
@@ -113,6 +117,28 @@
   font-weight: 700;
 }
 
+.media-gallery-card-selection-disabled {
+  opacity: .72;
+}
+
+.media-gallery-card-selection-disabled::before {
+  position: absolute;
+  top: .65rem;
+  left: .65rem;
+  z-index: 2;
+  padding: .25rem .5rem;
+  border-radius: .25rem;
+  background: var(--bs-secondary);
+  color: var(--bs-white);
+  content: 'In use';
+  font-size: .75rem;
+  font-weight: 700;
+}
+
+.media-gallery-selection-mode .media-gallery-card.media-gallery-card-selection-disabled {
+  cursor: not-allowed;
+}
+
 .media-gallery-selection-mode .media-gallery-card {
   cursor: pointer;
 }
@@ -4069,7 +4095,7 @@ table.table thead th.sort-desc .table-sort-indicator {
 .media-gallery-scroll {
   flex: 1 1 auto;
   min-height: 0;
-  max-height: max(12rem, calc(100dvh - 29rem));
+  max-height: none;
   overflow-x: hidden;
   overflow-y: auto;
   padding-right: .5rem;

src/web/public/js/settings/media-library.js

@@ -12,6 +12,7 @@ const loadMoreWrap = gallery && gallery.querySelector('[data-media-gallery-load-
 const loadMoreButton = gallery && gallery.querySelector('[data-media-gallery-load-more]');
 const selectModeButton = gallery && gallery.querySelector('[data-media-gallery-select-mode]');
 const deleteSelectedButton = gallery && gallery.querySelector('[data-media-gallery-delete-selected]');
+const addMediaButton = gallery && gallery.querySelector('[data-media-library-add]');
 let galleryItems = gallery ? Array.from(gallery.querySelectorAll('[data-media-gallery-column]')) : [];
 let visibleRowLimit = 4;
 let galleryOffset = gallery ? Number(gallery.dataset.mediaGalleryOffset || galleryItems.length) : 0;
@@ -24,6 +25,7 @@ const uploadForm = document.querySelector('form[action="/media-library"]');
 const uploadInput = document.querySelector('[data-media-library-upload]');
 const uploadZone = document.querySelector('[data-media-library-upload-zone]');
 const uploadName = document.querySelector('[data-media-library-upload-name]');
+const uploadModal = document.getElementById('media-library-upload-modal');
 const cropModal = document.getElementById('media-library-crop-modal');
 const cropImage = cropModal && cropModal.querySelector('#media-library-crop-image');
 const cropApply = cropModal && cropModal.querySelector('[data-media-library-crop-apply]');
@@ -48,22 +50,28 @@ function showUploadMessage(message) {
   window.alert(message);
 }
 
-function showUploadModal() {
+function showModal(target) {
   if (window.pulseModal && typeof window.pulseModal.show === 'function') {
-    window.pulseModal.show(cropModal);
+    window.pulseModal.show(target);
   } else if (window.bootstrap && window.bootstrap.Modal) {
-    window.bootstrap.Modal.getOrCreateInstance(cropModal).show();
+    window.bootstrap.Modal.getOrCreateInstance(target).show();
   }
 }
 
-function hideUploadModal() {
+function hideModal(target) {
   if (window.pulseModal && typeof window.pulseModal.hide === 'function') {
-    window.pulseModal.hide(cropModal);
+    window.pulseModal.hide(target);
   } else if (window.bootstrap && window.bootstrap.Modal) {
-    window.bootstrap.Modal.getOrCreateInstance(cropModal).hide();
+    window.bootstrap.Modal.getOrCreateInstance(target).hide();
   }
 }
 
+if (addMediaButton && uploadModal) {
+  addMediaButton.addEventListener('click', function () {
+    showModal(uploadModal);
+  });
+}
+
 function clearCropper() {
   if (cropper) {
     cropper.destroy();
@@ -245,7 +253,7 @@ function setUploadFile(file, shouldCrop) {
     cropObjectUrl = URL.createObjectURL(file);
     cropImage.src = cropObjectUrl;
     if (cropFrame) cropFrame.classList.add('is-loading');
-    showUploadModal();
+    showModal(cropModal);
   }
 }
 
@@ -296,7 +304,7 @@ if (uploadZone) {
 if (cropApply) {
   cropApply.addEventListener('click', function () {
     if (!cropper || !cropSourceFile || !uploadInput) {
-      hideUploadModal();
+      hideModal(cropModal);
       return;
     }
     const outputType = cropSourceFile.type === 'image/jpeg' || cropSourceFile.type === 'image/webp' ? cropSourceFile.type : 'image/png';
@@ -309,7 +317,7 @@ if (cropApply) {
       const croppedFile = new File([blob], cropSourceFile.name.replace(/\.[^.]+$/, '') + extension, { type: outputType, lastModified: Date.now() });
       clearCropper();
       setUploadFile(croppedFile, false);
-      hideUploadModal();
+      hideModal(cropModal);
       submitUpload();
     }, outputType, 0.92);
   });
@@ -320,7 +328,7 @@ if (cropCancel) {
     clearCropper();
     if (uploadInput) uploadInput.value = '';
     if (uploadName) uploadName.textContent = 'No file selected';
-    hideUploadModal();
+    hideModal(cropModal);
   });
 }
 
@@ -406,7 +414,7 @@ function updateSearchResults() {
 function updateBulkDeleteActions() {
   if (selectModeButton) {
     selectModeButton.setAttribute('aria-pressed', selectionMode ? 'true' : 'false');
-    selectModeButton.textContent = selectionMode ? 'Done' : 'Select';
+    selectModeButton.textContent = selectionMode ? 'Cancel' : 'Select';
   }
   if (deleteSelectedButton) {
     deleteSelectedButton.hidden = !selectionMode;
@@ -415,7 +423,10 @@ function updateBulkDeleteActions() {
   galleryItems.forEach(function (item) {
     const id = String(item.dataset.mediaId || '');
     const card = item.querySelector('.media-gallery-card');
-    if (card) card.classList.toggle('media-gallery-card-selected', selectionMode && selectedAssetIds.has(id));
+    if (card) {
+      card.classList.toggle('media-gallery-card-selected', selectionMode && selectedAssetIds.has(id));
+      card.classList.toggle('media-gallery-card-selection-disabled', selectionMode && item.dataset.mediaUsed === 'true');
+    }
   });
 }
 
@@ -487,7 +498,10 @@ if (gallery) {
     if (!column || !gallery.contains(column)) return;
     event.preventDefault();
     event.stopPropagation();
-    if (column.dataset.mediaUsed === 'true') return;
+    if (column.dataset.mediaUsed === 'true') {
+      showUploadMessage('This media is in use and cannot be selected.');
+      return;
+    }
     const id = String(column.dataset.mediaId || '');
     if (!id) return;
     if (selectedAssetIds.has(id)) selectedAssetIds.delete(id);
@@ -519,7 +533,7 @@ if (loadMoreButton) {
 }
 updateSearchResults();
 
-function showModal() {
+function showPreviewModal() {
   if (window.pulseModal && typeof window.pulseModal.show === 'function') {
     window.pulseModal.show(modal);
   } else if (window.bootstrap && window.bootstrap.Modal) {
@@ -550,7 +564,7 @@ if (modal && body) {
       media.playsInline = true;
     }
     body.appendChild(media);
-    showModal();
+    showPreviewModal();
   });
 
   modal.addEventListener('hidden.bs.modal', function () {

src/web/views/settings/media-library/list.hbs

@@ -1,43 +1,20 @@
 <div class="page-header">
   <div>
     <h2>Media library</h2>
-    <p>Upload shared images and videos for use across slides and templates.</p>
+    <p>Manage reusable images and videos for slides and templates.</p>
   </div>
 </div>
 
 <link rel="stylesheet" href="/assets/vendor/cropperjs/cropper.min.css" />
 
-{{#if (hasPermission currentUser 'media-library.create')}}
-<div class="card card-outline card-primary mb-4">
-  <div class="card-header"><h3 class="card-title">Upload media</h3></div>
-  <form method="post" action="/media-library" enctype="multipart/form-data">
-    <div class="card-body">
-      <div>
-        <label class="slide-image-region-upload-zone media-library-upload-zone" for="media-library-upload" data-media-library-upload-zone>
-            <input type="file" id="media-library-upload" name="file" class="visually-hidden" accept="{{#each uploadLimits.allowedMimeTypes}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}" data-media-library-upload data-image-max-bytes="{{uploadLimits.imageMaxBytes}}" data-video-max-bytes="{{uploadLimits.videoMaxBytes}}" required />
-            <span class="slide-image-region-upload-zone-content">
-              <span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>
-              <span class="slide-image-region-upload-zone-copy">
-                <strong>Drop an image or video here or click to upload</strong>
-                <span>Images and videos enabled in Media Uploads settings</span>
-                <span class="slide-image-region-upload-zone-limit">Images max {{uploadLimits.imageMaxLabel}}; videos max {{uploadLimits.videoMaxLabel}}</span>
-              </span>
-            </span>
-        </label>
-      </div>
-    </div>
-  </form>
-</div>
-{{/if}}
-
 <section class="media-gallery" data-media-gallery-offset="{{assets.length}}" data-media-gallery-has-more="{{#if hasMore}}true{{else}}false{{/if}}">
   <div class="media-gallery-toolbar">
-    <div>
+    {{#if (hasPermission currentUser 'media-library.create')}}
-      <h3 class="h5 mb-1">Shared media</h3>
+    <button type="button" class="btn btn-primary btn-sm text-nowrap" data-media-library-add><i class="bi bi-plus-lg me-1" aria-hidden="true"></i>Add media</button>
-      <p class="text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
+    {{/if}}
-    </div>
     {{#if assets.length}}
     <div class="media-gallery-controls">
+      <p class="media-gallery-count text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
       <div class="media-gallery-search d-flex flex-wrap gap-2">
       <label class="visually-hidden" for="media-gallery-search-input">Search media</label>
       <div class="input-group input-group-sm">
@@ -66,11 +43,13 @@
         <option value="size-asc">Smallest first</option>
       </select>
       {{#if (hasPermission currentUser 'media-library.delete')}}
-      <button type="button" class="btn btn-outline-secondary btn-sm" data-media-gallery-select-mode aria-pressed="false">Select</button>
+      <button type="button" class="btn btn-secondary btn-sm" data-media-gallery-select-mode aria-pressed="false">Select</button>
-      <button type="button" class="btn btn-outline-danger btn-sm" data-media-gallery-delete-selected hidden disabled title="Delete selected media">Delete</button>
+      <button type="button" class="btn btn-danger btn-sm" data-media-gallery-delete-selected hidden disabled title="Delete selected media">Delete</button>
       {{/if}}
       </div>
     </div>
+    {{else}}
+    <p class="media-gallery-count text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
     {{/if}}
   </div>
 
@@ -114,7 +93,7 @@
   </div>
   <div class="media-gallery-empty text-body-secondary" data-media-gallery-no-results hidden>No media matches your search.</div>
   {{else}}
-  <div class="media-gallery-empty text-body-secondary">No shared media yet.</div>
+  <div class="media-gallery-empty text-body-secondary">No media yet.</div>
   {{/if}}
 </section>
 
@@ -126,6 +105,30 @@
   <div class="modal-body media-gallery-preview-modal-body" data-media-gallery-preview-body></div>
 {{/modal-shell}}
 
+{{#if (hasPermission currentUser 'media-library.create')}}
+{{#> modal-shell modalId="media-library-upload-modal" modalLabelId="media-library-upload-modal-label" modalDialogClass="modal-dialog-centered modal-lg"}}
+  <div class="modal-header">
+    <h2 class="modal-title fs-5" id="media-library-upload-modal-label">Add media</h2>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  </div>
+  <form method="post" action="/media-library" enctype="multipart/form-data">
+    <div class="modal-body">
+      <label class="slide-image-region-upload-zone media-library-upload-zone" for="media-library-upload" data-media-library-upload-zone>
+        <input type="file" id="media-library-upload" name="file" class="visually-hidden" accept="{{#each uploadLimits.allowedMimeTypes}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}" data-media-library-upload data-image-max-bytes="{{uploadLimits.imageMaxBytes}}" data-video-max-bytes="{{uploadLimits.videoMaxBytes}}" required />
+        <span class="slide-image-region-upload-zone-content">
+          <span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>
+          <span class="slide-image-region-upload-zone-copy">
+            <strong>Drop an image or video here or click to upload</strong>
+            <span>Images and videos enabled in Media Uploads settings</span>
+            <span class="slide-image-region-upload-zone-limit">Images max {{uploadLimits.imageMaxLabel}}; videos max {{uploadLimits.videoMaxLabel}}</span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </form>
+{{/modal-shell}}
+{{/if}}
+
 {{#> modal-shell modalId="media-library-crop-modal" modalLabelId="media-library-crop-modal-label" modalDialogClass="modal-dialog-centered modal-xl" modalBackdropStatic=true modalKeyboardDisabled=true}}
   <div class="modal-header">
     <div>