@rapidmx/meet-plugin 0.14.0 → 0.14.1

package/apps/meet/_CallControls.tsx

@@ -14,12 +14,21 @@
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen. Otherwise an
+ * ordinary menu of this bar's own shape (`openMenu`, closes on Escape/outside click like every other one here).
  */
 import React, { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import type { ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia, MediaKind } from "../shared/media/useLocalMedia.js";
-import { REACTION_EMOJIS, type MeshParticipant } from "../shared/webrtc/types.js";
+import { REACTION_EMOJIS, type MeshParticipant, type TransportMode } from "../shared/webrtc/types.js";
 import EffectsPanel from "./_EffectsPanel.js";
 import {
     ChevronUpIcon,
@@ -32,12 +41,21 @@ import {
     LeaveIcon,
     MicIcon,
     MicOffIcon,
+    OverflowIcon,
     RotateIcon,
     ScreenShareIcon,
     VideoIcon,
     VideoOffIcon,
 } from "./_icons.js";
 
+/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
+const TRANSPORT_MODE_OPTIONS: { mode: TransportMode; label: string }[] = [
+    { mode: "auto", label: "Auto" },
+    { mode: "p2p", label: "P2P" },
+    { mode: "relay", label: "Relay" },
+    { mode: "websocket", label: "WebSocket Relay" },
+];
+
 export type CallViewMode = "grid" | "focus";
 
 export interface CallControlsProps {
@@ -62,10 +80,16 @@ export interface CallControlsProps {
      * doc comment on talking-stick mode. Disables the microphone toggle (not the device-picker chevron, which
      * doesn't change whether anyone can hear them) rather than merely nudging it, unlike a `mute-request`. */
     micLocked?: boolean;
+    /** Whether the "…" menu's "Settings" item is offered at all - see this module's doc comment on the menu. */
+    isHost: boolean;
+    transportMode: TransportMode;
+    onSetTransportMode: (mode: TransportMode) => void;
+    onOpenDiagnostics: () => void;
+    onOpenSettings: () => void;
     onLeave: () => void;
 }
 
-type OpenMenu = MediaKind | "emoji" | "effects" | null;
+type OpenMenu = MediaKind | "emoji" | "effects" | "overflow" | null;
 
 const BUTTON = "flex items-center justify-center h-12 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
 const NEUTRAL = "bg-[#3c4043] text-white hover:bg-[#4b4f53]";
@@ -102,6 +126,11 @@ export default function CallControls({
     viewMode,
     onToggleViewMode,
     micLocked,
+    isHost,
+    transportMode,
+    onSetTransportMode,
+    onOpenDiagnostics,
+    onOpenSettings,
     onLeave,
 }: CallControlsProps) {
     const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
@@ -307,6 +336,74 @@ export default function CallControls({
                 {viewMode === "grid" ? <FocusIcon /> : <GridIcon />}
             </button>
 
+            <div className="sm:relative">
+                <button
+                    type="button"
+                    className={`${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`}
+                    aria-label="More options"
+                    aria-haspopup="menu"
+                    aria-expanded={openMenu === "overflow"}
+                    onClick={() => toggleMenu("overflow")}
+                >
+                    <OverflowIcon />
+                </button>
+                {openMenu === "overflow" && (
+                    <div
+                        role="menu"
+                        aria-label="More options"
+                        className="absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm"
+                    >
+                        <button
+                            type="button"
+                            role="menuitem"
+                            className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                            onClick={() => {
+                                onOpenDiagnostics();
+                                setOpenMenu(null);
+                            }}
+                        >
+                            Diagnostics
+                        </button>
+                        <div className="my-1 border-t border-white/10" />
+                        <p className="px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60">Connection method</p>
+                        {TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (
+                            <button
+                                key={mode}
+                                type="button"
+                                role="menuitemradio"
+                                aria-checked={transportMode === mode}
+                                className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                                onClick={() => {
+                                    onSetTransportMode(mode);
+                                    setOpenMenu(null);
+                                }}
+                            >
+                                <span className="w-4 text-[#8ab4f8]" aria-hidden="true">
+                                    {transportMode === mode ? "✓" : ""}
+                                </span>
+                                {label}
+                            </button>
+                        ))}
+                        {isHost && (
+                            <>
+                                <div className="my-1 border-t border-white/10" />
+                                <button
+                                    type="button"
+                                    role="menuitem"
+                                    className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
+                                    onClick={() => {
+                                        onOpenSettings();
+                                        setOpenMenu(null);
+                                    }}
+                                >
+                                    Settings
+                                </button>
+                            </>
+                        )}
+                    </div>
+                )}
+            </div>
+
             <button type="button" className={`${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`} aria-label="Leave call" onClick={() => onLeave()}>
                 <LeaveIcon />
             </button>

package/apps/meet/_CallView.tsx

@@ -51,18 +51,17 @@
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
- * ## The navbar's "…" menu
+ * ## Diagnostics, connection method and settings
  *
- * A catch-all for controls that don't need a dedicated button of their own: "Diagnostics" opens
- * `_DiagnosticsWindow.tsx` (a persistent, draggable window - not a popover like everything else here, since
- * troubleshooting a connection is something a participant wants to keep open while they poke at the rest of the
- * call, not something that closes the moment they click elsewhere); "Connection method" is a four-way choice
- * (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment) for forcing how *this tab's*
- * media reaches everyone else, independent of what anyone else has chosen; "Settings" (host-only) opens
- * `_SettingsModal.tsx`, which used to be the participants drawer's own header (mute-on-join, the join password, the
- * waiting-room toggle) - moved out because none of those are about *who* is in the call, which is what the drawer
- * is for. The menu itself closes on Escape, a click outside it, or picking an item; the windows it opens do not
- * close along with it.
+ * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
+ * callback props, but owned here: `diagnosticsOpen` renders `_DiagnosticsWindow.tsx` (a persistent, draggable
+ * window - not a popover like the menus in the control bar, since troubleshooting a connection is something a
+ * participant wants to keep open while they poke at the rest of the call, not something that closes the moment
+ * they click elsewhere); `transportMode`/`handleSetTransportMode()` forces how *this tab's* media reaches everyone
+ * else (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment), independent of what
+ * anyone else has chosen; `settingsOpen` renders `_SettingsModal.tsx`, which used to be the participants drawer's
+ * own header (mute-on-join, the join password, the waiting-room toggle) - moved out because none of those are
+ * about *who* is in the call, which is what the drawer is for.
  */
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { playRaisedHandChime } from "../shared/media/chime.js";
@@ -77,7 +76,7 @@ import type { MeshParticipant, RelayTransportLike, TransportMode } from "../shar
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls, { type CallViewMode } from "./_CallControls.js";
-import { BatonIcon, OverflowIcon } from "./_icons.js";
+import { BatonIcon } from "./_icons.js";
 import {
     admitParticipant,
     denyParticipant,
@@ -139,14 +138,6 @@ const MAX_REACTIONS = 12;
 /** How often the host's drawer refreshes its own waiting-room list while open. */
 const DEFAULT_WAITING_POLL_MS = 3_000;
 
-/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
-const TRANSPORT_MODE_OPTIONS: { mode: TransportMode; label: string }[] = [
-    { mode: "auto", label: "Auto" },
-    { mode: "p2p", label: "P2P" },
-    { mode: "relay", label: "Relay" },
-    { mode: "websocket", label: "WebSocket Relay" },
-];
-
 interface Reaction {
     id: number;
     emoji: string;
@@ -229,13 +220,11 @@ export default function CallView({
     const [waitingParticipants, setWaitingParticipants] = useState<WaitingParticipant[]>([]);
     const [talkingStickActive, setTalkingStickActive] = useState(false);
     const [talkingStickHolder, setTalkingStickHolder] = useState<string | undefined>(undefined);
-    const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
     const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [transportMode, setTransportModeState] = useState<TransportMode>("auto");
 
     const managerRef = useRef<MeshConnectionManager | null>(null);
-    const overflowMenuRef = useRef<HTMLDivElement>(null);
     /** The raw capture from `getDisplayMedia()` - only ever used to stop it (releasing the OS's own share
      * indicator) and to notice the participant ending the share from the browser's own UI (`track.onended`). What's
      * actually shown and sent is `screenTransformRef`'s output (`screenStream` state) - see `handleToggleShare()`. */
@@ -409,31 +398,6 @@ export default function CallView({
         }
     }, [talkingStickActive, selfHasTalkingStick]);
 
-    // The "…" menu closes on Escape or a press anywhere outside it - matching `_CallControls.tsx`'s own menus -
-    // but never the windows it opens (diagnostics, settings), which stay open independently (see this module's
-    // doc comment on the "…" menu).
-    useEffect(() => {
-        if (!overflowMenuOpen) {
-            return;
-        }
-        const onPointerDown = (event: PointerEvent) => {
-            if (!overflowMenuRef.current?.contains(event.target as Node)) {
-                setOverflowMenuOpen(false);
-            }
-        };
-        const onKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setOverflowMenuOpen(false);
-            }
-        };
-        document.addEventListener("pointerdown", onPointerDown);
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("pointerdown", onPointerDown);
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [overflowMenuOpen]);
-
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -573,12 +537,11 @@ export default function CallView({
     }
 
     /** Forces this tab's own transport policy - see `MeshConnectionManager.setTransportMode()`'s doc comment for
-     * what each mode actually does, and this module's doc comment on the "…" menu for why this is a personal,
-     * per-tab choice rather than a meeting setting. */
+     * what each mode actually does, and `_CallControls.tsx`'s doc comment on its "…" menu for why this is a
+     * personal, per-tab choice rather than a meeting setting. */
     function handleSetTransportMode(mode: TransportMode) {
         setTransportModeState(mode);
         managerRef.current?.setTransportMode(mode);
-        setOverflowMenuOpen(false);
     }
 
     /** Admits one pending request - optimistically removed from the drawer's own list (the next poll would drop it
@@ -768,70 +731,6 @@ export default function CallView({
                         >
                             {participants.length + 1}
                         </button>
-                        <div className="relative" ref={overflowMenuRef}>
-                            <button
-                                type="button"
-                                className={`w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${overflowMenuOpen ? "bg-[#4b4f53]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`}
-                                aria-label="More options"
-                                aria-haspopup="menu"
-                                aria-expanded={overflowMenuOpen}
-                                onClick={() => setOverflowMenuOpen((prev) => !prev)}
-                            >
-                                <OverflowIcon />
-                            </button>
-                            {overflowMenuOpen && (
-                                <div
-                                    role="menu"
-                                    aria-label="More options"
-                                    className="absolute top-full right-0 mt-2 w-56 rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm"
-                                >
-                                    <button
-                                        type="button"
-                                        role="menuitem"
-                                        className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                        onClick={() => {
-                                            setDiagnosticsOpen(true);
-                                            setOverflowMenuOpen(false);
-                                        }}
-                                    >
-                                        Diagnostics
-                                    </button>
-                                    <div className="my-1 border-t border-white/10" />
-                                    <p className="px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60">Connection method</p>
-                                    {TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (
-                                        <button
-                                            key={mode}
-                                            type="button"
-                                            role="menuitemradio"
-                                            aria-checked={transportMode === mode}
-                                            className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                            onClick={() => handleSetTransportMode(mode)}
-                                        >
-                                            <span className="w-4 text-[#8ab4f8]" aria-hidden="true">
-                                                {transportMode === mode ? "✓" : ""}
-                                            </span>
-                                            {label}
-                                        </button>
-                                    ))}
-                                    {isHost && (
-                                        <>
-                                            <div className="my-1 border-t border-white/10" />
-                                            <button
-                                                type="button"
-                                                role="menuitem"
-                                                className="w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                                                onClick={() => {
-                                                    setSettingsOpen(true);
-                                                    setOverflowMenuOpen(false);
-                                                }}
-                                            >
-                                                Settings
-                                            </button>
-                                        </>
-                                    )}
-                                </div>
-                            )}
-                        </div>
                     </div>
                 </header>
                 {connectError && (
@@ -870,6 +769,11 @@ export default function CallView({
                         viewMode={viewMode}
                         onToggleViewMode={() => setViewMode((prev) => (prev === "grid" ? "focus" : "grid"))}
                         micLocked={micLocked}
+                        isHost={isHost}
+                        transportMode={transportMode}
+                        onSetTransportMode={handleSetTransportMode}
+                        onOpenDiagnostics={() => setDiagnosticsOpen(true)}
+                        onOpenSettings={() => setSettingsOpen(true)}
                         onLeave={onLeave}
                     />
                 </footer>

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

@@ -10,11 +10,20 @@
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen. Otherwise an
+ * ordinary menu of this bar's own shape (`openMenu`, closes on Escape/outside click like every other one here).
  */
 import React from "react";
 import type { ScreenTransformState } from "../shared/media/filters/ScreenTransform.js";
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";
-import { type MeshParticipant } from "../shared/webrtc/types.js";
+import { type MeshParticipant, type TransportMode } from "../shared/webrtc/types.js";
 export type CallViewMode = "grid" | "focus";
 export interface CallControlsProps {
     media: LocalMedia;
@@ -38,10 +47,16 @@ export interface CallControlsProps {
      * doc comment on talking-stick mode. Disables the microphone toggle (not the device-picker chevron, which
      * doesn't change whether anyone can hear them) rather than merely nudging it, unlike a `mute-request`. */
     micLocked?: boolean;
+    /** Whether the "…" menu's "Settings" item is offered at all - see this module's doc comment on the menu. */
+    isHost: boolean;
+    transportMode: TransportMode;
+    onSetTransportMode: (mode: TransportMode) => void;
+    onOpenDiagnostics: () => void;
+    onOpenSettings: () => void;
     onLeave: () => void;
 }
 /** 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, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, onLeave, }: CallControlsProps): React.JSX.Element;
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, onLeave, }: CallControlsProps): React.JSX.Element;

package/dist/apps/meet/_CallControls.js

@@ -15,12 +15,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`). The microphone button
  * is disabled (`micLocked`) while talking-stick mode is on and this participant isn't the current holder - see
  * `_CallView.tsx`'s doc comment.
+ *
+ * ## The "…" menu
+ *
+ * Sits between the grid/focus toggle and Leave, a catch-all for controls that don't need a dedicated button of
+ * their own: "Diagnostics" (`onOpenDiagnostics`) and "Settings" (`onOpenSettings`, host-only) each open their own
+ * persistent window/modal in `_CallView.tsx` and close this menu; "Connection method" is a four-way
+ * `menuitemradio` group (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment)
+ * forcing how *this tab's* media reaches everyone else, independent of what anyone else has chosen. Otherwise an
+ * ordinary menu of this bar's own shape (`openMenu`, closes on Escape/outside click like every other one here).
  */
 import { useEffect, useRef, useState } from "react";
 import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
 import EffectsPanel from "./_EffectsPanel.js";
-import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+import { ChevronUpIcon, EffectsIcon, EmojiIcon, FlipIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, OverflowIcon, RotateIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
+const TRANSPORT_MODE_OPTIONS = [
+    { mode: "auto", label: "Auto" },
+    { mode: "p2p", label: "P2P" },
+    { mode: "relay", label: "Relay" },
+    { mode: "websocket", label: "WebSocket Relay" },
+];
 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]";
@@ -29,7 +45,7 @@ const ACTIVE = "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]";
 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, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, onLeave, }) {
+export default function CallControls({ media, participants, isPresenting, presentingElsewhereName, onToggleShare, screenTransform, onRotateScreen, onFlipScreen, handRaised, onToggleHand, onReaction, viewMode, onToggleViewMode, micLocked, isHost, transportMode, onSetTransportMode, onOpenDiagnostics, onOpenSettings, onLeave, }) {
     const [openMenu, setOpenMenu] = useState(null);
     const barRef = useRef(null);
     const shareDisabled = !isPresenting && !!presentingElsewhereName;
@@ -61,7 +77,16 @@ export default function CallControls({ media, participants, isPresenting, presen
     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} disabled:opacity-50 disabled:cursor-not-allowed`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, disabled: micLocked, title: micLocked ? "Only the current talking-stick holder can unmute." : undefined, 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) })] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`, "aria-label": "Video effects", "aria-haspopup": "dialog", "aria-expanded": openMenu === "effects", onClick: () => toggleMenu("effects"), children: _jsx(EffectsIcon, {}) }), openMenu === "effects" && (_jsx("div", { role: "dialog", "aria-label": "Video effects", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(EffectsPanel, { media: media, tone: "dark" }) }))] }), _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, {}) }), isPresenting && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Rotate shared screen", title: "If your shared window looks sideways or upside down to everyone, rotate it here - this is a correction for your own capture, not a browser bug this app can fix automatically.", onClick: onRotateScreen, children: _jsx(RotateIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${screenTransform.flipped ? ACTIVE : NEUTRAL}`, "aria-label": screenTransform.flipped ? "Unflip shared screen" : "Flip shared screen", "aria-pressed": screenTransform.flipped, onClick: onFlipScreen, children: _jsx(FlipIcon, {}) })] })), _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} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length < 2, title: participants.length < 2 ? "Grid and focused view look the same with only one other participant." : undefined, 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, {}) })] }));
+                            }, 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} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", disabled: participants.length < 2, title: participants.length < 2 ? "Grid and focused view look the same with only one other participant." : undefined, onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${openMenu === "overflow" ? ACTIVE : NEUTRAL}`, "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": openMenu === "overflow", onClick: () => toggleMenu("overflow"), children: _jsx(OverflowIcon, {}) }), openMenu === "overflow" && (_jsxs("div", { role: "menu", "aria-label": "More options", className: "absolute bottom-full mb-3 right-0 w-56 max-w-[calc(100vw-1rem)] rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    onOpenDiagnostics();
+                                    setOpenMenu(null);
+                                }, children: "Diagnostics" }), _jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("p", { className: "px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60", children: "Connection method" }), TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": transportMode === mode, className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                    onSetTransportMode(mode);
+                                    setOpenMenu(null);
+                                }, children: [_jsx("span", { className: "w-4 text-[#8ab4f8]", "aria-hidden": "true", children: transportMode === mode ? "✓" : "" }), label] }, mode))), isHost && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
+                                            onOpenSettings();
+                                            setOpenMenu(null);
+                                        }, children: "Settings" })] }))] }))] }), _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. */

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

