@rapidmx/meet-plugin 0.9.2 → 0.10.0

package/apps/shared/webrtc/types.ts

@@ -29,9 +29,16 @@ export const REACTION_EMOJIS = ["👍", "👏", "❤️", "🎉", "😂", "😮"
  * grows other push consumers) can cheaply recognize and skip anything that isn't one of these.
  *
  * `hello`/`bye`/`presenter-claim`/`presenter-release`/`state`/`reaction` are broadcast (`to` left unset - every
- * participant is relevant); `offer`/`answer`/`ice-candidate` are point-to-point (`to` is the intended peer's uid) -
- * a recipient that isn't `to` (when set) ignores the message, since a channel's pub/sub fans every message out to
- * every subscriber, sender included.
+ * participant is relevant); `offer`/`answer`/`ice-candidate`/`mute-request`/`kicked` are point-to-point (`to` is the
+ * intended peer's uid) - a recipient that isn't `to` (when set) ignores the message, since a channel's pub/sub fans
+ * every message out to every subscriber, sender included.
+ *
+ * `mute-request`/`kicked` are host moderation signals (see `MeshConnectionManager`'s doc comment) - purely
+ * cooperative, like every other message here: the recipient's own client decides whether to honor one, and nothing
+ * on the wire distinguishes a genuine host's message from any other participant's, since this client protocol has
+ * no host identity of its own to check against server-side. `kicked` is paired with the sender also revoking the
+ * recipient's server-side channel grant (`BaseVideoMeetingRoute.revokeChannelGrant()`), which is enforced and does
+ * not depend on the recipient's client cooperating.
  */
 export interface SignalMessage {
     type: "video-meeting-signal";
@@ -45,7 +52,9 @@ export interface SignalMessage {
         | "presenter-release"
         | "state"
         | "reaction"
-        | "relay-fallback";
+        | "relay-fallback"
+        | "mute-request"
+        | "kicked";
     /** The sender's authenticated uid - the real caller's own uid when `join()` returned `authenticated: true`, else
      * the `guest:<random>` uid `BaseVideoMeetingRoute.join()` minted. The server refuses a published message whose
      * `from` isn't the authenticated caller's uid (it stops one participant speaking as another), so this must be
@@ -81,6 +90,28 @@ export interface SignalingChannel {
     onMessage(handler: (message: SignalMessage) => void): () => void;
 }
 
+/** One kind's RTP stream stats, as of one sample - cumulative counters (`bytesSent`/`bytesReceived`), not a rate,
+ * since a single `getStats()` snapshot has no "since when" to divide by; a caller wanting a bitrate keeps the
+ * previous sample itself and divides the difference by the elapsed time (see `MeshConnectionManager`'s poller).
+ * `undefined` for anything this browser (or this stream's direction - an audio-only connection reports nothing for
+ * video, and vice versa) doesn't report. */
+export interface RtpStreamDiagnostics {
+    packetsLost?: number;
+    /** Seconds. */
+    jitter?: number;
+    bytesSent?: number;
+    bytesReceived?: number;
+}
+
+/** One point-in-time sample of a connection's own quality stats, for the diagnostics panel. */
+export interface ConnectionDiagnostics {
+    /** Seconds - the selected candidate pair's own current round-trip time. `undefined` when this browser doesn't
+     * report one (a connection still connecting, or simply not supported). */
+    roundTripTimeSeconds?: number;
+    audio: RtpStreamDiagnostics;
+    video: RtpStreamDiagnostics;
+}
+
 /** The subset of `RTCRtpSender` `MeshConnectionManager.setLocalTrack()` uses. Every connection carries one audio and
  * one video sender for its whole life (see `MeshConnectionManager`'s doc comment), so turning a camera on or off,
  * switching a device or sharing a screen only ever replaces the track a sender sends - no renegotiation. A real
@@ -115,17 +146,24 @@ export interface RTCPeerConnectionLike {
     connectionState: string;
     /** Which path the connected pair is using - read from the selected candidate pair once `connectionState` is
      * `connected`. `"unknown"` when the browser does not report one (treated as direct by the caller). */
-    connectionType(): Promise<"p2p" | "turn" | "unknown">;
+    connectionType(): Promise<"p2p" | "turn" | "turn-tcp" | "unknown">;
+    /** One point-in-time sample of this connection's own quality stats, for the diagnostics panel - polled
+     * periodically and independently of `connectionType()` (see `MeshConnectionManager`'s doc comment). */
+    collectDiagnostics(): Promise<ConnectionDiagnostics>;
 }
 
 /** Which of the three media paths a participant's audio and video currently take, in the order they are tried:
  *
  * - `"p2p"`: a direct peer-to-peer WebRTC connection, the preferred path.
  * - `"turn"`: still WebRTC, but relayed through the TURN server, for a participant a direct path cannot reach.
+ * - `"turn-tcp"`: the same, but the relay hop itself is TCP (or `turns:`, TLS being TCP-based too) rather than UDP -
+ * a network that blocks UDP outright. TCP's reliable, ordered delivery means one lost or delayed packet stalls
+ * everything queued behind it instead of just being dropped, so this can sound like pauses rather than the clicks
+ * plain packet loss would - worth telling apart from ordinary `"turn"` for exactly that reason.
  * - `"websocket"`: not WebRTC at all - encoded frames proxied by this server over a WebSocket (see
  * `apps/shared/relay/`), the last resort when neither of the above connects.
  * - `"connecting"`: no path established yet. `"failed"`: every path this browser can try has failed. */
-export type MediaTransport = "connecting" | "p2p" | "turn" | "websocket" | "failed";
+export type MediaTransport = "connecting" | "p2p" | "turn" | "turn-tcp" | "websocket" | "failed";
 
 /** What `MeshConnectionManager` needs from the WebSocket media relay (`apps/shared/relay/RelayTransport.ts` implements
  * it) - declared here so the mesh, and its tests, depend on the shape alone. */
@@ -151,6 +189,10 @@ export interface MeshParticipant extends ParticipantState {
     name: string;
     /** 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). */
+    diagnostics?: ConnectionDiagnostics;
 }
 
 export type MeshEvent =
@@ -160,4 +202,10 @@ export type MeshEvent =
     | { type: "remote-stream"; uid: string; stream: MediaStream }
     | { type: "hand-raised"; uid: string; name: string }
     | { type: "reaction"; uid: string; name: string; emoji: string }
-    | { type: "presenter-changed"; uid: string | undefined };
+    | { type: "presenter-changed"; uid: string | undefined }
+    /** Someone (implicitly the host, on the client's own say-so - see `SignalMessage`'s doc comment) asked the local
+     * participant to mute. The caller (`_CallView.tsx`) mutes only if currently unmuted; this never unmutes anyone. */
+    | { type: "mute-requested" }
+    /** The local participant was removed from the call. The caller tears down the mesh and shows a distinct
+     * "removed by the host" state rather than the ordinary "you left" one. */
+    | { type: "kicked" };

package/dist/apps/meet/[token].d.ts

@@ -1,7 +1,10 @@
 /**
  * The public join/lobby/in-call page, `GET /meet/:token` - resolves an invitee's join token or a public meeting's
  * slug (`BaseVideoMeetingRoute.join()`, both shapes accepted identically - see `_meetApi.ts`), then walks through
- * `loading` -> `lobby` -> `in-call` -> `ended`.
+ * `loading` -> (`password`, only when a password is required) -> (`admission-request` then `waiting`, only when
+ * the meeting has a waiting room - see that phase's own render branch) -> `lobby` -> `in-call` -> `ended`. A
+ * waiting room takes over the entire gate (asking for a password too, on the same form) rather than stacking
+ * after a separate password screen - see `BaseVideoMeetingRoute.join()`'s own doc comment for why.
  *
  * ## Session-based name prefill - NOT implemented, and why
  *

package/dist/apps/meet/[token].js

@@ -6,7 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The public join/lobby/in-call page, `GET /meet/:token` - resolves an invitee's join token or a public meeting's
  * slug (`BaseVideoMeetingRoute.join()`, both shapes accepted identically - see `_meetApi.ts`), then walks through
- * `loading` -> `lobby` -> `in-call` -> `ended`.
+ * `loading` -> (`password`, only when a password is required) -> (`admission-request` then `waiting`, only when
+ * the meeting has a waiting room - see that phase's own render branch) -> `lobby` -> `in-call` -> `ended`. A
+ * waiting room takes over the entire gate (asking for a password too, on the same form) rather than stacking
+ * after a separate password screen - see `BaseVideoMeetingRoute.join()`'s own doc comment for why.
  *
  * ## Session-based name prefill - NOT implemented, and why
  *
@@ -35,11 +38,15 @@ import useBranding from "@rapidmx/web-client/lib/branding/useBranding.js";
 import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
 import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
 import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
 import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
 import { useLocalMedia } from "../shared/media/useLocalMedia.js";
 import MeetLobby from "./_MeetLobby.js";
 import CallView from "./_CallView.js";
-import { joinMeeting } from "./_meetApi.js";
+import { joinMeeting, pollAdmission, requestAdmission, verifyMeetingPassword, } from "./_meetApi.js";
+const INPUT_CLASS = "w-full text-base py-2.5 px-3.5 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
+/** How often `MeetJoinContent` polls while in the `"waiting"` phase. */
+const ADMISSION_POLL_MS = 3000;
 export default function MeetJoinPage({ params }) {
     const { branding } = useBranding();
     return _jsx(MeetJoinContent, { token: params.token, branding: branding });
@@ -52,16 +59,48 @@ function MeetJoinContent({ token, branding }) {
     const [name, setName] = useState("");
     const [loadError, setLoadError] = useState(null);
     const [joinResult, setJoinResult] = useState(null);
-    const media = useLocalMedia({ effectsAssetsUrl: joinResult?.effectsAssetsUrl });
+    /** The restricted `PublicVideoMeeting` `joinMeeting()` returned while this meeting required a password - just
+     * enough to show the password prompt's own title/host, since `joinResult` itself stays unset until one is
+     * verified (see `handleSubmitPassword()`). Only read while `phase === "password"`. */
+    const [passwordMeeting, setPasswordMeeting] = useState(null);
+    const [passwordInput, setPasswordInput] = useState("");
+    const [passwordError, setPasswordError] = useState(null);
+    /** The restricted `PublicVideoMeeting` `joinMeeting()`/`requestAdmission()` returned while this meeting has a
+     * waiting room - read on both the `"admission-request"` and `"waiting"` screens. */
+    const [admissionMeeting, setAdmissionMeeting] = useState(null);
+    const [admissionName, setAdmissionName] = useState("");
+    const [admissionPassword, setAdmissionPassword] = useState("");
+    const [admissionError, setAdmissionError] = useState(null);
+    /** The guest token `requestAdmission()` minted, to poll with (`Authorization` header - a guest has no session
+     * cookie of their own). `undefined` for an already-authenticated real caller, whose existing session cookie
+     * already identifies them to `pollAdmission()` with no header needed. */
+    const [pendingGuestToken, setPendingGuestToken] = useState(undefined);
+    /** Set only when the call ended without the participant's own action (currently: kicked by the host) - see
+     * `CallView`'s `onLeave` doc comment. Shown instead of the ordinary "you left" message; also hides "Rejoin
+     * meeting", since a kicked participant's server-side channel grant has just been revoked and a rejoin attempt
+     * would only fail. */
+    const [endedReason, setEndedReason] = useState(undefined);
+    const media = useLocalMedia({ effectsAssetsUrl: joinResult?.effectsAssetsUrl, forceMuteOnJoin: joinResult?.meeting.forceMuteOnJoin });
     const { release } = media;
     React.useEffect(() => {
         let cancelled = false;
         joinMeeting(token)
             .then((result) => {
-            if (!cancelled) {
-                setJoinResult(result);
-                setPhase("lobby");
+            if (cancelled) {
+                return;
+            }
+            if ("requiresAdmission" in result) {
+                setAdmissionMeeting(result.meeting);
+                setPhase("admission-request");
+                return;
             }
+            if ("requiresPassword" in result) {
+                setPasswordMeeting(result.meeting);
+                setPhase("password");
+                return;
+            }
+            setJoinResult(result);
+            setPhase("lobby");
         })
             .catch((err) => {
             if (cancelled) {
@@ -82,8 +121,69 @@ function MeetJoinContent({ token, branding }) {
         setName(joinName);
         setPhase("in-call");
     }
-    function handleLeave() {
+    async function handleSubmitPassword(e) {
+        e.preventDefault();
+        setPasswordError(null);
+        try {
+            const result = await verifyMeetingPassword(token, passwordInput);
+            setJoinResult(result);
+            setPhase("lobby");
+        }
+        catch (err) {
+            setPasswordError(err instanceof ApiRequestError && err.status === 403 ? "Incorrect password." : "Something went wrong. Try again.");
+        }
+    }
+    async function handleRequestAdmission(e) {
+        e.preventDefault();
+        setAdmissionError(null);
+        try {
+            const result = await requestAdmission(token, {
+                name: admissionName.trim(),
+                ...(admissionMeeting?.hasPassword && { password: admissionPassword }),
+            });
+            setName(admissionName.trim());
+            setPendingGuestToken(result.token);
+            setPhase("waiting");
+        }
+        catch (err) {
+            setAdmissionError(err instanceof ApiRequestError && err.status === 403 ? "Incorrect password." : "Something went wrong. Try again.");
+        }
+    }
+    // Polls while waiting for the host to respond - stops as soon as this phase is left, one way or the other.
+    React.useEffect(() => {
+        if (phase !== "waiting") {
+            return;
+        }
+        let cancelled = false;
+        const poll = async () => {
+            try {
+                const result = await pollAdmission(token, pendingGuestToken);
+                if (cancelled || "requiresAdmission" in result) {
+                    return;
+                }
+                setJoinResult(result);
+                setPhase("lobby");
+            }
+            catch (err) {
+                if (cancelled || !(err instanceof ApiRequestError) || err.status !== 403) {
+                    // A transient failure (network blip, server hiccup) - stay on this screen and try again next
+                    // tick, rather than giving up on what might just be one bad request.
+                    return;
+                }
+                setAdmissionError(err.message || "The host did not admit you to this meeting.");
+                setPhase("denied");
+            }
+        };
+        void poll();
+        const interval = setInterval(() => void poll(), ADMISSION_POLL_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [phase, token, pendingGuestToken]);
+    function handleLeave(reason) {
         release();
+        setEndedReason(reason);
         setPhase("ended");
     }
     if (phase === "in-call" && joinResult) {
@@ -93,7 +193,7 @@ function MeetJoinContent({ token, branding }) {
             // guest token to apply as a cookie at all, and `GuestSignalingClient` relies entirely on the
             // browser's own already-existing `jwt` session cookie instead (see its own doc comment and
             // `VideoMeetingJoinResult`'s doc comment in `_meetApi.ts`).
-            token: joinResult.token, selfUid: joinResult.selfUid, selfName: name, meetingTitle: joinResult.meeting.title, iceServers: joinResult.iceServers, relayEnabled: joinResult.relayEnabled, media: media, onLeave: handleLeave }));
+            token: joinResult.token, selfUid: joinResult.selfUid, selfName: name, meetingTitle: joinResult.meeting.title, iceServers: joinResult.iceServers, relayEnabled: joinResult.relayEnabled, hostUid: joinResult.meeting.hostUid, initialForceMuteOnJoin: !!joinResult.meeting.forceMuteOnJoin, initialHasPassword: !!joinResult.meeting.hasPassword, initialWaitingRoomEnabled: !!joinResult.meeting.waitingRoomEnabled, media: media, onLeave: handleLeave }));
     }
     let content;
     if (phase === "loading") {
@@ -102,8 +202,20 @@ function MeetJoinContent({ token, branding }) {
     else if (phase === "not-found") {
         content = (_jsx(MeetCard, { children: _jsx(Alert, { children: loadError ?? "This meeting link isn't valid." }) }));
     }
+    else if (phase === "password") {
+        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: passwordMeeting?.title }), passwordMeeting?.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", passwordMeeting.hostDisplayName] }), _jsx("p", { className: "text-base text-text-muted mt-4 mb-3", children: "This meeting requires a password to join." }), _jsxs("form", { onSubmit: (e) => void handleSubmitPassword(e), children: [_jsx(FormField, { label: "Password", htmlFor: "meet-password", children: _jsx("input", { id: "meet-password", type: "password", autoFocus: true, className: INPUT_CLASS, value: passwordInput, onChange: (e) => setPasswordInput(e.target.value) }) }), passwordError && _jsx(Alert, { children: passwordError }), _jsx(Button, { type: "submit", className: "!w-auto mt-3", disabled: !passwordInput, children: "Join meeting" })] })] }));
+    }
+    else if (phase === "admission-request") {
+        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: admissionMeeting?.title }), admissionMeeting?.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", admissionMeeting.hostDisplayName] }), _jsx("p", { className: "text-base text-text-muted mt-4 mb-3", children: "The host must let you in before you can join." }), _jsxs("form", { onSubmit: (e) => void handleRequestAdmission(e), children: [_jsx(FormField, { label: "Your name", htmlFor: "admission-name", children: _jsx("input", { id: "admission-name", type: "text", autoFocus: true, className: INPUT_CLASS, value: admissionName, onChange: (e) => setAdmissionName(e.target.value) }) }), admissionMeeting?.hasPassword && (_jsx(FormField, { label: "Password", htmlFor: "admission-password", children: _jsx("input", { id: "admission-password", type: "password", className: `${INPUT_CLASS} mt-3`, value: admissionPassword, onChange: (e) => setAdmissionPassword(e.target.value) }) })), admissionError && _jsx(Alert, { children: admissionError }), _jsx(Button, { type: "submit", className: "!w-auto mt-3", disabled: !admissionName.trim() || (!!admissionMeeting?.hasPassword && !admissionPassword), children: "Ask to join" })] })] }));
+    }
+    else if (phase === "waiting") {
+        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: admissionMeeting?.title }), _jsx("p", { className: "text-base text-text-muted mt-4", children: "Waiting for the host to let you in\u2026" })] }));
+    }
+    else if (phase === "denied") {
+        content = (_jsx(MeetCard, { children: _jsx(Alert, { children: admissionError ?? "The host did not admit you to this meeting." }) }));
+    }
     else if (phase === "ended") {
-        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight mb-2", children: "You left the meeting" }), _jsx("p", { className: "text-base text-text-muted mb-4", children: "You can close this page now, or rejoin." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => setPhase("lobby"), children: "Rejoin meeting" })] }));
+        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight mb-2", children: endedReason ? "Removed from the meeting" : "You left the meeting" }), _jsx("p", { className: "text-base text-text-muted mb-4", children: endedReason ?? "You can close this page now, or rejoin." }), !endedReason && (_jsx(Button, { type: "button", className: "!w-auto", onClick: () => setPhase("lobby"), children: "Rejoin meeting" }))] }));
     }
     else {
         // phase === "lobby" (joinResult is always set by then - see the effect above).

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

@@ -10,14 +10,22 @@
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
  */
 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";
 export type CallViewMode = "grid" | "focus";
 export interface CallControlsProps {
     media: LocalMedia;
+    selfName: string;
+    participants: MeshParticipant[];
     isPresenting: boolean;
     /** Someone else is presenting - the share button is disabled and explains why. */
     presentingElsewhereName?: string;
     onToggleShare: () => void;
+    /** The current presenter's own rotate/flip correction - shown (and changeable) only while `isPresenting`. */
+    screenTransform: ScreenTransformState;
+    onRotateScreen: () => void;
+    onFlipScreen: () => void;
     handRaised: boolean;
     onToggleHand: () => void;
     onReaction: (emoji: string) => void;
@@ -29,4 +37,4 @@ export interface CallControlsProps {
 export declare function LevelBars({ level }: {
     level: number;
 }): React.JSX.Element;
-export default function CallControls({ media, isPresenting, presentingElsewhereName, onToggleShare, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }: CallControlsProps): React.JSX.Element;
+export default function CallControls({ media, selfName, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }: CallControlsProps): React.JSX.Element;

package/dist/apps/meet/_CallControls.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -17,8 +17,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
+import DiagnosticsPanel from "./_DiagnosticsPanel.js";
 import EffectsPanel from "./_EffectsPanel.js";
-import { ChevronUpIcon, EffectsIcon, EmojiIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+import { ChevronUpIcon, DiagnosticsIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
 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]";
@@ -27,7 +28,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, isPresenting, presentingElsewhereName, onToggleShare, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }) {
+export default function CallControls({ media, selfName, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }) {
     const [openMenu, setOpenMenu] = useState(null);
     const barRef = useRef(null);
     const shareDisabled = !isPresenting && !!presentingElsewhereName;
@@ -56,10 +57,10 @@ export default function CallControls({ media, isPresenting, presentingElsewhereN
     function toggleMenu(menu) {
         setOpenMenu((prev) => (prev === menu ? null : menu));
     }
-    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}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, 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, {}) }), _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: () => {
+    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}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, 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}`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", 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}`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${openMenu === "diagnostics" ? ACTIVE : NEUTRAL}`, "aria-label": "Call diagnostics", "aria-haspopup": "dialog", "aria-expanded": openMenu === "diagnostics", onClick: () => toggleMenu("diagnostics"), children: _jsx(DiagnosticsIcon, {}) }), openMenu === "diagnostics" && (_jsx("div", { role: "dialog", "aria-label": "Call diagnostics", className: "absolute bottom-full mb-3 right-0 w-80 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(DiagnosticsPanel, { selfName: selfName, micOn: media.micOn, cameraOn: media.cameraOn, participants: participants }) }))] }), _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

@@ -45,9 +45,29 @@ export interface CallViewProps {
     /** Whether the server offers the WebSocket media relay, the last-resort path for a participant neither a direct
      * connection nor the TURN server can reach - `VideoMeetingJoinResult.relayEnabled`. Off when absent. */
     relayEnabled?: boolean;
+    /** The meeting's host account uid (`PublicVideoMeeting.hostUid`) - this client's only source of a "host"
+     * identity, purely for deciding which controls to show (see `BaseVideoMeetingRoute`'s class doc comment on why
+     * this is a client-side-only check, not a server-enforced one for every moderation action). Absent when the
+     * server couldn't resolve one, in which case nobody sees host controls. */
+    hostUid?: string;
+    /** `PublicVideoMeeting.forceMuteOnJoin` as of this call's own `join()` - the starting value for the host's
+     * toggle in the participants drawer, which this view then owns and keeps current itself (see
+     * `handleToggleForceMuteOnJoin()`). Does not update if changed elsewhere while this view is mounted - there is
+     * no signal for that today, matching every other meeting-settings field's lack of live sync. */
+    initialForceMuteOnJoin?: boolean;
+    /** `PublicVideoMeeting.hasPassword` as of this call's own `join()` - the starting value for the host's password
+     * section in the participants drawer, same "owned and kept current by this view" shape as
+     * `initialForceMuteOnJoin`. */
+    initialHasPassword?: boolean;
+    /** `PublicVideoMeeting.waitingRoomEnabled` as of this call's own `join()` - the starting value for the host's
+     * waiting-room toggle, same "owned and kept current by this view" shape as `initialForceMuteOnJoin`. */
+    initialWaitingRoomEnabled?: boolean;
     /** The camera and microphone, owned by the page (`[token].tsx`) - the lobby's tracks carried into the call. */
     media: LocalMedia;
-    onLeave: () => void;
+    /** Called once the participant leaves, for any reason. `reason` is set only when the call ended without the
+     * participant's own action - currently, being kicked by the host - so the caller can show a distinct message
+     * instead of the ordinary "you left" one; omitted for an ordinary voluntary leave. */
+    onLeave: (reason?: string) => void;
 }
 /** 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). */
@@ -61,4 +81,10 @@ export declare function computeMainUid(options: {
  * from two devices - or two tabs - is two participants rather than one that ignores itself. It travels as the
  * `peer` of each message; `from` stays the exact authenticated uid, which the server requires. */
 export declare function newPeerId(selfUid: string): string;
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }: CallViewProps): React.JSX.Element;
+/** 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 declare function accountUidOf(peerUid: string): string;
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, hostUid, initialForceMuteOnJoin, initialHasPassword, initialWaitingRoomEnabled, media, onLeave, }: CallViewProps): React.JSX.Element;