@rapidmx/meet-plugin 0.9.3 → 0.11.0

package/dist/apps/meet/_CallView.js

@@ -34,22 +34,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * auto-detected active speaker (silently ignored while presenting, so it never fights the presenter for the main
  * slot); else, in focus mode with nobody yet speaking, the first other participant - so focus mode never shows an
  * empty main slot once someone else has joined.
+ *
+ * ## Talking stick mode
+ *
+ * A host-only navbar toggle (`handleToggleTalkingStick()`) that, once on, lets at most one participant's microphone
+ * be unmuted at a time - the host assigns who from the participants drawer (`handleGiveTalkingStick()`), everyone
+ * else sees a header chip naming who currently holds it. Purely an in-call runtime state signaled peer-to-peer over
+ * the mesh (`MeshConnectionManager.setTalkingStick()`/`"talking-stick-changed"`), the same shape as `mute-request`/
+ * `kicked`: no `VideoMeeting` field, no backend route, and only as "enforced" as a cooperating client makes it (see
+ * `types.ts`'s `SignalMessage` doc comment on why the signaling layer has no host identity to check against). What
+ * *is* new here versus `mute-request`'s one-time nudge: becoming or ceasing to be the holder force-toggles this
+ * tab's own mic to match (`selfHasTalkingStick`'s effect, below), and the mic button itself is disabled
+ * (`micLocked`, passed to `CallControls`) the whole time a non-holder would otherwise be able to tap it straight
+ * back on - a real restriction for as long as this tab's own UI is the one in front of the participant, not just a
+ * suggestion. Turning the mode off touches nobody's mic state, matching every other host toggle's "never
+ * retroactive" posture. A holder who leaves the call is not specially reassigned - see
+ * `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.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { playRaisedHandChime } from "../shared/media/chime.js";
 import { pickActiveSpeaker } from "../shared/media/activeSpeaker.js";
 import { startLevelMeter } from "../shared/media/levelMeter.js";
 import { requestDisplayMedia, stopStream } from "../shared/media/deviceMedia.js";
+import { NO_SCREEN_TRANSFORM, ScreenTransformProcessor, rotateClockwise } from "../shared/media/filters/ScreenTransform.js";
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls from "./_CallControls.js";
+import { admitParticipant, denyParticipant, kickParticipant, listWaitingParticipants, setForceMuteOnJoin as apiSetForceMuteOnJoin, setMeetingPassword, setWaitingRoomEnabled as apiSetWaitingRoomEnabled, } from "./_meetApi.js";
 import ParticipantTile from "./_ParticipantTile.js";
+import ParticipantsDrawer from "./_ParticipantsDrawer.js";
 /** How long a reaction floats on screen. */
 const REACTION_MS = 4000;
 /** The most reactions shown at once - a burst beyond this drops the oldest. */
 const MAX_REACTIONS = 12;
+/** How often the host's drawer refreshes its own waiting-room list while open. */
+const DEFAULT_WAITING_POLL_MS = 3000;
 /** Who is shown large - see this module's doc comment. `undefined` when nobody but the local participant has
  * joined yet (the grid/focus toggle still works, there's just nobody else to focus on). */
 export function computeMainUid(options) {
@@ -70,7 +92,16 @@ export function computeMainUid(options) {
 export function newPeerId(selfUid) {
     return `${selfUid}~${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
 }
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }) {
+/** The real, server-enforced account uid behind a participant's tab-scoped `MeshParticipant.uid` (`newPeerId()`'s
+ * `<account uid>~<random>` shape) - what the kick route's ACL grant is actually keyed by, unlike the tab-scoped id
+ * this view otherwise addresses a specific tab with. Neither a real account uid nor a minted guest uid (see
+ * `GUEST_UID_PREFIX`/`mintGuestToken()` on the backend) can itself contain "~", so the last one found is always
+ * exactly this suffix's own separator. */
+export function accountUidOf(peerUid) {
+    const i = peerUid.lastIndexOf("~");
+    return i === -1 ? peerUid : peerUid.slice(0, i);
+}
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, hostUid, initialForceMuteOnJoin, initialHasPassword, initialWaitingRoomEnabled, media, onLeave, }) {
     const [peerId] = useState(() => newPeerId(selfUid));
     const [connectError, setConnectError] = useState(null);
     const [participants, setParticipants] = useState([]);
@@ -78,6 +109,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [levels, setLevels] = useState({});
     const [presenterUid, setPresenterUid] = useState(undefined);
     const [screenStream, setScreenStream] = useState(null);
+    const [screenTransform, setScreenTransform] = useState(NO_SCREEN_TRANSFORM);
     const [handRaised, setHandRaised] = useState(false);
     const [viewMode, setViewMode] = useState("grid");
     const [pinnedUid, setPinnedUid] = useState(undefined);
@@ -87,11 +119,28 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [audioBlocked, setAudioBlocked] = useState(false);
     const [audioNonce, setAudioNonce] = useState(0);
     const [signalingReady, setSignalingReady] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [forceMuteOnJoin, setForceMuteOnJoinState] = useState(!!initialForceMuteOnJoin);
+    const [hasPassword, setHasPassword] = useState(!!initialHasPassword);
+    const [waitingRoomEnabled, setWaitingRoomEnabledState] = useState(!!initialWaitingRoomEnabled);
+    const [waitingParticipants, setWaitingParticipants] = useState([]);
+    const [talkingStickActive, setTalkingStickActive] = useState(false);
+    const [talkingStickHolder, setTalkingStickHolder] = useState(undefined);
     const managerRef = useRef(null);
+    /** The raw capture from `getDisplayMedia()` - only ever used to stop it (releasing the OS's own share
+     * indicator) and to notice the participant ending the share from the browser's own UI (`track.onended`). What's
+     * actually shown and sent is `screenTransformRef`'s output (`screenStream` state) - see `handleToggleShare()`. */
     const screenStreamRef = useRef(null);
+    const screenTransformRef = useRef(null);
     const levelMetersRef = useRef({});
     const reactionSeqRef = useRef(0);
     const reactionTimersRef = useRef(new Set());
+    /** The latest `media`, for the mesh-event handler below - that effect runs once at mount (see its own comment),
+     * so it would otherwise see only the mic state/toggle function from that first render. */
+    const mediaRef = useRef(media);
+    useEffect(() => {
+        mediaRef.current = media;
+    }, [media]);
     const isPresenting = !!screenStream;
     const showReaction = useCallback((emoji, name) => {
         const id = ++reactionSeqRef.current;
@@ -158,6 +207,18 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
                         stopLocalPresentation(false);
                     }
                     return;
+                case "mute-requested":
+                    if (mediaRef.current.micOn) {
+                        void mediaRef.current.toggleMic();
+                    }
+                    return;
+                case "kicked":
+                    onLeave("The host removed you from this call.");
+                    return;
+                case "talking-stick-changed":
+                    setTalkingStickActive(event.active);
+                    setTalkingStickHolder(event.holder);
+                    return;
             }
         });
         client
