@rapidmx/meet-plugin 0.2.0 → 0.3.0

package/dist/apps/meet/_MeetLobby.js

@@ -4,117 +4,67 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 /**
- * The join/lobby step: name entry, device preview and pickers, mute/camera-off starting preferences, and the
- * "Join" button. Per this plugin's Phase 2 spec, the name field is always editable - it is only ever *prefilled*
- * when a session is genuinely known (see this component's `initialName` prop and `[token].tsx`'s own doc comment
- * on why that never actually happens on this page today).
+ * The join/lobby step: name entry, a preview of the camera, the microphone and camera on/off buttons and pickers,
+ * and the "Join" button. The camera and microphone are `LocalMedia` (`apps/shared/media/useLocalMedia.ts`), owned by
+ * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
+ * so leaving the lobby for the call must not (and does not) stop them.
  *
- * Device support/permission errors (`navigator.mediaDevices` missing entirely - e.g. a non-HTTPS context in some
- * browsers - a denied prompt, or no camera/microphone at all) are shown as a plain message rather than crashing;
- * joining is still allowed with no local media in that case (a signaling-only participant - see this plugin's
- * Phase 2 report's known-limitations note on why that participant's peer connections can carry no media at all
- * without this design's simpler, renegotiation-free mesh needing to grow one).
+ * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
+ * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
+ * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with
+ * nothing to send can still see and hear the call, and turn a camera or microphone on later from the call controls.
+ *
+ * Per this plugin's Phase 2 spec, the name field is always editable - it is only ever *prefilled* when a session is
+ * genuinely known (see this component's `initialName` prop and `[token].tsx`'s own doc comment on why that never
+ * actually happens on this page today).
  */
 import { useEffect, useRef, useState } from "react";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import { isMediaDevicesSupported, listDevices, requestUserMedia, setTracksEnabled, stopStream, } from "../shared/media/deviceMedia.js";
+import { LevelBars } from "./_CallControls.js";
+import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "./_icons.js";
 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";
