From 45d8bb25fc4934f7a9f8580a3b3743cebd34ac39 Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <agents@folx.tv>
Date: Wed, 1 Jul 2026 11:32:28 +0000
Subject: [PATCH] Zmehcam loading overlay: border-radius 15px kot player,
 gradient + prosojnost, manjsi logo

---
 public/app.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/public/app.js b/public/app.js
index db4b4bf..c2ac345 100644
--- a/public/app.js
+++ b/public/app.js
@@ -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) {
-  const bg = ch ? ch.color : '#000';
+  const bg = ch ? channelOverlayBg(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};transition:opacity .4s ease;z-index:2;">
-        <img src="${logo}" alt="" style="max-width:42%;max-height:42%;object-fit:contain;">
+      <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:32%;max-height:32%;object-fit:contain;opacity:.92;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));">
       </div>
     </div>
   `;
@@ -175,13 +181,13 @@ function showVideoPlayer(ch) {
 // Hide the channel-logo loading overlay once real playback starts.
 function hideLoadingOverlay() {
   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).
 function showLoadingOverlay(ch) {
   const el = document.getElementById('video-loading');
   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';
 }