@@ -191,6 +252,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             // Only the screen capture is this view's to stop - the camera and microphone belong to the page, which
             // releases them when the participant leaves.
             stopStream(screenStreamRef.current);
+            screenTransformRef.current?.stop();
             for (const timer of timers) {
                 clearTimeout(timer);
             }
@@ -209,6 +271,25 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     useEffect(() => {
         managerRef.current?.setLocalState({ audioOn: media.micOn, videoOn: media.cameraOn || isPresenting, handRaised });
     }, [media.micOn, media.cameraOn, isPresenting, handRaised]);
+    // Talking-stick mode forces exactly one microphone on at a time: whoever just became the holder (including the
+    // host, on activation) is unmuted; everyone else is muted. Unlike `mute-requested`'s one-time nudge, this is
+    // paired with disabling the mic button itself (`micLocked`, passed to `CallControls` below) while it applies,
+    // so it isn't merely a suggestion - though still cooperative at the signaling layer, like every other
+    // moderation feature here (see `MeshConnectionManager`'s doc comment). Turning the mode off touches nobody's
+    // mic - states are left exactly as they are, the same "never retroactive" posture as every other host toggle.
+    const selfHasTalkingStick = talkingStickActive && talkingStickHolder === peerId;
+    const micLocked = talkingStickActive && !selfHasTalkingStick;
+    useEffect(() => {
+        if (!talkingStickActive) {
+            return;
+        }
+        if (selfHasTalkingStick && !mediaRef.current.micOn) {
+            void mediaRef.current.toggleMic();
+        }
+        else if (!selfHasTalkingStick && mediaRef.current.micOn) {
+            void mediaRef.current.toggleMic();
+        }
+    }, [talkingStickActive, selfHasTalkingStick]);
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -220,8 +301,12 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         }
         stopStream(screenStreamRef.current);
         screenStreamRef.current = null;
