@meshagent/meshagent-tailwind 0.39.9 → 0.40.0

package/dist/esm/meetings/controls.js

@@ -0,0 +1,294 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { Camera, CameraOff, Mic, MicOff, Phone, Settings } from "lucide-react";
+import { ConnectionState, Room } from "livekit-client";
+import { Button } from "../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../components/ui/select";
+import { Spinner } from "../components/ui/spinner";
+import { cn } from "../lib/utils";
+import { useMeetingController } from "./meeting-scope";
+function useControllerVersion(controller) {
+  useSyncExternalStore(
+    (listener) => controller.subscribe(listener),
+    () => controller.livekitRoom.state,
+    () => controller.livekitRoom.state
+  );
+  useSyncExternalStore(
+    (listener) => controller.pendingLocalMedia.subscribe(listener),
+    () => `${controller.pendingLocalMedia.cameraPending}:${controller.pendingLocalMedia.microphonePending}:${controller.pendingLocalMedia.cameraUnavailable}:${controller.pendingLocalMedia.microphoneUnavailable}`,
+    () => ""
+  );
+}
+function MeetingControls({
+  controller: providedController,
+  spacing = 5
+}) {
+  const controller = useMeetingController(providedController);
+  useControllerVersion(controller);
+  const hasLocalParticipant = controller.livekitRoom.localParticipant != null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center justify-center",
+      style: { gap: spacing },
+      children: [
+        /* @__PURE__ */ jsx(ConnectionButton, { controller }),
+        hasLocalParticipant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(MicToggle, { controller }),
+          /* @__PURE__ */ jsx(CameraToggle, { controller }),
+          /* @__PURE__ */ jsx(ChangeSettings, { room: controller.livekitRoom })
+        ] }) : null
+      ]
+    }
+  );
+}
+function describeCameraToggleError(error) {
+  const message = String(error);
+  if (message.includes("NotAllowedError")) {
+    return "Camera access was blocked by the browser or system.";
+  }
+  if (message.includes("NotFoundError")) {
+    return "The selected camera was not found.";
+  }
+  return `Unable to change camera state: ${message}`;
+}
+function describeMicrophoneToggleError(error) {
+  const message = String(error);
+  if (message.includes("NotAllowedError")) {
+    return "Microphone access was blocked by the browser or system.";
+  }
+  if (message.includes("NotFoundError")) {
+    return "The selected microphone was not found.";
+  }
+  return `Unable to change microphone state: ${message}`;
+}
+function useDeviceAvailable(kind) {
+  const [available, setAvailable] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    const update = async () => {
+      const devices = await navigator.mediaDevices?.enumerateDevices?.();
+      if (!cancelled && devices != null) {
+        setAvailable(devices.some((device) => device.kind === kind && device.deviceId !== ""));
+      }
+    };
+    void update().catch(() => setAvailable(false));
+    navigator.mediaDevices?.addEventListener?.("devicechange", update);
+    return () => {
+      cancelled = true;
+      navigator.mediaDevices?.removeEventListener?.("devicechange", update);
+    };
+  }, [kind]);
+  return available;
+}
+function CameraToggle({ controller }) {
+  const resolvedController = useMeetingController(controller);
+  useControllerVersion(resolvedController);
+  const [processing, setProcessing] = useState(false);
+  const deviceAvailable = useDeviceAvailable("videoinput");
+  const localParticipant = resolvedController.livekitRoom.localParticipant;
+  if (localParticipant == null) {
+    return null;
+  }
+  const enabled = localParticipant.isCameraEnabled;
+  const pending = resolvedController.pendingLocalMedia.cameraPending;
+  const showEnabled = enabled || pending;
+  const unavailable = (resolvedController.pendingLocalMedia.cameraUnavailable || !deviceAvailable) && !showEnabled;
+  return /* @__PURE__ */ jsx(
+    MeetingControlsButton,
+    {
+      text: pending ? "Starting camera" : enabled ? "Turn off camera" : "Turn on camera",
+      on: showEnabled,
+      destructive: unavailable,
+      icon: showEnabled ? /* @__PURE__ */ jsx(Camera, {}) : /* @__PURE__ */ jsx(CameraOff, {}),
+      loading: pending || processing,
+      disabled: processing || pending,
+      onClick: () => {
+        if (processing || pending) {
+          return;
+        }
+        setProcessing(true);
+        void localParticipant.setCameraEnabled(!enabled).then(() => resolvedController.pendingLocalMedia.setCameraUnavailable(false)).catch((error) => {
+          resolvedController.pendingLocalMedia.setCameraUnavailable(true);
+          console.warn(describeCameraToggleError(error));
+        }).finally(() => setProcessing(false));
+      }
+    }
+  );
+}
+function MicToggle({ controller }) {
+  const resolvedController = useMeetingController(controller);
+  useControllerVersion(resolvedController);
+  const [processing, setProcessing] = useState(false);
+  const deviceAvailable = useDeviceAvailable("audioinput");
+  const localParticipant = resolvedController.livekitRoom.localParticipant;
+  if (localParticipant == null) {
+    return null;
+  }
+  const enabled = localParticipant.isMicrophoneEnabled;
+  const pending = resolvedController.pendingLocalMedia.microphonePending;
+  const showEnabled = enabled || pending;
+  const unavailable = (resolvedController.pendingLocalMedia.microphoneUnavailable || !deviceAvailable) && !showEnabled;
+  return /* @__PURE__ */ jsx(
+    MeetingControlsButton,
+    {
+      text: pending ? "Starting mic" : enabled ? "Turn off mic" : "Turn on mic",
+      on: showEnabled,
+      destructive: unavailable,
+      icon: showEnabled ? /* @__PURE__ */ jsx(Mic, {}) : /* @__PURE__ */ jsx(MicOff, {}),
+      loading: pending || processing,
+      disabled: processing || pending,
+      onClick: () => {
+        if (processing || pending) {
+          return;
+        }
+        setProcessing(true);
+        void localParticipant.setMicrophoneEnabled(!enabled).then(() => resolvedController.pendingLocalMedia.setMicrophoneUnavailable(false)).catch((error) => {
+          resolvedController.pendingLocalMedia.setMicrophoneUnavailable(true);
+          console.warn(describeMicrophoneToggleError(error));
+        }).finally(() => setProcessing(false));
+      }
+    }
+  );
+}
+function ConnectionButton({ controller }) {
+  const resolvedController = useMeetingController(controller);
+  useControllerVersion(resolvedController);
+  const state = resolvedController.livekitRoom.state;
+  if (state === ConnectionState.Connected) {
+    return /* @__PURE__ */ jsx(
+      MeetingControlsButton,
+      {
+        text: "Hangup",
+        destructive: true,
+        icon: /* @__PURE__ */ jsx(Phone, {}),
+        onClick: () => {
+          void resolvedController.disconnect();
+        }
+      }
+    );
+  }
+  if (state === ConnectionState.Disconnected) {
+    return /* @__PURE__ */ jsx(
+      MeetingControlsButton,
+      {
+        text: "Connect",
+        icon: /* @__PURE__ */ jsx(Phone, {}),
+        onClick: () => {
+          void resolvedController.connect();
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MeetingControlsButton, { text: "Connecting", icon: /* @__PURE__ */ jsx(Phone, {}), loading: true, disabled: true });
+}
+function MeetingControlsButton({
+  text,
+  icon,
+  on,
+  destructive,
+  loading,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      title: text,
+      "aria-label": text,
+      size: "icon",
+      variant: destructive ? "destructive" : on ? "default" : "outline",
+      disabled,
+      onClick,
+      className: cn("h-12 w-12", on && !destructive ? "bg-emerald-600 text-white hover:bg-emerald-700" : null),
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { className: "h-5 w-5" }) : icon
+    }
+  );
+}
+function deviceLabel(device, fallbackPrefix) {
+  const label = device?.label.trim();
+  return label != null && label !== "" ? label.replace(/^Default - /u, "") : `Default ${fallbackPrefix}`;
+}
+function devicesForKind(devices, kind) {
+  return devices.filter((device) => device.kind === kind && device.deviceId !== "");
+}
+function DeviceSelect({
+  label,
+  devices,
+  kind,
+  room
+}) {
+  const options = devicesForKind(devices, kind);
+  const activeDevice = room.getActiveDevice(kind) ?? options[0]?.deviceId ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: activeDevice,
+        onValueChange: (deviceId) => {
+          void room.switchActiveDevice(kind, deviceId).catch((error) => {
+            console.warn(`Unable to switch ${label.toLowerCase()}`, error);
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: deviceLabel(options[0] ?? null, label) }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((device) => /* @__PURE__ */ jsx(SelectItem, { value: device.deviceId, children: deviceLabel(device, label) }, device.deviceId)) })
+        ]
+      }
+    )
+  ] });
+}
+function ChangeSettings({ room }) {
+  const [devices, setDevices] = useState([]);
+  const refreshDevices = useCallback(() => {
+    void Room.getLocalDevices(void 0, false).then(setDevices).catch(() => setDevices([]));
+  }, []);
+  useEffect(() => {
+    refreshDevices();
+    navigator.mediaDevices?.addEventListener?.("devicechange", refreshDevices);
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", refreshDevices);
+  }, [refreshDevices]);
+  const hasAudioOutput = useMemo(
+    () => devices.some((device) => device.kind === "audiooutput"),
+    [devices]
+  );
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", title: "Change settings", "aria-label": "Change settings", variant: "outline", size: "icon", className: "h-12 w-12", children: /* @__PURE__ */ jsx(Settings, {}) }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[min(92vw,560px)]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Meeting settings" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Choose the devices used for this meeting." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsx(DeviceSelect, { label: "Camera", devices, kind: "videoinput", room }),
+        /* @__PURE__ */ jsx(DeviceSelect, { label: "Microphone", devices, kind: "audioinput", room }),
+        hasAudioOutput ? /* @__PURE__ */ jsx(DeviceSelect, { label: "Speaker", devices, kind: "audiooutput", room }) : null
+      ] }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: refreshDevices, children: "Refresh" }) })
+    ] })
+  ] });
+}
+export {
+  CameraToggle,
+  ChangeSettings,
+  ConnectionButton,
+  MeetingControls,
+  MicToggle
+};

