@100mslive/roomkit-react 0.3.24-alpha.0 → 0.3.24-alpha.2

package/dist/chunk-U4SQBXPZ.js

@@ -1,830 +0,0 @@
-import {
-  useSidepaneResetOnLayoutUpdate
-} from "./chunk-LXJGCRKM.js";
-import {
-  Accordion,
-  Button,
-  ConnectionIndicator,
-  HorizontalDivider,
-  Input,
-  RoleChangeModal,
-  useIsSidepaneTypeOpen,
-  useSidepaneToggle
-} from "./chunk-MG3UGW66.js";
-import {
-  Text
-} from "./chunk-MUKUP7JU.js";
-import {
-  Dropdown,
-  ToastManager,
-  useParticipants
-} from "./chunk-DANANDDE.js";
-import {
-  Box,
-  Flex
-} from "./chunk-GOXRTCTY.js";
-import {
-  IconButton_default,
-  getFormattedCount,
-  getMetadata,
-  textEllipsis,
-  useRoomLayoutConferencingScreen
-} from "./chunk-BGSYLCVD.js";
-import {
-  SIDE_PANE_OPTIONS,
-  __async,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/Footer/ParticipantList.tsx
-init_define_process_env();
-import React4, { Fragment, useCallback, useState as useState3 } from "react";
-import { useDebounce, useMedia } from "react-use";
-import {
-  HMSPeerType,
-  selectAvailableRoleNames,
-  selectHandRaisedPeers,
-  selectHasPeerHandRaised,
-  selectIsLargeRoom as selectIsLargeRoom2,
-  selectIsPeerAudioEnabled,
-  selectLocalPeerID as selectLocalPeerID2,
-  selectPeerCount,
-  selectPermissions as selectPermissions5,
-  useHMSStore as useHMSStore6
-} from "@100mslive/react-sdk";
-import {
-  AddIcon as AddIcon2,
-  CallIcon,
-  ChangeRoleIcon,
-  CrossIcon as CrossIcon2,
-  HandIcon,
-  MicOffIcon as MicOffIcon2,
-  PeopleIcon,
-  PersonSettingsIcon,
-  SearchIcon,
-  VerticalMenuIcon as VerticalMenuIcon2
-} from "@100mslive/react-icons";
-
-// src/Prebuilt/components/RemoveParticipant.tsx
-init_define_process_env();
-import React from "react";
-import { selectLocalPeerID, selectPermissions, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
-import { PeopleRemoveIcon } from "@100mslive/react-icons";
-var RemoveParticipant = ({ peerId }) => {
-  var _a;
-  const canRemoveOthers = (_a = useHMSStore(selectPermissions)) == null ? void 0 : _a.removeOthers;
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const actions = useHMSActions();
-  if (peerId === localPeerId || !canRemoveOthers) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    Dropdown.Item,
-    {
-      css: { color: "$alert_error_default", bg: "$surface_default" },
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          yield actions.removePeer(peerId, "");
-        } catch (error) {
-          const ex = error;
-          ToastManager.addToast({ title: ex.message, variant: "error" });
-        }
-      })
-    },
-    /* @__PURE__ */ React.createElement(PeopleRemoveIcon, null),
-    /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, "Remove Participant")
-  );
-};
-
-// src/Prebuilt/components/Footer/RoleAccordion.tsx
-init_define_process_env();
-import React3, { useEffect } from "react";
-import { useMeasure } from "react-use";
-import { FixedSizeList } from "react-window";
-import { selectIsLargeRoom, useHMSStore as useHMSStore4, usePaginatedParticipants } from "@100mslive/react-sdk";
-import { AddIcon, ChevronRightIcon, CrossIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Footer/RoleOptions.tsx
-init_define_process_env();
-import React2, { useState } from "react";
-import { match } from "ts-pattern";
-import {
-  selectPermissions as selectPermissions2,
-  selectRoleByRoleName,
-  selectTracksMap,
-  useHMSActions as useHMSActions2,
-  useHMSStore as useHMSStore2
-} from "@100mslive/react-sdk";
-import {
-  MicOffIcon,
-  MicOnIcon,
-  PersonRectangleIcon,
-  RemoveUserIcon,
-  VerticalMenuIcon,
-  VideoOffIcon,
-  VideoOnIcon
-} from "@100mslive/react-icons";
-var dropdownItemCSS = { backgroundColor: "$surface_default", gap: "$4", p: "$8" };
-var optionTextCSS = {
-  fontWeight: "$semiBold",
-  color: "$on_surface_high",
-  textTransform: "none",
-  whiteSpace: "nowrap"
-};
-var DropdownWrapper = ({ children }) => {
-  const [openOptions, setOpenOptions] = useState(false);
-  if (React2.Children.toArray(children).length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Dropdown.Root, { open: openOptions, onOpenChange: setOpenOptions }, /* @__PURE__ */ React2.createElement(
-    Dropdown.Trigger,
-    {
-      "data-testid": "role_group_options",
-      onClick: (e) => e.stopPropagation(),
-      className: "role_actions",
-      asChild: true,
-      css: {
-        p: "$1",
-        r: "$0",
-        c: "$on_surface_high",
-        visibility: openOptions ? "visible" : "hidden",
-        "&:hover": {
-          c: "$on_surface_medium"
-        },
-        "@md": {
-          visibility: "visible"
-        }
-      }
-    },
-    /* @__PURE__ */ React2.createElement(Flex, null, /* @__PURE__ */ React2.createElement(VerticalMenuIcon, null))
-  ), /* @__PURE__ */ React2.createElement(
-    Dropdown.Content,
-    {
-      onClick: (e) => e.stopPropagation(),
-      css: { w: "max-content", bg: "$surface_default", py: 0 },
-      align: "end"
-    },
-    children
-  ));
-};
-var RoleOptions = ({ roleName, peerList }) => {
-  const permissions = useHMSStore2(selectPermissions2);
-  const hmsActions = useHMSActions2();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
-  const canRemoveRoleFromStage = (permissions == null ? void 0 : permissions.changeRole) && roleName === on_stage_role;
-  const role = useHMSStore2(selectRoleByRoleName(roleName));
-  const tracks = useHMSStore2(selectTracksMap);
-  if (!role) {
-    return null;
-  }
-  const canPublishAudio = role.publishParams.allowed.includes("audio");
-  const canPublishVideo = role.publishParams.allowed.includes("video");
-  let isVideoOnForSomePeers = false;
-  let isAudioOnForSomePeers = false;
-  peerList.forEach((peer) => {
-    var _a, _b;
-    if (peer.isLocal) {
-      return;
-    }
-    const isAudioOn = !!peer.audioTrack && ((_a = tracks[peer.audioTrack]) == null ? void 0 : _a.enabled);
-    const isVideoOn = !!peer.videoTrack && ((_b = tracks[peer.videoTrack]) == null ? void 0 : _b.enabled);
-    isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
-    isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
-  });
-  const setTrackEnabled = (type, enabled = false) => __async(void 0, null, function* () {
-    try {
-      yield hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: "regular", type, enabled });
-    } catch (e) {
-      console.error(e);
-    }
-  });
-  const canRemoveRoleFromRoom = (permissions == null ? void 0 : permissions.removeOthers) && (on_stage_role === roleName || (off_stage_roles == null ? void 0 : off_stage_roles.includes(roleName)));
-  if (peerList.length === 0 || // if only local peer is present no need to show any options
-  peerList.length === 1 && peerList[0].isLocal || !role) {
-    return null;
-  }
-  const removeAllFromStage = () => {
-    peerList.forEach((peer) => {
-      const prevRole = getMetadata(peer.metadata).prevRole;
-      if (prevRole) {
-        hmsActions.changeRoleOfPeer(peer.id, prevRole, true);
-      }
-    });
-  };
-  const removePeersFromRoom = () => __async(void 0, null, function* () {
-    try {
-      peerList.forEach((peer) => __async(void 0, null, function* () {
-        yield hmsActions.removePeer(peer.id, "");
-      }));
-    } catch (e) {
-      console.error(e);
-    }
-  });
-  return /* @__PURE__ */ React2.createElement(DropdownWrapper, null, canRemoveRoleFromStage ? /* @__PURE__ */ React2.createElement(
-    Dropdown.Item,
-    {
-      css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderBottom: "1px solid $border_bright" }),
-      onClick: removeAllFromStage
-    },
-    /* @__PURE__ */ React2.createElement(PersonRectangleIcon, null),
-    /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: optionTextCSS }, "Remove all from Stage")
-  ) : null, match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions == null ? void 0 : permissions.mute, canUnmute: permissions == null ? void 0 : permissions.unmute }).with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
-    return /* @__PURE__ */ React2.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", false) }, /* @__PURE__ */ React2.createElement(MicOffIcon, null), /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Audio for All"));
-  }).with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
-    return /* @__PURE__ */ React2.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("audio", true) }, /* @__PURE__ */ React2.createElement(MicOnIcon, null), /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Audio for All"));
-  }).otherwise(() => null), match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions == null ? void 0 : permissions.mute, canUnmute: permissions == null ? void 0 : permissions.unmute }).with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
-    return /* @__PURE__ */ React2.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", false) }, /* @__PURE__ */ React2.createElement(VideoOffIcon, null), /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: optionTextCSS }, "Mute Video for All"));
-  }).with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
-    return /* @__PURE__ */ React2.createElement(Dropdown.Item, { css: dropdownItemCSS, onClick: () => setTrackEnabled("video", true) }, /* @__PURE__ */ React2.createElement(VideoOnIcon, null), /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: optionTextCSS }, "Request to Unmute Video for All"));
-  }).otherwise(() => null), canRemoveRoleFromRoom ? /* @__PURE__ */ React2.createElement(
-    Dropdown.Item,
-    {
-      css: __spreadProps(__spreadValues({}, dropdownItemCSS), { borderTop: "1px solid $border_bright", color: "$alert_error_default" }),
-      onClick: removePeersFromRoom
-    },
-    /* @__PURE__ */ React2.createElement(RemoveUserIcon, null),
-    /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: __spreadProps(__spreadValues({}, optionTextCSS), { color: "inherit" }) }, "Remove all from Room")
-  ) : null);
-};
-
-// src/Prebuilt/components/hooks/useGroupOnStageActions.tsx
-init_define_process_env();
-import { match as match2, P } from "ts-pattern";
-import { selectPermissions as selectPermissions3, useHMSActions as useHMSActions3, useHMSStore as useHMSStore3 } from "@100mslive/react-sdk";
-var useGroupOnStageActions = ({ peers }) => {
-  var _a;
-  const hmsActions = useHMSActions3();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const {
-    bring_to_stage_label,
-    remove_from_stage_label,
-    on_stage_role,
-    off_stage_roles = [],
-    skip_preview_for_role_change = false
-  } = elements.on_stage_exp || {};
-  const canChangeRole = (_a = useHMSStore3(selectPermissions3)) == null ? void 0 : _a.changeRole;
-  const offStageRolePeers = peers.filter(
-    (peer) => match2({ on_stage_role, bring_to_stage_label, roleName: peer.roleName }).with(
-      {
-        on_stage_role: P.when((role) => !!role),
-        bring_to_stage_label: P.when((label) => !!label),
-        roleName: P.when((role) => !!role && off_stage_roles.includes(role))
-      },
-      () => true
-    ).otherwise(() => false)
-  );
-  const lowerAllHands = () => __async(void 0, null, function* () {
-    return Promise.all(peers.map((peer) => hmsActions.lowerRemotePeerHand(peer.id)));
-  });
-  const bringAllToStage = () => {
-    if (!canChangeRole || !on_stage_role) {
-      return;
-    }
-    return Promise.all(
-      offStageRolePeers.map((peer) => {
-        return hmsActions.changeRoleOfPeer(peer.id, on_stage_role, skip_preview_for_role_change).then(() => {
-          return skip_preview_for_role_change ? hmsActions.lowerRemotePeerHand(peer.id) : null;
-        });
-      })
-    );
-  };
-  return {
-    lowerAllHands,
-    bringAllToStage,
-    canBringToStage: canChangeRole && offStageRolePeers.length > 0,
-    bring_to_stage_label,
-    remove_from_stage_label
-  };
-};
-
-// src/Prebuilt/components/Footer/RoleAccordion.tsx
-var ROW_HEIGHT = 50;
-var ITER_TIMER = 5e3;
-function itemKey(index, data) {
-  var _a;
-  return (_a = data.peerList[index]) == null ? void 0 : _a.id;
-}
-var VirtualizedParticipantItem = React3.memo(
-  ({ index, data, style }) => {
-    return /* @__PURE__ */ React3.createElement(
-      Participant,
-      {
-        key: data.peerList[index].id,
-        peer: data.peerList[index],
-        isHandRaisedAccordion: data.isHandRaisedAccordion,
-        isConnected: data.isConnected,
-        style
-      }
-    );
-  }
-);
-var RoleAccordion = ({
-  peerList = [],
-  roleName,
-  isConnected,
-  filter,
-  isHandRaisedAccordion = false,
-  offStageRoles,
-  onActive
-}) => {
-  const [ref, { width }] = useMeasure();
-  const isLargeRoom = useHMSStore4(selectIsLargeRoom);
-  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
-  const isOffStageRole = roleName && offStageRoles.includes(roleName);
-  let peersInAccordion = peerList;
-  if (isOffStageRole && isLargeRoom) {
-    peersInAccordion = peers;
-    if (filter == null ? void 0 : filter.search) {
-      peersInAccordion = peersInAccordion.filter((peer) => peer.name.toLowerCase().includes(filter.search || ""));
-    }
-  }
-  const { bringAllToStage, bring_to_stage_label, canBringToStage, lowerAllHands } = useGroupOnStageActions({
-    peers: peersInAccordion
-  });
-  useEffect(() => {
-    if (!isOffStageRole || !isLargeRoom) {
-      return;
-    }
-    loadPeers();
-    const interval = setInterval(() => {
-      loadPeers();
-    }, ITER_TIMER);
-    return () => clearInterval(interval);
-  }, [isOffStageRole, isLargeRoom]);
-  if (peersInAccordion.length === 0 || isHandRaisedAccordion && (filter == null ? void 0 : filter.search)) {
-    return null;
-  }
-  const height = ROW_HEIGHT * peersInAccordion.length;
-  const hasNext = total > peersInAccordion.length && !(filter == null ? void 0 : filter.search);
-  return /* @__PURE__ */ React3.createElement(Accordion.Item, { value: roleName, css: { "&:hover .role_actions": { visibility: "visible" }, mb: "$8" }, ref }, /* @__PURE__ */ React3.createElement(
-    Accordion.Header,
-    {
-      chevronID: `role_accordion_btn_${roleName}`,
-      iconStyles: { c: "$on_surface_high" },
-      css: {
-        textTransform: "capitalize",
-        p: "$6 $8",
-        fontSize: "$sm",
-        fontWeight: "$semiBold",
-        c: "$on_surface_medium",
-        borderRadius: "$1",
-        border: "1px solid $border_default",
-        '&[data-state="open"]': {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0
-        }
-      }
-    },
-    /* @__PURE__ */ React3.createElement(Flex, { justify: "between", align: "center", css: { flexGrow: 1, pr: "$6" } }, /* @__PURE__ */ React3.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: { fontWeight: "$semiBold", textTransform: "capitalize", color: "$on_surface_medium" }
-      },
-      roleName,
-      " ",
-      `(${getFormattedCount(isLargeRoom && isOffStageRole ? total : peerList.length)})`
-    ), /* @__PURE__ */ React3.createElement(RoleOptions, { roleName, peerList: peersInAccordion }))
-  ), /* @__PURE__ */ React3.createElement(Accordion.Content, { contentStyles: { border: "1px solid $border_default", borderTop: "none" } }, /* @__PURE__ */ React3.createElement(
-    FixedSizeList,
-    {
-      itemSize: ROW_HEIGHT,
-      itemData: {
-        peerList: isHandRaisedAccordion ? peersInAccordion.sort((a, b) => {
-          try {
-            const aHandRaisedAt = JSON.parse(a.metadata || "{}").handRaisedAt;
-            const bHandRaisedAt = JSON.parse(b.metadata || "{}").handRaisedAt;
-            return aHandRaisedAt - bHandRaisedAt;
-          } catch (err) {
-            return 0;
-          }
-        }) : peersInAccordion,
-        isConnected,
-        isHandRaisedAccordion
-      },
-      itemKey,
-      itemCount: peersInAccordion.length,
-      width,
-      height
-    },
-    VirtualizedParticipantItem
-  ), (offStageRoles == null ? void 0 : offStageRoles.includes(roleName)) && hasNext ? /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "end",
-      css: {
-        gap: "$1",
-        cursor: "pointer",
-        color: "$on_surface_high",
-        p: "$6",
-        borderTop: "1px solid $border_default"
-      },
-      onClick: () => onActive == null ? void 0 : onActive(roleName)
-    },
-    /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { color: "inherit" } }, "View All"),
-    /* @__PURE__ */ React3.createElement(ChevronRightIcon, null)
-  ) : null, isHandRaisedAccordion && canBringToStage && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(HorizontalDivider, null), /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", p: "$6", gap: "$4" }, justify: "center" }, /* @__PURE__ */ React3.createElement(Button, { variant: "standard", onClick: lowerAllHands, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React3.createElement(CrossIcon, null), " Lower all hands"), /* @__PURE__ */ React3.createElement(Button, { onClick: bringAllToStage, icon: true, css: { pl: "$2" } }, /* @__PURE__ */ React3.createElement(AddIcon, null), " ", bring_to_stage_label)))));
-};
-
-// src/Prebuilt/components/hooks/usePeerOnStageActions.tsx
-init_define_process_env();
-import { useState as useState2 } from "react";
-import { selectPeerMetadata, selectPermissions as selectPermissions4, useHMSActions as useHMSActions4, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
-var usePeerOnStageActions = ({ peerId, role }) => {
-  var _a, _b;
-  const hmsActions = useHMSActions4();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const {
-    bring_to_stage_label,
-    remove_from_stage_label,
-    on_stage_role,
-    off_stage_roles = [],
-    skip_preview_for_role_change = false
-  } = elements.on_stage_exp || {};
-  const isInStage = role === on_stage_role;
-  const canChangeRole = (_a = useHMSStore5(selectPermissions4)) == null ? void 0 : _a.changeRole;
-  const shouldShowStageRoleChange = canChangeRole && (isInStage && remove_from_stage_label || (off_stage_roles == null ? void 0 : off_stage_roles.includes(role)) && bring_to_stage_label);
-  const prevRole = (_b = useHMSStore5(selectPeerMetadata(peerId))) == null ? void 0 : _b.prevRole;
-  const [open, setOpen] = useState2(false);
-  const lowerPeerHand = () => __async(void 0, null, function* () {
-    yield hmsActions.lowerRemotePeerHand(peerId);
-  });
-  const handleStageAction = () => __async(void 0, null, function* () {
-    if (isInStage) {
-      prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
-    } else if (on_stage_role) {
-      yield hmsActions.changeRoleOfPeer(peerId, on_stage_role, skip_preview_for_role_change);
-      if (skip_preview_for_role_change) {
-        yield lowerPeerHand();
-      }
-    }
-    setOpen(false);
-  });
-  return {
-    open,
-    setOpen,
-    lowerPeerHand,
-    handleStageAction,
-    shouldShowStageRoleChange,
-    isInStage,
-    bring_to_stage_label,
-    remove_from_stage_label
-  };
-};
-
-// src/Prebuilt/components/Footer/ParticipantList.tsx
-var ParticipantList = ({
-  offStageRoles = [],
-  onActive
-}) => {
-  const [filter, setFilter] = useState3();
-  const { participants, isConnected, peerCount } = useParticipants(filter);
-  const isLargeRoom = useHMSStore6(selectIsLargeRoom2);
-  const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore6(selectHandRaisedPeers);
-  participants.forEach((participant) => {
-    if (participant.roleName) {
-      if (peersOrderedByRoles[participant.roleName] === void 0) {
-        peersOrderedByRoles[participant.roleName] = [];
-      }
-      peersOrderedByRoles[participant.roleName].push(participant);
-    }
-  });
-  if (isLargeRoom) {
-    offStageRoles.forEach((role) => {
-      if (!peersOrderedByRoles[role]) {
-        peersOrderedByRoles[role] = [];
-      }
-    });
-  }
-  useSidepaneResetOnLayoutUpdate("participant_list", SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const onSearch = useCallback((value) => {
-    setFilter((filterValue) => {
-      if (!filterValue) {
-        filterValue = {};
-      }
-      filterValue.search = value.toLowerCase();
-      return __spreadValues({}, filterValue);
-    });
-  }, []);
-  if (peerCount === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement(Fragment, null, /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        size: "100%",
-        gap: "$4"
-      }
-    },
-    !(filter == null ? void 0 : filter.search) && participants.length === 0 ? null : /* @__PURE__ */ React4.createElement(ParticipantSearch, { onSearch, inSidePane: true }),
-    /* @__PURE__ */ React4.createElement(
-      VirtualizedParticipants,
-      {
-        peersOrderedByRoles,
-        handRaisedList: handRaisedPeers,
-        isConnected: !!isConnected,
-        filter,
-        offStageRoles,
-        isLargeRoom,
-        onActive
-      },
-      participants.length === 0 ? /* @__PURE__ */ React4.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          className: "emptyParticipants",
-          css: { w: "100%", p: "$8 0", display: "none" }
-        },
-        /* @__PURE__ */ React4.createElement(Text, { variant: "sm" }, !filter ? "No participants" : "No matching participants")
-      ) : null
-    )
-  ));
-};
-var ParticipantCount = () => {
-  const peerCount = useHMSStore6(selectPeerCount);
-  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const isPeerListOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  if (peerCount === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement(
-    IconButton_default,
-    {
-      css: {
-        w: "auto",
-        p: "$4",
-        h: "auto",
-        bg: isPeerListOpen ? "$surface_brighter" : ""
-      },
-      onClick: () => {
-        if (peerCount > 0) {
-          toggleSidepane();
-        }
-      },
-      "data-testid": "participant_list"
-    },
-    /* @__PURE__ */ React4.createElement(PeopleIcon, null),
-    /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
-  );
-};
-var Participant = ({
-  peer,
-  isConnected,
-  isHandRaisedAccordion,
-  style
-}) => {
-  const localPeerId = useHMSStore6(selectLocalPeerID2);
-  return /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      key: peer.id,
-      css: {
-        w: "100%",
-        p: "$4 $8",
-        pr: "$6",
-        h: "$16",
-        "&:hover .participant_item": { display: "flex" }
-      },
-      align: "center",
-      justify: "between",
-      "data-testid": "participant_" + peer.name,
-      style
-    },
-    /* @__PURE__ */ React4.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: __spreadProps(__spreadValues({}, textEllipsis("100%")), { flex: "1 1 0", mr: "$8", fontWeight: "$semiBold", color: "$on_surface_high" })
-      },
-      peer.name,
-      " ",
-      localPeerId === peer.id ? "(You)" : ""
-    ),
-    isConnected && peer.roleName ? /* @__PURE__ */ React4.createElement(
-      ParticipantActions,
-      {
-        peerId: peer.id,
-        peerType: peer.type,
-        role: peer.roleName,
-        isHandRaisedAccordion
-      }
-    ) : null
-  );
-};
-var VirtualizedParticipants = ({
-  peersOrderedByRoles = {},
-  isConnected,
-  filter,
-  handRaisedList = [],
-  offStageRoles,
-  isLargeRoom,
-  onActive,
-  children
-}) => {
-  return /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        gap: "$8",
-        overflowY: "auto",
-        overflowX: "hidden",
-        pr: "$10",
-        mr: "-$10",
-        flex: "1 1 0",
-        "& > div:empty ~ .emptyParticipants": {
-          display: "flex"
-        }
-      }
-    },
-    /* @__PURE__ */ React4.createElement(Accordion.Root, { type: isLargeRoom ? "single" : "multiple", collapsible: true }, handRaisedList.length > 0 ? /* @__PURE__ */ React4.createElement(
-      RoleAccordion,
-      {
-        peerList: handRaisedList,
-        roleName: "Hand Raised",
-        filter,
-        isConnected,
-        isHandRaisedAccordion: true,
-        offStageRoles
-      }
-    ) : null, Object.keys(peersOrderedByRoles).map((role) => /* @__PURE__ */ React4.createElement(
-      RoleAccordion,
-      {
-        key: role,
-        peerList: peersOrderedByRoles[role],
-        roleName: role,
-        isConnected,
-        filter,
-        offStageRoles,
-        onActive
-      }
-    ))),
-    children
-  );
-};
-var ParticipantActions = React4.memo(
-  ({
-    peerId,
-    peerType,
-    role,
-    isHandRaisedAccordion
-  }) => {
-    var _a, _b;
-    const isHandRaised = useHMSStore6(selectHasPeerHandRaised(peerId));
-    const canChangeRole = (_a = useHMSStore6(selectPermissions5)) == null ? void 0 : _a.changeRole;
-    const canRemoveOthers = (_b = useHMSStore6(selectPermissions5)) == null ? void 0 : _b.removeOthers;
-    const { elements } = useRoomLayoutConferencingScreen();
-    const { on_stage_exp } = elements || {};
-    const shouldShowMoreActions = on_stage_exp && canChangeRole || canRemoveOthers;
-    const isAudioMuted = !useHMSStore6(selectIsPeerAudioEnabled(peerId));
-    return /* @__PURE__ */ React4.createElement(
-      Flex,
-      {
-        align: "center",
-        css: {
-          flexShrink: 0,
-          gap: "$8"
-        }
-      },
-      isHandRaisedAccordion ? /* @__PURE__ */ React4.createElement(HandRaisedAccordionParticipantActions, { peerId, role }) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(ConnectionIndicator, { peerId }), peerType === HMSPeerType.SIP && /* @__PURE__ */ React4.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          css: { p: "$1", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
-        },
-        /* @__PURE__ */ React4.createElement(CallIcon, { width: 19, height: 19 })
-      ), isHandRaised && /* @__PURE__ */ React4.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          css: { p: "$1", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
-        },
-        /* @__PURE__ */ React4.createElement(HandIcon, { height: 19, width: 19 })
-      ), isAudioMuted ? /* @__PURE__ */ React4.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          css: { p: "$2", c: "$on_surface_high", bg: "$surface_bright", borderRadius: "$round" }
-        },
-        /* @__PURE__ */ React4.createElement(MicOffIcon2, { height: 19, width: 19 })
-      ) : null, shouldShowMoreActions ? /* @__PURE__ */ React4.createElement(ParticipantMoreActions, { peerId, role }) : null)
-    );
-  }
-);
-var quickActionStyle = { p: "$1", borderRadius: "$round" };
-var HandRaisedAccordionParticipantActions = ({ peerId, role }) => {
-  const { handleStageAction, lowerPeerHand, shouldShowStageRoleChange, isInStage } = usePeerOnStageActions({
-    peerId,
-    role
-  });
-  if (!shouldShowStageRoleChange) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button, { variant: "standard", css: quickActionStyle, onClick: lowerPeerHand }, /* @__PURE__ */ React4.createElement(CrossIcon2, { height: 18, width: 18 })), !isInStage && /* @__PURE__ */ React4.createElement(Button, { variant: "primary", onClick: handleStageAction, css: quickActionStyle }, /* @__PURE__ */ React4.createElement(AddIcon2, { height: 18, width: 18 })));
-};
-var ParticipantMoreActions = ({ peerId, role }) => {
-  var _a;
-  const {
-    open,
-    setOpen,
-    bring_to_stage_label,
-    remove_from_stage_label,
-    handleStageAction,
-    isInStage,
-    shouldShowStageRoleChange
-  } = usePeerOnStageActions({ peerId, role });
-  const canChangeRole = !!((_a = useHMSStore6(selectPermissions5)) == null ? void 0 : _a.changeRole);
-  const [openRoleChangeModal, setOpenRoleChangeModal] = useState3(false);
-  const roles = useHMSStore6(selectAvailableRoleNames);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value), modal: false }, /* @__PURE__ */ React4.createElement(
-    Dropdown.Trigger,
-    {
-      asChild: true,
-      "data-testid": "participant_more_actions",
-      className: "participant_item",
-      css: {
-        p: "$1",
-        r: "$0",
-        c: "$on_surface_high",
-        display: open ? "flex" : "none",
-        "&:hover": {
-          bg: "$surface_bright"
-        },
-        "@md": {
-          display: "flex"
-        }
-      },
-      tabIndex: 0
-    },
-    /* @__PURE__ */ React4.createElement(Box, { css: { my: "auto" } }, /* @__PURE__ */ React4.createElement(VerticalMenuIcon2, null))
-  ), /* @__PURE__ */ React4.createElement(Dropdown.Portal, null, /* @__PURE__ */ React4.createElement(Dropdown.Content, { align: "end", sideOffset: 8, css: { w: "$64", bg: "$surface_default" } }, shouldShowStageRoleChange ? /* @__PURE__ */ React4.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => handleStageAction() }, /* @__PURE__ */ React4.createElement(ChangeRoleIcon, null), /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, isInStage ? remove_from_stage_label : bring_to_stage_label)) : null, canChangeRole && roles.length > 1 ? /* @__PURE__ */ React4.createElement(Dropdown.Item, { css: { bg: "$surface_default" }, onClick: () => setOpenRoleChangeModal(true) }, /* @__PURE__ */ React4.createElement(PersonSettingsIcon, null), /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold", c: "$on_surface_high" } }, "Switch Role")) : null, /* @__PURE__ */ React4.createElement(RemoveParticipant, { peerId })))), openRoleChangeModal && /* @__PURE__ */ React4.createElement(RoleChangeModal, { peerId, onOpenChange: setOpenRoleChangeModal }));
-};
-var ParticipantSearch = ({
-  onSearch,
-  placeholder = "Search for participants",
-  inSidePane = false
-}) => {
-  const [value, setValue] = React4.useState("");
-  const isMobile = useMedia(config.media.md);
-  useDebounce(
-    () => {
-      onSearch(value);
-    },
-    300,
-    [value, onSearch]
-  );
-  return /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        p: isMobile ? "0" : "$2 0",
-        mb: "$2",
-        position: "relative",
-        color: "$on_surface_medium",
-        mt: inSidePane ? "$4" : ""
-      },
-      onClick: (e) => e.stopPropagation()
-    },
-    /* @__PURE__ */ React4.createElement(SearchIcon, { style: { position: "absolute", left: "0.5rem" } }),
-    /* @__PURE__ */ React4.createElement(
-      Input,
-      {
-        type: "text",
-        placeholder,
-        css: { w: "100%", p: "$6", pl: "$14", bg: inSidePane ? "$surface_default" : "$surface_dim" },
-        value,
-        onKeyDown: (event) => {
-          event.stopPropagation();
-        },
-        onChange: (event) => {
-          setValue(event.currentTarget.value);
-        },
-        autoComplete: "off",
-        "aria-autocomplete": "none"
-      }
-    )
-  );
-};
-
-export {
-  ROW_HEIGHT,
-  itemKey,
-  ParticipantList,
-  ParticipantCount,
-  Participant,
-  ParticipantSearch
-};
-//# sourceMappingURL=chunk-U4SQBXPZ.js.map