-        // The sync effect above swaps the camera back in as the outgoing video track.
+        screenTransformRef.current?.stop();
+        screenTransformRef.current = null;
+        // The sync effect above swaps the camera back in as the outgoing video track. The rotation/flip is reset
+        // for the next share - each share starts from the capture the browser hands back, not the last one's fix.
         setScreenStream(null);
+        setScreenTransform(NO_SCREEN_TRANSFORM);
     }
     async function handleToggleShare() {
         if (screenStreamRef.current) {
@@ -239,8 +324,34 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             return;
         }
         screenStreamRef.current = result.value;
-        setScreenStream(result.value);
-        result.value.getVideoTracks()[0].onended = () => stopLocalPresentation(true);
+        const rawTrack = result.value.getVideoTracks()[0];
+        rawTrack.onended = () => stopLocalPresentation(true);
+        try {
+            // Runs the capture through the rotate/flip processor before anyone (presenter included) sees it - see
+            // ScreenTransform.ts's doc comment on why window capture sometimes needs this correction.
+            const processor = new ScreenTransformProcessor({ source: rawTrack, state: screenTransform });
+            screenTransformRef.current = processor;
+            setScreenStream(new MediaStream([processor.track]));
+        }
+        catch {
+            // This browser can't draw the correction - share the raw capture rather than not sharing at all; the
+            // rotate/flip buttons simply won't do anything (screenTransformRef stays null).
+            setScreenStream(result.value);
+        }
+    }
+    function handleRotateScreen() {
+        setScreenTransform((prev) => {
+            const next = rotateClockwise(prev);
+            screenTransformRef.current?.setState(next);
+            return next;
+        });
+    }
+    function handleFlipScreen() {
+        setScreenTransform((prev) => {
+            const next = { ...prev, flipped: !prev.flipped };
+            screenTransformRef.current?.setState(next);
+            return next;
+        });
     }
     function handleToggleHand() {
         setHandRaised((prev) => !prev);
@@ -253,6 +364,68 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     function togglePin(uid) {
         setPinnedUid((prev) => (prev === uid ? undefined : uid));
     }
+    /** Asks `peerUid`'s participant to mute - the host-only button in the participants drawer calls this
+     * directly, with no confirmation (unlike removing someone, muting is easily undone by the participant
+     * themselves). */
+    function handleMuteParticipant(peerUid) {
+        managerRef.current?.sendMuteRequest(peerUid);
+    }
+    /** Removes `peerUid`'s participant from the call: the cooperative signal (immediate, so a cooperating client
+     * leaves without waiting on the network round trip below) and the enforced server-side revoke together - see
+     * `kickParticipant()`'s own doc comment for why both matter. The REST call's failure is swallowed rather than
+     * surfaced: the host already asked them to leave, and there is no useful recovery action to offer from here
+     * for what is almost always a transient network issue. */
+    function handleKickParticipant(peerUid) {
+        managerRef.current?.sendKick(peerUid);
+        kickParticipant(channel, accountUidOf(peerUid)).catch(() => undefined);
+    }
+    /** Flips the host's "mute new participants on join" setting: applied optimistically (the toggle itself is the
+     * only feedback this small a control needs) and reverted if the save fails, so the drawer never keeps claiming
+     * a setting that isn't actually persisted. Takes effect for whoever joins next - never retroactive, see
+     * `setForceMuteOnJoin()`'s own doc comment. */
+    function handleToggleForceMuteOnJoin() {
+        const next = !forceMuteOnJoin;
+        setForceMuteOnJoinState(next);
+        apiSetForceMuteOnJoin(channel, next).catch(() => setForceMuteOnJoinState(!next));
+    }
+    /** Sets, changes, or removes (`password: null`) the host's join password - unlike the force-mute toggle, this
+     * is not applied optimistically: the drawer's own `PasswordSection` awaits the result itself (clearing its
+     * input on success, showing an inline error on failure), so there is nothing here to revert. `hasPassword`
+     * updates only once the save actually succeeds. */
+    async function handleSetPassword(password) {
+        await setMeetingPassword(channel, password);
+        setHasPassword(!!password);
+    }
+    /** Flips the host's waiting-room setting - same optimistic-and-revert shape as `handleToggleForceMuteOnJoin()`,
+     * for the same reason. Takes effect for whoever joins next; nobody already admitted is retroactively gated. */
+    function handleToggleWaitingRoomEnabled() {
+        const next = !waitingRoomEnabled;
+        setWaitingRoomEnabledState(next);
+        apiSetWaitingRoomEnabled(channel, next).catch(() => setWaitingRoomEnabledState(!next));
+    }
+    /** Starts or stops talking-stick mode - host-only, see this module's doc comment. Starting makes the host the
+     * initial holder; stopping clears the holder too, leaving mic states exactly as they are rather than
+     * retroactively unmuting anyone. */
+    function handleToggleTalkingStick() {
+        managerRef.current?.setTalkingStick(!talkingStickActive, talkingStickActive ? undefined : peerId);
+    }
+    /** Hands the talking stick to `uid` (a participant's `MeshParticipant.uid`, or this tab's own `peerId` for the
+     * host taking it back) - host-only, called from the participants drawer's per-row "Give stick" button. */
+    function handleGiveTalkingStick(uid) {
+        managerRef.current?.setTalkingStick(true, uid);
+    }
+    /** Admits one pending request - optimistically removed from the drawer's own list (the next poll would drop it
+     * anyway, once the requester's own next poll completes their join; removing it here just avoids the visible
+     * delay). Re-added if the save itself fails, so a failure doesn't silently lose the request from the list. */
+    function handleAdmitParticipant(uid) {
+        setWaitingParticipants((prev) => prev.filter((p) => p.uid !== uid));
+        admitParticipant(channel, uid).catch(() => void listWaitingParticipants(channel).then(setWaitingParticipants, () => undefined));
+    }
+    /** Denies one pending request - same optimistic-removal shape as `handleAdmitParticipant()`. */
+    function handleDenyParticipant(uid) {
+        setWaitingParticipants((prev) => prev.filter((p) => p.uid !== uid));
+        denyParticipant(channel, uid).catch(() => void listWaitingParticipants(channel).then(setWaitingParticipants, () => undefined));
+    }
     function handleAudioBlocked() {
         setAudioBlocked(true);
     }
@@ -260,6 +433,35 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         setAudioBlocked(false);
         setAudioNonce((prev) => prev + 1);
     }
