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

package/dist/{chunk-LYSAET4G.js → chunk-6JF3GAOH.js}

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-POE7H4IE.js";
+} from "./chunk-KAJJ56J4.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -234,12 +234,12 @@ var StyledButton = styled("button", __spreadProps(__spreadValues({}, flexCenter)
   variants: {
     variant: {
       standard: getButtonVariants(
-        "$secondary_default",
-        "$secondary_bright",
-        "$secondary_dim",
-        "$secondary_disabled",
-        "$on_secondary_high",
-        "$on_secondary_low"
+        "$surface_brighter",
+        "$surface_bright",
+        "$surface_default",
+        "$surface_dim",
+        "$on_surface_high",
+        "$on_surface_low"
       ),
       danger: getButtonVariants(
         "$alert_error_default",
@@ -1990,12 +1990,12 @@ 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,
   HMSRoomProvider,
-  selectIsConnectedToRoom as selectIsConnectedToRoom7,
+  selectIsConnectedToRoom as selectIsConnectedToRoom6,
   useHMSActions as useHMSActions20,
   useHMSStore as useHMSStore31
 } from "@100mslive/react-sdk";
@@ -3027,7 +3027,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 +3051,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}`
           }
@@ -4254,7 +4254,7 @@ 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}`
@@ -4262,6 +4262,7 @@ function Notifications() {
           updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
+      }
       case HMSNotificationTypes7.CHANGE_TRACK_STATE_REQUEST:
         const track = (_n = notification.data) == null ? void 0 : _n.track;
         if (!notification.data.enabled) {
@@ -4301,13 +4302,12 @@ import { ExitIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/Header.tsx
 import React36 from "react";
-import { useMedia as useMedia4 } from "react-use";
+import { useMedia as useMedia3 } 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 { useMedia as useMedia2 } from "react-use";
-import { selectDominantSpeaker, selectIsConnectedToRoom as selectIsConnectedToRoom2, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
+import React31, { useEffect as useEffect17, useState as useState11 } from "react";
+import { selectDominantSpeaker, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
 import { VolumeOneIcon } from "@100mslive/react-icons";
 var SpeakerTag = () => {
   const dominantSpeaker = useHMSStore9(selectDominantSpeaker);
@@ -4335,12 +4335,12 @@ var Logo = () => {
   var _a7;
   const roomLayout = useRoomLayout();
   const logo = (_a7 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a7.url;
-  const isMobile = useMedia2(config.media.md);
-  const isConnected = useHMSStore9(selectIsConnectedToRoom2);
   const [hideImage, setHideImage] = useState11(false);
-  if (isConnected && isMobile) {
-    return null;
-  }
+  useEffect17(() => {
+    if (hideImage) {
+      setHideImage(false);
+    }
+  }, [logo]);
   return logo && !hideImage ? /* @__PURE__ */ React31.createElement(
     LogoImg,
     {
@@ -4355,12 +4355,12 @@ 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 { useMedia as useMedia3 } from "react-use";
+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,
   selectHLSState as selectHLSState2,
-  selectIsConnectedToRoom as selectIsConnectedToRoom3,
+  selectIsConnectedToRoom as selectIsConnectedToRoom2,
   selectPermissions,
   selectRoomState as selectRoomState4,
   useHMSActions as useHMSActions12,
@@ -4467,7 +4467,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,11 +4480,11 @@ 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,
@@ -4497,8 +4497,6 @@ var useMyMetadata = () => {
   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 update = (updatedFields) => __async(void 0, null, function* () {
     try {
       const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -4509,35 +4507,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 +4551,7 @@ var useWhiteboardMetadata = () => {
       console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
     }
   }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
-  useEffect17(() => {
+  useEffect18(() => {
     window.toggleWhiteboard = toggleWhiteboard;
   }, [toggleWhiteboard]);
   return {
@@ -4662,7 +4644,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),
@@ -4754,9 +4736,9 @@ var LiveStatus = () => {
   var _a7;
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming2();
   const hlsState = useHMSStore15(selectHLSState2);
-  const isMobile = useMedia3(config.media.md);
+  const isMobile = useMedia2(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 +4747,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();
     }
@@ -4799,7 +4781,7 @@ var LiveStatus = () => {
 var RecordingStatus = () => {
   const { isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn, isRecordingOn } = useRecordingStreaming2();
   const permissions = useHMSStore15(selectPermissions);
-  const isMobile = useMedia3(config.media.md);
+  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
   [permissions == null ? void 0 : permissions.browserRecording, !isServerRecordingOn, !isHLSRecordingOn, isBrowserRecordingOn].every(
@@ -4832,7 +4814,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();
@@ -4898,8 +4880,8 @@ var StartRecording = () => {
   );
 };
 var StreamActions = () => {
-  const isConnected = useHMSStore15(selectIsConnectedToRoom3);
-  const isMobile = useMedia3(config.media.md);
+  const isConnected = useHMSStore15(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);
 };
@@ -5054,7 +5036,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React35.createElement(Rea
 // src/Prebuilt/components/Header/Header.tsx
 var Header2 = () => {
   const roomState = useHMSStore17(selectRoomState5);
-  const isMobile = useMedia4(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   if (roomState !== HMSRoomState5.Connected) {
     return /* @__PURE__ */ React36.createElement(React36.Fragment, null);
   }
@@ -5130,8 +5112,8 @@ 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 { useMedia as useMedia10 } from "react-use";
+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 {
   HMSRoomState as HMSRoomState7,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5,
@@ -5539,15 +5521,15 @@ 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 { useMedia as useMedia5 } from "react-use";
+import React48, { useCallback as useCallback15, useEffect as useEffect21, useState as useState15 } from "react";
+import { useMedia as useMedia4 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Settings/common.js
 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 +5659,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 +5717,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") {
@@ -5950,27 +5932,27 @@ var settingsList = [
 // src/Prebuilt/components/Settings/SettingsModal.jsx
 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 isMobile = useMedia4(mediaQueryLg);
+  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,7 +6133,7 @@ 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,
@@ -6168,8 +6150,8 @@ import {
 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 { useMedia as useMedia8 } from "react-use";
+import React52, { useState as useState17 } from "react";
+import { useMedia as useMedia7 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID4,
   selectPeerByID as selectPeerByID2,
@@ -6182,8 +6164,8 @@ 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 { useMedia as useMedia6 } from "react-use";
+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";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
@@ -6297,8 +6279,8 @@ var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
   const hmsActions = useHMSActions16();
   const localPeerName = useHMSStore22(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState17(localPeerName);
-  const isMobile = useMedia6(config.media.md);
+  const [currentName, setCurrentName] = useState16(localPeerName);
+  const isMobile = useMedia5(config.media.md);
   const changeName = () => __async(void 0, null, function* () {
     const name = currentName.trim();
     if (!name || name === localPeerName) {
@@ -6336,7 +6318,7 @@ var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
 
 // src/Prebuilt/components/TileMenu/TileMenuContent.jsx
 import React51, { Fragment as Fragment4 } from "react";
-import { useMedia as useMedia7 } from "react-use";
+import { useMedia as useMedia6 } from "react-use";
 import {
   selectPermissions as selectPermissions2,
   selectSessionStore as selectSessionStore2,
@@ -6502,7 +6484,7 @@ var TileMenuContent = (props) => {
   const { sendEvent } = useCustomEvent2({
     type: REMOTE_STOP_SCREENSHARE_TYPE
   });
-  const isMobile = useMedia7(config.media.md);
+  const isMobile = useMedia6(config.media.md);
   return isLocal ? (showPinAction || canMinimise) && /* @__PURE__ */ React51.createElement(React51.Fragment, null, showPinAction && /* @__PURE__ */ React51.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React51.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React51.createElement(MinimiseInset, null), /* @__PURE__ */ React51.createElement(
     StyledMenuTile.ItemButton,
     {
@@ -6567,10 +6549,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 +6578,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;
@@ -6607,9 +6589,9 @@ var TileMenu = ({
   const showPinAction = audioTrackID || videoTrackID && isPrimaryVideoTrack;
   const track = useHMSStore24(selectTrackByID3(videoTrackID));
   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 isMobile = useMedia7(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 +6690,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);
@@ -6818,7 +6800,7 @@ var heightAnimation = (value) => keyframes({
 var AudioLevelIndicator = ({ trackId, value, delay }) => {
   const vanillaStore = useHMSVanillaStore5();
   const ref = useRef7();
-  useEffect22(() => {
+  useEffect23(() => {
     const unsubscribe = vanillaStore.subscribe((audioLevel) => {
       if (ref.current) {
         ref.current.style["animation"] = `${heightAnimation(
@@ -6855,7 +6837,7 @@ var VideoTile_default = VideoTile;
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 import React54 from "react";
-import { useMedia as useMedia9 } from "react-use";
+import { useMedia as useMedia8 } 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";
@@ -6871,7 +6853,7 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const isMobile = useMedia9(config.media.md);
+  const isMobile = useMedia8(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) || {};
@@ -6921,7 +6903,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-6EP3X7MO.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6942,9 +6924,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 +6956,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 +6965,7 @@ var PreviewJoin = ({
       }
     }
   }, [authToken, skipPreview]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (initialName) {
       setName(initialName);
     }
@@ -7050,7 +7032,7 @@ var PreviewTile = ({ name, error }) => {
   const track = useHMSStore26(trackSelector);
   const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
   const videoTrack = useHMSStore26(selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack));
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia9(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,
@@ -7080,8 +7062,7 @@ var PreviewTile = ({ name, error }) => {
   );
 };
 var PreviewControls = ({ hideSettings }) => {
-  const isVideoOn = useHMSStore26(selectIsLocalVideoEnabled5);
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia9(config.media.md);
   return /* @__PURE__ */ React55.createElement(
     Flex,
     {
@@ -7091,12 +7072,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,8 +7123,8 @@ var PreviewContainer = () => {
 var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-import React58, { useEffect as useEffect24, useState as useState21 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom4, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
+import React58, { useEffect as useEffect25, useState as useState20 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
 import React57 from "react";
@@ -7165,9 +7146,9 @@ var Toast2 = (_a7) => {
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
-  const isConnected = useHMSStore27(selectIsConnectedToRoom4);
-  const [toasts, setToast] = useState21([]);
-  useEffect24(() => {
+  const isConnected = useHMSStore27(selectIsConnectedToRoom3);
+  const [toasts, setToast] = useState20([]);
+  useEffect25(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
@@ -7186,8 +7167,8 @@ var ToastContainer = () => {
 };
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
-import React59, { useCallback as useCallback18, useEffect as useEffect25, useMemo as useMemo4, useState as useState22 } from "react";
-import { useMedia as useMedia11 } from "react-use";
+import React59, { useCallback as useCallback18, useEffect as useEffect26, useMemo as useMemo4, useState as useState21 } from "react";
+import { useMedia as useMedia10 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID6,
   selectPeerNameByID as selectPeerNameByID2,
@@ -7221,8 +7202,8 @@ var getStartingPoints = (isMobile) => {
 function FlyingEmoji() {
   const localPeerId = useHMSStore28(selectLocalPeerID6);
   const vanillaStore = useHMSVanillaStore6();
-  const [emojis, setEmojis] = useState22([]);
-  const isMobile = useMedia11(config.media.md);
+  const [emojis, setEmojis] = useState21([]);
+  const isMobile = useMedia10(config.media.md);
   const startingPoints = useMemo4(() => getStartingPoints(isMobile), [isMobile]);
   const showFlyingEmoji = useCallback18(
     ({ emojiId, senderId }) => {
@@ -7252,7 +7233,7 @@ function FlyingEmoji() {
     type: EMOJI_REACTION_TYPE,
     onEvent: showFlyingEmoji
   });
-  useEffect25(() => {
+  useEffect26(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
   return /* @__PURE__ */ React59.createElement(
@@ -7331,9 +7312,9 @@ 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,
+  selectIsConnectedToRoom as selectIsConnectedToRoom5,
   selectPermissions as selectPermissions4,
   useHMSActions as useHMSActions19,
   useHMSStore as useHMSStore30,
@@ -7341,11 +7322,11 @@ 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,
+  selectIsConnectedToRoom as selectIsConnectedToRoom4,
   selectPeerCount,
   selectPeerMetadata as selectPeerMetadata3,
   selectPeers,
@@ -7365,7 +7346,7 @@ var useShowStreamingUI = () => {
 };
 var useParticipants2 = (params) => {
   var _a7;
-  const isConnected = useHMSStore29(selectIsConnectedToRoom5);
+  const isConnected = useHMSStore29(selectIsConnectedToRoom4);
   const peerCount = useHMSStore29(selectPeerCount);
   const availableRoles = useHMSStore29(selectAvailableRoleNames2);
   let participantList = useHMSStore29(isConnected ? selectPeers : selectRemotePeers);
@@ -7392,7 +7373,7 @@ var useAutoStartStreaming = () => {
   const permissions = useHMSStore30(selectPermissions4);
   const showStreamingUI = useShowStreamingUI();
   const hmsActions = useHMSActions19();
-  const isConnected = useHMSStore30(selectIsConnectedToRoom6);
+  const isConnected = useHMSStore30(selectIsConnectedToRoom5);
   const { isHLSRunning } = useRecordingStreaming5();
   const streamStartedRef = useRef9(false);
   const startHLS = useCallback20(() => __async(void 0, null, function* () {
@@ -7412,12 +7393,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 +7407,7 @@ var useAutoStartStreaming = () => {
 };
 
 // src/Prebuilt/App.tsx
-var Conference = React61.lazy(() => import("./conference-UWLJHMB2.js"));
+var Conference = React61.lazy(() => import("./conference-MPZNWHV5.js"));
 var HMSPrebuilt = React61.forwardRef(
   ({
     roomCode = "",
@@ -7444,7 +7425,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 +7440,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();
@@ -7600,9 +7581,9 @@ 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(selectIsConnectedToRoom7);
+  const isConnectedToRoom = useHMSStore31(selectIsConnectedToRoom6);
   const hmsActions = useHMSActions20();
-  useEffect28(() => {
+  useEffect29(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
         yield hmsActions.leave();
@@ -7701,6 +7682,7 @@ export {
   ROLE_CHANGE_DECLINED,
   useIsSidepaneTypeOpen,
   useSidepaneToggle,
+  useSidepaneReset,
   useUISettings,
   useSetUiSettings,
   useWaitingViewerRole,
@@ -7747,4 +7729,4 @@ export {
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-LYSAET4G.js.map
+//# sourceMappingURL=chunk-6JF3GAOH.js.map