@rapidmx/meet-plugin 0.2.0 → 0.3.1

package/dist/apps/meet/[token].js

@@ -33,20 +33,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
-import { default as MeetLobby } from "./_MeetLobby.js";
+import { useLocalMedia } from "../shared/media/useLocalMedia.js";
+import MeetLobby from "./_MeetLobby.js";
 import CallView from "./_CallView.js";
 import { joinMeeting } from "./_meetApi.js";
 export default function MeetJoinPage({ params }) {
     const { branding } = useBranding();
-    return (_jsx(MeetPageShell, { branding: branding, children: _jsx(MeetJoinContent, { token: params.token }) }));
+    return _jsx(MeetJoinContent, { token: params.token, branding: branding });
 }
-function MeetJoinContent({ token }) {
+/** Owns the camera and microphone (`useLocalMedia()`) for the whole visit, so the tracks the lobby previews are the
+ * ones the call sends. Every phase but the call is drawn inside the branded page shell; the call fills the whole
+ * window instead (see `_CallView.tsx`). */
+function MeetJoinContent({ token, branding }) {
     const [phase, setPhase] = useState("loading");
     const [joinResult, setJoinResult] = useState(null);
-    const [preferences, setPreferences] = useState(null);
+    const [name, setName] = useState("");
     const [loadError, setLoadError] = useState(null);
+    const media = useLocalMedia();
+    const { release } = media;
     React.useEffect(() => {
         let cancelled = false;
         joinMeeting(token)
@@ -71,31 +78,36 @@ function MeetJoinContent({ token }) {
             cancelled = true;
         };
     }, [token]);
-    function handleJoin(prefs) {
-        setPreferences(prefs);
+    function handleJoin(joinName) {
+        setName(joinName);
         setPhase("in-call");
     }
     function handleLeave() {
+        release();
         setPhase("ended");
     }
-    if (phase === "loading") {
-        return (_jsx(MeetCard, { children: _jsx("p", { className: "text-base text-text-muted", children: "Loading\u2026" }) }));
-    }
-    if (phase === "not-found") {
-        return (_jsx(MeetCard, { children: _jsx(Alert, { children: loadError ?? "This meeting link isn't valid." }) }));
-    }
-    if (phase === "ended") {
-        return (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight mb-2", children: "You left the meeting" }), _jsx("p", { className: "text-base text-text-muted", children: "You can close this page now." })] }));
-    }
-    if (phase === "in-call" && joinResult && preferences) {
+    if (phase === "in-call" && joinResult) {
         return (_jsx(CallView, { channel: joinResult.meeting.uid, 
             // `token` is present only for the common anonymous case (`authenticated: false`) - when the
             // caller's own existing session already authenticated them (`authenticated: true`), there is no
             // guest token to apply as a cookie at all, and `GuestSignalingClient` relies entirely on the
             // browser's own already-existing `jwt` session cookie instead (see its own doc comment and
             // `VideoMeetingJoinResult`'s doc comment in `_meetApi.ts`).
-            token: joinResult.token, selfUid: joinResult.selfUid, selfName: preferences.name, iceServers: joinResult.iceServers, initialStream: preferences.stream, initialMicOn: preferences.micOn, initialCameraOn: preferences.cameraOn, onLeave: handleLeave }));
+            token: joinResult.token, selfUid: joinResult.selfUid, selfName: name, meetingTitle: joinResult.meeting.title, iceServers: joinResult.iceServers, media: media, onLeave: handleLeave }));
+    }
+    let content;
+    if (phase === "loading") {
+        content = (_jsx(MeetCard, { children: _jsx("p", { className: "text-base text-text-muted", children: "Loading\u2026" }) }));
+    }
+    else if (phase === "not-found") {
+        content = (_jsx(MeetCard, { children: _jsx(Alert, { children: loadError ?? "This meeting link isn't valid." }) }));
+    }
+    else if (phase === "ended") {
+        content = (_jsxs(MeetCard, { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight mb-2", children: "You left the meeting" }), _jsx("p", { className: "text-base text-text-muted mb-4", children: "You can close this page now, or rejoin." }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => setPhase("lobby"), children: "Rejoin meeting" })] }));
+    }
+    else {
+        // phase === "lobby" (joinResult is always set by then - see the effect above).
+        content = (_jsx(MeetCard, { maxWidth: "max-w-4xl", children: _jsx(MeetLobby, { meeting: joinResult.meeting, media: media, initialName: name, onJoin: handleJoin }) }));
     }
-    // phase === "lobby" (join Result is always set by then - see the effect above).
-    return (_jsx(MeetCard, { maxWidth: "max-w-4xl", children: _jsx(MeetLobby, { meeting: joinResult.meeting, onJoin: handleJoin }) }));
+    return _jsx(MeetPageShell, { branding: branding, children: content });
 }

package/dist/apps/meet/_CallControls.d.ts

@@ -1,18 +1,31 @@
-/** The in-call bottom control bar: mute/unmute, camera on/off, share screen, grid/focus toggle, leave. Deliberately
- * minimal per this plugin's Phase 2 spec ("no chat, no recording, no reactions"). */
+/**
+ * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
+ * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
+ * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
+ * screen, reactions, raise hand, grid/focus and leave.
+ *
+ * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
+ * picking up, so a participant can see their audio is being sent - and the camera button shows a green dot while a
+ * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
+ */
 import React from "react";
+import type { LocalMedia } from "../shared/media/useLocalMedia.js";
 export type CallViewMode = "grid" | "focus";
 export interface CallControlsProps {
-    micOn: boolean;
-    onToggleMic: () => void;
-    cameraOn: boolean;
-    onToggleCamera: () => void;
+    media: LocalMedia;
     isPresenting: boolean;
     /** Someone else is presenting - the share button is disabled and explains why. */
     presentingElsewhereName?: string;
     onToggleShare: () => void;
+    handRaised: boolean;
+    onToggleHand: () => void;
+    onReaction: (emoji: string) => void;
     viewMode: CallViewMode;
     onToggleViewMode: () => void;
     onLeave: () => void;
 }
-export default function CallControls({ micOn, onToggleMic, cameraOn, onToggleCamera, isPresenting, presentingElsewhereName, onToggleShare, viewMode, onToggleViewMode, onLeave, }: CallControlsProps): React.JSX.Element;
+/** Bars that rise and fall with the microphone's level (0-5) - a flat, dim set while there is no sound. */
+export declare function LevelBars({ level }: {
+    level: number;
+}): React.JSX.Element;
+export default function CallControls({ media, isPresenting, presentingElsewhereName, onToggleShare, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }: CallControlsProps): React.JSX.Element;

package/dist/apps/meet/_CallControls.js

@@ -1,6 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-export default function CallControls({ micOn, onToggleMic, cameraOn, onToggleCamera, isPresenting, presentingElsewhereName, onToggleShare, viewMode, onToggleViewMode, onLeave, }) {
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
+ * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
+ * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
+ * screen, reactions, raise hand, grid/focus and leave.
+ *
+ * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
+ * picking up, so a participant can see their audio is being sent - and the camera button shows a green dot while a
+ * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
+ */
+import { useEffect, useRef, useState } from "react";
+import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
+import { ChevronUpIcon, EmojiIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+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]";
+const ALERT = "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]";
+const ACTIVE = "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]";
+/** Bars that rise and fall with the microphone's level (0-5) - a flat, dim set while there is no sound. */
+export function LevelBars({ level }) {
+    return (_jsx("span", { className: "flex items-center gap-[2px] h-5", "data-testid": "mic-level", "data-level": level, "aria-hidden": "true", children: [0.6, 1, 0.6].map((weight, i) => (_jsx("span", { className: `w-[3px] rounded-full ${level > 0 ? "bg-[#8ab4f8]" : "bg-white/50"}`, style: { height: `${4 + weight * level * 3}px` } }, i))) }));
+}
+export default function CallControls({ media, isPresenting, presentingElsewhereName, onToggleShare, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, onLeave, }) {
+    const [openMenu, setOpenMenu] = useState(null);
+    const barRef = useRef(null);
     const shareDisabled = !isPresenting && !!presentingElsewhereName;
-    return (_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 py-3 px-4 bg-surface border-t border-border", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onToggleMic, children: micOn ? "Mute" : "Unmute" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onToggleCamera, children: cameraOn ? "Turn camera off" : "Turn camera on" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: isPresenting ? "Stop sharing" : "Share screen" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onToggleViewMode, children: viewMode === "grid" ? "Focused view" : "Grid view" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: onLeave, children: "Leave" })] }));
+    // A menu closes on Escape or a press anywhere outside the bar.
+    useEffect(() => {
+        if (!openMenu) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!barRef.current?.contains(event.target)) {
+                setOpenMenu(null);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setOpenMenu(null);
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [openMenu]);
+    function toggleMenu(menu) {
+        setOpenMenu((prev) => (prev === menu ? null : menu));
+    }
+    return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
+                                onReaction(emoji);
+                                setOpenMenu(null);
+                            }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`, "aria-label": "Leave call", onClick: onLeave, children: _jsx(LeaveIcon, {}) })] }));
+}
+/** The device picker opened from the chevron beside the microphone/camera button: the available devices with the
+ * one in use ticked, or - while there are none to list - why, with a way to ask for access again. */
+function DeviceMenu({ kind, media, onClose }) {
+    const list = kind === "audio" ? media.devices.microphones : media.devices.cameras;
+    const noun = kind === "audio" ? "microphone" : "camera";
+    const selected = media.selectedDeviceIds[kind];
+    const denied = media.status[kind] === "denied";
+    return (_jsxs("div", { role: "menu", "aria-label": kind === "audio" ? "Microphones" : "Cameras", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0 w-max min-w-64 max-w-[calc(100vw-1rem)] p-1 rounded-lg bg-[#2b2d30] text-white text-sm shadow-xl", children: [list.map((device, index) => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": device.deviceId === selected, className: "flex w-full items-center gap-2 px-3 py-2 rounded-md text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                    void media.selectDevice(kind, device.deviceId);
+                    onClose();
+                }, children: [_jsx("span", { className: "w-4 text-[#8ab4f8]", "aria-hidden": "true", children: device.deviceId === selected ? "✓" : "" }), _jsx("span", { className: "truncate", children: device.label || `${noun[0].toUpperCase()}${noun.slice(1)} ${index + 1}` })] }, device.deviceId))), list.length === 0 && (_jsx("p", { className: "px-3 py-2 text-white/70", children: denied ? `Access to your ${noun} was blocked.` : `No ${noun} found.` })), (list.length === 0 || denied) && (_jsxs("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 rounded-md text-left text-[#8ab4f8] hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                    void media.requestAccess(kind);
+                    onClose();
+                }, children: ["Allow access to ", noun] }))] }));
 }

package/dist/apps/meet/_CallView.d.ts

@@ -7,6 +7,21 @@
  * program rooted at `apps/`, which cannot reference files outside it (`TS6059`), matching `booking-plugin`'s own
  * identical `apps/shared/` convention for reusable frontend-only code.
  *
+ * ## Fitting the window
+ *
+ * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
+ * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
+ * the branded page shell, whose header, footer and padding pushed it off the screen. The local participant's own
+ * tile is a small tile in the bottom-right corner while anyone else is in the call (above the control bar on a narrower
+ * window, and at the top on a phone, where the bar wraps onto a second row), and fills the tile area while they are
+ * alone.
+ *
+ * ## Who is heard
+ *
+ * A tile never plays sound. Each remote stream is played by its own hidden `<audio>` element, so a participant is
+ * heard whether or not their camera is on and whichever layout is showing. If the browser refuses to start the
+ * audio (an autoplay policy), a banner asks for a click, which is the gesture that allows it.
+ *
  * ## Layout precedence
  *
  * `computeMainUid()` decides who is shown large, in this order: an active presenter always wins (presentation
@@ -16,6 +31,7 @@
  * empty main slot once someone else has joined.
  */
 import React from "react";
+import type { LocalMedia } from "../shared/media/useLocalMedia.js";
 export interface CallViewProps {
     channel: string;
     /** Omitted when the caller already authenticated as a real RapidMX identity in `join()` - there is then no
@@ -24,10 +40,10 @@ export interface CallViewProps {
     token?: string;
     selfUid: string;
     selfName: string;
+    meetingTitle: string;
     iceServers: RTCIceServer[];
-    initialStream: MediaStream;
-    initialMicOn: boolean;
-    initialCameraOn: boolean;
+    /** The camera and microphone, owned by the page (`[token].tsx`) - the lobby's tracks carried into the call. */
+    media: LocalMedia;
     onLeave: () => void;
 }
 /** Who is shown large - see this module's doc comment. `undefined` when nobody but the local participant has
@@ -38,4 +54,8 @@ export declare function computeMainUid(options: {
     activeSpeakerUid?: string;
     otherUids: readonly string[];
 }): string | undefined;
-export default function CallView({ channel, token, selfUid, selfName, iceServers, initialStream, initialMicOn, initialCameraOn, onLeave, }: CallViewProps): React.JSX.Element;
+/** This tab's identity in the call: the account (or guest) uid plus a random suffix, so the same account joining
+ * from two devices - or two tabs - is two participants rather than one that ignores itself. It travels as the
+ * `peer` of each message; `from` stays the exact authenticated uid, which the server requires. */
+export declare function newPeerId(selfUid: string): string;
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, media, onLeave }: CallViewProps): React.JSX.Element;

package/dist/apps/meet/_CallView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
@@ -12,6 +12,21 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * program rooted at `apps/`, which cannot reference files outside it (`TS6059`), matching `booking-plugin`'s own
  * identical `apps/shared/` convention for reusable frontend-only code.
  *
+ * ## Fitting the window
+ *
+ * The call fills the viewport (`fixed inset-0`) as three rows - a slim header, the tiles (which take whatever room
+ * is left and never scroll the page), and the control bar pinned to the bottom - instead of being laid out inside
+ * the branded page shell, whose header, footer and padding pushed it off the screen. The local participant's own
+ * tile is a small tile in the bottom-right corner while anyone else is in the call (above the control bar on a narrower
+ * window, and at the top on a phone, where the bar wraps onto a second row), and fills the tile area while they are
+ * alone.
+ *
+ * ## Who is heard
+ *
+ * A tile never plays sound. Each remote stream is played by its own hidden `<audio>` element, so a participant is
+ * heard whether or not their camera is on and whichever layout is showing. If the browser refuses to start the
+ * audio (an autoplay policy), a banner asks for a click, which is the gesture that allows it.
+ *
  * ## Layout precedence
  *
  * `computeMainUid()` decides who is shown large, in this order: an active presenter always wins (presentation
@@ -20,16 +35,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * slot); else, in focus mode with nobody yet speaking, the first other participant - so focus mode never shows an
  * empty main slot once someone else has joined.
  */
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { playRaisedHandChime } from "../shared/media/chime.js";
 import { pickActiveSpeaker } from "../shared/media/activeSpeaker.js";
 import { startLevelMeter } from "../shared/media/levelMeter.js";
-import { requestDisplayMedia, setTracksEnabled, stopStream } from "../shared/media/deviceMedia.js";
+import { requestDisplayMedia, stopStream } from "../shared/media/deviceMedia.js";
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import CallControls from "./_CallControls.js";
 import ParticipantTile from "./_ParticipantTile.js";
+/** How long a reaction floats on screen. */
+const REACTION_MS = 4000;
+/** The most reactions shown at once - a burst beyond this drops the oldest. */
+const MAX_REACTIONS = 12;
 /** Who is shown large - see this module's doc comment. `undefined` when nobody but the local participant has
  * joined yet (the grid/focus toggle still works, there's just nobody else to focus on). */
 export function computeMainUid(options) {
@@ -44,36 +63,56 @@ export function computeMainUid(options) {
     }
     return options.otherUids[0];
 }
-export default function CallView({ channel, token, selfUid, selfName, iceServers, initialStream, initialMicOn, initialCameraOn, onLeave, }) {
+/** This tab's identity in the call: the account (or guest) uid plus a random suffix, so the same account joining
+ * from two devices - or two tabs - is two participants rather than one that ignores itself. It travels as the
+ * `peer` of each message; `from` stays the exact authenticated uid, which the server requires. */
+export function newPeerId(selfUid) {
+    return `${selfUid}~${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
+}
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, media, onLeave }) {
+    const [peerId] = useState(() => newPeerId(selfUid));
     const [connectError, setConnectError] = useState(null);
     const [participants, setParticipants] = useState([]);
     const [remoteStreams, setRemoteStreams] = useState({});
     const [levels, setLevels] = useState({});
     const [presenterUid, setPresenterUid] = useState(undefined);
-    const [micOn, setMicOn] = useState(initialMicOn);
-    const [cameraOn, setCameraOn] = useState(initialCameraOn);
-    const [isPresenting, setIsPresenting] = useState(false);
+    const [screenStream, setScreenStream] = useState(null);
+    const [handRaised, setHandRaised] = useState(false);
     const [viewMode, setViewMode] = useState("grid");
     const [pinnedUid, setPinnedUid] = useState(undefined);
     const [activeSpeakerUid, setActiveSpeakerUid] = useState(undefined);
+    const [reactions, setReactions] = useState([]);
+    const [announcement, setAnnouncement] = useState("");
+    const [audioBlocked, setAudioBlocked] = useState(false);
+    const [audioNonce, setAudioNonce] = useState(0);
     const managerRef = useRef(null);
-    const clientRef = useRef(null);
-    const localStreamRef = useRef(initialStream);
     const screenStreamRef = useRef(null);
-    const cameraTrackRef = useRef(initialStream.getVideoTracks()[0] ?? null);
     const levelMetersRef = useRef({});
-    const isPresentingRef = useRef(false);
+    const reactionSeqRef = useRef(0);
+    const reactionTimersRef = useRef(new Set());
+    const isPresenting = !!screenStream;
+    const showReaction = useCallback((emoji, name) => {
+        const id = ++reactionSeqRef.current;
+        setReactions((prev) => [...prev.slice(-(MAX_REACTIONS - 1)), { id, emoji, name }]);
+        const timer = setTimeout(() => {
+            reactionTimersRef.current.delete(timer);
+            setReactions((prev) => prev.filter((reaction) => reaction.id !== id));
+        }, REACTION_MS);
+        reactionTimersRef.current.add(timer);
+    }, []);
     useEffect(() => {
         let cancelled = false;
         const client = new GuestSignalingClient({ channel, token });
-        clientRef.current = client;
         const manager = new MeshConnectionManager({
             selfUid,
+            peerId,
             selfName,
             iceServers,
             channel: client,
             createPeerConnection: createBrowserPeerConnection,
-            localStream: localStreamRef.current,
+            localAudioTrack: media.audioTrack,
+            localVideoTrack: media.videoTrack,
+            localState: { audioOn: media.micOn, videoOn: media.cameraOn },
         });
         managerRef.current = manager;
         const unsubscribe = manager.onEvent((event) => {
@@ -81,6 +120,9 @@ export default function CallView({ channel, token, selfUid, selfName, iceServers
                 case "participant-joined":
                     setParticipants((prev) => [...prev.filter((p) => p.uid !== event.participant.uid), event.participant]);
                     return;
+                case "participant-updated":
+                    setParticipants((prev) => prev.map((p) => (p.uid === event.participant.uid ? event.participant : p)));
+                    return;
                 case "participant-left":
                     setParticipants((prev) => prev.filter((p) => p.uid !== event.uid));
                     setRemoteStreams((prev) => {
@@ -98,9 +140,16 @@ export default function CallView({ channel, token, selfUid, selfName, iceServers
                     setRemoteStreams((prev) => ({ ...prev, [event.uid]: event.stream }));
                     startTrackingLevel(levelMetersRef, event.uid, event.stream, (level) => setLevels((prev) => ({ ...prev, [event.uid]: level })));
                     return;
+                case "hand-raised":
+                    playRaisedHandChime();
+                    setAnnouncement(`${event.name} raised a hand`);
+                    return;
+                case "reaction":
+                    showReaction(event.emoji, event.name);
+                    return;
                 case "presenter-changed":
                     setPresenterUid(event.uid);
-                    if (event.uid !== selfUid && isPresentingRef.current) {
+                    if (event.uid !== peerId && screenStreamRef.current) {
                         // Lost a presenter-claim collision (see `MeshConnectionManager`'s doc comment) - stop our
                         // own capture without re-sending a release the manager already handled internally.
                         stopLocalPresentation(false);
@@ -120,8 +169,14 @@ export default function CallView({ channel, token, selfUid, selfName, iceServers
                 setConnectError(err.message);
             }
         });
+        // A closing tab doesn't unmount React, so say goodbye explicitly - otherwise everyone else keeps a tile for a
+        // participant who is gone.
+        const onPageHide = () => manager.stop();
+        window.addEventListener("pagehide", onPageHide);
+        const timers = reactionTimersRef.current;
         return () => {
             cancelled = true;
+            window.removeEventListener("pagehide", onPageHide);
             unsubscribe();
             manager.stop();
             client.close();
@@ -129,32 +184,43 @@ export default function CallView({ channel, token, selfUid, selfName, iceServers
                 handle.stop();
             }
             levelMetersRef.current = {};
-            stopStream(localStreamRef.current);
+            // Only the screen capture is this view's to stop - the camera and microphone belong to the page, which
+            // releases them when the participant leaves.
             stopStream(screenStreamRef.current);
+            for (const timer of timers) {
+                clearTimeout(timer);
+            }
+            timers.clear();
         };
         // Deliberately runs once - the call's identity (channel/token/selfUid) never changes for the life of this
         // component; a real identity change is a new call, which unmounts/remounts this view from `[token].tsx`.
     }, []);
+    // What is sent follows what the participant has: the camera or the shared screen, and the microphone.
+    useEffect(() => {
+        managerRef.current?.setLocalTrack("audio", media.audioTrack);
+    }, [media.audioTrack]);
+    useEffect(() => {
+        managerRef.current?.setLocalTrack("video", screenStream?.getVideoTracks()[0] ?? media.videoTrack);
+    }, [media.videoTrack, screenStream]);
+    useEffect(() => {
+        managerRef.current?.setLocalState({ audioOn: media.micOn, videoOn: media.cameraOn || isPresenting, handRaised });
+    }, [media.micOn, media.cameraOn, isPresenting, handRaised]);
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
         }
     }, [levels, presenterUid]);
     function stopLocalPresentation(alsoRelease) {
-        isPresentingRef.current = false;
-        setIsPresenting(false);
         if (alsoRelease) {
             managerRef.current?.releasePresenter();
         }
         stopStream(screenStreamRef.current);
         screenStreamRef.current = null;
-        // Restores the camera track as the outgoing video sender - its own `enabled` flag (toggled by
-        // `handleToggleCamera`, untouched by presenting) already governs whether it actually sends frames, so
-        // this is correct whether or not the camera happens to be off right now.
-        managerRef.current?.replaceLocalVideoTrack(cameraTrackRef.current);
+        // The sync effect above swaps the camera back in as the outgoing video track.
+        setScreenStream(null);
     }
     async function handleToggleShare() {
-        if (isPresenting) {
+        if (screenStreamRef.current) {
             stopLocalPresentation(true);
             return;
         }
@@ -169,48 +235,67 @@ export default function CallView({ channel, token, selfUid, selfName, iceServers
             return;
         }
         screenStreamRef.current = result.value;
-        const [screenTrack] = result.value.getVideoTracks();
-        managerRef.current?.replaceLocalVideoTrack(screenTrack);
-        isPresentingRef.current = true;
-        setIsPresenting(true);
-        screenTrack.onended = () => stopLocalPresentation(true);
-    }
-    function handleToggleMic() {
-        setMicOn((prev) => {
-            const next = !prev;
-            setTracksEnabled(localStreamRef.current, "audio", next);
-            return next;
-        });
+        setScreenStream(result.value);
+        result.value.getVideoTracks()[0].onended = () => stopLocalPresentation(true);
     }
-    function handleToggleCamera() {
-        setCameraOn((prev) => {
-            const next = !prev;
-            // Just the track's own `enabled` flag (see `deviceMedia.ts`'s `setTracksEnabled()` doc comment) -
-            // whether that track is actually the one being sent (camera) or has been swapped out for a screen
-            // share (`replaceLocalVideoTrack()`) is an orthogonal concern this toggle never touches.
-            setTracksEnabled(localStreamRef.current, "video", next);
-            return next;
-        });
+    function handleToggleHand() {
+        setHandRaised((prev) => !prev);
     }
-    function handleLeave() {
-        onLeave();
+    function handleReaction(emoji) {
+        if (managerRef.current?.sendReaction(emoji)) {
+            showReaction(emoji, "You");
+        }
     }
     function togglePin(uid) {
         setPinnedUid((prev) => (prev === uid ? undefined : uid));
     }
+    function handleAudioBlocked() {
+        setAudioBlocked(true);
+    }
+    function handleResumeAudio() {
+        setAudioBlocked(false);
+        setAudioNonce((prev) => prev + 1);
+    }
     const otherUids = participants.map((p) => p.uid);
+    // A pin or an active-speaker pick can name someone who has just left, until the state catches up.
+    const stillHere = (uid) => (uid && otherUids.includes(uid) ? uid : undefined);
     const showFocusLayout = !!presenterUid || viewMode === "focus";
-    const mainUid = showFocusLayout ? computeMainUid({ presenterUid, pinnedUid, activeSpeakerUid, otherUids }) : undefined;
-    const presenterName = presenterUid ? (presenterUid === selfUid ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
-    const localTile = (_jsx(ParticipantTile, { name: selfName, stream: isPresenting ? null : localStreamRef.current, isLocal: true, cameraOff: !cameraOn && !isPresenting, micMuted: !micOn, isFocused: mainUid === selfUid, onClick: () => togglePin(selfUid) }, "__self"));
-    const remoteTiles = participants.map((p) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !remoteStreams[p.uid], isFocused: mainUid === p.uid, onClick: () => togglePin(p.uid) }, p.uid)));
-    const allTiles = [localTile, ...remoteTiles];
-    // The presenter's own screen content is rendered from their local capture, not their (replaced) outgoing
-    // video sender - `mainStream` picks whichever is right for `mainUid`.
-    const mainStream = mainUid === selfUid ? (isPresenting ? screenStreamRef.current : localStreamRef.current) : mainUid ? (remoteStreams[mainUid] ?? null) : null;
-    const mainName = mainUid === selfUid ? selfName : (participants.find((p) => p.uid === mainUid)?.name ?? "");
-    const thumbnailTiles = showFocusLayout ? allTiles.filter((tile) => tile.key !== (mainUid === selfUid ? "__self" : mainUid)) : allTiles;
-    return (_jsxs("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: [connectError && _jsx(Alert, { children: connectError }), _jsx("div", { className: "flex-1 p-3 flex flex-col gap-3 min-h-0", children: showFocusLayout && mainUid ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 min-h-0", children: _jsx(ParticipantTile, { name: mainName, stream: mainStream, isLocal: mainUid === selfUid, isFocused: true, className: "h-full" }) }), _jsx("div", { className: "flex gap-2 overflow-x-auto h-24 shrink-0", children: thumbnailTiles.map((tile) => (_jsx("div", { className: "w-32 shrink-0", children: tile }, tile.key))) })] })) : (_jsx("div", { className: "flex-1 grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]", children: allTiles })) }), _jsx(CallControls, { micOn: micOn, onToggleMic: handleToggleMic, cameraOn: cameraOn, onToggleCamera: handleToggleCamera, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== selfUid ? presenterName : undefined, onToggleShare: handleToggleShare, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), onLeave: handleLeave })] }));
+    const mainUid = showFocusLayout
+        ? computeMainUid({ presenterUid, pinnedUid: stillHere(pinnedUid), activeSpeakerUid: stillHere(activeSpeakerUid), otherUids })
+        : undefined;
+    const presenterName = presenterUid ? (presenterUid === peerId ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
+    const raisedNames = [...(handRaised ? ["You"] : []), ...participants.filter((p) => p.handRaised).map((p) => p.name)];
+    const alone = participants.length === 0;
+    const remoteTile = (p, className) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !p.videoOn, micMuted: !p.audioOn, handRaised: p.handRaised, isFocused: mainUid === p.uid, contain: presenterUid === p.uid, className: className, onClick: () => togglePin(p.uid) }, p.uid));
+    const selfTile = (className) => (_jsx(ParticipantTile, { name: selfName, stream: media.videoStream, isLocal: true, cameraOff: !media.cameraOn, micMuted: !media.micOn, handRaised: handRaised, className: className }));
+    const mainParticipant = participants.find((p) => p.uid === mainUid);
+    const thumbnails = participants.filter((p) => p.uid !== mainUid);
+    let stage;
+    if (alone) {
+        // Nobody else yet: the local participant fills the tile area, presenting or not.
+        stage = isPresenting ? (_jsx(ParticipantTile, { name: selfName, stream: screenStream, isLocal: true, contain: true, isFocused: true, className: "h-full" })) : (selfTile("h-full"));
+    }
+    else if (showFocusLayout && (mainParticipant || isPresenting)) {
+        stage = (_jsxs("div", { className: "h-full flex flex-col gap-2", children: [_jsx("div", { className: "flex-1 min-h-0", "data-testid": "main-tile", children: mainParticipant ? (remoteTile(mainParticipant, "h-full")) : (_jsx(ParticipantTile, { name: selfName, stream: screenStream, isLocal: true, contain: true, isFocused: true, className: "h-full" })) }), thumbnails.length > 0 && (_jsx("div", { className: "flex gap-2 overflow-x-auto h-24 shrink-0", "data-testid": "thumbnails", children: thumbnails.map((p) => (_jsx("div", { className: "w-36 shrink-0", children: remoteTile(p, "h-full") }, p.uid))) }))] }));
+    }
+    else {
+        stage = (_jsx("div", { className: "h-full grid gap-2 auto-rows-fr [grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))]", children: participants.map((p) => remoteTile(p, "h-full")) }));
+    }
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-[#202124] text-white overflow-hidden", children: [_jsx("style", { children: `@keyframes meet-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-4vh) scale(1); } 100% { transform: translateY(-45vh) scale(1); opacity: 0; } }` }), _jsxs("header", { className: "shrink-0 flex items-center justify-between gap-3 px-4 py-3", children: [_jsx("h1", { className: "min-w-0 truncate text-base font-medium", children: meetingTitle }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [raisedNames.length > 0 && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "raised-hands", children: ["\u270B ", raisedNames.join(", ")] })), _jsx("span", { className: "px-3 py-1.5 rounded-full bg-[#3c4043] text-sm", "aria-label": `${participants.length + 1} participants`, children: participants.length + 1 })] })] }), connectError && (_jsx("div", { role: "alert", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#601410] text-[#f9dedc] text-sm", children: connectError })), audioBlocked && (_jsx("button", { type: "button", className: "shrink-0 mx-3 mb-2 px-3 py-2 rounded-lg bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", onClick: handleResumeAudio, children: "Click here to turn on sound" })), _jsxs("main", { className: "relative flex-1 min-h-0 px-3 pb-3", children: [stage, presenterName && presenterUid !== peerId && (_jsxs("p", { className: "absolute top-2 left-5 px-2 py-0.5 rounded bg-black/60 text-sm", children: [presenterName, " is presenting"] }))] }), _jsx("footer", { className: "shrink-0 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: _jsx(CallControls, { media: media, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), onLeave: onLeave }) }), !alone && (_jsx("div", { className: "absolute z-10 right-3 top-14 w-28 sm:top-auto sm:bottom-24 sm:w-52 aspect-video shadow-xl xl:right-4 xl:bottom-4", "data-testid": "self-view", children: selfTile("h-full") })), _jsx("div", { className: "pointer-events-none absolute left-4 bottom-28 w-40 h-[45vh]", "aria-hidden": "true", children: reactions.map((reaction) => (_jsxs("div", { className: "absolute bottom-0 flex flex-col items-center", style: { left: `${(reaction.id % 4) * 36}px`, animation: `meet-float ${REACTION_MS}ms ease-out forwards` }, "data-testid": "reaction", children: [_jsx("span", { className: "text-4xl leading-none", children: reaction.emoji }), _jsx("span", { className: "mt-1 px-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-xs", children: reaction.name })] }, reaction.id))) }), participants.map((p) => {
+                const stream = remoteStreams[p.uid];
+                return stream ? _jsx(RemoteAudio, { stream: stream, onBlocked: handleAudioBlocked }, `${p.uid}:${audioNonce}`) : null;
+            }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })] }));
+}
+/** Plays one remote participant's stream through a hidden `<audio>` element. `onBlocked` fires if the browser
+ * refuses to start it (an autoplay policy) - the view then asks for a click. */
+function RemoteAudio({ stream, onBlocked }) {
+    const audioRef = useRef(null);
+    useEffect(() => {
+        const element = audioRef.current;
+        element.srcObject = stream;
+        void Promise.resolve(element.play()).catch(onBlocked);
+    }, [stream, onBlocked]);
+    return _jsx("audio", { ref: audioRef, autoPlay: true, "data-testid": "remote-audio" });
 }
 function stopLevelMeter(ref, uid) {
     ref.current[uid]?.stop();