@rapidmx/meet-plugin 0.14.0 → 0.15.0

package/apps/shared/relay/SilenceMeter.ts

@@ -0,0 +1,59 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** A sample this close to zero counts as silent: about -80 dBFS, well under the noise floor of any real microphone
+ * (even through noise suppression), so only digital silence - a zero-filled block - falls below it. */
+export const SILENCE_THRESHOLD = 1e-4;
+/** A run of silent samples counts only once it lasts this long, so a waveform merely crossing zero never does. */
+export const MIN_SILENT_RUN_SECONDS = 0.005;
+
+/**
+ * Measures how much of a PCM stream is digital silence, for the relay's diagnostics. A live microphone always carries
+ * some noise, so stretches of exact (or near-exact) zero mean the audio was lost or zero-filled somewhere on its way,
+ * not that the room went quiet. Runs are tracked across `feed()` calls, so a gap that straddles two blocks counts in
+ * full.
+ */
+export class SilenceMeter {
+    private totalSeconds = 0;
+    private silentSeconds = 0;
+    private run = 0;
+    private runRate = 0;
+
+    /** Adds one block of `sampleRate` Hz samples. */
+    feed(samples: Float32Array, sampleRate: number): void {
+        if (sampleRate !== this.runRate) {
+            this.endRun();
+            this.runRate = sampleRate;
+        }
+        for (const sample of samples) {
+            if (Math.abs(sample) < SILENCE_THRESHOLD) {
+                this.run += 1;
+            } else if (this.run > 0) {
+                this.endRun();
+            }
+        }
+        this.totalSeconds += samples.length / sampleRate;
+    }
+
+    /** Milliseconds of audio fed so far. */
+    get totalMs(): number {
+        return this.totalSeconds * 1000;
+    }
+
+    /** Milliseconds of it that were silent - including a silent run still in progress once it is long enough. */
+    get silentMs(): number {
+        return (this.silentSeconds + this.runSeconds(this.run)) * 1000;
+    }
+
+    private runSeconds(run: number): number {
+        const seconds = this.runRate > 0 ? run / this.runRate : 0;
+        return seconds >= MIN_SILENT_RUN_SECONDS ? seconds : 0;
+    }
+
+    private endRun(): void {
+        this.silentSeconds += this.runSeconds(this.run);
+        this.run = 0;
+    }
+}

package/apps/shared/webrtc/MeshConnectionManager.ts

