@100mslive/roomkit-react 0.1.6-alpha.1 → 0.1.6-alpha.2

package/dist/{chunk-LYSAET4G.js → chunk-WVGGQZK4.js}

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-POE7H4IE.js";
+} from "./chunk-KBVIZGYW.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -1990,7 +1990,7 @@ var Collapsible = {
 };
 
 // src/Prebuilt/App.tsx
-import React61, { Suspense as Suspense2, useEffect as useEffect28, useRef as useRef10 } from "react";
+import React61, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
 import {
   HMSReactiveStore,
@@ -2951,10 +2951,12 @@ import { useNavigate as useNavigate2, useParams as useParams2 } from "react-rout
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
   HMSRoomState as HMSRoomState3,
+  selectPeerMetadata,
   selectRoomState as selectRoomState3,
   useCustomEvent,
   useHMSNotifications as useHMSNotifications7,
-  useHMSStore as useHMSStore8
+  useHMSStore as useHMSStore8,
+  useHMSVanillaStore as useHMSVanillaStore4
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/provider/roomLayoutProvider/index.tsx
@@ -3027,7 +3029,7 @@ var fetchWithRetry = (..._0) => __async(void 0, [..._0], function* (url = "", op
   throw error;
 });
 var useFetchRoomLayout = ({
-  endpoint = "https://api.100ms.live/v2/layouts/ui",
+  endpoint = "",
   authToken = ""
 }) => {
   const [layout, setLayout] = useState5(void 0);
@@ -3051,7 +3053,7 @@ var useFetchRoomLayout = ({
       }
       isFetchInProgress.current = true;
       try {
-        const resp = yield fetchWithRetry(endpoint, {
+        const resp = yield fetchWithRetry(endpoint || "https://api.100ms.live/v2/layouts/ui", {
           headers: {
             Authorization: `Bearer ${authToken}`
           }
@@ -4183,6 +4185,7 @@ function Notifications() {
   const notification = useHMSNotifications7();
   const navigate = useNavigate2();
   const params = useParams2();
+  const vanillaStore = useHMSVanillaStore4();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore8(selectRoomState3);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
@@ -4196,7 +4199,7 @@ function Notifications() {
   }, []);
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
   useEffect16(() => {
-    var _a7, _b7, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a7, _b7, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
     if (!notification || isNotificationDisabled) {
       return;
     }
@@ -4254,20 +4257,24 @@ function Notifications() {
           title: `Error: ${(_k = notification.data) == null ? void 0 : _k.message} - ${(_l = notification.data) == null ? void 0 : _l.description}`
         });
         break;
-      case HMSNotificationTypes7.ROLE_UPDATED:
+      case HMSNotificationTypes7.ROLE_UPDATED: {
         if ((_m = notification.data) == null ? void 0 : _m.isLocal) {
-          ToastManager.addToast({
-            title: `You are now a ${notification.data.roleName}`
-          });
-          updateRoomLayoutForRole(notification.data.roleName);
+          const { prevRole } = vanillaStore.getState(selectPeerMetadata((_n = notification.data) == null ? void 0 : _n.id));
+          if (prevRole !== ((_o = notification == null ? void 0 : notification.data) == null ? void 0 : _o.roleName)) {
+            ToastManager.addToast({
+              title: `You are now a ${notification.data.roleName}`
+            });
+            updateRoomLayoutForRole(notification.data.roleName);
+          }
         }
         break;
+      }
       case HMSNotificationTypes7.CHANGE_TRACK_STATE_REQUEST:
-        const track = (_n = notification.data) == null ? void 0 : _n.track;
+        const track = (_p = notification.data) == null ? void 0 : _p.track;
         if (!notification.data.enabled) {
           ToastManager.addToast({
             title: `Your ${track.source} ${track.type} was muted by
-                ${(_o = notification.data.requestedBy) == null ? void 0 : _o.name}.`
+                ${(_q = notification.data.requestedBy) == null ? void 0 : _q.name}.`
           });
         }
         break;
@@ -4305,7 +4312,7 @@ import { useMedia as useMedia4 } from "react-use";
 import { HMSRoomState as HMSRoomState5, selectRoomState as selectRoomState5, useHMSStore as useHMSStore17 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Header/HeaderComponents.jsx
-import React31, { useState as useState11 } from "react";
+import React31, { useEffect as useEffect17, useState as useState11 } from "react";
 import { useMedia as useMedia2 } from "react-use";
 import { selectDominantSpeaker, selectIsConnectedToRoom as selectIsConnectedToRoom2, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
@@ -4338,6 +4345,11 @@ var Logo = () => {
   const isMobile = useMedia2(config.media.md);
   const isConnected = useHMSStore9(selectIsConnectedToRoom2);
   const [hideImage, setHideImage] = useState11(false);
+  useEffect17(() => {
+    if (hideImage) {
+      setHideImage(false);
+    }
+  }, [logo]);
   if (isConnected && isMobile) {
     return null;
   }
@@ -4355,7 +4367,7 @@ var Logo = () => {
 };
 
 // src/Prebuilt/components/Header/StreamActions.tsx
-import React34, { useCallback as useCallback13, useEffect as useEffect18, useRef as useRef5, useState as useState14 } from "react";
+import React34, { useCallback as useCallback13, useEffect as useEffect19, useRef as useRef5, useState as useState13 } from "react";
 import { useMedia as useMedia3 } from "react-use";
 import {
   HMSRoomState as HMSRoomState4,
@@ -4467,7 +4479,7 @@ var Sheet = {
 };
 
 // src/Prebuilt/components/Header/AdditionalRoomState.jsx
-import React33, { useState as useState13 } from "react";
+import React33, { useState as useState12 } from "react";
 import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore14, useScreenShare } from "@100mslive/react-sdk";
 import {
   AudioPlayerIcon,
@@ -4480,28 +4492,26 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
-import { useCallback as useCallback10, useEffect as useEffect17, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo2 } from "react";
 import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore11 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/hooks/useMetadata.jsx
-import { useCallback as useCallback9, useState as useState12 } from "react";
+import { useCallback as useCallback9 } from "react";
 import {
   selectLocalPeerID,
-  selectPeerMetadata,
+  selectPeerMetadata as selectPeerMetadata2,
   useHMSActions as useHMSActions9,
   useHMSStore as useHMSStore10,
-  useHMSVanillaStore as useHMSVanillaStore4
+  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 [isHandRaised, setHandRaised] = useState12((metaData == null ? void 0 : metaData.isHandRaised) || false);
-  const [isBRBOn, setBRBOn] = useState12((metaData == null ? void 0 : metaData.isBRBOn) || false);
+  const vanillaStore = useHMSVanillaStore5();
+  const metaData = useHMSStore10(selectPeerMetadata2(localPeerId));
   const update = (updatedFields) => __async(void 0, null, function* () {
     try {
-      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
+      const currentMetadata = vanillaStore.getState(selectPeerMetadata2(localPeerId));
       yield hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));
       return true;
     } catch (error) {
@@ -4509,35 +4519,19 @@ var useMyMetadata = () => {
     }
   });
   const toggleHandRaise = useCallback9(() => __async(void 0, null, function* () {
-    const brbUpdate = !isHandRaised ? false : isBRBOn;
-    const success = yield update({
-      isHandRaised: !isHandRaised,
-      isBRBOn: brbUpdate
-    });
-    if (success) {
-      setBRBOn(brbUpdate);
-      setHandRaised(!isHandRaised);
-    }
-  }), [isHandRaised, isBRBOn]);
+    yield update({ isHandRaised: !(metaData == null ? void 0 : metaData.isHandRaised), isBRBOn: false });
+  }), [metaData == null ? void 0 : metaData.isHandRaised]);
   const toggleBRB = useCallback9(() => __async(void 0, null, function* () {
-    const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
-    const success = yield update({
-      isHandRaised: handRaiseUpdate,
-      isBRBOn: !isBRBOn
-    });
-    if (success) {
-      setBRBOn(!isBRBOn);
-      setHandRaised(handRaiseUpdate);
-    }
-  }), [isHandRaised, isBRBOn]);
+    yield update({ isBRBOn: !(metaData == null ? void 0 : metaData.isBRBOn), isHandRaised: false });
+  }), [metaData == null ? void 0 : metaData.isBRBOn]);
   const setPrevRole = (role) => __async(void 0, null, function* () {
     yield update({
       prevRole: role
     });
   });
   return {
-    isHandRaised,
-    isBRBOn,
+    isHandRaised: !!(metaData == null ? void 0 : metaData.isHandRaised),
+    isBRBOn: !!(metaData == null ? void 0 : metaData.isBRBOn),
     metaData,
     updateMetaData: update,
     toggleHandRaise,
@@ -4569,7 +4563,7 @@ var useWhiteboardMetadata = () => {
       console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
     }
   }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
-  useEffect17(() => {
+  useEffect18(() => {
     window.toggleWhiteboard = toggleWhiteboard;
   }, [toggleWhiteboard]);
   return {
@@ -4662,7 +4656,7 @@ var AdditionalRoomState = () => {
   const playlist = usePlaylistMusic();
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const screenshareAudio = useScreenshareAudio();
-  const [open, setOpen] = useState13(false);
+  const [open, setOpen] = useState12(false);
   const isPlaylistInactive = [
     !playlist.peer || !playlist.track,
     !((_a7 = playlist.peer) == null ? void 0 : _a7.isLocal) && !((_b7 = playlist.track) == null ? void 0 : _b7.enabled),
@@ -4756,7 +4750,7 @@ var LiveStatus = () => {
   const hlsState = useHMSStore15(selectHLSState2);
   const isMobile = useMedia3(config.media.md);
   const intervalRef = useRef5(null);
-  const [liveTime, setLiveTime] = useState14(0);
+  const [liveTime, setLiveTime] = useState13(0);
   const startTimer = useCallback13(() => {
     intervalRef.current = setInterval(() => {
       var _a8;
@@ -4765,7 +4759,7 @@ var LiveStatus = () => {
       }
     }, 1e3);
   }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (hlsState == null ? void 0 : hlsState.running) {
       startTimer();
     }
@@ -4832,7 +4826,7 @@ var RecordingStatus = () => {
 };
 var StartRecording = () => {
   const permissions = useHMSStore15(selectPermissions);
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState13(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
   const hmsActions = useHMSActions12();
@@ -5130,7 +5124,7 @@ import { useNavigate as useNavigate4, useParams as useParams4 } from "react-rout
 import { useSearchParam } from "react-use";
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-import React55, { Fragment as Fragment6, Suspense, useCallback as useCallback17, useEffect as useEffect23, useState as useState20 } from "react";
+import React55, { Fragment as Fragment6, Suspense, useCallback as useCallback17, useEffect as useEffect24, useState as useState19 } from "react";
 import { useMedia as useMedia10 } from "react-use";
 import {
   HMSRoomState as HMSRoomState7,
@@ -5539,7 +5533,7 @@ var Wrapper2 = styled("div", {
 var TileConnection_default = TileConnection;
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-import React48, { useCallback as useCallback15, useEffect as useEffect20, useState as useState16 } from "react";
+import React48, { useCallback as useCallback15, useEffect as useEffect21, useState as useState15 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
@@ -5547,7 +5541,7 @@ import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons
 import { GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Settings/DeviceSettings.jsx
-import React44, { Fragment as Fragment3, useEffect as useEffect19, useRef as useRef6, useState as useState15 } from "react";
+import React44, { Fragment as Fragment3, useEffect as useEffect20, useRef as useRef6, useState as useState14 } from "react";
 import {
   DeviceType as DeviceType3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -5677,7 +5671,7 @@ var Settings = ({ setHide }) => {
 };
 var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
   var _a7, _b7;
-  const [open, setOpen] = useState15(false);
+  const [open, setOpen] = useState14(false);
   const selectionBg = useDropdownSelection();
   const ref = useRef6(null);
   return /* @__PURE__ */ React44.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React44.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React44.createElement(
@@ -5735,8 +5729,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
 var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
 var TestAudio = ({ id }) => {
   const audioRef = useRef6(null);
-  const [playing, setPlaying] = useState15(false);
-  useEffect19(() => {
+  const [playing, setPlaying] = useState14(false);
+  useEffect20(() => {
     if (audioRef.current && id) {
       try {
         if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -5951,26 +5945,26 @@ var settingsList = [
 var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React48.createElement(React48.Fragment, null) }) => {
   const mediaQueryLg = config.media.md;
   const isMobile = useMedia5(mediaQueryLg);
-  const [showSetting, setShowSetting] = useState16(
+  const [showSetting, setShowSetting] = useState15(
     () => settingsList.reduce((obj, { tabName }) => __spreadProps(__spreadValues({}, obj), { [tabName]: true }), {})
   );
   const hideSettingByTabName = useCallback15(
     (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
     [setShowSetting]
   );
-  useEffect20(() => {
+  useEffect21(() => {
     if (screenType === "hls_live_streaming") {
       hideSettingByTabName("layout")(true);
     }
   }, [screenType, hideSettingByTabName]);
-  const [selection, setSelection] = useState16(() => {
+  const [selection, setSelection] = useState15(() => {
     var _a7;
     return (_a7 = Object.keys(showSetting).find((key) => showSetting[key])) != null ? _a7 : "";
   });
   const resetSelection = useCallback15(() => {
     setSelection("");
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     var _a7;
     if (isMobile) {
       setSelection("");
@@ -6151,24 +6145,24 @@ var SettingsContentHeader = ({ children, isMobile, onBack }) => {
 var SettingsModal_default = SettingsModal;
 
 // src/Prebuilt/components/VideoTile.jsx
-import React53, { Fragment as Fragment5, useCallback as useCallback16, useEffect as useEffect22, useMemo as useMemo3, useRef as useRef7, useState as useState19 } from "react";
+import React53, { Fragment as Fragment5, useCallback as useCallback16, useEffect as useEffect23, useMemo as useMemo3, useRef as useRef7, useState as useState18 } from "react";
 import {
   selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
   selectIsPeerAudioEnabled,
   selectLocalPeerID as selectLocalPeerID5,
-  selectPeerMetadata as selectPeerMetadata2,
+  selectPeerMetadata as selectPeerMetadata3,
   selectPeerNameByID,
   selectSessionStore as selectSessionStore3,
   selectTrackAudioByID,
   selectVideoTrackByID as selectVideoTrackByID4,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
   useHMSStore as useHMSStore25,
-  useHMSVanillaStore as useHMSVanillaStore5
+  useHMSVanillaStore as useHMSVanillaStore6
 } from "@100mslive/react-sdk";
 import { BrbTileIcon, HandIcon as HandIcon3, MicOffIcon as MicOffIcon3 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/TileMenu/TileMenu.jsx
-import React52, { useState as useState18 } from "react";
+import React52, { useState as useState17 } from "react";
 import { useMedia as useMedia8 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID4,
@@ -6182,7 +6176,7 @@ import {
 import { CrossIcon as CrossIcon8, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-import React50, { useState as useState17 } from "react";
+import React50, { useState as useState16 } from "react";
 import { useMedia as useMedia6 } from "react-use";
 import { selectLocalPeerName, useHMSActions as useHMSActions16, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
@@ -6297,7 +6291,7 @@ var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
   const hmsActions = useHMSActions16();
   const localPeerName = useHMSStore22(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState17(localPeerName);
+  const [currentName, setCurrentName] = useState16(localPeerName);
   const isMobile = useMedia6(config.media.md);
   const changeName = () => __async(void 0, null, function* () {
     const name = currentName.trim();
@@ -6567,10 +6561,10 @@ var TileMenuContent = (props) => {
 };
 
 // src/Prebuilt/components/hooks/useDropdownList.jsx
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 var useDropdownList = ({ name, open }) => {
   const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-  useEffect21(() => {
+  useEffect22(() => {
     if (open) {
       if (!dropdownList.includes(name)) {
         setDropdownList([...dropdownList, name]);
@@ -6596,7 +6590,7 @@ var TileMenu = ({
   enableSpotlightingPeer = true
 }) => {
   var _a7, _b7;
-  const [open, setOpen] = useState18(false);
+  const [open, setOpen] = useState17(false);
   const { theme: theme2 } = useTheme();
   const localPeerID = useHMSStore24(selectLocalPeerID4);
   const isLocal = localPeerID === peerID;
@@ -6609,7 +6603,7 @@ var TileMenu = ({
   const hideSimulcastLayers = !((_b7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b7.length) || track.degraded || !track.enabled;
   const isMobile = useMedia8(config.media.md);
   const peer = useHMSStore24(selectPeerByID2(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState18(false);
+  const [showNameChangeModal, setShowNameChangeModal] = useState17(false);
   useDropdownList({ open, name: "TileMenu" });
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
     return null;
@@ -6708,7 +6702,7 @@ var Tile = ({
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const isAudioMuted = !useHMSStore25(selectIsPeerAudioEnabled(peerId));
   const isVideoMuted = !(track == null ? void 0 : track.enabled);
-  const [isMouseHovered, setIsMouseHovered] = useState19(false);
+  const [isMouseHovered, setIsMouseHovered] = useState18(false);
   const isVideoDegraded = track == null ? void 0 : track.degraded;
   const isLocal = localPeerID === peerId;
   const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
@@ -6816,9 +6810,9 @@ var heightAnimation = (value) => keyframes({
   }
 });
 var AudioLevelIndicator = ({ trackId, value, delay }) => {
-  const vanillaStore = useHMSVanillaStore5();
+  const vanillaStore = useHMSVanillaStore6();
   const ref = useRef7();
-  useEffect22(() => {
+  useEffect23(() => {
     const unsubscribe = vanillaStore.subscribe((audioLevel) => {
       if (ref.current) {
         ref.current.style["animation"] = `${heightAnimation(
@@ -6845,7 +6839,7 @@ 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 metaData = useHMSStore25(selectPeerMetadata3(peerId));
   const isHandRaised = (metaData == null ? void 0 : metaData.isHandRaised) || false;
   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);
@@ -6921,7 +6915,7 @@ var Form = styled("form", {
 var PreviewForm_default = PreviewForm;
 
 // src/Prebuilt/components/Preview/PreviewJoin.tsx
-var VirtualBackground = React55.lazy(() => import("./VirtualBackground-UM2FOUHQ.js"));
+var VirtualBackground = React55.lazy(() => import("./VirtualBackground-37FXUPYO.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6942,9 +6936,9 @@ var PreviewJoin = ({
   );
   const { isStreamingOn } = useRecordingStreaming4();
   const authToken = useAuthToken();
-  const [name, setName] = useState20(initialName || previewPreference.name);
+  const [name, setName] = useState19(initialName || previewPreference.name);
   const { toggleAudio, toggleVideo } = useAVToggle2();
-  const [previewError, setPreviewError] = useState20(false);
+  const [previewError, setPreviewError] = useState19(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants();
   const { enableJoin, preview, join } = usePreviewJoin({
@@ -6974,7 +6968,7 @@ 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) || {};
-  useEffect23(() => {
+  useEffect24(() => {
     if (authToken) {
       if (skipPreview) {
         savePreferenceAndJoin();
@@ -6983,7 +6977,7 @@ var PreviewJoin = ({
       }
     }
   }, [authToken, skipPreview]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (initialName) {
       setName(initialName);
     }
@@ -7080,7 +7074,6 @@ var PreviewTile = ({ name, error }) => {
   );
 };
 var PreviewControls = ({ hideSettings }) => {
-  const isVideoOn = useHMSStore26(selectIsLocalVideoEnabled5);
   const isMobile = useMedia10(config.media.md);
   return /* @__PURE__ */ React55.createElement(
     Flex,
@@ -7091,12 +7084,12 @@ var PreviewControls = ({ hideSettings }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React55.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(AudioVideoToggle, { compact: true }), /* @__PURE__ */ React55.createElement(Suspense, { fallback: "" }, isVideoOn && !isMobile ? /* @__PURE__ */ React55.createElement(VirtualBackground, null) : null)),
+    /* @__PURE__ */ React55.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(AudioVideoToggle, null), /* @__PURE__ */ React55.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React55.createElement(VirtualBackground, null) : null)),
     !hideSettings ? /* @__PURE__ */ React55.createElement(PreviewSettings, null) : null
   );
 };
 var PreviewSettings = React55.memo(() => {
-  const [open, setOpen] = useState20(false);
+  const [open, setOpen] = useState19(false);
   return /* @__PURE__ */ React55.createElement(Fragment6, null, /* @__PURE__ */ React55.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React55.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React55.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
 });
 var PreviewJoin_default = PreviewJoin;
@@ -7142,7 +7135,7 @@ var PreviewContainer = () => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-import React58, { useEffect as useEffect24, useState as useState21 } from "react";
+import React58, { useEffect as useEffect25, useState as useState20 } from "react";
 import { selectIsConnectedToRoom as selectIsConnectedToRoom4, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
@@ -7166,8 +7159,8 @@ var Toast2 = (_a7) => {
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
   const isConnected = useHMSStore27(selectIsConnectedToRoom4);
-  const [toasts, setToast] = useState21([]);
-  useEffect24(() => {
+  const [toasts, setToast] = useState20([]);
+  useEffect25(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
@@ -7186,14 +7179,14 @@ var ToastContainer = () => {
 };
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
-import React59, { useCallback as useCallback18, useEffect as useEffect25, useMemo as useMemo4, useState as useState22 } from "react";
+import React59, { useCallback as useCallback18, useEffect as useEffect26, useMemo as useMemo4, useState as useState21 } from "react";
 import { useMedia as useMedia11 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID6,
   selectPeerNameByID as selectPeerNameByID2,
   useCustomEvent as useCustomEvent3,
   useHMSStore as useHMSStore28,
-  useHMSVanillaStore as useHMSVanillaStore6
+  useHMSVanillaStore as useHMSVanillaStore7
 } from "@100mslive/react-sdk";
 var emojiCount = 1;
 var flyAndFade = keyframes({
@@ -7220,8 +7213,8 @@ var getStartingPoints = (isMobile) => {
 };
 function FlyingEmoji() {
   const localPeerId = useHMSStore28(selectLocalPeerID6);
-  const vanillaStore = useHMSVanillaStore6();
-  const [emojis, setEmojis] = useState22([]);
+  const vanillaStore = useHMSVanillaStore7();
+  const [emojis, setEmojis] = useState21([]);
   const isMobile = useMedia11(config.media.md);
   const startingPoints = useMemo4(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback18(
@@ -7252,7 +7245,7 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  useEffect25(() => {
+  useEffect26(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
   return /* @__PURE__ */ React59.createElement(
@@ -7331,7 +7324,7 @@ function RemoteStopScreenshare() {
 }
 
 // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
-import { useCallback as useCallback20, useEffect as useEffect27, useRef as useRef9 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect28, useRef as useRef9 } from "react";
 import {
   selectIsConnectedToRoom as selectIsConnectedToRoom6,
   selectPermissions as selectPermissions4,
@@ -7341,17 +7334,17 @@ import {
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/common/hooks.js
-import { useEffect as useEffect26, useRef as useRef8, useState as useState23 } from "react";
+import { useEffect as useEffect27, useRef as useRef8, useState as useState22 } from "react";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
 import {
   selectAvailableRoleNames as selectAvailableRoleNames2,
   selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPeerCount,
-  selectPeerMetadata as selectPeerMetadata3,
+  selectPeerMetadata as selectPeerMetadata4,
   selectPeers,
   selectRemotePeers,
   useHMSStore as useHMSStore29,
-  useHMSVanillaStore as useHMSVanillaStore7
+  useHMSVanillaStore as useHMSVanillaStore8
 } from "@100mslive/react-sdk";
 var useFilteredRoles = () => {
   const roles = useHMSStore29(selectAvailableRoleNames2).filter((role) => !isInternalRole(role));
@@ -7370,10 +7363,10 @@ var useParticipants2 = (params) => {
   const availableRoles = useHMSStore29(selectAvailableRoleNames2);
   let participantList = useHMSStore29(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;
+      return vanillaStore.getState(selectPeerMetadata4(peer.id)).isHandRaised;
     });
   }
   if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
@@ -7412,12 +7405,12 @@ var useAutoStartStreaming = () => {
       setHLSStarted(false);
     }
   }), [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!isHLSStarted && !isHLSRunning) {
       streamStartedRef.current = false;
     }
   }, [isHLSStarted, isHLSRunning]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
       return;
     }
@@ -7426,7 +7419,7 @@ var useAutoStartStreaming = () => {
 };
 
 // src/Prebuilt/App.tsx
-var Conference = React61.lazy(() => import("./conference-UWLJHMB2.js"));
+var Conference = React61.lazy(() => import("./conference-FJJQ4TXX.js"));
 var HMSPrebuilt = React61.forwardRef(
   ({
     roomCode = "",
@@ -7444,7 +7437,7 @@ var HMSPrebuilt = React61.forwardRef(
     const metadata = "";
     const reactiveStore = useRef10();
     const [hydrated, setHydrated] = React61.useState(false);
-    useEffect28(() => {
+    useEffect29(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
       const hmsStore = hms.getStore();
@@ -7459,13 +7452,13 @@ var HMSPrebuilt = React61.forwardRef(
         hmsNotifications
       };
     }, []);
-    useEffect28(() => {
+    useEffect29(() => {
       if (!ref || !reactiveStore.current) {
         return;
       }
       ref.current = __spreadValues({}, reactiveStore.current);
     }, [ref]);
-    useEffect28(
+    useEffect29(
       () => () => {
         var _a8;
         (_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
@@ -7602,7 +7595,7 @@ var RouteList = () => {
 var BackSwipe = () => {
   const isConnectedToRoom = useHMSStore31(selectIsConnectedToRoom7);
   const hmsActions = useHMSActions20();
-  useEffect28(() => {
+  useEffect29(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
         yield hmsActions.leave();
@@ -7701,6 +7694,7 @@ export {
   ROLE_CHANGE_DECLINED,
   useIsSidepaneTypeOpen,
   useSidepaneToggle,
+  useSidepaneReset,
   useUISettings,
   useSetUiSettings,
   useWaitingViewerRole,
@@ -7747,4 +7741,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-LYSAET4G.js.map
+//# sourceMappingURL=chunk-WVGGQZK4.js.map