Odstrani LIVE bug in Bauchbinde iz playerja; naslov ostane v control baru
This commit is contained in:
parent
200345a050
commit
ed2059886e
@ -40,18 +40,10 @@
|
|||||||
.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; }
|
.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; }
|
||||||
.stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; }
|
.stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; }
|
||||||
.scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; }
|
.scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; }
|
||||||
.bug-live { position: absolute; top: 18px; left: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(10,10,10,0.78); color: #fff; padding: 7px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
|
|
||||||
.bug-live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: fx-pulse 1s infinite; }
|
|
||||||
.msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
|
.msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
|
||||||
.msg.hidden { display:none; }
|
.msg.hidden { display:none; }
|
||||||
.spinner { width:38px; height:38px; border:3px solid rgba(255,255,255,0.25); border-top-color:var(--akzent); border-radius:50%; animation: spin 0.9s linear infinite; }
|
.spinner { width:38px; height:38px; border:3px solid rgba(255,255,255,0.25); border-top-color:var(--akzent); border-radius:50%; animation: spin 0.9s linear infinite; }
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
.bauchbinde { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 10; display: flex; align-items: stretch; }
|
|
||||||
.bauchbinde.hidden { display:none; }
|
|
||||||
.bb-tag { background: var(--akzent); color: #fff; padding: 12px 18px; font-weight: 800; font-size: clamp(13px,1.6vw,17px); letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; white-space: nowrap; }
|
|
||||||
.bb-body { flex: 1; min-width: 0; background: rgba(10,10,10,0.78); padding: 10px 16px 9px; }
|
|
||||||
.bb-title { font-weight: 700; font-size: clamp(15px,2.4vw,24px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
||||||
.bb-sub { margin-top: 5px; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #D0D0D0; }
|
|
||||||
.ctrl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #0A0A0A; border: 1px solid rgba(255,255,255,0.14); border-top: 0; padding: 12px 16px; }
|
.ctrl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #0A0A0A; border: 1px solid rgba(255,255,255,0.14); border-top: 0; padding: 12px 16px; }
|
||||||
.vu { display: flex; gap: 3px; align-items: flex-end; height: 30px; flex: none; }
|
.vu { display: flex; gap: 3px; align-items: flex-end; height: 30px; flex: none; }
|
||||||
.vu span { width: 3px; height: 100%; background: var(--akzent); transform-origin: bottom; animation: fx-vu 0.7s infinite ease-in-out alternate; }
|
.vu span { width: 3px; height: 100%; background: var(--akzent); transform-origin: bottom; animation: fx-vu 0.7s infinite ease-in-out alternate; }
|
||||||
@ -84,17 +76,7 @@
|
|||||||
<video id="v" autoplay muted playsinline tabindex="-1" disablepictureinpicture
|
<video id="v" autoplay muted playsinline tabindex="-1" disablepictureinpicture
|
||||||
controlsList="nodownload nofullscreen noremoteplayback noplaybackrate"></video>
|
controlsList="nodownload nofullscreen noremoteplayback noplaybackrate"></video>
|
||||||
|
|
||||||
<div class="bug-live"><span class="d"></span> Live</div>
|
|
||||||
|
|
||||||
<div class="msg" id="msg"><div class="spinner"></div><div>Stream wird geladen…</div></div>
|
<div class="msg" id="msg"><div class="spinner"></div><div>Stream wird geladen…</div></div>
|
||||||
|
|
||||||
<div class="bauchbinde hidden" id="bauchbinde">
|
|
||||||
<div class="bb-tag">Folx</div>
|
|
||||||
<div class="bb-body">
|
|
||||||
<div class="bb-title" id="bbTitle">Folx Music Television</div>
|
|
||||||
<div class="bb-sub" id="bbSub">Live · Folx Music Television</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ctrl">
|
<div class="ctrl">
|
||||||
@ -167,16 +149,15 @@
|
|||||||
document.getElementById('btnFs').addEventListener('click', function(){ var f=document.getElementById('playerFrame'); if(document.fullscreenElement){ document.exitFullscreen(); } else { (f.requestFullscreen||f.webkitRequestFullscreen).call(f); } });
|
document.getElementById('btnFs').addEventListener('click', function(){ var f=document.getElementById('playerFrame'); if(document.fullscreenElement){ document.exitFullscreen(); } else { (f.requestFullscreen||f.webkitRequestFullscreen).call(f); } });
|
||||||
|
|
||||||
// Now-Playing poll
|
// Now-Playing poll
|
||||||
var bb = document.getElementById('bauchbinde'), bbT = document.getElementById('bbTitle'), bbS = document.getElementById('bbSub'), nowT = document.getElementById('nowTitle');
|
var nowT = document.getElementById('nowTitle');
|
||||||
var lastSong = null;
|
var lastSong = null;
|
||||||
function applyNP(np){
|
function applyNP(np){
|
||||||
var label = null, sub = 'Live · Folx Music Television';
|
var label = null;
|
||||||
if (np.kind === 'song') { label = np.label; lastSong = np.label; sub = 'Musikvideo · Folx'; }
|
if (np.kind === 'song') { label = np.label; lastSong = np.label; }
|
||||||
else if (np.kind === 'genius') { label = 'GENIUS'; sub = 'Teleshopping · Folx'; }
|
else if (np.kind === 'genius') { label = 'GENIUS'; }
|
||||||
else if (np.kind === 'werbung') { label = 'Werbung'; sub = 'Werbung · Folx'; }
|
else if (np.kind === 'werbung') { label = 'Werbung'; }
|
||||||
else { label = lastSong; sub = 'Live · Folx Music Television'; } // skip -> keep last song
|
else { label = lastSong; } // skip (jingle/pasica) -> obdrzi zadnji komad
|
||||||
if (label) { bbT.textContent = label; bbS.textContent = sub; nowT.textContent = label; bb.classList.remove('hidden'); }
|
nowT.textContent = label || 'Folx Music Television';
|
||||||
else { bb.classList.add('hidden'); nowT.textContent = 'Folx Music Television'; }
|
|
||||||
}
|
}
|
||||||
function pollNP(){
|
function pollNP(){
|
||||||
fetch('/api/now-playing', { cache:'no-store' }).then(function(r){ return r.json(); }).then(function(d){ if(d && d.ok) applyNP(d); }).catch(function(){});
|
fetch('/api/now-playing', { cache:'no-store' }).then(function(r){ return r.json(); }).then(function(d){ if(d && d.ok) applyNP(d); }).catch(function(){});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user