@dxos/plugin-thread 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/lib/node/chunk-6B3M6XRE.cjs

@@ -0,0 +1,984 @@
+"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_6B3M6XRE_exports = {};
+__export(chunk_6B3M6XRE_exports, {
+  Call: () => Call,
+  ChannelContainer: () => ChannelContainer,
+  ChannelContainer_default: () => ChannelContainer_default
+});
+module.exports = __toCommonJS(chunk_6B3M6XRE_exports);
+var import_chunk_4YSNVPWU = require("./chunk-4YSNVPWU.cjs");
+var import_chunk_4B3PPXA6 = require("./chunk-4B3PPXA6.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.hoverableHidden)
+    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Root, {
+      classNames: [
+        "p-2 bg-modalSurface rounded-lg shadow-lg",
+        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.hoverableHidden),
+      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_4B3PPXA6.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(() => {
+    const nodes = [];
+    const edges = [];
+    const rootGroup = (0, import_react_ui_menu.createMenuItemGroup)("root", {
+      label: [
+        "channel toolbar title",
+        {
+          ns: import_chunk_HLMCEE5K.THREAD_PLUGIN
+        }
+      ]
+    });
+    nodes.push(rootGroup);
+    const sortAction = (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"
+    });
+    nodes.push(sortAction);
+    edges.push({
+      source: "root",
+      target: sortAction.id
+    });
+    return {
+      nodes,
+      edges
+    };
+  }), []);
+  return (0, import_react_ui_menu.useMenuActions)(creator);
+};
+var ChannelToolbar = ({ attendableId, role, onJoinCall }) => {
+  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, null)));
+  } finally {
+    _effect.f();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Call,
+  ChannelContainer,
+  ChannelContainer_default
+});
+//# sourceMappingURL=chunk-6B3M6XRE.cjs.map