package/dist/esm/meetings/meeting-scope.d.ts

@@ -0,0 +1,83 @@
+import type { ReactElement, ReactNode } from "react";
+import { RoomClient } from "@meshagent/meshagent";
+import { Room, type LocalParticipant, type Participant, type RoomConnectOptions, type RoomOptions, type TrackPublication } from "livekit-client";
+type Listener = () => void;
+export interface LivekitConnectionInfo {
+    url: string;
+    token: string;
+}
+export type MeetingFastConnectOptions = RoomConnectOptions & {
+    camera?: {
+        enabled?: boolean;
+    };
+    microphone?: {
+        enabled?: boolean;
+    };
+};
+export declare class PendingLocalMediaState {
+    private listeners;
+    private cameraAwaitingEnableConfirmation;
+    private microphoneAwaitingEnableConfirmation;
+    private _cameraPending;
+    private _microphonePending;
+    private _cameraUnavailable;
+    private _microphoneUnavailable;
+    get cameraPending(): boolean;
+    get microphonePending(): boolean;
+    get cameraUnavailable(): boolean;
+    get microphoneUnavailable(): boolean;
+    subscribe(listener: Listener): () => void;
+    setCameraPending(value: boolean, { awaitEnableConfirmation }?: {
+        awaitEnableConfirmation?: boolean | undefined;
+    }): void;
+    setMicrophonePending(value: boolean, { awaitEnableConfirmation }?: {
+        awaitEnableConfirmation?: boolean | undefined;
+    }): void;
+    setCameraUnavailable(value: boolean): void;
+    setMicrophoneUnavailable(value: boolean): void;
+    setPending({ cameraPending, microphonePending, cameraAwaitEnableConfirmation, microphoneAwaitEnableConfirmation, }: {
+        cameraPending: boolean;
+        microphonePending: boolean;
+        cameraAwaitEnableConfirmation?: boolean;
+        microphoneAwaitEnableConfirmation?: boolean;
+    }): void;
+    syncFromLocalParticipant(participant: LocalParticipant | undefined, disconnected: boolean): void;
+    clear(): void;
+    dispose(): void;
+    private notify;
+}
+export declare class MeetingController {
+    readonly room: RoomClient;
+    readonly livekitRoom: Room;
+    readonly pendingLocalMedia: PendingLocalMediaState;
+    private readonly listeners;
+    private _config;
+    private _configurationError;
+    constructor({ room, roomOptions }: {
+        room: RoomClient;
+        roomOptions?: RoomOptions;
+    });
+    get config(): LivekitConnectionInfo | null;
+    get configurationError(): unknown;
+    get isConnected(): boolean;
+    get hasParticipantsWithVideo(): boolean;
+    subscribe(listener: Listener): () => void;
+    configure({ breakoutRoom }?: {
+        breakoutRoom?: string;
+    }): Promise<void>;
+    connect(options?: MeetingFastConnectOptions): Promise<void>;
+    disconnect(): Promise<void>;
+    dispose(): void;
+    private onRoomChanged;
+    private syncPendingLocalMediaState;
+    private notify;
+}
+export declare function useMeetingController(controller?: MeetingController): MeetingController;
+export declare function MeetingScope({ client, breakoutRoom, roomOptions, children, }: {
+    client: RoomClient;
+    breakoutRoom?: string;
+    roomOptions?: RoomOptions;
+    children: ReactNode | ((controller: MeetingController) => ReactNode);
+}): ReactElement;
+export declare function firstEnabledVideoPublication(participant: Participant): TrackPublication | undefined;
+export {};