@@ -47,18 +47,17 @@
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
- * ## The navbar's "…" menu
+ * ## Diagnostics, connection method and settings
  *
- * A catch-all for controls that don't need a dedicated button of their own: "Diagnostics" opens
- * `_DiagnosticsWindow.tsx` (a persistent, draggable window - not a popover like everything else here, since
- * troubleshooting a connection is something a participant wants to keep open while they poke at the rest of the
- * call, not something that closes the moment they click elsewhere); "Connection method" is a four-way choice
- * (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment) for forcing how *this tab's*
- * media reaches everyone else, independent of what anyone else has chosen; "Settings" (host-only) opens
- * `_SettingsModal.tsx`, which used to be the participants drawer's own header (mute-on-join, the join password, the
- * waiting-room toggle) - moved out because none of those are about *who* is in the call, which is what the drawer
- * is for. The menu itself closes on Escape, a click outside it, or picking an item; the windows it opens do not
- * close along with it.
+ * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
+ * callback props, but owned here: `diagnosticsOpen` renders `_DiagnosticsWindow.tsx` (a persistent, draggable
+ * window - not a popover like the menus in the control bar, since troubleshooting a connection is something a
+ * participant wants to keep open while they poke at the rest of the call, not something that closes the moment
+ * they click elsewhere); `transportMode`/`handleSetTransportMode()` forces how *this tab's* media reaches everyone
+ * else (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment), independent of what
+ * anyone else has chosen; `settingsOpen` renders `_SettingsModal.tsx`, which used to be the participants drawer's
+ * own header (mute-on-join, the join password, the waiting-room toggle) - moved out because none of those are
+ * about *who* is in the call, which is what the drawer is for.
  */
 import React from "react";
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";

