From f5cc53ea03947ed8a57ba0007cb3a88b47cfb1f4 Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <agents@folx.tv>
Date: Wed, 1 Jul 2026 17:09:22 +0000
Subject: [PATCH] Loading overlay: monoliten vzorec v barvi postaje namesto
 ravne barve

---
 public/app.js     |  8 ++++----
 public/styles.css | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/public/app.js b/public/app.js
index 9d90f68..9aed7fd 100644
--- a/public/app.js
+++ b/public/app.js
@@ -160,13 +160,13 @@ function channelOverlayBg(color) {
 }
 
 function showVideoPlayer(ch) {
-  const bg = ch ? channelOverlayBg(ch.color) : '#000';
+  const color = ch ? ch.color : '#000';
   const logo = ch ? ch.logo : '';
   document.getElementById('player-area').innerHTML = `
     <div class="split__video_ratio" style="position:relative;">
       <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;">
-        <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));">
+      <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="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>
   `;
@@ -183,7 +183,7 @@ function hideLoadingOverlay() {
 function showLoadingOverlay(ch) {
   const el = document.getElementById('video-loading');
   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';
 }
 
diff --git a/public/styles.css b/public/styles.css
index 776362a..fc97887 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -310,3 +310,26 @@ a:hover { border-bottom: 1px solid #313131; }
 .channelList__channel:active { transform: scale(1.04); transition: transform .1s ease; }
 .channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; }
 #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;
+}