@100mslive/roomkit-react 0.3.22-alpha.1 → 0.3.22-alpha.3

package/dist/chunk-QHQKY35W.js

@@ -0,0 +1,830 @@
+import {
+  useSidepaneResetOnLayoutUpdate
+} from "./chunk-2LWOQMYY.js";
+import {
+  Accordion,
+  Button,
+  ConnectionIndicator,
+  HorizontalDivider,
+  Input,
+  RoleChangeModal,
+  useIsSidepaneTypeOpen,
+  useSidepaneToggle
+} from "./chunk-26D5FDBW.js";
+import {
+  Text
+} from "./chunk-JKWX7W4K.js";
+import {
+  Dropdown,
+  ToastManager,
+  useParticipants
+} from "./chunk-BQOT4DK7.js";
+import {
+  Box,
+  Flex
+} from "./chunk-7QZJMUHM.js";
+import {
+  IconButton_default,
+  getFormattedCount,
+  getMetadata,
+  textEllipsis,
+  useRoomLayoutConferencingScreen
+} from "./chunk-ENHSO6YN.js";
+import {
+  SIDE_PANE_OPTIONS,
+  __async,
+  __spreadProps,
+  __spreadValues,
+  config,
+  init_define_process_env
+} from "./chunk-TBXRX6MK.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-QHQKY35W.js.map