package/dist/apps/meet/_CallView.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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
@@ -52,18 +52,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * `MeshConnectionManager`'s own doc comment on why that needs no extra code - the header chip then says nobody has
  * the floor, until the host picks someone (or themselves) again.
  *
- * ## The navbar's "…" menu
+ * ## Diagnostics, connection method and settings
  *
- * A catch-all for controls that don't need a dedicated button of their own: "Diagnostics" opens
- * `_DiagnosticsWindow.tsx` (a persistent, draggable window - not a popover like everything else here, since
- * troubleshooting a connection is something a participant wants to keep open while they poke at the rest of the
- * call, not something that closes the moment they click elsewhere); "Connection method" is a four-way choice
- * (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment) for forcing how *this tab's*
- * media reaches everyone else, independent of what anyone else has chosen; "Settings" (host-only) opens
- * `_SettingsModal.tsx`, which used to be the participants drawer's own header (mute-on-join, the join password, the
- * waiting-room toggle) - moved out because none of those are about *who* is in the call, which is what the drawer
- * is for. The menu itself closes on Escape, a click outside it, or picking an item; the windows it opens do not
- * close along with it.
+ * All three are opened from `_CallControls.tsx`'s own "…" menu (its doc comment covers the menu itself) via
+ * callback props, but owned here: `diagnosticsOpen` renders `_DiagnosticsWindow.tsx` (a persistent, draggable
+ * window - not a popover like the menus in the control bar, since troubleshooting a connection is something a
+ * participant wants to keep open while they poke at the rest of the call, not something that closes the moment
+ * they click elsewhere); `transportMode`/`handleSetTransportMode()` forces how *this tab's* media reaches everyone
+ * else (`TransportMode` - see `MeshConnectionManager.setTransportMode()`'s own doc comment), independent of what
+ * anyone else has chosen; `settingsOpen` renders `_SettingsModal.tsx`, which used to be the participants drawer's
+ * own header (mute-on-join, the join password, the waiting-room toggle) - moved out because none of those are
+ * about *who* is in the call, which is what the drawer is for.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { playRaisedHandChime } from "../shared/media/chime.js";
@@ -76,7 +75,7 @@ import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js
 import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls from "./_CallControls.js";
-import { BatonIcon, OverflowIcon } from "./_icons.js";
+import { BatonIcon } from "./_icons.js";
 import { admitParticipant, denyParticipant, kickParticipant, listWaitingParticipants, setForceMuteOnJoin as apiSetForceMuteOnJoin, setMeetingPassword, setWaitingRoomEnabled as apiSetWaitingRoomEnabled, } from "./_meetApi.js";
 import DiagnosticsPanel from "./_DiagnosticsPanel.js";
 import DiagnosticsWindow from "./_DiagnosticsWindow.js";
@@ -89,13 +88,6 @@ const REACTION_MS = 4000;
 const MAX_REACTIONS = 12;
 /** How often the host's drawer refreshes its own waiting-room list while open. */
 const DEFAULT_WAITING_POLL_MS = 3000;
-/** The "…" menu's "Connection method" options, in display order - see `TransportMode`'s own doc comment. */
-const TRANSPORT_MODE_OPTIONS = [
-    { mode: "auto", label: "Auto" },
-    { mode: "p2p", label: "P2P" },
-    { mode: "relay", label: "Relay" },
-    { mode: "websocket", label: "WebSocket Relay" },
-];
 /** 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) {
@@ -150,12 +142,10 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [waitingParticipants, setWaitingParticipants] = useState([]);
     const [talkingStickActive, setTalkingStickActive] = useState(false);
     const [talkingStickHolder, setTalkingStickHolder] = useState(undefined);
-    const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
     const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [transportMode, setTransportModeState] = useState("auto");
     const managerRef = useRef(null);
-    const overflowMenuRef = useRef(null);
     /** The raw capture from `getDisplayMedia()` - only ever used to stop it (releasing the OS's own share
      * indicator) and to notice the participant ending the share from the browser's own UI (`track.onended`). What's
      * actually shown and sent is `screenTransformRef`'s output (`screenStream` state) - see `handleToggleShare()`. */
@@ -319,30 +309,6 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             void mediaRef.current.toggleMic();
         }
     }, [talkingStickActive, selfHasTalkingStick]);
