Update index.html

index.html

@@ -802,24 +802,18 @@ 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" muted playsinline autoplay loop></video>
+                <video id="lnVideo" 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 class="ln-video-clip-info" id="lnVideoClipInfo">NEWSROOM · Live 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>
+                    <span style="color:rgba(255,255,255,0.35)">NEWSROOM · Continuous Broadcast</span>
                 </div>
                 <!-- Mini counters under video -->
                 <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:auto;">
@@ -2780,11 +2774,8 @@ async function fetchNpcProfile(agentId){
 
 /* ====== 🔴 P&D LIVE NEWS ====== */
 
-/* ── Video Clip Rotation Engine ── */
+/* ── Video Player: V4 Single Clip with Sound ── */
 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;
@@ -2792,65 +2783,58 @@ let lnVideoIdx = 0, lnVideoRotateTimer = null, lnVideoProgressTimer = null, lnVi
 function initVideoPlayer(){
     const vid = document.getElementById('lnVideo');
     if(!vid) return;
-    // Load first clip
+    // Load V4 clip only
     vid.src = LN_VIDEO_CLIPS[0].src;
-    vid.muted = true;
+    vid.muted = false;  // Sound ON
+    vid.loop = true;     // Continuous loop
     vid.playsInline = true;
     vid.load();
-    // On canplay, start playback
+    // On canplay, start playback with sound
     vid.addEventListener('canplay', function onFirstPlay(){
-        vid.play().catch(()=>{});
+        vid.muted = false;
+        vid.play().catch(()=>{
+            // Browser may block unmuted autoplay; try muted first then unmute
+            vid.muted = true;
+            vid.play().then(()=>{
+                // Unmute after a short delay or on user interaction
+                vid.muted = false;
+            }).catch(()=>{});
+            // Also try unmuting on first user interaction
+            const unmuteOnClick = ()=>{
+                vid.muted = false;
+                vid.play().catch(()=>{});
+                document.removeEventListener('click', unmuteOnClick);
+                document.removeEventListener('touchstart', unmuteOnClick);
+            };
+            document.addEventListener('click', unmuteOnClick, {once:true});
+            document.addEventListener('touchstart', unmuteOnClick, {once:true});
+        });
         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);
+    // No rotation needed - single clip with loop
 }
 
 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();
+    // Single clip only - no switching needed
 }
 
 function updateVideoIndicator(idx){
-    const dots = document.querySelectorAll('.ln-video-dot');
-    dots.forEach((d,i)=> d.classList.toggle('active', i===idx));
+    // No indicators needed
 }
 
 function updateVideoLabel(idx){
-    const clip = LN_VIDEO_CLIPS[idx];
+    const clip = LN_VIDEO_CLIPS[0];
     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}`;
+    if(infoEl) infoEl.textContent = `NEWSROOM · Live Broadcast`;
 }
 
 function updateVideoProgress(){