alexei.dolgolyov/media-player-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Web UI: Header redesign, thumbnail fix, and title fallback

Browse Source 
- Add version label next to Media Server header (fetched from /api/health)
- Move connection status dot before title, remove status text
- Move logout button into header after language selector
- Return 204 instead of 404 for missing thumbnails (eliminates console errors)
- Show "Title unavailable" when media is playing but title is empty
- Add player.title_unavailable translation key for en/ru locales

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-07 20:03:43 +03:00
parent 1cb83eac1c
commit 8d15a2a54b
6 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
media_server/routes/browser.py
View File

@@ -328,7 +328,7 @@ async def get_thumbnail(
thumbnail_data = await ThumbnailService.get_thumbnail(file_path, size) thumbnail_data = await ThumbnailService.get_thumbnail(file_path, size)
if thumbnail_data is None: if thumbnail_data is None:
raise HTTPException(status_code=404, detail="Thumbnail not available") return Response(status_code=204)
# Calculate ETag (hash of path + mtime) # Calculate ETag (hash of path + mtime)
import hashlib import hashlib

27
media_server/static/css/styles.css
View File

@@ -72,12 +72,14 @@
font-weight: 600; font-weight: 600;
} }
.status-indicator { .version-label {
display: flex; font-size: 0.7rem;
align-items: center; color: var(--text-muted);
gap: 0.5rem; background: var(--bg-tertiary);
font-size: 0.875rem; padding: 0.15rem 0.5rem;
color: var(--text-secondary); border-radius: 1rem;
font-weight: 500;
align-self: center;
} }
.status-dot { .status-dot {
@@ -837,21 +839,24 @@
} }
.clear-token-btn { .clear-token-btn {
position: fixed;
top: 1rem;
right: 1rem;
width: auto; width: auto;
height: auto; height: auto;
padding: 0.5rem 1rem; padding: 6px 12px;
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 14px;
font-weight: 500;
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border);
cursor: pointer;
opacity: 0.7; opacity: 0.7;
} }
.clear-token-btn:hover { .clear-token-btn:hover {
opacity: 1; opacity: 1;
background: var(--error); background: var(--error);
color: var(--text-primary);
border-color: var(--error);
} }
/* Mini Player (Sticky) */ /* Mini Player (Sticky) */

14
media_server/static/index.html
View File

@@ -8,9 +8,6 @@
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
<body class="loading-translations"> <body class="loading-translations">
<!-- Clear Token Button -->
<button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
<!-- Mini Player (sticky) --> <!-- Mini Player (sticky) -->
<div class="mini-player hidden" id="mini-player"> <div class="mini-player hidden" id="mini-player">
<div class="mini-player-info"> <div class="mini-player-info">
@@ -64,7 +61,11 @@
<div class="container"> <div class="container">
<header> <header>
<h1 data-i18n="app.title">Media Server</h1> <div style="display: flex; align-items: center; gap: 0.5rem;">
<span class="status-dot" id="status-dot"></span>
<h1 data-i18n="app.title">Media Server</h1>
<span class="version-label" id="version-label"></span>
</div>
<div style="display: flex; align-items: center; gap: 1rem;"> <div style="display: flex; align-items: center; gap: 1rem;">
<button class="theme-toggle" onclick="toggleTheme()" data-i18n-title="player.theme" title="Toggle theme" id="theme-toggle"> <button class="theme-toggle" onclick="toggleTheme()" data-i18n-title="player.theme" title="Toggle theme" id="theme-toggle">
<svg id="theme-icon-sun" viewBox="0 0 24 24" style="display: none;"> <svg id="theme-icon-sun" viewBox="0 0 24 24" style="display: none;">
@@ -78,10 +79,7 @@
<option value="en">English</option> <option value="en">English</option>
<option value="ru">Русский</option> <option value="ru">Русский</option>
</select> </select>
<div class="status-indicator"> <button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
<span class="status-dot" id="status-dot"></span>
<span id="status-text" data-i18n="player.status.disconnected">Disconnected</span>
</div>
</div> </div>
</header> </header>

33
media_server/static/js/app.js
View File

