chore: release v0.2.7

The display brightness/contrast sliders and the accent color picker
rendered dynamic HTML with inline oninput/onchange/onclick attributes,
which are blocked by the script-src 'self' CSP — so display settings
were silently un-clickable from the WebUI.

Replace the inline attributes with data-* markers, then attach proper
event listeners after innerHTML (delegated on the container for the
slider rows, direct for the accent dropdown).

RELEASE_NOTES.md

@@ -1,55 +1,8 @@
-## v0.2.5 (2026-05-16)
-
-### Security
-
-- **Loopback-by-default + auto-generated token:** Server now binds `127.0.0.1` by default; first-run bootstrap generates a random `api_token` and refuses to bind a non-loopback interface without auth unless explicitly opted in. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Browser path-traversal hardening:** `BrowserService.validate_path` now rejects absolute paths, drive letters, UNC paths, and NUL bytes. `/api/browser/{play,metadata,thumbnail}` require a `folder_id` plus a folder-relative path — arbitrary filesystem reads via the browser API are no longer possible. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Strict input validation on links/scripts:** Pydantic validators reject non-http(s) URLs and any icon outside the `mdi:<slug>` namespace. Create/update/delete on scripts, callbacks, and links is gated by the corresponding `*_management` flags. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Hardened response headers + CORS:** Strict `Content-Security-Policy`, `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 for trusted origins. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Atomic config writes with restrictive permissions:** `config.yaml` writes go through a temp file + `os.replace` and land with `0o600` on POSIX, so a crash mid-write can never leave a half-written token on disk readable to other users. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Subprocess process-group isolation:** Spawned scripts/callbacks now get their own process group (`CREATE_NEW_PROCESS_GROUP` on Windows, `start_new_session=True` on POSIX), so a timeout actually kills the whole tree instead of orphaning child processes. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Frontend XSS hardening:** Monitor name + details are `escapeHtml`'d, the power button moved to a delegated `data-action` handler, and remote MDI SVGs are parsed and sanitized (strip `<script>`, `<foreignObject>`, `on*` handlers, `javascript:` hrefs) before they touch `innerHTML`. All dynamic URL segments now go through `encodeURIComponent`. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **CSP-compliant event wiring:** Strict `script-src 'self'` was blocking every inline `onclick`/`onchange`/`oninput`/`onsubmit` in the UI, leaving buttons and forms silently dead. All 53 inline handler attributes in `index.html` were renamed to `data-on*` and a new `wireInlineHandlers()` in `app.js` parses each expression on `DOMContentLoaded` and attaches a real `addEventListener` — supports no-arg calls, string/number/bool/null literals, and the `event` token. No `unsafe-inline` or `unsafe-hashes` needed. ([eaeebb6](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/eaeebb6))
+## v0.2.7 (2026-05-19)
 
 ### Bug Fixes
 
-- **WebSocket reconnect robustness:** Close the previous socket before opening a new one, clear the ping interval per-socket, clear `reconnectTimeout` up-front, retry on `online`/`visibilitychange`, and wrap `JSON.parse` in try/catch — eliminates the stale-socket leaks and "stuck offline after sleep" cases. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Artwork fetch race:** `AbortController` + generation guard so a rapid track change can no longer paint the previous track's artwork over the current one. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Audio analyzer no longer spins infinitely without a loopback device:** A sticky `_unavailable` flag short-circuits start/stop; cleared by `set_device()` so the user can recover once a device appears. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Volume short-circuit cache invalidation:** Cache is now busted when the server reports a remote volume change, so the UI no longer ignores volume updates that happened outside the app. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Browser thumbnail race:** Per-folder generation counter + `isConnected` checks; in-flight fetches are aborted on navigation, so thumbnails from a folder you already left can't paint into the current view. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Track-skip uses cached title** instead of a full WinRT status round-trip — skip feedback is now instant. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Browser list column alignment:** `.browser-list` switched to CSS grid + subgrid so header and rows share column tracks, eliminating the misaligned columns when content widths differed between rows. Matching responsive column overrides applied at the parent. Root-folder SVG sizing (hardcoded 24×24 in `browser.js`) now fills the 56px icon box instead of rendering at ~43%. Compact-grid icon fills its thumb wrapper so the emoji centers instead of being stranded top-left. Premature `isConnected` bail removed from `loadThumbnail` — the img element is intentionally detached when called from `renderBrowserGrid/List`, and the post-await checks already handle navigation-away correctly. ([982dda4](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/982dda4))
-
-### Performance
-
-- **Blocking IO off the event loop:** Linux MPRIS/`pactl` calls, `/api/display` DDC/CI handlers, and `browse_directory` are all wrapped in `asyncio.to_thread` — slow SMB shares or laggy monitors can no longer stall the entire async runtime. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Windows status poll loop reuse:** The 0.5s status poll now caches one asyncio loop per worker thread via `threading.local` instead of `new_event_loop`/`close` on every tick. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **WebSocket broadcast: serialize once:** `broadcast()` serializes JSON a single time and uses `send_text` to fan out to all clients. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Thumbnail cache cleanup actually runs:** The hourly cleanup task was defined but never scheduled — it is now wired into the lifespan handler so the cache no longer grows unbounded. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Progress drag listeners attached only while dragging** — no more global `mousemove` handler firing on every cursor twitch. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-
-### UI/UX
-
-- **Copper accent consistency:** Green leftover focus rings (`rgba(29,185,84,…)`) replaced with copper (`rgba(var(--copper-rgb),…)`) across the UI. Dialogs now have square corners and a copper top hairline so they read as part of the editorial chrome. `.browser-item` is transparent with a copper hover border (was a filled card). ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Audio device select** uses `var(--sans)` instead of the generic system font so it matches surrounding controls. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Mobile padding tuned for ≤480px screens.** ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **Accessible breadcrumb home:** Now a real `<button>` with `aria-label`, and `aria-current` is set on the root. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- **i18n gaps filled:** `display.msg.power_*`, `execution.*`, `scripts.params.execute`, `callbacks.empty` now have proper en + ru strings. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-
----
-
-### Development / Internal
-
-#### Quality
-
-- All `asyncio.get_event_loop()` in coroutines migrated to `get_running_loop()` (the former is deprecated in Python 3.12+). ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- `ThreadPoolExecutor`s now shut down cleanly during lifespan teardown. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- `config_manager` dedup: 12 near-identical CRUD methods collapsed onto generic `_upsert`/`_delete` helpers — about **290 lines removed** with no behavior change. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- Service worker no longer pass-throughs every fetch. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- M3U playlist written via `NamedTemporaryFile` so a fixed-path symlink can no longer clobber it. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- `__version__` prefers live `pyproject.toml` in dev checkouts so `pip install -e .` users see the source-of-truth version, not the stale metadata baked in at install time. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
-- `_broadcast_after_open` hardening: initialize status, swallow per-poll errors, and track background tasks in a strong-ref set with done-callback cleanup so they aren't garbage-collected mid-flight. ([bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40))
+- **Display tab sliders + accent picker now respond to clicks/drags:** Both the brightness and contrast sliders on the Display tab, and the accent-color picker in the header, were rendering dynamic HTML with inline `oninput` / `onchange` / `onclick` attributes — every one of which the server's strict `script-src 'self'` CSP silently dropped. The result: brightness and contrast couldn't be changed from the WebUI at all, and picking a custom accent did nothing. Replaced the inline attributes with `data-*` markers and wired proper `addEventListener` calls (delegated on the slider container, direct on the accent dropdown), so the controls work under the strict CSP without any `unsafe-inline` / `unsafe-hashes` relaxation. ([e1c8474](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/e1c8474))
 
 ---
 
@@ -58,8 +11,6 @@
 
 | Hash | Message | Author |
 |------|---------|--------|
-| [982dda4](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/982dda4) | fix(browser): align list columns via subgrid and fix icon sizing | alexei.dolgolyov |
-| [eaeebb6](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/eaeebb6) | fix(csp): replace inline on* handlers with data-on* + JS wiring | alexei.dolgolyov |
-| [bcc6d40](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/bcc6d40) | fix: comprehensive security, bug, performance, and UI/UX audit | alexei.dolgolyov |
+| [e1c8474](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/e1c8474) | fix(csp): wire display sliders and accent picker without inline on* | alexei.dolgolyov |
 
 </details>

media_server/services/foreground_service.py

@@ -387,7 +387,7 @@ def _probe_linux() -> ForegroundInfo:
         )
 
     try:
-        from Xlib import display, X  # type: ignore  # noqa: F401
+        from Xlib import X, display  # type: ignore  # noqa: F401
     except Exception:
         return ForegroundInfo(available=False, error="python-xlib not installed")
 

media_server/static/js/links.js

@@ -182,8 +182,7 @@ export async function loadDisplayMonitors() {
                     <span class="display-slider-label" data-i18n="display.contrast">${t('display.contrast')}</span>
                     <input type="range" class="display-slider display-contrast-slider"
                            min="0" max="100" value="${contrastValue}"
-                           oninput="onDisplayContrastInput(${monitor.id}, this.value)"
-                           onchange="onDisplayContrastChange(${monitor.id}, this.value)">
+                           data-display-slider="contrast" data-monitor-id="${monitor.id}">
                     <span class="display-slider-value" id="contrast-val-${monitor.id}">${contrastValue}%</span>
                 </div>`;
             }
