vvv

static/app.js

@@ -22,6 +22,7 @@ const state = {
     muted: false,
     sharingVideo: false,
     sharingScreen: false,
+    watchingVideo: true,
     iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
   },
   voicePresencePollId: null,
@@ -65,6 +66,7 @@ const el = {
   vcChannelName: document.getElementById("vc-channel-name"),
   voiceVideoBtn: document.getElementById("voice-video-btn"),
   voiceScreenBtn: document.getElementById("voice-screen-btn"),
+  voiceWatchBtn: document.getElementById("voice-watch-btn"),
   voiceMuteBtn: document.getElementById("voice-mute-btn"),
   voiceLeaveBtn: document.getElementById("voice-leave-btn"),
   videoGrid: document.getElementById("video-grid"),
@@ -582,7 +584,7 @@ function stopAndClearScreenPipeline() {
 
 function updateVideoGridVisibility() {
   const hasVideos = el.videoGrid.children.length > 0;
-  if (hasVideos) {
+  if (hasVideos && state.voice.watchingVideo) {
     el.videoGrid.classList.remove("hidden");
   } else {
     el.videoGrid.classList.add("hidden");
@@ -934,6 +936,16 @@ async function toggleScreenShare() {
   lucide.createIcons();
 }
 
+function toggleWatchVideo() {
+  state.voice.watchingVideo = !state.voice.watchingVideo;
+  updateVideoGridVisibility();
+
+  el.voiceWatchBtn.innerHTML = state.voice.watchingVideo ? '<i data-lucide="eye"></i>' : '<i data-lucide="eye-off"></i>';
+  el.voiceWatchBtn.style.color = state.voice.watchingVideo ? 'var(--green)' : 'var(--danger)';
+  el.voiceWatchBtn.title = state.voice.watchingVideo ? 'Stop Watching' : 'Start Watching';
+  lucide.createIcons();
+}
+
 // --- Mobile Logic ---
 
 function toggleMobileMenu() {
@@ -1109,6 +1121,7 @@ async function init() {
 
   el.voiceVideoBtn.onclick = toggleVideo;
   el.voiceScreenBtn.onclick = toggleScreenShare;
+  el.voiceWatchBtn.onclick = toggleWatchVideo;
   el.voiceMuteBtn.onclick = toggleMute;
   el.voiceLeaveBtn.onclick = leaveVoice;