@@ -134,6 +134,7 @@
  * not something a meeting agrees on together.
  */
 import {
+    type ConnectionDiagnostics,
     type MediaTransport,
     type MeshEvent,
     type MeshParticipant,
@@ -141,6 +142,7 @@ import {
     type RTCPeerConnectionFactory,
     type RTCPeerConnectionLike,
     type RTCRtpSenderLike,
+    type RelayDiagnostics,
     type RelayTransportLike,
     type SignalMessage,
     type SignalingChannel,
@@ -184,8 +186,8 @@ interface PeerState extends MeshParticipant {
     connectTimer: ReturnType<typeof setTimeout> | undefined;
     /** Gives up on WebRTC when the connection has stayed `disconnected` for `disconnectedGraceMs`. */
     disconnectTimer: ReturnType<typeof setTimeout> | undefined;
-    /** Refreshes `diagnostics` (`MeshParticipant`) while this pair is on a real `RTCPeerConnection` - started once
-     * it first connects, stopped the moment it leaves WebRTC for the relay or the pair ends. */
+    /** Refreshes `diagnostics` (`MeshParticipant`) - from the `RTCPeerConnection` once it first connects, then (after
+     * a restart in `fallBack()`) from the relay's counters once the pair moves there; stopped when the pair ends. */
     diagnosticsTimer: ReturnType<typeof setInterval> | undefined;
 }
 
@@ -663,7 +665,11 @@ export class MeshConnectionManager {
     private async pollDiagnostics(peer: PeerState): Promise<void> {
         let diagnostics: MeshParticipant["diagnostics"];
         try {
-            diagnostics = await peer.pc.collectDiagnostics();
+            const relay = this.options.relay;
+            diagnostics =
+                peer.transport === "websocket" && relay?.diagnostics
+                    ? fromRelayDiagnostics(relay.diagnostics(peer.uid))
+                    : await peer.pc.collectDiagnostics();
         } catch {
             // Leaves whatever was last polled in place rather than blanking a momentary failure.
             return;
@@ -744,6 +750,9 @@ export class MeshConnectionManager {
         });
         this.syncRelaySending();
         this.emit({ type: "participant-updated", participant: toParticipant(peer) });
+        if (relay.diagnostics) {
+            this.startDiagnosticsPolling(peer);
+        }
         if (notify) {
             this.send({ kind: "relay-fallback", to: peer.uid });
         }
@@ -925,6 +934,19 @@ function toParticipant(peer: PeerState): MeshParticipant {
     };
 }
 
+/** A relayed pair's diagnostics: the relay's own counters, with the part that maps onto RTP stats (round trip, frames
+ * lost, bytes each way) also filled into the ordinary fields, so the panel's ordinary rows show it too. The round trip
+ * is to the relay server, not to the peer - see `RelayDiagnostics.roundTripMs`. */
+function fromRelayDiagnostics(relay: RelayDiagnostics): ConnectionDiagnostics {
+    const { send, receive } = relay;
+    return {
+        roundTripTimeSeconds: relay.roundTripMs === undefined ? undefined : relay.roundTripMs / 1000,
+        audio: { packetsLost: receive?.audio.framesLost, bytesSent: send.audio.bytesSent, bytesReceived: receive?.audio.bytesReceived },
+        video: { packetsLost: receive?.video.framesLost, bytesSent: send.video.bytesSent, bytesReceived: receive?.video.bytesReceived },
+        relay,
+    };
+}
+
 function sameState(a: ParticipantState, b: ParticipantState): boolean {
     return a.audioOn === b.audioOn && a.videoOn === b.videoOn && a.handRaised === b.handRaised;
 }

package/apps/shared/webrtc/types.ts

@@ -139,6 +139,71 @@ export interface ConnectionDiagnostics {
     roundTripTimeSeconds?: number;
     audio: RtpStreamDiagnostics;
     video: RtpStreamDiagnostics;
+    /** The WebSocket relay's own counters, present only for a `"websocket"` pair - `audio`/`video` then carry the
+     * subset of them that maps onto RTP stats (frames lost, bytes each way). */
+    relay?: RelayDiagnostics;
+}
+
+/** What the relay's sending half did with one kind of frame, cumulative since the relay transport was created. */
+export interface RelaySendStats {
+    framesSent: number;
+    /** Frames encoded but not sent: the socket was not ready, backed up, or refused a fragment. */
+    framesDropped: number;
+    bytesSent: number;
+}
+
+/** What the relay's sending half has done, cumulative since the relay transport was created. It is per browser, not
+ * per peer: every relayed peer receives the same stream. */
+export interface RelaySendDiagnostics {
+    /** Milliseconds of microphone audio the capture path delivered, against `audioCaptureWallMs` - the wall-clock time
+     * it was capturing for. Well short of it means capture is losing whole blocks. */
+    audioCapturedMs: number;
+    audioCaptureWallMs: number;
+    /** How much of `audioCapturedMs` was digital silence (see `SilenceMeter`) - a live microphone always has some
+     * noise, so a large share means the capture path is handing the encoder zero-filled blocks. */
+    audioSilentMs: number;
+    /** Milliseconds of captured audio not encoded because the encoder was too far behind. */
+    audioEncoderSkippedMs: number;
+    audio: RelaySendStats;
+    video: RelaySendStats;
+}
+
+/** What the relay's receiving half got of one kind of frame from one peer, cumulative. */
+export interface RelayReceiveStats {
+    framesReceived: number;
+    /** Frames the sequence numbers say never arrived complete - dropped by the sender, the server or in transit. */
+    framesLost: number;
+    bytesReceived: number;
+}
+
+/** What the relay's receiving half has done with one peer's media, cumulative since it started receiving from them. */
+export interface RelayReceiveDiagnostics {
+    audio: RelayReceiveStats & {
+        /** Milliseconds of decoded audio scheduled for playback. */
+        playedMs: number;
+        /** How much of `playedMs` was digital silence - silence that arrived inside the packets, i.e. the sender sent
+         * it, as opposed to `gapMs`. */
+        silentMs: number;
+        /** Times playback ran dry and restarted, and the total silence that inserted. */
+        gaps: number;
+        gapMs: number;
+        /** Packets dropped on arrival because the decoder was backed up or playback was already too far ahead. */
+        droppedLate: number;
+        /** How far ahead of the clock audio is scheduled right now - the receive buffer's current depth. */
+        bufferedMs: number;
+    };
+    video: RelayReceiveStats;
+}
+
+/** One sample of the relay's counters for one peer. */
+export interface RelayDiagnostics {
+    /** The latest round trip from this browser to the relay server, in milliseconds - not to the peer: the relay has
+     * no direct path between the two, and each end only knows its own leg. `undefined` before the first pong, or for
+     * a server too old to answer pings. */
+    roundTripMs?: number;
+    send: RelaySendDiagnostics;
+    /** `undefined` when nothing is being received from this peer. */
+    receive?: RelayReceiveDiagnostics;
 }
 
 /** The subset of `RTCRtpSender` `MeshConnectionManager.setLocalTrack()` uses. Every connection carries one audio and
@@ -206,6 +271,9 @@ export interface RelayTransportLike {
     setSending(active: boolean): void;
     /** Same as `MeshConnectionManager.setLocalTrack()` - `null` sends nothing for that kind. */
     setLocalTrack(kind: "audio" | "video", track: MediaStreamTrack | null): void;
+    /** The relay's counters as they stand for `peerId`, for the diagnostics panel. Optional so a test's fake relay
+     * needn't provide it; the mesh then shows nothing for a relayed pair. */
+    diagnostics?(peerId: string): RelayDiagnostics;
     close(): void;
 }
 
@@ -222,8 +290,9 @@ export interface MeshParticipant extends ParticipantState {
     /** How this participant's media currently reaches the local one - see `MediaTransport`. */
     transport: MediaTransport;
     /** This connection's most recently polled quality stats, for the diagnostics panel - `undefined` until the
-     * first poll completes (shortly after `transport` first leaves `"connecting"`), and never present at all for
-     * a `"websocket"`-relayed participant (there is no `RTCPeerConnection` to poll). */
+     * first poll completes (shortly after `transport` first leaves `"connecting"`, or the pair moves to the relay).
+     * For a `"websocket"`-relayed participant they come from the relay's own counters (`relay`) rather than an
+     * `RTCPeerConnection`. */
     diagnostics?: ConnectionDiagnostics;
 }
 

package/dist/apps/meet/_CallControls.d.ts

@@ -10,11 +10,23 @@
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen; "Hide self"/
+ * "Show self" (`selfHidden`/`onToggleSelfHidden`) is the only way to bring the local tile back once hidden from
+ * grid view, where there's no tile left to offer its own "show" control - see `_CallView.tsx`'s doc comment on
+ * where the local tile appears. Otherwise an ordinary menu of this bar's own shape (`openMenu`, closes on
+ * Escape/outside click like every other one here).
  */
 import React from "react";
 import type { ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";
-import { type MeshParticipant } from "../shared/webrtc/types.js";
+import { type MeshParticipant, type TransportMode } from "../shared/webrtc/types.js";
 export type CallViewMode = "grid" | "focus";
 export interface CallControlsProps {
     media: LocalMedia;
@@ -38,10 +50,20 @@ export interface CallControlsProps {
      * doc comment on talking-stick mode. Disables the microphone toggle (not the device-picker chevron, which
      * doesn't change whether anyone can hear them) rather than merely nudging it, unlike a `mute-request`. */
     micLocked?: boolean;
+    /** Whether the "…" menu's "Settings" item is offered at all - see this module's doc comment on the menu. */
+    isHost: boolean;
+    transportMode: TransportMode;
+    onSetTransportMode: (mode: TransportMode) => void;
+    onOpenDiagnostics: () => void;
+    onOpenSettings: () => void;
+    /** Whether the local tile is currently hidden - the "…" menu's "Hide self"/"Show self" item reflects and
+     * toggles this; see `_CallView.tsx`'s doc comment on where the local tile appears. */
+    selfHidden: boolean;
+    onToggleSelfHidden: () => void;
     onLeave: () => void;
 }
 /** Bars that rise and fall with the microphone's level (0-5) - a flat, dim set while there is no sound. */
 export declare function LevelBars({ level }: {
     level: number;
 }): React.JSX.Element;
-export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, onLeave, }: CallControlsProps): React.JSX.Element;
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }: CallControlsProps): React.JSX.Element;