@@ -161,7 +161,8 @@
// Re-apply last media status if available // Re-apply last media status if available
if (lastStatus) { if (lastStatus) {
document.getElementById('track-title').textContent = lastStatus.title || t('player.no_media'); const fallbackTitle = lastStatus.state === 'idle' ? t('player.no_media') : t('player.title_unavailable');
document.getElementById('track-title').textContent = lastStatus.title || fallbackTitle;
document.getElementById('source').textContent = lastStatus.source || t('player.unknown_source'); document.getElementById('source').textContent = lastStatus.source || t('player.unknown_source');
} }
@@ -173,6 +174,21 @@
} }
} }
async function fetchVersion() {
try {
const response = await fetch('/api/health');
if (response.ok) {
const data = await response.json();
const label = document.getElementById('version-label');
if (data.version) {
label.textContent = `v${data.version}`;
}
}
} catch (error) {
console.error('Error fetching version:', error);
}
}
let ws = null; let ws = null;
let reconnectTimeout = null; let reconnectTimeout = null;
let currentState = 'idle'; let currentState = 'idle';
@@ -200,6 +216,9 @@
// Initialize locale (async - loads JSON file) // Initialize locale (async - loads JSON file)
await initLocale(); await initLocale();
// Load version from health endpoint
fetchVersion();
const token = localStorage.getItem('media_server_token'); const token = localStorage.getItem('media_server_token');
if (token) { if (token) {
connectWebSocket(token); connectWebSocket(token);
@@ -463,14 +482,11 @@
function updateConnectionStatus(connected) { function updateConnectionStatus(connected) {
const dot = document.getElementById('status-dot'); const dot = document.getElementById('status-dot');
const text = document.getElementById('status-text');
if (connected) { if (connected) {
dot.classList.add('connected'); dot.classList.add('connected');
text.textContent = t('player.status.connected');
} else { } else {
dot.classList.remove('connected'); dot.classList.remove('connected');
text.textContent = t('player.status.disconnected');
} }
} }
@@ -479,12 +495,13 @@
lastStatus = status; lastStatus = status;
// Update track info // Update track info
document.getElementById('track-title').textContent = status.title || t('player.no_media'); const fallbackTitle = status.state === 'idle' ? t('player.no_media') : t('player.title_unavailable');
document.getElementById('track-title').textContent = status.title || fallbackTitle;
document.getElementById('artist').textContent = status.artist || ''; document.getElementById('artist').textContent = status.artist || '';
document.getElementById('album').textContent = status.album || ''; document.getElementById('album').textContent = status.album || '';
// Update mini player info // Update mini player info
document.getElementById('mini-track-title').textContent = status.title || t('player.no_media'); document.getElementById('mini-track-title').textContent = status.title || fallbackTitle;
document.getElementById('mini-artist').textContent = status.artist || ''; document.getElementById('mini-artist').textContent = status.artist || '';
// Update state // Update state
@@ -1614,7 +1631,7 @@ async function loadThumbnail(imgElement, fileName) {
{ headers: { 'Authorization': `Bearer ${token}` } } { headers: { 'Authorization': `Bearer ${token}` } }
); );
if (response.ok) { if (response.status === 200) {
const blob = await response.blob(); const blob = await response.blob();
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
@@ -1626,7 +1643,7 @@ async function loadThumbnail(imgElement, fileName) {
imgElement.src = url; imgElement.src = url;
} else { } else {
// Fallback to icon // Fallback to icon (204 = no thumbnail available)
const parent = imgElement.parentElement; const parent = imgElement.parentElement;
imgElement.remove(); imgElement.remove();
const icon = document.createElement('div'); const icon = document.createElement('div');

1
media_server/static/locales/en.json
View File

@@ -18,6 +18,7 @@
"player.status.connected": "Connected", "player.status.connected": "Connected",
"player.status.disconnected": "Disconnected", "player.status.disconnected": "Disconnected",
"player.no_media": "No media playing", "player.no_media": "No media playing",
"player.title_unavailable": "Title unavailable",
"player.source": "Source:", "player.source": "Source:",
"player.unknown_source": "Unknown", "player.unknown_source": "Unknown",
"state.playing": "Playing", "state.playing": "Playing",

1
media_server/static/locales/ru.json
View File

@@ -18,6 +18,7 @@
"player.status.connected": "Подключено", "player.status.connected": "Подключено",
"player.status.disconnected": "Отключено", "player.status.disconnected": "Отключено",
"player.no_media": "Медиа не воспроизводится", "player.no_media": "Медиа не воспроизводится",
"player.title_unavailable": "Название недоступно",
"player.source": "Источник:", "player.source": "Источник:",
"player.unknown_source": "Неизвестно", "player.unknown_source": "Неизвестно",
"state.playing": "Воспроизведение", "state.playing": "Воспроизведение",