+    // A participant's `uid` is their tab-scoped peer id (`<account uid>~<random>` - see `newPeerId()`), while
+    // `hostUid` is the plain account uid `PublicVideoMeeting.hostUid` names - so telling the host's own tab(s) apart
+    // needs the prefix match, not equality. Purely a client-side check (see `hostUid`'s own doc comment on this
+    // prop): nobody's tab is prevented from claiming it, only from being shown host controls for it.
+    const isHost = !!hostUid && selfUid === hostUid;
+    const isParticipantHost = (uid) => !!hostUid && uid.startsWith(`${hostUid}~`);
+    // Refreshes the drawer's own waiting-room list while the host has the drawer open - there is no push signal
+    // for a newly filed admission request, so polling is the only way the list stays current without the host
+    // having to close and reopen the drawer. Stops (and the list is dropped) the moment either condition ends.
+    useEffect(() => {
+        if (!isHost || !drawerOpen) {
+            setWaitingParticipants([]);
+            return;
+        }
+        let cancelled = false;
+        const poll = () => {
+            listWaitingParticipants(channel).then((list) => {
+                if (!cancelled) {
+                    setWaitingParticipants(list);
+                }
+            }, () => undefined);
+        };
+        poll();
+        const interval = setInterval(poll, DEFAULT_WAITING_POLL_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [isHost, drawerOpen, channel]);
     const otherUids = participants.map((p) => p.uid);
     // A pin or an active-speaker pick can name someone who has just left, until the state catches up.
     const stillHere = (uid) => (uid && otherUids.includes(uid) ? uid : undefined);
@@ -269,6 +471,13 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         : undefined;
     const presenterName = presenterUid ? (presenterUid === peerId ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
     const raisedNames = [...(handRaised ? ["You"] : []), ...participants.filter((p) => p.handRaised).map((p) => p.name)];
+    // Absent (not "Someone") once the holder has left the call - see `MeshConnectionManager`'s doc comment on why
+    // nothing reassigns it automatically; the header then says so rather than naming someone no longer here.
+    const talkingStickHolderName = !talkingStickActive
+        ? undefined
+        : selfHasTalkingStick
+            ? "You"
+            : participants.find((p) => p.uid === talkingStickHolder)?.name;
     const alone = participants.length === 0;
     // This participant has no working link yet: the signaling channel is still opening, or there is someone in the call
     // and every connection to them is still being made. Once any one is up (or nobody else is here) it is not shown,
@@ -292,10 +501,10 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     else {
         stage = (_jsx("div", { className: "h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: participants.map((p) => remoteTile(p, "h-full")) }));
     }
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), _jsx("span", { className: "px-3 py-1.5 rounded-full bg-[#3c4043] text-sm", "aria-label": `${participants.length + 1} participants`, children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), onLeave: onLeave }) }), !alone && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full") })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `px-3 py-1.5 rounded-full text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-pressed": talkingStickActive, onClick: handleToggleTalkingStick, children: talkingStickActive ? "End talking stick" : "Talking stick" })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, selfName: selfName, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, onLeave: onLeave }) }), !alone && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full") })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
                 const stream = remoteStreams[p.uid];
                 return stream ? _jsx(RemoteAudio, { stream: stream, onBlocked: handleAudioBlocked }, `${p.uid}:${audioNonce}`) : null;
