fix: comprehensive security, bug, performance, and UI/UX audit
Lint & Test / test (push) Successful in 20s
Lint & Test / test (push) Successful in 20s
Security
- Default bind 127.0.0.1; first-run bootstrap generates random api_token
and refuses to bind non-loopback without auth unless explicitly opted in
- Path-traversal hardened: BrowserService.validate_path rejects absolute
paths, drive letters, UNC, NUL bytes. /api/browser/{play,metadata,
thumbnail} now require folder_id and a folder-relative path
- Pydantic validators on links: http(s) URLs only, mdi:<slug> icons only
- Scripts/callbacks/links create/update/delete gated by *_management flags
- Strict CSP, X-Frame-Options DENY, Referrer-Policy no-referrer,
X-Content-Type-Options nosniff
- CORS locked to localhost:<port> + 127.0.0.1:<port> by default; configurable
- config.yaml writes atomic (tmp + os.replace) and 0o600 on POSIX
- Subprocesses spawned in their own process group / new session so timeout
kills the whole tree (Windows CREATE_NEW_PROCESS_GROUP, POSIX
start_new_session=True)
- Frontend XSS: monitor name + details escapeHtml'd; power button moved to
delegated data-action handler; remote MDI SVGs parsed and sanitized
(strip script/foreignObject/on*/javascript: hrefs) before innerHTML
- All dynamic URL segments now wrapped in encodeURIComponent
Bugs
- WebSocket reconnect: close previous socket before opening new, clear
ping interval per-socket, clear reconnectTimeout up-front, retry on
online/visibilitychange, try/catch JSON.parse
- Artwork fetch race: AbortController + generation guard
- _broadcast_after_open: initialize status, swallow per-poll errors,
background tasks tracked in a strong-ref set with done-callback cleanup
- Audio analyzer: sticky _unavailable flag prevents infinite start/stop
spin when no loopback device exists; cleared by set_device()
- Volume short-circuit cache invalidated when server reports remote volume
- Browser thumbnail race: per-folder generation counter + isConnected
checks; aborts in-flight fetches on navigation
- Track-skip uses cached title instead of full WinRT status round-trip
Performance
- Linux MPRIS/pactl and /api/display DDC-CI handlers wrapped in
asyncio.to_thread so blocking IO never stalls the event loop
- browse_directory moved off the event loop (SMB shares could freeze it)
- Windows status poll caches one asyncio loop per worker thread via
threading.local instead of new_event_loop/close on every 0.5s tick
- broadcast() serializes JSON once and uses send_text to all clients
- Hourly thumbnail cache cleanup scheduled in lifespan (was never invoked
— cache grew unbounded)
- Progress drag listeners attached only while dragging
Quality
- All asyncio.get_event_loop() in coroutines → get_running_loop()
- ThreadPoolExecutors shut down cleanly during lifespan teardown
- config_manager dedup: 12 near-identical methods collapsed onto generic
_upsert/_delete helpers (~290 lines removed)
- Service worker no longer pass-throughs every fetch
- M3U playlist written via NamedTemporaryFile (no fixed-path symlink
clobber race)
- __version__ now prefers live pyproject.toml in dev checkouts so
pip install -e . users see the source-of-truth version, not the stale
package-metadata version baked in at install time
UI/UX (Studio Reference)
- Green leftover focus rings (rgba(29,185,84,...)) all replaced with
copper accent (rgba(var(--copper-rgb),...))
- Dialogs: square corners, copper top hairline, unified with editorial
chrome
- .browser-item: transparent with copper hover border (was filled card)
- Audio device select uses var(--sans) instead of generic system font
- Mobile container padding tuned for ≤480px screens
- Breadcrumb home is a real <button> with aria-label; aria-current on root
- i18n: filled display.msg.power_*, execution.*, scripts.params.execute,
callbacks.empty in both en + ru
This commit is contained in:
@@ -329,7 +329,7 @@ body.translations-loaded {
|
||||
button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.2);
|
||||
box-shadow: 0 0 0 4px rgba(var(--copper-rgb), 0.2);
|
||||
}
|
||||
|
||||
input:focus-visible,
|
||||
@@ -337,7 +337,7 @@ select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba(var(--copper-rgb), 0.15);
|
||||
}
|
||||
|
||||
.tab-btn:focus-visible {
|
||||
@@ -1004,7 +1004,7 @@ button:disabled {
|
||||
.controls button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.25);
|
||||
box-shadow: 0 0 0 4px rgba(var(--copper-rgb), 0.25);
|
||||
}
|
||||
|
||||
.mute-btn:focus-visible,
|
||||
@@ -1012,7 +1012,7 @@ button:disabled {
|
||||
.vinyl-toggle-btn:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.25);
|
||||
box-shadow: 0 0 0 4px rgba(var(--copper-rgb), 0.25);
|
||||
}
|
||||
|
||||
.controls button.primary {
|
||||
@@ -1060,7 +1060,7 @@ button:disabled {
|
||||
|
||||
#volume-slider:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.3);
|
||||
box-shadow: 0 0 6px rgba(29, 185, 84, 0.4);
|
||||
box-shadow: 0 0 6px rgba(var(--copper-rgb), 0.4);
|
||||
}
|
||||
|
||||
#volume-slider::-moz-range-thumb {
|
||||
@@ -1075,7 +1075,7 @@ button:disabled {
|
||||
|
||||
#volume-slider:hover::-moz-range-thumb {
|
||||
transform: scale(1.3);
|
||||
box-shadow: 0 0 6px rgba(29, 185, 84, 0.4);
|
||||
box-shadow: 0 0 6px rgba(var(--copper-rgb), 0.4);
|
||||
}
|
||||
|
||||
.volume-display {
|
||||
@@ -1169,7 +1169,7 @@ button:disabled {
|
||||
.vinyl-toggle-btn.active {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: rgba(29, 185, 84, 0.1);
|
||||
background: rgba(var(--copper-rgb), 0.1);
|
||||
}
|
||||
|
||||
.vinyl-toggle-btn svg {
|
||||
@@ -1393,7 +1393,7 @@ button:disabled {
|
||||
border-radius: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
font-family: var(--sans, inherit);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
||||
@@ -1402,7 +1402,7 @@ button:disabled {
|
||||
.audio-device-selector select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba(var(--copper-rgb), 0.15);
|
||||
}
|
||||
|
||||
.audio-device-status {
|
||||
@@ -1836,13 +1836,18 @@ button:disabled {
|
||||
dialog {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
/* Editorial chrome to match the rest of the Studio Reference layout:
|
||||
no rounded corners, hairline border, and a copper top accent that
|
||||
lets the dialog read as a continuation of the magazine rather than
|
||||
a generic Material modal. */
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
border-top: 1px solid var(--copper);
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
max-width: 500px;
|
||||
max-width: 520px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
|
||||
animation: dialogIn 0.25s ease-out;
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -2827,7 +2832,7 @@ button.primary svg {
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: var(--accent);
|
||||
background: rgba(29, 185, 84, 0.08);
|
||||
background: rgba(var(--copper-rgb), 0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -3235,12 +3240,14 @@ button.primary svg {
|
||||
}
|
||||
|
||||
.browser-item {
|
||||
background: var(--bg-tertiary);
|
||||
/* Match the editorial card language used elsewhere on the page —
|
||||
transparent background, hairline border, copper-on-hover. */
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
border-radius: 0;
|
||||
padding: 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -3250,6 +3257,11 @@ button.primary svg {
|
||||
animation-delay: calc(var(--item-index, 0) * 25ms);
|
||||
}
|
||||
|
||||
.browser-item:hover {
|
||||
border-color: rgba(var(--copper-rgb), 0.45);
|
||||
background: rgba(var(--copper-rgb), 0.04);
|
||||
}
|
||||
|
||||
@keyframes itemFadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
@@ -3286,14 +3298,14 @@ button.primary svg {
|
||||
height: 56px;
|
||||
font-size: 1.75rem;
|
||||
border-radius: 14px;
|
||||
background: rgba(29, 185, 84, 0.1);
|
||||
border: 1px solid rgba(29, 185, 84, 0.15);
|
||||
background: rgba(var(--copper-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--copper-rgb), 0.15);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.browser-item.browser-root-folder:hover .browser-icon {
|
||||
background: rgba(29, 185, 84, 0.18);
|
||||
border-color: rgba(29, 185, 84, 0.3);
|
||||
background: rgba(var(--copper-rgb), 0.18);
|
||||
border-color: rgba(var(--copper-rgb), 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -3963,7 +3975,13 @@ html {
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.container { padding: 48px 18px 24px; }
|
||||
.container { padding: 32px 18px 20px; }
|
||||
}
|
||||
|
||||
/* Phones: trim the editorial spread further so the first viewport isn't
|
||||
90% chrome. The 56px top pad eats a third of a 360x640 screen. */
|
||||
@media (max-width: 480px) {
|
||||
.container { padding: 16px 12px 16px; }
|
||||
}
|
||||
|
||||
/* ─── Folio marks (page corners, all tabs) ────────────────── */
|
||||
|
||||
@@ -522,7 +522,7 @@
|
||||
<td colspan="4" class="empty-state">
|
||||
<div class="empty-state-illustration">
|
||||
<svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="24"/><path d="M32 20v12l8 8"/></svg>
|
||||
<p>No callbacks configured. Click "Add" to create one.</p>
|
||||
<p data-i18n="callbacks.empty">No callbacks configured. Click "Add" to create one.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -608,7 +608,7 @@
|
||||
<!-- Script Parameters Input Dialog (shown before executing scripts with params) -->
|
||||
<dialog id="scriptParamsDialog">
|
||||
<div class="dialog-header">
|
||||
<h3 id="scriptParamsDialogTitle">Execute Script</h3>
|
||||
<h3 id="scriptParamsDialogTitle" data-i18n="scripts.params.execute">Execute Script</h3>
|
||||
</div>
|
||||
<form id="scriptParamsForm" onsubmit="submitScriptWithParams(event)">
|
||||
<div class="dialog-body">
|
||||
|
||||
@@ -66,12 +66,14 @@ function showRootFolders() {
|
||||
// Hide search at root level
|
||||
showBrowserSearch(false);
|
||||
|
||||
// Render breadcrumb with just "Home" (not clickable at root)
|
||||
// Render breadcrumb with just "Home" (already at root — not interactive).
|
||||
const breadcrumb = document.getElementById('breadcrumb');
|
||||
breadcrumb.innerHTML = '';
|
||||
const root = document.createElement('span');
|
||||
root.className = 'breadcrumb-item breadcrumb-home';
|
||||
root.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
|
||||
root.setAttribute('aria-current', 'page');
|
||||
root.setAttribute('aria-label', t('browser.home') || 'Home');
|
||||
root.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
|
||||
breadcrumb.appendChild(root);
|
||||
|
||||
// Hide play all button and pagination
|
||||
@@ -133,8 +135,10 @@ function showRootFolders() {
|
||||
}
|
||||
|
||||
async function browsePath(folderId, path, offset = 0, nocache = false) {
|
||||
// Clear search when navigating
|
||||
// Clear search when navigating; bump browse generation so in-flight
|
||||
// thumbnail fetches from the previous folder can be discarded.
|
||||
showBrowserSearch(false);
|
||||
bumpBrowseGen();
|
||||
|
||||
try {
|
||||
if (!hasCredentials()) return;
|
||||
@@ -195,10 +199,13 @@ function renderBreadcrumbs(currentPathStr, parentPath) {
|
||||
const parts = (currentPathStr || '').split('/').filter(p => p);
|
||||
let path = '/';
|
||||
|
||||
// Home link (back to folder list)
|
||||
const home = document.createElement('span');
|
||||
// Home link (back to folder list) — use a real <button> so it's
|
||||
// keyboard-focusable and reachable by screen readers.
|
||||
const home = document.createElement('button');
|
||||
home.type = 'button';
|
||||
home.className = 'breadcrumb-item breadcrumb-home';
|
||||
home.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
|
||||
home.setAttribute('aria-label', t('browser.home') || 'Home');
|
||||
home.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
|
||||
home.onclick = () => showRootFolders();
|
||||
breadcrumb.appendChild(home);
|
||||
|
||||
@@ -512,16 +519,33 @@ function formatBitrate(bps) {
|
||||
return Math.round(bps / 1000) + ' kbps';
|
||||
}
|
||||
|
||||
// Bump this whenever the user changes folder/path so in-flight fetches from
|
||||
// the previous view can be ignored when they finally resolve.
|
||||
let _browseGen = 0;
|
||||
function bumpBrowseGen() { return ++_browseGen; }
|
||||
function currentBrowseGen() { return _browseGen; }
|
||||
|
||||
function buildRelativeFilePath(relativePath, fileName) {
|
||||
const base = (relativePath === '/' || relativePath === '') ? '' : relativePath.replace(/\/$/, '');
|
||||
return base + '/' + fileName;
|
||||
}
|
||||
|
||||
async function loadThumbnail(imgElement, fileName) {
|
||||
const myGen = currentBrowseGen();
|
||||
const folderId = currentFolderId;
|
||||
const relPath = buildRelativeFilePath(currentPath, fileName);
|
||||
const cacheKey = `${folderId}|${relPath}`;
|
||||
try {
|
||||
if (!hasCredentials()) return;
|
||||
|
||||
const absolutePath = buildAbsolutePath(currentFolderId, currentPath, fileName);
|
||||
// If the user navigates away before this fetch resolves, the imgElement
|
||||
// may already be detached. Bail in that case.
|
||||
if (!imgElement.isConnected) return;
|
||||
|
||||
// Check cache first
|
||||
if (thumbnailCache.has(absolutePath)) {
|
||||
const cachedUrl = thumbnailCache.get(absolutePath);
|
||||
if (thumbnailCache.has(cacheKey)) {
|
||||
const cachedUrl = thumbnailCache.get(cacheKey);
|
||||
imgElement.onload = () => {
|
||||
if (!imgElement.isConnected) return;
|
||||
imgElement.classList.remove('loading');
|
||||
imgElement.classList.add('loaded');
|
||||
};
|
||||
@@ -529,17 +553,24 @@ async function loadThumbnail(imgElement, fileName) {
|
||||
return;
|
||||
}
|
||||
|
||||
const encodedPath = encodeURIComponent(absolutePath);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
folder_id: folderId,
|
||||
path: relPath,
|
||||
size: 'medium',
|
||||
});
|
||||
const response = await fetch(
|
||||
`/api/browser/thumbnail?path=${encodedPath}&size=medium`,
|
||||
`/api/browser/thumbnail?${params.toString()}`,
|
||||
{ headers: getAuthHeaders() }
|
||||
);
|
||||
|
||||
// Drop the response if the user has since navigated away.
|
||||
if (myGen !== currentBrowseGen() || !imgElement.isConnected) return;
|
||||
|
||||
if (response.status === 200) {
|
||||
const blob = await response.blob();
|
||||
if (myGen !== currentBrowseGen() || !imgElement.isConnected) return;
|
||||
const url = URL.createObjectURL(blob);
|
||||
thumbnailCache.set(absolutePath, url);
|
||||
thumbnailCache.set(cacheKey, url);
|
||||
|
||||
// Evict oldest entries when cache exceeds limit
|
||||
if (thumbnailCache.size > THUMBNAIL_CACHE_MAX) {
|
||||
@@ -548,13 +579,11 @@ async function loadThumbnail(imgElement, fileName) {
|
||||
thumbnailCache.delete(oldest);
|
||||
}
|
||||
|
||||
// Wait for image to actually load before showing it
|
||||
imgElement.onload = () => {
|
||||
imgElement.classList.remove('loading');
|
||||
imgElement.classList.add('loaded');
|
||||
};
|
||||
|
||||
// Revoke previous blob URL if not managed by cache
|
||||
if (imgElement.src && imgElement.src.startsWith('blob:')) {
|
||||
let isCached = false;
|
||||
for (const cachedUrl of thumbnailCache.values()) {
|
||||
@@ -564,8 +593,8 @@ async function loadThumbnail(imgElement, fileName) {
|
||||
}
|
||||
imgElement.src = url;
|
||||
} else {
|
||||
// Fallback to icon (204 = no thumbnail available)
|
||||
const parent = imgElement.parentElement;
|
||||
if (!parent) return;
|
||||
const isList = parent.classList.contains('browser-list-icon');
|
||||
imgElement.remove();
|
||||
if (isList) {
|
||||
@@ -579,7 +608,7 @@ async function loadThumbnail(imgElement, fileName) {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading thumbnail:', error);
|
||||
imgElement.classList.remove('loading');
|
||||
if (imgElement.isConnected) imgElement.classList.remove('loading');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -601,12 +630,12 @@ async function playMediaFile(fileName) {
|
||||
try {
|
||||
if (!hasCredentials()) return;
|
||||
|
||||
const absolutePath = buildAbsolutePath(currentFolderId, currentPath, fileName);
|
||||
const relativePath = buildRelativeFilePath(currentPath, fileName);
|
||||
|
||||
const response = await fetch('/api/browser/play', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
||||
body: JSON.stringify({ path: absolutePath })
|
||||
body: JSON.stringify({ folder_id: currentFolderId, path: relativePath })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Failed to play file');
|
||||
|
||||
@@ -81,7 +81,7 @@ async function _loadCallbacksTableImpl() {
|
||||
`).join('');
|
||||
} catch (error) {
|
||||
console.error('Error loading callbacks:', error);
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="empty-state" style="color: var(--error);">Failed to load callbacks</td></tr>';
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="empty-state" style="color: var(--error);">${escapeHtml(t('callbacks.msg.load_failed'))}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,7 +121,7 @@ export async function showEditCallbackDialog(callbackName) {
|
||||
const callback = callbacksList.find(c => c.name === callbackName);
|
||||
|
||||
if (!callback) {
|
||||
showToast('Callback not found', 'error');
|
||||
showToast(t('callbacks.msg.not_found'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@ export async function showEditCallbackDialog(callbackName) {
|
||||
dialog.showModal();
|
||||
} catch (error) {
|
||||
console.error('Error loading callback for edit:', error);
|
||||
showToast('Failed to load callback details', 'error');
|
||||
showToast(t('callbacks.msg.load_failed'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,9 +175,10 @@ export async function saveCallback(event) {
|
||||
shell: true
|
||||
};
|
||||
|
||||
const encodedName = encodeURIComponent(callbackName);
|
||||
const endpoint = isEdit ?
|
||||
`/api/callbacks/update/${callbackName}` :
|
||||
`/api/callbacks/create/${callbackName}`;
|
||||
`/api/callbacks/update/${encodedName}` :
|
||||
`/api/callbacks/create/${encodedName}`;
|
||||
|
||||
const method = isEdit ? 'PUT' : 'POST';
|
||||
|
||||
@@ -191,16 +192,16 @@ export async function saveCallback(event) {
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
showToast(`Callback ${isEdit ? 'updated' : 'created'} successfully`, 'success');
|
||||
showToast(t(isEdit ? 'callbacks.msg.updated' : 'callbacks.msg.created'), 'success');
|
||||
callbackFormDirty = false;
|
||||
closeCallbackDialog();
|
||||
loadCallbacksTable();
|
||||
} else {
|
||||
showToast(result.detail || `Failed to ${isEdit ? 'update' : 'create'} callback`, 'error');
|
||||
showToast(result.detail || t(isEdit ? 'callbacks.msg.update_failed' : 'callbacks.msg.create_failed'), 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving callback:', error);
|
||||
showToast(`Error ${isEdit ? 'updating' : 'creating'} callback`, 'error');
|
||||
showToast(t(isEdit ? 'callbacks.msg.update_failed' : 'callbacks.msg.create_failed'), 'error');
|
||||
} finally {
|
||||
if (submitBtn) submitBtn.disabled = false;
|
||||
}
|
||||
@@ -212,7 +213,7 @@ export async function deleteCallbackConfirm(callbackName) {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/callbacks/delete/${callbackName}`, {
|
||||
const response = await fetch(`/api/callbacks/delete/${encodeURIComponent(callbackName)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
@@ -220,13 +221,13 @@ export async function deleteCallbackConfirm(callbackName) {
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
showToast('Callback deleted successfully', 'success');
|
||||
showToast(t('callbacks.msg.deleted'), 'success');
|
||||
loadCallbacksTable();
|
||||
} else {
|
||||
showToast(result.detail || 'Failed to delete callback', 'error');
|
||||
showToast(result.detail || t('callbacks.msg.delete_failed'), 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting callback:', error);
|
||||
showToast('Error deleting callback', 'error');
|
||||
showToast(t('callbacks.msg.delete_failed'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,6 +155,7 @@ export const VOLUME_RELEASE_DELAY_MS = 500;
|
||||
// Shared state (accessed across multiple modules)
|
||||
export let ws = null;
|
||||
export function setWs(value) { ws = value; }
|
||||
export function getWs() { return ws; }
|
||||
export let currentState = 'idle';
|
||||
export function setCurrentState(value) { currentState = value; }
|
||||
export let currentDuration = 0;
|
||||
@@ -513,6 +514,12 @@ export function setVolume(volume) {
|
||||
sendCommand('volume', { volume: volume });
|
||||
}
|
||||
}
|
||||
// Reset the de-dupe cache whenever the server reports a fresh volume value
|
||||
// (e.g., another client moved the slider). Otherwise the user can end up
|
||||
// unable to "set volume back to the value we last sent" after a remote change.
|
||||
export function notifyRemoteVolume(volume) {
|
||||
lastSentVolume = volume;
|
||||
}
|
||||
|
||||
export function toggleMute() {
|
||||
sendCommand('mute');
|
||||
@@ -536,23 +543,68 @@ function _persistMdiCache() {
|
||||
try { localStorage.setItem('mdiIconCache', JSON.stringify(mdiIconCache)); } catch {}
|
||||
}
|
||||
|
||||
// Strict iconify MDI slug — used to reject anything that could be path-traversal
|
||||
// or query injection before we even hit the network.
|
||||
const MDI_SLUG_RE = /^[a-z0-9][a-z0-9-]{0,63}$/;
|
||||
|
||||
function sanitizeSvg(rawSvg) {
|
||||
// Parse the SVG and strip anything that could execute script. Anything
|
||||
// unparseable returns null so callers fall back to the placeholder.
|
||||
try {
|
||||
const doc = new DOMParser().parseFromString(rawSvg, 'image/svg+xml');
|
||||
const root = doc.documentElement;
|
||||
if (!root || root.tagName.toLowerCase() !== 'svg' || root.querySelector('parsererror')) {
|
||||
return null;
|
||||
}
|
||||
const walker = doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
|
||||
const toRemove = [];
|
||||
let node = walker.currentNode;
|
||||
while (node) {
|
||||
const tag = node.tagName?.toLowerCase();
|
||||
if (tag === 'script' || tag === 'foreignobject') {
|
||||
toRemove.push(node);
|
||||
} else if (node.attributes) {
|
||||
for (const attr of Array.from(node.attributes)) {
|
||||
const name = attr.name.toLowerCase();
|
||||
if (name.startsWith('on') ||
|
||||
((name === 'href' || name === 'xlink:href') &&
|
||||
/^\s*(javascript|data):/i.test(attr.value))) {
|
||||
node.removeAttribute(attr.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
node = walker.nextNode();
|
||||
}
|
||||
toRemove.forEach((el) => el.remove());
|
||||
return root.outerHTML;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const PLACEHOLDER_SVG = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>';
|
||||
|
||||
export async function fetchMdiIcon(iconName) {
|
||||
const name = iconName.replace(/^mdi:/, '');
|
||||
const name = String(iconName || '').replace(/^mdi:/, '');
|
||||
if (!MDI_SLUG_RE.test(name)) return PLACEHOLDER_SVG;
|
||||
if (mdiIconCache[name]) return mdiIconCache[name];
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://api.iconify.design/mdi/${name}.svg?width=16&height=16`);
|
||||
const response = await fetch(`https://api.iconify.design/mdi/${encodeURIComponent(name)}.svg?width=16&height=16`);
|
||||
if (response.ok) {
|
||||
const svg = await response.text();
|
||||
mdiIconCache[name] = svg;
|
||||
_persistMdiCache();
|
||||
return svg;
|
||||
const raw = await response.text();
|
||||
const safe = sanitizeSvg(raw);
|
||||
if (safe) {
|
||||
mdiIconCache[name] = safe;
|
||||
_persistMdiCache();
|
||||
return safe;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to fetch MDI icon:', name, e);
|
||||
}
|
||||
|
||||
return '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>';
|
||||
return PLACEHOLDER_SVG;
|
||||
}
|
||||
|
||||
export async function resolveMdiIcons(container) {
|
||||
|
||||
@@ -148,16 +148,19 @@ export async function loadDisplayMonitors() {
|
||||
|
||||
let powerBtn = '';
|
||||
if (monitor.power_supported) {
|
||||
// Inline onclick with string-interpolated monitor.name is a DOM-XSS
|
||||
// foot-gun if the OS ever reports a name containing quotes / angle
|
||||
// brackets. Use a delegated click handler bound to data-* attrs.
|
||||
powerBtn = `
|
||||
<button class="display-power-btn ${monitor.power_on ? 'on' : 'off'}" id="power-btn-${monitor.id}"
|
||||
onclick="toggleDisplayPower(${monitor.id}, '${monitor.name.replace(/'/g, "\\'")}')"
|
||||
title="${monitor.power_on ? t('display.power_off') : t('display.power_on')}">
|
||||
data-action="toggle-power" data-monitor-id="${monitor.id}"
|
||||
title="${escapeHtml(monitor.power_on ? t('display.power_off') : t('display.power_on'))}">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.27 1.08-4.28 2.76-5.56L6.34 5.02A8.95 8.95 0 003 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.95 8.95 0 00-3.17-6.83z"/></svg>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
const details = [monitor.resolution, monitor.manufacturer].filter(Boolean).join(' \u00B7 ');
|
||||
const detailsHtml = details ? `<span class="display-monitor-details">${details}</span>` : '';
|
||||
const detailsHtml = details ? `<span class="display-monitor-details">${escapeHtml(details)}</span>` : '';
|
||||
const primaryBadge = monitor.is_primary
|
||||
? `<span class="display-primary-badge" title="${t('display.primary')}" aria-label="${t('display.primary')}">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
|
||||
@@ -282,7 +285,7 @@ export async function loadDisplayMonitors() {
|
||||
<path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/>
|
||||
</svg>
|
||||
<div class="display-monitor-info">
|
||||
<span class="display-monitor-name"><span class="display-monitor-name-text">${monitor.name}</span>${primaryBadge}</span>
|
||||
<span class="display-monitor-name"><span class="display-monitor-name-text">${escapeHtml(monitor.name)}</span>${primaryBadge}</span>
|
||||
${detailsHtml}
|
||||
</div>
|
||||
${powerBtn}
|
||||
@@ -303,6 +306,11 @@ export async function loadDisplayMonitors() {
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
// Bind a single delegated click handler for the power buttons.
|
||||
// Avoids inline onclick="..." with interpolated monitor data.
|
||||
container.removeEventListener('click', _onPowerButtonClick);
|
||||
container.addEventListener('click', _onPowerButtonClick);
|
||||
|
||||
// Enhance every tuning <select> with an IconSelect now that the
|
||||
// cards are in the DOM (IconSelect needs offsetParent + sibling).
|
||||
pendingIconSelects.forEach(({ kind, monitorId, items }) => {
|
||||
@@ -441,7 +449,14 @@ export async function onDisplayPictureModeChange(monitorId, codeRaw) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function toggleDisplayPower(monitorId, monitorName) {
|
||||
function _onPowerButtonClick(event) {
|
||||
const btn = event.target.closest('[data-action="toggle-power"]');
|
||||
if (!btn) return;
|
||||
const id = Number(btn.dataset.monitorId);
|
||||
if (Number.isFinite(id)) toggleDisplayPower(id);
|
||||
}
|
||||
|
||||
export async function toggleDisplayPower(monitorId) {
|
||||
const btn = document.getElementById(`power-btn-${monitorId}`);
|
||||
const isOn = btn && btn.classList.contains('on');
|
||||
const newState = !isOn;
|
||||
@@ -459,13 +474,13 @@ export async function toggleDisplayPower(monitorId, monitorName) {
|
||||
btn.classList.toggle('off', !newState);
|
||||
btn.title = newState ? t('display.power_off') : t('display.power_on');
|
||||
}
|
||||
showToast(newState ? 'Monitor turned on' : 'Monitor turned off', 'success');
|
||||
showToast(t(newState ? 'display.msg.power_on' : 'display.msg.power_off'), 'success');
|
||||
} else {
|
||||
showToast('Failed to change monitor power', 'error');
|
||||
showToast(t('display.msg.power_failed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to set display power:', e);
|
||||
showToast('Failed to change monitor power', 'error');
|
||||
showToast(t('display.msg.power_failed'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -562,7 +577,7 @@ async function _loadLinksTableImpl() {
|
||||
resolveMdiIcons(tbody);
|
||||
} catch (error) {
|
||||
console.error('Error loading links:', error);
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="empty-state" style="color: var(--error);">Failed to load links</td></tr>';
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="empty-state" style="color: var(--error);">${escapeHtml(t('links.msg.load_failed'))}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -665,9 +680,10 @@ export async function saveLink(event) {
|
||||
description: document.getElementById('linkDescription').value || ''
|
||||
};
|
||||
|
||||
const encodedName = encodeURIComponent(linkName);
|
||||
const endpoint = isEdit ?
|
||||
`/api/links/update/${linkName}` :
|
||||
`/api/links/create/${linkName}`;
|
||||
`/api/links/update/${encodedName}` :
|
||||
`/api/links/create/${encodedName}`;
|
||||
|
||||
const method = isEdit ? 'PUT' : 'POST';
|
||||
|
||||
@@ -701,7 +717,7 @@ export async function deleteLinkConfirm(linkName) {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/links/delete/${linkName}`, {
|
||||
const response = await fetch(`/api/links/delete/${encodeURIComponent(linkName)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
ws, currentState, setCurrentState, currentDuration, setCurrentDuration,
|
||||
currentPosition, setCurrentPosition, isUserAdjustingVolume,
|
||||
lastStatus, setLastStatus, currentPlayState, setCurrentPlayState,
|
||||
POSITION_INTERPOLATION_MS, seek,
|
||||
POSITION_INTERPOLATION_MS, seek, notifyRemoteVolume,
|
||||
getAuthHeaders, hasCredentials,
|
||||
} from './core.js';
|
||||
import { updateBackgroundColors } from './background.js';
|
||||
@@ -687,54 +687,49 @@ export async function onAudioDeviceChanged() {
|
||||
|
||||
let lastArtworkKey = null;
|
||||
let currentArtworkBlobUrl = null;
|
||||
let artworkFetchGen = 0;
|
||||
let artworkAbort = null;
|
||||
let lastPositionUpdate = 0;
|
||||
let lastPositionValue = 0;
|
||||
let interpolationInterval = null;
|
||||
|
||||
export function setupProgressDrag(bar, fill) {
|
||||
let dragging = false;
|
||||
|
||||
// Listeners are attached on mousedown and removed on mouseup so the
|
||||
// document doesn't carry per-progress-bar move handlers for the entire
|
||||
// session (especially expensive on mobile).
|
||||
function getPercent(clientX) {
|
||||
const rect = bar.getBoundingClientRect();
|
||||
return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
}
|
||||
function updatePreview(percent) { fill.style.width = (percent * 100) + '%'; }
|
||||
|
||||
function updatePreview(percent) {
|
||||
fill.style.width = (percent * 100) + '%';
|
||||
}
|
||||
|
||||
function handleStart(clientX) {
|
||||
function pointerStart(getX, moveEvent, endEvent, getMoveX, getEndX) {
|
||||
if (currentDuration <= 0) return;
|
||||
dragging = true;
|
||||
bar.classList.add('dragging');
|
||||
updatePreview(getPercent(clientX));
|
||||
}
|
||||
updatePreview(getPercent(getX));
|
||||
|
||||
function handleMove(clientX) {
|
||||
if (!dragging) return;
|
||||
updatePreview(getPercent(clientX));
|
||||
}
|
||||
|
||||
function handleEnd(clientX) {
|
||||
if (!dragging) return;
|
||||
dragging = false;
|
||||
bar.classList.remove('dragging');
|
||||
const percent = getPercent(clientX);
|
||||
seek(percent * currentDuration);
|
||||
}
|
||||
|
||||
bar.addEventListener('mousedown', (e) => { e.preventDefault(); handleStart(e.clientX); });
|
||||
document.addEventListener('mousemove', (e) => { handleMove(e.clientX); });
|
||||
document.addEventListener('mouseup', (e) => { handleEnd(e.clientX); });
|
||||
|
||||
bar.addEventListener('touchstart', (e) => { handleStart(e.touches[0].clientX); }, { passive: true });
|
||||
document.addEventListener('touchmove', (e) => { if (dragging) handleMove(e.touches[0].clientX); });
|
||||
document.addEventListener('touchend', (e) => {
|
||||
if (dragging) {
|
||||
const touch = e.changedTouches[0];
|
||||
handleEnd(touch.clientX);
|
||||
function onMove(e) { updatePreview(getPercent(getMoveX(e))); }
|
||||
function onEnd(e) {
|
||||
document.removeEventListener(moveEvent, onMove);
|
||||
document.removeEventListener(endEvent, onEnd);
|
||||
bar.classList.remove('dragging');
|
||||
const clientX = getEndX(e);
|
||||
if (clientX !== undefined) seek(getPercent(clientX) * currentDuration);
|
||||
}
|
||||
document.addEventListener(moveEvent, onMove);
|
||||
document.addEventListener(endEvent, onEnd);
|
||||
}
|
||||
|
||||
bar.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
pointerStart(e.clientX, 'mousemove', 'mouseup',
|
||||
(ev) => ev.clientX, (ev) => ev.clientX);
|
||||
});
|
||||
bar.addEventListener('touchstart', (e) => {
|
||||
pointerStart(e.touches[0].clientX, 'touchmove', 'touchend',
|
||||
(ev) => ev.touches[0].clientX,
|
||||
(ev) => ev.changedTouches?.[0]?.clientX);
|
||||
}, { passive: true });
|
||||
|
||||
bar.addEventListener('click', (e) => {
|
||||
if (currentDuration > 0) {
|
||||
@@ -811,28 +806,35 @@ export function updateUI(status) {
|
||||
lastArtworkKey = artworkKey;
|
||||
const placeholderArt = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%236a6a6a' opacity='0.35' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
|
||||
const placeholderGlow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3C/svg%3E";
|
||||
// Cancel any in-flight artwork fetch and bump the generation so a
|
||||
// late response from a previous track cannot overwrite the new one.
|
||||
if (artworkAbort) {
|
||||
try { artworkAbort.abort(); } catch { /* ignore */ }
|
||||
}
|
||||
const myGen = ++artworkFetchGen;
|
||||
artworkAbort = new AbortController();
|
||||
|
||||
if (artworkSource) {
|
||||
// No cache-buster: when album_art_url is unchanged the
|
||||
// browser can reuse the decoded bitmap. The artworkKey gate
|
||||
// already skips fetches when the user hasn't switched tracks.
|
||||
fetch('/api/media/artwork', {
|
||||
headers: getAuthHeaders()
|
||||
headers: getAuthHeaders(),
|
||||
signal: artworkAbort.signal,
|
||||
})
|
||||
.then(r => r.ok ? r.blob() : null)
|
||||
.then(blob => {
|
||||
if (!blob) return;
|
||||
if (!blob || myGen !== artworkFetchGen) return;
|
||||
const oldBlobUrl = currentArtworkBlobUrl;
|
||||
const url = URL.createObjectURL(blob);
|
||||
currentArtworkBlobUrl = url;
|
||||
swapArtworkSrc(dom.albumArt, url);
|
||||
if (dom.miniAlbumArt.src !== url) dom.miniAlbumArt.src = url;
|
||||
if (dom.albumArtGlow && dom.albumArtGlow.src !== url) dom.albumArtGlow.src = url;
|
||||
// Mirror to fullscreen bloom directly — drops the
|
||||
// MutationObserver fan-out path.
|
||||
syncFullscreenBloomArt(url);
|
||||
if (oldBlobUrl) setTimeout(() => URL.revokeObjectURL(oldBlobUrl), 1000);
|
||||
})
|
||||
.catch(err => console.error('Artwork fetch failed:', err));
|
||||
.catch(err => {
|
||||
if (err && err.name === 'AbortError') return;
|
||||
console.error('Artwork fetch failed:', err);
|
||||
});
|
||||
} else {
|
||||
if (currentArtworkBlobUrl) {
|
||||
URL.revokeObjectURL(currentArtworkBlobUrl);
|
||||
@@ -858,6 +860,9 @@ export function updateUI(status) {
|
||||
}
|
||||
|
||||
if (!isUserAdjustingVolume) {
|
||||
// Re-seed the throttling cache so a future call to setVolume() with
|
||||
// the previously-sent value still propagates after an external change.
|
||||
notifyRemoteVolume(status.volume);
|
||||
dom.volumeSlider.value = status.volume;
|
||||
dom.volumeDisplay.textContent = `${status.volume}%`;
|
||||
dom.miniVolumeSlider.value = status.volume;
|
||||
|
||||
@@ -150,7 +150,7 @@ async function executeScript(scriptName, buttonElement) {
|
||||
|
||||
async function _doExecuteScript(scriptName, params) {
|
||||
try {
|
||||
const response = await fetch(`/api/scripts/execute/${scriptName}`, {
|
||||
const response = await fetch(`/api/scripts/execute/${encodeURIComponent(scriptName)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
||||
body: JSON.stringify({ params })
|
||||
@@ -393,7 +393,7 @@ async function _loadScriptsTableImpl() {
|
||||
resolveMdiIcons(tbody);
|
||||
} catch (error) {
|
||||
console.error('Error loading scripts:', error);
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state" style="color: var(--error);">Failed to load scripts</td></tr>';
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="empty-state" style="color: var(--error);">${escapeHtml(t('scripts.msg.load_failed'))}</td></tr>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -433,7 +433,7 @@ export async function showEditScriptDialog(scriptName) {
|
||||
const script = scriptsList.find(s => s.name === scriptName);
|
||||
|
||||
if (!script) {
|
||||
showToast('Script not found', 'error');
|
||||
showToast(t('scripts.msg.not_found'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -470,7 +470,7 @@ export async function showEditScriptDialog(scriptName) {
|
||||
dialog.showModal();
|
||||
} catch (error) {
|
||||
console.error('Error loading script for edit:', error);
|
||||
showToast('Failed to load script details', 'error');
|
||||
showToast(t('scripts.msg.load_failed'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -508,9 +508,10 @@ export async function saveScript(event) {
|
||||
parameters: _collectParameterDefinitions(),
|
||||
};
|
||||
|
||||
const encodedName = encodeURIComponent(scriptName);
|
||||
const endpoint = isEdit ?
|
||||
`/api/scripts/update/${scriptName}` :
|
||||
`/api/scripts/create/${scriptName}`;
|
||||
`/api/scripts/update/${encodedName}` :
|
||||
`/api/scripts/create/${encodedName}`;
|
||||
|
||||
const method = isEdit ? 'PUT' : 'POST';
|
||||
|
||||
@@ -524,15 +525,15 @@ export async function saveScript(event) {
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
showToast(`Script ${isEdit ? 'updated' : 'created'} successfully`, 'success');
|
||||
showToast(t(isEdit ? 'scripts.msg.updated' : 'scripts.msg.created'), 'success');
|
||||
scriptFormDirty = false;
|
||||
closeScriptDialog();
|
||||
} else {
|
||||
showToast(result.detail || `Failed to ${isEdit ? 'update' : 'create'} script`, 'error');
|
||||
showToast(result.detail || t(isEdit ? 'scripts.msg.update_failed' : 'scripts.msg.create_failed'), 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving script:', error);
|
||||
showToast(`Error ${isEdit ? 'updating' : 'creating'} script`, 'error');
|
||||
showToast(t(isEdit ? 'scripts.msg.update_failed' : 'scripts.msg.create_failed'), 'error');
|
||||
} finally {
|
||||
if (submitBtn) submitBtn.disabled = false;
|
||||
}
|
||||
@@ -544,7 +545,7 @@ export async function deleteScriptConfirm(scriptName) {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/scripts/delete/${scriptName}`, {
|
||||
const response = await fetch(`/api/scripts/delete/${encodeURIComponent(scriptName)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
@@ -552,13 +553,13 @@ export async function deleteScriptConfirm(scriptName) {
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
showToast('Script deleted successfully', 'success');
|
||||
showToast(t('scripts.msg.deleted'), 'success');
|
||||
} else {
|
||||
showToast(result.detail || 'Failed to delete script', 'error');
|
||||
showToast(result.detail || t('scripts.msg.delete_failed'), 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting script:', error);
|
||||
showToast('Error deleting script', 'error');
|
||||
showToast(t('scripts.msg.delete_failed'), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -581,23 +582,23 @@ function showExecutionResult(name, result, type = 'script') {
|
||||
const outputPre = document.getElementById('executionOutput');
|
||||
const errorPre = document.getElementById('executionError');
|
||||
|
||||
title.textContent = `Execution Result: ${name}`;
|
||||
title.textContent = `${t('execution.result')}: ${name}`;
|
||||
|
||||
const success = result.success && result.exit_code === 0;
|
||||
const statusClass = success ? 'success' : 'error';
|
||||
const statusText = success ? 'Success' : 'Failed';
|
||||
const statusText = t(success ? 'execution.success' : 'execution.failed');
|
||||
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item ${statusClass}">
|
||||
<label>Status</label>
|
||||
<value>${statusText}</value>
|
||||
<label>${escapeHtml(t('execution.status'))}</label>
|
||||
<value>${escapeHtml(statusText)}</value>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>Exit Code</label>
|
||||
<label>${escapeHtml(t('execution.exit_code'))}</label>
|
||||
<value>${result.exit_code !== undefined ? result.exit_code : 'N/A'}</value>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>Duration</label>
|
||||
<label>${escapeHtml(t('execution.duration'))}</label>
|
||||
<value>${result.execution_time !== undefined && result.execution_time !== null ? result.execution_time.toFixed(3) + 's' : 'N/A'}</value>
|
||||
</div>
|
||||
`;
|
||||
@@ -606,7 +607,7 @@ function showExecutionResult(name, result, type = 'script') {
|
||||
if (result.stdout && result.stdout.trim()) {
|
||||
outputPre.textContent = result.stdout;
|
||||
} else {
|
||||
outputPre.textContent = '(no output)';
|
||||
outputPre.textContent = t('execution.no_output');
|
||||
outputPre.style.fontStyle = 'italic';
|
||||
outputPre.style.color = 'var(--text-secondary)';
|
||||
}
|
||||
@@ -642,11 +643,11 @@ async function _executeScriptDebugWithParams(scriptName, params) {
|
||||
const title = document.getElementById('executionDialogTitle');
|
||||
const statusDiv = document.getElementById('executionStatus');
|
||||
|
||||
title.textContent = `Executing: ${scriptName}`;
|
||||
title.textContent = `${t('execution.executing')}: ${scriptName}`;
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item">
|
||||
<label>Status</label>
|
||||
<value><span class="loading-spinner"></span> Running...</value>
|
||||
<label>${escapeHtml(t('execution.status'))}</label>
|
||||
<value><span class="loading-spinner"></span> ${escapeHtml(t('execution.running'))}</value>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('outputSection').style.display = 'none';
|
||||
@@ -813,11 +814,11 @@ export async function executeCallbackDebug(callbackName) {
|
||||
const title = document.getElementById('executionDialogTitle');
|
||||
const statusDiv = document.getElementById('executionStatus');
|
||||
|
||||
title.textContent = `Executing: ${callbackName}`;
|
||||
title.textContent = `${t('execution.executing')}: ${callbackName}`;
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item">
|
||||
<label>Status</label>
|
||||
<value><span class="loading-spinner"></span> Running...</value>
|
||||
<label>${escapeHtml(t('execution.status'))}</label>
|
||||
<value><span class="loading-spinner"></span> ${escapeHtml(t('execution.running'))}</value>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('outputSection').style.display = 'none';
|
||||
@@ -826,7 +827,7 @@ export async function executeCallbackDebug(callbackName) {
|
||||
dialog.showModal();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/callbacks/execute/${callbackName}`, {
|
||||
const response = await fetch(`/api/callbacks/execute/${encodeURIComponent(callbackName)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() }
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
// ============================================================
|
||||
|
||||
import {
|
||||
dom, t, showToast, setWs,
|
||||
dom, t, setWs, getWs,
|
||||
WS_BACKOFF_BASE_MS, WS_BACKOFF_MAX_MS,
|
||||
WS_MAX_RECONNECT_ATTEMPTS, WS_PING_INTERVAL_MS,
|
||||
authRequired, showUpdateBanner,
|
||||
@@ -14,8 +14,26 @@ import { loadCallbacksTable } from './callbacks.js';
|
||||
import { loadHeaderLinks, loadLinksTable } from './links.js';
|
||||
|
||||
let reconnectTimeout = null;
|
||||
let pingInterval = null;
|
||||
let wsReconnectAttempts = 0;
|
||||
// Track the ping interval against the socket that owns it so we never leak
|
||||
// a timer if connectWebSocket() is called while a previous socket is still
|
||||
// alive. The pair is wiped on close to avoid double-clear races.
|
||||
let activeSocket = null;
|
||||
let activePingInterval = null;
|
||||
|
||||
function clearReconnect() {
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout);
|
||||
reconnectTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function clearPing() {
|
||||
if (activePingInterval) {
|
||||
clearInterval(activePingInterval);
|
||||
activePingInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function showAuthForm(errorMessage = '') {
|
||||
const overlay = document.getElementById('auth-overlay');
|
||||
@@ -47,19 +65,24 @@ export function authenticate() {
|
||||
|
||||
export function clearToken() {
|
||||
localStorage.removeItem('media_server_token');
|
||||
// Access ws via import
|
||||
import('./core.js').then(core => {
|
||||
if (core.ws) {
|
||||
core.ws.close();
|
||||
}
|
||||
});
|
||||
const current = getWs();
|
||||
if (current) {
|
||||
try { current.close(1000, 'token cleared'); } catch { /* ignore */ }
|
||||
}
|
||||
showAuthForm(t('auth.cleared'));
|
||||
}
|
||||
|
||||
export function connectWebSocket(token) {
|
||||
if (pingInterval) {
|
||||
clearInterval(pingInterval);
|
||||
pingInterval = null;
|
||||
// Always cancel a pending reconnect first — otherwise a user-triggered
|
||||
// reconnect can race a scheduled one and create two live sockets.
|
||||
clearReconnect();
|
||||
clearPing();
|
||||
|
||||
// Close any previous socket cleanly before opening a new one.
|
||||
const previous = activeSocket;
|
||||
activeSocket = null;
|
||||
if (previous && previous.readyState <= WebSocket.OPEN) {
|
||||
try { previous.close(1000, 'reconnecting'); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
@@ -67,6 +90,7 @@ export function connectWebSocket(token) {
|
||||
const wsUrl = token ? `${wsBase}?token=${encodeURIComponent(token)}` : wsBase;
|
||||
|
||||
const newWs = new WebSocket(wsUrl);
|
||||
activeSocket = newWs;
|
||||
setWs(newWs);
|
||||
|
||||
newWs.onopen = () => {
|
||||
@@ -84,7 +108,13 @@ export function connectWebSocket(token) {
|
||||
};
|
||||
|
||||
newWs.onmessage = (event) => {
|
||||
const msg = JSON.parse(event.data);
|
||||
let msg;
|
||||
try {
|
||||
msg = JSON.parse(event.data);
|
||||
} catch (err) {
|
||||
console.warn('Ignoring malformed WebSocket frame:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (msg.type === 'status' || msg.type === 'status_update') {
|
||||
updateUI(msg.data);
|
||||
@@ -116,6 +146,13 @@ export function connectWebSocket(token) {
|
||||
updateConnectionStatus(false);
|
||||
stopPositionInterpolation();
|
||||
|
||||
// Drop this socket's ping interval. Guard so we don't kill a newer
|
||||
// socket's interval if reconnect already started.
|
||||
if (activeSocket === newWs) {
|
||||
clearPing();
|
||||
activeSocket = null;
|
||||
}
|
||||
|
||||
if (event.code === 4001) {
|
||||
localStorage.removeItem('media_server_token');
|
||||
showAuthForm(t('auth.invalid'));
|
||||
@@ -133,7 +170,9 @@ export function connectWebSocket(token) {
|
||||
showConnectionBanner(t('connection.reconnecting').replace('{attempt}', wsReconnectAttempts), false);
|
||||
}
|
||||
|
||||
clearReconnect();
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
reconnectTimeout = null;
|
||||
const savedToken = localStorage.getItem('media_server_token');
|
||||
if (savedToken || !authRequired) {
|
||||
connectWebSocket(savedToken || '');
|
||||
@@ -145,9 +184,10 @@ export function connectWebSocket(token) {
|
||||
}
|
||||
};
|
||||
|
||||
pingInterval = setInterval(() => {
|
||||
if (newWs && newWs.readyState === WebSocket.OPEN) {
|
||||
newWs.send(JSON.stringify({ type: 'ping' }));
|
||||
clearPing();
|
||||
activePingInterval = setInterval(() => {
|
||||
if (newWs.readyState === WebSocket.OPEN) {
|
||||
try { newWs.send(JSON.stringify({ type: 'ping' })); } catch { /* ignore */ }
|
||||
}
|
||||
}, WS_PING_INTERVAL_MS);
|
||||
}
|
||||
@@ -182,3 +222,23 @@ export function manualReconnect() {
|
||||
connectWebSocket(savedToken || '');
|
||||
}
|
||||
}
|
||||
|
||||
// When the browser regains connectivity or the tab becomes visible again,
|
||||
// drop the backoff and reconnect immediately rather than waiting out the
|
||||
// current timer.
|
||||
function reconnectIfNeeded() {
|
||||
const current = activeSocket;
|
||||
if (current && (current.readyState === WebSocket.OPEN || current.readyState === WebSocket.CONNECTING)) {
|
||||
return;
|
||||
}
|
||||
const savedToken = localStorage.getItem('media_server_token');
|
||||
if (savedToken || !authRequired) {
|
||||
wsReconnectAttempts = 0;
|
||||
connectWebSocket(savedToken || '');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('online', reconnectIfNeeded);
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) reconnectIfNeeded();
|
||||
});
|
||||
|
||||
@@ -174,6 +174,18 @@
|
||||
"display.msg.color_failed": "Failed to apply color preset",
|
||||
"display.msg.mode_changed": "Picture mode applied",
|
||||
"display.msg.mode_failed": "Failed to apply picture mode",
|
||||
"display.msg.power_on": "Monitor turned on",
|
||||
"display.msg.power_off": "Monitor turned off",
|
||||
"display.msg.power_failed": "Failed to change monitor power",
|
||||
"execution.result": "Execution Result",
|
||||
"execution.executing": "Executing",
|
||||
"execution.status": "Status",
|
||||
"execution.exit_code": "Exit Code",
|
||||
"execution.duration": "Duration",
|
||||
"execution.success": "Success",
|
||||
"execution.failed": "Failed",
|
||||
"execution.running": "Running...",
|
||||
"execution.no_output": "(no output)",
|
||||
"browser.title": "Media Browser",
|
||||
"browser.home": "Home",
|
||||
"browser.manage_folders": "Manage Folders",
|
||||
|
||||
@@ -174,6 +174,18 @@
|
||||
"display.msg.color_failed": "Не удалось применить цветовую температуру",
|
||||
"display.msg.mode_changed": "Режим изображения применён",
|
||||
"display.msg.mode_failed": "Не удалось применить режим изображения",
|
||||
"display.msg.power_on": "Монитор включён",
|
||||
"display.msg.power_off": "Монитор выключен",
|
||||
"display.msg.power_failed": "Не удалось переключить питание монитора",
|
||||
"execution.result": "Результат выполнения",
|
||||
"execution.executing": "Выполняется",
|
||||
"execution.status": "Статус",
|
||||
"execution.exit_code": "Код выхода",
|
||||
"execution.duration": "Длительность",
|
||||
"execution.success": "Успешно",
|
||||
"execution.failed": "Ошибка",
|
||||
"execution.running": "Выполняется...",
|
||||
"execution.no_output": "(нет вывода)",
|
||||
"browser.title": "Медиа Браузер",
|
||||
"browser.home": "Главная",
|
||||
"browser.manage_folders": "Управление папками",
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
// Minimal service worker for PWA installability.
|
||||
// Minimal service worker for PWA installability only.
|
||||
// This app requires a live WebSocket connection, so offline caching is not useful.
|
||||
// All fetch requests are passed through to the network.
|
||||
// We intentionally do NOT register a `fetch` handler — a pass-through handler
|
||||
// forces every navigation through the SW for no benefit and breaks the
|
||||
// browser's normal HTTP cache + error semantics.
|
||||
|
||||
self.addEventListener('install', () => {
|
||||
self.skipWaiting();
|
||||
@@ -9,7 +11,3 @@ self.addEventListener('install', () => {
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(self.clients.claim());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(fetch(event.request));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user