-export default function MeetLobby({ meeting, initialName, onJoin }) {
+const ROUND_BUTTON = "flex items-center justify-center gap-1.5 h-12 min-w-12 px-3 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
+/** What the preview says when there is no picture to show. */
+function previewMessage(media) {
+    if (!media.supported) {
+        return "This browser can't use a camera or microphone here.";
+    }
+    if (media.requesting) {
+        return "Waiting for camera and microphone access…";
+    }
+    const status = media.status.video;
+    switch (status) {
+        case "off":
+            return "Camera is off";
+        case "denied":
+            return "Camera access is blocked";
+        case "unavailable":
+            return "No camera found";
+        case "error":
+            return "Camera couldn't start";
+        default:
+            return "No camera preview";
+    }
+}
+export default function MeetLobby({ meeting, media, initialName, onJoin }) {
     const [name, setName] = useState(initialName ?? "");
-    const [micOn, setMicOn] = useState(true);
-    const [cameraOn, setCameraOn] = useState(true);
-    const [stream, setStream] = useState(null);
-    const [devices, setDevices] = useState({ cameras: [], microphones: [] });
-    const [error, setError] = useState(null);
-    const [supported, setSupported] = useState(true);
     const videoRef = useRef(null);
-    // Requests device access once, on mount - never re-requested just because `micOn`/`cameraOn` toggle (those
-    // toggles disable/enable the already-granted tracks instead, see `handleToggleMic`/`handleToggleCamera`).
+    const { requestAccess } = media;
+    // Asks once, when the lobby opens - see this module's doc comment for the button that asks again.
     useEffect(() => {
-        let cancelled = false;
-        if (!isMediaDevicesSupported()) {
-            setSupported(false);
-            return;
-        }
-        void requestUserMedia({ audio: true, video: true }).then(async (result) => {
-            if (cancelled) {
-                return;
-            }
-            if (!result.ok) {
-                setError(result.error);
-                return;
-            }
-            setStream(result.value);
-            const list = await listDevices();
-            if (!cancelled && list.ok) {
-                setDevices(list.value);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-        // Intentionally empty deps - see this effect's own comment on why this never re-runs.
+        void requestAccess();
+        // Only on mount: `requestAccess` is stable, and a later change of devices is the participant's own doing.
     }, []);
-    // Releases the camera/microphone the moment this component unmounts (leaving the lobby without joining, or
-    // transitioning into the call - `[token].tsx` requests its own continuation of these tracks first).
-    useEffect(() => stopOnUnmount(stream), [stream]);
+    // The `<video>` element only exists while there is a stream, so its stream is bound whenever it (re)appears.
     useEffect(() => {
         if (videoRef.current) {
-            videoRef.current.srcObject = stream;
-        }
-    }, [stream]);
-    function handleToggleMic() {
-        setMicOn((prev) => {
-            const next = !prev;
-            setTracksEnabled(stream, "audio", next);
-            return next;
-        });
-    }
-    function handleToggleCamera() {
-        setCameraOn((prev) => {
-            const next = !prev;
-            setTracksEnabled(stream, "video", next);
-            return next;
-        });
-    }
-    async function handleSwitchDevice(kind, deviceId) {
-        const result = await requestUserMedia({ [kind]: { deviceId: { exact: deviceId } }, [kind === "audio" ? "video" : "audio"]: false });
-        if (!result.ok) {
-            setError(result.error);
-            return;
-        }
-        const [newTrack] = kind === "audio" ? result.value.getAudioTracks() : result.value.getVideoTracks();
-        // `stream` is always set by the time this can be called - the device picker this is wired to only ever
-        // renders once `devices` is populated, which itself only happens after an initial successful
-        // `requestUserMedia()` call has already set `stream` (see the mount effect above).
-        if (!newTrack) {
-            return;
-        }
-        const [oldTrack] = kind === "audio" ? stream.getAudioTracks() : stream.getVideoTracks();
-        if (oldTrack) {
-            stream.removeTrack(oldTrack);
-            oldTrack.stop();
+            videoRef.current.srcObject = media.videoStream;
         }
-        newTrack.enabled = kind === "audio" ? micOn : cameraOn;
-        stream.addTrack(newTrack);
-        // Re-triggers the preview `<video>` binding and any downstream consumer without minting a whole new
-        // `MediaStream` object (the mesh's already-negotiated connections keep the same stream identity).
-        setStream((current) => current);
-    }
-    function handleJoin() {
-        onJoin({
-            name: name.trim(),
-            micOn,
-            cameraOn,
-            stream: stream ?? new MediaStream(),
-        });
-    }
-    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: meeting.title }), meeting.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", meeting.hostDisplayName] }), _jsxs("div", { className: "mt-6 grid sm:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("div", { className: "aspect-video bg-black/80 rounded-md overflow-hidden flex items-center justify-center", children: stream && cameraOn ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover" })) : (_jsx("p", { className: "text-white/70 text-sm", children: cameraOn ? "No camera preview" : "Camera is off" })) }), _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleToggleMic, disabled: !stream, children: micOn ? "Mute mic" : "Unmute mic" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleToggleCamera, disabled: !stream, children: cameraOn ? "Turn camera off" : "Turn camera on" })] }), !supported && _jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access." }), error && _jsx(Alert, { children: error.message }), devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsx("select", { className: `${INPUT_CLASS} mt-1`, onChange: (e) => handleSwitchDevice("video", e.target.value), children: devices.cameras.map((d) => (_jsx("option", { value: d.deviceId, children: d.label || "Camera" }, d.deviceId))) })] })), devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsx("select", { className: `${INPUT_CLASS} mt-1`, onChange: (e) => handleSwitchDevice("audio", e.target.value), children: devices.microphones.map((d) => (_jsx("option", { value: d.deviceId, children: d.label || "Microphone" }, d.deviceId))) })] }))] }), _jsxs("div", { className: "flex flex-col justify-center gap-3", children: [_jsx(FormField, { label: "Your name", htmlFor: "meet-name", children: _jsx("input", { id: "meet-name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }) }), _jsx(Button, { type: "button", className: "!w-auto", disabled: !name.trim(), onClick: handleJoin, children: "Join meeting" })] })] })] }));
-}
-/** `useEffect` cleanup helper for stopping a lobby preview stream on unmount/replacement - a named function
- * (rather than an inline arrow) purely so its intent reads clearly at the call site. */
-function stopOnUnmount(stream) {
-    return () => stopStream(stream);
+    }, [media.videoStream]);
+    const cameraOk = media.status.video === "live" || media.status.video === "off";
+    const needsAccess = media.supported && !media.requesting && (media.status.audio !== "live" || !cameraOk);
+    const nothingToSend = !media.audioTrack && !media.videoTrack && !media.requesting;
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: meeting.title }), meeting.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", meeting.hostDisplayName] }), _jsxs("div", { className: "mt-6 grid sm:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center", children: [media.videoStream ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover [transform:scaleX(-1)]" })) : (_jsx("p", { className: "px-4 text-center text-white/70 text-sm", children: previewMessage(media) })), _jsxs("div", { className: "absolute bottom-3 inset-x-0 flex justify-center gap-3", children: [_jsxs("button", { type: "button", className: `${ROUND_BUTTON} ${media.micOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "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, {})] }), _jsx("button", { type: "button", className: `${ROUND_BUTTON} ${media.cameraOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "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.supported && (_jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access. Try a current browser over HTTPS - a link opened inside another app often needs to be opened in the browser itself." })), media.error && _jsx(Alert, { children: media.error.message }), needsAccess && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void requestAccess(), children: media.error ? "Try again" : "Allow camera and microphone" })), nothingToSend && _jsx("p", { className: "text-sm text-text-muted mt-3", children: "You'll join without a camera or microphone." }), media.devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.video ?? "", onChange: (e) => void media.selectDevice("video", e.target.value), children: [!media.selectedDeviceIds.video && _jsx("option", { value: "", children: "Choose a camera" }), media.devices.cameras.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Camera ${i + 1}` }, d.deviceId)))] })] })), media.devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.audio ?? "", onChange: (e) => void media.selectDevice("audio", e.target.value), children: [!media.selectedDeviceIds.audio && _jsx("option", { value: "", children: "Choose a microphone" }), media.devices.microphones.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Microphone ${i + 1}` }, d.deviceId)))] })] }))] }), _jsxs("div", { className: "flex flex-col justify-center gap-3", children: [_jsx(FormField, { label: "Your name", htmlFor: "meet-name", children: _jsx("input", { id: "meet-name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }) }), _jsx(Button, { type: "button", className: "!w-auto", disabled: !name.trim(), onClick: () => onJoin(name.trim()), children: "Join meeting" })] })] })] }));
 }

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

@@ -1,18 +1,24 @@
-/** One participant's video tile - used by both the grid and the focused/thumbnail-strip layouts in `_CallView.tsx`.
- * Renders a placeholder (the participant's initial) instead of a `<video>` element whenever there's no stream or
- * their camera is off, rather than showing a black/frozen frame. */
+/** One participant's video tile - used by the grid, the focused/thumbnail-strip layouts and the local participant's
+ * corner tile in `_CallView.tsx`. Renders a placeholder (the participant's initial) instead of a `<video>` element
+ * whenever there's no stream or their camera is off, rather than showing a black/frozen frame.
+ *
+ * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
+ * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
+ * in the current layout - can never silence anyone. */
 import React from "react";
 export interface ParticipantTileProps {
     name: string;
     stream?: MediaStream | null;
-    /** The local participant's own tile must be `muted` (never plays back its own audio) - a real remote tile
-     * never sets this. */
     isLocal?: boolean;
+    /** Shows the initial instead of the video. */
     cameraOff?: boolean;
     micMuted?: boolean;
+    handRaised?: boolean;
     /** Highlights this tile as the current presenter/focus. */
     isFocused?: boolean;
+    /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
+    contain?: boolean;
     onClick?: () => void;
     className?: string;
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, isFocused, onClick, className }: ParticipantTileProps): React.JSX.Element;
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -3,23 +3,26 @@ 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
 ///////////////////////////////////////////////////////////////////////////////
-/** One participant's video tile - used by both the grid and the focused/thumbnail-strip layouts in `_CallView.tsx`.
- * Renders a placeholder (the participant's initial) instead of a `<video>` element whenever there's no stream or
- * their camera is off, rather than showing a black/frozen frame. */
+/** One participant's video tile - used by the grid, the focused/thumbnail-strip layouts and the local participant's
+ * corner tile in `_CallView.tsx`. Renders a placeholder (the participant's initial) instead of a `<video>` element
+ * whenever there's no stream or their camera is off, rather than showing a black/frozen frame.
+ *
+ * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
+ * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
+ * in the current layout - can never silence anyone. */
 import { useEffect, useRef } from "react";
+import { MicOffIcon } from "./_icons.js";
 function initialOf(name) {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, isFocused, onClick, className }) {
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }) {
     const videoRef = useRef(null);
     const showVideo = !!stream && !cameraOff;
+    // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
     useEffect(() => {
         if (videoRef.current) {
-            /* v8 ignore next -- unreachable via real usage: the `<video>` element only ever renders at all when
-               `showVideo` (`!!stream && !cameraOff`) is true, so `stream` is always truthy whenever `videoRef.current`
-               is non-null here; the `?? null` exists purely to satisfy `srcObject`'s type, not for a real code path. */
             videoRef.current.srcObject = stream ?? null;
         }
-    }, [stream]);
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-md bg-black/80 flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-accent" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: [showVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: isLocal, className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold", "aria-hidden": "true", children: initialOf(name) })), _jsxs("div", { className: "absolute bottom-1.5 left-1.5 flex items-center gap-1.5 px-2 py-0.5 rounded bg-black/60 text-white text-xs", children: [micMuted && _jsx("span", { title: "Muted", children: "(muted)" }), _jsxs("span", { children: [name, isLocal ? " (you)" : ""] })] })] }));
+    }, [stream, showVideo]);
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}` })) : (_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
 }

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

@@ -0,0 +1,15 @@
+/** The in-call control icons, as inline SVG (24x24, Material Design paths, `currentColor`) so this plugin needs no
+ * icon package of its own. Decorative - every button that uses one carries its own `aria-label`. */
+import React from "react";
+export declare const MicIcon: () => React.JSX.Element;
+export declare const MicOffIcon: () => React.JSX.Element;
+export declare const VideoIcon: () => React.JSX.Element;
+export declare const VideoOffIcon: () => React.JSX.Element;
+export declare const ScreenShareIcon: () => React.JSX.Element;
+export declare const EmojiIcon: () => React.JSX.Element;
+export declare const GridIcon: () => React.JSX.Element;
+export declare const FocusIcon: () => React.JSX.Element;
+export declare const LeaveIcon: () => React.JSX.Element;
+export declare const ChevronUpIcon: () => React.JSX.Element;
+/** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
+export declare const HandIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Icon({ path, className = "w-6 h-6" }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: className, fill: "currentColor", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: path }) }));
+}
+export const MicIcon = () => (_jsx(Icon, { path: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" }));
+export const MicOffIcon = () => (_jsx(Icon, { path: "M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" }));
+export const VideoIcon = () => _jsx(Icon, { path: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" });
+export const VideoOffIcon = () => (_jsx(Icon, { path: "M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" }));
+export const ScreenShareIcon = () => (_jsx(Icon, { path: "M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" }));
+export const EmojiIcon = () => (_jsx(Icon, { path: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" }));
+export const GridIcon = () => _jsx(Icon, { path: "M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" });
+export const FocusIcon = () => _jsx(Icon, { path: "M3 3h18v12H3V3zm0 14h5v4H3v-4zm6.5 0h5v4h-5v-4zM16 17h5v4h-5v-4z" });
+export const LeaveIcon = () => (_jsx(Icon, { path: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" }));
+export const ChevronUpIcon = () => _jsx(Icon, { path: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z", className: "w-5 h-5" });
+/** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
+export const HandIcon = () => (_jsx("span", { className: "text-xl leading-none", "aria-hidden": "true", children: "\u270B" }));

package/dist/apps/shared/media/chime.d.ts

@@ -0,0 +1,31 @@
+/** The short two-note chime played when another participant raises their hand - synthesized with Web Audio, so there
+ * is no sound file to ship. Never throws and does nothing where there is no `AudioContext` (SSR, an old browser):
+ * the raised hand is also shown on screen, the chime is an extra. */
+/** The subset of `AudioContext` this module uses - what a test's fake implements. */
+export interface ChimeAudioContext {
+    readonly currentTime: number;
+    readonly state: string;
+    readonly destination: unknown;
+    createGain(): {
+        gain: {
+            setValueAtTime(value: number, time: number): void;
+            exponentialRampToValueAtTime(value: number, time: number): void;
+        };
+        connect(destination: unknown): void;
+    };
+    createOscillator(): {
+        type: string;
+        frequency: {
+            setValueAtTime(value: number, time: number): void;
+        };
+        connect(destination: unknown): void;
+        start(time: number): void;
+        stop(time: number): void;
+    };
+    resume(): Promise<void> | void;
+    close(): Promise<void> | void;
+}
+export type ChimeContextFactory = () => ChimeAudioContext | undefined;
+/** The real `AudioContext`/`webkitAudioContext`, or `undefined` where there is none. */
+export declare function defaultChimeContext(): ChimeAudioContext | undefined;
+export declare function playRaisedHandChime(createContext?: ChimeContextFactory): void;

package/dist/apps/shared/media/chime.js

@@ -0,0 +1,49 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** The short two-note chime played when another participant raises their hand - synthesized with Web Audio, so there
+ * is no sound file to ship. Never throws and does nothing where there is no `AudioContext` (SSR, an old browser):
+ * the raised hand is also shown on screen, the chime is an extra. */
+/** The real `AudioContext`/`webkitAudioContext`, or `undefined` where there is none. */
+export function defaultChimeContext() {
+    if (typeof window === "undefined") {
+        return undefined;
+    }
+    const Ctor = window.AudioContext ??
+        window.webkitAudioContext;
+    return Ctor ? new Ctor() : undefined;
+}
+/** The two notes (Hz) and how long each lasts (seconds). */
+const NOTES = [880, 1320];
+const NOTE_SECONDS = 0.18;
+export function playRaisedHandChime(createContext = defaultChimeContext) {
+    try {
+        const context = createContext();
+        if (!context) {
+            return;
+        }
+        if (context.state === "suspended") {
+            void context.resume();
+        }
+        const start = context.currentTime;
+        const end = start + NOTE_SECONDS * NOTES.length + 0.25;
+        const gain = context.createGain();
+        gain.gain.setValueAtTime(0.0001, start);
+        gain.gain.exponentialRampToValueAtTime(0.25, start + 0.03);
+        gain.gain.exponentialRampToValueAtTime(0.0001, end);
+        gain.connect(context.destination);
+        NOTES.forEach((frequency, index) => {
+            const oscillator = context.createOscillator();
+            oscillator.type = "sine";
+            oscillator.frequency.setValueAtTime(frequency, start);
+            oscillator.connect(gain);
+            oscillator.start(start + index * NOTE_SECONDS);
+            oscillator.stop(start + (index + 1) * NOTE_SECONDS + 0.1);
+        });
+        setTimeout(() => void context.close(), (end - start) * 1000 + 200);
+    }
+    catch {
+        // Audio is best-effort here - the hand is shown on screen regardless.
+    }
+}

package/dist/apps/shared/media/deviceMedia.d.ts

@@ -1,8 +1,8 @@
 /**
  * Thin, dependency-injectable wrappers over `navigator.mediaDevices` - `enumerateDevices()`/`getUserMedia()`/
- * `getDisplayMedia()` - used by both the join/lobby page's device preview and the in-call view's mute/camera/share
- * controls (see this plugin's Phase 2 `.claude/NOTES.md` entry). Kept under `src/` rather than `apps/meet/` because
- * it is pure logic with no JSX, reused by more than one page/component.
+ * `getDisplayMedia()` - used by `useLocalMedia()` (the camera and microphone) and the in-call view's share-screen
+ * control (see this plugin's Phase 2 `.claude/NOTES.md` entry). Kept under `apps/shared/` rather than `apps/meet/`
+ * because it is pure logic with no JSX, reused by more than one module.
  *
  * Every function accepts an optional `MediaDevicesLike` so a test can inject a fake without a real browser; the
  * real `navigator.mediaDevices` is used by default, resolved lazily inside each function (never at module scope)
@@ -59,7 +59,3 @@ export declare function requestDisplayMedia(devices?: MediaDevicesLike | undefin
 /** Stops every track of `stream` (releasing the camera/microphone/screen-share indicator) - tolerates `undefined`/
  * `null` so a caller never needs its own guard. */
 export declare function stopStream(stream: MediaStream | undefined | null): void;
-/** Enables/disables every track of `stream` matching `kind`, for the mute/camera-off toggles - tracks are kept
- * (not stopped/removed), matching every mainstream video-call app's "mute" behavior: instant, reversible, and
- * without re-requesting `getUserMedia()` or renegotiating the `RTCPeerConnection`. */
-export declare function setTracksEnabled(stream: MediaStream | undefined | null, kind: "audio" | "video", enabled: boolean): void;

package/dist/apps/shared/media/deviceMedia.js

@@ -4,9 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Thin, dependency-injectable wrappers over `navigator.mediaDevices` - `enumerateDevices()`/`getUserMedia()`/
- * `getDisplayMedia()` - used by both the join/lobby page's device preview and the in-call view's mute/camera/share
- * controls (see this plugin's Phase 2 `.claude/NOTES.md` entry). Kept under `src/` rather than `apps/meet/` because
- * it is pure logic with no JSX, reused by more than one page/component.
+ * `getDisplayMedia()` - used by `useLocalMedia()` (the camera and microphone) and the in-call view's share-screen
+ * control (see this plugin's Phase 2 `.claude/NOTES.md` entry). Kept under `apps/shared/` rather than `apps/meet/`
+ * because it is pure logic with no JSX, reused by more than one module.
  *
  * Every function accepts an optional `MediaDevicesLike` so a test can inject a fake without a real browser; the
  * real `navigator.mediaDevices` is used by default, resolved lazily inside each function (never at module scope)
@@ -99,12 +99,3 @@ export async function requestDisplayMedia(devices = defaultMediaDevices()) {
 export function stopStream(stream) {
     stream?.getTracks().forEach((track) => track.stop());
 }
-/** Enables/disables every track of `stream` matching `kind`, for the mute/camera-off toggles - tracks are kept
- * (not stopped/removed), matching every mainstream video-call app's "mute" behavior: instant, reversible, and
- * without re-requesting `getUserMedia()` or renegotiating the `RTCPeerConnection`. */
-export function setTracksEnabled(stream, kind, enabled) {
-    const tracks = kind === "audio" ? (stream?.getAudioTracks() ?? []) : (stream?.getVideoTracks() ?? []);
-    for (const track of tracks) {
-        track.enabled = enabled;
-    }
-}

package/dist/apps/shared/media/useLocalMedia.d.ts

@@ -0,0 +1,37 @@
+import { type DeviceLists, type MediaAccessError } from "./deviceMedia.js";
+export type MediaKind = "audio" | "video";
+/** `pending`: not asked yet, or being asked. `live`: a track is running. `off`: the participant turned the camera
+ * off. `denied`/`unavailable`/`error`: the browser said no, there is no such device (or it was unplugged), or
+ * something else went wrong. */
+export type TrackStatus = "pending" | "live" | "off" | "denied" | "unavailable" | "error";
+export declare const AUDIO_LEVEL_STEPS = 5;
+export interface LocalMedia {
+    /** `false` when this browser (or page connection) has no `getUserMedia` at all. */
+    supported: boolean;
+    /** A permission request is in flight. */
+    requesting: boolean;
+    /** The message for the most recent failed request, ready to show. */
+    error: MediaAccessError | null;
+    audioTrack: MediaStreamTrack | null;
+    videoTrack: MediaStreamTrack | null;
+    /** A stream holding just the camera track, for a `<video>` element - `null` while the camera is off. */
+    videoStream: MediaStream | null;
+    /** The user wants the microphone live (unmuted). */
+    micEnabled: boolean;
+    /** The microphone is live and unmuted: there is a track and `micEnabled`. */
+    micOn: boolean;
+    cameraOn: boolean;
+    status: Record<MediaKind, TrackStatus>;
+    devices: DeviceLists;
+    selectedDeviceIds: Partial<Record<MediaKind, string>>;
+    /** 0-`AUDIO_LEVEL_STEPS`: how loud the microphone is right now - always 0 while muted. */
+    audioLevel: number;
+    /** Asks for the camera and microphone (or just `kind`), see this module's doc comment. */
+    requestAccess(kind?: MediaKind): Promise<void>;
+    toggleMic(): Promise<void>;
+    toggleCamera(): Promise<void>;
+    selectDevice(kind: MediaKind, deviceId: string): Promise<void>;
+    /** Stops both tracks. */
+    release(): void;
+}
+export declare function useLocalMedia(): LocalMedia;