-            }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }));
+            }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement }), drawerOpen && (_jsx(ParticipantsDrawer, { selfName: selfName, micOn: media.micOn, handRaised: handRaised, participants: participants, isSelfHost: isHost, isParticipantHost: isParticipantHost, onMute: handleMuteParticipant, onKick: handleKickParticipant, forceMuteOnJoin: forceMuteOnJoin, onToggleForceMuteOnJoin: handleToggleForceMuteOnJoin, hasPassword: hasPassword, onSetPassword: handleSetPassword, waitingRoomEnabled: waitingRoomEnabled, onToggleWaitingRoomEnabled: handleToggleWaitingRoomEnabled, waitingParticipants: waitingParticipants, onAdmit: handleAdmitParticipant, onDeny: handleDenyParticipant, talkingStickActive: talkingStickActive, selfPeerId: peerId, talkingStickHolder: talkingStickHolder, onGiveTalkingStick: handleGiveTalkingStick, onClose: () => setDrawerOpen(false) }))] }));
 }
 /** Plays one remote participant's stream through a hidden `<audio>` element. `onBlocked` fires if the browser
  * refuses to start it (an autoplay policy) - the view then asks for a click. */

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

@@ -0,0 +1,22 @@
+/**
+ * The diagnostics panel, opened from the navbar for troubleshooting a call in progress - this browser's own
+ * capabilities, then each participant's connection: how their media reaches this one (the same badge
+ * `_ParticipantTile.tsx` shows, reused via `TRANSPORT_BADGES` rather than described in different words), and,
+ * once available, round-trip time and each kind's packet loss/jitter/bytes transferred
+ * (`MeshParticipant.diagnostics`, refreshed every few seconds by `MeshConnectionManager`'s own poller - see its doc
+ * comment). Purely informational and entirely local: nothing here is sent anywhere.
+ *
+ * `diagnostics` is `undefined` until the first poll completes (shortly after a connection comes up) and always
+ * absent for a `"websocket"`-relayed participant (there is no `RTCPeerConnection` to poll there) - both cases show
+ * "Not available" rather than a blank space, so it never looks like the panel forgot to load.
+ */
+import React from "react";
+import type { MeshParticipant } from "../shared/webrtc/types.js";
+export interface DiagnosticsPanelProps {
+    selfName: string;
+    /** Whether the local microphone/camera are actually sending - `LocalMedia.micOn`/`cameraOn`. */
+    micOn: boolean;
+    cameraOn: boolean;
+    participants: MeshParticipant[];
+}
+export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }: DiagnosticsPanelProps): React.JSX.Element;

