diff --git a/src/MediaManager.html b/src/MediaManager.html index e415077..5b422e9 100644 --- a/src/MediaManager.html +++ b/src/MediaManager.html @@ -477,6 +477,25 @@ padding-top: 12px; border-top: 1px solid #f1f5f9; } + + /* Grid Overlay */ + .grid-loading-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(1px); + z-index: 50; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--text-secondary); + font-weight: 500; + border-radius: 8px; + } @@ -560,36 +579,36 @@ - -
@@ -865,81 +884,81 @@ this.saveBtn.innerText = enable ? "Save Changes" : "No Changes"; }; - UI.prototype.showTransferSession = function (mode, serviceName) { - var el = document.getElementById('transfer-session-ui'); - var desc = document.getElementById('transfer-desc'); - var statusText = document.getElementById('transfer-status-text'); - var bar = document.getElementById('transfer-progress-bar'); - var btnReopen = document.getElementById('btn-transfer-reopen'); - var btnCancel = document.getElementById('btn-transfer-cancel'); + UI.prototype.showTransferSession = function (mode, serviceName) { + var el = document.getElementById('transfer-session-ui'); + var desc = document.getElementById('transfer-desc'); + var statusText = document.getElementById('transfer-status-text'); + var bar = document.getElementById('transfer-progress-bar'); + var btnReopen = document.getElementById('btn-transfer-reopen'); + var btnCancel = document.getElementById('btn-transfer-cancel'); - el.style.display = 'block'; - bar.style.width = '0%'; - statusText.innerText = 'Initializing...'; - document.getElementById('transfer-count').innerText = ''; + el.style.display = 'block'; + bar.style.width = '0%'; + statusText.innerText = 'Initializing...'; + document.getElementById('transfer-count').innerText = ''; - // Reset Buttons - btnCancel.disabled = false; - btnReopen.disabled = true; // Default + // Reset Buttons + btnCancel.disabled = false; + btnReopen.disabled = true; // Default - if (mode === 'waiting') { - desc.innerText = "Select items from " + (serviceName || "the service") + " in the popup window. Click 'Done' when finished."; - statusText.innerText = "Waiting for selection..."; - } else { - desc.innerText = "Importing media from " + (serviceName || "source") + "..."; - } - }; - - UI.prototype.updateTransferProgress = function (current, total, statusMsg) { - var bar = document.getElementById('transfer-progress-bar'); - var statusText = document.getElementById('transfer-status-text'); - var countText = document.getElementById('transfer-count'); - - // Disable Reopen once transfer starts - const btnReopen = document.getElementById('btn-transfer-reopen'); - if (btnReopen) btnReopen.disabled = true; - - if (total > 0) { - var pct = Math.round((current / total) * 100); - bar.style.width = pct + '%'; - countText.innerText = current + ' / ' + total; + if (mode === 'waiting') { + desc.innerText = "Select items from " + (serviceName || "the service") + " in the popup window. Click 'Done' when finished."; + statusText.innerText = "Waiting for selection..."; } else { - // Indeterminate - bar.style.width = '100%'; - countText.innerText = ''; + desc.innerText = "Importing media from " + (serviceName || "source") + "..."; + } + }; + + UI.prototype.updateTransferProgress = function (current, total, statusMsg) { + var bar = document.getElementById('transfer-progress-bar'); + var statusText = document.getElementById('transfer-status-text'); + var countText = document.getElementById('transfer-count'); + + // Disable Reopen once transfer starts + const btnReopen = document.getElementById('btn-transfer-reopen'); + if (btnReopen) btnReopen.disabled = true; + + if (total > 0) { + var pct = Math.round((current / total) * 100); + bar.style.width = pct + '%'; + countText.innerText = current + ' / ' + total; + } else { + // Indeterminate + bar.style.width = '100%'; + countText.innerText = ''; } - if (statusMsg) statusText.innerText = statusMsg; + if (statusMsg) statusText.innerText = statusMsg; - // If done, disable cancel - if (current === total && total > 0) { - const btnCancel = document.getElementById('btn-transfer-cancel'); - if (btnCancel) btnCancel.disabled = true; - } + // If done, disable cancel + if (current === total && total > 0) { + const btnCancel = document.getElementById('btn-transfer-cancel'); + if (btnCancel) btnCancel.disabled = true; + } }; - UI.prototype.hideTransferSession = function () { - document.getElementById('transfer-session-ui').style.display = 'none'; + UI.prototype.hideTransferSession = function () { + document.getElementById('transfer-session-ui').style.display = 'none'; }; - UI.prototype.setupReopenButton = function (url) { - var btn = document.getElementById('btn-transfer-reopen'); - if (!url) { - btn.disabled = true; - return; - } + UI.prototype.setupReopenButton = function (url) { + var btn = document.getElementById('btn-transfer-reopen'); + if (!url) { + btn.disabled = true; + return; + } - const width = 1200; - const height = 800; - const left = (screen.width - width) / 2; - const top = (screen.height - height) / 2; - const params = `width=${width},height=${height},top=${top},left=${left}`; + const width = 1200; + const height = 800; + const left = (screen.width - width) / 2; + const top = (screen.height - height) / 2; + const params = `width=${width},height=${height},top=${top},left=${left}`; - btn.onclick = function (e) { - e.preventDefault(); - window.open(url, 'googlePhotos', params); - }; - btn.disabled = false; + btn.onclick = function (e) { + e.preventDefault(); + window.open(url, 'googlePhotos', params); + }; + btn.disabled = false; }; UI.prototype.render = function (items) { @@ -983,10 +1002,31 @@ }; UI.prototype.setLoadingState = function (isLoading) { + var overlay = document.getElementById('grid-loading-overlay'); + if (isLoading) { - this.grid.innerHTML = '