diff --git a/media_server/config.py b/media_server/config.py index 4c72903..c6db317 100644 --- a/media_server/config.py +++ b/media_server/config.py @@ -45,6 +45,7 @@ class LinkConfig(BaseModel): url: str = Field(..., description="URL to open") icon: str = Field(default="mdi:link", description="MDI icon name (e.g., 'mdi:led-strip-variant')") label: str = Field(default="", description="Tooltip text") + description: str = Field(default="", description="Optional description") class Settings(BaseSettings): diff --git a/media_server/routes/links.py b/media_server/routes/links.py index 45d5b31..e8e2891 100644 --- a/media_server/routes/links.py +++ b/media_server/routes/links.py @@ -23,6 +23,7 @@ class LinkInfo(BaseModel): url: str icon: str label: str + description: str class LinkCreateRequest(BaseModel): @@ -31,6 +32,7 @@ class LinkCreateRequest(BaseModel): url: str = Field(..., description="URL to open", min_length=1) icon: str = Field(default="mdi:link", description="MDI icon name (e.g., 'mdi:led-strip-variant')") label: str = Field(default="", description="Tooltip text") + description: str = Field(default="", description="Optional description") def _validate_link_name(name: str) -> None: @@ -67,6 +69,7 @@ async def list_links(_: str = Depends(verify_token)) -> list[LinkInfo]: url=config.url, icon=config.icon, label=config.label, + description=config.description, ) for name, config in settings.links.items() ] diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index 27b10a4..19c1a9e 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -42,6 +42,7 @@ :root[data-theme="light"] .browser-container, :root[data-theme="light"] .scripts-container, :root[data-theme="light"] .script-management, +:root[data-theme="light"] .settings-section, :root[data-theme="light"] .display-container { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } @@ -979,6 +980,91 @@ button:disabled { color: var(--text-primary); } +/* Settings Container */ +.settings-container.active { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.settings-section { + background: var(--bg-secondary); + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.settings-section summary { + padding: 1rem 1.5rem; + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + gap: 0.5rem; + transition: background 0.2s; + list-style: none; +} + +.settings-section summary::-webkit-details-marker { + display: none; +} + +.settings-section summary::before { + content: ''; + display: inline-block; + width: 0.5rem; + height: 0.5rem; + border-right: 2px solid var(--text-muted); + border-bottom: 2px solid var(--text-muted); + transform: rotate(-45deg); + transition: transform 0.2s; + flex-shrink: 0; +} + +.settings-section[open] > summary::before { + transform: rotate(45deg); +} + +.settings-section summary:hover { + background: var(--bg-tertiary); +} + +.settings-section-content { + padding: 0 1.5rem 1.5rem; + overflow-x: auto; +} + +.settings-section-description { + color: var(--text-secondary); + font-size: 0.875rem; + margin-bottom: 1rem; +} + +/* Link card in Quick Access */ +.link-card { + text-decoration: none; + color: var(--text-primary); + border: 1px dashed var(--border); +} + +.link-card:hover { + border-style: solid; +} + +/* Mini player nav buttons */ +.mini-nav-btn { + width: 28px; + height: 28px; +} + +.mini-nav-btn svg { + width: 16px; + height: 16px; +} + /* Display Control Section */ .display-container { background: var(--bg-secondary); diff --git a/media_server/static/index.html b/media_server/static/index.html index 88d4014..2a5cade 100644 --- a/media_server/static/index.html +++ b/media_server/static/index.html @@ -18,11 +18,17 @@
+ +
@@ -112,19 +118,11 @@ - - -
@@ -268,100 +266,106 @@
-

No scripts configured

-
-
- + +

No quick actions or links configured

- -
- - - - - - - - - - - - - - - -
NameLabelCommandTimeoutActions
-
- -

No scripts configured. Click "Add" to create one.

-
-
-
- + -
-
+ +
+
+ Scripts +
+ + + + + + + + + + + + + + + +
NameLabelCommandTimeoutActions
+
+ +

No scripts configured. Click "Add" to create one.

+
+
+
+ + +
+
+
- -
-

- Callbacks are scripts triggered automatically by media control events (play, pause, stop, etc.) -

- - - - - - - - - - - - - - -
EventCommandTimeoutActions
-
- -

No callbacks configured. Click "Add" to create one.

-
-
-
- + -
-
+
+ Links +
+

+ Quick links displayed as icons in the header bar. Click an icon to open the URL in a new tab. +

+ + + + + + + + + + + + + + +
NameURLLabelActions
+
+ +

No links configured. Click "Add" to create one.

+
+
+
+ + +
+
+
- - @@ -508,6 +512,11 @@ Label + +
diff --git a/media_server/static/js/app.js b/media_server/static/js/app.js index acf1d30..1ab196e 100644 --- a/media_server/static/js/app.js +++ b/media_server/static/js/app.js @@ -400,12 +400,13 @@ document.getElementById('source').textContent = lastStatus.source || t('player.unknown_source'); } - // Reload tables to get translated content + // Reload tables and quick access to get translated content const token = localStorage.getItem('media_server_token'); if (token) { loadScriptsTable(); loadCallbacksTable(); loadLinksTable(); + displayQuickAccess(); } } @@ -564,8 +565,9 @@ setupVolumeSlider('volume-slider'); setupVolumeSlider('mini-volume-slider'); - // Restore saved tab - const savedTab = localStorage.getItem('activeTab') || 'player'; + // Restore saved tab (migrate old tab names) + let savedTab = localStorage.getItem('activeTab') || 'player'; + if (['scripts', 'callbacks', 'links'].includes(savedTab)) savedTab = 'settings'; switchTab(savedTab); // Snap indicator to initial position without animation const initialActiveBtn = document.querySelector('.tab-btn.active'); @@ -700,6 +702,17 @@ setupIconPreview('scriptIcon', 'scriptIconPreview'); setupIconPreview('linkIcon', 'linkIconPreview'); + // Settings sections: restore collapse state and persist on toggle + document.querySelectorAll('.settings-section').forEach(details => { + const key = `settings_section_${details.querySelector('summary')?.getAttribute('data-i18n') || ''}`; + const saved = localStorage.getItem(key); + if (saved === 'closed') details.removeAttribute('open'); + else if (saved === 'open') details.setAttribute('open', ''); + details.addEventListener('toggle', () => { + localStorage.setItem(key, details.open ? 'open' : 'closed'); + }); + }); + // Cleanup blob URLs on page unload window.addEventListener('beforeunload', () => { thumbnailCache.forEach(url => URL.revokeObjectURL(url)); @@ -840,6 +853,7 @@ console.log('Links changed, reloading...'); loadHeaderLinks(); loadLinksTable(); + displayQuickAccess(); } else if (msg.type === 'error') { console.error('WebSocket error:', msg.message); } @@ -1192,57 +1206,108 @@ if (response.ok) { scripts = await response.json(); - displayScripts(); + displayQuickAccess(); } } catch (error) { console.error('Error loading scripts:', error); } } - function displayScripts() { - const container = document.getElementById('panel-quick-actions'); + let _quickAccessGen = 0; + async function displayQuickAccess() { + const gen = ++_quickAccessGen; const grid = document.getElementById('scripts-grid'); - grid.innerHTML = ''; + // Build everything into a fragment before touching the DOM + const fragment = document.createDocumentFragment(); + const hasScripts = scripts.length > 0; + let hasLinks = false; - if (scripts.length === 0) { - grid.innerHTML = `

${t('scripts.no_scripts')}

`; - } else { - scripts.forEach(script => { - const button = document.createElement('button'); - button.className = 'script-btn'; - button.onclick = () => executeScript(script.name, button); + // Render script buttons + scripts.forEach(script => { + const button = document.createElement('button'); + button.className = 'script-btn'; + button.onclick = () => executeScript(script.name, button); - if (script.icon) { - const iconEl = document.createElement('div'); - iconEl.className = 'script-icon'; - iconEl.setAttribute('data-mdi-icon', script.icon); - button.appendChild(iconEl); + if (script.icon) { + const iconEl = document.createElement('div'); + iconEl.className = 'script-icon'; + iconEl.setAttribute('data-mdi-icon', script.icon); + button.appendChild(iconEl); + } + + const label = document.createElement('div'); + label.className = 'script-label'; + label.textContent = script.label || script.name; + button.appendChild(label); + + if (script.description) { + const description = document.createElement('div'); + description.className = 'script-description'; + description.textContent = script.description; + button.appendChild(description); + } + + fragment.appendChild(button); + }); + + // Fetch link cards + try { + const token = localStorage.getItem('media_server_token'); + if (token) { + const response = await fetch('/api/links/list', { + headers: { 'Authorization': `Bearer ${token}` } + }); + if (gen !== _quickAccessGen) return; // stale call, discard + if (response.ok) { + const links = await response.json(); + hasLinks = links.length > 0; + links.forEach(link => { + const card = document.createElement('a'); + card.className = 'script-btn link-card'; + card.href = link.url; + card.target = '_blank'; + card.rel = 'noopener noreferrer'; + + if (link.icon) { + const iconEl = document.createElement('div'); + iconEl.className = 'script-icon'; + iconEl.setAttribute('data-mdi-icon', link.icon); + card.appendChild(iconEl); + } + + const label = document.createElement('div'); + label.className = 'script-label'; + label.textContent = link.label || link.name; + card.appendChild(label); + + if (link.description) { + const desc = document.createElement('div'); + desc.className = 'script-description'; + desc.textContent = link.description; + card.appendChild(desc); + } + + fragment.appendChild(card); + }); } - - const label = document.createElement('div'); - label.className = 'script-label'; - label.textContent = script.label || script.name; - - button.appendChild(label); - - if (script.description) { - const description = document.createElement('div'); - description.className = 'script-description'; - description.textContent = script.description; - button.appendChild(description); - } - - grid.appendChild(button); - }); + } + } catch (e) { + if (gen !== _quickAccessGen) return; + console.warn('Failed to load links for quick access:', e); } - // Add "+" card at the end - const addCard = document.createElement('div'); - addCard.className = 'script-btn add-card-grid'; - addCard.onclick = () => showAddScriptDialog(); - addCard.innerHTML = '+'; - grid.appendChild(addCard); + // Show empty state if nothing + if (!hasScripts && !hasLinks) { + const empty = document.createElement('div'); + empty.className = 'scripts-empty empty-state-illustration'; + empty.innerHTML = `

${t('quick_access.no_items')}

`; + fragment.prepend(empty); + } + + // Replace grid content atomically + grid.innerHTML = ''; + grid.appendChild(fragment); // Resolve MDI icons resolveMdiIcons(grid); @@ -3192,6 +3257,7 @@ async function showEditLinkDialog(linkName) { document.getElementById('linkUrl').value = link.url; document.getElementById('linkIcon').value = link.icon || ''; document.getElementById('linkLabel').value = link.label || ''; + document.getElementById('linkDescription').value = link.description || ''; // Update icon preview const preview = document.getElementById('linkIconPreview'); @@ -3241,7 +3307,8 @@ async function saveLink(event) { const data = { url: document.getElementById('linkUrl').value, icon: document.getElementById('linkIcon').value || 'mdi:link', - label: document.getElementById('linkLabel').value || '' + label: document.getElementById('linkLabel').value || '', + description: document.getElementById('linkDescription').value || '' }; const endpoint = isEdit ? diff --git a/media_server/static/locales/en.json b/media_server/static/locales/en.json index d77abb8..ffeb521 100644 --- a/media_server/static/locales/en.json +++ b/media_server/static/locales/en.json @@ -116,11 +116,13 @@ "callbacks.confirm.unsaved": "You have unsaved changes. Are you sure you want to discard them?", "tab.player": "Player", "tab.browser": "Browser", - "tab.quick_actions": "Actions", - "tab.scripts": "Scripts", - "tab.callbacks": "Callbacks", - "tab.links": "Links", + "tab.quick_access": "Quick Access", + "tab.settings": "Settings", "tab.display": "Display", + "settings.section.scripts": "Scripts", + "settings.section.callbacks": "Callbacks", + "settings.section.links": "Links", + "quick_access.no_items": "No quick actions or links configured", "display.loading": "Loading monitors...", "display.error": "Failed to load monitors", "display.no_monitors": "No monitors detected", @@ -179,10 +181,12 @@ "links.field.url": "URL *", "links.field.icon": "Icon (MDI)", "links.field.label": "Label", + "links.field.description": "Description", "links.placeholder.name": "Only letters, numbers, and underscores allowed", "links.placeholder.url": "https://example.com", "links.placeholder.icon": "mdi:link", "links.placeholder.label": "Tooltip text", + "links.placeholder.description": "What does this link point to?", "links.button.cancel": "Cancel", "links.button.save": "Save", "links.button.edit": "Edit", diff --git a/media_server/static/locales/ru.json b/media_server/static/locales/ru.json index 3a986aa..22733c2 100644 --- a/media_server/static/locales/ru.json +++ b/media_server/static/locales/ru.json @@ -116,11 +116,13 @@ "callbacks.confirm.unsaved": "У вас есть несохраненные изменения. Вы уверены, что хотите отменить их?", "tab.player": "Плеер", "tab.browser": "Браузер", - "tab.quick_actions": "Действия", - "tab.scripts": "Скрипты", - "tab.callbacks": "Колбэки", - "tab.links": "Ссылки", + "tab.quick_access": "Быстрый Доступ", + "tab.settings": "Настройки", "tab.display": "Дисплей", + "settings.section.scripts": "Скрипты", + "settings.section.callbacks": "Колбэки", + "settings.section.links": "Ссылки", + "quick_access.no_items": "Быстрые действия и ссылки не настроены", "display.loading": "Загрузка мониторов...", "display.error": "Не удалось загрузить мониторы", "display.no_monitors": "Мониторы не обнаружены", @@ -179,10 +181,12 @@ "links.field.url": "URL *", "links.field.icon": "Иконка (MDI)", "links.field.label": "Метка", + "links.field.description": "Описание", "links.placeholder.name": "Только буквы, цифры и подчеркивания", "links.placeholder.url": "https://example.com", "links.placeholder.icon": "mdi:link", "links.placeholder.label": "Текст подсказки", + "links.placeholder.description": "Куда ведет эта ссылка?", "links.button.cancel": "Отмена", "links.button.save": "Сохранить", "links.button.edit": "Редактировать",