package/dist/apps/meet/_DiagnosticsPanel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
+/** This browser's support for what a call needs - checked once, since it cannot change mid-session. */
+function browserCapabilities() {
+    const has = (name) => typeof window !== "undefined" && name in window;
+    return [
+        { label: "WebRTC", supported: has("RTCPeerConnection") },
+        { label: "Screen sharing", supported: typeof navigator !== "undefined" && !!navigator.mediaDevices?.getDisplayMedia },
+        { label: "WebCodecs (server relay fallback)", supported: has("VideoEncoder") && has("AudioEncoder") },
+    ];
+}
+function formatMs(seconds) {
+    return seconds === undefined ? "—" : `${Math.round(seconds * 1000)} ms`;
+}
+function formatBytes(bytes) {
+    return bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+const ROW = "flex justify-between gap-3 py-0.5";
+const LABEL = "text-white/60";
+function StreamRow({ kind, packetsLost, jitter, bytesSent, bytesReceived }) {
+    if (packetsLost === undefined && jitter === undefined && bytesSent === undefined && bytesReceived === undefined) {
+        return null;
+    }
+    return (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: kind }), _jsxs("span", { children: [packetsLost !== undefined && `${packetsLost} lost`, jitter !== undefined && ` · ${formatMs(jitter)} jitter`, (bytesSent !== undefined || bytesReceived !== undefined) &&
+                        ` · ${[bytesSent !== undefined && `↑${formatBytes(bytesSent)}`, bytesReceived !== undefined && `↓${formatBytes(bytesReceived)}`].filter(Boolean).join(" ")}`] })] }));
+}
+export default function DiagnosticsPanel({ selfName, micOn, cameraOn, participants }) {
+    return (_jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5", children: "This browser" }), browserCapabilities().map(({ label, supported }) => (_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: label }), _jsx("span", { className: supported ? "text-[#8ab4f8]" : "text-[#f2b8b5]", children: supported ? "Supported" : "Not supported" })] }, label))), _jsxs("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: [selfName, " ", _jsx("span", { className: "text-white/60", children: "(you)" })] }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Sending" }), _jsx("span", { children: [micOn && "audio", cameraOn && "video"].filter(Boolean).join(" + ") || "Nothing" })] }), participants.length === 0 && _jsx("p", { className: "text-white/60 mt-3", children: "Nobody else is in the call yet." }), participants.map((p) => {
+                const badge = p.transport !== "connecting" && p.transport !== "p2p" ? TRANSPORT_BADGES[p.transport] : undefined;
+                return (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mt-3 mb-1.5", children: p.name }), _jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Connection" }), _jsx("span", { title: badge?.title, children: badge?.label ?? (p.transport === "connecting" ? "Connecting…" : "Direct") })] }), p.transport === "websocket" || !p.diagnostics ? (_jsxs("p", { className: `${LABEL} py-0.5`, children: ["Not available", p.transport !== "websocket" && " yet", "."] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: ROW, children: [_jsx("span", { className: LABEL, children: "Round-trip time" }), _jsx("span", { children: formatMs(p.diagnostics.roundTripTimeSeconds) })] }), _jsx(StreamRow, { kind: "Audio", ...p.diagnostics.audio }), _jsx(StreamRow, { kind: "Video", ...p.diagnostics.video })] }))] }, p.uid));
+            })] }));
+}

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

