Upload index.html

index.html

@@ -122,6 +122,12 @@
   .jtv-b{margin-left:auto; background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:8px; padding:5px 10px; font:inherit; font-size:12px;}
   .jtv-epg{margin-top:6px; max-height:38vh; overflow:auto; border-top:1px solid rgba(255,255,255,.2); padding-top:6px;}
   .jtv-epg div{padding:3px 0;} .jtv-epg span{display:inline-block; min-width:48px; opacity:.7;}
+  .jtv-logo{position:absolute; right:12px; bottom:56px; width:64px; max-height:40px; object-fit:contain; opacity:.75; z-index:4; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
+  .jtv-ad{position:absolute; left:12px; bottom:56px; z-index:6; background:#ffc53d; color:#1b1230; font-weight:900; font-size:11px; letter-spacing:1px; padding:3px 9px; border-radius:6px; display:none;}
+  .jtv-ad.on{display:block;}
+  .jtv-ad i{font-style:normal; font-weight:700; opacity:.8; margin-left:6px;}
+  .jtv-epg .now{color:#ffc53d; font-weight:700;}
+  .jtv-epg .k{font-size:10px; opacity:.6; margin-left:6px;}
   .rank-num{position:absolute; left:6px; bottom:0; font-size:58px; font-weight:900; line-height:1; letter-spacing:-3px; color:transparent;
     -webkit-text-stroke:2px rgba(255,255,255,.92); text-shadow:0 4px 14px rgba(0,0,0,.65); pointer-events:none; z-index:2;}
   .poster-art:has(.rank-num)::after{content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(transparent,rgba(0,0,0,.7)); pointer-events:none;}
@@ -3610,40 +3616,71 @@ function jtvNow(s, nowMs) { // kipindi cha sasa + vinavyofuata, kwa saa: kila mt
 }
 async function openJaynesTV() {
   openPlayerShell('JaynesTV');
-  const s = await jtvSchedule(true);
+  let s = await jtvSchedule(true);
   if (!s) return statusMsg('<span style="color:#ffb4ab">' + esc(T('jtv_down')) + '</span>');
   stage.style.position = 'relative';
-  stage.innerHTML = '<video id="vid" controls autoplay playsinline></video><div class="jtv-bar" id="jtvBar"></div>';
-  const v = document.getElementById('vid'), bar = document.getElementById('jtvBar');
+  stage.innerHTML = '<video id="vid" controls autoplay playsinline></video><div class="jtv-bar" id="jtvBar"></div>' +
+    '<div class="jtv-ad" id="jtvAd">TANGAZO<i></i></div>' + (s.logo ? '<img class="jtv-logo" id="jtvLogo" alt="" src="' + esc(s.logo) + '">' : '');
+  const v = document.getElementById('vid'), bar = document.getElementById('jtvBar'), adEl = document.getElementById('jtvAd');
+  const logoEl = document.getElementById('jtvLogo'); if (logoEl) logoEl.onerror = () => logoEl.remove();
   attachPlayerEnhancements(v); ensureSound(v);
-  const bad = new Set(); let cur = null, epg = false, hideT = null, last = null;
+  const bad = new Set(); let cur = null, epg = false, hideT = null, last = null, liveOn = false, hls = null;
   const hhmm = ms => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const kindOf = it => (it && it.kind) || 'program';
   const show = (ms) => { bar.classList.remove('hide'); clearTimeout(hideT); if (ms) hideT = setTimeout(() => { if (!epg) bar.classList.add('hide'); }, ms); };
+  const nextProgram = n => (n.upcoming.find(u => kindOf(u.item) === 'program') || n.upcoming[0]);
+  const stopHls = () => { if (hls) { try { hls.destroy(); } catch (_) {} hls = null; } };
+  const playSrc = (url, off) => {   // MP4 au HLS (.m3u8) — live ya studio ni HLS
+    stopHls();
+    const isHls = /\.m3u8(\?|$)/i.test(url);
+    if (isHls && !v.canPlayType('application/vnd.apple.mpegurl') && window.Hls && Hls.isSupported()) {
+      hls = new Hls(); hls.loadSource(url); hls.attachMedia(v);
+    } else v.src = isHls ? url : url + '#t=' + Math.floor(off || 0);
+    v.addEventListener('loadedmetadata', () => { if (!isHls && Math.abs(v.currentTime - off) > 3) v.currentTime = off; const p = v.play(); if (p && p.catch) p.catch(() => {}); }, { once: true });
+  };
   const draw = (n, it) => {
-    const nx = n.upcoming[0];
-    bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + esc(it.title) + '</b>' + (it.dj ? '<span class="jtv-m">' + esc(it.dj) + '</span>' : '') +
+    if (liveOn) {
+      bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + esc(s.live.title || 'Matangazo ya moja kwa moja') + '</b>' +
+        '<span class="jtv-m">Studio</span></div>';
+      adEl.classList.remove('on'); return;
+    }
+    const k = kindOf(it), nx = nextProgram(n);
+    adEl.classList.toggle('on', k === 'ad');
+    if (k === 'ad') adEl.querySelector('i').textContent = Math.max(0, Math.ceil(n.left)) + 's';
+    const nowTitle = k === 'program' ? it.title : (nx.item.title);   // wakati wa tangazo/kitambulisho: "inaanza punde"
+    bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + (k === 'program' ? '' : 'Punde: ') + esc(nowTitle) + '</b>' +
+      (k === 'program' && it.dj ? '<span class="jtv-m">' + esc(it.dj) + '</span>' : '') +
       '<button class="jtv-b" data-j="epg">' + esc(T('jtv_schedule')) + '</button></div>' +
-      '<div class="jtv-m">' + esc(T('jtv_next')) + ': ' + esc(nx.item.title) + ' · ' + hhmm(nx.at) + '</div>' +
-      (epg ? '<div class="jtv-epg">' + n.upcoming.map(u => '<div><span>' + hhmm(u.at) + '</span> ' + esc(u.item.title) + '</div>').join('') + '</div>' : '');
+      (k === 'program' ? '<div class="jtv-m">Sasa hivi · ' + T('jtv_next') + ': ' + esc(nx.item.title) + ' · ' + hhmm(nx.at) + '</div>' : '') +
+      (epg ? '<div class="jtv-epg">' +
+        (k === 'program' ? '<div class="now"><span>' + hhmm(Date.now() - (it.dur - n.left) * 1000) + '</span> ' + esc(it.title) + '<span class="k">SASA</span></div>' : '') +
+        n.upcoming.filter(u => kindOf(u.item) === 'program').map(u => '<div><span>' + hhmm(u.at) + '</span> ' + esc(u.item.title) + '</div>').join('') + '</div>' : '');
   };
   const sync = () => {
+    const liveUrl = s.live && s.live.active && s.live.url;
+    if (liveUrl) {   // studio iko hewani: hamia live yenyewe
+      if (!liveOn || cur !== liveUrl) { liveOn = true; cur = liveUrl; playSrc(liveUrl, 0); show(8000); }
+      draw(null, null); return;
+    }
+    if (liveOn) { liveOn = false; cur = null; }   // live imeisha: rudi kwenye ratiba
     const n = jtvNow(s, Date.now()), isBad = bad.has(n.idx);
     const it = isBad ? n.upcoming[0].item : n.item, off = isBad ? 0 : n.offset;   // video mbovu: cheza inayofuata kutoka mwanzo
     if (cur !== it.url) {
-      cur = it.url; v.src = it.url + '#t=' + Math.floor(off);
-      v.addEventListener('loadedmetadata', () => { if (Math.abs(v.currentTime - off) > 3) v.currentTime = off; const p = v.play(); if (p && p.catch) p.catch(() => {}); }, { once: true });
-      show(8000);
+      cur = it.url; playSrc(it.url, off);
+      if (kindOf(it) === 'program') show(8000); else bar.classList.add('hide');
     } else if (!isBad && v.readyState > 1 && Math.abs(v.currentTime - off) > 4) v.currentTime = off;   // rudi kwenye 'live'
     last = n; draw(n, it);
   };
-  bar.onclick = (e) => { if (e.target.closest('[data-j="epg"]')) { epg = !epg; draw(last, last.item); show(epg ? 0 : 6000); } };
+  const refresh = async () => { const ns = await jtvSchedule(true); if (ns) { s = ns; sync(); } };   // kuangalia live/ratiba mpya
+  bar.onclick = (e) => { if (e.target.closest('[data-j="epg"]') && last) { epg = !epg; draw(last, bad.has(last.idx) ? last.upcoming[0].item : last.item); show(epg ? 0 : 6000); } };
   v.addEventListener('ended', sync);
   v.addEventListener('play', sync);
-  v.addEventListener('seeked', () => { if (last && Math.abs(v.currentTime - last.offset) > 6) sync(); });
-  v.addEventListener('error', () => { if (last) { bad.add(last.idx); sync(); } });
+  v.addEventListener('seeked', () => { if (!liveOn && last && Math.abs(v.currentTime - last.offset) > 6) sync(); });
+  v.addEventListener('error', () => { if (liveOn) { s = Object.assign({}, s, { live: { active: false } }); cur = null; sync(); } else if (last) { bad.add(last.idx); sync(); } });
   v.addEventListener('click', () => show(6000));
-  const timer = setInterval(sync, 15000);
-  window.__jtvStop = () => { clearInterval(timer); clearTimeout(hideT); };
+  const timer = setInterval(sync, 15000), tick = setInterval(() => { if (last && !liveOn && adEl.classList.contains('on')) draw(jtvNow(s, Date.now()), jtvNow(s, Date.now()).item); }, 1000);
+  const liveTimer = setInterval(refresh, 60000);
+  window.__jtvStop = () => { clearInterval(timer); clearInterval(tick); clearInterval(liveTimer); clearTimeout(hideT); stopHls(); };
   sync();
 }