Update index.html

index.html

@@ -61,6 +61,8 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 .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-mute-btn{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,0.65);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all 0.2s;line-height:1;}
+.ln-mute-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.1);}
 .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;}
@@ -802,12 +804,13 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
         <!-- ===== LEFT: ANCHOR VIDEO ===== -->
         <div class="ln-video-col">
             <div class="ln-video-wrap">
-                <video id="lnVideo" playsinline autoplay loop></video>
+                <video id="lnVideo" playsinline autoplay></video>
                 <div class="ln-video-live-badge"><span class="dot"></span>ON AIR</div>
+                <button id="lnMuteBtn" class="ln-mute-btn" onclick="toggleVideoMute()" title="Toggle Sound">🔊</button>
                 <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">NEWSROOM · Live Broadcast</div>
+                    <div class="ln-video-clip-info" id="lnVideoClipInfo">Newsroom Command · Live Broadcast</div>
                 </div>
             </div>
             <div class="ln-video-meta">
@@ -2774,34 +2777,36 @@ async function fetchNpcProfile(agentId){
 
 /* ====== 🔴 P&D LIVE NEWS ====== */
 
-/* ── Video Player: V4 Single Clip with Sound ── */
+/* ── Video Player: V4 ↔ V5 Continuous Loop with Sound ── */
 const LN_VIDEO_CLIPS = [
     {src:'/videos/V4.mp4', label:'Newsroom Command', anchor:'NEWSROOM'},
+    {src:'/videos/V5.mp4', label:'Live Studio', anchor:'LIVE STUDIO'},
 ];
 let lnVideoIdx = 0, lnVideoRotateTimer = null, lnVideoProgressTimer = null, lnVideoReady = false;
 
 function initVideoPlayer(){
     const vid = document.getElementById('lnVideo');
     if(!vid) return;
-    // Load V4 clip only
+    // Load first clip (V4)
     vid.src = LN_VIDEO_CLIPS[0].src;
     vid.muted = false;  // Sound ON
-    vid.loop = true;     // Continuous loop
+    vid.loop = false;    // No loop — we handle rotation manually
     vid.playsInline = true;
     vid.load();
     // On canplay, start playback with sound
     vid.addEventListener('canplay', function onFirstPlay(){
         vid.muted = false;
+        syncMuteBtn();
         vid.play().catch(()=>{
-            // Browser may block unmuted autoplay; try muted first then unmute
             vid.muted = true;
+            syncMuteBtn();
             vid.play().then(()=>{
-                // Unmute after a short delay or on user interaction
                 vid.muted = false;
+                syncMuteBtn();
             }).catch(()=>{});
-            // Also try unmuting on first user interaction
             const unmuteOnClick = ()=>{
                 vid.muted = false;
+                syncMuteBtn();
                 vid.play().catch(()=>{});
                 document.removeEventListener('click', unmuteOnClick);
                 document.removeEventListener('touchstart', unmuteOnClick);
@@ -2812,17 +2817,36 @@ function initVideoPlayer(){
         lnVideoReady = true;
         vid.removeEventListener('canplay', onFirstPlay);
     });
+    // On ended → switch to next clip (V4→V5→V4→...)
+    vid.addEventListener('ended', ()=>{
+        const nextIdx = (lnVideoIdx + 1) % LN_VIDEO_CLIPS.length;
+        switchVideoClip(nextIdx);
+    });
     // Progress bar
     vid.addEventListener('timeupdate', updateVideoProgress);
     updateVideoLabel(0);
 }
 
 function startVideoRotation(){
-    // No rotation needed - single clip with loop
+    // Rotation handled by 'ended' event — no timer needed
 }
 
 function switchVideoClip(idx){
-    // Single clip only - no switching needed
+    const vid = document.getElementById('lnVideo');
+    if(!vid) return;
+    const wasMuted = vid.muted; // preserve mute state across clips
+    lnVideoIdx = idx;
+    vid.classList.add('fade-out');
+    setTimeout(()=>{
+        vid.src = LN_VIDEO_CLIPS[idx].src;
+        vid.muted = wasMuted;
+        vid.load();
+        vid.play().then(()=>{
+            vid.classList.remove('fade-out');
+            syncMuteBtn();
+        }).catch(()=> vid.classList.remove('fade-out'));
+    }, 400);
+    updateVideoLabel(idx);
 }
 
 function updateVideoIndicator(idx){
@@ -2830,11 +2854,25 @@ function updateVideoIndicator(idx){
 }
 
 function updateVideoLabel(idx){
-    const clip = LN_VIDEO_CLIPS[0];
+    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 = `NEWSROOM · Live Broadcast`;
+    if(infoEl) infoEl.textContent = `${clip.label} · Live Broadcast`;
+}
+
+function toggleVideoMute(){
+    const vid = document.getElementById('lnVideo');
+    const btn = document.getElementById('lnMuteBtn');
+    if(!vid || !btn) return;
+    vid.muted = !vid.muted;
+    btn.textContent = vid.muted ? '🔇' : '🔊';
+}
+
+function syncMuteBtn(){
+    const vid = document.getElementById('lnVideo');
+    const btn = document.getElementById('lnMuteBtn');
+    if(vid && btn) btn.textContent = vid.muted ? '🔇' : '🔊';
 }
 
 function updateVideoProgress(){