@rapidmx/meet-plugin 0.13.1 → 0.14.0

package/apps/meet/_ParticipantTile.tsx

@@ -1,169 +1,169 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-/** One participant's video tile - used by the grid, the focused/thumbnail-strip layouts and the local participant's
- * corner tile in `_CallView.tsx`. Renders a placeholder (the participant's initial) instead of a `<video>` element
- * whenever there's no stream or their camera is off, rather than showing a black/frozen frame.
- *
- * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
- * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
- * in the current layout - can never silence anyone.
- *
- * The local tile is shown mirrored (`scaleX(-1)`), like a real mirror, so a participant's own movements feel
- * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
- * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
- * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
- * reflection, and mirroring it would show it backwards to no one but themselves. */
-import React, { useEffect, useRef } from "react";
-import type { MediaTransport } from "../shared/webrtc/types.js";
-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.
- * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
- * slightly different words. */
-export const TRANSPORT_BADGES: Partial<Record<MediaTransport, { label: string; title: string }>> = {
-    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.",
-    },
-    failed: { label: "Can't connect", title: "This participant could not be reached from your network." },
-};
-
-/** A short line saying the connection is still being made, with a spinner - a polite live region (not `role="status"`,
- * which the call view's own announcement region already is), so a participant who cannot see the tile still learns
- * why nothing is happening yet. */
-function StatusPill({ status, className }: { status: string; className?: string }) {
-    return (
-        <span
-            aria-live="polite"
-            data-testid="tile-status"
-            className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/60 text-white text-xs ${className ?? ""}`}
-        >
-            <span className="inline-block w-3 h-3 rounded-full border-2 border-white/30 border-t-white animate-spin" aria-hidden="true" />
-            {status}
-        </span>
-    );
-}
-
-export interface ParticipantTileProps {
-    name: string;
-    stream?: MediaStream | null;
-    isLocal?: boolean;
-    /** Shows the initial instead of the video. */
-    cameraOff?: boolean;
-    micMuted?: boolean;
-    handRaised?: boolean;
-    /** How this participant's media reaches you - a badge is shown for everything but a direct or still-connecting one. */
-    transport?: MediaTransport;
-    /** Says the connection is still being made, e.g. "Connecting..." on the local tile and "Awaiting connection..." on a
-     * participant's - shown with a spinner until the caller clears it. */
-    status?: string;
-    /** Highlights this tile as the current presenter/focus. */
-    isFocused?: boolean;
-    /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
-    contain?: boolean;
-    /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
-     * mirrored. Default `true`; see this module's doc comment. */
-    mirrored?: boolean;
-    onClick?: () => void;
-    className?: string;
-}
-
-function initialOf(name: string): string {
-    return (Array.from(name.trim())[0] ?? "?").toUpperCase();
-}
-
-export default function ParticipantTile({
-    name,
-    stream,
-    isLocal,
-    cameraOff,
-    micMuted,
-    handRaised,
-    transport,
-    status,
-    isFocused,
-    contain,
-    mirrored = true,
-    onClick,
-    className,
-}: ParticipantTileProps) {
-    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const showVideo = !!stream && !cameraOff;
-
-    // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
-    useEffect(() => {
-        if (videoRef.current) {
-            videoRef.current.srcObject = stream ?? null;
-        }
-    }, [stream, showVideo]);
-
-    return (
-        <div
-            className={`relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${
-                isFocused ? "ring-2 ring-[#8ab4f8]" : ""
-            } ${className ?? ""}`}
-            onClick={onClick}
-            role={onClick ? "button" : undefined}
-            tabIndex={onClick ? 0 : undefined}
-            aria-label={onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined}
-        >
-            {showVideo ? (
-                <>
-                    <video
-                        ref={videoRef}
-                        autoPlay
-                        playsInline
-                        muted
-                        className={`w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}`}
-                    />
-                    {status && <StatusPill status={status} className="absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" />}
-                </>
-            ) : (
-                <div className="flex flex-col items-center gap-2 max-w-full px-1">
-                    <div className="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold" aria-hidden="true">
-                        {initialOf(name)}
-                    </div>
-                    {status && <StatusPill status={status} />}
-                </div>
-            )}
-            {handRaised && (
-                <span className="absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base" role="img" aria-label="Hand raised">
-                    ✋
-                </span>
-            )}
-            {micMuted && (
-                <span className="absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white" role="img" aria-label="Muted">
-                    <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
-                        <MicOffIcon />
-                    </span>
-                </span>
-            )}
-            {badge && (
-                <span
-                    className={`absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${
-                        transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"
-                    }`}
-                    title={badge.title}
-                    data-testid="transport-badge"
-                >
-                    {badge.label}
-                </span>
-            )}
-            <div className="absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm">
-                {name}
-                {isLocal ? " (you)" : ""}
-            </div>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** One participant's video tile - used by the grid, the focused/thumbnail-strip layouts and the local participant's
+ * corner tile in `_CallView.tsx`. Renders a placeholder (the participant's initial) instead of a `<video>` element
+ * whenever there's no stream or their camera is off, rather than showing a black/frozen frame.
+ *
+ * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
+ * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
+ * in the current layout - can never silence anyone.
+ *
+ * The local tile is shown mirrored (`scaleX(-1)`), like a real mirror, so a participant's own movements feel
+ * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
+ * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
+ * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
+ * reflection, and mirroring it would show it backwards to no one but themselves. */
+import React, { useEffect, useRef } from "react";
+import type { MediaTransport } from "../shared/webrtc/types.js";
+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.
+ * Exported so `_DiagnosticsPanel.tsx` shows the identical label/title rather than describing the same paths in
+ * slightly different words. */
+export const TRANSPORT_BADGES: Partial<Record<MediaTransport, { label: string; title: string }>> = {
+    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.",
+    },
+    failed: { label: "Can't connect", title: "This participant could not be reached from your network." },
+};
+
+/** A short line saying the connection is still being made, with a spinner - a polite live region (not `role="status"`,
+ * which the call view's own announcement region already is), so a participant who cannot see the tile still learns
+ * why nothing is happening yet. */
+function StatusPill({ status, className }: { status: string; className?: string }) {
+    return (
+        <span
+            aria-live="polite"
+            data-testid="tile-status"
+            className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/60 text-white text-xs ${className ?? ""}`}
+        >
+            <span className="inline-block w-3 h-3 rounded-full border-2 border-white/30 border-t-white animate-spin" aria-hidden="true" />
+            {status}
+        </span>
+    );
+}
+
+export interface ParticipantTileProps {
+    name: string;
+    stream?: MediaStream | null;
+    isLocal?: boolean;
+    /** Shows the initial instead of the video. */
+    cameraOff?: boolean;
+    micMuted?: boolean;
+    handRaised?: boolean;
+    /** How this participant's media reaches you - a badge is shown for everything but a direct or still-connecting one. */
+    transport?: MediaTransport;
+    /** Says the connection is still being made, e.g. "Connecting..." on the local tile and "Awaiting connection..." on a
+     * participant's - shown with a spinner until the caller clears it. */
+    status?: string;
+    /** Highlights this tile as the current presenter/focus. */
+    isFocused?: boolean;
+    /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
+    contain?: boolean;
+    /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
+     * mirrored. Default `true`; see this module's doc comment. */
+    mirrored?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+
+function initialOf(name: string): string {
+    return (Array.from(name.trim())[0] ?? "?").toUpperCase();
+}
+
+export default function ParticipantTile({
+    name,
+    stream,
+    isLocal,
+    cameraOff,
+    micMuted,
+    handRaised,
+    transport,
+    status,
+    isFocused,
+    contain,
+    mirrored = true,
+    onClick,
+    className,
+}: ParticipantTileProps) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const showVideo = !!stream && !cameraOff;
+
+    // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
+    useEffect(() => {
+        if (videoRef.current) {
+            videoRef.current.srcObject = stream ?? null;
+        }
+    }, [stream, showVideo]);
+
+    return (
+        <div
+            className={`relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${
+                isFocused ? "ring-2 ring-[#8ab4f8]" : ""
+            } ${className ?? ""}`}
+            onClick={onClick}
+            role={onClick ? "button" : undefined}
+            tabIndex={onClick ? 0 : undefined}
+            aria-label={onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined}
+        >
+            {showVideo ? (
+                <>
+                    <video
+                        ref={videoRef}
+                        autoPlay
+                        playsInline
+                        muted
+                        className={`w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}`}
+                    />
+                    {status && <StatusPill status={status} className="absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" />}
+                </>
+            ) : (
+                <div className="flex flex-col items-center gap-2 max-w-full px-1">
+                    <div className="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold" aria-hidden="true">
+                        {initialOf(name)}
+                    </div>
+                    {status && <StatusPill status={status} />}
+                </div>
+            )}
+            {handRaised && (
+                <span className="absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base" role="img" aria-label="Hand raised">
+                    ✋
+                </span>
+            )}
+            {micMuted && (
+                <span className="absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white" role="img" aria-label="Muted">
+                    <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
+                        <MicOffIcon />
+                    </span>
+                </span>
+            )}
+            {badge && (
+                <span
+                    className={`absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${
+                        transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"
+                    }`}
+                    title={badge.title}
+                    data-testid="transport-badge"
+                >
+                    {badge.label}
+                </span>
+            )}
+            <div className="absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm">
+                {name}
+                {isLocal ? " (you)" : ""}
+            </div>
+        </div>
+    );
+}

