@100mslive/roomkit-react 0.1.6-alpha.3 → 0.1.7-alpha.0

package/dist/{conference-MPZNWHV5.js → conference-6IVZHILI.js}

@@ -1,6 +1,6 @@
 import {
   ActionTile
-} from "./chunk-UXBTLGWY.js";
+} from "./chunk-JSH7SKEH.js";
 import {
   APP_DATA,
   Accordion,
@@ -58,7 +58,6 @@ import {
   isChrome,
   isIOS,
   isIPadOS,
-  isInternalRole,
   isMacOS,
   isScreenshareSupported,
   useAuthToken,
@@ -84,7 +83,7 @@ import {
   useUrlToEmbed,
   useUserPreferences,
   useWaitingViewerRole
-} from "./chunk-6JF3GAOH.js";
+} from "./chunk-CDYRVICT.js";
 import {
   Box,
   Flex,
@@ -103,7 +102,7 @@ import {
   slideLeftAndFade,
   styled,
   textEllipsis
-} from "./chunk-KAJJ56J4.js";
+} from "./chunk-U3G743OY.js";
 
 // src/Prebuilt/components/conference.jsx
 import React62, { useEffect as useEffect25, useRef as useRef14, useState as useState35 } from "react";
@@ -114,7 +113,7 @@ import {
   selectAppData as selectAppData4,
   selectIsConnectedToRoom as selectIsConnectedToRoom7,
   selectRoomState,
-  useHMSActions as useHMSActions22,
+  useHMSActions as useHMSActions23,
   useHMSStore as useHMSStore36
 } from "@100mslive/react-sdk";
 
@@ -122,6 +121,7 @@ import {
 import React36, { Suspense, useEffect as useEffect6 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
+import { useAVToggle as useAVToggle2 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/EmojiReaction.jsx
 import React2, { Fragment, useState } from "react";
@@ -1881,6 +1881,7 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPeerCount,
   selectPermissions as selectPermissions6,
+  useAVToggle,
   useHMSActions as useHMSActions9,
   useHMSStore as useHMSStore11,
   useRecordingStreaming as useRecordingStreaming5
@@ -1925,6 +1926,8 @@ var MwebOptions = ({
   const peerCount = useHMSStore11(selectPeerCount);
   const emojiCardRef = useRef5(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
   const updateState = (modalName, value) => {
     setOpenModals((modals) => {
@@ -1981,7 +1984,7 @@ var MwebOptions = ({
       /* @__PURE__ */ React22.createElement(PeopleIcon, null),
       /* @__PURE__ */ React22.createElement(ActionTile.Title, null, "Participants")
     ),
-    screenType !== "hls_live_streaming" ? /* @__PURE__ */ React22.createElement(
+    !noAVPermissions ? /* @__PURE__ */ React22.createElement(
       ActionTile.Root,
       {
         active: isHandRaised,
@@ -2079,7 +2082,6 @@ var MwebOptions = ({
   ), showEmojiCard && /* @__PURE__ */ React22.createElement(
     Box,
     {
-      onClick: () => setShowEmojiCard(false),
       ref: emojiCardRef,
       css: {
         maxWidth: "100%",
@@ -2128,14 +2130,22 @@ var MoreSettings = ({
 
 // src/Prebuilt/components/RaiseHand.jsx
 import React24 from "react";
-import { selectLocalPeer, selectPeerMetadata, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
+import { selectHasPeerHandRaised, selectLocalPeerID as selectLocalPeerID4, useHMSActions as useHMSActions10, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
 import { HandIcon as HandIcon2 } from "@100mslive/react-icons";
 var RaiseHand = () => {
-  var _a;
-  const { toggleHandRaise } = useMyMetadata();
-  const localPeer = useHMSStore12(selectLocalPeer);
-  const isHandRaised = ((_a = useHMSStore12(selectPeerMetadata(localPeer.id))) == null ? void 0 : _a.isHandRaised) || false;
-  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(IconButton_default, { active: !isHandRaised, onClick: toggleHandRaise }, /* @__PURE__ */ React24.createElement(HandIcon2, null)));
+  const localPeerId = useHMSStore12(selectLocalPeerID4);
+  const isHandRaised = useHMSStore12(selectHasPeerHandRaised(localPeerId));
+  const actions = useHMSActions10();
+  return /* @__PURE__ */ React24.createElement(Tooltip, { title: isHandRaised ? "Lower hand" : "Raise hand" }, /* @__PURE__ */ React24.createElement(
+    IconButton_default,
+    {
+      active: !isHandRaised,
+      onClick: () => {
+        isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
+      }
+    },
+    /* @__PURE__ */ React24.createElement(HandIcon2, null)
+  ));
 };
 
 // src/Prebuilt/components/ScreenShareToggle.jsx
@@ -2660,13 +2670,14 @@ var ChatToggle = () => {
 import React35, { Fragment as Fragment7, useCallback as useCallback6, useEffect as useEffect5, useState as useState18 } from "react";
 import { useDebounce, useMedia as useMedia4 } from "react-use";
 import {
+  selectHandRaisedPeers,
+  selectHasPeerHandRaised as selectHasPeerHandRaised2,
   selectIsPeerAudioEnabled,
-  selectLocalPeerID as selectLocalPeerID4,
+  selectLocalPeerID as selectLocalPeerID5,
   selectPeerCount as selectPeerCount2,
-  selectPeerMetadata as selectPeerMetadata2,
-  selectPeersByCondition as selectPeersByCondition2,
+  selectPeerMetadata,
   selectPermissions as selectPermissions8,
-  useHMSActions as useHMSActions11,
+  useHMSActions as useHMSActions12,
   useHMSStore as useHMSStore16
 } from "@100mslive/react-sdk";
 import {
@@ -2686,7 +2697,7 @@ import { FixedSizeList } from "react-window";
 
 // src/Prebuilt/components/Footer/RoleOptions.tsx
 import React33, { useState as useState17 } from "react";
-import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions10, useHMSStore as useHMSStore15, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
+import { selectPermissions as selectPermissions7, useHMSActions as useHMSActions11, useHMSStore as useHMSStore15, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
 import {
   MicOffIcon as MicOffIcon2,
   MicOnIcon,
@@ -2701,7 +2712,7 @@ var optionTextCSS = { fontWeight: "$semiBold", color: "$on_surface_high", textTr
 var RoleOptions = ({ roleName, peerList }) => {
   const [openOptions, setOpenOptions] = useState17(false);
   const permissions = useHMSStore15(selectPermissions7);
-  const hmsActions = useHMSActions10();
+  const hmsActions = useHMSActions11();
   const { elements } = useRoomLayoutConferencingScreen();
   const { on_stage_role, off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
   const vanillaStore = useHMSVanillaStore2();
@@ -2873,10 +2884,7 @@ var ParticipantList = () => {
   const [filter, setFilter] = useState18();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
-  const handRaisedPeers = useHMSStore16(selectPeersByCondition2((peer) => {
-    var _a;
-    return (_a = JSON.parse(peer.metadata || "{}")) == null ? void 0 : _a.isHandRaised;
-  }));
+  const handRaisedPeers = useHMSStore16(selectHandRaisedPeers);
   participants.forEach((participant) => {
     if (peersOrderedByRoles[participant.roleName] === void 0) {
       peersOrderedByRoles[participant.roleName] = [];
@@ -2934,7 +2942,7 @@ var ParticipantCount = () => {
       "data-testid": "participant_list"
     },
     /* @__PURE__ */ React35.createElement(PeopleIcon2, null),
-    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, peerCount)
+    /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { mx: "$4", c: "inherit" } }, getFormattedCount(peerCount))
   );
 };
 var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
@@ -2974,7 +2982,7 @@ var VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter,
   );
 };
 var Participant = ({ peer, isConnected }) => {
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const localPeerId = useHMSStore16(selectLocalPeerID5);
   return /* @__PURE__ */ React35.createElement(
     Flex,
     {
@@ -2995,9 +3003,9 @@ var Participant = ({ peer, isConnected }) => {
   );
 };
 var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
-  var _a, _b;
-  const isHandRaised = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.isHandRaised;
-  const canChangeRole = (_b = useHMSStore16(selectPermissions8)) == null ? void 0 : _b.changeRole;
+  var _a;
+  const isHandRaised = useHMSStore16(selectHasPeerHandRaised2(peerId));
+  const canChangeRole = (_a = useHMSStore16(selectPermissions8)) == null ? void 0 : _a.changeRole;
   const shouldShowMoreActions = canChangeRole;
   const isAudioMuted = !useHMSStore16(selectIsPeerAudioEnabled(peerId));
   return /* @__PURE__ */ React35.createElement(
@@ -3028,12 +3036,12 @@ var ParticipantActions = React35.memo(({ peerId, role, isLocal }) => {
       },
       /* @__PURE__ */ React35.createElement(MicOffIcon3, { height: 19, width: 19 })
     ) : null,
-    shouldShowMoreActions && !isInternalRole(role) && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
+    shouldShowMoreActions && !isLocal ? /* @__PURE__ */ React35.createElement(ParticipantMoreActions, { peerId, role }) : null
   );
 });
 var ParticipantMoreActions = ({ peerId, role }) => {
   var _a;
-  const hmsActions = useHMSActions11();
+  const hmsActions = useHMSActions12();
   const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore16(selectPermissions8);
   const { elements } = useRoomLayoutConferencingScreen();
   const {
@@ -3044,8 +3052,8 @@ var ParticipantMoreActions = ({ peerId, role }) => {
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   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 = (_a = useHMSStore16(selectPeerMetadata2(peerId))) == null ? void 0 : _a.prevRole;
-  const localPeerId = useHMSStore16(selectLocalPeerID4);
+  const prevRole = (_a = useHMSStore16(selectPeerMetadata(peerId))) == null ? void 0 : _a.prevRole;
+  const localPeerId = useHMSStore16(selectLocalPeerID5);
   const isLocal = localPeerId === peerId;
   const [open, setOpen] = useState18(false);
   const handleStageAction = () => __async(void 0, null, function* () {
@@ -3137,7 +3145,7 @@ var ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
 };
 
 // src/Prebuilt/components/Footer/Footer.tsx
-var VirtualBackground = React36.lazy(() => import("./VirtualBackground-6EP3X7MO.js"));
+var VirtualBackground = React36.lazy(() => import("./VirtualBackground-THDRYDRA.js"));
 var Footer2 = ({
   screenType,
   elements
@@ -3146,6 +3154,8 @@ var Footer2 = ({
   const isMobile = useMedia5(config.media.md);
   const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay);
   const openByDefault = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
+  const { toggleAudio, toggleVideo } = useAVToggle2();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   useEffect6(() => {
@@ -3192,7 +3202,7 @@ var Footer2 = ({
           }
         }
       },
-      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, screenType === "hls_live_streaming" ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
+      isMobile ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, noAVPermissions ? /* @__PURE__ */ React36.createElement(RaiseHand, null) : null, (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ScreenshareToggle, null), /* @__PURE__ */ React36.createElement(RaiseHand, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(LeaveRoom, { screenType }))
     ),
     /* @__PURE__ */ React36.createElement(Footer.Right, null, !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React36.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React36.createElement(ParticipantCount, null), /* @__PURE__ */ React36.createElement(MoreSettings, { elements, screenType }))
   );
@@ -3200,11 +3210,11 @@ var Footer2 = ({
 
 // src/Prebuilt/components/Notifications/HLSFailureModal.jsx
 import React37, { useCallback as useCallback7, useState as useState19 } from "react";
-import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions12, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
+import { selectHLSState as selectHLSState2, useHMSActions as useHMSActions13, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
 function HLSFailureModal() {
   const { hlsError } = useHMSStore17(selectHLSState2).error || false;
   const [openModal, setOpenModal] = useState19(!!hlsError);
-  const hmsActions = useHMSActions12();
+  const hmsActions = useHMSActions13();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback7(() => __async(this, null, function* () {
     try {
@@ -3249,7 +3259,7 @@ function HLSFailureModal() {
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
 import React60, { Suspense as Suspense2, useEffect as useEffect23 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions20, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom6, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions21, useHMSStore as useHMSStore34 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/VideoLayouts/GridLayout.tsx
 import React49, { useEffect as useEffect14, useMemo as useMemo6, useState as useState26 } from "react";
@@ -3258,13 +3268,13 @@ import { selectPeers as selectPeers2, selectPeerScreenSharing, useHMSStore as us
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 import React42, { useEffect as useEffect10, useMemo as useMemo3, useState as useState21 } from "react";
 import { useMedia as useMedia8 } from "react-use";
-import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/InsetTile.tsx
 import React39, { useEffect as useEffect7, useRef as useRef6 } from "react";
 import Draggable from "react-draggable";
 import { useMedia as useMedia6 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer as selectLocalPeer2, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish2, selectLocalPeer, selectVideoTrackByID, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/hooks/useVideoTileLayout.ts
@@ -3302,7 +3312,7 @@ var desktopAspectRatio = 1 / defaultMobileAspectRatio;
 var InsetTile = () => {
   const isMobile = useMedia6(config.media.md);
   const isLandscape = useMedia6(config.media.ls);
-  const localPeer = useHMSStore18(selectLocalPeer2);
+  const localPeer = useHMSStore18(selectLocalPeer);
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
   const videoTrack = useHMSStore18(selectVideoTrackByID(localPeer == null ? void 0 : localPeer.videoTrack));
   const isAllowedToPublish = useHMSStore18(selectIsAllowedToPublish2);
@@ -3562,7 +3572,7 @@ var useTileLayout = ({
 // src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
 function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
   var _a;
-  const localPeer = useHMSStore19(selectLocalPeer3);
+  const localPeer = useHMSStore19(selectLocalPeer2);
   const isMobile = useMedia8(config.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
@@ -3605,7 +3615,7 @@ function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSi
 
 // src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
 import React45, { useEffect as useEffect12, useState as useState23 } from "react";
-import { selectLocalPeer as selectLocalPeer4, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+import { selectLocalPeer as selectLocalPeer3, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/SecondaryTiles.tsx
 import React44, { useEffect as useEffect11, useState as useState22 } from "react";
@@ -3745,7 +3755,7 @@ function RoleProminence({
 }) {
   var _a;
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
-  const localPeer = useHMSStore20(selectLocalPeer4);
+  const localPeer = useHMSStore20(selectLocalPeer3);
   const maxTileCount = 4;
   const pageList = usePagesWithTiles({
     peers: prominentPeers,
@@ -3785,7 +3795,7 @@ import React47, { useRef as useRef7, useState as useState24 } from "react";
 import { useFullscreen as useFullscreen2 } from "react-use";
 import screenfull2 from "screenfull";
 import {
-  selectLocalPeerID as selectLocalPeerID5,
+  selectLocalPeerID as selectLocalPeerID6,
   selectPeerByID as selectPeerByID2,
   selectScreenShareAudioByPeerID,
   selectScreenShareByPeerID,
@@ -3795,10 +3805,10 @@ import { ExpandIcon as ExpandIcon3, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/ScreenshareDisplay.jsx
 import React46 from "react";
-import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions14 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon5, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
 var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions13();
+  const hmsActions = useHMSActions14();
   return /* @__PURE__ */ React46.createElement(
     Flex,
     {
@@ -3839,7 +3849,7 @@ var labelStyles = {
   flexShrink: 0
 };
 var Tile = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore21(selectLocalPeerID5) === peerId;
+  const isLocal = useHMSStore21(selectLocalPeerID6) === peerId;
   const track = useHMSStore21(selectScreenShareByPeerID(peerId));
   const peer = useHMSStore21(selectPeerByID2(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
@@ -4280,7 +4290,7 @@ import {
   selectPeerNameByID as selectPeerNameByID3,
   selectPermissions as selectPermissions10,
   selectSessionStore,
-  useHMSActions as useHMSActions18,
+  useHMSActions as useHMSActions19,
   useHMSNotifications,
   useHMSStore as useHMSStore29
 } from "@100mslive/react-sdk";
@@ -4294,13 +4304,13 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import {
   selectHMSMessages,
-  selectLocalPeerID as selectLocalPeerID6,
+  selectLocalPeerID as selectLocalPeerID7,
   selectLocalPeerRoleName,
   selectMessagesByPeerID,
   selectMessagesByRole,
   selectPeerNameByID as selectPeerNameByID2,
   selectPermissions as selectPermissions9,
-  useHMSActions as useHMSActions15,
+  useHMSActions as useHMSActions16,
   useHMSStore as useHMSStore26
 } from "@100mslive/react-sdk";
 import { PinIcon, VerticalMenuIcon as VerticalMenuIcon5 } from "@100mslive/react-icons";
@@ -4313,12 +4323,12 @@ import { useCallback as useCallback10 } from "react";
 import {
   selectPeerNameByID,
   selectSessionMetadata,
-  useHMSActions as useHMSActions14,
+  useHMSActions as useHMSActions15,
   useHMSStore as useHMSStore25,
   useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useSetPinnedMessage = () => {
-  const hmsActions = useHMSActions14();
+  const hmsActions = useHMSActions15();
   const vanillaStore = useHMSVanillaStore5();
   const pinnedMessage = useHMSStore25(selectSessionMetadata);
   const setPinnedMessage = useCallback10(
@@ -4446,8 +4456,8 @@ var ChatMessage = React52.memo(({ index, style = {}, message, setRowHeight, onPi
   const isMobile = useMedia11(config.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const isOverlay = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isMobile;
-  const hmsActions = useHMSActions15();
-  const localPeerId = useHMSStore26(selectLocalPeerID6);
+  const hmsActions = useHMSActions16();
+  const localPeerId = useHMSStore26(selectLocalPeerID7);
   const permissions = useHMSStore26(selectPermissions9);
   const messageType = getMessageType({
     roles: message.recipientRoles,
@@ -4654,14 +4664,14 @@ import React53, { useCallback as useCallback13, useEffect as useEffect19, useRef
 import { useMedia as useMedia12 } from "react-use";
 import data2 from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { useHMSActions as useHMSActions17 } from "@100mslive/react-sdk";
+import { useHMSActions as useHMSActions18 } from "@100mslive/react-sdk";
 import { EmojiIcon as EmojiIcon3, SendIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/AppData/useChatState.js
 import { useCallback as useCallback12 } from "react";
-import { selectAppData as selectAppData2, useHMSActions as useHMSActions16, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
+import { selectAppData as selectAppData2, useHMSActions as useHMSActions17, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions16();
+  const hmsActions = useHMSActions17();
   let chatDraftMessage = useHMSStore27(selectAppData2(APP_DATA.chatDraft));
   if (chatDraftMessage === void 0 || chatDraftMessage === null) {
     chatDraftMessage = "";
@@ -4759,7 +4769,7 @@ var ChatFooter = ({
   children
 }) => {
   var _a;
-  const hmsActions = useHMSActions17();
+  const hmsActions = useHMSActions18();
   const inputRef = useRef12(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia12(config.media.md);
@@ -4827,7 +4837,8 @@ var ChatFooter = ({
         css: {
           c: "$on_surface_high",
           "&:valid ~ .send-msg": { color: "$on_surface_high" },
-          "& ~ .send-msg": { color: "$on_surface_low" }
+          "& ~ .send-msg": { color: "$on_surface_low" },
+          "&::placeholder": { color: "$on_surface_medium" }
         },
         placeholder: "Send a message....",
         ref: inputRef,
@@ -4939,7 +4950,7 @@ var Chat = ({ screenType }) => {
   });
   const [isSelectorOpen] = useState31(false);
   const listRef = useRef13(null);
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions19();
   const { setPinnedMessage } = useSetPinnedMessage();
   useEffect20(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
@@ -5069,6 +5080,9 @@ var tabTriggerCSS = {
   w: "100%",
   justifyContent: "center"
 };
+var ParticipantCount2 = ({ count }) => {
+  return count < 1e3 ? /* @__PURE__ */ React55.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React55.createElement(Tooltip, { title: count }, /* @__PURE__ */ React55.createElement("span", null, "(", getFormattedCount(count), ")"));
+};
 var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType, hideControls }) => {
   var _a;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -5106,7 +5120,7 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
         transition: "margin 0.3s ease-in-out"
       }
     },
-    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(React55.Fragment, null, hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : `Participants (${peerCount})`), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
+    isOverlayChat && isChatOpen && showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(React55.Fragment, null, hideTabs ? /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", p: "$4", c: "$on_surface_high", pr: "$12" } }, showChat ? "Chat" : /* @__PURE__ */ React55.createElement("span", null, "Participants ", /* @__PURE__ */ React55.createElement(ParticipantCount2, { count: peerCount }))), showChat ? /* @__PURE__ */ React55.createElement(Chat, { screenType }) : /* @__PURE__ */ React55.createElement(ParticipantList, null)) : /* @__PURE__ */ React55.createElement(
       Tabs.Root,
       {
         value: activeTab,
@@ -5135,9 +5149,8 @@ var SidePaneTabs = React55.memo(({ active = SIDE_PANE_OPTIONS.CHAT, screenType,
             color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? "$on_surface_low" : "$on_surface_high"
           })
         },
-        "Participants (",
-        peerCount,
-        ")"
+        "Participants ",
+        /* @__PURE__ */ React55.createElement(ParticipantCount2, { count: peerCount })
       )),
       /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(ParticipantList, null)),
       /* @__PURE__ */ React55.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React55.createElement(Chat, { screenType }))
@@ -5171,7 +5184,7 @@ var rtmp_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABlCAYAAA
 
 // src/Prebuilt/components/Streaming/HLSStreaming.jsx
 import React56, { Fragment as Fragment9, useCallback as useCallback15, useEffect as useEffect22, useState as useState33 } from "react";
-import { selectRoomID, useHMSActions as useHMSActions19, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
+import { selectRoomID, useHMSActions as useHMSActions20, useHMSStore as useHMSStore31, useRecordingStreaming as useRecordingStreaming6 } from "@100mslive/react-sdk";
 import {
   EndStreamIcon as EndStreamIcon2,
   EyeOpenIcon,
@@ -5255,7 +5268,7 @@ var HLSStreaming = ({ onBack }) => {
 var StartHLS = () => {
   const [record, setRecord] = useState33(false);
   const [error, setError] = useState33(false);
-  const hmsActions = useHMSActions19();
+  const hmsActions = useHMSActions20();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback15(
     (variants) => __async(void 0, null, function* () {
@@ -5290,7 +5303,7 @@ var StartHLS = () => {
   )), /* @__PURE__ */ React56.createElement(Flex, { align: "center", css: { p: "$4 $10" } }, /* @__PURE__ */ React56.createElement(Text, null, /* @__PURE__ */ React56.createElement(InfoIcon4, { width: 16, height: 16 })), /* @__PURE__ */ React56.createElement(Text, { variant: "tiny", color: "$on_surface_medium", css: { mx: "$8" } }, "You cannot start recording once the stream starts, you will have to stop the stream to enable recording.")));
 };
 var EndHLS = ({ setShowLinks }) => {
-  const hmsActions = useHMSActions19();
+  const hmsActions = useHMSActions20();
   const [inProgress, setInProgress] = useState33(false);
   const [error, setError] = useState33("");
   const { isHLSRunning } = useRecordingStreaming6();
@@ -5508,7 +5521,7 @@ var WaitingView = React59.memo(() => {
 });
 
 // src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React60.lazy(() => import("./HLSView-HL455FYH.js"));
+var HLSView = React60.lazy(() => import("./HLSView-F5BDZVT2.js"));
 var VideoStreamingSection = ({
   screenType,
   elements,
@@ -5517,7 +5530,7 @@ var VideoStreamingSection = ({
   var _a, _b;
   const localPeerRole = useHMSStore34(selectLocalPeerRoleName2);
   const isConnected = useHMSStore34(selectIsConnectedToRoom6);
-  const hmsActions = useHMSActions20();
+  const hmsActions = useHMSActions21();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFAnnotator();
@@ -5570,11 +5583,11 @@ import {
   selectLocalPeerRoleName as selectLocalPeerRoleName3,
   selectRoleChangeRequest,
   useCustomEvent as useCustomEvent2,
-  useHMSActions as useHMSActions21,
+  useHMSActions as useHMSActions22,
   useHMSStore as useHMSStore35
 } from "@100mslive/react-sdk";
 var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions21();
+  const hmsActions = useHMSActions22();
   const { updateMetaData } = useMyMetadata();
   const currentRole = useHMSStore35(selectLocalPeerRoleName3);
   const roleChangeRequest = useHMSStore35(selectRoleChangeRequest);
@@ -5615,13 +5628,14 @@ var RoleChangeRequestModal = () => {
           yield hmsActions.rejectChangeRole(roleChangeRequest);
           sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
           yield hmsActions.cancelMidCallPreview();
-          yield updateMetaData({ isHandRaised: false });
+          yield hmsActions.lowerLocalPeerHand();
         }
       }),
       body,
       onAction: () => __async(void 0, null, function* () {
         yield hmsActions.acceptChangeRole(roleChangeRequest);
-        yield updateMetaData({ isHandRaised: false, prevRole: currentRole });
+        yield updateMetaData({ prevRole: currentRole });
+        yield hmsActions.lowerLocalPeerHand();
       }),
       actionText: "Accept"
     }
@@ -5647,7 +5661,7 @@ var Conference = () => {
   const roomState = useHMSStore36(selectRoomState);
   const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore36(selectIsConnectedToRoom7);
-  const hmsActions = useHMSActions22();
+  const hmsActions = useHMSActions23();
   const [hideControls, setHideControls] = useState35(false);
   const dropdownList = useHMSStore36(selectAppData4(APP_DATA.dropdownList));
   const authTokenInAppData = useAuthToken();
@@ -5781,4 +5795,4 @@ var conference_default = Conference;
 export {
   conference_default as default
 };
-//# sourceMappingURL=conference-MPZNWHV5.js.map
+//# sourceMappingURL=conference-6IVZHILI.js.map