@rapidmx/meet-plugin 0.9.2 → 0.10.0

package/apps/meet/[token].tsx

@@ -5,7 +5,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
  *
@@ -35,13 +38,26 @@ import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.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 { type VideoMeetingJoinResult, joinMeeting } from "./_meetApi.js";
+import {
+    type PublicVideoMeeting,
+    type VideoMeetingJoinResult,
+    joinMeeting,
+    pollAdmission,
+    requestAdmission,
+    verifyMeetingPassword,
+} from "./_meetApi.js";
 
-type Phase = "loading" | "not-found" | "lobby" | "in-call" | "ended";
+type Phase = "loading" | "not-found" | "password" | "admission-request" | "waiting" | "denied" | "lobby" | "in-call" | "ended";
+
+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 = 3_000;
 
 export default function MeetJoinPage({ params }: { params: { token: string } }) {
     const { branding } = useBranding();
@@ -56,17 +72,49 @@ function MeetJoinContent({ token, branding }: { token: string; branding: Brandin
     const [name, setName] = useState("");
     const [loadError, setLoadError] = useState<string | null>(null);
     const [joinResult, setJoinResult] = useState<VideoMeetingJoinResult | null>(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<PublicVideoMeeting | null>(null);
+    const [passwordInput, setPasswordInput] = useState("");
+    const [passwordError, setPasswordError] = useState<string | null>(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<PublicVideoMeeting | null>(null);
+    const [admissionName, setAdmissionName] = useState("");
+    const [admissionPassword, setAdmissionPassword] = useState("");
+    const [admissionError, setAdmissionError] = useState<string | null>(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<string | undefined>(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<string | undefined>(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) {
@@ -89,8 +137,69 @@ function MeetJoinContent({ token, branding }: { token: string; branding: Brandin
         setPhase("in-call");
     }
 
-    function handleLeave() {
+    async function handleSubmitPassword(e: React.FormEvent) {
+        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: React.FormEvent) {
+        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?: string) {
         release();
+        setEndedReason(reason);
         setPhase("ended");
     }
 
@@ -109,6 +218,10 @@ function MeetJoinContent({ token, branding }: { token: string; branding: Brandin
                 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}
             />
@@ -128,14 +241,92 @@ function MeetJoinContent({ token, branding }: { token: string; branding: Brandin
                 <Alert>{loadError ?? "This meeting link isn't valid."}</Alert>
             </MeetCard>
         );
+    } else if (phase === "password") {
+        content = (
+            <MeetCard>
+                <h1 className="text-2xl font-bold tracking-tight">{passwordMeeting?.title}</h1>
+                {passwordMeeting?.hostDisplayName && <p className="text-sm text-text-muted mt-1">Hosted by {passwordMeeting.hostDisplayName}</p>}
+                <p className="text-base text-text-muted mt-4 mb-3">This meeting requires a password to join.</p>
+                <form onSubmit={(e) => void handleSubmitPassword(e)}>
+                    <FormField label="Password" htmlFor="meet-password">
+                        <input
+                            id="meet-password"
+                            type="password"
+                            autoFocus
+                            className={INPUT_CLASS}
+                            value={passwordInput}
+                            onChange={(e) => setPasswordInput(e.target.value)}
+                        />
+                    </FormField>
+                    {passwordError && <Alert>{passwordError}</Alert>}
+                    <Button type="submit" className="!w-auto mt-3" disabled={!passwordInput}>
+                        Join meeting
+                    </Button>
+                </form>
+            </MeetCard>
+        );
+    } else if (phase === "admission-request") {
+        content = (
+            <MeetCard>
+                <h1 className="text-2xl font-bold tracking-tight">{admissionMeeting?.title}</h1>
+                {admissionMeeting?.hostDisplayName && <p className="text-sm text-text-muted mt-1">Hosted by {admissionMeeting.hostDisplayName}</p>}
+                <p className="text-base text-text-muted mt-4 mb-3">The host must let you in before you can join.</p>
+                <form onSubmit={(e) => void handleRequestAdmission(e)}>
+                    <FormField label="Your name" htmlFor="admission-name">
+                        <input
+                            id="admission-name"
+                            type="text"
+                            autoFocus
+                            className={INPUT_CLASS}
+                            value={admissionName}
+                            onChange={(e) => setAdmissionName(e.target.value)}
+                        />
+                    </FormField>
+                    {admissionMeeting?.hasPassword && (
+                        <FormField label="Password" htmlFor="admission-password">
+                            <input
+                                id="admission-password"
+                                type="password"
+                                className={`${INPUT_CLASS} mt-3`}
+                                value={admissionPassword}
+                                onChange={(e) => setAdmissionPassword(e.target.value)}
+                            />
+                        </FormField>
+                    )}
+                    {admissionError && <Alert>{admissionError}</Alert>}
+                    <Button
+                        type="submit"
+                        className="!w-auto mt-3"
+                        disabled={!admissionName.trim() || (!!admissionMeeting?.hasPassword && !admissionPassword)}
+                    >
+                        Ask to join
+                    </Button>
+                </form>
+            </MeetCard>
+        );
+    } else if (phase === "waiting") {
+        content = (
+            <MeetCard>
+                <h1 className="text-2xl font-bold tracking-tight">{admissionMeeting?.title}</h1>
+                <p className="text-base text-text-muted mt-4">Waiting for the host to let you in&hellip;</p>
+            </MeetCard>
+        );
+    } else if (phase === "denied") {
+        content = (
+            <MeetCard>
+                <Alert>{admissionError ?? "The host did not admit you to this meeting."}</Alert>
+            </MeetCard>
+        );
     } else if (phase === "ended") {
         content = (
             <MeetCard>
-                <h1 className="text-xl font-bold tracking-tight mb-2">You left the meeting</h1>
-                <p className="text-base text-text-muted mb-4">You can close this page now, or rejoin.</p>
-                <Button type="button" className="!w-auto" onClick={() => setPhase("lobby")}>
-                    Rejoin meeting
-                </Button>
+                <h1 className="text-xl font-bold tracking-tight mb-2">{endedReason ? "Removed from the meeting" : "You left the meeting"}</h1>
+                <p className="text-base text-text-muted mb-4">{endedReason ?? "You can close this page now, or rejoin."}</p>
+                {!endedReason && (
+                    <Button type="button" className="!w-auto" onClick={() => setPhase("lobby")}>
+                        Rejoin meeting
+                    </Button>
+                )}
             </MeetCard>
         );
     } else {

package/apps/meet/_CallControls.tsx

@@ -15,19 +15,24 @@
  */
 import React, { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
+import type { ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia, MediaKind } from "../shared/media/useLocalMedia.js";
-import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
+import { REACTION_EMOJIS, type MeshParticipant } from "../shared/webrtc/types.js";
+import DiagnosticsPanel from "./_DiagnosticsPanel.js";
 import EffectsPanel from "./_EffectsPanel.js";
 import {
     ChevronUpIcon,
+    DiagnosticsIcon,
     EffectsIcon,
     EmojiIcon,
+    FlipIcon,
     FocusIcon,
     GridIcon,
     HandIcon,
     LeaveIcon,
     MicIcon,
     MicOffIcon,
+    RotateIcon,
     ScreenShareIcon,
     VideoIcon,
     VideoOffIcon,
@@ -37,10 +42,16 @@ 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;
@@ -49,7 +60,7 @@ export interface CallControlsProps {
     onLeave: () => void;
 }
 
-type OpenMenu = MediaKind | "emoji" | "effects" | null;
+type OpenMenu = MediaKind | "emoji" | "effects" | "diagnostics" | null;
 
 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]";
@@ -73,9 +84,14 @@ export function LevelBars({ level }: { level: number }) {
 
 export default function CallControls({
     media,
+    selfName,
+    participants,
     isPresenting,
     presentingElsewhereName,
     onToggleShare,
+    screenTransform,
+    onRotateScreen,
+    onFlipScreen,
     handRaised,
     onToggleHand,
     onReaction,
@@ -204,6 +220,29 @@ export default function CallControls({
                 <ScreenShareIcon />
             </button>
 
+            {isPresenting && (
+                <>
+                    <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}
+                    >
+                        <RotateIcon />
+                    </button>
+                    <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}
+                    >
+                        <FlipIcon />
+                    </button>
+                </>
+            )}
+
             <div className="sm:relative">
                 <button
                     type="button"
@@ -259,7 +298,29 @@ export default function CallControls({
                 {viewMode === "grid" ? <FocusIcon /> : <GridIcon />}
             </button>
 
-            <button type="button" className={`${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`} aria-label="Leave call" onClick={onLeave}>
+            <div className="sm:relative">
+                <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")}
+                >
+                    <DiagnosticsIcon />
+                </button>
+                {openMenu === "diagnostics" && (
+                    <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"
+                    >
+                        <DiagnosticsPanel selfName={selfName} micOn={media.micOn} cameraOn={media.cameraOn} participants={participants} />
+                    </div>
+                )}
+            </div>
+
+            <button type="button" className={`${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`} aria-label="Leave call" onClick={() => onLeave()}>
                 <LeaveIcon />
             </button>
         </div>