sebastjan/folxplay-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zmehcam loading overlay: border-radius 15px kot player, gradient + prosojnost, manjsi logo

Browse Source
This commit is contained in:
OpenClaw Agent 2026-07-01 11:32:28 +00:00
parent f166575686
commit 45d8bb25fc
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app.js
View File

@ -159,14 +159,20 @@ function showSelectChannelBox() {
}); });
} }
function channelOverlayBg(color) {
// Softer than a flat fill: a gentle radial gradient in the channel colour,
// slightly translucent so it reads as a loading veil, not a hard block.
return `radial-gradient(circle at 50% 45%, ${color}E6 0%, ${color}F2 55%, ${color}FF 100%)`;
}
function showVideoPlayer(ch) { function showVideoPlayer(ch) {
const bg = ch ? ch.color : '#000'; const bg = ch ? channelOverlayBg(ch.color) : '#000';
const logo = ch ? ch.logo : ''; const logo = ch ? ch.logo : '';
document.getElementById('player-area').innerHTML = ` document.getElementById('player-area').innerHTML = `
<div class="split__video_ratio" style="position:relative;"> <div class="split__video_ratio" style="position:relative;">
<video id="video" controls autoplay loop playsinline></video> <video id="video" controls autoplay loop playsinline></video>
<div id="video-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:${bg};transition:opacity .4s ease;z-index:2;"> <div id="video-loading" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:${bg};border-radius:15px;transition:opacity .5s ease;z-index:2;pointer-events:none;">
<img src="${logo}" alt="" style="max-width:42%;max-height:42%;object-fit:contain;"> <img src="${logo}" alt="" style="max-width:32%;max-height:32%;object-fit:contain;opacity:.92;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));">
</div> </div>
</div> </div>
`; `;
@ -175,13 +181,13 @@ function showVideoPlayer(ch) {
// Hide the channel-logo loading overlay once real playback starts. // Hide the channel-logo loading overlay once real playback starts.
function hideLoadingOverlay() { function hideLoadingOverlay() {
const el = document.getElementById('video-loading'); const el = document.getElementById('video-loading');
if (el) { el.style.opacity = '0'; setTimeout(() => { if (el) el.style.display = 'none'; }, 400); } if (el) { el.style.opacity = '0'; setTimeout(() => { if (el) el.style.display = 'none'; }, 500); }
} }
// Show it again (e.g. when switching channel / falling back). // Show it again (e.g. when switching channel / falling back).
function showLoadingOverlay(ch) { function showLoadingOverlay(ch) {
const el = document.getElementById('video-loading'); const el = document.getElementById('video-loading');
if (!el) return; if (!el) return;
if (ch) { el.style.background = ch.color; const img = el.querySelector('img'); if (img) img.src = ch.logo; } if (ch) { el.style.background = channelOverlayBg(ch.color); const img = el.querySelector('img'); if (img) img.src = ch.logo; }
el.style.display = 'flex'; el.style.opacity = '1'; el.style.display = 'flex'; el.style.opacity = '1';
} }