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

Update media-server: Fix FOUC (Flash of Untranslated Content) issues

Browse Source 
- Add CSS to hide page content during translation load (opacity transition)
- Hide dialogs explicitly until opened with showModal()
- Hide auth overlay by default in HTML (shown only when needed)
- Prevents flash of English text, dialogs, and auth overlay on page load
- Smooth fade-in after translations are loaded

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-06 17:52:44 +03:00
parent 40c2c11c85
commit 4f8f59dc89
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
media_server/static/index.html
View File

@@ -45,6 +45,16 @@
line-height: 1.6; line-height: 1.6;
} }
/* Prevent flash of untranslated content */
body.loading-translations {
opacity: 0;
transition: opacity 0.1s ease-in;
}
body.translations-loaded {
opacity: 1;
}
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
@@ -598,6 +608,11 @@
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
} }
/* Ensure dialogs are hidden until explicitly opened */
dialog:not([open]) {
display: none;
}
dialog::backdrop { dialog::backdrop {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
} }
@@ -870,12 +885,12 @@
} }
</style> </style>
</head> </head>
<body> <body class="loading-translations">
<!-- Clear Token Button --> <!-- 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> <button class="clear-token-btn" onclick="clearToken()" data-i18n-title="auth.logout.title" data-i18n="auth.logout" title="Clear saved token">Logout</button>
<!-- Auth Modal --> <!-- Auth Modal -->
<div id="auth-overlay"> <div id="auth-overlay" class="hidden">
<div class="auth-modal"> <div class="auth-modal">
<h2 data-i18n="app.title">Media Server</h2> <h2 data-i18n="app.title">Media Server</h2>
<p data-i18n="auth.message">Enter your API token to connect to the media server.</p> <p data-i18n="auth.message">Enter your API token to connect to the media server.</p>
@@ -1266,6 +1281,10 @@
// Update locale select dropdown (if visible) // Update locale select dropdown (if visible)
updateLocaleSelect(); updateLocaleSelect();
// Remove loading class and show content
document.body.classList.remove('loading-translations');
document.body.classList.add('translations-loaded');
} }
// Change locale from dropdown // Change locale from dropdown