@@ -296,8 +295,7 @@ export async function loadDisplayMonitors() {
                     </svg>
                     <span class="display-slider-label" data-i18n="display.brightness">${t('display.brightness')}</span>
                     <input type="range" class="display-slider display-brightness-slider" min="0" max="100" value="${brightnessValue}" ${brightnessDisabled}
-                           oninput="onDisplayBrightnessInput(${monitor.id}, this.value)"
-                           onchange="onDisplayBrightnessChange(${monitor.id}, this.value)">
+                           data-display-slider="brightness" data-monitor-id="${monitor.id}">
                     <span class="display-slider-value display-brightness-value" id="brightness-val-${monitor.id}">${brightnessValue}%</span>
                 </div>
                 ${contrastRow}
@@ -306,10 +304,15 @@ export async function loadDisplayMonitors() {
             container.appendChild(card);
         });
 
-        // Bind a single delegated click handler for the power buttons.
-        // Avoids inline onclick="..." with interpolated monitor data.
+        // Bind a single delegated click handler for the power buttons,
+        // plus input/change handlers for the brightness & contrast sliders.
+        // Avoids inline on* attributes (blocked by script-src 'self' CSP).
         container.removeEventListener('click', _onPowerButtonClick);
         container.addEventListener('click', _onPowerButtonClick);
+        container.removeEventListener('input', _onDisplaySliderInput);
+        container.addEventListener('input', _onDisplaySliderInput);
+        container.removeEventListener('change', _onDisplaySliderChange);
+        container.addEventListener('change', _onDisplaySliderChange);
 
         // Enhance every tuning <select> with an IconSelect now that the
         // cards are in the DOM (IconSelect needs offsetParent + sibling).
@@ -456,6 +459,30 @@ function _onPowerButtonClick(event) {
     if (Number.isFinite(id)) toggleDisplayPower(id);
 }
 
+function _onDisplaySliderInput(event) {
+    const el = event.target.closest('input[data-display-slider]');
+    if (!el) return;
+    const id = Number(el.dataset.monitorId);
+    if (!Number.isFinite(id)) return;
+    if (el.dataset.displaySlider === 'brightness') {
+        onDisplayBrightnessInput(id, el.value);
+    } else if (el.dataset.displaySlider === 'contrast') {
+        onDisplayContrastInput(id, el.value);
+    }
+}
+
+function _onDisplaySliderChange(event) {
+    const el = event.target.closest('input[data-display-slider]');
+    if (!el) return;
+    const id = Number(el.dataset.monitorId);
+    if (!Number.isFinite(id)) return;
+    if (el.dataset.displaySlider === 'brightness') {
+        onDisplayBrightnessChange(id, el.value);
+    } else if (el.dataset.displaySlider === 'contrast') {
+        onDisplayContrastChange(id, el.value);
+    }
+}
+
 export async function toggleDisplayPower(monitorId) {
     const btn = document.getElementById(`power-btn-${monitorId}`);
     const isOn = btn && btn.classList.contains('on');

media_server/static/js/player.js

@@ -207,20 +207,39 @@ export function renderAccentSwatches() {
     const swatches = accentPresets.map(p =>
         `<div class="accent-swatch ${p.color === current ? 'active' : ''}"
               style="background: ${p.color}"
-              onclick="selectAccentColor('${p.color}', '${p.hover}')"
+              data-accent-color="${p.color}" data-accent-hover="${p.hover}"
               title="${p.name}"></div>`
     ).join('');
 
     const customRow = `
-        <div class="accent-custom-row ${isCustom ? 'active' : ''}" onclick="document.getElementById('accentCustomInput').click()">
+        <div class="accent-custom-row ${isCustom ? 'active' : ''}" data-accent-custom-row>
             <span class="accent-custom-swatch" style="background: ${isCustom ? current : '#888'}"></span>
             <span class="accent-custom-label">${t('accent.custom')}</span>
-            <input type="color" id="accentCustomInput" value="${current}"
-                   onclick="event.stopPropagation()"
-                   onchange="selectAccentColor(this.value, lightenColor(this.value, 15))">
+            <input type="color" id="accentCustomInput" value="${current}">
         </div>`;
 
     dropdown.innerHTML = swatches + customRow;
+
+    // Wire CSP-safe handlers (script-src 'self' blocks inline on* attributes).
+    dropdown.querySelectorAll('.accent-swatch[data-accent-color]').forEach(el => {
+        el.addEventListener('click', () => {
+            selectAccentColor(el.dataset.accentColor, el.dataset.accentHover);
+        });
+    });
+    const customRowEl = dropdown.querySelector('[data-accent-custom-row]');
+    const customInput = dropdown.querySelector('#accentCustomInput');
+    if (customRowEl && customInput) {
+        customRowEl.addEventListener('click', (e) => {
+            // The native color popup only opens from a user-initiated click on
+            // the <input>. Forward clicks on the row to the input — except when
+            // the input itself was the source (avoids re-entry).
+            if (e.target !== customInput) customInput.click();
+        });
+        customInput.addEventListener('click', (e) => e.stopPropagation());
+        customInput.addEventListener('change', () => {
+            selectAccentColor(customInput.value, lightenColor(customInput.value, 15));
+        });
+    }
 }
 
 export function selectAccentColor(color, hover) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "media-server-frontend",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "media-server-frontend",
-      "version": "0.2.5",
+      "version": "0.2.7",
       "devDependencies": {
         "esbuild": "^0.27.4"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media-server-frontend",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "private": true,
   "description": "Frontend build tooling for media server WebUI",
   "scripts": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "media-server"
-version = "0.2.5"
+version = "0.2.7"
 description = "REST API server for controlling system-wide media playback"
 readme = "README.md"
 license = { text = "MIT" }