package/dist/esm/meetings/meeting-scope.js

@@ -0,0 +1,294 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import {
+  ConnectionState,
+  Room,
+  RoomEvent,
+  Track
+} from "livekit-client";
+import { WakeLocker } from "./wake-lock";
+class PendingLocalMediaState {
+  listeners = /* @__PURE__ */ new Set();
+  cameraAwaitingEnableConfirmation = false;
+  microphoneAwaitingEnableConfirmation = false;
+  _cameraPending = false;
+  _microphonePending = false;
+  _cameraUnavailable = false;
+  _microphoneUnavailable = false;
+  get cameraPending() {
+    return this._cameraPending;
+  }
+  get microphonePending() {
+    return this._microphonePending;
+  }
+  get cameraUnavailable() {
+    return this._cameraUnavailable;
+  }
+  get microphoneUnavailable() {
+    return this._microphoneUnavailable;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  setCameraPending(value, { awaitEnableConfirmation = false } = {}) {
+    if (this._cameraPending === value && this.cameraAwaitingEnableConfirmation === awaitEnableConfirmation) {
+      return;
+    }
+    this._cameraPending = value;
+    this.cameraAwaitingEnableConfirmation = value && awaitEnableConfirmation;
+    this.notify();
+  }
+  setMicrophonePending(value, { awaitEnableConfirmation = false } = {}) {
+    if (this._microphonePending === value && this.microphoneAwaitingEnableConfirmation === awaitEnableConfirmation) {
+      return;
+    }
+    this._microphonePending = value;
+    this.microphoneAwaitingEnableConfirmation = value && awaitEnableConfirmation;
+    this.notify();
+  }
+  setCameraUnavailable(value) {
+    if (this._cameraUnavailable === value) {
+      return;
+    }
+    this._cameraUnavailable = value;
+    this.notify();
+  }
+  setMicrophoneUnavailable(value) {
+    if (this._microphoneUnavailable === value) {
+      return;
+    }
+    this._microphoneUnavailable = value;
+    this.notify();
+  }
+  setPending({
+    cameraPending,
+    microphonePending,
+    cameraAwaitEnableConfirmation = false,
+    microphoneAwaitEnableConfirmation = false
+  }) {
+    const nextCameraAwaiting = cameraPending && cameraAwaitEnableConfirmation;
+    const nextMicrophoneAwaiting = microphonePending && microphoneAwaitEnableConfirmation;
+    if (this._cameraPending === cameraPending && this._microphonePending === microphonePending && this.cameraAwaitingEnableConfirmation === nextCameraAwaiting && this.microphoneAwaitingEnableConfirmation === nextMicrophoneAwaiting) {
+      return;
+    }
+    this._cameraPending = cameraPending;
+    this._microphonePending = microphonePending;
+    this.cameraAwaitingEnableConfirmation = nextCameraAwaiting;
+    this.microphoneAwaitingEnableConfirmation = nextMicrophoneAwaiting;
+    this.notify();
+  }
+  syncFromLocalParticipant(participant, disconnected) {
+    if (disconnected) {
+      this.clear();
+      return;
+    }
+    if (this.cameraAwaitingEnableConfirmation && participant?.isCameraEnabled) {
+      this.setCameraPending(false);
+    }
+    if (participant?.isCameraEnabled) {
+      this.setCameraUnavailable(false);
+    }
+    if (this.microphoneAwaitingEnableConfirmation && participant?.isMicrophoneEnabled) {
+      this.setMicrophonePending(false);
+    }
+    if (participant?.isMicrophoneEnabled) {
+      this.setMicrophoneUnavailable(false);
+    }
+  }
+  clear() {
+    if (!this._cameraPending && !this._microphonePending && !this.cameraAwaitingEnableConfirmation && !this.microphoneAwaitingEnableConfirmation && !this._cameraUnavailable && !this._microphoneUnavailable) {
+      return;
+    }
+    this._cameraPending = false;
+    this._microphonePending = false;
+    this.cameraAwaitingEnableConfirmation = false;
+    this.microphoneAwaitingEnableConfirmation = false;
+    this._cameraUnavailable = false;
+    this._microphoneUnavailable = false;
+    this.notify();
+  }
+  dispose() {
+    this.listeners.clear();
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+}
+class MeetingController {
+  room;
+  livekitRoom;
+  pendingLocalMedia = new PendingLocalMediaState();
+  listeners = /* @__PURE__ */ new Set();
+  _config = null;
+  _configurationError = null;
+  constructor({ room, roomOptions }) {
+    this.room = room;
+    this.livekitRoom = new Room(roomOptions);
+    const roomEvents = [
+      RoomEvent.ConnectionStateChanged,
+      RoomEvent.Connected,
+      RoomEvent.Disconnected,
+      RoomEvent.ParticipantConnected,
+      RoomEvent.ParticipantDisconnected,
+      RoomEvent.TrackPublished,
+      RoomEvent.TrackSubscribed,
+      RoomEvent.TrackUnpublished,
+      RoomEvent.TrackUnsubscribed,
+      RoomEvent.TrackMuted,
+      RoomEvent.TrackUnmuted,
+      RoomEvent.LocalTrackPublished,
+      RoomEvent.LocalTrackUnpublished,
+      RoomEvent.ActiveSpeakersChanged,
+      RoomEvent.ParticipantAttributesChanged,
+      RoomEvent.ParticipantNameChanged,
+      RoomEvent.MediaDevicesChanged
+    ];
+    for (const eventName of roomEvents) {
+      this.livekitRoom.on(eventName, this.onRoomChanged);
+    }
+  }
+  get config() {
+    return this._config;
+  }
+  get configurationError() {
+    return this._configurationError;
+  }
+  get isConnected() {
+    return this.livekitRoom.state !== ConnectionState.Disconnected;
+  }
+  get hasParticipantsWithVideo() {
+    const localHasVideo = Array.from(this.livekitRoom.localParticipant.videoTrackPublications.values()).some((publication) => !publication.isMuted);
+    const remoteHasVideo = Array.from(this.livekitRoom.remoteParticipants.values()).some((participant) => Array.from(participant.videoTrackPublications.values()).some((publication) => !publication.isMuted));
+    return localHasVideo || remoteHasVideo;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  async configure({ breakoutRoom } = {}) {
+    if (this.livekitRoom.state !== ConnectionState.Disconnected) {
+      throw new Error("You cannot reconfigure while the controller is connected");
+    }
+    this._config = null;
+    this._configurationError = null;
+    this.notify();
+    try {
+      this._config = await this.room.livekit.getConnectionInfo({ breakoutRoom });
+      this.notify();
+    } catch (error) {
+      this._configurationError = error;
+      this.notify();
+      throw error;
+    }
+  }
+  async connect(options) {
+    const config = this._config;
+    if (config == null) {
+      throw new Error("The controller has not been configured");
+    }
+    const cameraEnabled = options?.camera?.enabled === true;
+    const microphoneEnabled = options?.microphone?.enabled === true;
+    this.pendingLocalMedia.setCameraUnavailable(false);
+    this.pendingLocalMedia.setMicrophoneUnavailable(false);
+    this.pendingLocalMedia.setPending({
+      cameraPending: cameraEnabled,
+      microphonePending: microphoneEnabled,
+      cameraAwaitEnableConfirmation: cameraEnabled,
+      microphoneAwaitEnableConfirmation: microphoneEnabled
+    });
+    const { camera: _camera, microphone: _microphone, ...connectOptions } = options ?? {};
+    try {
+      await this.livekitRoom.connect(config.url, config.token, connectOptions);
+      const localParticipant = this.livekitRoom.localParticipant;
+      await Promise.all([
+        cameraEnabled ? localParticipant.setCameraEnabled(true).then(() => this.pendingLocalMedia.setCameraUnavailable(false)).catch((error) => {
+          this.pendingLocalMedia.setCameraPending(false);
+          this.pendingLocalMedia.setCameraUnavailable(true);
+          console.warn("unable to enable camera after connecting", error);
+        }) : Promise.resolve(this.pendingLocalMedia.setCameraPending(false)),
+        microphoneEnabled ? localParticipant.setMicrophoneEnabled(true).then(() => this.pendingLocalMedia.setMicrophoneUnavailable(false)).catch((error) => {
+          this.pendingLocalMedia.setMicrophonePending(false);
+          this.pendingLocalMedia.setMicrophoneUnavailable(true);
+          console.warn("unable to enable microphone after connecting", error);
+        }) : Promise.resolve(this.pendingLocalMedia.setMicrophonePending(false))
+      ]);
+      this.syncPendingLocalMediaState();
+    } catch (error) {
+      this.pendingLocalMedia.clear();
+      throw error;
+    }
+  }
+  async disconnect() {
+    this.pendingLocalMedia.clear();
+    await this.livekitRoom.disconnect();
+  }
+  dispose() {
+    this.livekitRoom.removeAllListeners();
+    this.pendingLocalMedia.dispose();
+    this.listeners.clear();
+  }
+  onRoomChanged = () => {
+    this.syncPendingLocalMediaState();
+    this.notify();
+  };
+  syncPendingLocalMediaState() {
+    this.pendingLocalMedia.syncFromLocalParticipant(
+      this.livekitRoom.localParticipant,
+      this.livekitRoom.state === ConnectionState.Disconnected
+    );
+  }
+  notify() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
+}
+const MeetingControllerContext = createContext(null);
+function useMeetingController(controller) {
+  const contextController = useContext(MeetingControllerContext);
+  const resolved = controller ?? contextController;
+  if (resolved == null) {
+    throw new Error("useMeetingController must be used within MeetingScope or receive a controller");
+  }
+  useSyncExternalStore(
+    (listener) => resolved.subscribe(listener),
+    () => resolved.livekitRoom.state,
+    () => resolved.livekitRoom.state
+  );
+  return resolved;
+}
+function MeetingScope({
+  client,
+  breakoutRoom,
+  roomOptions,
+  children
+}) {
+  const controller = useMemo(() => new MeetingController({ room: client, roomOptions }), [client, roomOptions]);
+  useEffect(() => {
+    void controller.configure({ breakoutRoom });
+    return () => {
+      if (controller.isConnected) {
+        void controller.disconnect().catch((error) => {
+          console.warn("unable to disconnect", error);
+        });
+      }
+      controller.dispose();
+    };
+  }, [breakoutRoom, controller]);
+  return /* @__PURE__ */ jsx(WakeLocker, { children: /* @__PURE__ */ jsx(MeetingControllerContext.Provider, { value: controller, children: typeof children === "function" ? children(controller) : children }) });
+}
+function firstEnabledVideoPublication(participant) {
+  return Array.from(participant.videoTrackPublications.values()).find(
+    (publication) => !publication.isMuted && publication.source === Track.Source.Camera && publication.videoTrack != null
+  );
+}
+export {
+  MeetingController,
+  MeetingScope,
+  PendingLocalMediaState,
+  firstEnabledVideoPublication,
+  useMeetingController
+};

package/dist/esm/meetings/meetings.d.ts

@@ -0,0 +1,5 @@
+export * from "./audio-visualization";
+export * from "./controls";
+export * from "./meeting-scope";
+export * from "./participants";
+export * from "./wake-lock";

package/dist/esm/meetings/meetings.js

@@ -0,0 +1,5 @@
+export * from "./audio-visualization";
+export * from "./controls";
+export * from "./meeting-scope";
+export * from "./participants";
+export * from "./wake-lock";

package/dist/esm/meetings/participants.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import { Participant, Room } from "livekit-client";
+import { MeetingController } from "./meeting-scope";
+export declare function ParticipantCamerasList({ controller: providedController, spacing, className, }: {
+    controller?: MeetingController;
+    spacing?: number;
+    className?: string;
+}): ReactElement;
+export declare function ParticipantTile({ room, participant, className, }: {
+    room: Room;
+    participant: Participant;
+    className?: string;
+}): ReactElement;