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

Player overlay: banner slike postaj brez dodatnega logotipa

Browse Source
This commit is contained in:
OpenClaw Agent 2026-07-02 12:17:30 +00:00
parent 0c0ee4fbe5
commit 20fe0c2ace
8 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app.js
View File

@ -6,12 +6,12 @@ const JW_HLS = id => `https://cdn.jwplayer.com/manifests/${id}.m3u8`;
const JW_POSTER = id => `https://cdn.jwplayer.com/v2/media/${id}/poster.jpg?width=1280`; const JW_POSTER = id => `https://cdn.jwplayer.com/v2/media/${id}/poster.jpg?width=1280`;
const CHANNELS = [ const CHANNELS = [
{ key: 'one', name: 'One Music TV', color: '#a84d7e', logo: '/logos/one_mt_neg_b.png', alt: 'logo of One', jw: 'CBM2fSnV', live: 'https://oneapp.b-cdn.net/master.m3u8' }, { key: 'one', name: 'One Music TV', color: '#a84d7e', logo: '/logos/one_mt_neg_b.png', alt: 'logo of One', jw: 'CBM2fSnV', live: 'https://oneapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_one.jpg' }
{ key: 'zwei', name: 'Zwei Music TV', color: '#f36700', logo: '/logos/zwei_neg_b.png', alt: 'logo of Zwei', jw: 'LZVUn3Qy', live: 'https://zweiapp.b-cdn.net/master.m3u8' }, { key: 'zwei', name: 'Zwei Music TV', color: '#f36700', logo: '/logos/zwei_neg_b.png', alt: 'logo of Zwei', jw: 'LZVUn3Qy', live: 'https://zweiapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_zwei.jpg' }
{ key: 'mt', name: 'Folx Music TV', color: '#C43651', logo: '/logos/mt_neg_b.png', alt: 'logo of Folx Music',jw: 'UYU6dx3Q', live: 'https://folxapp.b-cdn.net/master.m3u8' }, { key: 'mt', name: 'Folx Music TV', color: '#C43651', logo: '/logos/mt_neg_b.png', alt: 'logo of Folx Music',jw: 'UYU6dx3Q', live: 'https://folxapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_mt.jpg' }
{ key: 'adria', name: 'Adria Music TV', color: '#30a6d1', logo: '/logos/adria_neg_b.png', alt: 'logo of Adria', jw: 'lI4SC7Do', live: 'https://adriaapp.b-cdn.net/master.m3u8' }, { key: 'adria', name: 'Adria Music TV', color: '#30a6d1', logo: '/logos/adria_neg_b.png', alt: 'logo of Adria', jw: 'lI4SC7Do', live: 'https://adriaapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_adria.jpg' }
{ key: 'folx-slo', name: 'Folx Slovenija', color: '#a8b539', logo: '/logos/folx_slo_neg_b.png', alt: 'logo of Folx Slovenija', jw: 'aoCWwwSg', live: 'https://folxsloapp.b-cdn.net/master.m3u8' }, { key: 'folx-slo', name: 'Folx Slovenija', color: '#a8b539', logo: '/logos/folx_slo_neg_b.png', alt: 'logo of Folx Slovenija', jw: 'aoCWwwSg', live: 'https://folxsloapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_folx-slo.jpg' }
{ key: 'one-adria', name: 'One Adria Music TV', color: '#a84d7e', logo: '/logos/one_neg_b.png', alt: 'logo of One Adria', jw: 'IGOSgmvW', live: 'https://oneadriaapp.b-cdn.net/master.m3u8' }, { key: 'one-adria', name: 'One Adria Music TV', color: '#a84d7e', logo: '/logos/one_neg_b.png', alt: 'logo of One Adria', jw: 'IGOSgmvW', live: 'https://oneadriaapp.b-cdn.net/master.m3u8' },, bg: '/backgrounds/ch_one-adria.jpg' }
]; ];
// Coloured dot per channel (colour taken from the channel's brand colour). // Coloured dot per channel (colour taken from the channel's brand colour).
@ -166,9 +166,7 @@ function showVideoPlayer(ch) {
document.getElementById('player-area').innerHTML = ` document.getElementById('player-area').innerHTML = `
<div class="split__video_ratio" style="position:relative;"> <div class="split__video_ratio" style="position:relative;">
<video id="video" controls autoplay loop playsinline></video> <video id="video" controls autoplay loop playsinline></video>
<div id="video-loading" class="channelLoading${ch && ch.bg ? ' channelLoading--img' : ''}" style="--ch:${color};${bgImg}position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:15px;z-index:2;pointer-events:none;"> <div id="video-loading" class="channelLoading${ch && ch.bg ? ' channelLoading--img' : ''}" style="--ch:${color};${bgImg}position:absolute;inset:0;border-radius:15px;z-index:2;pointer-events:none;"></div>
<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,.45));">
</div>
</div> </div>
`; `;
} }
@ -195,7 +193,6 @@ function showLoadingOverlay(ch) {
el.classList.remove('channelLoading--img'); el.classList.remove('channelLoading--img');
el.style.backgroundImage = ''; el.style.backgroundImage = '';
} }
const img = el.querySelector('img'); if (img) img.src = ch.logo;
} }
el.style.display = 'flex'; el.style.opacity = '1'; el.style.display = 'flex'; el.style.opacity = '1';
} }

BIN
public/backgrounds/ch_adria.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 KiB

After

Width:  |  Height:  |  Size: 157 KiB

BIN
public/backgrounds/ch_folx-slo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 239 KiB

After

Width:  |  Height:  |  Size: 116 KiB

BIN
public/backgrounds/ch_mt.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/backgrounds/ch_one-adria.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 KiB

After

Width:  |  Height:  |  Size: 77 KiB

BIN
public/backgrounds/ch_one.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/backgrounds/ch_zwei.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 KiB

After

Width:  |  Height:  |  Size: 103 KiB

9
public/styles.css
View File

@ -312,7 +312,14 @@ a:hover { border-bottom: 1px solid #313131; }
.channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; } .channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; }
#random-btn { color: #D91D4A; } #random-btn { color: #D91D4A; }
/* channel loading overlay — plain black, channel logo only */ /* channel loading overlay — plain black fallback */
.channelLoading { .channelLoading {
background-color: #000; background-color: #000;
} }
/* banner background per channel */
.channelLoading--img {
background-color: #000;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
}