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;
 

static/index.html

@@ -87,6 +87,7 @@
             <div class="vc-actions">
               <button id="voice-video-btn" title="Turn on Camera"><i data-lucide="video-off"></i></button>
               <button id="voice-screen-btn" title="Share Screen"><i data-lucide="monitor-off"></i></button>
+              <button id="voice-watch-btn" title="Stop Watching"><i data-lucide="eye"></i></button>
               <button id="voice-mute-btn" title="Mute"><i data-lucide="mic"></i></button>
               <button id="voice-leave-btn" title="Disconnect"><i data-lucide="phone-off"></i></button>
             </div>

static/styles.css

@@ -527,11 +527,13 @@ select {
 /* Video Grid */
 .video-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
+  gap: 12px;
-  padding: 16px;
+  padding: 12px;
   background: var(--bg-tertiary);
-  max-height: 60vh;
+  flex-grow: 1;
+  min-height: 200px;
+  max-height: 100%;
   overflow-y: auto;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }