@rapidmx/meet-plugin 0.13.1 → 0.14.0

package/apps/meet/_SettingsModal.tsx

@@ -0,0 +1,152 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The host-only meeting settings modal, opened from the navbar's "…" menu (`_CallView.tsx`) - host-only because
+ * `_CallView.tsx` never renders this for anyone else. Holds the settings that used to live in the participants
+ * drawer's header: "Mute new participants on join" (`forceMuteOnJoin`), the join password
+ * (`hasPassword`/`onSetPassword`), and "Require the host to admit participants" (`waitingRoomEnabled`) - each a
+ * setting for whoever joins *next*, not an action on anyone already here (muting someone already in the call is
+ * the participants drawer's own "Mute" button; the drawer also keeps the live waiting-room list, since admitting
+ * someone is closer to "who's here" than a setting).
+ *
+ * An ordinary modal, not a docked panel like the drawer or a persistent window like diagnostics: closes on Escape,
+ * a click on the backdrop, or its own close button, matching `_CallControls.tsx`'s menus and this app's general
+ * "settings is a focused, modal task" convention.
+ */
+import React, { useEffect, useState } from "react";
+
+export interface SettingsModalProps {
+    forceMuteOnJoin: boolean;
+    onToggleForceMuteOnJoin: () => void;
+    /** Whether this meeting currently requires a password - never the password itself (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 modal needing to know anything about it. */
+    onSetPassword: (password: string | null) => Promise<void>;
+    waitingRoomEnabled: boolean;
+    onToggleWaitingRoomEnabled: () => void;
+    onClose: () => void;
+}
+
+/** The 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 - the modal 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="py-3 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>
+    );
+}
+
+export default function SettingsModal({
+    forceMuteOnJoin,
+    onToggleForceMuteOnJoin,
+    hasPassword,
+    onSetPassword,
+    waitingRoomEnabled,
+    onToggleWaitingRoomEnabled,
+    onClose,
+}: SettingsModalProps) {
+    useEffect(() => {
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [onClose]);
+
+    return (
+        <>
+            <div className="fixed inset-0 z-30 bg-black/40" onClick={onClose} aria-hidden="true" />
+            <div
+                role="dialog"
+                aria-label="Meeting settings"
+                className="fixed z-30 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 max-w-[calc(100vw-1.5rem)] max-h-[80vh] overflow-y-auto flex flex-col rounded-2xl bg-[#2b2d30] text-white shadow-xl"
+                onClick={(event) => event.stopPropagation()}
+            >
+                <div className="flex items-center justify-between gap-2 px-4 py-3 border-b border-white/10">
+                    <h2 className="text-sm font-medium">Meeting settings</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 meeting settings"
+                        onClick={onClose}
+                    >
+                        ✕
+                    </button>
+                </div>
+                <div className="px-4">
+                    <label className="flex items-center gap-2 py-3 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>
+                    <PasswordSection hasPassword={hasPassword} onSetPassword={onSetPassword} />
+                    <label className="flex items-center gap-2 py-3 text-sm">
+                        <input type="checkbox" checked={waitingRoomEnabled} onChange={onToggleWaitingRoomEnabled} className="w-4 h-4" />
+                        Require the host to admit participants
+                    </label>
+                </div>
+            </div>
+        </>
+    );
+}

package/apps/meet/_icons.tsx

@@ -1,82 +1,80 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-/** The in-call control icons, as inline SVG (24x24, Material Design paths, `currentColor`) so this plugin needs no
- * icon package of its own. Decorative - every button that uses one carries its own `aria-label`. */
-import React from "react";
-
-function Icon({ path, className = "w-6 h-6" }: { path: string; className?: string }) {
-    return (
-        <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true" focusable="false">
-            <path d={path} />
-        </svg>
-    );
-}
-
-export const MicIcon = () => (
-    <Icon path="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" />
-);
-
-export const MicOffIcon = () => (
-    <Icon path="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" />
-);
-
-export const VideoIcon = () => <Icon path="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />;
-
-export const VideoOffIcon = () => (
-    <Icon path="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" />
-);
-
-export const ScreenShareIcon = () => (
-    <Icon path="M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" />
-);
-
-export const EmojiIcon = () => (
-    <Icon path="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
-);
-
-export const GridIcon = () => <Icon path="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" />;
-
-export const FocusIcon = () => <Icon path="M3 3h18v12H3V3zm0 14h5v4H3v-4zm6.5 0h5v4h-5v-4zM16 17h5v4h-5v-4z" />;
-
-export const LeaveIcon = () => (
-    <Icon path="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />
-);
-
-export const ChevronUpIcon = () => <Icon path="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" className="w-5 h-5" />;
-
-/** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
-export const HandIcon = () => (
-    <span className="text-xl leading-none" aria-hidden="true">
-        ✋
-    </span>
-);
-
-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" />
-);
-
-/** A talking stick: a rounded shaft with a grip knob at one end, drawn (not a Material path - there isn't one for
- * this) as a diagonal bar with a circle, rather than reusing `HandIcon`'s emoji-glyph fallback, since this one
- * needs to light up (`currentColor`) the same way every other control icon here does. */
-export const BatonIcon = () => (
-    <svg viewBox="0 0 24 24" className="w-6 h-6" fill="currentColor" aria-hidden="true" focusable="false">
-        <g transform="rotate(45 12 12)">
-            <rect x="5" y="10.5" width="13" height="3" rx="1.5" />
-            <circle cx="19" cy="12" r="3" />
-        </g>
-    </svg>
-);
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** The in-call control icons, as inline SVG (24x24, Material Design paths, `currentColor`) so this plugin needs no
+ * icon package of its own. Decorative - every button that uses one carries its own `aria-label`. */
+import React from "react";
+
+function Icon({ path, className = "w-6 h-6" }: { path: string; className?: string }) {
+    return (
+        <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true" focusable="false">
+            <path d={path} />
+        </svg>
+    );
+}
+
+export const MicIcon = () => (
+    <Icon path="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" />
+);
+
+export const MicOffIcon = () => (
+    <Icon path="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" />
+);
+
+export const VideoIcon = () => <Icon path="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />;
+
+export const VideoOffIcon = () => (
+    <Icon path="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" />
+);
+
+export const ScreenShareIcon = () => (
+    <Icon path="M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" />
+);
+
+export const EmojiIcon = () => (
+    <Icon path="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
+);
+
+export const GridIcon = () => <Icon path="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" />;
+
+export const FocusIcon = () => <Icon path="M3 3h18v12H3V3zm0 14h5v4H3v-4zm6.5 0h5v4h-5v-4zM16 17h5v4h-5v-4z" />;
+
+export const LeaveIcon = () => (
+    <Icon path="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />
+);
+
+export const ChevronUpIcon = () => <Icon path="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" className="w-5 h-5" />;
+
+/** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
+export const HandIcon = () => (
+    <span className="text-xl leading-none" aria-hidden="true">
+        ✋
+    </span>
+);
+
+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" />
+);
+
+/** A talking stick: a rounded shaft with a grip knob at one end, drawn (not a Material path - there isn't one for
+ * this) as a diagonal bar with a circle, rather than reusing `HandIcon`'s emoji-glyph fallback, since this one
+ * needs to light up (`currentColor`) the same way every other control icon here does. */
+export const BatonIcon = () => (
+    <svg viewBox="0 0 24 24" className="w-6 h-6" fill="currentColor" aria-hidden="true" focusable="false">
+        <g transform="rotate(45 12 12)">
+            <rect x="5" y="10.5" width="13" height="3" rx="1.5" />
+            <circle cx="19" cy="12" r="3" />
+        </g>
+    </svg>
+);
+
+export const OverflowIcon = () => <Icon path="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />;