npm - @rapidmx/meet-plugin - Versions diffs - 0.1.0 - Mend

@rapidmx/meet-plugin 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/LICENSE +382 -0
package/README.md +38 -0
package/apps/meet/[token].tsx +144 -0
package/apps/meet/_CallControls.tsx +69 -0
package/apps/meet/_CallView.tsx +338 -0
package/apps/meet/_MeetChrome.tsx +30 -0
package/apps/meet/_MeetLobby.tsx +223 -0
package/apps/meet/_ParticipantTile.tsx +66 -0
package/apps/meet/_layout.tsx +34 -0
package/apps/meet/_meetApi.ts +66 -0
package/apps/meet/index.tsx +22 -0
package/apps/settings-video-conferencing/_PersonalRoomCard.tsx +140 -0
package/apps/settings-video-conferencing/_layout.tsx +47 -0
package/apps/settings-video-conferencing/index.tsx +192 -0
package/apps/shared/media/activeSpeaker.ts +45 -0
package/apps/shared/media/deviceMedia.ts +141 -0
package/apps/shared/media/levelMeter.ts +91 -0
package/apps/shared/push/GuestSignalingClient.ts +338 -0
package/apps/shared/webrtc/MeshConnectionManager.ts +350 -0
package/apps/shared/webrtc/realPeerConnection.ts +37 -0
package/apps/shared/webrtc/types.ts +90 -0
package/dist/apps/meet/[token].d.ts +33 -0
package/dist/apps/meet/[token].js +101 -0
package/dist/apps/meet/_CallControls.d.ts +18 -0
package/dist/apps/meet/_CallControls.js +6 -0
package/dist/apps/meet/_CallView.d.ts +41 -0
package/dist/apps/meet/_CallView.js +225 -0
package/dist/apps/meet/_MeetChrome.d.ts +13 -0
package/dist/apps/meet/_MeetChrome.js +10 -0
package/dist/apps/meet/_MeetLobby.d.ts +29 -0
package/dist/apps/meet/_MeetLobby.js +120 -0
package/dist/apps/meet/_ParticipantTile.d.ts +18 -0
package/dist/apps/meet/_ParticipantTile.js +25 -0
package/dist/apps/meet/_layout.d.ts +9 -0
package/dist/apps/meet/_layout.js +8 -0
package/dist/apps/meet/_meetApi.d.ts +47 -0
package/dist/apps/meet/_meetApi.js +23 -0
package/dist/apps/meet/index.d.ts +5 -0
package/dist/apps/meet/index.js +8 -0
package/dist/apps/settings-video-conferencing/_PersonalRoomCard.d.ts +24 -0
package/dist/apps/settings-video-conferencing/_PersonalRoomCard.js +77 -0
package/dist/apps/settings-video-conferencing/_layout.d.ts +16 -0
package/dist/apps/settings-video-conferencing/_layout.js +8 -0
package/dist/apps/settings-video-conferencing/index.d.ts +16 -0
package/dist/apps/settings-video-conferencing/index.js +92 -0
package/dist/apps/shared/media/activeSpeaker.d.ts +20 -0
package/dist/apps/shared/media/activeSpeaker.js +39 -0
package/dist/apps/shared/media/deviceMedia.d.ts +65 -0
package/dist/apps/shared/media/deviceMedia.js +110 -0
package/dist/apps/shared/media/levelMeter.d.ts +40 -0
package/dist/apps/shared/media/levelMeter.js +61 -0
package/dist/apps/shared/push/GuestSignalingClient.d.ts +89 -0
package/dist/apps/shared/push/GuestSignalingClient.js +291 -0
package/dist/apps/shared/webrtc/MeshConnectionManager.d.ts +97 -0
package/dist/apps/shared/webrtc/MeshConnectionManager.js +262 -0
package/dist/apps/shared/webrtc/realPeerConnection.d.ts +7 -0
package/dist/apps/shared/webrtc/realPeerConnection.js +26 -0
package/dist/apps/shared/webrtc/types.d.ts +94 -0
package/dist/apps/shared/webrtc/types.js +9 -0
package/dist/lib/index.js +25 -0
package/dist/lib/index.js.map +1 -0
package/dist/lib/models/mongo/VideoMeetingInviteeMongo.js +87 -0
package/dist/lib/models/mongo/VideoMeetingInviteeMongo.js.map +1 -0
package/dist/lib/models/mongo/VideoMeetingMongo.js +126 -0
package/dist/lib/models/mongo/VideoMeetingMongo.js.map +1 -0
package/dist/lib/models/sql/VideoMeetingInviteeSQL.js +87 -0
package/dist/lib/models/sql/VideoMeetingInviteeSQL.js.map +1 -0
package/dist/lib/models/sql/VideoMeetingSQL.js +127 -0
package/dist/lib/models/sql/VideoMeetingSQL.js.map +1 -0
package/dist/lib/models/types.js +19 -0
package/dist/lib/models/types.js.map +1 -0
package/dist/lib/mongo.js +13 -0
package/dist/lib/mongo.js.map +1 -0
package/dist/lib/routes/BaseVideoMeetingRoute.js +743 -0
package/dist/lib/routes/BaseVideoMeetingRoute.js.map +1 -0
package/dist/lib/routes/mongo/VideoMeetingRouteMongo.js +31 -0
package/dist/lib/routes/mongo/VideoMeetingRouteMongo.js.map +1 -0
package/dist/lib/routes/sql/VideoMeetingRouteSQL.js +31 -0
package/dist/lib/routes/sql/VideoMeetingRouteSQL.js.map +1 -0
package/dist/lib/sql.js +13 -0
package/dist/lib/sql.js.map +1 -0
package/dist/lib/util/BookingIntegrationUtils.js +115 -0
package/dist/lib/util/BookingIntegrationUtils.js.map +1 -0
package/dist/lib/util/IceServerUtils.js +68 -0
package/dist/lib/util/IceServerUtils.js.map +1 -0
package/dist/lib/util/PublicUrlUtils.js +37 -0
package/dist/lib/util/PublicUrlUtils.js.map +1 -0
package/dist/lib/util/RouteAccessUtils.js +32 -0
package/dist/lib/util/RouteAccessUtils.js.map +1 -0
package/dist/lib/util/TokenUtils.js +33 -0
package/dist/lib/util/TokenUtils.js.map +1 -0
package/dist/types/index.d.ts +20 -0
package/dist/types/models/mongo/VideoMeetingInviteeMongo.d.ts +16 -0
package/dist/types/models/mongo/VideoMeetingMongo.d.ts +23 -0
package/dist/types/models/sql/VideoMeetingInviteeSQL.d.ts +16 -0
package/dist/types/models/sql/VideoMeetingSQL.d.ts +23 -0
package/dist/types/models/types.d.ts +131 -0
package/dist/types/mongo.d.ts +8 -0
package/dist/types/routes/BaseVideoMeetingRoute.d.ts +368 -0
package/dist/types/routes/mongo/VideoMeetingRouteMongo.d.ts +10 -0
package/dist/types/routes/sql/VideoMeetingRouteSQL.d.ts +10 -0
package/dist/types/sql.d.ts +8 -0
package/dist/types/util/BookingIntegrationUtils.d.ts +51 -0
package/dist/types/util/IceServerUtils.d.ts +57 -0
package/dist/types/util/PublicUrlUtils.d.ts +11 -0
package/dist/types/util/RouteAccessUtils.d.ts +8 -0
package/dist/types/util/TokenUtils.d.ts +23 -0
package/package.json +181 -0