package/apps/meet/_ParticipantsDrawer.tsx

@@ -19,21 +19,19 @@
  * 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.
+ * The header also gets a host-only "who's waiting" list (`waitingParticipants`/`onAdmit`/`onDeny`), shown whenever
+ * `waitingRoomEnabled` is on - `_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. The waiting-room toggle itself, along with "mute new participants on join" and the
+ * join password, lives in `_SettingsModal.tsx` instead (opened from the navbar's "…" menu) - this drawer only
+ * reads `waitingRoomEnabled` to decide whether the list has anywhere to come from, it doesn't set it.
  *
  * While talking-stick mode is on (`talkingStickActive`), every row - including the host's own - shows a "Give
  * stick" button, host-only, hidden on whichever row currently holds it (`talkingStickHolder`); everyone (not just
  * the host) sees a badge on that row instead, same visibility as the "Host" tag. See `_CallView.tsx`'s doc comment
  * on talking-stick mode for what granting it actually does to the recipient's microphone.
  */
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import type { MeshParticipant } from "../shared/webrtc/types.js";
 import type { WaitingParticipant } from "./_meetApi.js";
 import { TRANSPORT_BADGES } from "./_ParticipantTile.js";
@@ -52,19 +50,10 @@ export interface ParticipantsDrawerProps {
     /** 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. */
+    /** Whether the meeting currently requires the host to admit each participant - read-only here, set from
+     * `_SettingsModal.tsx` instead; this drawer only uses it to decide whether the waiting list has anywhere to
+     * come from. */
     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[];
@@ -84,71 +73,6 @@ export interface ParticipantsDrawerProps {
     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). */
@@ -304,12 +228,7 @@ export default function ParticipantsDrawer({
     isParticipantHost,
     onMute,
     onKick,
-    forceMuteOnJoin,
-    onToggleForceMuteOnJoin,
-    hasPassword,
-    onSetPassword,
     waitingRoomEnabled,
-    onToggleWaitingRoomEnabled,
     waitingParticipants,
     onAdmit,
     onDeny,
@@ -346,19 +265,6 @@ export default function ParticipantsDrawer({
                     ✕
                 </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} />
             )}