@dxos/plugin-thread 0.8.3-staging.0fa589b → 0.8.4-main.f9ba587

package/dist/lib/node/chunk-UM36TPCT.cjs

@@ -1,984 +0,0 @@
-"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 chunk_UM36TPCT_exports = {};
-__export(chunk_UM36TPCT_exports, {
-  Call: () => Call,
-  ChannelContainer: () => ChannelContainer,
-  ChannelContainer_default: () => ChannelContainer_default
-});
-module.exports = __toCommonJS(chunk_UM36TPCT_exports);
-var import_chunk_4YSNVPWU = require("./chunk-4YSNVPWU.cjs");
-var import_chunk_E3WBZTTI = require("./chunk-E3WBZTTI.cjs");
-var import_chunk_FUXJAVFZ = require("./chunk-FUXJAVFZ.cjs");
-var import_chunk_HLMCEE5K = require("./chunk-HLMCEE5K.cjs");
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_rx_react = require("@effect-rx/rx-react");
-var import_react = __toESM(require("react"));
-var import_app_framework = require("@dxos/app-framework");
-var import_context = require("@dxos/context");
-var import_log = require("@dxos/log");
-var import_react_client = require("@dxos/react-client");
-var import_echo = require("@dxos/react-client/echo");
-var import_halo = require("@dxos/react-client/halo");
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_form = require("@dxos/react-ui-form");
-var import_react_ui_menu = require("@dxos/react-ui-menu");
-var import_react_ui_sfx = require("@dxos/react-ui-sfx");
-var import_react_ui_stack = require("@dxos/react-ui-stack");
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react2 = __toESM(require("react"));
-var import_app_framework2 = require("@dxos/app-framework");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_react3 = __toESM(require("react"));
-var import_app_framework3 = require("@dxos/app-framework");
-var import_plugin_graph = require("@dxos/plugin-graph");
-var import_echo2 = require("@dxos/react-client/echo");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_react4 = __toESM(require("react"));
-var import_tracking5 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_tracking6 = require("@preact-signals/safe-react/tracking");
-var import_react6 = __toESM(require("react"));
-var import_app_framework4 = require("@dxos/app-framework");
-var import_tracking7 = require("@preact-signals/safe-react/tracking");
-var import_react7 = __toESM(require("react"));
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_tracking8 = require("@preact-signals/safe-react/tracking");
-var import_react8 = __toESM(require("react"));
-var import_react_resize_detector = require("react-resize-detector");
-var import_invariant = require("@dxos/invariant");
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_tracking9 = require("@preact-signals/safe-react/tracking");
-var import_react9 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
-var import_react_ui_sfx2 = require("@dxos/react-ui-sfx");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_tracking10 = require("@preact-signals/safe-react/tracking");
-var import_react10 = __toESM(require("react"));
-var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { t } = (0, import_react_ui2.useTranslation)(import_chunk_HLMCEE5K.THREAD_PLUGIN);
-    const { graph } = (0, import_app_framework3.useAppGraph)();
-    const call = (0, import_app_framework3.useCapability)(import_chunk_4YSNVPWU.ThreadCapabilities.CallManager);
-    const node = (0, import_plugin_graph.useNode)(graph, channel && (0, import_echo2.fullyQualifiedId)(channel));
-    const actions = (0, import_plugin_graph.useActions)(graph, node?.id).filter((action) => action.properties.disposition === "toolbar");
-    const isScreensharing = call.media.screenshareTrack !== void 0;
-    const canSharescreen = typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getDisplayMedia !== void 0;
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: (0, import_react_ui_theme.mx)("z-20 flex justify-center m-8", autoHideControls && import_react_ui_theme.groupHoverControlItemWithTransition)
-    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Root, {
-      classNames: [
-        "p-2 bg-modalSurface rounded-md shadow-md",
-        classNames
-      ]
-    }, /* @__PURE__ */ import_react3.default.createElement(ToggleButton, {
-      active: call.media.audioEnabled,
-      state: {
-        on: {
-          icon: "ph--microphone--regular",
-          label: t("mic off"),
-          onClick: () => call.turnAudioOff(),
-          classNames: "bg-callActive"
-        },
-        off: {
-          icon: "ph--microphone-slash--duotone",
-          label: t("mic on"),
-          onClick: () => call.turnAudioOn(),
-          classNames: [
-            call.joined && "bg-callAlert"
-          ]
-        }
-      }
-    }), /* @__PURE__ */ import_react3.default.createElement(ToggleButton, {
-      active: call.media.videoEnabled,
-      state: {
-        on: {
-          icon: "ph--video-camera--regular",
-          label: t("camera off"),
-          onClick: () => call.turnVideoOff()
-        },
-        off: {
-          icon: "ph--video-camera-slash--duotone",
-          label: t("camera on"),
-          onClick: () => call.turnVideoOn()
-        }
-      }
-    }), participants !== void 0 && /* @__PURE__ */ import_react3.default.createElement("div", {
-      className: "flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued"
-    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
-      icon: "ph--users--regular",
-      size: 4
-    }), /* @__PURE__ */ import_react3.default.createElement("div", null, participants)) || /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Separator, {
-      variant: "gap"
-    }), call.joined && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(ToggleButton, {
-      disabled: !canSharescreen,
-      active: isScreensharing,
-      state: {
-        on: {
-          icon: "ph--monitor--regular",
-          label: t("screenshare off"),
-          onClick: () => call.turnScreenshareOff()
-        },
-        off: {
-          icon: "ph--monitor-arrow-up--duotone",
-          label: t("screenshare on"),
-          onClick: () => call.turnScreenshareOn()
-        }
-      }
-    }), actions.map((action) => /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.IconButton, {
-      key: action.id,
-      ...defaultButtonProps,
-      icon: action.properties.icon,
-      label: (0, import_react_ui2.toLocalizedString)(action.properties.label, t),
-      classNames: action.properties.classNames,
-      onClick: () => action.data({
-        node
-      })
-    })), /* @__PURE__ */ import_react3.default.createElement(ToggleButton, {
-      active: call.raisedHand,
-      state: {
-        on: {
-          icon: "ph--hand-waving--regular",
-          label: t("lower hand"),
-          onClick: () => call.setRaisedHand(false),
-          classNames: [
-            call.joined && "bg-callAlert"
-          ]
-        },
-        off: {
-          icon: "ph--hand-palm--duotone",
-          label: t("raise hand"),
-          onClick: () => call.setRaisedHand(true)
-        }
-      }
-    })), call.joined ? /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.IconButton, {
-      variant: "destructive",
-      icon: "ph--phone-x--regular",
-      label: t("leave call"),
-      onClick: onLeave
-    }) : /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.IconButton, {
-      variant: "primary",
-      icon: "ph--phone-incoming--regular",
-      label: t("join call"),
-      onClick: onJoin
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-Toolbar.displayName = "MeetingToolbar";
-var defaultButtonProps = {
-  size: 5,
-  iconOnly: true
-};
-var ToggleButton = ({ active, state }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.IconButton, {
-      ...defaultButtonProps,
-      classNames: [
-        active ? state.on.classNames ?? "bg-callActive" : state.off.classNames
-      ],
-      icon: active ? state.on.icon : state.off.icon,
-      label: active ? state.on.label : state.off.label,
-      onClick: active ? state.on.onClick : state.off.onClick
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var AudioStream = ({ tracks }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const mediaStreamRef = (0, import_react4.useRef)(new MediaStream());
-    const ref = (0, import_react4.useRef)(null);
-    (0, import_react4.useEffect)(() => {
-      const audio = ref.current;
-      if (!audio) {
-        return;
-      }
-      const mediaStream = mediaStreamRef.current;
-      audio.srcObject = mediaStream;
-    }, []);
-    const resetSrcObject = () => {
-      const audio = ref.current;
-      const mediaStream = mediaStreamRef.current;
-      if (!audio || !mediaStream) {
-        return;
-      }
-      audio.addEventListener("canplay", () => audio.play(), {
-        once: true
-      });
-      audio.srcObject = mediaStream;
-    };
-    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("audio", {
-      ref,
-      autoPlay: true
-    }), tracks.map((track) => /* @__PURE__ */ import_react4.default.createElement(AudioTrack, {
-      key: track.id,
-      track,
-      mediaStream: mediaStreamRef.current,
-      resetSrcObject
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var AudioTrack = ({ track, mediaStream, resetSrcObject }) => {
-  (0, import_react4.useEffect)(() => {
-    const currentTrack = track;
-    mediaStream.addTrack(currentTrack);
-    resetSrcObject();
-    return () => {
-      mediaStream.removeTrack(currentTrack);
-      resetSrcObject();
-    };
-  }, [
-    track,
-    mediaStream
-  ]);
-  return null;
-};
-var VideoObject = /* @__PURE__ */ (0, import_react5.memo)(/* @__PURE__ */ (0, import_react5.forwardRef)(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const internalRef = (0, import_react5.useRef)(null);
-    (0, import_react5.useEffect)(() => {
-      const video = internalRef.current;
-      if (video && videoStream) {
-        video.srcObject = videoStream;
-        video.setAttribute("autoplay", "true");
-        video.setAttribute("playsinline", "true");
-      }
-    }, [
-      videoStream,
-      internalRef.current
-    ]);
-    return /* @__PURE__ */ import_react5.default.createElement("video", {
-      className: (0, import_react_ui_theme2.mx)("w-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
-      ref: (v) => {
-        internalRef.current = v;
-        if (ref === null) {
-          return;
-        }
-        if (typeof ref === "function") {
-          ref(v);
-        } else {
-          ref.current = v;
-        }
-      },
-      ...rest
-    });
-  } finally {
-    _effect.f();
-  }
-}));
-VideoObject.displayName = "VideoObject";
-var ResponsiveContainer = ({ children }) => {
-  var _effect = (0, import_tracking7.useSignals)();
-  try {
-    return (
-      // Outer container that takes full size of parent.
-      /* @__PURE__ */ import_react7.default.createElement("div", {
-        role: "none",
-        className: "relative flex w-full h-full"
-      }, /* @__PURE__ */ import_react7.default.createElement("div", {
-        role: "none",
-        className: "absolute inset-0 flex justify-center items-center"
-      }, /* @__PURE__ */ import_react7.default.createElement("div", {
-        role: "none",
-        className: (0, import_react_ui_theme3.mx)("max-h-full max-w-full w-auto h-auto aspect-video")
-      }, children)))
-    );
-  } finally {
-    _effect.f();
-  }
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveGrid.tsx";
-var ASPECT_RATIO = 16 / 9;
-var MIN_GALLERY_HEIGHT = 250;
-var DEFAULT_GAP = 8;
-var maxImageSize = "w-[2560px] h-[1440px]";
-var defaultGetId = (item) => item.id;
-var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = defaultGetId, items, pinned, autoHideGallery = false, debug, onPinnedChange }) => {
-  var _effect = (0, import_tracking8.useSignals)();
-  try {
-    const { width: containerWidth = 0, height: containerHeight = 0, ref: containerRef } = (0, import_react_resize_detector.useResizeDetector)({
-      refreshRate: 100
-    });
-    const [dividerHeight, setDividerHeight] = (0, import_react8.useState)(0);
-    (0, import_react8.useEffect)(() => {
-      if (containerWidth && containerHeight) {
-        const { height: height2 } = fitAspectRatio(containerWidth, containerHeight, ASPECT_RATIO);
-        setDividerHeight(Math.min(height2, containerHeight - MIN_GALLERY_HEIGHT));
-      }
-    }, [
-      containerWidth,
-      containerHeight
-    ]);
-    const pinnedItem = (0, import_react8.useMemo)(() => items.find((item) => getId2(item) === pinned), [
-      items,
-      pinned
-    ]);
-    const mainItems = (0, import_react8.useMemo)(() => items.filter((item) => getId2(item) !== pinned), [
-      items,
-      pinned
-    ]);
-    const hideGallery = autoHideGallery && pinnedItem !== void 0;
-    const [{ time, columns, cellWidth }, setLayout] = (0, import_react8.useState)({
-      time: 0,
-      columns: 0,
-      cellWidth: 0
-    });
-    const { width = 0, height = 0, ref: gridContainerRef } = (0, import_react_resize_detector.useResizeDetector)({
-      refreshRate: 200
-    });
-    (0, import_react8.useEffect)(() => {
-      if (containerHeight && width && height) {
-        const layout = calculateLayout(width, height, mainItems.length, gap);
-        setLayout({
-          time: Date.now(),
-          ...layout
-        });
-      }
-    }, [
-      containerHeight,
-      width,
-      height,
-      mainItems.length,
-      gap,
-      pinned
-    ]);
-    const [bounds, setBounds] = (0, import_react8.useState)([]);
-    (0, import_react8.useLayoutEffect)(() => {
-      if (!hideGallery && !gridContainerRef.current || !containerHeight) {
-        return;
-      }
-      const t = setTimeout(() => {
-        setBounds(items.filter((item) => !hideGallery || item === pinnedItem).map((item) => {
-          (0, import_invariant.invariant)(containerRef.current, void 0, {
-            F: __dxlog_file,
-            L: 117,
-            S: void 0,
-            A: [
-              "containerRef.current",
-              ""
-            ]
-          });
-          const el = containerRef.current.querySelector(`[data-grid-item="${getId2(item)}"]`);
-          if (!el) {
-            return null;
-          }
-          const bounds2 = getRelativeBounds(containerRef.current, el);
-          return [
-            item,
-            bounds2
-          ];
-        }).filter((item) => item !== null));
-      });
-      return () => clearTimeout(t);
-    }, [
-      containerHeight,
-      items,
-      pinnedItem,
-      hideGallery,
-      time
-    ]);
-    const handleClick = (0, import_react8.useCallback)((item) => onPinnedChange?.(getId2(item) === pinned ? void 0 : getId2(item)), [
-      pinned,
-      onPinnedChange
-    ]);
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      ref: containerRef,
-      className: (0, import_react_ui_theme4.mx)("relative w-full h-full", classNames)
-    }, /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: "absolute inset-0 flex flex-col grow gap-2"
-    }, pinnedItem && /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: (0, import_react_ui_theme4.mx)("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "h-full"),
-      style: hideGallery ? {} : {
-        height: dividerHeight
-      }
-    }, /* @__PURE__ */ import_react8.default.createElement(SoloItem, {
-      id: getId2(pinnedItem),
-      debug
-    })), !hideGallery && /* @__PURE__ */ import_react8.default.createElement("div", {
-      ref: gridContainerRef,
-      className: "flex grow-[1] overflow-hidden justify-center items-center",
-      style: hideGallery ? {} : {
-        minHeight: MIN_GALLERY_HEIGHT
-      }
-    }, mainItems.length === 1 && /* @__PURE__ */ import_react8.default.createElement("div", {
-      style: {
-        width: cellWidth
-      },
-      className: "flex h-full"
-    }, /* @__PURE__ */ import_react8.default.createElement(SoloItem, {
-      id: getId2(mainItems[0]),
-      debug
-    })), mainItems.length > 1 && columns > 0 && /* @__PURE__ */ import_react8.default.createElement("div", {
-      role: "grid",
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
-        gap: `${gap}px`
-      }
-    }, mainItems.map((item) => /* @__PURE__ */ import_react8.default.createElement("div", {
-      key: getId2(item),
-      "data-grid-item": getId2(item),
-      className: (0, import_react_ui_theme4.mx)("aspect-video max-h-full max-w-full w-auto h-auto", debug && "border border-primary-500")
-    }))))), /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: (0, import_react_ui_theme4.mx)(debug && "opacity-10")
-    }, bounds.map(([item, bounds2]) => /* @__PURE__ */ import_react8.default.createElement(Cell, {
-      key: getId2(item),
-      classNames: "absolute transition-all duration-500",
-      item,
-      style: bounds2,
-      pinned: getId2(item) === pinned,
-      onClick: items.length > 1 ? handleClick : void 0
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var SoloItem = ({ debug, id }) => {
-  var _effect = (0, import_tracking8.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react8.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react8.default.createElement("div", {
-      "data-grid-item": id,
-      className: (0, import_react_ui_theme4.mx)("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
-    }, /* @__PURE__ */ import_react8.default.createElement("img", {
-      alt: "placeholder video",
-      className: (0, import_react_ui_theme4.mx)("opacity-0", maxImageSize)
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var getRelativeBounds = (container, el) => {
-  const containerRect = container.getBoundingClientRect();
-  const elementRect = el.getBoundingClientRect();
-  return {
-    top: elementRect.top - containerRect.top,
-    left: elementRect.left - containerRect.left,
-    width: elementRect.width,
-    height: elementRect.height
-  };
-};
-var calculateLayout = (containerWidth, containerHeight, count, gap, aspectRatio = ASPECT_RATIO) => {
-  if (count === 0) {
-    return {
-      columns: 1,
-      cellWidth: 1
-    };
-  }
-  let minWastedSpace = Infinity;
-  let bestColumns = 1;
-  let cellWidth = 0;
-  for (let rows = 1; rows <= count; rows++) {
-    const cols = Math.ceil(count / rows);
-    const { width: itemWidth, height: itemHeight } = fitItemsToGrid(containerWidth, containerHeight, cols, rows, aspectRatio, gap);
-    const usedWidth = itemWidth * cols + gap * cols - 1;
-    const usedHeight = itemHeight * rows + gap * rows - 1;
-    const wastedSpace = containerWidth * containerHeight - usedWidth * usedHeight;
-    if (wastedSpace < minWastedSpace) {
-      minWastedSpace = wastedSpace;
-      bestColumns = cols;
-      cellWidth = itemWidth;
-    }
-  }
-  return {
-    columns: bestColumns,
-    cellWidth
-  };
-};
-var fitItemsToGrid = (outerWidth, outerHeight, numCols, numRows, aspectRatio, gap) => {
-  const availableWidth = outerWidth - gap * (numCols - 1);
-  const availableHeight = outerHeight - gap * (numRows - 1);
-  const maxCellWidth = availableWidth / numCols;
-  const maxCellHeight = availableHeight / numRows;
-  return fitAspectRatio(maxCellWidth, maxCellHeight, aspectRatio);
-};
-var fitAspectRatio = (outerWidth, outerHeight, aspectRatio) => {
-  if (outerWidth <= 0 || outerHeight <= 0 || aspectRatio <= 0) {
-    return {
-      width: 0,
-      height: 0
-    };
-  }
-  let width = outerWidth;
-  let height = width / aspectRatio;
-  if (height > outerHeight) {
-    height = outerHeight;
-    width = height * aspectRatio;
-  }
-  return {
-    width,
-    height
-  };
-};
-var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinned, screenshare, video, mute, wave, speaking, onClick }) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const { t } = (0, import_react_ui3.useTranslation)(import_chunk_HLMCEE5K.THREAD_PLUGIN);
-    const iconProps = {
-      wave: {
-        icon: "ph--hand-waving--duotone",
-        label: t("icon wave"),
-        classNames: "animate-pulse bg-orange-500"
-      },
-      mute: {
-        icon: "ph--microphone-slash--regular",
-        label: t("icon muted")
-      }
-    };
-    const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : void 0;
-    const [speakingIndicator, setSpeakingIndicator] = (0, import_react9.useState)(speaking);
-    (0, import_react9.useEffect)(() => {
-      if (speaking) {
-        setSpeakingIndicator(true);
-      } else {
-        const timeout = setTimeout(() => {
-          setSpeakingIndicator(false);
-        }, 1e3);
-        return () => clearTimeout(timeout);
-      }
-    }, [
-      speaking
-    ]);
-    return /* @__PURE__ */ import_react9.default.createElement("div", {
-      className: (0, import_react_ui_theme5.mx)("relative w-full h-full group", "rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500", speakingIndicator ? "outline-green-500" : !video && "outline-separator", classNames),
-      style
-    }, children, onClick && /* @__PURE__ */ import_react9.default.createElement("div", {
-      className: "z-10 absolute top-1 right-1 flex"
-    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.IconButton, {
-      classNames: (0, import_react_ui_theme5.mx)("p-1 min-bs-1 rounded", import_react_ui_theme5.groupHoverControlItemWithTransition),
-      iconOnly: true,
-      icon: pinned ? "ph--x--regular" : "ph--arrows-out--regular",
-      size: pinned ? 5 : 4,
-      label: pinned ? t("icon unpin") : t("icon pin"),
-      onClick: () => onClick?.(item)
-    })), name && /* @__PURE__ */ import_react9.default.createElement("div", {
-      className: "z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center"
-    }, screenshare && /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-      icon: "ph--broadcast--regular",
-      size: pinned ? 5 : 4
-    }), /* @__PURE__ */ import_react9.default.createElement("div", {
-      className: (0, import_react_ui_theme5.mx)("bg-neutral-800 text-neutral-100 py-0.5 truncate rounded", pinned ? "px-2" : "px-1 text-xs")
-    }, name)), /* @__PURE__ */ import_react9.default.createElement("div", {
-      className: "z-10 absolute bottom-1 left-1 flex"
-    }, speaking && /* @__PURE__ */ import_react9.default.createElement(import_react_ui_sfx2.Waveform, {
-      active: true,
-      size: pinned ? 5 : 4
-    }) || props && /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.IconButton, {
-      classNames: (0, import_react_ui_theme5.mx)("p-1 min-bs-1 rounded", props?.classNames),
-      icon: props?.icon,
-      label: props?.label,
-      size: pinned ? 5 : 4,
-      iconOnly: true
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var SCREENSHARE_SUFFIX = "_screenshare";
-var Participant = /* @__PURE__ */ (0, import_react6.memo)(({ item: user, debug, ...props }) => {
-  var _effect = (0, import_tracking6.useSignals)();
-  try {
-    const call = (0, import_app_framework4.useCapability)(import_chunk_4YSNVPWU.ThreadCapabilities.CallManager);
-    const isSelf = call.self.id !== void 0 && user.id !== void 0 && user.id.startsWith(call.self.id);
-    const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
-    const pulledVideoStream = call.getVideoStream(isScreenshare || !isSelf ? user.tracks?.video : void 0);
-    const videoStream = (0, import_react6.useMemo)(() => {
-      if (isSelf && !isScreenshare) {
-        return call.media.videoStream;
-      } else if (isSelf && isScreenshare) {
-        return call.media.screenshareVideoStream;
-      } else if (!isSelf) {
-        return pulledVideoStream;
-      }
-    }, [
-      isSelf,
-      isScreenshare,
-      call.media.videoStream,
-      call.media.screenshareVideoStream,
-      pulledVideoStream
-    ]);
-    return /* @__PURE__ */ import_react6.default.createElement(ResponsiveGridItem, {
-      ...props,
-      item: user,
-      name: user.name,
-      self: isSelf,
-      screenshare: !!call.media.screenshareVideoStream,
-      video: call.media.videoEnabled,
-      mute: user ? !user.tracks?.audioEnabled : false,
-      wave: user.raisedHand,
-      speaking: user.speaking,
-      debug
-    }, /* @__PURE__ */ import_react6.default.createElement(VideoObject, {
-      videoStream,
-      flip: isSelf && !isScreenshare,
-      contain: !!isScreenshare,
-      classNames: "rounded-md"
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-Participant.displayName = "Participant";
-var getId = (user) => user.id;
-var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
-  var _effect = (0, import_tracking10.useSignals)();
-  try {
-    const [pinned, setPinned] = (0, import_react10.useState)();
-    const allUsers = (0, import_react10.useMemo)(() => {
-      const allUsers2 = [];
-      users.forEach((user) => {
-        if (!user.joined) {
-          return;
-        }
-        allUsers2.push({
-          ...user,
-          isSelf: user.id === self.id
-        });
-        if (user.tracks?.screenshareEnabled) {
-          const screenshare = {
-            ...user,
-            id: user.id + SCREENSHARE_SUFFIX,
-            tracks: {
-              ...user.tracks,
-              video: user.tracks.screenshare,
-              videoEnabled: user.tracks.screenshareEnabled
-            }
-          };
-          allUsers2.push(screenshare);
-        }
-      });
-      return allUsers2;
-    }, [
-      self,
-      users
-    ]);
-    (0, import_react10.useEffect)(() => {
-      if (pinned) {
-        if (!allUsers.find((user) => user.id === pinned)) {
-          setPinned(void 0);
-        }
-      }
-    }, [
-      pinned,
-      allUsers
-    ]);
-    const sortedUsers = allUsers.sort((a, b) => {
-      if (a.isSelf) {
-        return 1;
-      } else if (b.isSelf) {
-        return -1;
-      } else if (a.tracks?.screenshareEnabled) {
-        return -1;
-      } else if (b.tracks?.screenshareEnabled) {
-        return 1;
-      } else {
-        return 0;
-      }
-    });
-    return /* @__PURE__ */ import_react10.default.createElement(ResponsiveGrid, {
-      classNames,
-      Cell: Participant,
-      debug,
-      getId,
-      items: sortedUsers,
-      pinned,
-      autoHideGallery: fullscreen,
-      onPinnedChange: setPinned
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var CallRoot = ({ children }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
-      className: "relative flex flex-col grow overflow-hidden"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-CallRoot.displayName = "CallRoot";
-var CallAudio = () => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const call = (0, import_app_framework2.useCapability)(import_chunk_4YSNVPWU.ThreadCapabilities.CallManager);
-    return /* @__PURE__ */ import_react2.default.createElement(AudioStream, {
-      tracks: call.pulledAudioTracks
-    });
-  } finally {
-    _effect.f();
-  }
-};
-CallAudio.displayName = "CallAudio";
-var CallGrid = ({ fullscreen }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const debug = (0, import_chunk_FUXJAVFZ.useDebugMode)();
-    const call = (0, import_app_framework2.useCapability)(import_chunk_4YSNVPWU.ThreadCapabilities.CallManager);
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
-      className: "grid grow p-4 dark:bg-neutral-900"
-    }, /* @__PURE__ */ import_react2.default.createElement(ParticipantGrid, {
-      self: call.self,
-      users: call.users,
-      debug,
-      fullscreen
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-CallGrid.displayName = "CallGrid";
-var CallToolbar = (props) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
-      className: "absolute bottom-0 left-0 right-0 flex justify-center"
-    }, /* @__PURE__ */ import_react2.default.createElement(Toolbar, {
-      isInRoom: true,
-      ...props
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-CallToolbar.displayName = "CallToolbar";
-var Call = {
-  Root: CallRoot,
-  Grid: CallGrid,
-  Audio: CallAudio,
-  Toolbar: CallToolbar
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-thread/src/components/ChannelContainer.tsx";
-var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const space = (0, import_echo.getSpace)(channel);
-    const callManager = (0, import_app_framework.useCapability)(import_chunk_4YSNVPWU.ThreadCapabilities.CallManager);
-    const roomId = channel ? (0, import_echo.fullyQualifiedId)(channel) : _roomId;
-    const identity = (0, import_halo.useIdentity)();
-    const isNamed = !!identity?.profile?.displayName;
-    const joinSound = (0, import_react_ui_sfx.useSoundEffect)("JoinCall");
-    const leaveSound = (0, import_react_ui_sfx.useSoundEffect)("LeaveCall");
-    const extensions = (0, import_app_framework.useCapabilities)(import_chunk_4YSNVPWU.ThreadCapabilities.CallExtension);
-    (0, import_react.useEffect)(() => {
-      const ctx = new import_context.Context(void 0, {
-        F: __dxlog_file2,
-        L: 47
-      });
-      callManager.left.on(ctx, (roomId2) => {
-        extensions.forEach((extension) => {
-          void extension.onLeave?.(roomId2);
-        });
-      });
-      callManager.callStateUpdated.on(ctx, (state) => {
-        extensions.forEach((extension) => {
-          void extension.onCallStateUpdated?.(state);
-        });
-      });
-      callManager.mediaStateUpdated.on(ctx, (state) => {
-        extensions.forEach((extension) => {
-          void extension.onMediaStateUpdated?.(state);
-        });
-      });
-      return () => {
-        void ctx.dispose();
-      };
-    }, [
-      callManager,
-      extensions
-    ]);
-    const handleJoin = (0, import_react.useCallback)(async () => {
-      if (!roomId || !channel) {
-        return;
-      }
-      if (callManager.joined) {
-        await callManager.leave();
-      }
-      try {
-        void joinSound.play();
-        callManager.setRoomId(roomId);
-        await callManager.join();
-        await Promise.all(extensions.map((extension) => extension.onJoin?.({
-          channel,
-          roomId
-        })));
-      } catch (err) {
-        import_log.log.catch(err, void 0, {
-          F: __dxlog_file2,
-          L: 91,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    }, [
-      extensions,
-      channel,
-      roomId
-    ]);
-    const handleLeave = (0, import_react.useCallback)(async () => {
-      try {
-        void leaveSound.play();
-      } catch (err) {
-        import_log.log.catch(err, void 0, {
-          F: __dxlog_file2,
-          L: 103,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      } finally {
-        void callManager.turnAudioOff();
-        void callManager.turnVideoOff();
-        void callManager.turnScreenshareOff();
-        void callManager.leave();
-      }
-    }, [
-      extensions,
-      roomId
-    ]);
-    const isJoined = callManager.joined && callManager.roomId === roomId;
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui_stack.StackItem.Content, {
-      toolbar: !isJoined,
-      classNames: isJoined && "h-full"
-    }, isJoined && !isNamed && /* @__PURE__ */ import_react.default.createElement(DisplayNameMissing, null), isJoined && isNamed && /* @__PURE__ */ import_react.default.createElement(Call.Root, null, /* @__PURE__ */ import_react.default.createElement(Call.Grid, {
-      fullscreen
-    }), /* @__PURE__ */ import_react.default.createElement(Call.Toolbar, {
-      channel,
-      onLeave: handleLeave
-    })), !isJoined && channel && channel.defaultThread.target && space && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(ChannelToolbar, {
-      attendableId: (0, import_echo.fullyQualifiedId)(channel),
-      role,
-      onJoinCall: handleJoin
-    }), /* @__PURE__ */ import_react.default.createElement(import_chunk_E3WBZTTI.ChatContainer_default, {
-      space,
-      thread: channel.defaultThread.target
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var ChannelContainer_default = ChannelContainer;
-var DisplayNameMissing = () => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { t } = (0, import_react_ui.useTranslation)(import_chunk_HLMCEE5K.THREAD_PLUGIN);
-    const client = (0, import_react_client.useClient)();
-    const [displayName, setDisplayName] = (0, import_react.useState)("");
-    const handleChange = (0, import_react.useCallback)((event) => setDisplayName(event.target.value), []);
-    const handleSave = (0, import_react.useCallback)(() => client.halo.updateProfile({
-      displayName
-    }), [
-      client,
-      displayName
-    ]);
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui_form.ControlGroup, {
-      classNames: "p-4 place-content-center"
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_form.ControlItemInput, {
-      title: t("display name label"),
-      description: t("display name description")
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
-      value: displayName,
-      onChange: handleChange,
-      placeholder: t("display name input placeholder"),
-      classNames: "md:min-is-64"
-    })), /* @__PURE__ */ import_react.default.createElement(import_react_ui_form.ControlGroupButton, {
-      disabled: !displayName,
-      onClick: handleSave
-    }, t("set display name label")));
-  } finally {
-    _effect.f();
-  }
-};
-var useChannelToolbarActions = (onJoinCall) => {
-  const creator = (0, import_react.useMemo)(() => import_rx_react.Rx.make(() => {
-    return {
-      nodes: [
-        (0, import_react_ui_menu.createMenuItemGroup)("root", {
-          label: [
-            "channel toolbar title",
-            {
-              ns: import_chunk_HLMCEE5K.THREAD_PLUGIN
-            }
-          ]
-        }),
-        (0, import_react_ui_menu.createMenuAction)("video-call", () => onJoinCall?.(), {
-          label: [
-            "start video call label",
-            {
-              ns: import_chunk_HLMCEE5K.THREAD_PLUGIN
-            }
-          ],
-          icon: "ph--video-camera--regular",
-          type: "video-call"
-        })
-      ],
-      edges: [
-        {
-          source: "root",
-          target: "video-call"
-        }
-      ]
-    };
-  }), []);
-  return (0, import_react_ui_menu.useMenuActions)(creator);
-};
-var ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const menuProps = useChannelToolbarActions(onJoinCall);
-    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.ElevationProvider, {
-      elevation: role === "section" ? "positioned" : "base"
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.MenuProvider, {
-      ...menuProps,
-      attendableId
-    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_menu.ToolbarMenu, {
-      classNames
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Call,
-  ChannelContainer,
-  ChannelContainer_default
-});
-//# sourceMappingURL=chunk-UM36TPCT.cjs.map