package/apps/meet/_layout.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+export interface LayoutProps {
+    /** Supplied by the server's public page route (`PublicPageRoute`), which every `public` plugin app's route
+     * extends - see `booking-plugin`'s `apps/book/_layout.tsx`'s identical `LayoutProps` doc comment for the
+     * mechanism this mirrors. */
+    branding?: Branding;
+}
+export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
+    const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Meet` : "RapidMX: Meet";
+    const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
+    const stylesheetHref = branding?.stylesheetUrl;
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{title}</title>
+                <link rel="icon" type="image/svg+xml" href={iconHref} />
+                <link rel="alternate icon" href="/favicon.ico" />
+                {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
+            </head>
+            <body>{children}</body>
+        </html>
+    );
+}

package/apps/meet/_meetApi.ts ADDED Viewed

@@ -0,0 +1,66 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Typed client for this plugin's one public, unauthenticated endpoint - `GET /api/mail/video-meetings/join/:token`
+ * (`BaseVideoMeetingRoute.join()`) - mirroring `booking-plugin`'s own `apps/shared/bookingApi.ts` convention of
+ * redefining the response shape locally rather than importing it from `../../src/...`: `apps/` compiles under its
+ * own `tsconfig.apps.json` (bundler resolution, DOM-facing), independent of the backend's `tsconfig.json` (NodeNext),
+ * and every other plugin app in this codebase keeps that boundary the same way.
+ */
+import { apiFetch } from "@rapidmx/react-shared/util/api.js";
+export type VideoMeetingVisibility = "private" | "public";
+export type VideoMeetingStatus = "scheduled" | "active" | "ended" | "cancelled";
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `IceServerConfig` - already the exact shape `RTCPeerConnection`'s
+ * `iceServers` constructor option expects, passed straight through with no reshaping. */
+export interface IceServerConfig {
+    urls: string;
+    username?: string;
+    credential?: string;
+}
+/** Mirrors `BaseVideoMeetingRoute.ts`'s `PublicVideoMeeting`. */
+export interface PublicVideoMeeting {
+    uid: string;
+    title: string;
+    visibility: VideoMeetingVisibility;
+    status: VideoMeetingStatus;
+    hostDisplayName?: string;
+}
+/**
+ * Mirrors `BaseVideoMeetingRoute.ts`'s `VideoMeetingJoinResult`. `authenticated: true` means the visiting browser
+ * already held a valid session for a real RapidMX identity when it called `join()` - `token`/`expiresAt` are then
+ * omitted entirely (there is no guest token to hand over), and the caller (`[token].tsx`) must not write any
+ * cookie of its own before connecting to `/push`: the browser's own already-existing `jwt` session cookie already
+ * authenticates it there, with zero new client-side auth handling. `authenticated: false` (the common anonymous
+ * case) is unchanged from Phase 1: `token`/`expiresAt` are present, and `GuestSignalingClient` applies `token` as a
+ * cookie before connecting.
+ */
+export interface VideoMeetingJoinResult {
+    meeting: PublicVideoMeeting;
+    iceServers: IceServerConfig[];
+    authenticated: boolean;
+    /** The identity to identify as on the signaling channel/mesh - the caller's own real uid when `authenticated`
+     * is `true`, otherwise a freshly minted synthetic `guest:<random>` uid. Always present. */
+    selfUid: string;
+    /** A short-lived guest JWT, usable against `/push`. Present only when `authenticated` is `false`. */
+    token?: string;
+    /** ISO 8601 instant `token` expires at. Present only when `authenticated` is `false`. */
+    expiresAt?: string;
+}
+/** 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
+ * `VideoMeetingJoinResult`'s doc comment) - see `BaseVideoMeetingRoute.join()`'s own doc comment. Rejects with
+ * `ApiRequestError` (status `404`) for a stale/unknown/malformed token, cancelled meeting, or the wrong
+ * 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> {
+    return apiFetch(`/mail/video-meetings/join/${encodeURIComponent(token)}`);
+}

package/apps/meet/index.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Reached only by a bare `/meet` visit with no token (e.g. a mistyped/incomplete link) - the real join/lobby flow
+ * lives at `apps/meet/[token].tsx`, `GET /meet/:token`. Mirrors `booking-plugin`'s identical `apps/book/index.tsx`.
+ * Replaces this plugin's Phase 1 one-line placeholder page (see `.claude/NOTES.md`). */
+import React from "react";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
+export default function NoMeetingTokenPage() {
+    const { branding } = useBranding();
+    return (
+        <MeetPageShell branding={branding}>
+            <MeetCard>
+                <Alert>No meeting link specified.</Alert>
+            </MeetCard>
+        </MeetPageShell>
+    );
+}

package/apps/settings-video-conferencing/_PersonalRoomCard.tsx ADDED Viewed

@@ -0,0 +1,140 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { VideoMeetingDetail, createVideoMeeting, updateVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** The title a freshly created personal room starts with - editable afterward like any other meeting's title. */
+export const PERSONAL_ROOM_TITLE = "Personal Meeting Room";
+export interface PersonalRoomCardProps {
+    mailboxUid: string;
+    /** The mailbox's personal room, as `index.tsx`'s `findPersonalRoom()` identified it - `undefined` when the
+     * mailbox has none yet. See that function's own doc comment for the "oldest non-cancelled public meeting"
+     * convention this plugin uses instead of a dedicated field/route (`.claude/NOTES.md`'s Phase 4 entry). */
+    room: VideoMeetingDetail | undefined;
+    /** Called with the freshly created room (`createVideoMeeting()`'s own response, reshaped to a
+     * `VideoMeetingDetail`) so the parent's meeting list picks it up without a full reload. */
+    onCreated: (meeting: VideoMeetingDetail) => void;
+    /** Called after a successful rename, so the parent's meeting list (and this card, on its next render) show
+     * the new title without a full reload. */
+    onRenamed: (uid: string, title: string) => void;
+}
+/**
+ * The "get and manage your own persistent public link" card - see this plugin's `.claude/NOTES.md` Phase 4 entry
+ * for why a personal room is simply the mailbox's own oldest non-cancelled `PUBLIC` `VideoMeeting`, not a distinct
+ * model concept. Offers to create one when there is none, and otherwise shows its (editable) title and its
+ * shareable link, exactly as `create()`/`findById()` compute it server-side.
+ */
+export default function PersonalRoomCard({ mailboxUid, room, onCreated, onRenamed }: PersonalRoomCardProps) {
+    const [titleDraft, setTitleDraft] = useState(room?.title ?? "");
+    const [creating, setCreating] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    // Reset the draft whenever the identified room itself changes (freshly created, or renamed elsewhere) - not
+    // on every parent re-render, so an in-progress edit here survives an unrelated state update on the page (e.g.
+    // cancelling a different meeting in the list below).
+    useEffect(() => {
+        setTitleDraft(room?.title ?? "");
+    }, [room?.uid, room?.title]);
+    async function handleCreate() {
+        setCreating(true);
+        setError(null);
+        try {
+            const result = await createVideoMeeting({ mailboxUid, title: PERSONAL_ROOM_TITLE, visibility: "public" });
+            onCreated({ ...result.meeting, publicJoinUrl: result.publicJoinUrl });
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create your personal room.");
+        } finally {
+            setCreating(false);
+        }
+    }
+    async function handleRename(e: FormEvent) {
+        e.preventDefault();
+        const trimmed = titleDraft.trim();
+        if (!room || !trimmed || trimmed === room.title) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const updated = await updateVideoMeeting(room.uid, { title: trimmed });
+            onRenamed(room.uid, updated.title);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not rename your personal room.");
+        } finally {
+            setSaving(false);
+        }
+    }
+    async function handleCopy(url: string) {
+        try {
+            await navigator.clipboard.writeText(url);
+            setError(null);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch {
+            setError("Could not copy the link. Copy it by hand instead.");
+        }
+    }
+    return (
+        <section aria-label="Your personal room" className="border border-border rounded-md p-5 mb-6">
+            <h2 className="text-sm font-bold">Your personal room</h2>
+            <p className="text-sm text-text-muted mb-3">
+                A permanent link you can share any time - anyone with it can join, no account needed on their end.
+            </p>
+            {error && <Alert>{error}</Alert>}
+            {!room ? (
+                <Button type="button" className="!w-auto" loading={creating} disabled={creating} onClick={handleCreate}>
+                    Create my personal room
+                </Button>
+            ) : (
+                <div className="flex flex-col gap-3">
+                    <form onSubmit={handleRename} className="flex items-end gap-2">
+                        <label className="flex-1 flex flex-col gap-1">
+                            <span className="text-xs text-text-muted">Room name</span>
+                            <input type="text" className={INPUT_CLASS} value={titleDraft} onChange={(e) => setTitleDraft(e.target.value)} />
+                        </label>
+                        <Button
+                            type="submit"
+                            variant="secondary"
+                            className="!w-auto shrink-0"
+                            loading={saving}
+                            disabled={saving || !titleDraft.trim() || titleDraft.trim() === room.title}
+                        >
+                            Save
+                        </Button>
+                    </form>
+                    {room.publicJoinUrl ? (
+                        <div className="flex items-center gap-2">
+                            <code className="flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap">
+                                {room.publicJoinUrl}
+                            </code>
+                            <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => handleCopy(room.publicJoinUrl!)}>
+                                {copied ? "Copied" : "Copy"}
+                            </Button>
+                        </div>
+                    ) : (
+                        <p className="text-sm text-text-muted">
+                            No public join page URL is configured for this deployment yet - ask an administrator to set one in the Video
+                            Conferencing plugin&apos;s settings before sharing this room.
+                        </p>
+                    )}
+                </div>
+            )}
+        </section>
+    );
+}

package/apps/settings-video-conferencing/_layout.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+export interface LayoutProps {
+    /**
+     * Supplied by the server's `WwwRoute` `fetchProps()`, which every `www` plugin app's route extends. This file
+     * is a copy of `@rapidmx/web-client`'s `apps/www/_layout.tsx` (mirroring `booking-plugin`'s own
+     * `apps/settings-booking-types/_layout.tsx` exactly), since every app directory needs its own layout.
+     * `@rapidrest/react` spreads the same merged page props onto this layout as onto the page it wraps, so it
+     * renders correctly server-side on the very first byte of the response: no client-side flash from the stock
+     * defaults below, and a crawler reading the raw HTML sees the real branding too. `undefined` only on the
+     * framework's unwrapped `_500` fallback path, which doesn't receive props at all - falling back to the stock
+     * defaults there is acceptable.
+     */
+    branding?: Branding;
+}
+export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
+    const title = branding?.title || branding?.companyName ? `${branding?.title || branding?.companyName}: Mail` : "RapidMX: Mail";
+    const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
+    const stylesheetHref = branding?.stylesheetUrl;
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{title}</title>
+                <link rel="icon" type="image/svg+xml" href={iconHref} />
+                <link rel="alternate icon" href="/favicon.ico" />
+                <link rel="preconnect" href="https://fonts.googleapis.com" />
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+                <link
+                    rel="stylesheet"
+                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+                />
+                {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
+            </head>
+            <body>{children}</body>
+        </html>
+    );
+}

package/apps/settings-video-conferencing/index.tsx ADDED Viewed

@@ -0,0 +1,192 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { VideoMeetingDetail, listVideoMeetings, updateVideoMeeting } from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "@rapidmx/web-client/shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import PersonalRoomCard from "./_PersonalRoomCard.js";
+/** However many of a mailbox's meetings this page ever needs to see at once - generous enough that a real user's
+ * whole history fits in one request (this is a personal settings page, not a paged archive), matching
+ * `SettingsShell`'s own `listMailboxes({ limit: 100 })` precedent for "large enough not to page in practice". */
+const LIST_LIMIT = 200;
+const STATUS_LABELS: Record<string, string> = {
+    scheduled: "Scheduled",
+    active: "In progress",
+    ended: "Ended",
+    cancelled: "Cancelled",
+};
+export type SettingsVideoConferencingPageProps = Omit<SettingsShellProps, "active">;
+export default function SettingsVideoConferencingPage(props: SettingsVideoConferencingPageProps) {
+    return (
+        <SettingsShell {...props} active="video-conferencing">
+            <VideoConferencingSettingsContent />
+        </SettingsShell>
+    );
+}
+/**
+ * Picks a mailbox's "personal room" out of `listVideoMeetings()`'s results: the oldest still-active (non-cancelled)
+ * `PUBLIC` meeting. `BaseVideoMeetingRoute` has no field or route naming a "personal room" as a concept distinct
+ * from any other public meeting a mailbox happens to have - a public meeting IS just a `VideoMeeting` with
+ * `visibility: "public"` (see this plugin's `.claude/NOTES.md` Phase 4 entry for the full reasoning behind this
+ * convention, and why no backend addition was needed to support it). Oldest-first keeps the identification stable
+ * across reloads, regardless of when in the list a later public meeting (created some other way, e.g. directly
+ * through the API) happens to land; skipping a cancelled one means cancelling today's room and creating a new one
+ * always finds the fresh one on the next load, never a dead link.
+ */
+export function findPersonalRoom(meetings: VideoMeetingDetail[]): VideoMeetingDetail | undefined {
+    return meetings
+        .filter((m) => m.visibility === "public" && m.status !== "cancelled")
+        .sort((a, b) => new Date(a.dateCreated).getTime() - new Date(b.dateCreated).getTime())[0];
+}
+function VideoConferencingSettingsContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [meetings, setMeetings] = useState<VideoMeetingDetail[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [copiedUid, setCopiedUid] = useState<string | null>(null);
+    const [cancellingUid, setCancellingUid] = useState<string | null>(null);
+    const [actionError, setActionError] = useState<string | null>(null);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved - same established non-null
+    // pattern as `booking-plugin`'s own settings pages.
+    useEffect(() => {
+        setLoading(true);
+        setLoadError(null);
+        listVideoMeetings(mailboxUid!, { limit: LIST_LIMIT })
+            .then(setMeetings)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your video meetings."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+    const personalRoom = findPersonalRoom(meetings);
+    // Every other meeting worth showing here: any other public meeting, or a private one with a linked calendar
+    // event (the calendar compose hook's own meetings - Phase 3). A private, calendar-less meeting is an artifact
+    // of this plugin's own API used directly (e.g. testing), not something a real user created through this page
+    // or a calendar invite, so it's left out. The personal room itself is surfaced above instead of repeated here.
+    const otherMeetings = meetings
+        .filter((m) => m.uid !== personalRoom?.uid && (m.visibility === "public" || !!m.calendarEventUid))
+        .sort((a, b) => new Date(b.dateCreated).getTime() - new Date(a.dateCreated).getTime());
+    async function handleCopy(url: string, uid: string) {
+        try {
+            await navigator.clipboard.writeText(url);
+            setActionError(null);
+            setCopiedUid(uid);
+            setTimeout(() => setCopiedUid((current) => (current === uid ? null : current)), 2000);
+        } catch {
+            setActionError("Could not copy the link. Copy it by hand instead.");
+        }
+    }
+    async function handleCancel(uid: string) {
+        setCancellingUid(uid);
+        setActionError(null);
+        try {
+            const updated = await updateVideoMeeting(uid, { status: "cancelled" });
+            setMeetings((current) => current.map((m) => (m.uid === uid ? { ...m, status: updated.status } : m)));
+        } catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not cancel this meeting.");
+        } finally {
+            setCancellingUid(null);
+        }
+    }
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-4xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Video Conferencing</h1>
+                <p className="text-sm text-text-muted mb-5">
+                    Your personal meeting room, and every video meeting created for you - from a calendar invite or directly here.
+                </p>
+                {loadError && <Alert>{loadError}</Alert>}
+                {actionError && <Alert>{actionError}</Alert>}
+                {loading ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : (
+                    <>
+                        <PersonalRoomCard
+                            mailboxUid={mailboxUid!}
+                            room={personalRoom}
+                            onCreated={(meeting) => setMeetings((current) => [meeting, ...current])}
+                            onRenamed={(uid, title) => setMeetings((current) => current.map((m) => (m.uid === uid ? { ...m, title } : m)))}
+                        />
+                        <h2 className="text-sm font-bold mb-2">Meetings</h2>
+                        {otherMeetings.length === 0 ? (
+                            <p className="text-sm text-text-muted">No other meetings yet.</p>
+                        ) : (
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm border-collapse">
+                                    <thead>
+                                        <tr>
+                                            {["Title", "Visibility", "Status", "Created", ""].map((h) => (
+                                                <th
+                                                    key={h}
+                                                    className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                                >
+                                                    {h}
+                                                </th>
+                                            ))}
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {otherMeetings.map((meeting) => (
+                                            <tr key={meeting.uid}>
+                                                <td className="py-2.5 px-2.5 border-b border-border">{meeting.title}</td>
+                                                <td className="py-2.5 px-2.5 border-b border-border capitalize">{meeting.visibility}</td>
+                                                <td className="py-2.5 px-2.5 border-b border-border">
+                                                    {/* v8 ignore next -- unreachable via real usage: `VideoMeetingStatus` has exactly the four keys
+                                                        `STATUS_LABELS` defines, and response bodies are typed but not runtime-validated (see
+                                                        `videoMeetingsApi.ts`'s own doc comment) - the fallback exists only for forward compatibility
+                                                        with a status value this build doesn't know about yet. */}
+                                                    {STATUS_LABELS[meeting.status] ?? meeting.status}
+                                                </td>
+                                                <td className="py-2.5 px-2.5 border-b border-border whitespace-nowrap">
+                                                    {new Date(meeting.dateCreated).toLocaleString()}
+                                                </td>
+                                                <td className="py-2.5 px-2.5 border-b border-border text-right whitespace-nowrap">
+                                                    {meeting.visibility === "public" && meeting.publicJoinUrl && (
+                                                        <button
+                                                            type="button"
+                                                            aria-label={`Copy link to ${meeting.title}`}
+                                                            className="text-primary-dark hover:underline font-medium mr-4"
+                                                            onClick={() => handleCopy(meeting.publicJoinUrl!, meeting.uid)}
+                                                        >
+                                                            {copiedUid === meeting.uid ? "Copied" : "Copy link"}
+                                                        </button>
+                                                    )}
+                                                    {meeting.status === "scheduled" && (
+                                                        <button
+                                                            type="button"
+                                                            aria-label={`Cancel ${meeting.title}`}
+                                                            className="text-danger hover:underline font-medium disabled:opacity-55"
+                                                            disabled={cancellingUid === meeting.uid}
+                                                            onClick={() => handleCancel(meeting.uid)}
+                                                        >
+                                                            {cancellingUid === meeting.uid ? "Cancelling…" : "Cancel"}
+                                                        </button>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

package/apps/shared/media/activeSpeaker.ts ADDED Viewed

@@ -0,0 +1,45 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Pure active-speaker selection logic, decoupled from `levelMeter.ts`'s `AnalyserNode` wiring so it can be unit
+ * tested with plain numbers - no `AudioContext`/DOM at all. A simple volume-threshold heuristic, as this plugin's
+ * Phase 2 `.claude/NOTES.md` entry calls for ("this doesn't need to be sophisticated"): the loudest participant
+ * currently above `threshold` becomes the pick; below threshold, the previous pick is kept rather than falling
+ * back to nobody, so the focused tile doesn't flicker to a blank state during a brief pause in speech.
+ */
+/** 0-100 (`levelMeter.ts`'s own output range). Chosen empirically as "clearly speaking" vs. room noise/silence -
+ * not derived from any spec, and the easiest constant to retune later. */
+export const DEFAULT_ACTIVE_SPEAKER_THRESHOLD = 12;
+/**
+ * Picks who should be auto-focused, given every remote participant's current audio level (local participant
+ * excluded by the caller - see `_CallView.tsx`, which never lets "yourself" be the auto-detected speaker).
+ *
+ * @param levels uid -> level (0-100), one entry per participant currently being measured.
+ * @param current The currently auto-focused uid, if any - kept when no one is clearly above `threshold`, and used
+ * to break an exact tie (staying on the current speaker rather than jittering to another equally-loud one).
+ * @param threshold See `DEFAULT_ACTIVE_SPEAKER_THRESHOLD`.
+ */
+export function pickActiveSpeaker(
+    levels: Readonly<Record<string, number>>,
+    current: string | undefined,
+    threshold: number = DEFAULT_ACTIVE_SPEAKER_THRESHOLD,
+): string | undefined {
+    let best: string | undefined;
+    let bestLevel = threshold;
+    for (const [uid, level] of Object.entries(levels)) {
+        if (level > bestLevel || (level === bestLevel && uid === current)) {
+            best = uid;
+            bestLevel = level;
+        }
+    }
+    if (best) {
+        return best;
+    }
+    // Nobody is clearly above threshold: keep the current pick only if they're still a measured participant
+    // (they may have left), otherwise there's no reasonable pick at all.
+    return current && current in levels ? current : undefined;
+}