@rapidmx/meet-plugin 0.2.0 → 0.3.1

package/apps/meet/_MeetLobby.tsx

@@ -3,148 +3,87 @@
 // 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 React, { 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 {
-    type DeviceLists,
-    type MediaAccessError,
-    isMediaDevicesSupported,
-    listDevices,
-    requestUserMedia,
-    setTracksEnabled,
-    stopStream,
-} from "../shared/media/deviceMedia.js";
+import type { LocalMedia, TrackStatus } from "../shared/media/useLocalMedia.js";
 import type { PublicVideoMeeting } from "./_meetApi.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 interface JoinPreferences {
-    name: string;
-    micOn: boolean;
-    cameraOn: boolean;
-    /** Never `null` - an empty `MediaStream` when no device access was ever obtained, so the call view always has
-     * a stream to work with. */
-    stream: MediaStream;
-}
+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";
 
 export interface MeetLobbyProps {
     meeting: PublicVideoMeeting;
+    media: LocalMedia;
     /** Prefilled from `Profile.givenName` when a session was detected - still always editable. */
     initialName?: string;
-    onJoin: (preferences: JoinPreferences) => void;
+    onJoin: (name: string) => void;
+}
+
+/** What the preview says when there is no picture to show. */
+function previewMessage(media: LocalMedia): string {
+    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: TrackStatus = 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, initialName, onJoin }: MeetLobbyProps) {
+export default function MeetLobby({ meeting, media, initialName, onJoin }: MeetLobbyProps) {
     const [name, setName] = useState(initialName ?? "");
-    const [micOn, setMicOn] = useState(true);
-    const [cameraOn, setCameraOn] = useState(true);
-    const [stream, setStream] = useState<MediaStream | null>(null);
-    const [devices, setDevices] = useState<DeviceLists>({ cameras: [], microphones: [] });
-    const [error, setError] = useState<MediaAccessError | null>(null);
-    const [supported, setSupported] = useState(true);
     const videoRef = useRef<HTMLVideoElement>(null);
+    const { requestAccess } = media;
 
-    // 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`).
+    // 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;
+            videoRef.current.srcObject = media.videoStream;
         }
-    }, [stream]);
+    }, [media.videoStream]);
 
