@meshagent/meshagent-tailwind 0.41.4 → 0.41.5

package/dist/esm/meetings/camera-grid.js

@@ -0,0 +1,405 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import React, { useMemo, useSyncExternalStore } from "react";
+import { Track } from "livekit-client";
+const TrackSource = {
+  Camera: Track.Source.Camera,
+  ScreenShareVideo: Track.Source.ScreenShare
+};
+function useParticipantsSnapshot(participants) {
+  useSyncExternalStore(
+    (listener) => {
+      const events = [
+        "trackPublished",
+        "trackSubscribed",
+        "trackUnpublished",
+        "trackUnsubscribed",
+        "trackMuted",
+        "trackUnmuted",
+        "localTrackPublished",
+        "localTrackUnpublished",
+        "participantNameChanged",
+        "isSpeakingChanged",
+        "attributesChanged"
+      ];
+      for (const participant of participants) {
+        for (const eventName of events) {
+          participant.on(eventName, listener);
+        }
+      }
+      return () => {
+        for (const participant of participants) {
+          for (const eventName of events) {
+            participant.off(eventName, listener);
+          }
+        }
+      };
+    },
+    () => participants.map(
+      (participant) => [
+        participant.sid,
+        participant.identity,
+        participant.isCameraEnabled,
+        participant.isScreenShareEnabled,
+        participant.isMicrophoneEnabled,
+        participant.isSpeaking,
+        participant.trackPublications.size,
+        participant.name ?? ""
+      ].join(":")
+    ).join("|"),
+    () => ""
+  );
+}
+function publicationAspectRatio(publication) {
+  const dimensions = publication?.dimensions ?? { width: 640, height: 480 };
+  return dimensions.height > 0 ? dimensions.width / dimensions.height : 4 / 3;
+}
+function layoutCameras(publications, width, height) {
+  const slots = Math.max(publications.length, 1);
+  let bestRows = 1;
+  let bestCols = slots;
+  let minWaste = Number.POSITIVE_INFINITY;
+  for (let rows = 1; rows <= slots; rows += 1) {
+    const cols = Math.ceil(slots / rows);
+    const gridAspectRatio = width / cols / (height / rows);
+    let aspectRatioWaste = 0;
+    for (const publication of publications) {
+      aspectRatioWaste += Math.abs(
+        publicationAspectRatio(publication) - gridAspectRatio
+      );
+    }
+    if (aspectRatioWaste < minWaste) {
+      minWaste = aspectRatioWaste;
+      bestRows = rows;
+      bestCols = cols;
+    }
+  }
+  return [bestRows, bestCols];
+}
+function CameraGrid({
+  participants,
+  room,
+  spacing = 0,
+  showNames = true,
+  showAllVideos = false,
+  preferredSource,
+  rowsDesired = 0,
+  columnsDesired = 0,
+  tryFill = true,
+  activeVideoPublicationForSource,
+  activeVideoPublications,
+  renderVideoTrack,
+  renderAudioStats,
+  frameBuilder
+}) {
+  useParticipantsSnapshot(participants);
+  const items = useMemo(() => {
+    if (!room) return [];
+    const hasShare = participants.some(
+      (participant) => activeVideoPublicationForSource(
+        participant,
+        TrackSource.ScreenShareVideo
+      ) != null
+    );
+    const videoSource = preferredSource ?? (hasShare ? TrackSource.ScreenShareVideo : TrackSource.Camera);
+    const shouldShowCameraPlaceholder = videoSource === TrackSource.Camera;
+    const nextItems = [];
+    for (const participant of participants) {
+      let added = false;
+      const publications = showAllVideos ? activeVideoPublications(participant) : activeVideoPublications(participant, { source: videoSource });
+      for (const publication of publications) {
+        const track = publication.videoTrack;
+        if (track == null) continue;
+        added = true;
+        nextItems.push({
+          participant,
+          publication,
+          trackNode: /* @__PURE__ */ jsx("div", { style: { pointerEvents: "none", width: "100%", height: "100%" }, children: renderVideoTrack({
+            track,
+            fit: publication.source === TrackSource.ScreenShareVideo ? "contain" : "cover",
+            publication,
+            participant
+          }) })
+        });
+      }
+      if (shouldShowCameraPlaceholder && !added) {
+        nextItems.push({
+          participant,
+          publication: null,
+          trackNode: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%",
+                background: "#222222",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: participant.identity.includes(".agent") && renderAudioStats ? renderAudioStats({ room, participant }) : null
+            }
+          )
+        });
+      }
+    }
+    return nextItems;
+  }, [
+    activeVideoPublicationForSource,
+    activeVideoPublications,
+    participants,
+    preferredSource,
+    renderAudioStats,
+    renderVideoTrack,
+    room,
+    showAllVideos
+  ]);
+  if (!room || items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+    CameraGridLayout,
+    {
+      items,
+      spacing,
+      showNames,
+      rowsDesired,
+      columnsDesired,
+      tryFill,
+      frameBuilder
+    }
+  ) });
+}
+function CameraGridLayout({
+  items,
+  spacing,
+  showNames,
+  rowsDesired,
+  columnsDesired,
+  tryFill,
+  frameBuilder
+}) {
+  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx(
+    ResponsiveAbsoluteLayout,
+    {
+      items,
+      spacing,
+      showNames,
+      rowsDesired,
+      columnsDesired,
+      tryFill,
+      frameBuilder
+    }
+  ) });
+}
+function ResponsiveAbsoluteLayout(props) {
+  const { items } = props;
+  return /* @__PURE__ */ jsx(SizeObserver, { children: ({ width, height }) => {
+    if (width <= 0 || height <= 0) return null;
+    return renderAbsoluteItems({ ...props, width, height, slots: items.length });
+  } });
+}
+function renderAbsoluteItems({
+  items,
+  spacing,
+  showNames,
+  rowsDesired,
+  columnsDesired,
+  tryFill,
+  frameBuilder,
+  width,
+  height,
+  slots
+}) {
+  const positioned = [];
+  if (rowsDesired === 0 && columnsDesired === 0) {
+    const [rows, cols] = layoutCameras(
+      items.map((item) => item.publication),
+      width,
+      height
+    );
+    const availableWidth = Math.max(width - spacing * (cols - 1), 0);
+    const availableHeight = Math.max(height - spacing * (rows - 1), 0);
+    const cellWidth = availableWidth / cols;
+    const cellHeight = availableHeight / rows;
+    for (let row = 0; row < rows; row += 1) {
+      for (let col = 0; col < cols; col += 1) {
+        const index = row * cols + col;
+        const item = items[index];
+        if (!item) break;
+        positioned.push(
+          absoluteCell({
+            key: index,
+            left: col * (cellWidth + spacing),
+            top: row * (cellHeight + spacing),
+            width: cellWidth,
+            height: cellHeight,
+            item,
+            showNames,
+            frameBuilder
+          })
+        );
+      }
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: positioned });
+  }
+  let x = 0;
+  let y = 0;
+  if (rowsDesired > 0 || columnsDesired > 0 || Math.min(width / height, height / width) > 0.5 || slots < 4 && tryFill) {
+    let rows;
+    let cols;
+    if (width < height) {
+      rows = Math.trunc(
+        rowsDesired > 0 ? rowsDesired : columnsDesired > 0 ? slots / columnsDesired : Math.ceil(Math.sqrt(slots))
+      );
+      cols = columnsDesired > 0 ? columnsDesired : Math.ceil(slots / rows);
+    } else {
+      cols = Math.trunc(
+        columnsDesired > 0 ? columnsDesired : rowsDesired > 0 ? slots / rowsDesired : Math.ceil(Math.sqrt(slots))
+      );
+      rows = rowsDesired > 0 ? rowsDesired : Math.ceil(slots / cols);
+    }
+    const cellWidth = width / cols + 1 - spacing * (cols - 1) / cols;
+    const cellHeight = height / rows - spacing * (rows - 1) / rows;
+    for (let row = 0; row < rows; row += 1) {
+      for (let col = 0; col < cols; col += 1) {
+        const index = col + row * cols;
+        const item = items[index];
+        if (!item) continue;
+        positioned.push(
+          absoluteCell({
+            key: index,
+            left: col * cellWidth + spacing * col,
+            top: row * cellHeight + spacing * row,
+            width: cellWidth,
+            height: cellHeight,
+            item,
+            showNames,
+            frameBuilder
+          })
+        );
+      }
+    }
+  } else {
+    const totalSpace = width * height;
+    let rowUsedSpace = totalSpace;
+    let rows = 1;
+    let vertRows = false;
+    for (let i = 1; i < 10; i += 0.1) {
+      const floored = Math.floor(i);
+      const itemSize = height / i;
+      const usedSpace = itemSize * itemSize * Math.max(slots, 1);
+      if (itemSize * Math.ceil(slots / floored) <= width && itemSize * floored <= height && usedSpace <= totalSpace && totalSpace - usedSpace < rowUsedSpace) {
+        rows = i;
+        rowUsedSpace = totalSpace - usedSpace;
+        vertRows = true;
+      }
+    }
+    for (let i = 1; i < 10; i += 0.1) {
+      const floored = Math.floor(i);
+      const itemSize = width / i;
+      const usedSpace = itemSize * itemSize * Math.max(slots, 1);
+      if (itemSize * Math.ceil(slots / floored) <= height && itemSize * floored <= width && usedSpace <= totalSpace && totalSpace - usedSpace < rowUsedSpace) {
+        rows = i;
+        rowUsedSpace = totalSpace - usedSpace;
+        vertRows = false;
+      }
+    }
+    if (vertRows) {
+      const itemSize = (height - spacing * rows) / rows;
+      for (let index = 0; index < items.length; index += 1) {
+        const item = items[index];
+        positioned.push(
+          absoluteCell({
+            key: index,
+            left: x,
+            top: y,
+            width: itemSize,
+            height: itemSize,
+            item,
+            showNames,
+            frameBuilder
+          })
+        );
+        x += itemSize + spacing;
+        if (x + itemSize > width) {
+          x = spacing;
+          y += itemSize + spacing;
+        }
+      }
+    } else {
+      const itemSize = (width - spacing * rows) / rows;
+      for (let index = 0; index < items.length; index += 1) {
+        const item = items[index];
+        positioned.push(
+          absoluteCell({
+            key: index,
+            left: x,
+            top: y,
+            width: itemSize,
+            height: itemSize,
+            item,
+            showNames,
+            frameBuilder
+          })
+        );
+        y += itemSize + spacing;
+        if (y + itemSize > height) {
+          y = spacing;
+          x += itemSize + spacing;
+        }
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: positioned });
+}
+function absoluteCell({
+  key,
+  left,
+  top,
+  width,
+  height,
+  item,
+  showNames,
+  frameBuilder
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left,
+        top,
+        width,
+        height,
+        overflow: "hidden"
+      },
+      children: frameBuilder({
+        participant: item.participant,
+        publication: item.publication,
+        trackNode: item.trackNode,
+        showName: showNames
+      })
+    },
+    key
+  );
+}
+function SizeObserver({ children }) {
+  const ref = React.useRef(null);
+  const [size, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  React.useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const rect = entry.contentRect;
+      setSize({ width: rect.width, height: rect.height });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, className: "absolute inset-0", children: children(size) });
+}
+export {
+  CameraGrid,
+  TrackSource
+};

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

