Enhance overlay image handling: support dynamic filenames, add delete and rename functionality, and improve seasonal image management
This commit is contained in:
CodeDevMLH
@@ -236,6 +236,10 @@
|
||||
<option value="Frosted">Frosted Glass Pill</option>
|
||||
<option value="Cinematic">Cinematic Golden Glow</option>
|
||||
<option value="Pulse">Animated Pulse</option>
|
||||
<option value="Neon">Neon Cyberpunk</option>
|
||||
<option value="Typewriter">Typewriter Pop</option>
|
||||
<option value="Bubble">Floating Bubble</option>
|
||||
<option value="SlideIn">Cinematic Slide-In</option>
|
||||
</select>
|
||||
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
|
||||
</div>
|
||||
@@ -263,7 +267,7 @@
|
||||
<img id="overlayImagePreview" style="display: none; max-width: 100%; max-height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />
|
||||
<!-- A semi-transparent overlay to clear the image -->
|
||||
<button type="button" id="clearOverlayImageBtn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 5px;" title="Clear Image">
|
||||
<i class="material-icons" style="color: white;">close</i>
|
||||
<i class="material-icons" style="color: #a94442;">delete</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="fieldDescription">Uploading an image will securely save it to the server and automatically update the URL field above.</div>
|
||||
@@ -702,6 +706,15 @@
|
||||
|
||||
clearBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation(); // prevent triggering file dialog
|
||||
|
||||
// Call DELETE API to remove global image
|
||||
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
||||
}
|
||||
}).catch(console.error);
|
||||
|
||||
urlInput.value = '';
|
||||
fileInput.value = '';
|
||||
updatePreview();
|
||||
@@ -918,6 +931,17 @@
|
||||
'<div class="inputContainer">' +
|
||||
' <input is="emby-input" type="text" class="emby-input section-overlay-image" style="width: 100%;" value="' + (data.OverlayImageUrl ? data.OverlayImageUrl.replace(/"/g, '"') : '') + '" placeholder="Seasonal Custom Overlay Image URL" />' +
|
||||
' <div class="fieldDescription">Optional: Override the global custom overlay image during this season. Overrides the text if provided.</div>' +
|
||||
'</div>' +
|
||||
'<div class="inputContainer" style="margin-top: 1em; margin-bottom: 0;">' +
|
||||
' <div class="seasonal-dropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 1.5em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
|
||||
' <i class="material-icons" style="font-size: 32px; color: rgba(255,255,255,0.4); margin-bottom: 8px;">cloud_upload</i>' +
|
||||
' <span style="font-size: 0.9em; color: rgba(255,255,255,0.7);">Drag and drop a seasonal image here, or click</span>' +
|
||||
' <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
|
||||
' <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />' +
|
||||
' <button type="button" class="seasonal-clear-btn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.6); border-radius: 50%; padding: 5px;" title="Clear Image">' +
|
||||
' <i class="material-icons" style="color: #a94442;">delete</i>' +
|
||||
' </button>' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
|
||||
div.querySelector('.btn-remove').addEventListener('click', function () {
|
||||
@@ -939,6 +963,163 @@
|
||||
}
|
||||
});
|
||||
|
||||
// --- Seasonal Drag and Drop Logic ---
|
||||
var sectionNameInput = div.querySelector('.section-name');
|
||||
var urlInput = div.querySelector('.section-overlay-image');
|
||||
var dropzone = div.querySelector('.seasonal-dropzone');
|
||||
var fileInput = div.querySelector('.seasonal-file-input');
|
||||
var previewImg = div.querySelector('.seasonal-preview-img');
|
||||
var clearBtn = div.querySelector('.seasonal-clear-btn');
|
||||
var currentSectionName = sectionNameInput.value.trim();
|
||||
|
||||
// Track Name Changes to rename server file
|
||||
sectionNameInput.addEventListener('focus', function() {
|
||||
currentSectionName = this.value.trim();
|
||||
});
|
||||
|
||||
sectionNameInput.addEventListener('blur', function() {
|
||||
var newName = this.value.trim();
|
||||
if (newName && currentSectionName && newName !== currentSectionName) {
|
||||
// If they have an image attached, rename it
|
||||
if (urlInput.value && urlInput.value.indexOf('OverlayImage') !== -1) {
|
||||
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage/Rename?oldName=' + encodeURIComponent(currentSectionName) + '&newName=' + encodeURIComponent(newName), {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok) return response.json();
|
||||
throw new Error('Rename failed');
|
||||
})
|
||||
.then(data => {
|
||||
urlInput.value = ApiClient.serverAddress() + data.url;
|
||||
currentSectionName = newName;
|
||||
}).catch(console.error);
|
||||
} else {
|
||||
currentSectionName = newName;
|
||||
}
|
||||
} else {
|
||||
currentSectionName = newName;
|
||||
}
|
||||
});
|
||||
|
||||
function updatePreview() {
|
||||
var val = urlInput.value.trim();
|
||||
if (val) {
|
||||
previewImg.src = val;
|
||||
previewImg.style.display = 'block';
|
||||
clearBtn.style.display = 'block';
|
||||
} else {
|
||||
previewImg.src = '';
|
||||
previewImg.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Initial state
|
||||
updatePreview();
|
||||
urlInput.addEventListener('input', updatePreview);
|
||||
|
||||
clearBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
var name = sectionNameInput.value.trim();
|
||||
if (name) {
|
||||
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
||||
}
|
||||
}).catch(console.error);
|
||||
}
|
||||
urlInput.value = '';
|
||||
fileInput.value = '';
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
div.querySelector('.btn-remove').addEventListener('click', function () {
|
||||
// Cleanup image if deleted
|
||||
var name = sectionNameInput.value.trim();
|
||||
if (name) {
|
||||
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
||||
}
|
||||
}).catch(console.error);
|
||||
}
|
||||
div.remove();
|
||||
MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
|
||||
});
|
||||
|
||||
dropzone.addEventListener('click', function() { fileInput.click(); });
|
||||
|
||||
dropzone.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
dropzone.style.borderColor = '#00a4dc';
|
||||
dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
|
||||
});
|
||||
|
||||
dropzone.addEventListener('dragleave', function(e) {
|
||||
e.preventDefault();
|
||||
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
||||
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
||||
});
|
||||
|
||||
dropzone.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
||||
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
uploadSeasonalImage(e.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', function() {
|
||||
if (this.files && this.files.length > 0) uploadSeasonalImage(this.files[0]);
|
||||
});
|
||||
|
||||
function uploadSeasonalImage(file) {
|
||||
if (!file.type.match('image.*')) {
|
||||
Dashboard.alert('Please select a valid image file.');
|
||||
return;
|
||||
}
|
||||
|
||||
var name = sectionNameInput.value.trim();
|
||||
if (!name) {
|
||||
Dashboard.alert('Please enter a Name for this season before uploading an image (used for file saving).');
|
||||
return;
|
||||
}
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
var formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
var qs = '?filename=' + encodeURIComponent(name);
|
||||
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage' + qs, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) return response.json();
|
||||
throw new Error('Upload failed');
|
||||
})
|
||||
.then(data => {
|
||||
urlInput.value = ApiClient.serverAddress() + data.url;
|
||||
updatePreview();
|
||||
Dashboard.hideLoadingMsg();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Upload error:', error);
|
||||
Dashboard.alert('Image upload failed.');
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
container.appendChild(div);
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user