Update index.html

index.html

@@ -49,6 +49,25 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 
 /* ===== 🔴 P&D LIVE NEWS ===== */
 .live-news{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#050510;}
+
+/* ── Anchor Video + News 2-split ── */
+.ln-split{display:flex;flex:1;overflow:hidden;min-height:0;}
+.ln-video-col{width:340px;flex-shrink:0;position:relative;background:#000;display:flex;flex-direction:column;border-right:2px solid rgba(255,0,0,0.25);}
+.ln-video-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#000;}
+.ln-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 0.8s ease;}
+.ln-video-wrap video.fade-out{opacity:0;}
+.ln-video-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,0.85));pointer-events:none;}
+.ln-video-anchor-name{font-size:12px;font-weight:800;color:#ff5252;letter-spacing:1px;text-transform:uppercase;}
+.ln-video-clip-info{font-size:10px;color:rgba(255,255,255,0.6);margin-top:2px;font-family:'JetBrains Mono',monospace;}
+.ln-video-live-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:rgba(255,0,0,0.9);padding:3px 10px;border-radius:4px;font-size:10px;font-weight:900;color:#fff;letter-spacing:1px;animation:breakPulse 2s infinite;}
+.ln-video-live-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite;}
+.ln-video-progress{position:absolute;bottom:0;left:0;height:3px;background:#ff0000;transition:width 0.3s linear;z-index:2;}
+.ln-video-meta{padding:10px 12px;background:#0a0a18;border-top:1px solid rgba(255,255,255,0.06);flex:1;display:flex;flex-direction:column;gap:6px;overflow-y:auto;}
+.ln-video-indicator{display:flex;gap:6px;justify-content:center;padding:4px 0;}
+.ln-video-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all 0.3s;cursor:pointer;}
+.ln-video-dot.active{background:#ff0000;box-shadow:0 0 8px rgba(255,0,0,0.6);transform:scale(1.3);}
+.ln-video-studio-info{font-size:11px;color:rgba(255,255,255,0.5);text-align:center;line-height:1.5;}
+.ln-news-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
 .ln-breaking{background:linear-gradient(90deg,#cc0000,#990000);padding:0;overflow:hidden;flex-shrink:0;height:36px;display:flex;align-items:center;border-bottom:2px solid #ff0000;}
 .ln-break-label{background:#ff0000;color:#fff;font-size:11px;font-weight:900;padding:8px 14px;white-space:nowrap;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;animation:breakPulse 2s infinite;}
 @keyframes breakPulse{0%,100%{background:#ff0000}50%{background:#cc0000}}
@@ -124,6 +143,10 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 .ln-no-stories .big{font-size:48px;margin-bottom:12px;}
 
 @media(max-width:768px){
+    .ln-split{flex-direction:column;}
+    .ln-video-col{width:100%;border-right:none;border-bottom:2px solid rgba(255,0,0,0.25);}
+    .ln-video-wrap{aspect-ratio:16/9;max-height:200px;}
+    .ln-video-meta{display:none;}
     .ln-studio{flex-direction:column;padding:12px;}
     .ln-anchor-panel{width:100%;flex-direction:row;gap:10px;padding:8px 12px;}
     .ln-anchor-emoji{font-size:32px;margin:0;}
@@ -769,38 +792,79 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 <!-- 🔴 P&D LIVE NEWS -->
 <div class="panel active" role="tabpanel" id="panel-livenews">
 <div class="live-news">
-    <!-- BREAKING NEWS TICKER -->
+    <!-- BREAKING NEWS TICKER (full width top) -->
     <div class="ln-breaking" id="lnBreaking" style="display:none">
         <div class="ln-break-label">🔴 BREAKING</div>
         <div class="ln-break-scroll"><div class="ln-break-track" id="lnBreakTrack"></div></div>
     </div>
-    <!-- CONTROLS -->
-    <div class="ln-controls">
-        <span style="font-size:14px;font-weight:800;color:#ff0000;display:flex;align-items:center;gap:6px"><span class="dot" style="width:8px;height:8px;border-radius:50%;background:#ff0000;animation:pulse 1.5s infinite"></span> P&D LIVE</span>
-        <div style="flex:1"></div>
-        <button class="ln-ctrl-btn active" onclick="setLiveFilter('all')" data-f="all">All</button>
-        <button class="ln-ctrl-btn" onclick="setLiveFilter('critical')" data-f="critical">🔴 Critical</button>
-        <button class="ln-ctrl-btn" onclick="setLiveFilter('alert')" data-f="alert">🟡 Alert</button>
-        <button class="ln-ctrl-btn" onclick="setLiveFilter('liquidation')" data-f="liquidation">💀 Liquidations</button>
-        <button class="ln-ctrl-btn" onclick="setLiveFilter('sec')" data-f="sec">🚨 SEC</button>
-        <button onclick="loadLiveNews()" style="padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--text);font-size:12px;cursor:pointer" title="Refresh">🔄</button>
-    </div>
-    <!-- COUNTERS -->
-    <div class="ln-counters" id="lnCounters">
-        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--accent2)">—</div><div class="ln-counter-lbl">Open Positions</div></div>
-        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--gold)">⚡—</div><div class="ln-counter-lbl">GPU at Risk</div></div>
-        <div class="ln-counter"><div class="ln-counter-val" style="color:var(--red)">💀 —</div><div class="ln-counter-lbl">Liquidations 24h</div></div>
-        <div class="ln-counter"><div class="ln-counter-val" style="color:#ff8a80">🚨 —</div><div class="ln-counter-lbl">SEC Actions 24h</div></div>
-    </div>
-    <!-- MVP / VILLAIN -->
-    <div class="ln-mvp-row" id="lnMvpRow" style="display:none"></div>
-    <!-- MAIN STUDIO (featured story with anchor) -->
-    <div class="ln-main-scroll">
-        <div class="ln-studio" id="lnStudio" style="display:none"></div>
-        <!-- STORY FEED -->
-        <div class="ln-section-title" id="lnFeedTitle">📡 LIVE FEED — Loading...</div>
-        <div class="ln-feed" id="lnFeed">
-            <div class="ln-no-stories"><div class="big">📡</div><div style="font-size:16px;font-weight:700;margin-bottom:6px">Tuning into P&D LIVE...</div><div style="font-size:12px">AI anchors are compiling the latest drama</div></div>
+    <!-- 2-SPLIT: Video Left + News Right -->
+    <div class="ln-split">
+        <!-- ===== LEFT: ANCHOR VIDEO ===== -->
+        <div class="ln-video-col">
+            <div class="ln-video-wrap">
+                <video id="lnVideo" muted playsinline autoplay loop></video>
+                <div class="ln-video-live-badge"><span class="dot"></span>ON AIR</div>
+                <div class="ln-video-progress" id="lnVideoProgress"></div>
+                <div class="ln-video-overlay">
+                    <div class="ln-video-anchor-name" id="lnVideoAnchorName">P&D LIVE ANCHOR</div>
+                    <div class="ln-video-clip-info" id="lnVideoClipInfo">Clip 1/4 · Studio Broadcast</div>
+                </div>
+            </div>
+            <div class="ln-video-meta">
+                <div class="ln-video-indicator" id="lnVideoIndicator">
+                    <div class="ln-video-dot active" data-clip="0" onclick="switchVideoClip(0)"></div>
+                    <div class="ln-video-dot" data-clip="1" onclick="switchVideoClip(1)"></div>
+                    <div class="ln-video-dot" data-clip="2" onclick="switchVideoClip(2)"></div>
+                    <div class="ln-video-dot" data-clip="3" onclick="switchVideoClip(3)"></div>
+                </div>
+                <div class="ln-video-studio-info">
+                    🎬 P&D LIVE STUDIO<br>
+                    <span style="color:rgba(255,255,255,0.35)">4 Camera Angles · Auto Rotation</span>
+                </div>
+                <!-- Mini counters under video -->
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:auto;">
+                    <div style="background:rgba(255,255,255,0.03);border-radius:6px;padding:8px;text-align:center">
+                        <div style="font-size:16px;font-weight:900;color:var(--red);font-family:'JetBrains Mono',monospace" id="lnVidLiq">💀 0</div>
+                        <div style="font-size:9px;color:var(--muted);margin-top:2px">LIQUIDATIONS</div>
+                    </div>
+                    <div style="background:rgba(255,255,255,0.03);border-radius:6px;padding:8px;text-align:center">
+                        <div style="font-size:16px;font-weight:900;color:#ff8a80;font-family:'JetBrains Mono',monospace" id="lnVidSec">🚨 0</div>
+                        <div style="font-size:9px;color:var(--muted);margin-top:2px">SEC ACTIONS</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ===== RIGHT: NEWS CONTENT ===== -->
+        <div class="ln-news-col">
+            <!-- CONTROLS -->
+            <div class="ln-controls">
+                <span style="font-size:14px;font-weight:800;color:#ff0000;display:flex;align-items:center;gap:6px"><span class="dot" style="width:8px;height:8px;border-radius:50%;background:#ff0000;animation:pulse 1.5s infinite"></span> P&D LIVE</span>
+                <div style="flex:1"></div>
+                <button class="ln-ctrl-btn active" onclick="setLiveFilter('all')" data-f="all">All</button>
+                <button class="ln-ctrl-btn" onclick="setLiveFilter('critical')" data-f="critical">🔴 Critical</button>
+                <button class="ln-ctrl-btn" onclick="setLiveFilter('alert')" data-f="alert">🟡 Alert</button>
+                <button class="ln-ctrl-btn" onclick="setLiveFilter('liquidation')" data-f="liquidation">💀 Liquidations</button>
+                <button class="ln-ctrl-btn" onclick="setLiveFilter('sec')" data-f="sec">🚨 SEC</button>
+                <button onclick="loadLiveNews()" style="padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--text);font-size:12px;cursor:pointer" title="Refresh">🔄</button>
+            </div>
+            <!-- COUNTERS -->
+            <div class="ln-counters" id="lnCounters">
+                <div class="ln-counter"><div class="ln-counter-val" style="color:var(--accent2)">—</div><div class="ln-counter-lbl">Open Positions</div></div>
+                <div class="ln-counter"><div class="ln-counter-val" style="color:var(--gold)">⚡—</div><div class="ln-counter-lbl">GPU at Risk</div></div>
+                <div class="ln-counter"><div class="ln-counter-val" style="color:var(--red)">💀 —</div><div class="ln-counter-lbl">Liquidations 24h</div></div>
+                <div class="ln-counter"><div class="ln-counter-val" style="color:#ff8a80">🚨 —</div><div class="ln-counter-lbl">SEC Actions 24h</div></div>
+            </div>
+            <!-- MVP / VILLAIN -->
+            <div class="ln-mvp-row" id="lnMvpRow" style="display:none"></div>
+            <!-- MAIN STUDIO (featured story with anchor) -->
+            <div class="ln-main-scroll">
+                <div class="ln-studio" id="lnStudio" style="display:none"></div>
+                <!-- STORY FEED -->
+                <div class="ln-section-title" id="lnFeedTitle">📡 LIVE FEED — Loading...</div>
+                <div class="ln-feed" id="lnFeed">
+                    <div class="ln-no-stories"><div class="big">📡</div><div style="font-size:16px;font-weight:700;margin-bottom:6px">Tuning into P&D LIVE...</div><div style="font-size:12px">AI anchors are compiling the latest drama</div></div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -1189,7 +1253,7 @@ function requireLogin(action){
 }
 
 let _indicesInterval = null;
-function initApp(){loadLiveNews();loadIndices();if(_indicesInterval)clearInterval(_indicesInterval);_indicesInterval=setInterval(loadIndices,120000);connectSSE();}
+function initApp(){initVideoPlayer();loadLiveNews();loadIndices();if(_indicesInterval)clearInterval(_indicesInterval);_indicesInterval=setInterval(loadIndices,120000);connectSSE();}
 
 async function loadProfile(){if(!U)return;try{const r=await(await fetch(`/api/user/profile?email=${U.email}`)).json();if(r.gpu_dollars!==undefined)document.getElementById('hGpu').textContent=`⚡ ${r.gpu_dollars.toLocaleString()} GPU`;}catch(e){}}
 
@@ -2703,6 +2767,88 @@ async function fetchNpcProfile(agentId){
 }
 
 /* ====== 🔴 P&D LIVE NEWS ====== */
+
+/* ── Video Clip Rotation Engine ── */
+const LN_VIDEO_CLIPS = [
+    {src:'/videos/V1.mp4', label:'Studio Broadcast', anchor:'LIVE ANCHOR'},
+    {src:'/videos/V2.mp4', label:'Breaking Alert', anchor:'ALERT DESK'},
+    {src:'/videos/V3.mp4', label:'Production Floor', anchor:'FIELD REPORT'},
+    {src:'/videos/V4.mp4', label:'Newsroom Command', anchor:'NEWSROOM'},
+];
+let lnVideoIdx = 0, lnVideoRotateTimer = null, lnVideoProgressTimer = null, lnVideoReady = false;
+
+function initVideoPlayer(){
+    const vid = document.getElementById('lnVideo');
+    if(!vid) return;
+    // Load first clip
+    vid.src = LN_VIDEO_CLIPS[0].src;
+    vid.muted = true;
+    vid.playsInline = true;
+    vid.load();
+    // On canplay, start playback
+    vid.addEventListener('canplay', function onFirstPlay(){
+        vid.play().catch(()=>{});
+        lnVideoReady = true;
+        vid.removeEventListener('canplay', onFirstPlay);
+    });
+    // On ended (if not loop), go to next clip
+    vid.addEventListener('ended', ()=> switchVideoClip((lnVideoIdx+1) % LN_VIDEO_CLIPS.length));
+    // Auto-rotate every 15s regardless of video length
+    startVideoRotation();
+    // Progress bar
+    vid.addEventListener('timeupdate', updateVideoProgress);
+    updateVideoIndicator(0);
+    updateVideoLabel(0);
+}
+
+function startVideoRotation(){
+    if(lnVideoRotateTimer) clearInterval(lnVideoRotateTimer);
+    lnVideoRotateTimer = setInterval(()=>{
+        if(cTab !== 'livenews') return; // only rotate when visible
+        switchVideoClip((lnVideoIdx + 1) % LN_VIDEO_CLIPS.length);
+    }, 15000);
+}
+
+function switchVideoClip(idx){
+    const vid = document.getElementById('lnVideo');
+    if(!vid || idx === lnVideoIdx && lnVideoReady) return;
+    lnVideoIdx = idx;
+    // Fade out
+    vid.classList.add('fade-out');
+    setTimeout(()=>{
+        vid.src = LN_VIDEO_CLIPS[idx].src;
+        vid.load();
+        vid.play().then(()=>{
+            vid.classList.remove('fade-out');
+        }).catch(()=> vid.classList.remove('fade-out'));
+    }, 400);
+    updateVideoIndicator(idx);
+    updateVideoLabel(idx);
+    // Reset rotation timer on manual switch
+    startVideoRotation();
+}
+
+function updateVideoIndicator(idx){
+    const dots = document.querySelectorAll('.ln-video-dot');
+    dots.forEach((d,i)=> d.classList.toggle('active', i===idx));
+}
+
+function updateVideoLabel(idx){
+    const clip = LN_VIDEO_CLIPS[idx];
+    const nameEl = document.getElementById('lnVideoAnchorName');
+    const infoEl = document.getElementById('lnVideoClipInfo');
+    if(nameEl) nameEl.textContent = clip.anchor;
+    if(infoEl) infoEl.textContent = `Clip ${idx+1}/${LN_VIDEO_CLIPS.length} · ${clip.label}`;
+}
+
+function updateVideoProgress(){
+    const vid = document.getElementById('lnVideo');
+    const bar = document.getElementById('lnVideoProgress');
+    if(!vid || !bar || !vid.duration) return;
+    const pct = (vid.currentTime / vid.duration) * 100;
+    bar.style.width = pct + '%';
+}
+
 const LN_ANCHORS = {
     chaos: {name:'ChaosReporter',emoji:'😈',color:'#ff5252',gradient:'linear-gradient(135deg,#2a0a0a,#1a0520)',tag:'CHAOTIC',tagBg:'rgba(255,82,82,0.2)'},
     data: {name:'DataDiva',emoji:'📊',color:'#00e5ff',gradient:'linear-gradient(135deg,#0a1a2a,#0a0a30)',tag:'RATIONAL',tagBg:'rgba(0,229,255,0.2)'},
@@ -2763,6 +2909,8 @@ function renderLiveBreaking(items){
     track.innerHTML = doubled.map(t=>`<span class="ln-break-item">${esc(t)}</span>`).join('');
     // Adjust animation duration based on content
     track.style.animationDuration = Math.max(20, items.length * 8) + 's';
+    // Context-aware: Switch to Alert clip (Clip 2) during breaking news
+    if(items.length >= 2 && lnVideoIdx !== 1) switchVideoClip(1);
 }
 
 function renderLiveCounters(c){
@@ -2778,6 +2926,11 @@ function renderLiveCounters(c){
         <div class="ln-counter"><div class="ln-counter-val" style="color:var(--red)">💀 ${c.liquidations_24h||0}</div><div class="ln-counter-lbl">Liquidations 24h</div><div style="font-size:10px;color:var(--red);margin-top:2px">${(c.liquidated_gpu_24h||0).toLocaleString()} GPU lost</div></div>
         <div class="ln-counter"><div class="ln-counter-val" style="color:#ff8a80">🚨 ${c.sec_violations_24h||0}</div><div class="ln-counter-lbl">SEC Actions 24h</div><div style="font-size:10px;color:var(--muted);margin-top:2px">⛓️${c.sec_active_suspensions||0} suspended</div></div>
     `;
+    // Sync mini counters under video
+    const vLiq = document.getElementById('lnVidLiq');
+    const vSec = document.getElementById('lnVidSec');
+    if(vLiq) vLiq.textContent = `💀 ${c.liquidations_24h||0}`;
+    if(vSec) vSec.textContent = `🚨 ${c.sec_violations_24h||0}`;
 }
 
 function renderLiveMvp(mvp, villain){