@@ -1,8 +1,9 @@
 import type { ReactElement } from "react";
 import { Room } from "livekit-client";
 import { MeetingController } from "./meeting-scope";
-export declare function MeetingControls({ controller: providedController, spacing, }: {
+export declare function MeetingControls({ controller: providedController, onDisconnect, spacing, }: {
     controller?: MeetingController;
+    onDisconnect?: () => void;
     spacing?: number;
 }): ReactElement;
 export declare function CameraToggle({ controller }: {
@@ -11,8 +12,9 @@ export declare function CameraToggle({ controller }: {
 export declare function MicToggle({ controller }: {
     controller?: MeetingController;
 }): ReactElement | null;
-export declare function ConnectionButton({ controller }: {
+export declare function ConnectionButton({ controller, onDisconnect, }: {
     controller?: MeetingController;
+    onDisconnect?: () => void;
 }): ReactElement;
 export declare function ChangeSettings({ room }: {
     room: Room;

package/dist/esm/meetings/controls.js

@@ -36,6 +36,7 @@ function useControllerVersion(controller) {
 }
 function MeetingControls({
   controller: providedController,
+  onDisconnect,
   spacing = 5
 }) {
   const controller = useMeetingController(providedController);
@@ -47,7 +48,7 @@ function MeetingControls({
       className: "flex flex-wrap items-center justify-center",
       style: { gap: spacing },
       children: [
-        /* @__PURE__ */ jsx(ConnectionButton, { controller }),
+        /* @__PURE__ */ jsx(ConnectionButton, { controller, onDisconnect }),
         hasLocalParticipant ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(MicToggle, { controller }),
           /* @__PURE__ */ jsx(CameraToggle, { controller }),
@@ -166,7 +167,10 @@ function MicToggle({ controller }) {
     }
   );
 }
-function ConnectionButton({ controller }) {
+function ConnectionButton({
+  controller,
+  onDisconnect
+}) {
   const resolvedController = useMeetingController(controller);
   useControllerVersion(resolvedController);
   const state = resolvedController.livekitRoom.state;
@@ -178,7 +182,9 @@ function ConnectionButton({ controller }) {
         destructive: true,
         icon: /* @__PURE__ */ jsx(Phone, {}),
         onClick: () => {
-          void resolvedController.disconnect();
+          void resolvedController.disconnect().catch((error) => {
+            console.warn("unable to disconnect meeting", error);
+          }).finally(() => onDisconnect?.());
         }
       }
     );

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

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { type MeetingController, type MeetingFastConnectOptions } from "./meeting-scope";
+export interface MeetingLobbyJoinOptions {
+    enableVideo: boolean;
+    enableAudio: boolean;
+    videoUnavailable: boolean;
+    audioUnavailable: boolean;
+    videoDeviceId?: string;
+    audioDeviceId?: string;
+    audioOutputDeviceId?: string;
+}
+export declare function meetingFastConnectOptions(options: MeetingLobbyJoinOptions): MeetingFastConnectOptions;
+export declare function MeetingLobby({ controller: providedController, onCancel, onJoin, }: {
+    controller?: MeetingController;
+    onCancel?: () => void;
+    onJoin?: (options: MeetingLobbyJoinOptions) => void | Promise<void>;
+}): ReactElement;