@meshagent/meshagent-tailwind 0.41.4 → 0.41.6

package/dist/esm/meetings/lobby.js

@@ -0,0 +1,595 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Room
+} from "livekit-client";
+import { Video, VideoOff, Mic, MicOff, Settings } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+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";
+const audioInputStorageKey = "audioInput";
+const audioOutputStorageKey = "audioOutput";
+const videoInputStorageKey = "videoInput";
+const minimumLobbyPendingDuration = 350;
+function storedDeviceId(key) {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  return window.localStorage.getItem(key) ?? "";
+}
+function storeDeviceId(key, value) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (value === "") {
+    window.localStorage.removeItem(key);
+    return;
+  }
+  window.localStorage.setItem(key, value);
+}
+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 captureDeviceConstraint(deviceId) {
+  return deviceId === "" ? void 0 : { exact: deviceId };
+}
+function videoCaptureOptions(deviceId) {
+  const constraint = captureDeviceConstraint(deviceId);
+  return constraint == null ? void 0 : { deviceId: constraint };
+}
+function audioCaptureOptions(deviceId) {
+  const constraint = captureDeviceConstraint(deviceId);
+  return constraint == null ? void 0 : { deviceId: constraint };
+}
+function stopLocalVideoTrack(track) {
+  track?.stop();
+}
+function stopLocalAudioTrack(track) {
+  track?.stop();
+}
+async function createPreviewVideoTrack(deviceId) {
+  const constraints = deviceId === "" ? true : { deviceId: { exact: deviceId } };
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: constraints,
+    audio: false
+  });
+  const track = stream.getVideoTracks()[0];
+  if (track == null) {
+    throw new Error("No video track was created");
+  }
+  return new LocalVideoTrack(
+    track,
+    constraints === true ? void 0 : constraints
+  );
+}
+async function createPreviewAudioTrack(deviceId) {
+  const constraints = deviceId === "" ? true : { deviceId: { exact: deviceId } };
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: false,
+    audio: constraints
+  });
+  const track = stream.getAudioTracks()[0];
+  if (track == null) {
+    throw new Error("No audio track was created");
+  }
+  return new LocalAudioTrack(
+    track,
+    constraints === true ? void 0 : constraints
+  );
+}
+function useLobbyDevices() {
+  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]);
+  return { devices, refreshDevices };
+}
+async function runWithMinimumPendingDuration(action) {
+  const startedAt = Date.now();
+  await action();
+  const remaining = minimumLobbyPendingDuration - (Date.now() - startedAt);
+  if (remaining > 0) {
+    await new Promise((resolve) => window.setTimeout(resolve, remaining));
+  }
+}
+function useMeetingLobbyState() {
+  const { devices, refreshDevices } = useLobbyDevices();
+  const [loaded, setLoaded] = useState(false);
+  const [audioOn, setAudioOn] = useState(true);
+  const [videoOn, setVideoOn] = useState(true);
+  const [audioProcessing, setAudioProcessing] = useState(false);
+  const [videoProcessing, setVideoProcessing] = useState(false);
+  const [audioUnavailable, setAudioUnavailable] = useState(false);
+  const [videoUnavailable, setVideoUnavailable] = useState(false);
+  const [audioDeviceId, setAudioDeviceIdState] = useState(() => storedDeviceId(audioInputStorageKey));
+  const [audioOutputDeviceId, setAudioOutputDeviceIdState] = useState(() => storedDeviceId(audioOutputStorageKey));
+  const [videoDeviceId, setVideoDeviceIdState] = useState(() => storedDeviceId(videoInputStorageKey));
+  const [audioTrack, setAudioTrack] = useState(null);
+  const [videoTrack, setVideoTrack] = useState(null);
+  const disposedRef = useRef(false);
+  const audioTrackRef = useRef(null);
+  const videoTrackRef = useRef(null);
+  const audioTrackRequestRef = useRef(0);
+  const videoTrackRequestRef = useRef(0);
+  const audioDeviceIdRef = useRef(audioDeviceId);
+  const videoDeviceIdRef = useRef(videoDeviceId);
+  const replaceAudioTrackState = useCallback(
+    (nextTrack) => {
+      const currentTrack = audioTrackRef.current;
+      if (currentTrack !== nextTrack) {
+        stopLocalAudioTrack(currentTrack);
+      }
+      if (disposedRef.current) {
+        stopLocalAudioTrack(nextTrack);
+        audioTrackRef.current = null;
+        return;
+      }
+      audioTrackRef.current = nextTrack;
+      setAudioTrack(nextTrack);
+    },
+    []
+  );
+  const replaceVideoTrackState = useCallback(
+    (nextTrack) => {
+      const currentTrack = videoTrackRef.current;
+      if (currentTrack !== nextTrack) {
+        stopLocalVideoTrack(currentTrack);
+      }
+      if (disposedRef.current) {
+        stopLocalVideoTrack(nextTrack);
+        videoTrackRef.current = null;
+        return;
+      }
+      videoTrackRef.current = nextTrack;
+      setVideoTrack(nextTrack);
+    },
+    []
+  );
+  const replaceAudioTrack = useCallback(
+    async (deviceId) => {
+      const requestId = audioTrackRequestRef.current + 1;
+      audioTrackRequestRef.current = requestId;
+      setAudioProcessing(true);
+      await runWithMinimumPendingDuration(async () => {
+        try {
+          const nextTrack = await createPreviewAudioTrack(deviceId);
+          if (disposedRef.current || requestId !== audioTrackRequestRef.current) {
+            stopLocalAudioTrack(nextTrack);
+            return;
+          }
+          replaceAudioTrackState(nextTrack);
+          setAudioUnavailable(false);
+        } catch (error) {
+          if (!disposedRef.current && requestId === audioTrackRequestRef.current) {
+            replaceAudioTrackState(null);
+            setAudioUnavailable(true);
+            console.warn("Unable to start microphone preview", error);
+          }
+        }
+      });
+      if (!disposedRef.current && requestId === audioTrackRequestRef.current) {
+        setAudioProcessing(false);
+      }
+    },
+    [replaceAudioTrackState]
+  );
+  const replaceVideoTrack = useCallback(
+    async (deviceId) => {
+      const requestId = videoTrackRequestRef.current + 1;
+      videoTrackRequestRef.current = requestId;
+      setVideoProcessing(true);
+      await runWithMinimumPendingDuration(async () => {
+        try {
+          const nextTrack = await createPreviewVideoTrack(deviceId);
+          if (disposedRef.current || requestId !== videoTrackRequestRef.current) {
+            stopLocalVideoTrack(nextTrack);
+            return;
+          }
+          replaceVideoTrackState(nextTrack);
+          setVideoUnavailable(false);
+        } catch (error) {
+          if (!disposedRef.current && requestId === videoTrackRequestRef.current) {
+            replaceVideoTrackState(null);
+            setVideoUnavailable(true);
+            console.warn("Unable to start camera preview", error);
+          }
+        }
+      });
+      if (!disposedRef.current && requestId === videoTrackRequestRef.current) {
+        setVideoProcessing(false);
+      }
+    },
+    [replaceVideoTrackState]
+  );
+  useEffect(() => {
+    audioDeviceIdRef.current = audioDeviceId;
+  }, [audioDeviceId]);
+  useEffect(() => {
+    videoDeviceIdRef.current = videoDeviceId;
+  }, [videoDeviceId]);
+  useEffect(() => {
+    let cancelled = false;
+    disposedRef.current = false;
+    void Promise.all([
+      replaceAudioTrack(audioDeviceIdRef.current),
+      replaceVideoTrack(videoDeviceIdRef.current)
+    ]).finally(() => {
+      if (!cancelled) {
+        setLoaded(true);
+        refreshDevices();
+      }
+    });
+    return () => {
+      cancelled = true;
+      disposedRef.current = true;
+      audioTrackRequestRef.current += 1;
+      videoTrackRequestRef.current += 1;
+      replaceAudioTrackState(null);
+      replaceVideoTrackState(null);
+    };
+  }, [
+    refreshDevices,
+    replaceAudioTrack,
+    replaceAudioTrackState,
+    replaceVideoTrack,
+    replaceVideoTrackState
+  ]);
+  const setAudioDeviceId = useCallback(
+    (deviceId) => {
+      setAudioDeviceIdState(deviceId);
+      storeDeviceId(audioInputStorageKey, deviceId);
+      void replaceAudioTrack(deviceId);
+    },
+    [replaceAudioTrack]
+  );
+  const setAudioOutputDeviceId = useCallback((deviceId) => {
+    setAudioOutputDeviceIdState(deviceId);
+    storeDeviceId(audioOutputStorageKey, deviceId);
+  }, []);
+  const setVideoDeviceId = useCallback(
+    (deviceId) => {
+      setVideoDeviceIdState(deviceId);
+      storeDeviceId(videoInputStorageKey, deviceId);
+      void replaceVideoTrack(deviceId);
+    },
+    [replaceVideoTrack]
+  );
+  const toggleAudio = useCallback(() => {
+    if (audioProcessing) {
+      return;
+    }
+    if (audioTrack != null) {
+      replaceAudioTrackState(null);
+      setAudioOn(false);
+      return;
+    }
+    setAudioOn(true);
+    void replaceAudioTrack(audioDeviceId);
+  }, [
+    audioDeviceId,
+    audioProcessing,
+    audioTrack,
+    replaceAudioTrack,
+    replaceAudioTrackState
+  ]);
+  const toggleVideo = useCallback(() => {
+    if (videoProcessing) {
+      return;
+    }
+    if (videoTrack != null) {
+      replaceVideoTrackState(null);
+      setVideoOn(false);
+      return;
+    }
+    setVideoOn(true);
+    void replaceVideoTrack(videoDeviceId);
+  }, [
+    replaceVideoTrack,
+    replaceVideoTrackState,
+    videoDeviceId,
+    videoProcessing,
+    videoTrack
+  ]);
+  return {
+    loaded,
+    videoTrack,
+    audioTrack,
+    audioOn,
+    videoOn,
+    audioProcessing,
+    videoProcessing,
+    audioUnavailable,
+    videoUnavailable,
+    audioDeviceId,
+    audioOutputDeviceId,
+    videoDeviceId,
+    devices,
+    setAudioDeviceId,
+    setAudioOutputDeviceId,
+    setVideoDeviceId,
+    refreshDevices,
+    toggleAudio,
+    toggleVideo
+  };
+}
+function useAttachedPreviewVideo(track) {
+  const attachedElementRef = useRef(null);
+  useEffect(() => {
+    const element = attachedElementRef.current;
+    if (element == null || track == null) {
+      return void 0;
+    }
+    track.attach(element);
+    return () => {
+      track.detach(element);
+    };
+  }, [track]);
+  return useCallback((element) => {
+    attachedElementRef.current = element;
+  }, []);
+}
+function LobbyDeviceSelect({
+  label,
+  devices,
+  kind,
+  value,
+  onValueChange
+}) {
+  const options = devicesForKind(devices, kind);
+  const selectedValue = value === "" ? "default" : value;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: selectedValue,
+        onValueChange: (nextValue) => onValueChange(nextValue === "default" ? "" : nextValue),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: deviceLabel(options[0] ?? null, label) }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxs(SelectItem, { value: "default", children: [
+              "Default ",
+              label.toLowerCase()
+            ] }),
+            options.map((device) => /* @__PURE__ */ jsx(SelectItem, { value: device.deviceId, children: deviceLabel(device, label) }, device.deviceId))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function LobbyDeviceSettings({ state }) {
+  const hasAudioOutput = useMemo(
+    () => state.devices.some((device) => device.kind === "audiooutput"),
+    [state.devices]
+  );
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        title: "Device settings",
+        "aria-label": "Device settings",
+        variant: "outline",
+        className: "h-10",
+        children: [
+          /* @__PURE__ */ jsx(Settings, {}),
+          "Device settings"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[min(92vw,560px)]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Device settings" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Choose the devices used for this meeting." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsx(
+          LobbyDeviceSelect,
+          {
+            label: "Camera",
+            devices: state.devices,
+            kind: "videoinput",
+            value: state.videoDeviceId,
+            onValueChange: state.setVideoDeviceId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LobbyDeviceSelect,
+          {
+            label: "Microphone",
+            devices: state.devices,
+            kind: "audioinput",
+            value: state.audioDeviceId,
+            onValueChange: state.setAudioDeviceId
+          }
+        ),
+        hasAudioOutput && /* @__PURE__ */ jsx(
+          LobbyDeviceSelect,
+          {
+            label: "Speaker",
+            devices: state.devices,
+            kind: "audiooutput",
+            value: state.audioOutputDeviceId,
+            onValueChange: state.setAudioOutputDeviceId
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: state.refreshDevices, children: "Refresh" }) })
+    ] })
+  ] });
+}
+function LobbyToggleButton({
+  text,
+  on,
+  unavailable,
+  loading,
+  icon,
+  offIcon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      title: text,
+      "aria-label": text,
+      size: "icon",
+      variant: unavailable ? "destructive" : on ? "default" : "outline",
+      disabled: loading,
+      onClick,
+      className: cn(
+        "h-10 w-10",
+        on && !unavailable ? "bg-emerald-600 text-white hover:bg-emerald-700" : null
+      ),
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { className: "h-5 w-5" }) : on ? icon : offIcon
+    }
+  );
+}
+function joinOptions(state) {
+  const enableVideo = state.videoTrack != null && !state.videoUnavailable;
+  const enableAudio = state.audioTrack != null && !state.audioUnavailable;
+  return {
+    enableVideo,
+    enableAudio,
+    videoUnavailable: state.videoUnavailable,
+    audioUnavailable: state.audioUnavailable,
+    videoDeviceId: state.videoDeviceId === "" ? void 0 : state.videoDeviceId,
+    audioDeviceId: state.audioDeviceId === "" ? void 0 : state.audioDeviceId,
+    audioOutputDeviceId: state.audioOutputDeviceId === "" ? void 0 : state.audioOutputDeviceId
+  };
+}
+function meetingFastConnectOptions(options) {
+  return {
+    camera: {
+      enabled: options.enableVideo,
+      options: videoCaptureOptions(options.videoDeviceId ?? "")
+    },
+    microphone: {
+      enabled: options.enableAudio,
+      options: audioCaptureOptions(options.audioDeviceId ?? "")
+    }
+  };
+}
+function MeetingLobby({
+  controller: providedController,
+  onCancel,
+  onJoin
+}) {
+  const controller = useMeetingController(providedController);
+  const state = useMeetingLobbyState();
+  const previewRef = useAttachedPreviewVideo(state.videoTrack);
+  const videoPending = state.videoOn && state.videoTrack == null && !state.videoUnavailable;
+  const audioPending = state.audioOn && state.audioTrack == null && !state.audioUnavailable;
+  const starting = videoPending || audioPending || state.videoProcessing || state.audioProcessing;
+  const canJoin = controller.config != null && !starting;
+  const statusText = state.loaded ? "Get ready to meet" : "Preparing devices";
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col px-6 py-5", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-[800px] gap-5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-center text-base font-semibold", children: statusText }),
+    /* @__PURE__ */ jsx("div", { className: "aspect-[3/2] overflow-hidden rounded-md bg-[#222]", children: state.videoTrack != null ? /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: previewRef,
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        className: "h-full w-full object-cover"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-sm font-medium text-white/70", children: "Camera off" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          LobbyToggleButton,
+          {
+            text: audioPending ? "Starting microphone" : state.audioTrack != null ? "Turn off microphone" : "Turn on microphone",
+            on: state.audioTrack != null || audioPending,
+            unavailable: state.audioUnavailable,
+            loading: state.audioProcessing || audioPending,
+            icon: /* @__PURE__ */ jsx(Mic, {}),
+            offIcon: /* @__PURE__ */ jsx(MicOff, {}),
+            onClick: state.toggleAudio
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LobbyToggleButton,
+          {
+            text: videoPending ? "Starting camera" : state.videoTrack != null ? "Turn off camera" : "Turn on camera",
+            on: state.videoTrack != null || videoPending,
+            unavailable: state.videoUnavailable,
+            loading: state.videoProcessing || videoPending,
+            icon: /* @__PURE__ */ jsx(Video, {}),
+            offIcon: /* @__PURE__ */ jsx(VideoOff, {}),
+            onClick: state.toggleVideo
+          }
+        ),
+        /* @__PURE__ */ jsx(LobbyDeviceSettings, { state })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        onCancel != null && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            className: "h-10 sm:w-[120px]",
+            onClick: onCancel,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            className: "h-10 bg-emerald-600 text-white hover:bg-emerald-700 sm:w-[120px]",
+            disabled: !canJoin,
+            onClick: () => {
+              onJoin?.(joinOptions(state));
+            },
+            children: starting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
+              "Starting"
+            ] }) : "Meet now"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+export {
+  MeetingLobby,
+  meetingFastConnectOptions
+};

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

@@ -1,17 +1,18 @@
 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";
+import type { RoomClient } from "@meshagent/meshagent";
+import "@meshagent/meshagent-react";
+import type { LivekitConnectionInfo } from "@meshagent/meshagent-react";
+import { Room } from "livekit-client";
+import type { AudioCaptureOptions, LocalParticipant, Participant, RoomConnectOptions, RoomOptions, TrackPublication, VideoCaptureOptions } from "livekit-client";
 type Listener = () => void;
-export interface LivekitConnectionInfo {
-    url: string;
-    token: string;
-}
 export type MeetingFastConnectOptions = RoomConnectOptions & {
     camera?: {
         enabled?: boolean;
+        options?: VideoCaptureOptions;
     };
     microphone?: {
         enabled?: boolean;
+        options?: AudioCaptureOptions;
     };
 };
 export declare class PendingLocalMediaState {