From 3b1cf139e5768f7128c20f7ce1fd8cfe81bd277a Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <agents@folx.tv>
Date: Wed, 29 Apr 2026 11:59:50 +0200
Subject: [PATCH] Fix: white play icons (target svg path), cycle promos through
 all 6 channels

---
 public/app.js     | 23 ++++++++++++++---------
 public/styles.css | 14 +++++++++++---
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/public/app.js b/public/app.js
index 4c4b706..ec567f1 100644
--- a/public/app.js
+++ b/public/app.js
@@ -206,20 +206,25 @@ async function playChannel(key) {
       // Safari / native HLS
       video.src = hlsUrl;
     }
-    // Belt-and-suspenders loop: native `loop` attribute + explicit handler
-    // (Shaka sometimes pauses on `ended` instead of looping the manifest)
-    video.loop = true;
+    // When this promo ends, jump to the next channel (cycle through all 6).
+    // Use `once: true` so the handler fires only for this promo — when we
+    // start the next channel, a fresh `ended` listener is attached again.
+    video.loop = false;
     video.addEventListener('ended', () => {
-      try {
-        video.currentTime = 0;
-        video.play().catch(() => {});
-      } catch (_) {}
-    });
+      const i = CHANNELS.findIndex(c => c.key === currentChannel?.key);
+      const next = CHANNELS[(i + 1) % CHANNELS.length];
+      playChannel(next.key);
+    }, { once: true });
     video.play().catch(() => { /* autoplay may be blocked, user can press play */ });
   } catch (e) {
     console.warn('HLS load failed, falling back to native src:', e?.message);
     video.src = hlsUrl;
-    video.loop = true;
+    video.loop = false;
+    video.addEventListener('ended', () => {
+      const i = CHANNELS.findIndex(c => c.key === currentChannel?.key);
+      const next = CHANNELS[(i + 1) % CHANNELS.length];
+      playChannel(next.key);
+    }, { once: true });
     video.play().catch(() => {});
   }
 
diff --git a/public/styles.css b/public/styles.css
index 9981e20..2c0ac7c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -128,7 +128,8 @@ a:hover { border-bottom: 1px solid #313131; }
 @media all and (max-width: 800px) {
   .selectChannelBox { height: 150px; }
 }
-.selectChannelBox svg { width: 10px; height: 10px; fill: #fff; color: #fff; }
+.selectChannelBox svg,
+.selectChannelBox svg path { width: 10px; height: 10px; fill: #fff; color: #fff; }
 .selectChannelBox .lineHeader { font-weight: 700; }
 .selectChannelBox .lineSelectChannel { margin: 5px 0; font-size: 20px; }
 .selectChannelBox .lineRandom {
@@ -199,14 +200,21 @@ a:hover { border-bottom: 1px solid #313131; }
   border-bottom-left-radius: 10px;
   border-top-left-radius: 10px;
 }
-.channelList__channelIcon svg {
+.channelList__channelIcon svg,
+.channelList__channelIcon svg path {
   opacity: .8;
   width: var(--initialWidth);
   height: auto;
   fill: #fff;
+  color: #fff;
+}
+.channelList__channelIconActive svg,
+.channelList__channelIconActive svg path {
+  opacity: 1;
+  fill: #fff;
+  color: #fff;
 }
 .channelList__channelIconActive svg {
-  opacity: 1;
   animation: pulseWidth 1s linear infinite;
 }
 .channelList__channelLogo {