@rapidmx/meet-plugin 0.9.2 → 0.10.0

package/apps/meet/_ParticipantsDrawer.tsx

@@ -0,0 +1,341 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 React, { useEffect, useState } from "react";
+import type { MeshParticipant } from "../shared/webrtc/types.js";
+import type { WaitingParticipant } from "./_meetApi.js";
+import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
+import { MicOffIcon } from "./_icons.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;
+}
+
+/** 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 }: { hasPassword: boolean; onSetPassword: (password: string | null) => Promise<void> }) {
+    const [input, setInput] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    async function submit(password: string | null) {
+        setBusy(true);
+        setError(null);
+        try {
+            await onSetPassword(password);
+            setInput("");
+        } catch {
+            setError("Could not save - try again.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <div className="px-3 py-2 border-b border-white/10 text-sm">
+            <p className="text-white/70 mb-1.5">{hasPassword ? "Password protection is on." : "No password required to join."}</p>
+            <form
+                className="flex gap-2"
+                onSubmit={(event) => {
+                    event.preventDefault();
+                    if (input) {
+                        void submit(input);
+                    }
+                }}
+            >
+                <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}
+                />
+                <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}
+                >
+                    {hasPassword ? "Change" : "Set"}
+                </button>
+            </form>
+            {hasPassword && (
+                <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)}
+                >
+                    Remove password
+                </button>
+            )}
+            {error && <p className="text-[#f2b8b5] text-xs mt-1.5">{error}</p>}
+        </div>
+    );
+}
+
+/** 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,
+}: {
+    waitingParticipants: WaitingParticipant[];
+    onAdmit: (uid: string) => void;
+    onDeny: (uid: string) => void;
+}) {
+    return (
+        <div className="px-3 py-2 border-b border-white/10 text-sm">
+            <p className="text-xs font-semibold uppercase tracking-wide text-white/60 mb-1.5">Waiting to join</p>
+            {waitingParticipants.length === 0 ? (
+                <p className="text-white/70">Nobody is waiting right now.</p>
+            ) : (
+                <ul>
+                    {waitingParticipants.map((p) => (
+                        <li key={p.uid} className="flex items-center gap-2 py-1">
+                            <span className="flex-1 min-w-0 truncate">{p.name}</span>
+                            <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)}
+                            >
+                                Admit
+                            </button>
+                            <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)}
+                            >
+                                Deny
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
+
+function Row({
+    name,
+    isSelf,
+    isHost,
+    micMuted,
+    handRaised,
+    transport,
+    canModerate,
+    onMute,
+    onKick,
+}: {
+    name: string;
+    isSelf?: boolean;
+    isHost: boolean;
+    micMuted: boolean;
+    handRaised: boolean;
+    transport?: MeshParticipant["transport"];
+    /** Whether to show this row's Mute/Remove buttons - `isSelfHost && !isSelf`, decided by the caller. */
+    canModerate?: boolean;
+    onMute?: () => void;
+    onKick?: () => void;
+}) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
+    return (
+        <li className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5">
+            <span className="flex-1 min-w-0 truncate">
+                {name}
+                {isSelf ? " (you)" : ""}
+            </span>
+            {isHost && <span className="px-2 py-0.5 rounded text-xs whitespace-nowrap bg-[#a8c7fa] text-[#062e6f]">Host</span>}
+            {handRaised && (
+                <span role="img" aria-label="Hand raised">
+                    ✋
+                </span>
+            )}
+            {micMuted && (
+                <span className="w-4 h-4 text-white/70 [&>svg]:w-4 [&>svg]:h-4" role="img" aria-label="Muted">
+                    <MicOffIcon />
+                </span>
+            )}
+            {badge && (
+                <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}
+                >
+                    {badge.label}
+                </span>
+            )}
+            {canModerate && !micMuted && (
+                <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}
+                >
+                    Mute
+                </button>
+            )}
+            {canModerate && (
+                <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?.();
+                        }
+                    }}
+                >
+                    Remove
+                </button>
+            )}
+        </li>
+    );
+}
+
+export default function ParticipantsDrawer({
+    selfName,
+    micOn,
+    handRaised,
+    participants,
+    isSelfHost,
+    isParticipantHost,
+    onMute,
+    onKick,
+    forceMuteOnJoin,
+    onToggleForceMuteOnJoin,
+    hasPassword,
+    onSetPassword,
+    waitingRoomEnabled,
+    onToggleWaitingRoomEnabled,
+    waitingParticipants,
+    onAdmit,
+    onDeny,
+    onClose,
+}: ParticipantsDrawerProps) {
+    useEffect(() => {
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [onClose]);
+
+    return (
+        <>
+            <div className="absolute inset-0 z-20 bg-black/40" onClick={onClose} aria-hidden="true" />
+            <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()}
+            >
+                <div className="flex items-center justify-between gap-2 px-3 py-3 border-b border-white/10">
+                    <h2 className="text-sm font-medium">Participants ({participants.length + 1})</h2>
+                    <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}
+                    >
+                        ✕
+                    </button>
+                </div>
+                {isSelfHost && (
+                    <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
+                        <input type="checkbox" checked={forceMuteOnJoin} onChange={onToggleForceMuteOnJoin} className="w-4 h-4" />
+                        Mute new participants on join
+                    </label>
+                )}
+                {isSelfHost && <PasswordSection hasPassword={hasPassword} onSetPassword={onSetPassword} />}
+                {isSelfHost && (
+                    <label className="flex items-center gap-2 px-3 py-2 border-b border-white/10 text-sm">
+                        <input type="checkbox" checked={waitingRoomEnabled} onChange={onToggleWaitingRoomEnabled} className="w-4 h-4" />
+                        Require the host to admit participants
+                    </label>
+                )}
+                {isSelfHost && waitingRoomEnabled && (
+                    <WaitingSection waitingParticipants={waitingParticipants} onAdmit={onAdmit} onDeny={onDeny} />
+                )}
+                <ul className="flex-1 min-h-0 overflow-y-auto p-2 text-sm">
+                    <Row name={selfName} isSelf isHost={isSelfHost} micMuted={!micOn} handRaised={handRaised} />
+                    {participants.map((p) => (
+                        <Row
+                            key={p.uid}
+                            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)}
+                        />
+                    ))}
+                </ul>
+            </aside>
+        </>
+    );
+}