-    // The "…" menu closes on Escape or a press anywhere outside it - matching `_CallControls.tsx`'s own menus -
-    // but never the windows it opens (diagnostics, settings), which stay open independently (see this module's
-    // doc comment on the "…" menu).
-    useEffect(() => {
-        if (!overflowMenuOpen) {
-            return;
-        }
-        const onPointerDown = (event) => {
-            if (!overflowMenuRef.current?.contains(event.target)) {
-                setOverflowMenuOpen(false);
-            }
-        };
-        const onKeyDown = (event) => {
-            if (event.key === "Escape") {
-                setOverflowMenuOpen(false);
-            }
-        };
-        document.addEventListener("pointerdown", onPointerDown);
-        document.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.removeEventListener("pointerdown", onPointerDown);
-            document.removeEventListener("keydown", onKeyDown);
-        };
-    }, [overflowMenuOpen]);
     useEffect(() => {
         if (!presenterUid) {
             setActiveSpeakerUid((prev) => pickActiveSpeaker(levels, prev));
@@ -468,12 +434,11 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
         managerRef.current?.setTalkingStick(true, uid);
     }
     /** Forces this tab's own transport policy - see `MeshConnectionManager.setTransportMode()`'s doc comment for
-     * what each mode actually does, and this module's doc comment on the "…" menu for why this is a personal,
-     * per-tab choice rather than a meeting setting. */
+     * what each mode actually does, and `_CallControls.tsx`'s doc comment on its "…" menu for why this is a
+     * personal, per-tab choice rather than a meeting setting. */
     function handleSetTransportMode(mode) {
         setTransportModeState(mode);
         managerRef.current?.setTransportMode(mode);
-        setOverflowMenuOpen(false);
     }
     /** Admits one pending request - optimistically removed from the drawer's own list (the next poll would drop it
      * anyway, once the requester's own next poll completes their join; removing it here just avoids the visible
@@ -562,13 +527,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     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 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("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_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(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), children: participants.length + 1 }), _jsxs("div", { className: "relative", ref: overflowMenuRef, children: [_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${overflowMenuOpen ? "bg-[#4b4f53]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": overflowMenuOpen, onClick: () => setOverflowMenuOpen((prev) => !prev), children: _jsx(OverflowIcon, {}) }), overflowMenuOpen && (_jsxs("div", { role: "menu", "aria-label": "More options", className: "absolute top-full right-0 mt-2 w-56 rounded-2xl bg-[#2b2d30] text-white shadow-xl py-1 text-sm", children: [_jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
-                                                            setDiagnosticsOpen(true);
-                                                            setOverflowMenuOpen(false);
-                                                        }, children: "Diagnostics" }), _jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("p", { className: "px-3 pt-1 pb-0.5 text-xs font-semibold uppercase tracking-wide text-white/60", children: "Connection method" }), TRANSPORT_MODE_OPTIONS.map(({ mode, label }) => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": transportMode === mode, className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => handleSetTransportMode(mode), children: [_jsx("span", { className: "w-4 text-[#8ab4f8]", "aria-hidden": "true", children: transportMode === mode ? "✓" : "" }), label] }, mode))), isHost && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-white/10" }), _jsx("button", { type: "button", role: "menuitem", className: "w-full px-3 py-2 text-left hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", onClick: () => {
-                                                                    setSettingsOpen(true);
-                                                                    setOverflowMenuOpen(false);
-                                                                }, children: "Settings" })] }))] }))] })] })] }), 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, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, 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) => {
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex 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("div", { className: "relative flex-1 min-w-0 flex flex-col overflow-hidden", children: [_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(", ")] })), talkingStickActive && (_jsxs("span", { className: "max-w-[45vw] truncate px-3 py-1.5 rounded-full bg-[#a8c7fa] text-[#062e6f] text-sm font-medium", "data-testid": "talking-stick-status", children: ["\uD83C\uDF99\uFE0F ", talkingStickHolderName ? `${talkingStickHolderName} ${talkingStickHolderName === "You" ? "have" : "has"} the floor` : "Waiting for the host to choose a speaker"] })), isHost && (_jsx("button", { type: "button", className: `w-9 h-9 flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 ${talkingStickActive ? "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]" : "bg-[#3c4043] hover:bg-[#4b4f53]"}`, "aria-label": talkingStickActive ? "End talking stick" : "Talking stick", "aria-pressed": talkingStickActive, title: talkingStickActive ? "End talking stick" : "Start talking stick mode", onClick: handleToggleTalkingStick, children: _jsx(BatonIcon, {}) })), _jsx("button", { type: "button", className: "px-3 py-1.5 rounded-full bg-[#3c4043] hover:bg-[#4b4f53] text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `${participants.length + 1} participants`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen((prev) => !prev), 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, participants: participants, isPresenting: isPresenting, presentingElsewhereName: presenterUid && presenterUid !== peerId ? presenterName : undefined, onToggleShare: () => void handleToggleShare(), screenTransform: screenTransform, onRotateScreen: handleRotateScreen, onFlipScreen: handleFlipScreen, handRaised: handRaised, onToggleHand: handleToggleHand, onReaction: handleReaction, viewMode: viewMode, onToggleViewMode: () => setViewMode((prev) => (prev === "grid" ? "focus" : "grid")), micLocked: micLocked, isHost: isHost, transportMode: transportMode, onSetTransportMode: handleSetTransportMode, onOpenDiagnostics: () => setDiagnosticsOpen(true), onOpenSettings: () => setSettingsOpen(true), 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 })] }), drawerOpen && (_jsx(ParticipantsDrawer, { selfName: selfName, micOn: media.micOn, handRaised: handRaised, participants: participants, isSelfHost: isHost, isParticipantHost: isParticipantHost, onMute: handleMuteParticipant, onKick: handleKickParticipant, waitingRoomEnabled: waitingRoomEnabled, waitingParticipants: waitingParticipants, onAdmit: handleAdmitParticipant, onDeny: handleDenyParticipant, talkingStickActive: talkingStickActive, selfPeerId: peerId, talkingStickHolder: talkingStickHolder, onGiveTalkingStick: handleGiveTalkingStick, onClose: () => setDrawerOpen(false) })), diagnosticsOpen && (_jsx(DiagnosticsWindow, { onClose: () => setDiagnosticsOpen(false), children: _jsx(DiagnosticsPanel, { selfName: selfName, micOn: media.micOn, cameraOn: media.cameraOn, participants: participants }) })), settingsOpen && isHost && (_jsx(SettingsModal, { forceMuteOnJoin: forceMuteOnJoin, onToggleForceMuteOnJoin: handleToggleForceMuteOnJoin, hasPassword: hasPassword, onSetPassword: handleSetPassword, waitingRoomEnabled: waitingRoomEnabled, onToggleWaitingRoomEnabled: handleToggleWaitingRoomEnabled, onClose: () => setSettingsOpen(false) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rapidmx/meet-plugin",
-    "version": "0.14.0",
+    "version": "0.14.1",
     "description": "RapidMX plugin that provides WebRTC video conferencing, joinable from a calendar invite or a shared link.",
     "repository": "https://github.com/rapidmx/meet-plugin.git",
     "author": "RapidREST <rapidrests@gmail.com>",