@meshagent/meshagent-tailwind 0.41.2 → 0.41.5

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

@@ -0,0 +1,630 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ConnectionState,
+  RoomEvent
+} from "livekit-client";
+import { Expand, Mic, MicOff, Minimize2, MonitorUp, MonitorX } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Button } from "../components/ui/button";
+import { Spinner } from "../components/ui/spinner";
+import { cn } from "../lib/utils";
+import { AudioWave } from "./audio-visualization";
+import {
+  CameraGrid,
+  TrackSource
+} from "./camera-grid";
+import { MeetingControls } from "./controls";
+import {
+  MeetingLobby,
+  meetingFastConnectOptions
+} from "./lobby";
+import { useMeetingController } from "./meeting-scope";
+const railGap = 16;
+const desktopStripWidth = 250;
+const desktopStripHeight = 100;
+function useRoomSnapshot(room) {
+  useSyncExternalStore(
+    (listener) => {
+      const events = [
+        RoomEvent.ActiveSpeakersChanged,
+        RoomEvent.Connected,
+        RoomEvent.ConnectionStateChanged,
+        RoomEvent.Disconnected,
+        RoomEvent.LocalTrackPublished,
+        RoomEvent.LocalTrackUnpublished,
+        RoomEvent.ParticipantConnected,
+        RoomEvent.ParticipantDisconnected,
+        RoomEvent.TrackMuted,
+        RoomEvent.TrackPublished,
+        RoomEvent.TrackSubscribed,
+        RoomEvent.TrackUnmuted,
+        RoomEvent.TrackUnpublished,
+        RoomEvent.TrackUnsubscribed
+      ];
+      for (const eventName of events) {
+        room.on(eventName, listener);
+      }
+      return () => {
+        for (const eventName of events) {
+          room.off(eventName, listener);
+        }
+      };
+    },
+    () => {
+      const participants = [
+        room.localParticipant,
+        ...Array.from(room.remoteParticipants.values())
+      ];
+      const trackState = participants.map(
+        (participant) => [
+          participant.sid,
+          participant.identity,
+          participant.isCameraEnabled,
+          participant.isScreenShareEnabled,
+          participant.isMicrophoneEnabled,
+          participantVideoPublications(participant).map(
+            (publication) => `${publication.trackSid}:${publication.source}:${publication.isMuted}:${publication.videoTrack != null}`
+          ).join(",")
+        ].join(":")
+      ).join("|");
+      return `${room.state}:${room.remoteParticipants.size}:${room.activeSpeakers.length}:${trackState}`;
+    },
+    () => ""
+  );
+}
+function useMeetingViewState(controller) {
+  const [viewState, setViewState] = useState("preview");
+  const connectionState = useSyncExternalStore(
+    (listener) => controller.subscribe(listener),
+    () => controller.livekitRoom.state,
+    () => controller.livekitRoom.state
+  );
+  useEffect(() => {
+    if (connectionState === ConnectionState.Disconnected) {
+      setViewState("preview");
+      return;
+    }
+    if (connectionState === ConnectionState.Connected) {
+      setViewState("joined");
+    }
+  }, [connectionState]);
+  const joinMeeting = useCallback(
+    async (options) => {
+      await controller.connect(meetingFastConnectOptions(options));
+      if (options.audioOutputDeviceId != null) {
+        await controller.livekitRoom.switchActiveDevice("audiooutput", options.audioOutputDeviceId).catch((error) => {
+          console.warn("Unable to switch audio output device", error);
+        });
+      }
+      setViewState("joined");
+    },
+    [controller]
+  );
+  return { viewState, joinMeeting };
+}
+function participantDisplayName(participant) {
+  return participant.name?.trim() || participant.identity || "Participant";
+}
+function participantVideoPublications(participant) {
+  return Array.from(
+    participant.videoTrackPublications.values()
+  );
+}
+function activeVideoPublicationForSource(participant, source) {
+  const publication = participant.getTrackPublication(source);
+  if (publication == null || publication.isMuted || publication.videoTrack == null) {
+    return void 0;
+  }
+  return publication;
+}
+function activeVideoPublications(participant, options = {}) {
+  return participantVideoPublications(participant).filter(
+    (publication) => !publication.isMuted && publication.videoTrack != null && (options.source == null || publication.source === options.source)
+  );
+}
+function screenSharePublications(participants) {
+  return participants.flatMap((participant) => {
+    const publication = activeVideoPublicationForSource(
+      participant,
+      TrackSource.ScreenShareVideo
+    );
+    return publication == null ? [] : [{ participant, publication }];
+  });
+}
+function useAttachedVideoTrack(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 VideoTrackView({
+  track,
+  fit,
+  muted
+}) {
+  const videoRef = useAttachedVideoTrack(track);
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: videoRef,
+      autoPlay: true,
+      playsInline: true,
+      muted,
+      className: cn(
+        "h-full w-full bg-[#222222]",
+        fit === "contain" ? "object-contain" : "object-cover"
+      )
+    }
+  );
+}
+function ParticipantFrame({
+  args,
+  expandedTarget,
+  onToggleExpanded,
+  strip = false
+}) {
+  const [hovered, setHovered] = useState(false);
+  const { participant, publication, trackNode, showName } = args;
+  const source = publication?.source ?? TrackSource.Camera;
+  const expanded = expandedTarget?.identity === participant.identity && expandedTarget.source === source;
+  const muted = !participant.isMicrophoneEnabled;
+  const displayName = participantDisplayName(participant);
+  const showLabel = showName && (hovered || expanded || strip);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative h-full w-full overflow-hidden rounded-md border bg-[#222222]",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        trackNode,
+        /* @__PURE__ */ jsxs("div", { className: "absolute right-1.5 top-1.5 flex max-w-[calc(100%-0.75rem)] items-center rounded-md px-2 py-1.5 text-xs font-medium text-white drop-shadow", children: [
+          muted ? /* @__PURE__ */ jsx(MicOff, { className: "h-4 w-4 shrink-0 text-red-400" }) : /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200",
+                showLabel ? "ml-1 max-w-40 opacity-100" : "max-w-0 opacity-0"
+              ),
+              children: displayName
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "ml-1 h-5 w-5 shrink-0 text-white hover:bg-white/10 hover:text-white",
+              title: expanded ? "Collapse view" : "Expand view",
+              "aria-label": expanded ? "Collapse view" : "Expand view",
+              onClick: () => onToggleExpanded(participant.identity, source),
+              children: expanded ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ParticipantCameraGrid({
+  room,
+  participants,
+  preferredSource,
+  expandedTarget,
+  onToggleExpanded
+}) {
+  return /* @__PURE__ */ jsx(
+    CameraGrid,
+    {
+      room,
+      participants,
+      spacing: 12,
+      preferredSource,
+      activeVideoPublicationForSource,
+      activeVideoPublications,
+      renderVideoTrack: ({ track, fit, publication }) => /* @__PURE__ */ jsx(
+        VideoTrackView,
+        {
+          track,
+          fit,
+          muted: publication.isLocal && publication.source !== TrackSource.ScreenShareVideo
+        }
+      ),
+      renderAudioStats: ({ participant }) => /* @__PURE__ */ jsx(
+        AudioWave,
+        {
+          room,
+          participant,
+          className: "flex h-full w-full items-center justify-center bg-[#222222]"
+        }
+      ),
+      frameBuilder: (args) => /* @__PURE__ */ jsx(
+        ParticipantFrame,
+        {
+          args,
+          expandedTarget,
+          onToggleExpanded
+        }
+      )
+    }
+  );
+}
+function CameraStrip({
+  room,
+  participants,
+  horizontal,
+  expandedTarget,
+  onToggleExpanded
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex gap-3 overflow-auto",
+        horizontal ? "h-full flex-row" : "h-full flex-col"
+      ),
+      children: participants.map((participant) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "aspect-video overflow-hidden rounded-md",
+            horizontal ? "h-full min-w-44" : "w-full"
+          ),
+          children: /* @__PURE__ */ jsx(
+            CameraGrid,
+            {
+              room,
+              participants: [participant],
+              showNames: true,
+              activeVideoPublicationForSource,
+              activeVideoPublications,
+              preferredSource: TrackSource.Camera,
+              renderVideoTrack: ({ track, fit, publication }) => /* @__PURE__ */ jsx(
+                VideoTrackView,
+                {
+                  track,
+                  fit,
+                  muted: publication.isLocal
+                }
+              ),
+              renderAudioStats: ({ participant: participant2 }) => /* @__PURE__ */ jsx(
+                AudioWave,
+                {
+                  room,
+                  participant: participant2,
+                  className: "flex h-full w-full items-center justify-center bg-[#222222]"
+                }
+              ),
+              frameBuilder: (args) => /* @__PURE__ */ jsx(
+                ParticipantFrame,
+                {
+                  args,
+                  expandedTarget,
+                  onToggleExpanded,
+                  strip: true
+                }
+              )
+            }
+          )
+        },
+        participant.sid || participant.identity
+      ))
+    }
+  );
+}
+function fitAspect({
+  aspectRatio,
+  maxWidth,
+  maxHeight
+}) {
+  if (maxWidth <= 0 || maxHeight <= 0 || aspectRatio <= 0) {
+    return { width: 0, height: 0 };
+  }
+  let width = maxWidth;
+  let height = width / aspectRatio;
+  if (height > maxHeight) {
+    height = maxHeight;
+    width = height * aspectRatio;
+  }
+  return { width, height };
+}
+function shouldPutStripOnLeft({
+  width,
+  height,
+  aspectRatio
+}) {
+  const leftFit = fitAspect({
+    aspectRatio,
+    maxWidth: Math.max(0, width - desktopStripWidth - railGap),
+    maxHeight: height
+  });
+  const topFit = fitAspect({
+    aspectRatio,
+    maxWidth: width,
+    maxHeight: Math.max(0, height - desktopStripHeight - railGap)
+  });
+  return leftFit.width * leftFit.height >= topFit.width * topFit.height;
+}
+function useElementSize() {
+  const [element, setElement] = useState(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (element == null) {
+      return void 0;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      setSize({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+  return [setElement, size];
+}
+function useMediaQuery(query) {
+  const getSnapshot = useCallback(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.matchMedia(query).matches;
+  }, [query]);
+  return useSyncExternalStore(
+    (listener) => {
+      if (typeof window === "undefined") {
+        return () => {
+        };
+      }
+      const mediaQuery = window.matchMedia(query);
+      mediaQuery.addEventListener("change", listener);
+      return () => mediaQuery.removeEventListener("change", listener);
+    },
+    getSnapshot,
+    () => false
+  );
+}
+function DesktopShareLayout({
+  room,
+  participants,
+  shares,
+  expandedTarget,
+  onToggleExpanded
+}) {
+  const [containerRef, size] = useElementSize();
+  const firstShareDimensions = shares[0]?.publication.dimensions;
+  const firstShareAspectRatio = firstShareDimensions != null && firstShareDimensions.height > 0 ? firstShareDimensions.width / firstShareDimensions.height : 16 / 9;
+  const stripOnLeft = expandedTarget != null || shares.length !== 1 || shouldPutStripOnLeft({
+    width: size.width,
+    height: size.height,
+    aspectRatio: firstShareAspectRatio
+  });
+  const gridParticipants = expandedTarget == null ? participants : participants.filter(
+    (participant) => participant.identity === expandedTarget.identity
+  );
+  const grid = /* @__PURE__ */ jsx(
+    ParticipantCameraGrid,
+    {
+      room,
+      participants: gridParticipants,
+      preferredSource: expandedTarget?.source,
+      expandedTarget,
+      onToggleExpanded
+    }
+  );
+  if (!stripOnLeft) {
+    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex h-full min-h-0 flex-col gap-4", children: [
+      expandedTarget == null ? /* @__PURE__ */ jsx("div", { className: "h-[100px] min-h-0", children: /* @__PURE__ */ jsx(
+        CameraStrip,
+        {
+          room,
+          participants,
+          horizontal: true,
+          expandedTarget,
+          onToggleExpanded
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: grid })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex h-full min-h-0 gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: grid }),
+    expandedTarget == null ? /* @__PURE__ */ jsx("div", { className: "min-h-0 w-[250px]", children: /* @__PURE__ */ jsx(
+      CameraStrip,
+      {
+        room,
+        participants,
+        horizontal: false,
+        expandedTarget,
+        onToggleExpanded
+      }
+    ) }) : null
+  ] });
+}
+function MobileMeetingLayout({
+  room,
+  participants,
+  hasShare,
+  expandedTarget,
+  onToggleExpanded
+}) {
+  const gridParticipants = expandedTarget == null ? participants : participants.filter(
+    (participant) => participant.identity === expandedTarget.identity
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+    hasShare && expandedTarget == null ? /* @__PURE__ */ jsx("div", { className: "h-[100px] min-h-0", children: /* @__PURE__ */ jsx(
+      CameraStrip,
+      {
+        room,
+        participants,
+        horizontal: true,
+        expandedTarget,
+        onToggleExpanded
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+      ParticipantCameraGrid,
+      {
+        room,
+        participants: gridParticipants,
+        preferredSource: expandedTarget?.source,
+        expandedTarget,
+        onToggleExpanded
+      }
+    ) })
+  ] });
+}
+function MeetingStage({ controller }) {
+  const room = controller.livekitRoom;
+  useRoomSnapshot(room);
+  const [expandedTarget, setExpandedTarget] = useState(null);
+  const participants = [
+    room.localParticipant,
+    ...Array.from(room.remoteParticipants.values())
+  ];
+  const shares = screenSharePublications(participants);
+  const hasShare = shares.length > 0;
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  useEffect(() => {
+    if (expandedTarget == null) {
+      return;
+    }
+    const participant = participants.find(
+      (candidate) => candidate.identity === expandedTarget.identity
+    );
+    if (participant == null) {
+      setExpandedTarget(null);
+      return;
+    }
+    if (expandedTarget.source === TrackSource.ScreenShareVideo && activeVideoPublicationForSource(
+      participant,
+      TrackSource.ScreenShareVideo
+    ) == null) {
+      setExpandedTarget(null);
+    }
+  }, [expandedTarget, participants]);
+  const toggleExpanded = useCallback((identity, source) => {
+    setExpandedTarget(
+      (current) => current?.identity === identity && current.source === source ? null : { identity, source }
+    );
+  }, []);
+  if (hasShare) {
+    if (isMobile) {
+      return /* @__PURE__ */ jsx(
+        MobileMeetingLayout,
+        {
+          room,
+          participants,
+          hasShare,
+          expandedTarget,
+          onToggleExpanded: toggleExpanded
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DesktopShareLayout,
+      {
+        room,
+        participants,
+        shares,
+        expandedTarget,
+        onToggleExpanded: toggleExpanded
+      }
+    );
+  }
+  const gridParticipants = expandedTarget == null ? participants : participants.filter(
+    (participant) => participant.identity === expandedTarget.identity
+  );
+  return /* @__PURE__ */ jsx(
+    ParticipantCameraGrid,
+    {
+      room,
+      participants: gridParticipants,
+      preferredSource: expandedTarget?.source,
+      expandedTarget,
+      onToggleExpanded: toggleExpanded
+    }
+  );
+}
+function supportsScreenShare() {
+  return typeof navigator !== "undefined" && navigator.mediaDevices?.getDisplayMedia != null;
+}
+function ShareScreenToggle({ controller: providedController }) {
+  const controller = useMeetingController(providedController);
+  useRoomSnapshot(controller.livekitRoom);
+  const [processing, setProcessing] = useState(false);
+  const participant = controller.livekitRoom.localParticipant;
+  if (participant == null || !supportsScreenShare()) {
+    return null;
+  }
+  const sharing = participant.isScreenShareEnabled;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      title: sharing ? "Stop sharing screen" : "Share screen",
+      "aria-label": sharing ? "Stop sharing screen" : "Share screen",
+      variant: sharing ? "default" : "outline",
+      size: "icon",
+      disabled: processing,
+      className: cn(
+        "h-12 w-12",
+        sharing ? "bg-emerald-600 text-white hover:bg-emerald-700" : null
+      ),
+      onClick: () => {
+        setProcessing(true);
+        participant.setScreenShareEnabled(!sharing).catch((error) => {
+          console.warn("Unable to change screen share state", error);
+        }).finally(() => setProcessing(false));
+      },
+      children: processing ? /* @__PURE__ */ jsx(Spinner, { className: "h-5 w-5" }) : sharing ? /* @__PURE__ */ jsx(MonitorX, {}) : /* @__PURE__ */ jsx(MonitorUp, {})
+    }
+  );
+}
+function ActiveMeetingToolbar({ controller, onDisconnect }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+    /* @__PURE__ */ jsx(MeetingControls, { controller, onDisconnect, spacing: 8 }),
+    /* @__PURE__ */ jsx(ShareScreenToggle, { controller })
+  ] });
+}
+function MeetingView({ controller: providedController, onCancel }) {
+  const controller = useMeetingController(providedController);
+  const { viewState, joinMeeting } = useMeetingViewState(controller);
+  const connected = controller.livekitRoom.state !== ConnectionState.Disconnected;
+  const inPreview = viewState === "preview" || !connected;
+  if (inPreview) {
+    return /* @__PURE__ */ jsx(
+      MeetingLobby,
+      {
+        controller,
+        onCancel,
+        onJoin: joinMeeting
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-0 border-b px-5 py-3", children: /* @__PURE__ */ jsx(ActiveMeetingToolbar, { controller, onDisconnect: onCancel }) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 p-5", children: /* @__PURE__ */ jsx(MeetingStage, { controller }) })
+  ] });
+}
+export {
+  MeetingView
+};

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

@@ -1,5 +1,8 @@
 export * from "./audio-visualization";
+export * from "./camera-grid";
 export * from "./controls";
+export * from "./lobby";
 export * from "./meeting-scope";
+export * from "./meeting-view";
 export * from "./participants";
 export * from "./wake-lock";

package/dist/esm/meetings/meetings.js

@@ -1,5 +1,8 @@
 export * from "./audio-visualization";
+export * from "./camera-grid";
 export * from "./controls";
+export * from "./lobby";
 export * from "./meeting-scope";
+export * from "./meeting-view";
 export * from "./participants";
 export * from "./wake-lock";

package/dist/esm/meetings/wake-lock.js

@@ -17,13 +17,13 @@ function WakeLocker({ children }) {
   useEffect(() => {
     wakeLockRefCount += 1;
     if (wakeLockRefCount === 1) {
-      void enableWakeLock().catch(() => {
+      enableWakeLock().catch(() => {
       });
     }
     return () => {
       wakeLockRefCount = Math.max(wakeLockRefCount - 1, 0);
       if (wakeLockRefCount === 0) {
-        void disableWakeLock().catch(() => {
+        disableWakeLock().catch(() => {
         });
       }
     };