-    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: "audio" | "video", deviceId: string) {
-        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();
-        }
-        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(),
-        });
-    }
+    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 (
         <div>
@@ -153,42 +92,78 @@ export default function MeetLobby({ meeting, initialName, onJoin }: MeetLobbyPro
 
             <div className="mt-6 grid sm:grid-cols-2 gap-6">
                 <div>
-                    <div className="aspect-video bg-black/80 rounded-md overflow-hidden flex items-center justify-center">
-                        {stream && cameraOn ? (
-                            <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover" />
+                    <div className="relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center">
+                        {media.videoStream ? (
+                            <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover [transform:scaleX(-1)]" />
                         ) : (
-                            <p className="text-white/70 text-sm">{cameraOn ? "No camera preview" : "Camera is off"}</p>
+                            <p className="px-4 text-center text-white/70 text-sm">{previewMessage(media)}</p>
                         )}
+                        <div className="absolute bottom-3 inset-x-0 flex justify-center gap-3">
+                            <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()}
+                            >
+                                {media.micOn && <LevelBars level={media.audioLevel} />}
+                                {media.micOn ? <MicIcon /> : <MicOffIcon />}
+                            </button>
+                            <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()}
+                            >
+                                {media.cameraOn ? <VideoIcon /> : <VideoOffIcon />}
+                            </button>
+                        </div>
                     </div>
-                    <div className="flex gap-2 mt-3">
-                        <Button type="button" variant="secondary" className="!w-auto" onClick={handleToggleMic} disabled={!stream}>
-                            {micOn ? "Mute mic" : "Unmute mic"}
-                        </Button>
-                        <Button type="button" variant="secondary" className="!w-auto" onClick={handleToggleCamera} disabled={!stream}>
-                            {cameraOn ? "Turn camera off" : "Turn camera on"}
+
+                    {!media.supported && (
+                        <Alert>
+                            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.
+                        </Alert>
+                    )}
+                    {media.error && <Alert>{media.error.message}</Alert>}
+                    {needsAccess && (
+                        <Button type="button" variant="secondary" className="!w-auto mt-3" onClick={() => void requestAccess()}>
+                            {media.error ? "Try again" : "Allow camera and microphone"}
                         </Button>
-                    </div>
-                    {!supported && <Alert>This browser (or this page's connection) doesn't support camera/microphone access.</Alert>}
-                    {error && <Alert>{error.message}</Alert>}
-                    {devices.cameras.length > 1 && (
+                    )}
+                    {nothingToSend && <p className="text-sm text-text-muted mt-3">You'll join without a camera or microphone.</p>}
+
+                    {media.devices.cameras.length > 1 && (
                         <label className="block text-sm mt-3">
                             Camera
-                            <select className={`${INPUT_CLASS} mt-1`} onChange={(e) => handleSwitchDevice("video", e.target.value)}>
-                                {devices.cameras.map((d) => (
+                            <select
+                                className={`${INPUT_CLASS} mt-1`}
+                                value={media.selectedDeviceIds.video ?? ""}
+                                onChange={(e) => void media.selectDevice("video", e.target.value)}
+                            >
+                                {!media.selectedDeviceIds.video && <option value="">Choose a camera</option>}
+                                {media.devices.cameras.map((d, i) => (
                                     <option key={d.deviceId} value={d.deviceId}>
-                                        {d.label || "Camera"}
+                                        {d.label || `Camera ${i + 1}`}
                                     </option>
                                 ))}
                             </select>
                         </label>
                     )}
-                    {devices.microphones.length > 1 && (
+                    {media.devices.microphones.length > 1 && (
                         <label className="block text-sm mt-3">
                             Microphone
-                            <select className={`${INPUT_CLASS} mt-1`} onChange={(e) => handleSwitchDevice("audio", e.target.value)}>
-                                {devices.microphones.map((d) => (
+                            <select
+                                className={`${INPUT_CLASS} mt-1`}
+                                value={media.selectedDeviceIds.audio ?? ""}
+                                onChange={(e) => void media.selectDevice("audio", e.target.value)}
+                            >
+                                {!media.selectedDeviceIds.audio && <option value="">Choose a microphone</option>}
+                                {media.devices.microphones.map((d, i) => (
                                     <option key={d.deviceId} value={d.deviceId}>
-                                        {d.label || "Microphone"}
+                                        {d.label || `Microphone ${i + 1}`}
                                     </option>
                                 ))}
                             </select>
@@ -207,7 +182,7 @@ export default function MeetLobby({ meeting, initialName, onJoin }: MeetLobbyPro
                             placeholder="Enter your name"
                         />
                     </FormField>
-                    <Button type="button" className="!w-auto" disabled={!name.trim()} onClick={handleJoin}>
+                    <Button type="button" className="!w-auto" disabled={!name.trim()} onClick={() => onJoin(name.trim())}>
                         Join meeting
                     </Button>
                 </div>
@@ -215,9 +190,3 @@ export default function MeetLobby({ meeting, initialName, onJoin }: MeetLobbyPro
         </div>
     );
 }
-
-/** `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: MediaStream | null): () => void {
-    return () => stopStream(stream);
-}

package/apps/meet/_ParticipantTile.tsx

@@ -2,21 +2,28 @@
 // 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 React, { useEffect, useRef } from "react";
+import { MicOffIcon } from "./_icons.js";
 
 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;
 }
@@ -25,41 +32,66 @@ function initialOf(name: string): string {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
 
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, isFocused, onClick, className }: ParticipantTileProps) {
+export default function ParticipantTile({
+    name,
+    stream,
+    isLocal,
+    cameraOff,
+    micMuted,
+    handRaised,
+    isFocused,
+    contain,
+    onClick,
+    className,
+}: ParticipantTileProps) {
     const videoRef = useRef<HTMLVideoElement>(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]);
+    }, [stream, showVideo]);
 
     return (
         <div
-            className={`relative overflow-hidden rounded-md bg-black/80 flex items-center justify-center min-h-[90px] ${
-                isFocused ? "ring-2 ring-accent" : ""
+            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}
         >
             {showVideo ? (
-                <video ref={videoRef} autoPlay playsInline muted={isLocal} className="w-full h-full object-cover" />
+                <video
+                    ref={videoRef}
+                    autoPlay
+                    playsInline
+                    muted
+                    className={`w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}`}
+                />
             ) : (
-                <div className="w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center text-xl font-bold" aria-hidden="true">
+                <div className="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold" aria-hidden="true">
                     {initialOf(name)}
                 </div>
             )}
-            <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">
-                {micMuted && <span title="Muted">(muted)</span>}
-                <span>
-                    {name}
-                    {isLocal ? " (you)" : ""}
+            {handRaised && (
+                <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">
+                    ✋
                 </span>
+            )}
+            {micMuted && (
+                <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">
+                    <span className="w-4 h-4 [&>svg]:w-4 [&>svg]:h-4">
+                        <MicOffIcon />
+                    </span>
+                </span>
+            )}
+            <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">
+                {name}
+                {isLocal ? " (you)" : ""}
             </div>
         </div>
     );

package/apps/meet/_icons.tsx

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

package/apps/shared/media/chime.ts

@@ -0,0 +1,74 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 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 function defaultChimeContext(): ChimeAudioContext | undefined {
+    if (typeof window === "undefined") {
+        return undefined;
+    }
+    const Ctor: (new () => ChimeAudioContext) | undefined =
+        (window as unknown as { AudioContext?: new () => ChimeAudioContext }).AudioContext ??
+        (window as unknown as { webkitAudioContext?: new () => ChimeAudioContext }).webkitAudioContext;
+    return Ctor ? new Ctor() : undefined;
+}
+
+/** The two notes (Hz) and how long each lasts (seconds). */
+const NOTES = [880, 1320] as const;
+const NOTE_SECONDS = 0.18;
+
+export function playRaisedHandChime(createContext: ChimeContextFactory = defaultChimeContext): void {
+    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/apps/shared/media/deviceMedia.ts

@@ -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)
@@ -129,13 +129,3 @@ export async function requestDisplayMedia(devices: MediaDevicesLike | undefined
 export function stopStream(stream: MediaStream | undefined | null): void {
     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: MediaStream | undefined | null, kind: "audio" | "video", enabled: boolean): void {
-    const tracks: MediaStreamTrack[] = kind === "audio" ? (stream?.getAudioTracks() ?? []) : (stream?.getVideoTracks() ?? []);
-    for (const track of tracks) {
-        track.enabled = enabled;
-    }
-}