Improve unmute for all option

Author: Void-Spectra

src/utils/PiPManager.tsx

@@ -72,6 +72,10 @@ interface PiPParticipantProps {
   mediaStream?: MediaStream;
   isSpeaking?: boolean;
   streamName: string;
+  /** Reports whether this tile's audio is currently blocked by the browser's autoplay policy */
+  onAutoplayBlockedChange?: (uid: string, blocked: boolean) => void;
+  /** Registers (or unregisters, when passed null) a retry function the parent can call to unmute this tile */
+  registerUnmuteHandler?: (uid: string, retry: (() => void) | null) => void;
 }
 
 interface PiPGridContentProps {
@@ -534,21 +538,39 @@ const PIP_STYLES = `
     color: rgba(255,255,255,0.8);
   }
 
-  /* Tap-to-unmute affordance (shown when autoplay-with-sound is blocked) */
+  /* Per-tile indicator: this tile's audio is blocked (not clickable — see pip-unmute-all-banner) */
   .pip-unmute-badge {
     position: absolute;
     top: 4px;
     right: 4px;
     background: rgba(217, 48, 37, 0.85);
-    border-radius: 4px;
-    padding: 2px 6px;
-    font-size: 9px;
-    font-weight: 600;
-    color: #fff;
-    white-space: nowrap;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
     z-index: 4;
   }
 
+  /* Single click to unmute every blocked tile at once */
+  .pip-unmute-all-banner {
+    flex-shrink: 0;
+    width: 100%;
+    border: none;
+    background: #d93025;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 6px 8px;
+    cursor: pointer;
+    text-align: center;
+  }
+  .pip-unmute-all-banner:hover {
+    background: #c12a1f;
+  }
+
   /* Empty state */
   .pip-empty-state {
     flex: 1;
@@ -741,55 +763,70 @@ const PiPParticipant: React.FC<PiPParticipantProps> = ({
   mediaStream,
   isSpeaking = false,
   streamName,
+  onAutoplayBlockedChange,
+  registerUnmuteHandler,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const isLocalUser = participant?.uid === streamName;
   const showVideo = Boolean(participant?.videoEnabled && mediaStream);
   const [needsUnmute, setNeedsUnmute] = useState(false);
+  const uid = participant?.uid;
+
+  // Retries playback unmuted — exposed to the parent so a single click on the shared
+  // "enable sound" banner can unlock every blocked tile at once (see PiPGridContent).
+  const retryUnmute = useCallback(() => {
+    const videoEl = videoRef.current;
+    if (!videoEl) return;
+    videoEl.muted = false;
+    videoEl.play().then(
+      () => {
+        setNeedsUnmute(false);
+        if (uid) onAutoplayBlockedChange?.(uid, false);
+      },
+      () => {
+        videoEl.muted = true;
+        setNeedsUnmute(true);
+        if (uid) onAutoplayBlockedChange?.(uid, true);
+      },
+    );
+  }, [uid, onAutoplayBlockedChange]);
+
+  useEffect(() => {
+    if (!uid) return;
+    registerUnmuteHandler?.(uid, retryUnmute);
+    return () => {
+      registerUnmuteHandler?.(uid, null);
+      onAutoplayBlockedChange?.(uid, false);
+    };
+  }, [uid, retryUnmute, registerUnmuteHandler, onAutoplayBlockedChange]);
 
   // Always attach the stream (audio track must keep playing even when video is off), and
   // drive playback explicitly rather than relying on the `autoplay` attribute: unmuted
   // autoplay can be silently blocked (frozen frame, no sound, no error surfaced) unless the
   // window still has a fresh user-activation grant. When play() is rejected, fall back to a
-  // muted play (always allowed) and surface a tap-to-unmute affordance — clicking inside the
-  // PiP window is itself a genuine user gesture, so the retry there reliably succeeds.
+  // muted play (always allowed) and report the block up so the shared banner can offer a retry.
   useEffect(() => {
     const videoEl = videoRef.current;
     if (!videoEl || !mediaStream) return;
 
     videoEl.srcObject = mediaStream;
     videoEl.muted = isLocalUser;
     setNeedsUnmute(false);
+    if (uid) onAutoplayBlockedChange?.(uid, false);
 
     videoEl.play().catch(() => {
       if (isLocalUser) return;
       videoEl.muted = true;
       setNeedsUnmute(true);
+      if (uid) onAutoplayBlockedChange?.(uid, true);
       videoEl.play().catch(() => {});
     });
-  }, [mediaStream, isLocalUser]);
-
-  const handleUnmute = () => {
-    const videoEl = videoRef.current;
-    if (!videoEl) return;
-    videoEl.muted = false;
-    videoEl.play().then(
-      () => setNeedsUnmute(false),
-      () => {
-        videoEl.muted = true;
-        setNeedsUnmute(true);
-      },
-    );
-  };
+  }, [mediaStream, isLocalUser, uid, onAutoplayBlockedChange]);
 
   const label = `${participant?.name || 'Unknown'}${isLocalUser ? ' (You)' : ''}`;
 
   return (
-    <div
-      className="pip-participant-tile"
-      onClick={needsUnmute ? handleUnmute : undefined}
-      style={needsUnmute ? { cursor: 'pointer' } : undefined}
-    >
+    <div className="pip-participant-tile">
       {isSpeaking && <div className="pip-speaking-ring" />}
 
       {/* Kept mounted (not unmounted on camera-off) so the audio track never stops playing */}
@@ -810,7 +847,14 @@ const PiPParticipant: React.FC<PiPParticipantProps> = ({
         </div>
       )}
 
-      {needsUnmute && <div className="pip-unmute-badge">🔇 Tap to unmute</div>}
+      {needsUnmute && (
+        <div
+          className="pip-unmute-badge"
+          title="Audio blocked — use the banner above to enable sound"
+        >
+          🔇
+        </div>
+      )}
 
       <div className="pip-name-pill">{label}</div>
     </div>
@@ -884,6 +928,36 @@ const PiPGridContent: React.FC<PiPGridContentProps> = ({
   const speakingIds = talkers.map((t) => t.streamId);
   const gridClass = `pip-participants-grid${participants.length <= 1 ? ' single-participant' : ''}`;
 
+  // Retry functions registered by each blocked PiPParticipant, keyed by uid — lets a single
+  // click on the "enable sound" banner unlock every tile at once.
+  const unmuteHandlersRef = useRef<Map<string, () => void>>(new Map());
+  const [blockedUids, setBlockedUids] = useState<Set<string>>(new Set());
+
+  const registerUnmuteHandler = useCallback((uid: string, retry: (() => void) | null) => {
+    if (retry) {
+      unmuteHandlersRef.current.set(uid, retry);
+    } else {
+      unmuteHandlersRef.current.delete(uid);
+    }
+  }, []);
+
+  const handleAutoplayBlockedChange = useCallback((uid: string, blocked: boolean) => {
+    setBlockedUids((prev) => {
+      if (blocked === prev.has(uid)) return prev;
+      const next = new Set(prev);
+      if (blocked) {
+        next.add(uid);
+      } else {
+        next.delete(uid);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleUnmuteAll = useCallback(() => {
+    unmuteHandlersRef.current.forEach((retry) => retry());
+  }, []);
+
   // Screen share video component
   const PiPScreenShareVideo: React.FC<{ stream?: MediaStream }> = ({ stream }) => {
     const videoRef = useRef<HTMLVideoElement>(null);
@@ -927,6 +1001,8 @@ const PiPGridContent: React.FC<PiPGridContentProps> = ({
                 mediaStream={participants[0].mediaStream}
                 isSpeaking={speakingIds.includes(participants[0].participant?.uid)}
                 streamName={streamName}
+                onAutoplayBlockedChange={handleAutoplayBlockedChange}
+                registerUnmuteHandler={registerUnmuteHandler}
               />
             )
           )}
@@ -940,6 +1016,8 @@ const PiPGridContent: React.FC<PiPGridContentProps> = ({
                 mediaStream={pd.mediaStream}
                 isSpeaking={speakingIds.includes(pd.participant?.uid)}
                 streamName={streamName}
+                onAutoplayBlockedChange={handleAutoplayBlockedChange}
+                registerUnmuteHandler={registerUnmuteHandler}
               />
             ))}
           </div>
@@ -958,6 +1036,8 @@ const PiPGridContent: React.FC<PiPGridContentProps> = ({
             mediaStream={pd.mediaStream}
             isSpeaking={speakingIds.includes(pd.participant?.uid)}
             streamName={streamName}
+            onAutoplayBlockedChange={handleAutoplayBlockedChange}
+            registerUnmuteHandler={registerUnmuteHandler}
           />
         ))
       ) : (
@@ -981,6 +1061,13 @@ const PiPGridContent: React.FC<PiPGridContentProps> = ({
         </button>
       </div>
 
+      {blockedUids.size > 0 && (
+        <button className="pip-unmute-all-banner" onClick={handleUnmuteAll}>
+          🔇 Tap to enable sound for {blockedUids.size} participant
+          {blockedUids.size !== 1 ? 's' : ''}
+        </button>
+      )}
+
       {isScreenShared ? renderScreenShareLayout() : renderNormalGrid()}
 
       <PiPControlBar