Add display brightness and power control

- New display service with DDC/CI brightness and power control via screen_brightness_control and monitorcontrol - New /api/display/* endpoints (monitors, brightness, power) - Display tab in WebUI with per-monitor brightness sliders and power toggle - EDID resolution parsing to distinguish same-name monitors - Throttled brightness slider (50ms) matching volume control pattern Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 13:54:43 +03:00
parent 03a1b30cd8
commit a568608ec3
10 changed files with 617 additions and 3 deletions
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -41,7 +41,8 @@
 :root[data-theme="light"] .player-container,
 :root[data-theme="light"] .browser-container,
 :root[data-theme="light"] .scripts-container,
-:root[data-theme="light"] .script-management {
+:root[data-theme="light"] .script-management,
+:root[data-theme="light"] .display-container {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }

@@ -886,6 +887,163 @@ button:disabled {
    color: var(--text-primary);
 }

+/* Display Control Section */
+        .display-container {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 2rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+        }
+
+        .display-monitors {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .display-monitor-card {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1rem 1.25rem;
+        }
+
+        .display-monitor-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .display-monitor-icon {
+            color: var(--text-muted);
+            flex-shrink: 0;
+        }
+
+        .display-monitor-info {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+        }
+
+        .display-monitor-name {
+            font-weight: 500;
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .display-monitor-details {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .display-power-btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.2s;
+        }
+
+        .display-power-btn.on {
+            color: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .display-power-btn.on:hover {
+            color: var(--error);
+            border-color: var(--error);
+        }
+
+        .display-power-btn.off {
+            color: var(--error);
+            border-color: var(--error);
+            opacity: 0.6;
+        }
+
+        .display-power-btn.off:hover {
+            color: var(--accent);
+            border-color: var(--accent);
+            opacity: 1;
+        }
+
+        .display-brightness-control {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .display-brightness-icon {
+            color: var(--text-muted);
+            flex-shrink: 0;
+        }
+
+        .display-brightness-slider {
+            flex: 1;
+            -webkit-appearance: none;
+            appearance: none;
+            height: 6px;
+            border-radius: 3px;
+            background: var(--bg-primary);
+            outline: none;
+            cursor: pointer;
+        }
+
+        .display-brightness-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: var(--accent);
+            cursor: pointer;
+            transition: transform 0.15s;
+        }
+
+        .display-brightness-slider::-moz-range-thumb {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: var(--accent);
+            cursor: pointer;
+            border: none;
+        }
+
+        .display-brightness-slider:hover::-webkit-slider-thumb {
+            transform: scale(1.2);
+        }
+
+        .display-brightness-slider:hover::-moz-range-thumb {
+            transform: scale(1.2);
+        }
+
+        .display-brightness-slider:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .display-brightness-value {
+            font-size: 0.813rem;
+            color: var(--text-secondary);
+            min-width: 36px;
+            text-align: right;
+            font-variant-numeric: tabular-nums;
+        }
+
 .add-card {
    display: flex;
    align-items: center;
--- a/media_server/static/index.html
+++ b/media_server/static/index.html
@@ -101,6 +101,10 @@
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                <span data-i18n="tab.player">Player</span>
            </button>
+            <button class="tab-btn" data-tab="display" onclick="switchTab('display')" role="tab" aria-selected="false" aria-controls="panel-display" tabindex="-1">
+                <svg viewBox="0 0 24 24" width="16" height="16"><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>
+                <span data-i18n="tab.display">Display</span>
+            </button>
            <button class="tab-btn" data-tab="browser" onclick="switchTab('browser')" role="tab" aria-selected="false" aria-controls="panel-browser" tabindex="-1">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
                <span data-i18n="tab.browser">Browser</span>
@@ -324,6 +328,16 @@
                <span class="add-card-icon">+</span>
            </div>
        </div>
+
+        <!-- Display Control Section -->
+        <div class="display-container" data-tab-content="display" role="tabpanel" id="panel-display">
+            <div class="display-monitors" id="displayMonitors">
+                <div class="empty-state-illustration">
+                    <svg viewBox="0 0 64 64"><rect x="8" y="10" width="48" height="32" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="50" stroke="currentColor" stroke-width="2"/><line x1="22" y1="50" x2="42" y2="50" stroke="currentColor" stroke-width="2"/></svg>
+                    <p data-i18n="display.loading">Loading monitors...</p>
+                </div>
+            </div>
+        </div>
    </div>

    <!-- Add/Edit Script Dialog -->
--- a/media_server/static/js/app.js
+++ b/media_server/static/js/app.js
@@ -121,6 +121,11 @@
                updateTabIndicator(activeBtn);
            }

+            // Load display monitors when switching to display tab
+            if (tabName === 'display') {
+                loadDisplayMonitors();
+            }
+
            // Save to localStorage
            localStorage.setItem('activeTab', tabName);

@@ -2769,3 +2774,157 @@ async function saveFolder(event) {
    closeFolderDialog();
 }

+// ============================================================
+// Display Brightness & Power Control
+// ============================================================
+
+let displayBrightnessTimers = {};
+const DISPLAY_THROTTLE_MS = 50;
+
+async function loadDisplayMonitors() {
+    const token = localStorage.getItem('media_server_token');
+    if (!token) return;
+
+    const container = document.getElementById('displayMonitors');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/display/monitors?refresh=true', {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+
+        if (!response.ok) {
+            container.innerHTML = `<div class="empty-state-illustration">
+                <svg viewBox="0 0 64 64"><rect x="8" y="10" width="48" height="32" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="50" stroke="currentColor" stroke-width="2"/><line x1="22" y1="50" x2="42" y2="50" stroke="currentColor" stroke-width="2"/></svg>
+                <p data-i18n="display.error">Failed to load monitors</p>
+            </div>`;
+            return;
+        }
+
+        const monitors = await response.json();
+
+        if (monitors.length === 0) {
+            container.innerHTML = `<div class="empty-state-illustration">
+                <svg viewBox="0 0 64 64"><rect x="8" y="10" width="48" height="32" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><line x1="32" y1="42" x2="32" y2="50" stroke="currentColor" stroke-width="2"/><line x1="22" y1="50" x2="42" y2="50" stroke="currentColor" stroke-width="2"/></svg>
+                <p data-i18n="display.no_monitors">No monitors detected</p>
+            </div>`;
+            return;
+        }
+
+        container.innerHTML = '';
+        monitors.forEach(monitor => {
+            const card = document.createElement('div');
+            card.className = 'display-monitor-card';
+            card.id = `monitor-card-${monitor.id}`;
+
+            const brightnessValue = monitor.brightness !== null ? monitor.brightness : 0;
+            const brightnessDisabled = monitor.brightness === null ? 'disabled' : '';
+
+            let powerBtn = '';
+            if (monitor.power_supported) {
+                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')}">
+                        <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(' · ');
+            const detailsHtml = details ? `<span class="display-monitor-details">${details}</span>` : '';
+
+            card.innerHTML = `
+                <div class="display-monitor-header">
+                    <svg class="display-monitor-icon" viewBox="0 0 24 24" width="20" height="20">
+                        <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">${monitor.name}</span>
+                        ${detailsHtml}
+                    </div>
+                    ${powerBtn}
+                </div>
+                <div class="display-brightness-control">
+                    <svg class="display-brightness-icon" viewBox="0 0 24 24" width="16" height="16">
+                        <path fill="currentColor" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
+                    </svg>
+                    <input type="range" class="display-brightness-slider" min="0" max="100" value="${brightnessValue}" ${brightnessDisabled}
+                           oninput="onDisplayBrightnessInput(${monitor.id}, this.value)"
+                           onchange="onDisplayBrightnessChange(${monitor.id}, this.value)">
+                    <span class="display-brightness-value" id="brightness-val-${monitor.id}">${brightnessValue}%</span>
+                </div>`;
+
+            container.appendChild(card);
+        });
+    } catch (e) {
+        console.error('Failed to load display monitors:', e);
+    }
+}
+
+function onDisplayBrightnessInput(monitorId, value) {
+    const label = document.getElementById(`brightness-val-${monitorId}`);
+    if (label) label.textContent = `${value}%`;
+
+    if (displayBrightnessTimers[monitorId]) clearTimeout(displayBrightnessTimers[monitorId]);
+    displayBrightnessTimers[monitorId] = setTimeout(() => {
+        sendDisplayBrightness(monitorId, parseInt(value));
+        displayBrightnessTimers[monitorId] = null;
+    }, DISPLAY_THROTTLE_MS);
+}
+
+function onDisplayBrightnessChange(monitorId, value) {
+    if (displayBrightnessTimers[monitorId]) {
+        clearTimeout(displayBrightnessTimers[monitorId]);
+        displayBrightnessTimers[monitorId] = null;
+    }
+    sendDisplayBrightness(monitorId, parseInt(value));
+}
+
+async function sendDisplayBrightness(monitorId, brightness) {
+    const token = localStorage.getItem('media_server_token');
+    try {
+        await fetch(`/api/display/brightness/${monitorId}`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ brightness })
+        });
+    } catch (e) {
+        console.error('Failed to set brightness:', e);
+    }
+}
+
+async function toggleDisplayPower(monitorId, monitorName) {
+    const btn = document.getElementById(`power-btn-${monitorId}`);
+    const isOn = btn && btn.classList.contains('on');
+    const newState = !isOn;
+
+    const token = localStorage.getItem('media_server_token');
+    try {
+        const response = await fetch(`/api/display/power/${monitorId}`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ on: newState })
+        });
+        const data = await response.json();
+        if (data.success) {
+            if (btn) {
+                btn.classList.toggle('on', newState);
+                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');
+        } else {
+            showToast('Failed to change monitor power', 'error');
+        }
+    } catch (e) {
+        console.error('Failed to set display power:', e);
+        showToast('Failed to change monitor power', 'error');
+    }
+}
+
--- a/media_server/static/locales/en.json
+++ b/media_server/static/locales/en.json
@@ -119,6 +119,12 @@
  "tab.quick_actions": "Actions",
  "tab.scripts": "Scripts",
  "tab.callbacks": "Callbacks",
+  "tab.display": "Display",
+  "display.loading": "Loading monitors...",
+  "display.error": "Failed to load monitors",
+  "display.no_monitors": "No monitors detected",
+  "display.power_on": "Turn on",
+  "display.power_off": "Turn off",
  "browser.title": "Media Browser",
  "browser.home": "Home",
  "browser.manage_folders": "Manage Folders",
--- a/media_server/static/locales/ru.json
+++ b/media_server/static/locales/ru.json
@@ -119,6 +119,12 @@
  "tab.quick_actions": "Действия",
  "tab.scripts": "Скрипты",
  "tab.callbacks": "Колбэки",
+  "tab.display": "Дисплей",
+  "display.loading": "Загрузка мониторов...",
+  "display.error": "Не удалось загрузить мониторы",
+  "display.no_monitors": "Мониторы не обнаружены",
+  "display.power_on": "Включить",
+  "display.power_off": "Выключить",
  "browser.title": "Медиа Браузер",
  "browser.home": "Главная",
  "browser.manage_folders": "Управление папками",