Release v2.13.2
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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": {
|
||||
|
||||
Generated
+2
-2
@@ -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",
|
||||
|
||||
+1
-1
@@ -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": {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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>
|
||||
<h3 class="h5 mb-1">Shared media</h3>
|
||||
<p class="text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
|
||||
</div>
|
||||
{{#if (hasPermission currentUser 'media-library.create')}}
|
||||
<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>
|
||||
{{/if}}
|
||||
{{#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-outline-danger btn-sm" data-media-gallery-delete-selected hidden disabled title="Delete selected media">Delete</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-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>
|
||||
|
||||
Reference in New Issue
Block a user