@@ -13,6 +13,14 @@
  * reflection, and mirroring it would show it backwards to no one but themselves. */
 import React from "react";
 import type { MediaTransport } from "../shared/webrtc/types.js";
+/** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
+ * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess.
+ * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
+ * slightly different words. */
+export declare const TRANSPORT_BADGES: Partial<Record<MediaTransport, {
+    label: string;
+    title: string;
+}>>;
 export interface ParticipantTileProps {
     name: string;
     stream?: MediaStream | null;

package/dist/apps/meet/_ParticipantTile.js

@@ -19,9 +19,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef } from "react";
 import { MicOffIcon } from "./_icons.js";
 /** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
- * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess. */
-const TRANSPORT_BADGES = {
+ * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess.
+ * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
+ * slightly different words. */
+export const TRANSPORT_BADGES = {
     turn: { label: "Relayed", title: "Connected through the relay server, because a direct connection was not possible." },
+    "turn-tcp": {
+        label: "Relayed (TCP)",
+        title: "Connected through the relay server over TCP, because this network blocks the relay's usual UDP connection too. " +
+            "Audio or video may pause briefly under network strain rather than just glitching - a property of TCP, not a dropped connection.",
+    },
     websocket: {
         label: "Server relay",
         title: "Sent through the server as a last resort, because no other connection was possible. Video is lower quality and sound may lag.",

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

@@ -0,0 +1,77 @@
+/**
+ * The participants drawer, opened from the header's participant-count chip: a right-side panel listing everyone in
+ * the call, "you" first. The same mic-muted/hand-raised/transport-badge information `_ParticipantTile.tsx` already
+ * shows on a tile, as plain rows instead (a list reads better than tiles once there's a reason to scan for one
+ * name).
+ *
+ * Closes on Escape, on a click on the backdrop behind it, or its own close button - never on a click inside the
+ * drawer itself, matching `_CallControls.tsx`'s menus.
+ *
+ * A "Host" tag marks the host's own row (`isSelfHost`/`isParticipantHost` - see `_CallView.tsx`'s doc comment on
+ * `hostUid` for what that identity is and isn't). Only while `isSelfHost` does every *other* row also get a "Mute"
+ * button (hidden once that participant is already muted - there is no useful "unmute someone else" action to
+ * offer) and a "Remove" button (a native `confirm()` first, since removal can't be undone by the participant the
+ * way a mute request can) - never on the local participant's own row, and never shown to anyone but the host.
+ *
+ * The header also gets a host-only "Mute on join" checkbox (`forceMuteOnJoin`/`onToggleForceMuteOnJoin`) - a
+ * setting for whoever joins *next*, not an action on anyone already here (muting someone already in the call is
+ * what each row's own "Mute" button is for) - a host-only password section (`hasPassword`/`onSetPassword`), the
+ * same "next joiner" scope: setting or changing it never affects anyone already in the call - and a host-only
+ * waiting-room toggle plus list (`waitingRoomEnabled`/`onToggleWaitingRoomEnabled`,
+ * `waitingParticipants`/`onAdmit`/`onDeny`): `_CallView.tsx` polls the list while this drawer is open and the
+ * caller is the host (there is no push signal for a newly filed admission request), so it stays current without
+ * the host needing to close and reopen the drawer.
+ *
+ * While talking-stick mode is on (`talkingStickActive`), every row - including the host's own - shows a "Give
+ * stick" button, host-only, hidden on whichever row currently holds it (`talkingStickHolder`); everyone (not just
+ * the host) sees a badge on that row instead, same visibility as the "Host" tag. See `_CallView.tsx`'s doc comment
+ * on talking-stick mode for what granting it actually does to the recipient's microphone.
+ */
+import React from "react";
+import type { MeshParticipant } from "../shared/webrtc/types.js";
+import type { WaitingParticipant } from "./_meetApi.js";
+export interface ParticipantsDrawerProps {
+    selfName: string;
+    micOn: boolean;
+    handRaised: boolean;
+    participants: MeshParticipant[];
+    isSelfHost: boolean;
+    isParticipantHost: (uid: string) => boolean;
+    /** Sends a mute request to the given participant's `uid` - a no-op from the recipient's end if they're already
+     * muted (see `Row`'s own "already muted" guard, which never even shows the button then). */
+    onMute: (uid: string) => void;
+    /** Removes the given participant's `uid` - see `_CallView.tsx`'s `handleKickParticipant()` for what this
+     * actually does (the cooperative signal plus the enforced server-side revoke). */
+    onKick: (uid: string) => void;
+    /** Whether a newly joining participant currently starts muted - the header checkbox's own state, host-only. */
+    forceMuteOnJoin: boolean;
+    onToggleForceMuteOnJoin: () => void;
+    /** Whether this meeting currently requires a password - never the password itself, which the server never
+     * sends back (see `PublicVideoMeeting.hasPassword`'s own doc comment). */
+    hasPassword: boolean;
+    /** Sets (a non-empty string), replaces, or removes (`null`) the join password. Rejecting lets
+     * `PasswordSection` show its own inline error without this drawer needing to know anything about it. */
+    onSetPassword: (password: string | null) => Promise<void>;
+    /** Whether the meeting currently requires the host to admit each participant - the header checkbox's own
+     * state, host-only. */
+    waitingRoomEnabled: boolean;
+    onToggleWaitingRoomEnabled: () => void;
+    /** Everyone currently waiting to be admitted - `_CallView.tsx`'s own polled, always-current list; empty
+     * whenever this drawer isn't open and host, by construction. */
+    waitingParticipants: WaitingParticipant[];
+    onAdmit: (uid: string) => void;
+    onDeny: (uid: string) => void;
+    /** Whether talking-stick mode is currently on - the host-only navbar toggle's own state (see `_CallView.tsx`'s
+     * doc comment on talking-stick mode). */
+    talkingStickActive: boolean;
+    /** This tab's own peer id - needed only so the self row's "Give stick" button can name itself when the host
+     * wants to take the stick back. */
+    selfPeerId: string;
+    /** Whichever peer id (`selfPeerId`, or a participant's `MeshParticipant.uid`) currently holds the stick;
+     * undefined while `talkingStickActive` is `false`, or (transiently) once its holder has left the call. */
+    talkingStickHolder?: string;
+    /** Hands the stick to `uid` - host-only, see `_CallView.tsx`'s `handleGiveTalkingStick()`. */
+    onGiveTalkingStick: (uid: string) => void;
+    onClose: () => void;
+}
+export default function ParticipantsDrawer({ selfName, micOn, handRaised, participants, isSelfHost, isParticipantHost, onMute, onKick, forceMuteOnJoin, onToggleForceMuteOnJoin, hasPassword, onSetPassword, waitingRoomEnabled, onToggleWaitingRoomEnabled, waitingParticipants, onAdmit, onDeny, talkingStickActive, selfPeerId, talkingStickHolder, onGiveTalkingStick, onClose, }: ParticipantsDrawerProps): React.JSX.Element;