package/apps/meet/_icons.tsx

@@ -56,3 +56,15 @@ export const HandIcon = () => (
 export const EffectsIcon = () => (
     <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 = () => (
+    <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 = () => (
+    <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 = () => (
+    <Icon path="M22 12h-4l-3 9L9 3l-3 9H2v2h5.6l1.4-4.2L13.4 21 17 12h5v-2z" />
+);

package/apps/meet/_meetApi.ts

@@ -29,6 +29,19 @@ export interface PublicVideoMeeting {
     visibility: VideoMeetingVisibility;
     status: VideoMeetingStatus;
     hostDisplayName?: string;
+    /** The account uid that owns the meeting - the sole source of a "host" identity on the client. Absent when the
+     * server can't resolve one (an orphaned mailbox, or a server that predates this field), in which case no host
+     * controls are shown to anyone. */
+    hostUid?: string;
+    /** When `true`, a joining participant's microphone starts muted - see `useLocalMedia`'s `forceMuteOnJoin`
+     * option, which this is threaded into. Absent reads as `false`. */
+    forceMuteOnJoin?: boolean;
+    /** Whether this meeting currently requires a password - never the password or its hash, just whether one is
+     * set. Absent reads as `false`. */
+    hasPassword?: boolean;
+    /** Whether this meeting currently requires the host to admit each participant before they join - see
+     * `requestAdmission()`. Absent reads as `false`. */
+    waitingRoomEnabled?: boolean;
 }
 
 /**
@@ -59,6 +72,34 @@ export interface VideoMeetingJoinResult {
     effectsAssetsUrl?: string;
 }
 
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `VideoMeetingPasswordRequiredResult` - returned by `joinMeeting()` in place
+ * of a `VideoMeetingJoinResult` when the meeting requires a password that hasn't been submitted yet. Carries only
+ * enough to show a password prompt (the meeting's title/host); nothing here grants anything. Narrow on
+ * `"requiresPassword" in result && result.requiresPassword`. */
+export interface VideoMeetingPasswordRequiredResult {
+    meeting: PublicVideoMeeting;
+    requiresPassword: true;
+}
+
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `VideoMeetingAdmissionRequiredResult` - returned by `requestAdmission()`
+ * (and re-returned by `pollAdmission()`) while a `waitingRoomEnabled` meeting's admission request is still
+ * pending. Unlike `VideoMeetingPasswordRequiredResult`, this carries `selfUid` (and, for a guest, `token`) - a
+ * caller needs a stable, authenticated identity to poll with. `joinMeeting()` itself also answers this shape, with
+ * none of those fields, when a waiting room applies and no request has been filed yet. Narrow on
+ * `"requiresAdmission" in result`. */
+export interface VideoMeetingAdmissionRequiredResult {
+    meeting: PublicVideoMeeting;
+    requiresAdmission: true;
+    authenticated?: boolean;
+    selfUid?: string;
+    token?: string;
+    expiresAt?: string;
+}
+
+/** `joinMeeting()`'s actual return type - see `VideoMeetingPasswordRequiredResult`'s and
+ * `VideoMeetingAdmissionRequiredResult`'s own doc comments. */
+export type VideoMeetingJoinResponse = VideoMeetingJoinResult | VideoMeetingPasswordRequiredResult | VideoMeetingAdmissionRequiredResult;
+
 /** Resolves a join token (an invitee's own link) or a public meeting's slug to its meeting info, ICE servers, and
  * either a short-lived guest signaling token (the common anonymous case) or confirmation that the caller's own
  * existing session already grants them signaling access (`authenticated: true` - see
@@ -67,6 +108,105 @@ export interface VideoMeetingJoinResult {
  * private/public token shape for what it's being used against - the caller (`[token].tsx`) shows a single,
  * friendly "this meeting link isn't valid" state for all of those rather than trying to distinguish them, matching
  * `BaseVideoMeetingRoute.requireMeetingByToken()`'s own explicit "never leak which almost-matched" posture. */
-export function joinMeeting(token: string): Promise<VideoMeetingJoinResult> {
+export function joinMeeting(token: string): Promise<VideoMeetingJoinResponse> {
     return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}`);
 }
+
+/** Submits a password for a meeting `joinMeeting()` reported `requiresPassword` for. On success, returns an
+ * ordinary granted `VideoMeetingJoinResult` - the same shape and same meaning as `joinMeeting()`'s own non-password
+ * case. Rejects with `ApiRequestError` (status `403`) for a wrong or missing password. */
+export function verifyMeetingPassword(token: string, password: string): Promise<VideoMeetingJoinResult> {
+    return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}/verify`, {
+        method: "POST",
+        body: JSON.stringify({ password }),
+    });
+}
+
+/** Sets, replaces, or removes (`password: null`) the meeting's join password - host only, enforced the same way
+ * as every other owner-side video-meeting update. Hashed server-side; the plaintext is never stored or returned. */
+export function setMeetingPassword(meetingUid: string, password: string | null): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}`, {
+        method: "PUT",
+        body: JSON.stringify({ password }),
+    });
+}
+
+/** Files an admission request for a meeting `joinMeeting()` reported `requiresAdmission` for - `password` only
+ * when `meeting.hasPassword` is also set (both are checked together on this one call, never in two steps). On
+ * success returns `VideoMeetingAdmissionRequiredResult` with a `selfUid` (and, for a guest, `token`) to poll with
+ * via `pollAdmission()` - nothing is granted yet. Rejects with `ApiRequestError` (status `403`) for a wrong
+ * password, or `400` if `meeting.hasPassword` and no password was given. */
+export function requestAdmission(token: string, body: { name: string; password?: string }): Promise<VideoMeetingAdmissionRequiredResult> {
+    return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}/verify`, {
+        method: "POST",
+        body: JSON.stringify(body),
+    });
+}
+
+/** Polls whether the host has responded to a pending admission request - authenticated as whichever identity
+ * `requestAdmission()` (or a previous poll) returned: `guestToken`, when given, is sent as an `Authorization`
+ * header (a guest has no session cookie of their own); omitted for an already-authenticated real caller, whose
+ * existing session cookie already identifies them. Resolves to a granted `VideoMeetingJoinResult` once admitted,
+ * or re-resolves to `VideoMeetingAdmissionRequiredResult` while still pending. Rejects with `ApiRequestError`
+ * (status `403`) once denied, or `404` if this identity never requested admission (or already polled past a final
+ * answer). */
+export function pollAdmission(token: string, guestToken?: string): Promise<VideoMeetingJoinResult | VideoMeetingAdmissionRequiredResult> {
+    return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}/status`, {
+        headers: guestToken ? { Authorization: `jwt ${guestToken}` } : undefined,
+    });
+}
+
+/** One pending admission request, as `listWaitingParticipants()` returns it. */
+export interface WaitingParticipant {
+    uid: string;
+    name: string;
+    requestedAt: string;
+}
+
+/** Lists a meeting's pending admission requests, oldest first - host only. */
+export function listWaitingParticipants(meetingUid: string): Promise<WaitingParticipant[]> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}/waiting`);
+}
+
+/** Admits a pending admission request - host only. The requester's own next `pollAdmission()` call completes
+ * their join; this alone does not notify them of anything. A no-op if `uid` has no pending request. */
+export function admitParticipant(meetingUid: string, uid: string): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}/admit/${encodeURIComponent(uid)}`, { method: "POST" });
+}
+
+/** Denies a pending admission request - host only. The requester's own next `pollAdmission()` call then rejects
+ * with a 403. A no-op if `uid` has no pending request. */
+export function denyParticipant(meetingUid: string, uid: string): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}/deny/${encodeURIComponent(uid)}`, { method: "POST" });
+}
+
+/** Sets whether the meeting requires the host to admit each participant (`PublicVideoMeeting.waitingRoomEnabled`) -
+ * host only, enforced the same way as every other owner-side video-meeting update. Takes effect for anyone who
+ * joins (or reloads the join link and joins again) after this call resolves. */
+export function setWaitingRoomEnabled(meetingUid: string, waitingRoomEnabled: boolean): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}`, {
+        method: "PUT",
+        body: JSON.stringify({ waitingRoomEnabled }),
+    });
+}
+
+/** Removes a participant from the meeting - host only, enforced server-side with the caller's own authenticated
+ * session (the same mailbox-ACL check every other owner-side video-meeting route uses), not by anything the
+ * client claims. Revokes `uid`'s grant on the meeting's own push channel, so they can no longer signal or relay
+ * media even if their client ignores the cooperative "kicked" signal a host's UI sends alongside this
+ * (`MeshConnectionManager.sendKick()`). `uid` is the participant's real account uid (`MeshParticipant.uid` minus
+ * its tab-scoped suffix - see `_CallView.tsx`'s `accountUidOf()`), not their tab-scoped peer id. */
+export function kickParticipant(meetingUid: string, uid: string): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}/kick/${encodeURIComponent(uid)}`, { method: "POST" });
+}
+
+/** Sets whether a newly joining participant starts muted (`PublicVideoMeeting.forceMuteOnJoin`) - host only,
+ * enforced the same way as every other owner-side video-meeting update. Takes effect for anyone who joins (or
+ * reloads the join link and joins again) after this call resolves; it does not retroactively mute anyone already
+ * in the call - the host's own "Mute" button (see `kickParticipant()`) is the tool for that. */
+export function setForceMuteOnJoin(meetingUid: string, forceMuteOnJoin: boolean): Promise<void> {
+    return apiFetch(`/mail/video-meetings/${encodeURIComponent(meetingUid)}`, {
+        method: "PUT",
+        body: JSON.stringify({ forceMuteOnJoin }),
+    });
+}

