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

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

@@ -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');