@meshagent/meshagent-tailwind 0.41.4 → 0.41.6

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

@@ -0,0 +1,435 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var camera_grid_exports = {};
+__export(camera_grid_exports, {
+  CameraGrid: () => CameraGrid,
+  TrackSource: () => TrackSource
+});
+module.exports = __toCommonJS(camera_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_livekit_client = require("livekit-client");
+const TrackSource = {
+  Camera: import_livekit_client.Track.Source.Camera,
+  ScreenShareVideo: import_livekit_client.Track.Source.ScreenShare
+};
+function useParticipantsSnapshot(participants) {
+  (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CameraGridLayout,
+    {
+      items,
+      spacing,
+      showNames,
+      rowsDesired,
+      columnsDesired,
+      tryFill,
+      frameBuilder
+    }
+  ) });
+}
+function CameraGridLayout({
+  items,
+  spacing,
+  showNames,
+  rowsDesired,
+  columnsDesired,
+  tryFill,
+  frameBuilder
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ResponsiveAbsoluteLayout,
+    {
+      items,
+      spacing,
+      showNames,
+      rowsDesired,
+      columnsDesired,
+      tryFill,
+      frameBuilder
+    }
+  ) });
+}
+function ResponsiveAbsoluteLayout(props) {
+  const { items } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: positioned });
+}
+function absoluteCell({
+  key,
+  left,
+  top,
+  width,
+  height,
+  item,
+  showNames,
+  frameBuilder
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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 = import_react.default.useRef(null);
+  const [size, setSize] = import_react.default.useState({
+    width: 0,
+    height: 0
+  });
+  import_react.default.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__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "absolute inset-0", children: children(size) });
+}

package/dist/cjs/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/cjs/meetings/controls.js

@@ -49,6 +49,7 @@ function useControllerVersion(controller) {
 }
 function MeetingControls({
   controller: providedController,
+  onDisconnect,
   spacing = 5
 }) {
   const controller = (0, import_meeting_scope.useMeetingController)(providedController);
@@ -60,7 +61,7 @@ function MeetingControls({
       className: "flex flex-wrap items-center justify-center",
       style: { gap: spacing },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionButton, { controller }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectionButton, { controller, onDisconnect }),
         hasLocalParticipant ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MicToggle, { controller }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CameraToggle, { controller }),
@@ -179,7 +180,10 @@ function MicToggle({ controller }) {
     }
   );
 }
-function ConnectionButton({ controller }) {
+function ConnectionButton({
+  controller,
+  onDisconnect
+}) {
   const resolvedController = (0, import_meeting_scope.useMeetingController)(controller);
   useControllerVersion(resolvedController);
   const state = resolvedController.livekitRoom.state;
@@ -191,7 +195,9 @@ function ConnectionButton({ controller }) {
         destructive: true,
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Phone, {}),
         onClick: () => {
-          void resolvedController.disconnect();
+          void resolvedController.disconnect().catch((error) => {
+            console.warn("unable to disconnect meeting", error);
+          }).finally(() => onDisconnect?.());
         }
       }
     );

package/dist/cjs/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;