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>
2026-02-07 20:03:43 +03:00
6 changed files with 50 additions and 28 deletions
--- a/media_server/routes/browser.py
+++ b/media_server/routes/browser.py
@@ -328,7 +328,7 @@ async def get_thumbnail(
        thumbnail_data = await ThumbnailService.get_thumbnail(file_path, size)

        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)
        import hashlib
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -72,12 +72,14 @@
            font-weight: 600;
        }

-        .status-indicator {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.875rem;
-            color: var(--text-secondary);
+        .version-label {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            background: var(--bg-tertiary);
+            padding: 0.15rem 0.5rem;
+            border-radius: 1rem;
+            font-weight: 500;
+            align-self: center;
        }

        .status-dot {
@@ -837,21 +839,24 @@
        }

        .clear-token-btn {
-            position: fixed;
-            top: 1rem;
-            right: 1rem;
            width: auto;
            height: auto;
-            padding: 0.5rem 1rem;
+            padding: 6px 12px;
            border-radius: 6px;
-            font-size: 0.75rem;
+            font-size: 14px;
+            font-weight: 500;
            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+            border: 1px solid var(--border);
+            cursor: pointer;
            opacity: 0.7;
        }

        .clear-token-btn:hover {
            opacity: 1;
            background: var(--error);
+            color: var(--text-primary);
+            border-color: var(--error);
        }

        /* Mini Player (Sticky) */
--- a/media_server/static/index.html
+++ b/media_server/static/index.html
@@ -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>

--- a/media_server/static/js/app.js
+++ b/media_server/static/js/app.js
@@ -161,7 +161,8 @@

            // Re-apply last media status if available
            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');
            }

@@ -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 reconnectTimeout = null;
        let currentState = 'idle';
@@ -200,6 +216,9 @@
            // Initialize locale (async - loads JSON file)
            await initLocale();

+            // Load version from health endpoint
+            fetchVersion();
+
            const token = localStorage.getItem('media_server_token');
            if (token) {
                connectWebSocket(token);
@@ -463,14 +482,11 @@

        function updateConnectionStatus(connected) {
            const dot = document.getElementById('status-dot');
-            const text = document.getElementById('status-text');

            if (connected) {
                dot.classList.add('connected');
-                text.textContent = t('player.status.connected');
            } else {
                dot.classList.remove('connected');
-                text.textContent = t('player.status.disconnected');
            }
        }

@@ -479,12 +495,13 @@
            lastStatus = status;

            // 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('album').textContent = status.album || '';

            // 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 || '';

            // Update state
@@ -1614,7 +1631,7 @@ async function loadThumbnail(imgElement, fileName) {
            { headers: { 'Authorization': `Bearer ${token}` } }
        );

-        if (response.ok) {
+        if (response.status === 200) {
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);

@@ -1626,7 +1643,7 @@ async function loadThumbnail(imgElement, fileName) {

            imgElement.src = url;
        } else {
-            // Fallback to icon
+            // Fallback to icon (204 = no thumbnail available)
            const parent = imgElement.parentElement;
            imgElement.remove();
            const icon = document.createElement('div');
--- a/media_server/static/locales/en.json
+++ b/media_server/static/locales/en.json
@@ -18,6 +18,7 @@
  "player.status.connected": "Connected",
  "player.status.disconnected": "Disconnected",
  "player.no_media": "No media playing",
+  "player.title_unavailable": "Title unavailable",
  "player.source": "Source:",
  "player.unknown_source": "Unknown",
  "state.playing": "Playing",
--- a/media_server/static/locales/ru.json
+++ b/media_server/static/locales/ru.json
@@ -18,6 +18,7 @@
  "player.status.connected": "Подключено",
  "player.status.disconnected": "Отключено",
  "player.no_media": "Медиа не воспроизводится",
+  "player.title_unavailable": "Название недоступно",
  "player.source": "Источник:",
  "player.unknown_source": "Неизвестно",
  "state.playing": "Воспроизведение",