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

Loading overlay: crno ozadje, samo logo postaje (odstranjene slike in vzorec)

Browse Source
This commit is contained in:
OpenClaw Agent 2026-07-02 08:20:40 +00:00
parent 9d8c2502b3
commit 0c0ee4fbe5
2 changed files with 8 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
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', bg: '/backgrounds/ch_one.jpg' }, { 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', bg: '/backgrounds/ch_zwei.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: '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: '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: '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: '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', bg: '/backgrounds/ch_folx-slo.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: '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' }, { 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' },
]; ];
// Coloured dot per channel (colour taken from the channel's brand colour). // Coloured dot per channel (colour taken from the channel's brand colour).

37
public/styles.css
View File

@ -312,40 +312,7 @@ 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 — monolithic pattern in the channel's colour */ /* channel loading overlay — plain black, channel logo only */
.channelLoading { .channelLoading {
background-color: var(--ch, #000); background-color: #000;
background-image:
linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,.10) 100%),
repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, rgba(0,0,0,0) 2px 46px),
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 92px),
radial-gradient(120% 130% at 18% 12%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
radial-gradient(140% 140% at 88% 92%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
background-blend-mode: overlay, normal, normal, screen, multiply;
overflow: hidden;
}
.channelLoading::before {
content: "";
position: absolute;
inset: -20%;
background:
linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,.35) 42% 44%, transparent 44%),
linear-gradient(115deg, transparent 0 60%, rgba(255,255,255,.06) 60% 61%, transparent 61%),
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/blend and
lay a soft vignette so the channel logo stays readable on top. */
.channelLoading--img {
background-color: #1a0509;
background-blend-mode: normal !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
}
.channelLoading--img::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 100%);
} }