Fix: white play icons (target svg path), cycle promos through all 6 channels

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
+    // When this promo ends, jump to the next channel (cycle through all 6).
-    // (Shaka sometimes pauses on `ended` instead of looping the manifest)
+    // Use `once: true` so the handler fires only for this promo — when we
-    video.loop = true;
+    // start the next channel, a fresh `ended` listener is attached again.
+    video.loop = false;
     video.addEventListener('ended', () => {
-      try {
+      const i = CHANNELS.findIndex(c => c.key === currentChannel?.key);
-        video.currentTime = 0;
+      const next = CHANNELS[(i + 1) % CHANNELS.length];
-        video.play().catch(() => {});
+      playChannel(next.key);
-      } catch (_) {}
+    }, { 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(() => {});
   }
 

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 {