package/dist/apps/meet/_CallControls.js

@@ -15,12 +15,31 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen; "Hide self"/
+ * "Show self" (`selfHidden`/`onToggleSelfHidden`) is the only way to bring the local tile back once hidden from
+ * grid view, where there's no tile left to offer its own "show" control - see `_CallView.tsx`'s doc comment on
+ * where the local tile appears. Otherwise an ordinary menu of this bar's own shape (`openMenu`, closes on
+ * Escape/outside click like every other one here).
  */
 import { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
 import EffectsPanel from "./_EffectsPanel.js";
-import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, OverflowIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
+const TRANSPORT_MODE_OPTIONS = [
+    { mode: "auto", label: "Auto" },
+    { mode: "p2p", label: "P2P" },
+    { mode: "relay", label: "Relay" },
+    { mode: "websocket", label: "WebSocket Relay" },
+];
 const BUTTON = "flex items-center justify-center h-12 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
 const NEUTRAL = "bg-[#3c4043] text-white hover:bg-[#4b4f53]";
 const ALERT = "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]";
@@ -29,7 +48,7 @@ const ACTIVE = "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]";
 export function LevelBars({ level }) {
     return (_jsx("span", { className: "flex items-center gap-[2px] h-5", "data-testid": "mic-level", "data-level": level, "aria-hidden": "true", children: [0.6, 1, 0.6].map((weight, i) => (_jsx("span", { className: `w-[3px] rounded-full ${level > 0 ? "bg-[#8ab4f8]" : "bg-white/50"}`, style: { height: `${4 + weight * level * 3}px` } }, i))) }));
 }
-export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, onLeave, }) {
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, selfHidden, onToggleSelfHidden, onLeave, }) {
     const [openMenu, setOpenMenu] = useState(null);
     const barRef = useRef(null);
     const shareDisabled = !isPresenting && !!presentingElsewhereName;
@@ -61,7 +80,19 @@ export default function CallControls({ media, participants, isPresenting, presen
     return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT} disabled:opacity-50 disabled:cursor-not-allowed`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, disabled: micLocked, title: micLocked ? "Only the current talking-stick holder can unmute." : undefined, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`, "aria-label": "Video effects", "aria-haspopup": "dialog", "aria-expanded": openMenu === "effects", onClick: () => toggleMenu("effects"), children: _jsx(EffectsIcon, {}) }), openMenu === "effects" && (_jsx("div", { role: "dialog", "aria-label": "Video effects", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(EffectsPanel, { media: media, tone: "dark" }) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), isPresenting && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Rotate shared screen", title: "If your shared window looks sideways or upside down to everyone, rotate it here - this is a correction for your own capture, not a browser bug this app can fix automatically.", onClick: onRotateScreen, children: _jsx(RotateIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${screenTransform.flipped ? ACTIVE : NEUTRAL}`, "aria-label": screenTransform.flipped ? "Unflip shared screen" : "Flip shared screen", "aria-pressed": screenTransform.flipped, onClick: onFlipScreen, children: _jsx(FlipIcon, {}) })] })), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
                                 onReaction(emoji);
                                 setOpenMenu(null);
-                            }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length < 2, title: participants.length < 2 ? "Grid and focused view look the same with only one other participant." : undefined, onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`, "aria-label": "Leave call", onClick: () => onLeave(), children: _jsx(LeaveIcon, {}) })] }));
+                            }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length < 2, title: participants.length < 2 ? "Grid and focused view look the same with only one other participant." : undefined, onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`, "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": openMenu === "overflow", onClick: () => toggleMenu("overflow"), children: _jsx(OverflowIcon, {}) }), openMenu === "overflow" && (_jsxs("div", { role: "menu", "aria-label": "More options", className: "absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    onOpenDiagnostics();
+                                    setOpenMenu(null);
+                                }, children: "Diagnostics" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    onToggleSelfHidden();
+                                    setOpenMenu(null);
+                                }, children: selfHidden ? "Show self" : "Hide self" }), _jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("p", { className: "px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60", children: "Connection method" }), TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": transportMode === mode, className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    onSetTransportMode(mode);
+                                    setOpenMenu(null);
+                                }, children: [_jsx("span", { className: "w-4 text-[#8ab4f8]", "aria-hidden": "true", children: transportMode === mode ? "✓" : "" }), label] }, mode))), isHost && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                            onOpenSettings();
+                                            setOpenMenu(null);
+                                        }, children: "Settings" })] }))] }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`, "aria-label": "Leave call", onClick: () => onLeave(), children: _jsx(LeaveIcon, {}) })] }));
 }
 /** The device picker opened from the chevron beside the microphone/camera button: the available devices with the
  * one in use ticked, or - while there are none to list - why, with a way to ask for access again. */

package/dist/apps/meet/_CallView.d.ts

@@ -11,10 +11,24 @@
  *
  * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
  * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
- * the branded page shell, whose header, footer and padding pushed it off the screen. The local participant's own
- * tile is a small tile in the bottom-right corner while anyone else is in the call (above the control bar on a narrower
- * window, and at the top on a phone, where the bar wraps onto a second row), and fills the tile area while they are
- * alone.
+ * the branded page shell, whose header, footer and padding pushed it off the screen.
+ *
+ * ## Where the local tile appears
+ *
+ * In plain grid view (not focus, not presenting), the local tile is an ordinary member of the grid, same size as
+ * everyone else's, rather than a floating corner overlay - so with exactly two participants, the local tile is
+ * genuinely one of the two grid cells, not a small picture-in-picture over the other person's. The floating corner
+ * tile (above the control bar on a narrower window, at the top on a phone, where the bar wraps onto a second row)
+ * is reserved for focus/presentation layouts, where there's already a single large tile the local one would
+ * otherwise compete with for space. Either way, alone in the call, the local tile simply fills the whole stage
+ * (see the `alone` branch of the `stage` computation).
+ *
+ * `selfHidden` (`handleHideSelf()`/`handleToggleSelfHidden()`) removes the local tile from view entirely, wherever
+ * it would otherwise appear - set from the tile's own corner "…" menu (`_ParticipantTile.tsx`'s `onHideSelf`, one
+ * directional: there's no tile left to click "show" on once it's gone) or toggled back on from the navbar's own
+ * "…" menu (`_CallControls.tsx`), which is the only way to re-show it from grid view, where there'd otherwise be
+ * nothing left bearing a "show self" control. Never honored while `alone`: hiding the only tile on screen would
+ * just blank it, so the local tile ignores `selfHidden` there and always shows.
  *
  * ## Who is heard
  *
@@ -47,18 +61,17 @@
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
- * ## The navbar's "…" menu
+ * ## Diagnostics, connection method and settings
  *
- * A catch-all for controls that don't need a dedicated button of their own: "Diagnostics" opens
- * `_DiagnosticsWindow.tsx` (a persistent, draggable window - not a popover like everything else here, since
- * troubleshooting a connection is something a participant wants to keep open while they poke at the rest of the
- * call, not something that closes the moment they click elsewhere); "Connection method" is a four-way choice
- * (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment) for forcing how *this tab's*
- * media reaches everyone else, independent of what anyone else has chosen; "Settings" (host-only) opens
- * `_SettingsModal.tsx`, which used to be the participants drawer's own header (mute-on-join, the join password, the
- * waiting-room toggle) - moved out because none of those are about *who* is in the call, which is what the drawer
- * is for. The menu itself closes on Escape, a click outside it, or picking an item; the windows it opens do not
- * close along with it.
+ * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
+ * callback props, but owned here: `diagnosticsOpen` renders `_DiagnosticsWindow.tsx` (a persistent, draggable
+ * window - not a popover like the menus in the control bar, since troubleshooting a connection is something a
+ * participant wants to keep open while they poke at the rest of the call, not something that closes the moment
+ * they click elsewhere); `transportMode`/`handleSetTransportMode()` forces how *this tab's* media reaches everyone
+ * else (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment), independent of what
+ * anyone else has chosen; `settingsOpen` renders `_SettingsModal.tsx`, which used to be the participants drawer's
+ * own header (mute-on-join, the join password, the waiting-room toggle) - moved out because none of those are
+ * about *who* is in the call, which is what the drawer is for.
  */
 import React from "react";
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";