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

Folx: kubisticna umetniska podlaga za logo na playerju

Browse Source
This commit is contained in:
OpenClaw Agent 2026-07-01 17:35:59 +00:00
parent 5d02917aca
commit eacfab2078
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/app.js
View File

@ -8,7 +8,7 @@ const JW_POSTER = id => `https://cdn.jwplayer.com/v2/media/${id}/poster.jpg?widt
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: '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: '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: '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: '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' },
@ -162,11 +162,12 @@ function channelOverlayBg(color) {
function showVideoPlayer(ch) {
const color = ch ? ch.color : '#000';
const logo = ch ? ch.logo : '';
const bgImg = ch && ch.bg ? `background-image:url('${ch.bg}');background-size:cover;background-position:center;` : '';
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" class="channelLoading" style="--ch:${color};position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:15px;z-index:2;pointer-events:none;">
<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,.25));">
<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;">
<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>
`;
@ -183,7 +184,19 @@ function hideLoadingOverlay() {
function showLoadingOverlay(ch) {
const el = document.getElementById('video-loading');
if (!el) return;
if (ch) { el.style.setProperty('--ch', ch.color); const img = el.querySelector('img'); if (img) img.src = ch.logo; }
if (ch) {
el.style.setProperty('--ch', ch.color);
if (ch.bg) {
el.classList.add('channelLoading--img');
el.style.backgroundImage = `url('${ch.bg}')`;
el.style.backgroundSize = 'cover';
el.style.backgroundPosition = 'center';
} else {
el.classList.remove('channelLoading--img');
el.style.backgroundImage = '';
}
const img = el.querySelector('img'); if (img) img.src = ch.logo;
}
el.style.display = 'flex'; el.style.opacity = '1';
}

BIN
public/backgrounds/ch_mt.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

9
public/styles.css
View File

@ -334,3 +334,12 @@ a:hover { border-bottom: 1px solid #313131; }
linear-gradient(115deg, transparent 0 74%, rgba(0,0,0,.30) 74% 77%, transparent 77%);
pointer-events: none;
}
/* when a real artwork background is used, drop the generated pattern and
lay a soft vignette so the channel logo stays readable on top. */
.channelLoading--img { background-color: #1a0509; }
.channelLoading--img::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}