static/live_mode.js

// === INJECT CSS FIX with cache-bust + inline backup ===
(function(){
  // Method 1: link with cache-bust
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '/static/fm_fix.css?v=' + Date.now();
  document.head.appendChild(link);

  // Method 2: inline critical CSS directly (guaranteed, no cache) — highest priority
  const style = document.createElement('style');
  style.textContent = `
.featured-match{margin:6px 4px!important;background:linear-gradient(135deg,#1a2a1f,#0d1117)!important;border:1px solid #2d8659!important;border-radius:10px!important;padding:12px!important;cursor:pointer!important}
.fm-league{text-align:center!important;color:#5cb87a!important;font-size:9px!important;font-weight:700!important;text-transform:uppercase!important;display:block!important}
.fm-teams{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:6px!important}
.fm-team{flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important}
.fm-team img{width:32px!important;height:32px!important;object-fit:contain!important}
.fm-team span{font-size:10px!important;color:#ccc!important;text-align:center!important}
.fm-score{font-size:22px!important;font-weight:900!important;min-width:60px!important;text-align:center!important;color:#fff!important}
.fm-status{text-align:center!important;margin-top:6px!important;font-size:9px!important;color:#e74c3c!important;font-weight:700!important}
.fm-status.upcoming{color:#f0c040!important}
.hashtag-src-item{display:flex!important;gap:8px!important;padding:8px!important;background:#202020!important;border-radius:8px!important;margin:6px 0!important;cursor:pointer!important}
.hashtag-src-img{flex:0 0 80px!important;aspect-ratio:16/9!important;background:#333!important;border-radius:6px!important;overflow:hidden!important}
.hashtag-src-img img{width:100%!important;height:100%!important;object-fit:cover!important}
.hashtag-src-text{flex:1!important;min-width:0!important}
.hashtag-src-title{font-size:12px!important;font-weight:700!important;color:#eee!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
.hashtag-src-via{font-size:10px!important;color:#888!important;margin-top:2px!important}`;
  document.head.appendChild(style);

  // Load rewrite fix
  const script = document.createElement('script');
  script.src = '/static/rewrite_fix.js?v=' + Date.now();
  document.body.appendChild(script);
})();

let _liveInterval = null;
let _liveTick = 0;
function startHomepageLive() {
  if (_liveInterval) clearInterval(_liveInterval);
  setTimeout(addLiveBadges, 2000);
  _liveInterval = setInterval(async () => {
    if (!document.getElementById('view-home')?.classList.contains('active')) return;
    _liveTick++;
    const lsTab = document.querySelector('.ls-tab.active');
    if (lsTab && lsTab.dataset.tab) loadLivescore(lsTab.dataset.tab);
    try {
      const f = await fetch('/api/livescore/featured').then(r => r.json()).catch(() => null);
      if (f && f.home) {
        const el = document.querySelector('.featured-match');
        if (el) {
          const sc = f.status === 'live' ? '' : 'upcoming';
          const st = f.status === 'live' ? `🔴 ${f.minute || 'LIVE'}` : `⏰ ${f.time}`;
          el.innerHTML = `<div class="fm-league">${f.league}</div><div class="fm-teams"><div class="fm-team"><img src="${f.home_logo}" onerror="this.style.display='none'"><span>${f.home}</span></div><div class="fm-score">${f.score || 'VS'}</div><div class="fm-team"><img src="${f.away_logo}" onerror="this.style.display='none'"><span>${f.away}</span></div></div><div class="fm-status ${sc}">${st}</div>`;
        }
      }
    } catch(e) {}
    if (_liveTick % 3 === 0) refreshHashtag();
    if (_liveTick % 5 === 0) loadHotTopics();
    pulseLiveBadges();
  }, 60000);
}
function addLiveBadges() {
  document.querySelectorAll('.ls-header h3, .slider-header .slider-label').forEach(el => {
    if (!el.querySelector('.live-dot')) {
      const dot = document.createElement('span');
      dot.className = 'live-dot';
      dot.style.cssText = 'font-size:8px;color:#e74c3c;margin-left:6px;animation:wc-pulse 1.5s infinite';
      dot.textContent = '● LIVE';
      el.appendChild(dot);
    }
  });
}
function pulseLiveBadges() {
  document.querySelectorAll('.live-dot').forEach(d => {
    d.style.opacity = '1';
    setTimeout(() => { d.style.opacity = '0.4'; }, 500);
    setTimeout(() => { d.style.opacity = '1'; }, 1000);
  });
}
function refreshHashtag() {
  if (typeof _htTopic !== 'undefined' && _htTopic) {
    const box = document.getElementById('hashtag-box');
    if (box && box.innerHTML.length > 50) {
      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(_htTopic)}&page=0`)
        .then(r => r.json())
        .then(j => {
          const sources = j.sources || [];
          if (!sources.length) return;
          const list = document.getElementById('ht-list');
          if (!list) return;
          let h = '';
          sources.forEach((s, i) => {
            h += `<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via || '')}</div></div></div>`;
          });
          list.innerHTML = h;
          sources.forEach((s, i) => {
            if (!s.url) return;
            fetch('/api/article?url=' + encodeURIComponent(s.url)).then(r => r.json()).then(d => {
              if (d && (d.og_image || d.img)) {
                const el = document.getElementById('ht-img-' + i);
                if (el) el.innerHTML = `<img src="${esc(d.og_image || d.img)}" onerror="this.style.display='none'">`;
              }
            }).catch(() => {});
          });
        }).catch(() => {});
    }
  }
}
setTimeout(startHomepageLive, 6000);