@rapidmx/meet-plugin 0.9.2 → 0.10.0

package/dist/apps/meet/_CallView.js

@@ -40,16 +40,21 @@ 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 +75,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 +92,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 +102,26 @@ 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 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 +188,14 @@ 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;
             }
         });
         client
@@ -191,6 +229,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);
             }
@@ -220,8 +259,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 +282,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 +322,57 @@ 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));
+    }
+    /** 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 +380,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);
@@ -292,10 +441,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(", ")] })), _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")), 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, 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,61 @@
+/**
+ * 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.
+ */
+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;
+    onClose: () => void;
+}
+export default function ParticipantsDrawer({ selfName, micOn, handRaised, participants, isSelfHost, isParticipantHost, onMute, onKick, forceMuteOnJoin, onToggleForceMuteOnJoin, hasPassword, onSetPassword, waitingRoomEnabled, onToggleWaitingRoomEnabled, waitingParticipants, onAdmit, onDeny, onClose, }: ParticipantsDrawerProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantsDrawer.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * 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.
+ */
+import { useEffect, useState } from "react";
+import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
+import { MicOffIcon } from "./_icons.js";
+/** The host-only password form: one text input plus a Set/Change button, and a Remove button once one is set.
+ * Owns its own input/error/busy state locally - `_CallView.tsx` only needs to know whether a password exists, not
+ * what a half-typed one currently says. */
+function PasswordSection({ hasPassword, onSetPassword }) {
+    const [input, setInput] = useState("");
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function submit(password) {
+        setBusy(true);
+        setError(null);
+        try {
+            await onSetPassword(password);
+            setInput("");
+        }
+        catch {
+            setError("Could not save - try again.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "px-3 py-2 border-b border-white/10 text-sm", children: [_jsx("p", { className: "text-white/70 mb-1.5", children: hasPassword ? "Password protection is on." : "No password required to join." }), _jsxs("form", { className: "flex gap-2", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (input) {
+                        void submit(input);
+                    }
+                }, children: [_jsx("input", { type: "password", "aria-label": hasPassword ? "New password" : "Set a password", placeholder: hasPassword ? "New password" : "Set a password", className: "flex-1 min-w-0 px-2 py-1 rounded bg-white/10 text-white placeholder:text-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", value: input, onChange: (event) => setInput(event.target.value), disabled: busy }), _jsx("button", { type: "submit", className: "px-2 py-1 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 disabled:opacity-50", disabled: busy || !input, children: hasPassword ? "Change" : "Set" })] }), hasPassword && (_jsx("button", { type: "button", className: "mt-1.5 text-xs text-[#f2b8b5] underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 disabled:opacity-50", disabled: busy, onClick: () => void submit(null), children: "Remove password" })), error && _jsx("p", { className: "text-[#f2b8b5] text-xs mt-1.5", children: error })] }));
+}
+/** The host-only "who's waiting" list - shown only while `waitingRoomEnabled` is on, since there is otherwise never
+ * anyone to list. Says so explicitly when the list is empty, rather than rendering nothing (silence here would be
+ * indistinguishable from the list just not having loaded yet). */
+function WaitingSection({ waitingParticipants, onAdmit, onDeny, }) {
+    return (_jsxs("div", { className: "px-3 py-2 border-b border-white/10 text-sm", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5", children: "Waiting to join" }), waitingParticipants.length === 0 ? (_jsx("p", { className: "text-white/70", children: "Nobody is waiting right now." })) : (_jsx("ul", { children: waitingParticipants.map((p) => (_jsxs("li", { className: "flex items-center gap-2 py-1", children: [_jsx("span", { className: "flex-1 min-w-0 truncate", children: p.name }), _jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Admit ${p.name}`, onClick: () => onAdmit(p.uid), children: "Admit" }), _jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Deny ${p.name}`, onClick: () => onDeny(p.uid), children: "Deny" })] }, p.uid))) }))] }));
+}
+function Row({ name, isSelf, isHost, micMuted, handRaised, transport, canModerate, onMute, onKick, }) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
+    return (_jsxs("li", { className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5", children: [_jsxs("span", { className: "flex-1 min-w-0 truncate", children: [name, isSelf ? " (you)" : ""] }), isHost && _jsx("span", { className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]", children: "Host" }), handRaised && (_jsx("span", { role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4", role: "img", "aria-label": "Muted", children: _jsx(MicOffIcon, {}) })), badge && (_jsx("span", { className: `px-2 py-0.5 rounded text-xs whitespace-nowrap ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/40 text-white"}`, title: badge.title, children: badge.label })), canModerate && !micMuted && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-white/10 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Mute ${name}`, onClick: onMute, children: "Mute" })), canModerate && (_jsx("button", { type: "button", className: "px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#601410] text-[#f9dedc] hover:bg-[#7a1b16] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Remove ${name}`, onClick: () => {
+                    if (window.confirm(`Remove ${name} from the call?`)) {
+                        onKick?.();
+                    }
+                }, children: "Remove" }))] }));
+}
+export default function ParticipantsDrawer({ selfName, micOn, handRaised, participants, isSelfHost, isParticipantHost, onMute, onKick, forceMuteOnJoin, onToggleForceMuteOnJoin, hasPassword, onSetPassword, waitingRoomEnabled, onToggleWaitingRoomEnabled, waitingParticipants, onAdmit, onDeny, onClose, }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [onClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-20 bg-black/40", onClick: onClose, "aria-hidden": "true" }), _jsxs("aside", { role: "dialog", "aria-label": "Participants", className: "absolute z-20 inset-y-0 right-0 w-72 max-w-[85vw] flex flex-col bg-[#2b2d30] text-white shadow-xl", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-3 border-b border-white/10", children: [_jsxs("h2", { className: "text-sm font-medium", children: ["Participants (", participants.length + 1, ")"] }), _jsx("button", { type: "button", className: "w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": "Close participants", onClick: onClose, children: "\u2715" })] }), isSelfHost && (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm", children: [_jsx("input", { type: "checkbox", checked: forceMuteOnJoin, onChange: onToggleForceMuteOnJoin, className: "w-4 h-4" }), "Mute new participants on join"] })), isSelfHost && _jsx(PasswordSection, { hasPassword: hasPassword, onSetPassword: onSetPassword }), isSelfHost && (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm", children: [_jsx("input", { type: "checkbox", checked: waitingRoomEnabled, onChange: onToggleWaitingRoomEnabled, className: "w-4 h-4" }), "Require the host to admit participants"] })), isSelfHost && waitingRoomEnabled && (_jsx(WaitingSection, { waitingParticipants: waitingParticipants, onAdmit: onAdmit, onDeny: onDeny })), _jsxs("ul", { className: "flex-1 min-h-0 overflow-y-auto p-2 text-sm", children: [_jsx(Row, { name: selfName, isSelf: true, isHost: isSelfHost, micMuted: !micOn, handRaised: handRaised }), participants.map((p) => (_jsx(Row, { name: p.name, isHost: isParticipantHost(p.uid), micMuted: !p.audioOn, handRaised: p.handRaised, transport: p.transport, canModerate: isSelfHost, onMute: () => onMute(p.uid), onKick: () => onKick(p.uid) }, p.uid)))] })] })] }));
+}

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

@@ -14,3 +14,6 @@ export declare const ChevronUpIcon: () => React.JSX.Element;
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export declare const HandIcon: () => React.JSX.Element;
 export declare const EffectsIcon: () => React.JSX.Element;
+export declare const RotateIcon: () => React.JSX.Element;
+export declare const FlipIcon: () => React.JSX.Element;
+export declare const DiagnosticsIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -15,3 +15,6 @@ export const ChevronUpIcon = () => _jsx(Icon, { path: "M12 8l-6 6 1.41 1.41L12 1
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export const HandIcon = () => (_jsx("span", { className: "text-xl leading-none", "aria-hidden": "true", children: "\u270B" }));
 export const EffectsIcon = () => (_jsx(Icon, { path: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" }));
+export const RotateIcon = () => (_jsx(Icon, { path: "M12 6V2L7 7l5 5V8c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }));
+export const FlipIcon = () => (_jsx(Icon, { path: "M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z" }));
+export const DiagnosticsIcon = () => (_jsx(Icon, { path: "M22 12h-4l-3 9L9 3l-3 9H2v2h5.6l1.4-4.2L13.4 21 17 12h5v-2z" }));