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

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

Browse Source
This commit is contained in:
OpenClaw Agent 2026-04-29 11:59:50 +02:00
parent ac22286f5e
commit 3b1cf139e5
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/app.js
View File

@ -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(() => {});
}

14
public/styles.css
View File

@ -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 {