@100mslive/roomkit-react 0.1.6 → 0.1.7

package/dist/{chunk-Q6U22HIE.js → chunk-Z7P5WITU.js}

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-NMOZ33TX.js";
+} from "./chunk-5DQ3WTED.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -657,7 +657,7 @@ var Input = styled("input", {
     border: "1px solid transparent"
   },
   "&::placeholder": {
-    color: "$on_surface_low"
+    color: "$on_surface_medium"
   },
   variants: {
     alert_error_default: {
@@ -779,19 +779,10 @@ var Info = styled("div", {
   textOverflow: "ellipsis",
   fontFamily: "$sans"
 });
-var AttributeBox = styled("div", __spreadValues({
-  position: "absolute",
-  color: "$on_primary_high",
-  w: "$12",
-  h: "$12",
-  bg: "$secondary_dim",
-  r: "$round"
-}, flexCenter));
-var AudioIndicator = styled("div", __spreadProps(__spreadValues({
+var AttributeBox = styled("div", __spreadProps(__spreadValues({
   position: "absolute",
   top: "$4",
-  right: "$4",
-  color: "$on_primary_high",
+  color: "$on_secondary_high",
   bg: "$secondary_dim",
   borderRadius: "$round",
   width: "$14",
@@ -812,12 +803,18 @@ var AudioIndicator = styled("div", __spreadProps(__spreadValues({
         width: "$13",
         height: "$13"
       }
+    },
+    position: {
+      left: { left: "$4" },
+      right: { right: "$4" }
     }
   },
   defaultVariants: {
-    size: "medium"
+    size: "medium",
+    position: "left"
   }
 }));
+var AudioIndicator = styled(AttributeBox, { defaultVariants: { position: "right" } });
 var FullScreenButton = styled("button", {
   width: "2.25rem",
   height: "2.25rem",
@@ -854,9 +851,9 @@ var StyledVideoTile = {
   Container,
   Overlay: Overlay2,
   Info,
-  AudioIndicator,
   AvatarContainer,
   AttributeBox,
+  AudioIndicator,
   FullScreenButton
 };
 
@@ -1997,7 +1994,7 @@ import {
   HMSRoomProvider,
   selectIsConnectedToRoom as selectIsConnectedToRoom6,
   useHMSActions as useHMSActions20,
-  useHMSStore as useHMSStore31
+  useHMSStore as useHMSStore30
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/AppData/AppData.jsx
@@ -2950,11 +2947,13 @@ import React30, { useCallback as useCallback8, useEffect as useEffect16 } from "
 import { useNavigate as useNavigate2, useParams as useParams2 } from "react-router-dom";
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
-  HMSRoomState as HMSRoomState3,
-  selectRoomState as selectRoomState3,
+  HMSRoomState as HMSRoomState2,
+  selectHasPeerHandRaised,
+  selectRoomState as selectRoomState2,
   useCustomEvent,
   useHMSNotifications as useHMSNotifications7,
-  useHMSStore as useHMSStore8
+  useHMSStore as useHMSStore7,
+  useHMSVanillaStore as useHMSVanillaStore4
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
@@ -3413,41 +3412,7 @@ var InitErrorModal = ({ notification }) => {
 
 // src/Prebuilt/components/Notifications/PeerNotifications.jsx
 import { useEffect as useEffect10 } from "react";
-import {
-  HMSNotificationTypes,
-  HMSRoomState as HMSRoomState2,
-  selectRoomState as selectRoomState2,
-  useHMSNotifications,
-  useHMSStore as useHMSStore7
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/common/utils.js
-var getMetadata = (metadataString) => {
-  try {
-    return !metadataString ? {} : JSON.parse(metadataString);
-  } catch (error) {
-    return {};
-  }
-};
-var isScreenshareSupported = () => {
-  return typeof navigator.mediaDevices.getDisplayMedia !== "undefined";
-};
-var isInternalRole = (role) => role && role.startsWith("__internal");
-var getFormattedCount = (num) => {
-  const formatter = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 2 });
-  const formattedNum = formatter.format(num);
-  return formattedNum;
-};
-var formatTime = (timeInSeconds) => {
-  timeInSeconds = Math.floor(timeInSeconds / 1e3);
-  const hours = Math.floor(timeInSeconds / 3600);
-  const minutes = Math.floor(timeInSeconds % 3600 / 60);
-  const seconds = timeInSeconds % 60;
-  const hour = hours !== 0 ? `${hours < 10 ? "0" : ""}${hours}:` : "";
-  return `${hour}${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-};
-
-// src/Prebuilt/components/Notifications/PeerNotifications.jsx
+import { HMSNotificationTypes, useHMSNotifications } from "@100mslive/react-sdk";
 var notificationTypes = [
   HMSNotificationTypes.PEER_LIST,
   HMSNotificationTypes.PEER_JOINED,
@@ -3457,19 +3422,14 @@ var PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
-  const roomState = useHMSStore7(selectRoomState2);
   useEffect10(() => {
-    var _a7, _b7;
-    if (roomState !== HMSRoomState2.Connected) {
-      return;
-    }
-    if (!notification || ((_a7 = notification == null ? void 0 : notification.data) == null ? void 0 : _a7.roleName) && isInternalRole(notification.data.roleName)) {
+    if (!(notification == null ? void 0 : notification.data)) {
       return;
     }
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes.PEER_LIST:
-        if (!isPeerJoinSubscribed || ((_b7 = notification.data) == null ? void 0 : _b7.length) === 0) {
+        if (!isPeerJoinSubscribed || notification.data.length === 0) {
           return;
         }
         break;
@@ -3487,7 +3447,7 @@ var PeerNotifications = () => {
         return;
     }
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
   return null;
 };
 
@@ -4178,16 +4138,48 @@ var useRedirectToLeave = () => {
   return { redirectToLeave: redirect };
 };
 
+// src/Prebuilt/common/utils.js
+var getMetadata = (metadataString) => {
+  try {
+    return !metadataString ? {} : JSON.parse(metadataString);
+  } catch (error) {
+    return {};
+  }
+};
+var isScreenshareSupported = () => {
+  return typeof navigator.mediaDevices.getDisplayMedia !== "undefined";
+};
+var getFormattedCount = (num) => {
+  const formatter = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 2 });
+  const formattedNum = formatter.format(num);
+  return formattedNum;
+};
+var formatTime = (timeInSeconds) => {
+  timeInSeconds = Math.floor(timeInSeconds / 1e3);
+  const hours = Math.floor(timeInSeconds / 3600);
+  const minutes = Math.floor(timeInSeconds % 3600 / 60);
+  const seconds = timeInSeconds % 60;
+  const hour = hours !== 0 ? `${hours < 10 ? "0" : ""}${hours}:` : "";
+  return `${hour}${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+};
+var getAttributeBoxSize = (width, height) => {
+  if (!width || !height) {
+    return "";
+  }
+  return width < 180 || height < 180 ? "small" : "medium";
+};
+
 // src/Prebuilt/components/Notifications/Notifications.jsx
 function Notifications() {
   const notification = useHMSNotifications7();
   const navigate = useNavigate2();
   const params = useParams2();
   const subscribedNotifications = useSubscribedNotifications() || {};
-  const roomState = useHMSStore8(selectRoomState3);
+  const roomState = useHMSStore7(selectRoomState2);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const { redirectToLeave } = useRedirectToLeave();
+  const vanillaStore = useHMSVanillaStore4();
   const handleRoleChangeDenied = useCallback8((request) => {
     ToastManager.addToast({
       title: `${request.peerName} denied your request to join the ${request.role.name} role`,
@@ -4201,8 +4193,18 @@ function Notifications() {
       return;
     }
     switch (notification.type) {
+      case HMSNotificationTypes7.HAND_RAISE_CHANGED: {
+        if (roomState !== HMSRoomState2.Connected || notification.data.isLocal) {
+          return;
+        }
+        const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+        if (hasPeerHandRaised) {
+          ToastBatcher.showToast({ notification, type: "RAISE_HAND" });
+        }
+        break;
+      }
       case HMSNotificationTypes7.METADATA_UPDATED:
-        if (roomState !== HMSRoomState3.Connected) {
+        if (roomState !== HMSRoomState2.Connected) {
           return;
         }
         const metadata = getMetadata((_a7 = notification.data) == null ? void 0 : _a7.metadata);
@@ -4292,7 +4294,7 @@ function Notifications() {
   if (isNotificationDisabled) {
     return null;
   }
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackNotifications, null), /* @__PURE__ */ React30.createElement(PeerNotifications, null), /* @__PURE__ */ React30.createElement(ReconnectNotifications, null), /* @__PURE__ */ React30.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React30.createElement(PermissionErrorModal, null), /* @__PURE__ */ React30.createElement(InitErrorModal, { notification }));
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React30.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React30.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React30.createElement(ReconnectNotifications, null), /* @__PURE__ */ React30.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React30.createElement(PermissionErrorModal, null), /* @__PURE__ */ React30.createElement(InitErrorModal, { notification }));
 }
 
 // src/Prebuilt/components/PostLeave.jsx
@@ -4303,14 +4305,14 @@ import { ExitIcon } from "@100mslive/react-icons";
 // src/Prebuilt/components/Header/Header.tsx
 import React36 from "react";
 import { useMedia as useMedia3 } from "react-use";
-import { HMSRoomState as HMSRoomState5, selectRoomState as selectRoomState5, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
+import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
 import React31, { useEffect as useEffect17, useState as useState11 } from "react";
-import { selectDominantSpeaker, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
+import { selectDominantSpeaker, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 var SpeakerTag = () => {
-  const dominantSpeaker = useHMSStore9(selectDominantSpeaker);
+  const dominantSpeaker = useHMSStore8(selectDominantSpeaker);
   return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React31.createElement(
     Flex,
     {
@@ -4358,13 +4360,13 @@ var Logo = () => {
 import React34, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef5, useState as useState13 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import {
-  HMSRoomState as HMSRoomState4,
+  HMSRoomState as HMSRoomState3,
   selectHLSState as selectHLSState2,
   selectIsConnectedToRoom as selectIsConnectedToRoom2,
   selectPermissions,
-  selectRoomState as selectRoomState4,
+  selectRoomState as selectRoomState3,
   useHMSActions as useHMSActions12,
-  useHMSStore as useHMSStore15,
+  useHMSStore as useHMSStore14,
   useRecordingStreaming as useRecordingStreaming2
 } from "@100mslive/react-sdk";
 import { AlertTriangleIcon, CrossIcon as CrossIcon4, RecordIcon } from "@100mslive/react-icons";
@@ -4468,7 +4470,7 @@ var Sheet = {
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
 import React33, { useState as useState12 } from "react";
-import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore14, useScreenShare } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore13, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
   ChevronDownIcon as ChevronDownIcon2,
@@ -4481,22 +4483,24 @@ import {
 
 // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
 import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo2 } from "react";
-import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore11 } from "@100mslive/react-sdk";
+import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/hooks/useMetadata.jsx
 import { useCallback as useCallback9 } from "react";
 import {
+  selectHasPeerHandRaised as selectHasPeerHandRaised2,
   selectLocalPeerID,
   selectPeerMetadata,
   useHMSActions as useHMSActions9,
-  useHMSStore as useHMSStore10,
-  useHMSVanillaStore as useHMSVanillaStore4
+  useHMSStore as useHMSStore9,
+  useHMSVanillaStore as useHMSVanillaStore5
 } from "@100mslive/react-sdk";
 var useMyMetadata = () => {
   const hmsActions = useHMSActions9();
-  const localPeerId = useHMSStore10(selectLocalPeerID);
-  const vanillaStore = useHMSVanillaStore4();
-  const metaData = useHMSStore10(selectPeerMetadata(localPeerId));
+  const localPeerId = useHMSStore9(selectLocalPeerID);
+  const vanillaStore = useHMSVanillaStore5();
+  const metaData = useHMSStore9(selectPeerMetadata(localPeerId));
+  const isHandRaised = useHMSStore9(selectHasPeerHandRaised2(localPeerId));
   const update = (updatedFields) => __async(void 0, null, function* () {
     try {
       const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -4507,10 +4511,19 @@ var useMyMetadata = () => {
     }
   });
   const toggleHandRaise = useCallback9(() => __async(void 0, null, function* () {
-    yield update({ isHandRaised: !(metaData == null ? void 0 : metaData.isHandRaised), isBRBOn: false });
-  }), [metaData == null ? void 0 : metaData.isHandRaised]);
+    if (isHandRaised) {
+      yield hmsActions.lowerLocalPeerHand();
+    } else {
+      yield hmsActions.raiseLocalPeerHand();
+      yield update({ isBRBOn: false });
+    }
+  }), [isHandRaised]);
   const toggleBRB = useCallback9(() => __async(void 0, null, function* () {
-    yield update({ isBRBOn: !(metaData == null ? void 0 : metaData.isBRBOn), isHandRaised: false });
+    const newValue = !(metaData == null ? void 0 : metaData.isBRBOn);
+    yield update({ isBRBOn: newValue });
+    if (newValue) {
+      yield hmsActions.lowerLocalPeerHand();
+    }
   }), [metaData == null ? void 0 : metaData.isBRBOn]);
   const setPrevRole = (role) => __async(void 0, null, function* () {
     yield update({
@@ -4518,7 +4531,7 @@ var useMyMetadata = () => {
     });
   });
   return {
-    isHandRaised: !!(metaData == null ? void 0 : metaData.isHandRaised),
+    isHandRaised,
     isBRBOn: !!(metaData == null ? void 0 : metaData.isBRBOn),
     metaData,
     updateMetaData: update,
@@ -4533,9 +4546,9 @@ var isWhiteboardOwner = (peer) => {
   return !!getMetadata(peer == null ? void 0 : peer.metadata).whiteboardOwner;
 };
 var useWhiteboardMetadata = () => {
-  const localPeerID = useHMSStore11(selectLocalPeerID2);
+  const localPeerID = useHMSStore10(selectLocalPeerID2);
   const { updateMetaData } = useMyMetadata();
-  const whiteboardOwner = useHMSStore11(selectPeerByCondition(isWhiteboardOwner));
+  const whiteboardOwner = useHMSStore10(selectPeerByCondition(isWhiteboardOwner));
   const amIWhiteboardOwner = useMemo2(() => localPeerID === (whiteboardOwner == null ? void 0 : whiteboardOwner.id), [localPeerID, whiteboardOwner]);
   const toggleWhiteboard = useCallback10(() => __async(void 0, null, function* () {
     if (!define_process_env_default.REACT_APP_PUSHER_APP_KEY) {
@@ -4571,12 +4584,12 @@ import {
   selectAudioPlaylistTrackByPeerID,
   selectPeerSharingAudioPlaylist,
   useHMSActions as useHMSActions10,
-  useHMSStore as useHMSStore12
+  useHMSStore as useHMSStore11
 } from "@100mslive/react-sdk";
 var usePlaylistMusic = () => {
-  const peer = useHMSStore12(selectPeerSharingAudioPlaylist);
-  const track = useHMSStore12(selectAudioPlaylistTrackByPeerID(peer == null ? void 0 : peer.id));
-  const selection = useHMSStore12(selectAudioPlaylist.selectedItem);
+  const peer = useHMSStore11(selectPeerSharingAudioPlaylist);
+  const track = useHMSStore11(selectAudioPlaylistTrackByPeerID(peer == null ? void 0 : peer.id));
+  const selection = useHMSStore11(selectAudioPlaylist.selectedItem);
   const hmsActions = useHMSActions10();
   const play = useCallback11(
     (selectedId) => __async(void 0, null, function* () {
@@ -4602,12 +4615,12 @@ import {
   selectPeerSharingAudio,
   selectScreenShareAudioByPeerID,
   useHMSActions as useHMSActions11,
-  useHMSStore as useHMSStore13
+  useHMSStore as useHMSStore12
 } from "@100mslive/react-sdk";
 var useScreenshareAudio = () => {
   const hmsActions = useHMSActions11();
-  const peer = useHMSStore13(selectPeerSharingAudio);
-  const track = useHMSStore13(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
+  const peer = useHMSStore12(selectPeerSharingAudio);
+  const track = useHMSStore12(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
   const handleMute = useCallback12(() => {
     if (!peer.isLocal) {
       hmsActions.setVolume(!track.volume ? 100 : 0, track.id);
@@ -4654,8 +4667,8 @@ var AdditionalRoomState = () => {
     !screenshareAudio.peer || !screenshareAudio.track,
     !((_d = screenshareAudio.peer) == null ? void 0 : _d.isLocal) && !((_e = screenshareAudio.track) == null ? void 0 : _e.enabled)
   ].some(Boolean);
-  const peerSharingPlaylist = useHMSStore14(selectPeerSharingVideoPlaylist);
-  const localPeerID = useHMSStore14(selectLocalPeerID3);
+  const peerSharingPlaylist = useHMSStore13(selectPeerSharingVideoPlaylist);
+  const localPeerID = useHMSStore13(selectLocalPeerID3);
   const isVideoPlayListPlaying = !!(peerSharingPlaylist == null ? void 0 : peerSharingPlaylist.id);
   const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();
   const isVideoScreenSharingOn = !!screenShareVideoTrackId;
@@ -4735,7 +4748,7 @@ var AdditionalRoomState = () => {
 var LiveStatus = () => {
   var _a7;
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming2();
-  const hlsState = useHMSStore15(selectHLSState2);
+  const hlsState = useHMSStore14(selectHLSState2);
   const isMobile = useMedia2(config.media.md);
   const intervalRef = useRef5(null);
   const [liveTime, setLiveTime] = useState13(0);
@@ -4780,7 +4793,7 @@ var LiveStatus = () => {
 };
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming2();
-  const permissions = useHMSStore15(selectPermissions);
+  const permissions = useHMSStore14(selectPermissions);
   const isMobile = useMedia2(config.media.md);
   if (!isRecordingOn || // if only browser recording is enabled, stop recording is shown
   // so no need to show this as it duplicates
@@ -4813,7 +4826,7 @@ var RecordingStatus = () => {
   );
 };
 var StartRecording = () => {
-  const permissions = useHMSStore15(selectPermissions);
+  const permissions = useHMSStore14(selectPermissions);
   const [open, setOpen] = useState13(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
@@ -4880,10 +4893,10 @@ var StartRecording = () => {
   );
 };
 var StreamActions = () => {
-  const isConnected = useHMSStore15(selectIsConnectedToRoom2);
+  const isConnected = useHMSStore14(selectIsConnectedToRoom2);
   const isMobile = useMedia2(config.media.md);
-  const roomState = useHMSStore15(selectRoomState4);
-  return /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(RecordingStatus, null), roomState !== HMSRoomState4.Preview ? /* @__PURE__ */ React34.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React34.createElement(StartRecording, null) : null);
+  const roomState = useHMSStore14(selectRoomState3);
+  return /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React34.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React34.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React34.createElement(StartRecording, null) : null);
 };
 var StopRecordingInSheet = ({
   onStopRecording,
@@ -4911,16 +4924,16 @@ import {
   selectVideoTrackByID,
   useDevices,
   useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore16
+  useHMSStore as useHMSStore15
 } from "@100mslive/react-sdk";
 import { CameraFlipIcon, CheckIcon as CheckIcon2, CrossIcon as CrossIcon5, SpeakerIcon } from "@100mslive/react-icons";
 var CamaraFlipActions = () => {
   const actions = useHMSActions13();
   const { allDevices } = useDevices();
   const { videoInput } = allDevices;
-  const isVideoOn = useHMSStore16(selectIsLocalVideoEnabled2);
-  const videoTrackId = useHMSStore16(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore16(selectVideoTrackByID(videoTrackId));
+  const isVideoOn = useHMSStore15(selectIsLocalVideoEnabled2);
+  const videoTrackId = useHMSStore15(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore15(selectVideoTrackByID(videoTrackId));
   if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
     return null;
   }
@@ -5035,9 +5048,9 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React35.createElement(Rea
 
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
-  const roomState = useHMSStore17(selectRoomState5);
+  const roomState = useHMSStore16(selectRoomState4);
   const isMobile = useMedia3(config.media.md);
-  if (roomState !== HMSRoomState5.Connected) {
+  if (roomState !== HMSRoomState4.Connected) {
     return /* @__PURE__ */ React36.createElement(React36.Fragment, null);
   }
   return /* @__PURE__ */ React36.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React36.createElement(Logo, null), /* @__PURE__ */ React36.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(LiveStatus, null), /* @__PURE__ */ React36.createElement(RecordingStatus, null))), /* @__PURE__ */ React36.createElement(
@@ -5113,15 +5126,15 @@ import { useSearchParam } from "react-use";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
 import React55, { Fragment as Fragment6, Suspense, useCallback as useCallback17, useEffect as useEffect24, useState as useState19 } from "react";
-import { useMedia as useMedia9 } from "react-use";
+import { useMedia as useMedia10 } from "react-use";
 import {
-  HMSRoomState as HMSRoomState7,
+  HMSRoomState as HMSRoomState6,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5,
   selectLocalPeer,
-  selectRoomState as selectRoomState7,
+  selectRoomState as selectRoomState6,
   selectVideoTrackByID as selectVideoTrackByID5,
   useAVToggle as useAVToggle2,
-  useHMSStore as useHMSStore26,
+  useHMSStore as useHMSStore25,
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming as useRecordingStreaming4
@@ -5132,14 +5145,14 @@ import { MicOffIcon as MicOffIcon4, SettingsIcon as SettingsIcon2 } from "@100ms
 import React39, { Fragment as Fragment2 } from "react";
 import {
   DeviceType as DeviceType2,
-  HMSRoomState as HMSRoomState6,
+  HMSRoomState as HMSRoomState5,
   selectLocalVideoTrackID as selectLocalVideoTrackID2,
-  selectRoomState as selectRoomState6,
+  selectRoomState as selectRoomState5,
   selectVideoTrackByID as selectVideoTrackByID2,
   useAVToggle,
   useDevices as useDevices2,
   useHMSActions as useHMSActions14,
-  useHMSStore as useHMSStore18
+  useHMSStore as useHMSStore17
 } from "@100mslive/react-sdk";
 import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
 
@@ -5279,9 +5292,9 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   }));
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const actions = useHMSActions14();
-  const videoTrackId = useHMSStore18(selectLocalVideoTrackID2);
-  const localVideoTrack = useHMSStore18(selectVideoTrackByID2(videoTrackId));
-  const roomState = useHMSStore18(selectRoomState6);
+  const videoTrackId = useHMSStore17(selectLocalVideoTrackID2);
+  const localVideoTrack = useHMSStore17(selectVideoTrackByID2(videoTrackId));
+  const roomState = useHMSStore17(selectRoomState5);
   const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
   const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
   return /* @__PURE__ */ React39.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React39.createElement(
@@ -5330,7 +5343,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       active: isLocalVideoEnabled,
       onClick: toggleVideo
     }
-  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React39.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React39.createElement(
+  ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React39.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React39.createElement(
     IconButton_default,
     {
       onClick: () => __async(void 0, null, function* () {
@@ -5370,7 +5383,7 @@ import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Connection/ConnectionIndicator.tsx
 import React41 from "react";
-import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
+import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
 import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Connection/connectionQualityUtils.js
@@ -5424,7 +5437,7 @@ var ConnectionIndicator = ({
   hideBg = false
 }) => {
   var _a7;
-  const downlinkQuality = (_a7 = useHMSStore19(selectConnectionQualityByPeerID2(peerId))) == null ? void 0 : _a7.downlinkQuality;
+  const downlinkQuality = (_a7 = useHMSStore18(selectConnectionQualityByPeerID2(peerId))) == null ? void 0 : _a7.downlinkQuality;
   const { theme: theme2 } = useTheme();
   const defaultColor = theme2.colors.surface_brighter;
   if (downlinkQuality === -1 || downlinkQuality === void 0) {
@@ -5536,7 +5549,7 @@ import {
   selectLocalVideoTrackID as selectLocalVideoTrackID3,
   selectVideoTrackByID as selectVideoTrackByID3,
   useDevices as useDevices3,
-  useHMSStore as useHMSStore20
+  useHMSStore as useHMSStore19
 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as VideoOnIcon2 } from "@100mslive/react-icons";
 
@@ -5596,12 +5609,12 @@ var Settings = ({ setHide }) => {
   var _a7;
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices3();
   const { videoInput, audioInput, audioOutput } = allDevices;
-  const videoTrackId = useHMSStore20(selectLocalVideoTrackID3);
-  const isVideoOn = useHMSStore20(selectIsLocalVideoEnabled3);
+  const videoTrackId = useHMSStore19(selectLocalVideoTrackID3);
+  const isVideoOn = useHMSStore19(selectIsLocalVideoEnabled3);
   const shouldShowAudioOutput = "setSinkId" in HTMLMediaElement.prototype;
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID3(videoTrackId);
-  const track = useHMSStore20(trackSelector);
+  const track = useHMSStore19(trackSelector);
   const audioOutputFiltered = (_a7 = audioOutput == null ? void 0 : audioOutput.filter((item) => !!item.label)) != null ? _a7 : [];
   if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
     setHide(true);
@@ -5756,7 +5769,7 @@ var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
 import React46, { useCallback as useCallback14 } from "react";
-import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
+import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
 import React45 from "react";
@@ -5799,8 +5812,8 @@ var SwitchWithLabel_default = SwitchWithLabel;
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
 var LayoutSettings = () => {
   const hmsActions = useHMSActions15();
-  const isLocalVideoEnabled = useHMSStore21(selectIsLocalVideoEnabled4);
-  const isLocalScreenShared = useHMSStore21(selectIsLocalScreenShared);
+  const isLocalVideoEnabled = useHMSStore20(selectIsLocalVideoEnabled4);
+  const isLocalScreenShared = useHMSStore20(selectIsLocalScreenShared);
   const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
   const toggleIsAudioOnly = useCallback14(
     (isAudioOnlyModeOn) => __async(void 0, null, function* () {
@@ -6134,8 +6147,10 @@ var SettingsModal_default = SettingsModal;
 
 // src/Prebuilt/components/VideoTile.jsx
 import React53, { Fragment as Fragment5, useCallback as useCallback16, useEffect as useEffect23, useMemo as useMemo3, useRef as useRef7, useState as useState18 } from "react";
+import { useMedia as useMedia8 } from "react-use";
 import {
   selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
+  selectHasPeerHandRaised as selectHasPeerHandRaised3,
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID5,
   selectPeerMetadata as selectPeerMetadata2,
@@ -6144,8 +6159,8 @@ import {
   selectTrackAudioByID,
   selectVideoTrackByID as selectVideoTrackByID4,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
-  useHMSStore as useHMSStore25,
-  useHMSVanillaStore as useHMSVanillaStore5
+  useHMSStore as useHMSStore24,
+  useHMSVanillaStore as useHMSVanillaStore6
 } from "@100mslive/react-sdk";
 import { BrbTileIcon, HandIcon as HandIcon3, MicOffIcon as MicOffIcon3 } from "@100mslive/react-icons";
 
@@ -6158,7 +6173,7 @@ import {
   selectPermissions as selectPermissions3,
   selectTrackByID as selectTrackByID3,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore24,
+  useHMSStore as useHMSStore23,
   useRemoteAVToggle as useRemoteAVToggle2
 } from "@100mslive/react-sdk";
 import { CrossIcon as CrossIcon8, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
@@ -6166,7 +6181,7 @@ import { CrossIcon as CrossIcon8, VerticalMenuIcon as VerticalMenuIcon2 } from "
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
 import React50, { useState as useState16 } from "react";
 import { useMedia as useMedia5 } from "react-use";
-import { selectLocalPeerName, useHMSActions as useHMSActions16, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import { selectLocalPeerName, useHMSActions as useHMSActions16, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
 import React49 from "react";
@@ -6278,7 +6293,7 @@ var ChangeNameContent = ({
 var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
   const hmsActions = useHMSActions16();
-  const localPeerName = useHMSStore22(selectLocalPeerName);
+  const localPeerName = useHMSStore21(selectLocalPeerName);
   const [currentName, setCurrentName] = useState16(localPeerName);
   const isMobile = useMedia5(config.media.md);
   const changeName = () => __async(void 0, null, function* () {
@@ -6325,7 +6340,7 @@ import {
   selectTrackByID as selectTrackByID2,
   useCustomEvent as useCustomEvent2,
   useHMSActions as useHMSActions17,
-  useHMSStore as useHMSStore23,
+  useHMSStore as useHMSStore22,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
 import {
@@ -6350,7 +6365,7 @@ var SpotlightActions = ({
   }
 }) => {
   const hmsActions = useHMSActions17();
-  const spotlightPeerId = useHMSStore23(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT));
+  const spotlightPeerId = useHMSStore22(selectSessionStore2(SESSION_STORE_KEY.SPOTLIGHT));
   const isTileSpotlighted = spotlightPeerId === peerId;
   const setSpotlightPeerId = (peer) => hmsActions.sessionStore.set(SESSION_STORE_KEY.SPOTLIGHT, peer).catch((err) => ToastManager.addToast({ title: err.description }));
   return /* @__PURE__ */ React51.createElement(
@@ -6393,7 +6408,7 @@ var MinimiseInset = () => {
 };
 var SimulcastLayers = ({ trackId }) => {
   var _a7;
-  const track = useHMSStore23(selectTrackByID2(trackId));
+  const track = useHMSStore22(selectTrackByID2(trackId));
   const actions = useHMSActions17();
   const bg = useDropdownSelection();
   if (!((_a7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a7.length) || track.degraded || !track.enabled) {
@@ -6460,7 +6475,7 @@ var SimulcastLayers = ({ trackId }) => {
 };
 var TileMenuContent = (props) => {
   const actions = useHMSActions17();
-  const { removeOthers } = useHMSStore23(selectPermissions2);
+  const { removeOthers } = useHMSStore22(selectPermissions2);
   const {
     videoTrackID,
     audioTrackID,
@@ -6580,17 +6595,17 @@ var TileMenu = ({
   var _a7, _b7;
   const [open, setOpen] = useState17(false);
   const { theme: theme2 } = useTheme();
-  const localPeerID = useHMSStore24(selectLocalPeerID4);
+  const localPeerID = useHMSStore23(selectLocalPeerID4);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore24(selectPermissions3);
+  const { removeOthers } = useHMSStore23(selectPermissions3);
   const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
   const showSpotlight = enableSpotlightingPeer;
-  const isPrimaryVideoTrack = ((_a7 = useHMSStore24(selectVideoTrackByPeerID2(peerID))) == null ? void 0 : _a7.id) === videoTrackID;
+  const isPrimaryVideoTrack = ((_a7 = useHMSStore23(selectVideoTrackByPeerID2(peerID))) == null ? void 0 : _a7.id) === videoTrackID;
   const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
-  const track = useHMSStore24(selectTrackByID3(videoTrackID));
+  const track = useHMSStore23(selectTrackByID3(videoTrackID));
   const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
   const isMobile = useMedia7(config.media.md);
-  const peer = useHMSStore24(selectPeerByID2(peerID));
+  const peer = useHMSStore23(selectPeerByID2(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState17(false);
   useDropdownList({ open, name: "TileMenu" });
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
@@ -6680,15 +6695,17 @@ var Tile = ({
   hideAudioMuteOnTile = false,
   hideMetadataOnTile = false
 }) => {
+  var _a7, _b7;
   const trackSelector = trackId ? selectVideoTrackByID4(trackId) : selectVideoTrackByPeerID3(peerId);
-  const track = useHMSStore25(trackSelector);
-  const peerName = useHMSStore25(selectPeerNameByID(peerId));
-  const audioTrack = useHMSStore25(selectAudioTrackByPeerID2(peerId));
-  const localPeerID = useHMSStore25(selectLocalPeerID5);
+  const track = useHMSStore24(trackSelector);
+  const isMobile = useMedia8(config.media.md);
+  const peerName = useHMSStore24(selectPeerNameByID(peerId));
+  const audioTrack = useHMSStore24(selectAudioTrackByPeerID2(peerId));
+  const localPeerID = useHMSStore24(selectLocalPeerID5);
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore25(selectIsPeerAudioEnabled(peerId));
+  const isAudioMuted = !useHMSStore24(selectIsPeerAudioEnabled(peerId));
   const isVideoMuted = !(track == null ? void 0 : track.enabled);
   const [isMouseHovered, setIsMouseHovered] = useState18(false);
   const isVideoDegraded = track == null ? void 0 : track.degraded;
@@ -6699,7 +6716,7 @@ var Tile = ({
     videoTrackID: track == null ? void 0 : track.id,
     audioTrackID: audioTrack == null ? void 0 : audioTrack.id
   });
-  const spotlighted = useHMSStore25(selectSessionStore3(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
+  const spotlighted = useHMSStore24(selectSessionStore3(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const label = getVideoTileLabel({
     peerName,
     track,
@@ -6708,21 +6725,25 @@ var Tile = ({
   const onHoverHandler = useCallback16((event) => {
     setIsMouseHovered(event.type === "mouseenter");
   }, []);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+  const ref = useRef7(null);
+  const calculatedHeight = ((_a7 = ref.current) == null ? void 0 : _a7.clientHeight) || "";
+  const calculatedWidth = ((_b7 = ref.current) == null ? void 0 : _b7.clientWidth) || "";
+  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
   const avatarSize = useMemo3(() => {
-    if (!width || !height) {
+    if (!calculatedWidth || !calculatedHeight) {
       return void 0;
     }
-    if (width <= 150 || height <= 150) {
+    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
       return "small";
-    } else if (width <= 300 || height <= 300) {
+    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
       return "medium";
     }
     return "large";
-  }, [width, height]);
+  }, [calculatedWidth, calculatedHeight]);
   return /* @__PURE__ */ React53.createElement(
     StyledVideoTile.Root,
     {
+      ref,
       css: __spreadValues({
         width,
         height
@@ -6758,11 +6779,11 @@ var Tile = ({
         StyledVideoTile.AudioIndicator,
         {
           "data-testid": "participant_audio_mute_icon",
-          size: width && height && (width < 180 || height < 180) ? "small" : "medium"
+          size: getAttributeBoxSize(calculatedWidth, calculatedHeight)
         },
         /* @__PURE__ */ React53.createElement(MicOffIcon3, null)
       ) : /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id }) : null,
-      isMouseHovered || isDragabble ? /* @__PURE__ */ React53.createElement(
+      isMouseHovered || isDragabble && isMobile ? /* @__PURE__ */ React53.createElement(
         TileMenu_default,
         {
           peerID: peerId,
@@ -6772,7 +6793,7 @@ var Tile = ({
           enableSpotlightingPeer
         }
       ) : null,
-      !hideMetadataOnTile && /* @__PURE__ */ React53.createElement(PeerMetadata, { peerId }),
+      !hideMetadataOnTile && /* @__PURE__ */ React53.createElement(PeerMetadata, { peerId, height: calculatedHeight, width: calculatedWidth }),
       /* @__PURE__ */ React53.createElement(
         TileConnection_default,
         {
@@ -6788,7 +6809,6 @@ var Tile = ({
     ) : null
   );
 };
-var metaStyles = { top: "$4", left: "$4", width: "$14", height: "$14" };
 var heightAnimation = (value) => keyframes({
   "50%": {
     transform: `scale3d(1,${value},1)`
@@ -6798,7 +6818,7 @@ var heightAnimation = (value) => keyframes({
   }
 });
 var AudioLevelIndicator = ({ trackId, value, delay }) => {
-  const vanillaStore = useHMSVanillaStore5();
+  const vanillaStore = useHMSVanillaStore6();
   const ref = useRef7();
   useEffect23(() => {
     const unsubscribe = vanillaStore.subscribe((audioLevel) => {
@@ -6826,18 +6846,18 @@ var AudioLevelIndicator = ({ trackId, value, delay }) => {
 var AudioLevel = ({ trackId }) => {
   return /* @__PURE__ */ React53.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React53.createElement(Flex, { align: "center", justify: "center", css: { gap: "$2" } }, [3, 2, 3].map((v, i) => /* @__PURE__ */ React53.createElement(AudioLevelIndicator, { trackId, value: v, delay: i * 0.15, key: i }))));
 };
-var PeerMetadata = ({ peerId }) => {
-  const metaData = useHMSStore25(selectPeerMetadata2(peerId));
-  const isHandRaised = (metaData == null ? void 0 : metaData.isHandRaised) || false;
+var PeerMetadata = ({ peerId, height, width }) => {
+  const metaData = useHMSStore24(selectPeerMetadata2(peerId));
   const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
-  return /* @__PURE__ */ React53.createElement(Fragment5, null, isHandRaised ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React53.createElement(HandIcon3, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React53.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
+  const isHandRaised = useHMSStore24(selectHasPeerHandRaised3(peerId));
+  return /* @__PURE__ */ React53.createElement(Fragment5, null, isHandRaised ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React53.createElement(HandIcon3, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AttributeBox, { size: getAttributeBoxSize(width, height), "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React53.createElement(BrbTileIcon, { width: 22, height: 22 })) : null);
 };
 var VideoTile = React53.memo(Tile);
 var VideoTile_default = VideoTile;
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 import React54 from "react";
-import { useMedia as useMedia8 } from "react-use";
+import { useMedia as useMedia9 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
 import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { RadioIcon } from "@100mslive/react-icons";
@@ -6853,7 +6873,7 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia8(config.media.md);
+  const isMobile = useMedia9(config.media.md);
   const { isHLSRunning } = useRecordingStreaming3();
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = ((_c = (_b7 = (_a7 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
@@ -6903,7 +6923,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-var VirtualBackground = React55.lazy(() => import("./VirtualBackground-A5UM363O.js"));
+var VirtualBackground = React55.lazy(() => import("./VirtualBackground-3TI5NA4V.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6946,7 +6966,7 @@ var PreviewJoin = ({
     },
     asRole
   });
-  const roomState = useHMSStore26(selectRoomState7);
+  const roomState = useHMSStore25(selectRoomState6);
   const savePreferenceAndJoin = useCallback17(() => {
     setPreviewPreference({
       name
@@ -6956,6 +6976,10 @@ var PreviewJoin = ({
   }, [join, name, setPreviewPreference, onJoin]);
   const roomLayout = useRoomLayout();
   const { preview_header: previewHeader = {} } = ((_c = (_b7 = (_a7 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
+  const localPeer = useHMSStore25(selectLocalPeer);
+  const videoTrack = useHMSStore25(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isMobile = useMedia10(config.media.md);
+  const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
   useEffect24(() => {
     if (authToken) {
       if (skipPreview) {
@@ -6970,7 +6994,7 @@ var PreviewJoin = ({
       setName(initialName);
     }
   }, [initialName]);
-  return roomState === HMSRoomState7.Preview ? /* @__PURE__ */ React55.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React55.createElement(Box, null), /* @__PURE__ */ React55.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(Logo, null), /* @__PURE__ */ React55.createElement(
+  return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React55.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React55.createElement(Box, null), /* @__PURE__ */ React55.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(Logo, null), /* @__PURE__ */ React55.createElement(
     Text,
     {
       variant: "h4",
@@ -7005,7 +7029,7 @@ var PreviewJoin = ({
       }
     },
     /* @__PURE__ */ React55.createElement(PreviewTile, { name, error: previewError })
-  ) : null, /* @__PURE__ */ React55.createElement(Box, { css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React55.createElement(
+  ) : null, /* @__PURE__ */ React55.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React55.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React55.createElement(
     PreviewForm_default,
     {
       name,
@@ -7024,15 +7048,15 @@ var Container3 = styled("div", __spreadProps(__spreadValues({
   px: "$10"
 }));
 var PreviewTile = ({ name, error }) => {
-  const localPeer = useHMSStore26(selectLocalPeer);
+  const localPeer = useHMSStore25(selectLocalPeer);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle2();
-  const isVideoOn = useHMSStore26(selectIsLocalVideoEnabled5);
+  const isVideoOn = useHMSStore25(selectIsLocalVideoEnabled5);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack);
-  const track = useHMSStore26(trackSelector);
+  const track = useHMSStore25(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-  const videoTrack = useHMSStore26(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia9(config.media.md);
+  const videoTrack = useHMSStore25(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
+  const isMobile = useMedia10(config.media.md);
   const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
   return /* @__PURE__ */ React55.createElement(
     StyledVideoTile.Container,
@@ -7040,7 +7064,7 @@ var PreviewTile = ({ name, error }) => {
       css: {
         bg: "$surface_default",
         aspectRatio,
-        height: "min(640px, 40vh)",
+        height: "min(360px, 70vh)",
         maxWidth: "640px",
         overflow: "clip",
         "@md": {
@@ -7058,15 +7082,15 @@ var PreviewTile = ({ name, error }) => {
         "data-testid": "preview_tile"
       }
     ), !isVideoOn ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React55.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React55.createElement(FullPageProgress_default, null) : null,
-    showMuteIcon ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React55.createElement(MicOffIcon4, null)) : /* @__PURE__ */ React55.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
+    showMuteIcon ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React55.createElement(MicOffIcon4, null)) : /* @__PURE__ */ React55.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
   );
 };
 var PreviewControls = ({ hideSettings }) => {
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia10(config.media.md);
   return /* @__PURE__ */ React55.createElement(
     Flex,
     {
-      justify: "between",
+      justify: hideSettings && isMobile ? "center" : "between",
       css: {
         width: "100%",
         mt: "$8"
@@ -7124,7 +7148,7 @@ var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 import React58, { useEffect as useEffect25, useState as useState20 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore26 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
 import React57 from "react";
@@ -7146,7 +7170,7 @@ var Toast2 = (_a7) => {
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
-  const isConnected = useHMSStore27(selectIsConnectedToRoom3);
+  const isConnected = useHMSStore26(selectIsConnectedToRoom3);
   const [toasts, setToast] = useState20([]);
   useEffect25(() => {
     ToastManager.addListener(setToast);
@@ -7168,13 +7192,13 @@ var ToastContainer = () => {
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
 import React59, { useCallback as useCallback18, useEffect as useEffect26, useMemo as useMemo4, useState as useState21 } from "react";
-import { useMedia as useMedia10 } from "react-use";
+import { useMedia as useMedia11 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID6,
   selectPeerNameByID as selectPeerNameByID2,
   useCustomEvent as useCustomEvent3,
-  useHMSStore as useHMSStore28,
-  useHMSVanillaStore as useHMSVanillaStore6
+  useHMSStore as useHMSStore27,
+  useHMSVanillaStore as useHMSVanillaStore7
 } from "@100mslive/react-sdk";
 var emojiCount = 1;
 var flyAndFade = keyframes({
@@ -7200,10 +7224,10 @@ var getStartingPoints = (isMobile) => {
   return arr;
 };
 function FlyingEmoji() {
-  const localPeerId = useHMSStore28(selectLocalPeerID6);
-  const vanillaStore = useHMSVanillaStore6();
+  const localPeerId = useHMSStore27(selectLocalPeerID6);
+  const vanillaStore = useHMSVanillaStore7();
   const [emojis, setEmojis] = useState21([]);
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const startingPoints = useMemo4(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback18(
     ({ emojiId, senderId }) => {
@@ -7317,7 +7341,7 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPermissions as selectPermissions4,
   useHMSActions as useHMSActions19,
-  useHMSStore as useHMSStore30,
+  useHMSStore as useHMSStore29,
   useRecordingStreaming as useRecordingStreaming5
 } from "@100mslive/react-sdk";
 
@@ -7331,11 +7355,11 @@ import {
   selectPeerMetadata as selectPeerMetadata3,
   selectPeers,
   selectRemotePeers,
-  useHMSStore as useHMSStore29,
-  useHMSVanillaStore as useHMSVanillaStore7
+  useHMSStore as useHMSStore28,
+  useHMSVanillaStore as useHMSVanillaStore8
 } from "@100mslive/react-sdk";
 var useFilteredRoles = () => {
-  const roles = useHMSStore29(selectAvailableRoleNames2).filter((role) => !isInternalRole(role));
+  const roles = useHMSStore28(selectAvailableRoleNames2);
   return roles;
 };
 var useShowStreamingUI = () => {
@@ -7346,12 +7370,12 @@ var useShowStreamingUI = () => {
 };
 var useParticipants2 = (params) => {
   var _a7;
-  const isConnected = useHMSStore29(selectIsConnectedToRoom4);
-  const peerCount = useHMSStore29(selectPeerCount);
-  const availableRoles = useHMSStore29(selectAvailableRoleNames2);
-  let participantList = useHMSStore29(isConnected ? selectPeers : selectRemotePeers);
+  const isConnected = useHMSStore28(selectIsConnectedToRoom4);
+  const peerCount = useHMSStore28(selectPeerCount);
+  const availableRoles = useHMSStore28(selectAvailableRoleNames2);
+  let participantList = useHMSStore28(isConnected ? selectPeers : selectRemotePeers);
   const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore7();
+  const vanillaStore = useHMSVanillaStore8();
   if ((_a7 = params == null ? void 0 : params.metadata) == null ? void 0 : _a7.isHandRaised) {
     participantList = participantList.filter((peer) => {
       return vanillaStore.getState(selectPeerMetadata3(peer.id)).isHandRaised;
@@ -7370,10 +7394,10 @@ var useParticipants2 = (params) => {
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
 var useAutoStartStreaming = () => {
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore30(selectPermissions4);
+  const permissions = useHMSStore29(selectPermissions4);
   const showStreamingUI = useShowStreamingUI();
   const hmsActions = useHMSActions19();
-  const isConnected = useHMSStore30(selectIsConnectedToRoom5);
+  const isConnected = useHMSStore29(selectIsConnectedToRoom5);
   const { isHLSRunning } = useRecordingStreaming5();
   const streamStartedRef = useRef9(false);
   const startHLS = useCallback20(() => __async(void 0, null, function* () {
@@ -7407,7 +7431,7 @@ var useAutoStartStreaming = () => {
 };
 
 // src/Prebuilt/App.tsx
-var Conference = React61.lazy(() => import("./conference-S7R3O4OC.js"));
+var Conference = React61.lazy(() => import("./conference-JNABIZBG.js"));
 var HMSPrebuilt = React61.forwardRef(
   ({
     roomCode = "",
@@ -7581,7 +7605,7 @@ var RouteList = () => {
   )), isLeaveScreenEnabled ? /* @__PURE__ */ React61.createElement(Route, { path: "leave" }, /* @__PURE__ */ React61.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React61.createElement(PostLeave_default, null) }), /* @__PURE__ */ React61.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React61.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React61.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React61.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React61.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React61.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
 };
 var BackSwipe = () => {
-  const isConnectedToRoom = useHMSStore31(selectIsConnectedToRoom6);
+  const isConnectedToRoom = useHMSStore30(selectIsConnectedToRoom6);
   const hmsActions = useHMSActions20();
   useEffect29(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
@@ -7700,14 +7724,13 @@ export {
   DialogInputFile,
   FullPageProgress_default,
   ToastManager,
-  getMetadata,
-  isScreenshareSupported,
-  isInternalRole,
-  getFormattedCount,
   PictureInPicture,
   useRoomLayoutPreviewScreen,
   useRoomLayoutConferencingScreen,
   useRedirectToLeave,
+  getMetadata,
+  isScreenshareSupported,
+  getFormattedCount,
   Sheet,
   useMyMetadata,
   StopRecordingInSheet,
@@ -7729,4 +7752,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-Q6U22HIE.js.map
+//# sourceMappingURL=chunk-Z7P5WITU.js.map