package/apps/shared/media/deviceMedia.ts

@@ -50,10 +50,28 @@ const UNSUPPORTED_ERROR: MediaAccessError = {
     message: "This browser (or this page's connection) doesn't support camera/microphone access. Try a modern browser over HTTPS.",
 };
 
+/** A "no such device" error naming exactly what was missing: just the microphone, just the camera, or - when
+ * both were asked for (or a caller doesn't say, e.g. `listDevices()`/`requestDisplayMedia()`'s own failures, which
+ * have no single "kind" to name) - both. Exported so `useLocalMedia.ts`'s `acquireBoth()` can build the same
+ * "both missing" message after finding out separately that neither device exists, rather than only being able to
+ * report whichever one it happened to ask about last. */
+export function notFoundError(wantsAudio: boolean, wantsVideo: boolean): MediaAccessError {
+    const message =
+        wantsAudio && !wantsVideo
+            ? "No microphone was found on this device."
+            : wantsVideo && !wantsAudio
+              ? "No camera was found on this device."
+              : "No camera or microphone was found on this device.";
+    return { kind: "not-found", message };
+}
+
 /** Maps a `getUserMedia()`/`getDisplayMedia()`/`enumerateDevices()` rejection to a friendly, already-complete
  * message - the handful of `DOMException` names a browser actually raises for these calls, matched by name rather
- * than `instanceof DOMException` (a test's fake rejection need not be a real `DOMException`). */
-export function classifyMediaError(err: unknown): MediaAccessError {
+ * than `instanceof DOMException` (a test's fake rejection need not be a real `DOMException`). `requested` is the
+ * constraints the failed call actually asked for, so a "not found" error can name just the camera or just the
+ * microphone rather than always blaming both - omitted (by `listDevices()`/`requestDisplayMedia()`, neither of
+ * which asks for one kind specifically) it's treated as having asked for both. */
+export function classifyMediaError(err: unknown, requested?: MediaStreamConstraints): MediaAccessError {
     const name: string = err instanceof Error ? err.name : "";
     switch (name) {
         case "NotAllowedError":
@@ -61,7 +79,7 @@ export function classifyMediaError(err: unknown): MediaAccessError {
             return { kind: "permission-denied", message: "Camera/microphone access was denied. Allow access in your browser and try again." };
         case "NotFoundError":
         case "OverconstrainedError":
-            return { kind: "not-found", message: "No camera or microphone was found on this device." };
+            return notFoundError(requested ? !!requested.audio : true, requested ? !!requested.video : true);
         default:
             return { kind: "unknown", message: "Could not access your camera or microphone. Please try again." };
     }
@@ -107,7 +125,7 @@ export async function requestUserMedia(
     try {
         return { ok: true, value: await devices.getUserMedia(constraints) };
     } catch (err) {
-        return { ok: false, error: classifyMediaError(err) };
+        return { ok: false, error: classifyMediaError(err, constraints) };
     }
 }