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

Loading overlay: monoliten vzorec v barvi postaje namesto ravne barve

Browse Source
This commit is contained in:
OpenClaw Agent 2026-07-01 17:09:22 +00:00
parent bfb337fe8e
commit f5cc53ea03
2 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app.js
View File

@ -160,13 +160,13 @@ function channelOverlayBg(color) {
} }
function showVideoPlayer(ch) { function showVideoPlayer(ch) {
const bg = ch ? channelOverlayBg(ch.color) : '#000'; const color = ch ? 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};border-radius:15px;z-index:2;pointer-events:none;"> <div id="video-loading" class="channelLoading" style="--ch:${color};position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:15px;z-index:2;pointer-events:none;">
<img src="${logo}" alt="" style="max-width:32%;max-height:32%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));"> <img src="${logo}" alt="" style="position:relative;z-index:1;max-width:32%;max-height:32%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));">
</div> </div>
</div> </div>
`; `;
@ -183,7 +183,7 @@ function hideLoadingOverlay() {
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 = channelOverlayBg(ch.color); const img = el.querySelector('img'); if (img) img.src = ch.logo; } if (ch) { el.style.setProperty('--ch', 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';
} }

23
public/styles.css
View File

@ -310,3 +310,26 @@ a:hover { border-bottom: 1px solid #313131; }
.channelList__channel:active { transform: scale(1.04); transition: transform .1s ease; } .channelList__channel:active { transform: scale(1.04); transition: transform .1s ease; }
.channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; } .channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; }
#random-btn { color: #D91D4A; } #random-btn { color: #D91D4A; }
/* channel loading overlay — monolithic pattern in the channel's colour */
.channelLoading {
background-color: var(--ch, #000);
background-image:
linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,.10) 100%),
repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, rgba(0,0,0,0) 2px 46px),
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 92px),
radial-gradient(120% 130% at 18% 12%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
radial-gradient(140% 140% at 88% 92%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
background-blend-mode: overlay, normal, normal, screen, multiply;
overflow: hidden;
}
.channelLoading::before {
content: "";
position: absolute;
inset: -20%;
background:
linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,.35) 42% 44%, transparent 44%),
linear-gradient(115deg, transparent 0 60%, rgba(255,255,255,.06) 60% 61%, transparent 61%),
linear-gradient(115deg, transparent 0 74%, rgba(0,0,0,.30) 74% 77%, transparent 77%);
pointer-events: none;
}