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

- 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:
2026-02-07 20:03:43 +03:00
parent 1cb83eac1c
commit 8d15a2a54b
6 changed files with 50 additions and 28 deletions

View File

@@ -8,9 +8,6 @@
<link rel="stylesheet" href="/static/css/styles.css">
</head>
<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) -->
<div class="mini-player hidden" id="mini-player">
<div class="mini-player-info">
@@ -64,7 +61,11 @@
<div class="container">
<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;">
<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;">
@@ -78,10 +79,7 @@
<option value="en">English</option>
<option value="ru">Русский</option>
</select>
<div class="status-indicator">
<span class="status-dot" id="status-dot"></span>
<span id="status-text" data-i18n="player.status.disconnected">Disconnected</span>
</div>
<button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
</div>
</header>