Restore static/wc_shorts_slide.js to 0cc342c

static/wc_shorts_slide.js

@@ -0,0 +1,597 @@
+/**
+ * WC Shorts Slide — A standalone slide section ABOVE the World Cup section
+ * TikTok-style vertical feed with autoplay, titles, interaction buttons
+ * Each short = 1 fullscreen slide with scroll-snap
+ */
+(function(){
+  'use strict';
+
+  // ===== Inject CSS =====
+  if(document.getElementById('wc-shorts-slide-css')) return;
+  const style = document.createElement('style');
+  style.id = 'wc-shorts-slide-css';
+  style.textContent = `
+    /* === WC SHORTS SLIDE SECTION (above WC section) === */
+    .wc-shorts-slide-section {
+      margin: 6px 4px;
+      background: linear-gradient(135deg, #000 0%, #0a0a2e 50%, #0d1117 100%);
+      border: 1px solid #1a3a5a;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .wc-shorts-slide-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px 6px;
+    }
+    .wc-shorts-slide-header h3 {
+      font-size: 15px;
+      color: #fff;
+      font-weight: 800;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .wc-shorts-slide-header h3 .emoji { font-size: 18px; }
+    .wc-shorts-slide-header .badge-live {
+      font-size: 9px;
+      color: #e74c3c;
+      font-weight: 700;
+      animation: wc-slide-pulse 1.5s infinite;
+    }
+    @keyframes wc-slide-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
+    .wc-shorts-slide-header .view-all-btn {
+      background: #0b6bcb;
+      border: none;
+      color: #fff;
+      padding: 5px 12px;
+      border-radius: 12px;
+      font-size: 10px;
+      font-weight: 700;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .wc-shorts-slide-header .view-all-btn:active { opacity: .8; }
+
+    /* Horizontal thumbnail slider */
+    .wc-shorts-h-slider {
+      display: flex;
+      overflow-x: auto;
+      gap: 8px;
+      padding: 4px 10px 12px;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+    }
+    .wc-shorts-h-slider::-webkit-scrollbar { display: none; }
+    .wc-shorts-h-item {
+      flex: 0 0 130px;
+      scroll-snap-align: start;
+      cursor: pointer;
+      border-radius: 8px;
+      overflow: hidden;
+      background: #0a1520;
+      border: 1px solid #1a3a5a;
+      transition: border-color .2s, transform .2s;
+      position: relative;
+    }
+    .wc-shorts-h-item:hover { border-color: #0b6bcb; transform: scale(1.03); }
+    .wc-shorts-h-item:active { transform: scale(.97); }
+    .wc-shorts-h-thumb {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 9/16;
+      background: #1a2a3a;
+      overflow: hidden;
+    }
+    .wc-shorts-h-thumb img {
+      width: 100%; height: 100%; object-fit: cover;
+    }
+    .wc-shorts-h-thumb .h-play-icon {
+      position: absolute; left: 50%; top: 50%;
+      transform: translate(-50%, -50%);
+      width: 36px; height: 36px;
+      border-radius: 50%;
+      background: rgba(0,0,0,.6);
+      display: flex; align-items: center; justify-content: center;
+      color: #fff; font-size: 14px;
+    }
+    .wc-shorts-h-thumb .h-duration {
+      position: absolute; bottom: 4px; right: 4px;
+      background: rgba(0,0,0,.7);
+      font-size: 8px; color: #fff;
+      padding: 1px 4px; border-radius: 3px;
+    }
+    .wc-shorts-h-thumb .h-vtv-badge {
+      position: absolute; top: 4px; left: 4px;
+      background: rgba(11,107,203,.85);
+      font-size: 7px; color: #fff;
+      padding: 1px 5px; border-radius: 3px;
+      font-weight: 700;
+    }
+    .wc-shorts-h-info { padding: 5px 6px; }
+    .wc-shorts-h-info .h-title {
+      font-size: 9px; color: #ccc; line-height: 1.25;
+      display: -webkit-box; -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .wc-shorts-empty-slider {
+      text-align: center; padding: 20px 10px; color: #666; font-size: 12px;
+      width: 100%;
+    }
+    .wc-shorts-empty-slider .reload-btn {
+      background: #0b6bcb; border: none; color: #fff;
+      padding: 6px 16px; border-radius: 14px; font-size: 11px;
+      font-weight: 700; cursor: pointer; margin-top: 10px;
+    }
+
+    /* === FULL-SCREEN TIKTOK OVERLAY (opened from slide) === */
+    .wc-st-overlay {
+      position: fixed; inset: 0; background: #000;
+      z-index: 99999; display: none; flex-direction: column;
+    }
+    .wc-st-overlay.active { display: flex; }
+    .wc-st-top-bar {
+      position: absolute; top: 0; left: 0; right: 0;
+      z-index: 10; padding: 10px 12px;
+      display: flex; align-items: center; justify-content: space-between;
+      background: linear-gradient(rgba(0,0,0,.7), transparent);
+    }
+    .wc-st-top-bar .back-btn {
+      background: rgba(255,255,255,.15);
+      border: none; color: #fff;
+      width: 36px; height: 36px; border-radius: 50%;
+      font-size: 18px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .wc-st-top-bar .st-counter {
+      color: #fff; font-size: 12px; font-weight: 600;
+      background: rgba(0,0,0,.4); padding: 3px 10px;
+      border-radius: 10px; backdrop-filter: blur(4px);
+    }
+
+    .wc-st-feed {
+      flex: 1; overflow-y: scroll;
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+    }
+    .wc-st-feed::-webkit-scrollbar { display: none; }
+
+    .wc-st-slide {
+      height: 100vh; width: 100%;
+      scroll-snap-align: start;
+      position: relative;
+      background: #000;
+      display: flex; align-items: center; justify-content: center;
+      overflow: hidden;
+    }
+    .wc-st-slide iframe {
+      width: 100%; height: 100%; border: none; background: #000;
+    }
+
+    /* Title & info overlay */
+    .wc-st-info {
+      position: absolute; bottom: 0; left: 0; right: 65px;
+      padding: 12px 14px 18px;
+      background: linear-gradient(transparent 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.9) 100%);
+      z-index: 3; pointer-events: none;
+    }
+    .wc-st-info .st-channel {
+      display: inline-block; font-size: 9px; font-weight: 700;
+      padding: 2px 8px; border-radius: 10px; color: #fff;
+      background: #0b6bcb; margin-bottom: 8px;
+    }
+    .wc-st-info .st-title {
+      font-size: 14px; color: #fff; font-weight: 700;
+      line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.7);
+      display: -webkit-box; -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .wc-st-info .st-link {
+      display: inline-block; margin-top: 8px;
+      font-size: 11px; color: #8ab4d8; text-decoration: underline;
+      pointer-events: auto; cursor: pointer;
+    }
+
+    /* Right-side action buttons */
+    .wc-st-actions {
+      position: absolute; right: 8px; bottom: 90px;
+      display: flex; flex-direction: column; align-items: center;
+      gap: 16px; z-index: 5;
+    }
+    .wc-st-action {
+      display: flex; flex-direction: column; align-items: center; gap: 2px;
+      background: none; border: none; color: #fff; cursor: pointer;
+      font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
+    }
+    .wc-st-action .a-icon {
+      width: 46px; height: 46px; border-radius: 50%;
+      background: rgba(255,255,255,.15);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 20px; backdrop-filter: blur(4px);
+      transition: background .2s, transform .15s;
+    }
+    .wc-st-action:active .a-icon { transform: scale(.88); background: rgba(255,255,255,.3); }
+    .wc-st-action .a-count { font-size: 10px; color: #eee; font-weight: 600; }
+
+    /* Loading state */
+    .wc-st-loading {
+      position: absolute; inset: 0; display: flex;
+      flex-direction: column; align-items: center; justify-content: center;
+      gap: 12px; color: #888; font-size: 13px;
+    }
+    .wc-st-loading .spinner {
+      width: 28px; height: 28px;
+      border: 3px solid #333; border-top-color: #0b6bcb;
+      border-radius: 50%; animation: wcst-spin .8s linear infinite;
+    }
+    @keyframes wcst-spin { to { transform: rotate(360deg); } }
+
+    /* No shorts message */
+    .wc-st-nosho {
+      position: absolute; inset: 0; display: flex;
+      flex-direction: column; align-items: center; justify-content: center;
+      gap: 10px; color: #666; font-size: 14px; text-align: center; padding: 20px;
+    }
+    .wc-st-nosho .icon { font-size: 48px; }
+    .wc-st-nosho .retry-btn {
+      background: #0b6bcb; border: none; color: #fff;
+      padding: 10px 28px; border-radius: 20px;
+      font-size: 13px; font-weight: 700; cursor: pointer;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // ===== State =====
+  let _wcSCached = null;        // cached shorts data
+  let _wcSOverlayTimer = null;   // auto-advance timer
+  let _wcSManualScroll = false;
+
+  // ===== Fetch shorts =====
+  async function fetchShorts(){
+    const endpoints = [
+      '/api/shorts/wc?count=50',
+      '/api/shorts/vtvnamo?count=50',
+      '/api/shorts?channel=vtvnambo',
+    ];
+    for(const ep of endpoints){
+      try{
+        const r = await fetch(ep, {signal: AbortSignal.timeout(12000)});
+        const data = await r.json();
+        if(Array.isArray(data) && data.length > 0){
+          // Deduplicate
+          const seen = new Set(), deduped = [];
+          for(const s of data){
+            if(!seen.has(s.id)){ seen.add(s.id); deduped.push(s); }
+          }
+          if(deduped.length > 0) return deduped;
+        }
+      }catch(e){ console.warn('WC Shorts fetch failed for', ep, e); }
+    }
+    return [];
+  }
+
+  // ===== Render the HORIZONTAL SLIDE (placed above WC section) =====
+  window.renderWCSSlideSection = async function(container){
+    const section = document.createElement('div');
+    section.className = 'wc-shorts-slide-section';
+    section.id = 'wc-shorts-slide-section';
+
+    // Header
+    section.innerHTML = `
+      <div class="wc-shorts-slide-header">
+        <h3><span class="emoji">📱</span> Shorts World Cup <span class="badge-live">● LIVE</span></h3>
+        <button class="view-all-btn" id="wc-st-viewall">Xem tất cả →</button>
+      </div>
+      <div class="wc-shorts-h-slider" id="wc-st-hslider">
+        <div style="width:100%;text-align:center;padding:20px;color:#666;font-size:12px">
+          <div class="spinner" style="width:20px;height:20px;border:2px solid #333;border-top-color:#0b6bcb;border-radius:50%;animation:wcst-spin .8s linear infinite;margin:0 auto 8px"></div>
+          Đang tải shorts...
+        </div>
+      </div>
+    `;
+    container.appendChild(section);
+
+    const slider = section.querySelector('#wc-st-hslider');
+    const viewAllBtn = section.querySelector('#wc-st-viewall');
+
+    // Fetch data
+    let shorts = await fetchShorts();
+    _wcSCached = shorts;
+
+    if(!shorts || !shorts.length){
+      slider.innerHTML = `<div class="wc-shorts-empty-slider">
+        <div>📱</div><div style="margin-top:6px;color:#888">Đang cập nhật shorts...</div>
+        <button class="reload-btn" onclick="renderWCSSlideSection(document.getElementById('wc-shorts-slide-section').parentNode)">Thử lại</button>
+      </div>`;
+      viewAllBtn.onclick = () => openWCSF(shorts || [], 0);
+      return;
+    }
+
+    // Render horizontal slider items
+    let h = '';
+    shorts.forEach((s, i)=>{
+      const thumbImg = s.img || `https://i.ytimg.com/vi/${s.id}/hqdefault.jpg`;
+      h += `<div class="wc-shorts-h-item" data-idx="${i}" onclick="openWCSF(_wcSCached, ${i})">`;
+      h += `<div class="wc-shorts-h-thumb">`;
+      h += `<img src="${escHtml(thumbImg)}" loading="lazy" onerror="this.style.display='none'">`;
+      h += `<span class="h-vtv-badge">VTV Nam Bộ</span>`;
+      h += `<div class="h-play-icon">▶</div>`;
+      h += `</div>`;
+      h += `<div class="wc-shorts-h-info"><div class="h-title">${escHtml(s.title)}</div></div>`;
+      h += `</div>`;
+    });
+    slider.innerHTML = h;
+
+    viewAllBtn.onclick = () => openWCSF(shorts, 0);
+  };
+
+  // ===== FULL-SCREEN TIKTOK OVERLAY =====
+  window.openWCSF = function(shorts, startIdx){
+    if(!shorts || !shorts.length){
+      // Try to fetch fresh
+      openWCSFLoading(startIdx);
+      return;
+    }
+    buildWCSF(shorts, startIdx);
+  };
+
+  function openWCSFLoading(startIdx){
+    const overlay = getOrCreateWCSFOverlay();
+    overlay.classList.add('active');
+    overlay.innerHTML = `<div class="wc-st-loading" style="position:absolute;inset:0;background:#000;z-index:100">
+      <div class="spinner"></div>Đang tải shorts...
+    </div>`;
+    fetchShorts().then(shorts => {
+      _wcSCached = shorts;
+      if(shorts && shorts.length){
+        buildWCSF(shorts, startIdx || 0);
+      } else {
+        overlay.innerHTML = `<div class="wc-st-nosho">
+          <div class="icon">📱</div><div>Không tải được shorts</div>
+          <button class="retry-btn" onclick="openWCSF(_wcSCached, ${startIdx||0})">Thử lại</button>
+          <button class="retry-btn" style="background:#333;margin-top:4px" onclick="closeWCSF()">Đóng</button>
+        </div>`;
+      }
+    }).catch(() => {
+      overlay.innerHTML = `<div class="wc-st-nosho">
+        <div class="icon">📱</div><div>Lỗi kết nối</div>
+        <button class="retry-btn" onclick="openWCSF(_wcSCached, ${startIdx||0})">Thử lại</button>
+      </div>`;
+    });
+  }
+
+  function getOrCreateWCSFOverlay(){
+    let overlay = document.getElementById('wc-st-overlay');
+    if(!overlay){
+      overlay = document.createElement('div');
+      overlay.id = 'wc-st-overlay';
+      overlay.className = 'wc-st-overlay';
+      document.body.appendChild(overlay);
+    }
+    return overlay;
+  }
+
+  window.closeWCSF = function(){
+    const overlay = document.getElementById('wc-st-overlay');
+    if(!overlay) return;
+    overlay.classList.remove('active');
+    overlay.innerHTML = '';
+    if(_wcSOverlayTimer){ clearInterval(_wcSOverlayTimer); _wcSOverlayTimer = null; }
+    // Stop any playing iframes
+    overlay.querySelectorAll('iframe').forEach(f => { f.src = ''; });
+  };
+
+  function buildWCSF(shorts, startIdx){
+    const overlay = getOrCreateWCSFOverlay();
+    overlay.classList.add('active');
+
+    // Rotate so startIdx is first
+    const ordered = startIdx > 0
+      ? [...shorts.slice(startIdx), ...shorts.slice(0, startIdx)]
+      : [...shorts];
+    const total = ordered.length;
+
+    // Build HTML
+    let h = '';
+    // Top bar
+    h += `<div class="wc-st-top-bar">
+      <button class="back-btn" onclick="closeWCSF()">←</button>
+      <span class="st-counter" id="wc-st-counter">1/${total}</span>
+    </div>`;
+
+    // Feed
+    h += `<div class="wc-st-feed" id="wc-st-feed">`;
+
+    ordered.forEach((s, i)=>{
+      const id = s.id || '';
+      const embedSrc = `https://www.youtube.com/embed/${id}?autoplay=0&rel=0&playsinline=1&mute=1&loop=1&playlist=${id}&enablejsapi=1&origin=${encodeURIComponent(location.origin)}`;
+
+      h += `<div class="wc-st-slide" data-vid="${escHtml('wcst-'+id)}" data-idx="${i}" data-ytid="${escHtml(id)}">`;
+      // iframe — lazy loaded, autoplay handled by scroll observer
+      h += `<iframe data-yt-src="${embedSrc}" allowfullscreen allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;fullscreen"></iframe>`;
+
+      // Info overlay (title)
+      h += `<div class="wc-st-info">`;
+      h += `<span class="st-channel">VTV Nam Bộ</span>`;
+      h += `<div class="st-title">${escHtml(s.title)}</div>`;
+      h += `<span class="st-link" onclick="window.open('https://youtube.com/shorts/${escHtml(id)}','_blank')">Mở trên YouTube →</span>`;
+      h += `</div>`;
+
+      // Right action buttons
+      h += `<div class="wc-st-actions">`;
+      h += `<button class="wc-st-action" title="Xem" onclick="event.stopPropagation();wcSTTrack('${escHtml(id)}','view',${i})"><div class="a-icon">👁</div><span class="a-count" id="wcst-vc-${i}">0</span></button>`;
+      h += `<button class="wc-st-action" title="Thích" onclick="event.stopPropagation();wcSTTrack('${escHtml(id)}','like',${i})"><div class="a-icon">❤️</div><span class="a-count" id="wcst-lc-${i}">0</span></button>`;
+      h += `<button class="wc-st-action" title="Chia sẻ" onclick="event.stopPropagation();wcSTShare('${escHtml(id)}')"><div class="a-icon">📤</div></button>`;
+      h += `<button class="wc-st-action" title="YouTube" onclick="event.stopPropagation();window.open('https://youtube.com/shorts/${escHtml(id)}','_blank')"><div class="a-icon">🔗</div></button>`;
+      h += `</div>`;
+
+      h += `</div>`;
+    });
+
+    h += `</div>`; // end feed
+    overlay.innerHTML = h;
+
+    // Init autoplay on scroll
+    initWCSFAutoplay(ordered);
+
+    // Load stats
+    loadWCSFStats(ordered);
+  }
+
+  // ===== Autoplay on scroll (intersection observer) =====
+  function initWCSFAutoplay(shorts){
+    const feed = document.getElementById('wc-st-feed');
+    if(!feed) return;
+    const slides = feed.querySelectorAll('.wc-st-slide');
+    let curIdx = -1;
+    _wcSManualScroll = false;
+    let manualTimer = null;
+
+    function activate(idx){
+      if(idx === curIdx || idx < 0 || idx >= slides.length) return;
+      slides.forEach((sl, j)=>{
+        const fr = sl.querySelector('iframe');
+        if(j === idx){
+          // Load iframe if needed
+          if(fr && !fr.src && fr.dataset.ytSrc){ fr.src = fr.dataset.ytSrc; }
+          // Play (with mute to satisfy autoplay policy)
+          if(fr && fr.src){
+            setTimeout(()=>{
+              try{
+                fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'mute',args:''}),'*');
+                fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'playVideo',args:''}),'*');
+              }catch(e){}
+            }, 400);
+          }
+        } else {
+          // Pause others
+          if(fr && fr.src){
+            try{ fr.contentWindow.postMessage(JSON.stringify({event:'command',func:'pauseVideo',args:''}),'*'); }catch(e){}
+          }
+        }
+      });
+      curIdx = idx;
+      // Update counter
+      const counter = document.getElementById('wc-st-counter');
+      if(counter) counter.textContent = `${idx+1}/${shorts.length}`;
+    }
+
+    // Use IntersectionObserver for precise snap detection
+    const io = new IntersectionObserver((entries)=>{
+      if(_wcSManualScroll) return;
+      entries.forEach(entry=>{
+        if(entry.isIntersecting && entry.intersectionRatio > 0.6){
+          const idx = parseInt(entry.target.dataset.idx);
+          if(!isNaN(idx)) activate(idx);
+        }
+      });
+    }, {threshold: [0.6], root: feed});
+
+    slides.forEach(sl => io.observe(sl));
+
+    // Scroll event for manual detection (fallback)
+    let scrollTimer;
+    feed.addEventListener('scroll', ()=>{
+      _wcSManualScroll = true;
+      clearTimeout(manualTimer);
+      manualTimer = setTimeout(()=>{ _wcSManualScroll = false; }, 3000);
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(()=>{
+        const rect = feed.getBoundingClientRect();
+        const ctr = rect.top + rect.height / 2;
+        let best = -1, bestD = 1e9;
+        slides.forEach((sl,i)=>{
+          const r = sl.getBoundingClientRect();
+          const d = Math.abs(r.top + r.height/2 - ctr);
+          if(d < bestD){ bestD = d; best = i; }
+        });
+        if(best >= 0) activate(best);
+      }, 100);
+    }, {passive: true});
+
+    // Auto-advance every 12 seconds
+    if(_wcSOverlayTimer) clearInterval(_wcSOverlayTimer);
+    _wcSOverlayTimer = setInterval(()=>{
+      if(_wcSManualScroll) return;
+      if(!document.getElementById('wc-st-feed')){ clearInterval(_wcSOverlayTimer); _wcSOverlayTimer = null; return; }
+      const next = curIdx + 1;
+      if(next < slides.length){
+        slides[next].scrollIntoView({behavior:'smooth', block:'start'});
+      } else {
+        slides[0].scrollIntoView({behavior:'smooth', block:'start'});
+      }
+    }, 12000);
+
+    // Activate first after short delay
+    setTimeout(()=>{
+      if(slides.length > 0){ slides[0].scrollIntoView({behavior:'start'}); activate(0); }
+    }, 300);
+  }
+
+  // ===== Interaction tracking =====
+  window.wcSTTrack = async function(videoId, type, idx){
+    try{
+      const r = await fetch('/api/short-action', {
+        method:'POST', headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({id:videoId, action:type})
+      });
+      const j = await r.json();
+      if(j && j.stats){
+        if(idx !== undefined){
+          const vc = document.getElementById(`wcst-vc-${idx}`);
+          const lc = document.getElementById(`wcst-lc-${idx}`);
+          if(type==='view' && vc) vc.textContent = fmtNum(j.stats.views);
+          if(type==='like' && lc) lc.textContent = fmtNum(j.stats.likes);
+        }
+      }
+    }catch(e){ console.warn('Track error:', e); }
+  };
+
+  window.wcSTShare = function(videoId){
+    const url = 'https://youtube.com/shorts/' + videoId;
+    if(navigator.share){
+      navigator.share({title:'Short World Cup', url}).catch(()=>{});
+    } else {
+      navigator.clipboard.writeText(url).then(()=>alert('Đã sao chép link!')).catch(()=>{});
+    }
+  };
+
+  async function loadWCSFStats(shorts){
+    const ids = shorts.map(s=>s.id).filter(Boolean);
+    if(!ids.length) return;
+    // Batch in groups of 20
+    for(let i=0;i<ids.length;i+=20){
+      const batch = ids.slice(i,i+20).join(',');
+      try{
+        const r = await fetch('/api/short-stats?ids='+batch);
+        const j = await r.json();
+        if(j.stats){
+          shorts.forEach((s,idx)=>{
+            const st = j.stats[s.id];
+            if(st){
+              const vc = document.getElementById(`wcst-vc-${idx}`);
+              const lc = document.getElementById(`wcst-lc-${idx}`);
+              if(vc) vc.textContent = fmtNum(st.views);
+              if(lc) lc.textContent = fmtNum(st.likes);
+            }
+          });
+        }
+      }catch(e){}
+    }
+  }
+
+  function fmtNum(n){
+    if(!n) return '0';
+    if(n>=1e6) return (n/1e6).toFixed(1)+'M';
+    if(n>=1e3) return (n/1e3).toFixed(1)+'K';
+    return String(n);
+  }
+
+  // ===== Helpers =====
+  function escHtml(s){
+    return String(s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
+  }
+
+})();