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

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

@@ -35,7 +35,7 @@ import {
   textEllipsis,
   theme,
   toastAnimation
-} from "./chunk-GQD2AGWW.js";
+} from "./chunk-POE7H4IE.js";
 
 // src/Button/Button.tsx
 import React2 from "react";
@@ -741,6 +741,7 @@ var Container = styled("div", {
   width: "100%",
   height: "100%",
   position: "relative",
+  overflow: "hidden",
   borderRadius: "$2",
   display: "flex",
   justifyContent: "center",
@@ -1989,14 +1990,14 @@ var Collapsible = {
 };
 
 // src/Prebuilt/App.tsx
-import React61, { Suspense as Suspense2, useEffect as useEffect27, useRef as useRef8 } from "react";
-import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams3 } from "react-router-dom";
+import React61, { Suspense as Suspense2, useEffect as useEffect28, useRef as useRef10 } from "react";
+import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
 import {
   HMSReactiveStore,
   HMSRoomProvider,
-  selectIsConnectedToRoom as selectIsConnectedToRoom5,
+  selectIsConnectedToRoom as selectIsConnectedToRoom7,
   useHMSActions as useHMSActions20,
-  useHMSStore as useHMSStore30
+  useHMSStore as useHMSStore31
 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/AppData/AppData.jsx
@@ -2004,6 +2005,7 @@ import React15, { useEffect as useEffect3 } from "react";
 import {
   HMSRoomState,
   selectAvailableRoleNames,
+  selectFullAppData,
   selectHLSState,
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -2112,7 +2114,6 @@ var APP_DATA = {
   appConfig: "appConfig",
   sidePane: "sidePane",
   hlsStats: "hlsStats",
-  hlsViewerRole: "hlsViewerRole",
   waitingViewerRole: "waitingViewerRole",
   subscribedNotifications: "subscribedNotifications",
   logo: "logo",
@@ -2127,11 +2128,11 @@ var APP_DATA = {
   authToken: "authToken",
   pdfConfig: "pdfConfig",
   minimiseInset: "minimiseInset",
-  activeScreensharePeerId: "activeScreensharePeerId"
+  activeScreensharePeerId: "activeScreensharePeerId",
+  disableNotificiations: "disableNotificiations"
 };
 var UI_SETTINGS = {
   isAudioOnly: "isAudioOnly",
-  isHeadless: "isHeadless",
   maxTileCount: "maxTileCount",
   uiViewMode: "uiViewMode",
   showStatsOnTiles: "showStatsOnTiles",
@@ -2224,10 +2225,6 @@ var useSetUiSettings = (uiSettingKey) => {
   });
   return [value, setValue];
 };
-var useIsHeadless = () => {
-  const isHeadless = useUISettings(UI_SETTINGS.isHeadless);
-  return isHeadless;
-};
 var useWaitingViewerRole = () => {
   return useHMSStore3(selectAppData2(APP_DATA.waitingViewerRole));
 };
@@ -2257,6 +2254,10 @@ var useSubscribedNotifications = (notificationKey) => {
   const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
   return notificationPreference;
 };
+var useIsNotificationDisabled = () => {
+  const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotificiations));
+  return notificationPreference;
+};
 var useSetSubscribedNotifications = (notificationKey) => {
   const value = useSubscribedNotifications(notificationKey);
   const setValue = useSetAppData({
@@ -2325,7 +2326,6 @@ var getAppDetails = (appDetails) => {
 var initialAppData = {
   [APP_DATA.uiSettings]: {
     [UI_SETTINGS.isAudioOnly]: false,
-    [UI_SETTINGS.isHeadless]: false,
     [UI_SETTINGS.maxTileCount]: 9,
     [UI_SETTINGS.showStatsOnTiles]: false,
     [UI_SETTINGS.enableAmbientMusic]: false,
@@ -2353,7 +2353,8 @@ var initialAppData = {
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: "",
   [APP_DATA.minimiseInset]: false,
-  [APP_DATA.activeScreensharePeerId]: ""
+  [APP_DATA.activeScreensharePeerId]: "",
+  [APP_DATA.disableNotificiations]: false
 };
 var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions3();
@@ -2364,13 +2365,14 @@ var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
   const roleNames = useHMSStore4(selectAvailableRoleNames);
   const rolesMap = useHMSStore4(selectRolesMap);
   const localPeerRole = useHMSStore4(selectLocalPeerRoleName);
+  const appData = useHMSStore4(selectFullAppData);
   useEffect3(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
       resetSidePane();
     }
   }, [isConnected, sidePane, resetSidePane]);
   useEffect3(() => {
-    hmsActions.initAppData(initialAppData);
+    hmsActions.initAppData(__spreadValues(__spreadValues({}, initialAppData), appData));
     hmsActions.setFrameworkInfo({
       type: "react-web",
       isPrebuilt: true,
@@ -2385,12 +2387,12 @@ var AppData = React15.memo(({ appDetails, tokenEndpoint }) => {
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
   }, [preferences, hmsActions]);
   useEffect3(() => {
-    const appData = {
+    const appData2 = {
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
       [APP_DATA.appConfig]: getAppDetails(appDetails)
     };
-    for (const key in appData) {
-      hmsActions.setAppData([key], appData[key]);
+    for (const key in appData2) {
+      hmsActions.setAppData([key], appData2[key]);
     }
   }, [appDetails, tokenEndpoint, hmsActions]);
   useEffect3(() => {
@@ -2452,62 +2454,9 @@ var ResetStreamingStart = () => {
   return null;
 };
 
-// src/Prebuilt/components/AudioLevel/BeamSpeakerLabelsLogging.jsx
-import { useEffect as useEffect5 } from "react";
-import { useHMSActions as useHMSActions4 } from "@100mslive/react-sdk";
-
-// src/Prebuilt/services/FeatureFlags.jsx
-import { useEffect as useEffect4 } from "react";
-import { selectRoomID, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
-var FeatureFlags = class {
-  static init(roomId) {
-    if (!window.HMS) {
-      window.HMS = {};
-    }
-    window.HMS.OPTIMISE_HLS_LATENCY = false;
-    window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;
-    window.HMS.SHOW_NS = define_process_env_default.REACT_APP_ENV !== "prod";
-    this.enableTranscription = define_process_env_default.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;
-  }
-  static showNS() {
-    return window.HMS.SHOW_NS;
-  }
-  static optimiseHLSLatency() {
-    return window.HMS.OPTIMISE_HLS_LATENCY;
-  }
-  static alwaysRequestPermissions() {
-    return window.HMS.ALWAYS_REQUEST_PERMISSIONS;
-  }
-};
-__publicField(FeatureFlags, "enableTranscription", define_process_env_default.REACT_APP_ENABLE_TRANSCRIPTION === "true");
-__publicField(FeatureFlags, "enableStatsForNerds", define_process_env_default.REACT_APP_ENABLE_STATS_FOR_NERDS === "true");
-__publicField(FeatureFlags, "enableWhiteboard", define_process_env_default.REACT_APP_ENABLE_WHITEBOARD && define_process_env_default.REACT_APP_PUSHER_APP_KEY && define_process_env_default.REACT_APP_PUSHER_AUTHENDPOINT);
-__publicField(FeatureFlags, "enableBeamSpeakersLogging", define_process_env_default.REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING === "true");
-function FeatureFlagsInit() {
-  const roomId = useHMSStore5(selectRoomID);
-  useEffect4(() => {
-    if (roomId) {
-      FeatureFlags.init(roomId);
-    }
-  }, [roomId]);
-  return null;
-}
-
-// src/Prebuilt/components/AudioLevel/BeamSpeakerLabelsLogging.jsx
-function BeamSpeakerLabelsLogging() {
-  const hmsActions = useHMSActions4();
-  const isHeadless = useIsHeadless();
-  useEffect5(() => {
-    if (FeatureFlags.enableBeamSpeakersLogging && isHeadless) {
-      hmsActions.enableBeamSpeakerLabelsLogging();
-    }
-  }, [hmsActions, isHeadless]);
-  return null;
-}
-
 // src/Prebuilt/components/AuthToken.jsx
-import React18, { useEffect as useEffect6, useState as useState4 } from "react";
-import { useHMSActions as useHMSActions5 } from "@100mslive/react-sdk";
+import React18, { useEffect as useEffect4, useState as useState4 } from "react";
+import { useHMSActions as useHMSActions4 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/AppContext.tsx
 import React16, { useContext } from "react";
@@ -2684,13 +2633,13 @@ var DialogInputFile = (_a7) => {
 
 // src/Prebuilt/components/AuthToken.jsx
 var AuthToken = React18.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
-  const hmsActions = useHMSActions5();
+  const hmsActions = useHMSActions4();
   const tokenEndpoint = useTokenEndpoint();
   const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState4({ title: "", body: "" });
   let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
-  useEffect6(() => {
+  useEffect4(() => {
     if (authToken) {
       setAuthTokenInAppData(authToken);
       return;
@@ -2830,17 +2779,55 @@ var ErrorBoundary = class extends Component {
 
 // src/Prebuilt/components/FullPageProgress.jsx
 import React20 from "react";
-var FullPageProgress = ({ loaderColor = "$primary_default", loadingText = "" }) => /* @__PURE__ */ React20.createElement(Flex, { direction: "column", justify: "center", align: "center", css: { size: "100%", color: loaderColor } }, /* @__PURE__ */ React20.createElement(Loading, { color: "currentColor", size: 100 }), loadingText ? /* @__PURE__ */ React20.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, loadingText) : null);
+var FullPageProgress = ({ loaderColor = "$primary_default", text = "", css: css2 = {} }) => /* @__PURE__ */ React20.createElement(Flex, { direction: "column", justify: "center", align: "center", css: __spreadValues({ size: "100%", color: loaderColor }, css2) }, /* @__PURE__ */ React20.createElement(Loading, { color: "currentColor", size: 100 }), text ? /* @__PURE__ */ React20.createElement(Text, { css: { mt: "$10", color: "$on_surface_high" } }, text) : null);
 var FullPageProgress_default = FullPageProgress;
 
 // src/Prebuilt/components/init/Init.jsx
-import React21, { useEffect as useEffect7 } from "react";
+import React21, { useEffect as useEffect6 } from "react";
+
+// src/Prebuilt/services/FeatureFlags.jsx
+import { useEffect as useEffect5 } from "react";
+import { selectRoomID, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
+var FeatureFlags = class {
+  static init(roomId) {
+    if (!window.HMS) {
+      window.HMS = {};
+    }
+    window.HMS.OPTIMISE_HLS_LATENCY = false;
+    window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;
+    window.HMS.SHOW_NS = define_process_env_default.REACT_APP_ENV !== "prod";
+    this.enableTranscription = define_process_env_default.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;
+  }
+  static showNS() {
+    return window.HMS.SHOW_NS;
+  }
+  static optimiseHLSLatency() {
+    return window.HMS.OPTIMISE_HLS_LATENCY;
+  }
+  static alwaysRequestPermissions() {
+    return window.HMS.ALWAYS_REQUEST_PERMISSIONS;
+  }
+};
+__publicField(FeatureFlags, "enableTranscription", define_process_env_default.REACT_APP_ENABLE_TRANSCRIPTION === "true");
+__publicField(FeatureFlags, "enableStatsForNerds", define_process_env_default.REACT_APP_ENABLE_STATS_FOR_NERDS === "true");
+__publicField(FeatureFlags, "enableWhiteboard", define_process_env_default.REACT_APP_ENABLE_WHITEBOARD && define_process_env_default.REACT_APP_PUSHER_APP_KEY && define_process_env_default.REACT_APP_PUSHER_AUTHENDPOINT);
+function FeatureFlagsInit() {
+  const roomId = useHMSStore5(selectRoomID);
+  useEffect5(() => {
+    if (roomId) {
+      FeatureFlags.init(roomId);
+    }
+  }, [roomId]);
+  return null;
+}
+
+// src/Prebuilt/components/init/Init.jsx
 var Init = () => {
   const { toggleTheme } = useTheme();
-  useEffect7(() => {
+  useEffect6(() => {
     window.toggleUiTheme = toggleTheme;
   }, [toggleTheme]);
-  useEffect7(() => {
+  useEffect6(() => {
     function resetHeight() {
       var _a7;
       document.body.style.height = `${((_a7 = window.visualViewport) == null ? void 0 : _a7.height) || window.innerHeight}px`;
@@ -2855,12 +2842,12 @@ var Init = () => {
 };
 
 // src/Prebuilt/components/Input/KeyboardInputManager.js
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect7 } from "react";
 import {
   selectAppData as selectAppData3,
   selectIsLocalAudioEnabled,
   selectIsLocalVideoEnabled,
-  useHMSActions as useHMSActions6,
+  useHMSActions as useHMSActions5,
   useHMSVanillaStore as useHMSVanillaStore3
 } from "@100mslive/react-sdk";
 var isEvenListenersAttached = false;
@@ -2949,8 +2936,8 @@ _bind = new WeakMap();
 _unbind = new WeakMap();
 var KeyboardHandler = () => {
   const store = useHMSVanillaStore3();
-  const actions = useHMSActions6();
-  useEffect8(() => {
+  const actions = useHMSActions5();
+  useEffect7(() => {
     const keyboardManager = new KeyboardInputManager(store, actions);
     keyboardManager.bindAllShortcuts();
     return keyboardManager.unbindAllShortcuts;
@@ -2959,12 +2946,13 @@ var KeyboardHandler = () => {
 };
 
 // src/Prebuilt/components/Notifications/Notifications.jsx
-import React30, { useEffect as useEffect17 } from "react";
-import { useNavigate } from "react-router-dom";
+import React30, { useCallback as useCallback8, useEffect as useEffect16 } from "react";
+import { useNavigate as useNavigate2, useParams as useParams2 } from "react-router-dom";
 import {
   HMSNotificationTypes as HMSNotificationTypes7,
   HMSRoomState as HMSRoomState3,
   selectRoomState as selectRoomState3,
+  useCustomEvent,
   useHMSNotifications as useHMSNotifications7,
   useHMSStore as useHMSStore8
 } from "@100mslive/react-sdk";
@@ -2974,7 +2962,7 @@ import React22 from "react";
 import merge from "lodash.merge";
 
 // src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts
-import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
 
 // src/Prebuilt/provider/roomLayoutProvider/constants/index.ts
 import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
@@ -3055,7 +3043,7 @@ var useFetchRoomLayout = ({
       setLayout(layout2);
     }
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     (() => __async(void 0, null, function* () {
       var _a7, _b7;
       if (isFetchInProgress.current || !authToken) {
@@ -3113,7 +3101,7 @@ var useUpdateRoomLayout = () => {
 
 // src/Prebuilt/components/Toast/ToastConfig.jsx
 import React23, { useCallback as useCallback6 } from "react";
-import { selectPeerByID, useHMSActions as useHMSActions7, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
+import { selectPeerByID, useHMSActions as useHMSActions6, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
 import {
   ChatUnreadIcon,
   ConnectivityIcon,
@@ -3132,7 +3120,7 @@ var ChatAction = React23.forwardRef((_, ref) => {
 });
 var HandRaiseAction = React23.forwardRef(({ id = "", isSingleHandRaise = true }, ref) => {
   var _a7, _b7, _c;
-  const hmsActions = useHMSActions7();
+  const hmsActions = useHMSActions6();
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peer = useHMSStore6(selectPeerByID(id));
@@ -3206,7 +3194,7 @@ var ToastConfig = {
       };
     }
   },
-  METADATA_UPDATED: {
+  RAISE_HAND: {
     single: (notification) => {
       var _a7, _b7;
       return {
@@ -3217,8 +3205,12 @@ var ToastConfig = {
     },
     multiple: (notifications) => {
       var _a7;
+      const count = new Set(notifications.map((notification) => {
+        var _a8;
+        return (_a8 = notification.data) == null ? void 0 : _a8.id;
+      })).size;
       return {
-        title: `${(_a7 = notifications[notifications.length - 1].data) == null ? void 0 : _a7.name} and ${notifications.length - 1} others raised hand`,
+        title: `${(_a7 = notifications[notifications.length - 1].data) == null ? void 0 : _a7.name} ${count > 1 ? `${count} and others` : ""} raised hand`,
         icon: /* @__PURE__ */ React23.createElement(HandIcon, null),
         action: /* @__PURE__ */ React23.createElement(HandRaiseAction, { isSingleHandRaise: false })
       };
@@ -3392,11 +3384,11 @@ function AutoplayBlockedModal() {
 }
 
 // src/Prebuilt/components/Notifications/InitErrorModal.jsx
-import React25, { useEffect as useEffect10, useState as useState6 } from "react";
+import React25, { useEffect as useEffect9, useState as useState6 } from "react";
 var InitErrorModal = ({ notification }) => {
   const [showModal, setShowModal] = useState6(false);
   const [info, setInfo] = useState6({ title: "Init Error", description: "" });
-  useEffect10(() => {
+  useEffect9(() => {
     const data = notification == null ? void 0 : notification.data;
     if (!data || data.action !== "INIT") {
       return;
@@ -3420,7 +3412,7 @@ var InitErrorModal = ({ notification }) => {
 };
 
 // src/Prebuilt/components/Notifications/PeerNotifications.jsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect10 } from "react";
 import {
   HMSNotificationTypes,
   HMSRoomState as HMSRoomState2,
@@ -3432,7 +3424,7 @@ import {
 // src/Prebuilt/common/utils.js
 var getMetadata = (metadataString) => {
   try {
-    return metadataString === "" ? {} : JSON.parse(metadataString);
+    return !metadataString ? {} : JSON.parse(metadataString);
   } catch (error) {
     return {};
   }
@@ -3466,7 +3458,7 @@ var PeerNotifications = () => {
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
   const roomState = useHMSStore7(selectRoomState2);
-  useEffect11(() => {
+  useEffect10(() => {
     var _a7, _b7;
     if (roomState !== HMSRoomState2.Connected) {
       return;
@@ -3500,7 +3492,7 @@ var PeerNotifications = () => {
 };
 
 // src/Prebuilt/components/Notifications/PermissionErrorModal.jsx
-import React26, { useEffect as useEffect12, useState as useState7 } from "react";
+import React26, { useEffect as useEffect11, useState as useState7 } from "react";
 import { useMedia } from "react-use";
 import { HMSNotificationTypes as HMSNotificationTypes2, useHMSNotifications as useHMSNotifications2 } from "@100mslive/react-sdk";
 
@@ -3516,7 +3508,7 @@ function PermissionErrorModal() {
   const [deviceType, setDeviceType] = useState7("");
   const [isSystemError, setIsSystemError] = useState7(false);
   const isMobile = useMedia(config.media.md);
-  useEffect12(() => {
+  useEffect11(() => {
     var _a7, _b7, _c, _d, _e;
     if (!notification || ((_a7 = notification.data) == null ? void 0 : _a7.code) !== 3001 && ((_b7 = notification.data) == null ? void 0 : _b7.code) !== 3011 || ((_c = notification.data) == null ? void 0 : _c.code) === 3001 && ((_d = notification.data) == null ? void 0 : _d.message.includes("screen"))) {
       return;
@@ -3558,7 +3550,7 @@ function PermissionErrorModal() {
 }
 
 // src/Prebuilt/components/Notifications/ReconnectNotifications.jsx
-import React27, { useEffect as useEffect13, useState as useState8 } from "react";
+import React27, { useEffect as useEffect12, useState as useState8 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes3, useHMSNotifications as useHMSNotifications3 } from "@100mslive/react-sdk";
 var notificationTypes2 = [
   HMSNotificationTypes3.RECONNECTED,
@@ -3566,11 +3558,10 @@ var notificationTypes2 = [
   HMSNotificationTypes3.ERROR
 ];
 var notificationId = null;
-var isQA = define_process_env_default.REACT_APP_ENV === "qa";
 var ReconnectNotifications = () => {
   const notification = useHMSNotifications3(notificationTypes2);
   const [open, setOpen] = useState8(false);
-  useEffect13(() => {
+  useEffect12(() => {
     var _a7;
     if ((notification == null ? void 0 : notification.type) === HMSNotificationTypes3.ERROR && ((_a7 = notification == null ? void 0 : notification.data) == null ? void 0 : _a7.isTerminal)) {
       setOpen(false);
@@ -3578,18 +3569,13 @@ var ReconnectNotifications = () => {
       notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
       setOpen(false);
     } else if ((notification == null ? void 0 : notification.type) === HMSNotificationTypes3.RECONNECTING) {
-      if (isQA) {
-        ToastManager.removeToast(notificationId);
-        setOpen(true);
-      } else {
-        notificationId = ToastManager.replaceToast(
-          notificationId,
-          ToastConfig.RECONNECTING.single(notification.data.message)
-        );
-      }
+      notificationId = ToastManager.replaceToast(
+        notificationId,
+        ToastConfig.RECONNECTING.single(notification.data.message)
+      );
     }
   }, [notification]);
-  if (!open || !isQA)
+  if (!open)
     return null;
   return /* @__PURE__ */ React27.createElement(Dialog.Root, { open, modal: true }, /* @__PURE__ */ React27.createElement(Dialog.Portal, { container: document.getElementById("conferencing") }, /* @__PURE__ */ React27.createElement(Dialog.Overlay, null), /* @__PURE__ */ React27.createElement(
     Dialog.Content,
@@ -3610,18 +3596,18 @@ var ReconnectNotifications = () => {
 };
 
 // src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.jsx
-import React28, { useEffect as useEffect14, useState as useState9 } from "react";
-import { HMSNotificationTypes as HMSNotificationTypes4, useHMSActions as useHMSActions8, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
+import React28, { useEffect as useEffect13, useState as useState9 } from "react";
+import { HMSNotificationTypes as HMSNotificationTypes4, useHMSActions as useHMSActions7, useHMSNotifications as useHMSNotifications4 } from "@100mslive/react-sdk";
 import { MicOnIcon } from "@100mslive/react-icons";
 var TrackBulkUnmuteModal = () => {
-  const hmsActions = useHMSActions8();
+  const hmsActions = useHMSActions7();
   const [muteNotification, setMuteNotification] = useState9(null);
   const notification = useHMSNotifications4([
     HMSNotificationTypes4.CHANGE_MULTI_TRACK_STATE_REQUEST,
     HMSNotificationTypes4.ROOM_ENDED,
     HMSNotificationTypes4.REMOVED_FROM_ROOM
   ]);
-  useEffect14(() => {
+  useEffect13(() => {
     switch (notification == null ? void 0 : notification.type) {
       case HMSNotificationTypes4.REMOVED_FROM_ROOM:
       case HMSNotificationTypes4.ROOM_ENDED:
@@ -3658,7 +3644,7 @@ var TrackBulkUnmuteModal = () => {
 };
 
 // src/Prebuilt/components/Notifications/TrackNotifications.jsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect14 } from "react";
 import { HMSNotificationTypes as HMSNotificationTypes5, useHMSNotifications as useHMSNotifications5 } from "@100mslive/react-sdk";
 var notificationTypes3 = [
   HMSNotificationTypes5.TRACK_ADDED,
@@ -3668,7 +3654,7 @@ var notificationTypes3 = [
 ];
 var TrackNotifications = () => {
   const notification = useHMSNotifications5(notificationTypes3);
-  useEffect15(() => {
+  useEffect14(() => {
     if (notification) {
       console.debug(`[${notification.type}]`, notification);
     }
@@ -3677,18 +3663,18 @@ var TrackNotifications = () => {
 };
 
 // src/Prebuilt/components/Notifications/TrackUnmuteModal.jsx
-import React29, { useEffect as useEffect16, useState as useState10 } from "react";
-import { HMSNotificationTypes as HMSNotificationTypes6, useHMSActions as useHMSActions9, useHMSNotifications as useHMSNotifications6 } from "@100mslive/react-sdk";
+import React29, { useEffect as useEffect15, useState as useState10 } from "react";
+import { HMSNotificationTypes as HMSNotificationTypes6, useHMSActions as useHMSActions8, useHMSNotifications as useHMSNotifications6 } from "@100mslive/react-sdk";
 import { MicOnIcon as MicOnIcon2 } from "@100mslive/react-icons";
 var TrackUnmuteModal = () => {
-  const hmsActions = useHMSActions9();
+  const hmsActions = useHMSActions8();
   const notification = useHMSNotifications6([
     HMSNotificationTypes6.CHANGE_TRACK_STATE_REQUEST,
     HMSNotificationTypes6.ROOM_ENDED,
     HMSNotificationTypes6.REMOVED_FROM_ROOM
   ]);
   const [muteNotification, setMuteNotification] = useState10(null);
-  useEffect16(() => {
+  useEffect15(() => {
     switch (notification == null ? void 0 : notification.type) {
       case HMSNotificationTypes6.REMOVED_FROM_ROOM:
       case HMSNotificationTypes6.ROOM_ENDED:
@@ -3722,17 +3708,496 @@ var TrackUnmuteModal = () => {
   );
 };
 
+// src/Prebuilt/components/hooks/useRedirectToLeave.tsx
+import { useCallback as useCallback7 } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+// src/Prebuilt/components/PIP/PIPManager.js
+import * as workerTimers from "worker-timers";
+
+// src/Prebuilt/components/PIP/pipUtils.js
+var CANVAS_FILL_COLOR;
+var CANVAS_STROKE_COLOR;
+function setPIPCanvasColors() {
+  if (!CANVAS_FILL_COLOR) {
+    CANVAS_FILL_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-surface_bright");
+  }
+  if (!CANVAS_STROKE_COLOR) {
+    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-border_bright");
+  }
+}
+function resetPIPCanvasColors() {
+  CANVAS_FILL_COLOR = "";
+  CANVAS_STROKE_COLOR = "";
+}
+function drawVideoElementsOnCanvas(videoElements, canvas) {
+  let videoTiles = videoElements.filter((videoElement) => videoElement.srcObject !== null);
+  const ctx = canvas.getContext("2d");
+  setPIPCanvasColors();
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (videoTiles.length === 0) {
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    return;
+  }
+  fillGridTiles(videoTiles.slice(0, 4), ctx, canvas);
+}
+function dummyChangeInCanvas(canvas) {
+  const ctx = canvas.getContext("2d");
+  setPIPCanvasColors();
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+function fillGridTiles(videoElements, ctx, canvas) {
+  const offset = 8;
+  canvas.width = 480;
+  canvas.height = 320;
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  if (videoElements.length > 0) {
+    ctx.strokeStyle = CANVAS_STROKE_COLOR;
+    ctx.lineWidth = offset / 2;
+    ctx.strokeRect(0, 0, canvas.width, canvas.height);
+  }
+  if (videoElements.length === 1) {
+    const video = videoElements[0];
+    const { width, height } = getRenderDimensions(video, canvas.width - offset, canvas.height - offset);
+    const xOffset = (canvas.width - width) / 2;
+    const yOffset = (canvas.height - height) / 2;
+    ctx.drawImage(video, xOffset, yOffset, width, height);
+  }
+  if (videoElements.length === 2) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(
+        video,
+        canvas.width / 2 - offset,
+        // This will be the max available width for each tile
+        canvas.height - offset
+      );
+      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * index;
+      const yOffset = (canvas.height - height) / 2;
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height);
+    ctx.stroke(path);
+  }
+  if (videoElements.length === 3) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
+      const xOffset = index < 2 ? (canvas.width / 2 - width) / 2 + canvas.width / 2 * index : canvas.width / 2 - width / 2;
+      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height / 2);
+    ctx.stroke(path);
+    path.moveTo(0, canvas.height / 2);
+    path.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke(path);
+  }
+  if (videoElements.length === 4) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
+      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * (index % 2);
+      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height);
+    ctx.stroke(path);
+    path.moveTo(0, canvas.height / 2);
+    path.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke(path);
+  }
+}
+function getRenderDimensions(video, width, height) {
+  let finalWidth = video.videoWidth / video.videoHeight * height;
+  let finalHeight = height;
+  if (finalWidth > width) {
+    finalWidth = width;
+    finalHeight = video.videoHeight / video.videoWidth * width;
+  }
+  return { width: finalWidth, height: finalHeight };
+}
+
+// src/Prebuilt/components/PIP/PIPManager.js
+var MAX_NUMBER_OF_TILES_IN_PIP = 4;
+var DEFAULT_FPS = 30;
+var DEFAULT_CANVAS_WIDTH = 480;
+var DEFAULT_CANVAS_HEIGHT = 320;
+var LEAVE_EVENT_NAME = "leavepictureinpicture";
+var PIPStates = {
+  starting: "starting",
+  started: "started",
+  stopping: "stopping",
+  stopped: "stopped"
+};
+var PipManager = class {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+    __publicField(this, "stop", () => __async(this, null, function* () {
+      var _a7;
+      if (this.state === PIPStates.stopped) {
+        return;
+      }
+      this.state = PIPStates.stopping;
+      (_a7 = this.pipVideo) == null ? void 0 : _a7.removeEventListener(LEAVE_EVENT_NAME, this.stop);
+      if (this.timeoutRef) {
+        workerTimers.clearTimeout(this.timeoutRef);
+        this.timeoutRef = null;
+      }
+      if (this.isOn()) {
+        this.exitPIP();
+      }
+      yield this.detachOldAttachNewTracks(this.tracksToShow, []);
+      this.onStateChange(false);
+      this.callListeners(false);
+      this.reset();
+      this.state = PIPStates.stopped;
+    }));
+    // ------- Private function --------------
+    /**
+     * @private {boolean} on - whether pip is on/off
+     */
+    __publicField(this, "callListeners", (on) => {
+      this.listeners.forEach((listener) => listener == null ? void 0 : listener(on));
+    });
+    this.reset();
+  }
+  listenToStateChange(cb) {
+    this.listeners.add(cb);
+  }
+  /**
+   * @private
+   */
+  reset() {
+    console.debug("resetting PIP state");
+    resetPIPCanvasColors();
+    this.canvas = null;
+    this.pipVideo = null;
+    this.timeoutRef = null;
+    this.hmsActions = null;
+    this.videoElements = [];
+    this.tracksToShow = [];
+    this.onStateChange = () => {
+    };
+    this.state = PIPStates.stopped;
+  }
+  /**
+   * check if PIP is supported in this browser env
+   */
+  isSupported() {
+    return !!document.pictureInPictureEnabled && !isIOS && !(isMacOS && isSafari);
+  }
+  /**
+   * check if pip is currently turned on
+   */
+  isOn() {
+    return !!document.pictureInPictureElement;
+  }
+  /**
+   * request browser to start pip and start the render loop updating the pip
+   * video element with peer tracks.
+   * @param hmsActions
+   * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
+   */
+  start(hmsActions, onStateChangeFn) {
+    return __async(this, null, function* () {
+      if (!this.isSupported()) {
+        throw new Error("pip is not supported on this browser");
+      }
+      console.debug("starting PIP, current state", this.state);
+      if (this.state === PIPStates.started) {
+        yield this.stop();
+      } else if (this.state === PIPStates.starting) {
+        return;
+      }
+      this.state = PIPStates.starting;
+      try {
+        yield this.init(hmsActions, onStateChangeFn);
+        this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
+        this.renderLoop();
+        if (!this.isOn()) {
+          yield this.requestPIP();
+        }
+        console.debug("pip started");
+        this.state = PIPStates.started;
+        this.onStateChange(true);
+        this.callListeners(true);
+      } catch (err) {
+        console.error("error in request pip", err);
+        this.state = PIPStates.stopped;
+      }
+    });
+  }
+  /**
+   * @param peers {Array} All Remote Peers present in call.
+   * @param tracksMap {Object} map of track id to track
+   * */
+  updatePeersAndTracks(peers, tracksMap) {
+    return __async(this, null, function* () {
+      if (!this.canvas) {
+        return;
+      }
+      const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
+      const currentTracksShowing = this.tracksToShow;
+      this.tracksToShow = this.orderNewTracksToShow(newTracksToShowUnordered, currentTracksShowing);
+      try {
+        yield this.detachOldAttachNewTracks(currentTracksShowing, this.tracksToShow, tracksMap);
+      } catch (error) {
+        console.error("error in detaching/attaching tracks", error);
+      }
+    });
+  }
+  /**
+   * @private
+   */
+  init(hmsActions, onStateChangeFn) {
+    return __async(this, null, function* () {
+      yield this.initMediaElements();
+      this.hmsActions = hmsActions;
+      this.onStateChange = onStateChangeFn;
+    });
+  }
+  initMediaElements() {
+    return __async(this, null, function* () {
+      if (!this.canvas) {
+        const { canvas, pipVideo } = this.initializeCanvasAndVideoElement();
+        this.canvas = canvas;
+        this.pipVideo = pipVideo;
+        this.videoElements = this.initializeVideoElements();
+        const videoPlayPromise = this.pipVideo.play();
+        dummyChangeInCanvas(this.canvas);
+        yield videoPlayPromise;
+      }
+    });
+  }
+  initializeCanvasAndVideoElement() {
+    const canvas = document.createElement("canvas");
+    canvas.width = DEFAULT_CANVAS_WIDTH;
+    canvas.height = DEFAULT_CANVAS_HEIGHT;
+    const pipVideo = document.createElement("video");
+    pipVideo.width = DEFAULT_CANVAS_WIDTH;
+    pipVideo.height = DEFAULT_CANVAS_HEIGHT;
+    pipVideo.muted = true;
+    pipVideo.srcObject = canvas.captureStream();
+    return { canvas, pipVideo };
+  }
+  initializeVideoElements() {
+    let videoElements = [];
+    for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
+      const videoElement = document.createElement("video");
+      videoElement.autoplay = true;
+      videoElement.playsinline = true;
+      videoElements.push(videoElement);
+    }
+    return videoElements;
+  }
+  /**
+   * render loop is responsible for rendering the video elements on canvas/pip.
+   * in each loop current video elements are stitched and painted on canvas
+   */
+  renderLoop() {
+    const delay = 1e3 / DEFAULT_FPS;
+    this.timeoutRef = workerTimers.setTimeout(() => {
+      if (this.state === PIPStates.stopping || this.state === PIPStates.stopped) {
+        return;
+      }
+      if (this.state === PIPStates.started) {
+        drawVideoElementsOnCanvas(this.videoElements, this.canvas);
+      }
+      this.renderLoop();
+    }, delay);
+  }
+  requestPIP() {
+    return __async(this, null, function* () {
+      try {
+        if (this.isOn()) {
+          this.exitPIP();
+        }
+        yield this.pipVideo.requestPictureInPicture();
+      } catch (error) {
+        console.error("error in requestpip", error, "state", this.state);
+        throw error;
+      }
+    });
+  }
+  exitPIP() {
+    document.exitPictureInPicture();
+  }
+  /**
+   * Logic - pick only enabled video tracks
+   * @param peers {Array<any>}
+   * @param tracksMap {Record<string, any>}
+   */
+  pickTracksToShow(peers, tracksMap) {
+    var _a7;
+    const tracksToShow = [];
+    for (const peer of peers) {
+      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
+        break;
+      } else if (peer.videoTrack && ((_a7 = tracksMap[peer.videoTrack]) == null ? void 0 : _a7.enabled)) {
+        tracksToShow.push(peer.videoTrack);
+      }
+    }
+    return tracksToShow;
+  }
+  /**
+   * there has to be a smart reordering of new tracks based on currently showing
+   * ones to reduce unnecessary displacement. If someone was showing up both
+   * earlier and now, it's a better UX to keep their position same instead
+   * of letting it change.
+   * The returned array is a shuffled version of newTracks with position of
+   * tracks present in the old tracks intact.
+   * eg. old = [1,5,9,3], new = [3,8,2,9], result = [8,2,9,3]
+   * @param oldTracks {Array}
+   * @param newTracks {Array}
+   * @return {Array}
+   */
+  orderNewTracksToShow(newTracks, oldTracks) {
+    const betterNewTracks = [];
+    const leftOvers = [];
+    newTracks.forEach((track) => {
+      const oldPosition = oldTracks.indexOf(track);
+      if (oldPosition !== -1 && oldPosition < newTracks.length) {
+        betterNewTracks[oldPosition] = track;
+      } else {
+        leftOvers.push(track);
+      }
+    });
+    for (let i = 0; i < newTracks.length; i++) {
+      if (!betterNewTracks[i]) {
+        betterNewTracks[i] = leftOvers.shift();
+      }
+    }
+    return betterNewTracks;
+  }
+  /**
+   * call detach for tracks which no longer need to be shown and attach for
+   * new ones which are to be shown now.
+   * Note: oldTracks and newTracks are not necessarily of same length
+   * @param oldTracks {Array<String>}
+   * @param newTracks {Array<String>}
+   * @param tracksMap {Record<String, any>}
+   */
+  // eslint-disable-next-line complexity
+  detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
+    return __async(this, null, function* () {
+      const numTracks = Math.max(oldTracks.length, newTracks.length);
+      for (let i = 0; i < numTracks; i++) {
+        if (oldTracks[i] === newTracks[i]) {
+          continue;
+        } else if (oldTracks[i]) {
+          if (!tracksMap || tracksMap[oldTracks[i]]) {
+            yield this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
+          }
+          if (this.videoElements[i]) {
+            this.videoElements[i].srcObject = null;
+          }
+        }
+        if (newTracks[i]) {
+          yield this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
+        }
+      }
+    });
+  }
+};
+var PictureInPicture = new PipManager();
+
+// src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
+function useRoomLayoutScreen({
+  screen
+}) {
+  var _a7;
+  const roomLayout = useRoomLayout();
+  const screenProps = (_a7 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a7[screen];
+  return screenProps;
+}
+function useRoomLayoutPreviewScreen() {
+  var _a7;
+  const screenProps = useRoomLayoutScreen({ screen: "preview" });
+  const isPreviewScreenEnabled = !!screenProps;
+  let elements;
+  let screenType;
+  if (isPreviewScreenEnabled) {
+    screenType = Object.keys(screenProps)[0];
+    elements = (_a7 = screenProps[screenType]) == null ? void 0 : _a7.elements;
+  }
+  return {
+    isPreviewScreenEnabled,
+    elements,
+    screenType
+  };
+}
+function useRoomLayoutConferencingScreen() {
+  var _a7, _b7;
+  const screenProps = useRoomLayoutScreen({ screen: "conferencing" }) || {};
+  const screenType = Object.keys(screenProps)[0];
+  const elements = (_a7 = screenProps[screenType]) == null ? void 0 : _a7.elements;
+  const hideSections = ((_b7 = screenProps[screenType]) == null ? void 0 : _b7.hideSections) || [];
+  return {
+    hideSections,
+    elements,
+    screenType
+  };
+}
+function useRoomLayoutLeaveScreen() {
+  const screenProps = useRoomLayoutScreen({ screen: "leave" });
+  const isLeaveScreenEnabled = !!screenProps;
+  return {
+    isLeaveScreenEnabled
+  };
+}
+
+// src/Prebuilt/components/hooks/useRedirectToLeave.tsx
+var useRedirectToLeave = () => {
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { onLeave } = useHMSPrebuiltContext();
+  const params = useParams();
+  const navigate = useNavigate();
+  const redirect = useCallback7(
+    (timeout = 0) => {
+      setTimeout(() => {
+        const prefix = isLeaveScreenEnabled ? "/leave/" : "/";
+        if (params.role) {
+          navigate(prefix + params.roomId + "/" + params.role);
+        } else {
+          navigate(prefix + params.roomId);
+        }
+        PictureInPicture.stop().catch(() => console.error("stopping pip"));
+        ToastManager.clearAllToast();
+        onLeave == null ? void 0 : onLeave();
+      }, timeout);
+    },
+    [isLeaveScreenEnabled, navigate, onLeave, params.role, params.roomId]
+  );
+  return { redirectToLeave: redirect };
+};
+
 // src/Prebuilt/components/Notifications/Notifications.jsx
 function Notifications() {
   const notification = useHMSNotifications7();
-  const navigate = useNavigate();
+  const navigate = useNavigate2();
+  const params = useParams2();
   const subscribedNotifications = useSubscribedNotifications() || {};
-  const isHeadless = useIsHeadless();
   const roomState = useHMSStore8(selectRoomState3);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
-  useEffect17(() => {
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+  const handleRoleChangeDenied = useCallback8((request) => {
+    ToastManager.addToast({
+      title: `${request.peerName} denied your request to join the ${request.role.name} role`,
+      variant: "error"
+    });
+  }, []);
+  useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
+  useEffect16(() => {
     var _a7, _b7, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
-    if (!notification) {
+    if (!notification || isNotificationDisabled) {
       return;
     }
     switch (notification.type) {
@@ -3741,12 +4206,12 @@ function Notifications() {
           return;
         }
         const metadata = getMetadata((_a7 = notification.data) == null ? void 0 : _a7.metadata);
-        if (!(metadata == null ? void 0 : metadata.isHandRaised) || notification.data.isLocal || isHeadless)
+        if (!(metadata == null ? void 0 : metadata.isHandRaised) || notification.data.isLocal)
           return;
         console.debug("Metadata updated", notification.data);
         if (!subscribedNotifications.METADATA_UPDATED)
           return;
-        ToastBatcher.showToast({ notification });
+        ToastBatcher.showToast({ notification, type: "RAISE_HAND" });
         break;
       case HMSNotificationTypes7.NAME_UPDATED:
         console.log(notification.data.id + " changed their name to " + notification.data.name);
@@ -3766,7 +4231,7 @@ function Notifications() {
                 {
                   onClick: () => {
                     ToastManager.removeToast(toastId);
-                    window.location.reload();
+                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ""}`);
                   }
                 },
                 "Rejoin"
@@ -3774,11 +4239,7 @@ function Notifications() {
               close: false
             });
           }
-          setTimeout(() => {
-            const previewLocation = window.location.pathname.replace("meeting", "leave");
-            ToastManager.clearAllToast();
-            navigate(previewLocation);
-          }, 2e3);
+          redirectToLeave(1e3);
           return;
         }
         if (((_g = notification.data) == null ? void 0 : _g.code) === 3008 || ((_h = notification.data) == null ? void 0 : _h.code) === 3001 || ((_i = notification.data) == null ? void 0 : _i.code) === 3011) {
@@ -3816,11 +4277,7 @@ function Notifications() {
           title: `${notification.message}. 
               ${notification.data.reason && `Reason: ${notification.data.reason}`}`
         });
-        setTimeout(() => {
-          const leaveLocation = window.location.pathname.replace("meeting", "leave");
-          navigate(leaveLocation);
-          ToastManager.clearAllToast();
-        }, 2e3);
+        redirectToLeave(1e3);
         break;
       case HMSNotificationTypes7.DEVICE_CHANGE_UPDATE:
         ToastManager.addToast({
@@ -3831,12 +4288,15 @@ function Notifications() {
         break;
     }
   }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, !isHeadless && /* @__PURE__ */ React30.createElement(TrackUnmuteModal, null), !isHeadless && /* @__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 }));
+  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 }));
 }
 
 // src/Prebuilt/components/PostLeave.jsx
 import React37 from "react";
-import { useNavigate as useNavigate2, useParams } from "react-router-dom";
+import { useNavigate as useNavigate3, useParams as useParams3 } from "react-router-dom";
 import { ExitIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/Header/Header.tsx
@@ -3894,8 +4354,8 @@ var Logo = () => {
   ) : null;
 };
 
-// src/Prebuilt/components/Header/StreamActions.jsx
-import React34, { useCallback as useCallback11, useEffect as useEffect19, useRef as useRef5, useState as useState14 } from "react";
+// 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 {
   HMSRoomState as HMSRoomState4,
@@ -3903,7 +4363,7 @@ import {
   selectIsConnectedToRoom as selectIsConnectedToRoom3,
   selectPermissions,
   selectRoomState as selectRoomState4,
-  useHMSActions as useHMSActions13,
+  useHMSActions as useHMSActions12,
   useHMSStore as useHMSStore15,
   useRecordingStreaming as useRecordingStreaming2
 } from "@100mslive/react-sdk";
@@ -4020,27 +4480,35 @@ import {
 } from "@100mslive/react-icons";
 
 // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
-import { useCallback as useCallback8, useEffect as useEffect18, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect17, 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 useCallback7, useState as useState12 } from "react";
-import { selectLocalPeerID, selectPeerMetadata, useHMSActions as useHMSActions10, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
+import { useCallback as useCallback9, useState as useState12 } from "react";
+import {
+  selectLocalPeerID,
+  selectPeerMetadata,
+  useHMSActions as useHMSActions9,
+  useHMSStore as useHMSStore10,
+  useHMSVanillaStore as useHMSVanillaStore4
+} from "@100mslive/react-sdk";
 var useMyMetadata = () => {
-  const hmsActions = useHMSActions10();
+  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 update = (updatedFields) => __async(void 0, null, function* () {
     try {
-      yield hmsActions.changeMetadata(Object.assign(metaData, updatedFields));
+      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
+      yield hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));
       return true;
     } catch (error) {
-      console.error("failed to update metadata ", metaData, updatedFields);
+      console.error("failed to update metadata ", updatedFields);
     }
   });
-  const toggleHandRaise = useCallback7(() => __async(void 0, null, function* () {
+  const toggleHandRaise = useCallback9(() => __async(void 0, null, function* () {
     const brbUpdate = !isHandRaised ? false : isBRBOn;
     const success = yield update({
       isHandRaised: !isHandRaised,
@@ -4051,7 +4519,7 @@ var useMyMetadata = () => {
       setHandRaised(!isHandRaised);
     }
   }), [isHandRaised, isBRBOn]);
-  const toggleBRB = useCallback7(() => __async(void 0, null, function* () {
+  const toggleBRB = useCallback9(() => __async(void 0, null, function* () {
     const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
     const success = yield update({
       isHandRaised: handRaiseUpdate,
@@ -4087,7 +4555,7 @@ var useWhiteboardMetadata = () => {
   const { updateMetaData } = useMyMetadata();
   const whiteboardOwner = useHMSStore11(selectPeerByCondition(isWhiteboardOwner));
   const amIWhiteboardOwner = useMemo2(() => localPeerID === (whiteboardOwner == null ? void 0 : whiteboardOwner.id), [localPeerID, whiteboardOwner]);
-  const toggleWhiteboard = useCallback8(() => __async(void 0, null, function* () {
+  const toggleWhiteboard = useCallback10(() => __async(void 0, null, function* () {
     if (!define_process_env_default.REACT_APP_PUSHER_APP_KEY) {
       console.error("Cannot start whiteboard - Pusher Key unavailable");
     }
@@ -4101,7 +4569,7 @@ var useWhiteboardMetadata = () => {
       console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
     }
   }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
-  useEffect18(() => {
+  useEffect17(() => {
     window.toggleWhiteboard = toggleWhiteboard;
   }, [toggleWhiteboard]);
   return {
@@ -4115,29 +4583,29 @@ var useWhiteboardMetadata = () => {
 };
 
 // src/Prebuilt/components/hooks/usePlaylistMusic.js
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback11 } from "react";
 import {
   selectAudioPlaylist,
   selectAudioPlaylistTrackByPeerID,
   selectPeerSharingAudioPlaylist,
-  useHMSActions as useHMSActions11,
+  useHMSActions as useHMSActions10,
   useHMSStore as useHMSStore12
 } 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 hmsActions = useHMSActions11();
-  const play = useCallback9(
+  const hmsActions = useHMSActions10();
+  const play = useCallback11(
     (selectedId) => __async(void 0, null, function* () {
       yield hmsActions.audioPlaylist.play(selectedId);
     }),
     [hmsActions]
   );
-  const pause = useCallback9(() => {
+  const pause = useCallback11(() => {
     hmsActions.audioPlaylist.pause();
   }, [hmsActions]);
-  const setVolume = useCallback9(
+  const setVolume = useCallback11(
     (value) => {
       hmsActions.setVolume(value, track == null ? void 0 : track.id);
     },
@@ -4147,18 +4615,18 @@ var usePlaylistMusic = () => {
 };
 
 // src/Prebuilt/components/hooks/useScreenshareAudio.js
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback12 } from "react";
 import {
   selectPeerSharingAudio,
   selectScreenShareAudioByPeerID,
-  useHMSActions as useHMSActions12,
+  useHMSActions as useHMSActions11,
   useHMSStore as useHMSStore13
 } from "@100mslive/react-sdk";
 var useScreenshareAudio = () => {
-  const hmsActions = useHMSActions12();
+  const hmsActions = useHMSActions11();
   const peer = useHMSStore13(selectPeerSharingAudio);
   const track = useHMSStore13(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
-  const handleMute = useCallback10(() => {
+  const handleMute = useCallback12(() => {
     if (!peer.isLocal) {
       hmsActions.setVolume(!track.volume ? 100 : 0, track.id);
     } else {
@@ -4281,7 +4749,7 @@ var AdditionalRoomState = () => {
   ))));
 };
 
-// src/Prebuilt/components/Header/StreamActions.jsx
+// src/Prebuilt/components/Header/StreamActions.tsx
 var LiveStatus = () => {
   var _a7;
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming2();
@@ -4289,15 +4757,15 @@ var LiveStatus = () => {
   const isMobile = useMedia3(config.media.md);
   const intervalRef = useRef5(null);
   const [liveTime, setLiveTime] = useState14(0);
-  const startTimer = useCallback11(() => {
+  const startTimer = useCallback13(() => {
     intervalRef.current = setInterval(() => {
       var _a8;
-      if (hlsState == null ? void 0 : hlsState.running) {
-        setLiveTime(Date.now() - ((_a8 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a8.startedAt.getTime()));
+      if ((hlsState == null ? void 0 : hlsState.running) && ((_a8 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a8.startedAt)) {
+        setLiveTime(Date.now() - hlsState.variants[0].startedAt.getTime());
       }
     }, 1e3);
   }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (hlsState == null ? void 0 : hlsState.running) {
       startTimer();
     }
@@ -4343,6 +4811,7 @@ var RecordingStatus = () => {
   return /* @__PURE__ */ React34.createElement(
     Tooltip,
     {
+      boxCss: { zIndex: 1 },
       title: getRecordingText({
         isBrowserRecordingOn,
         isServerRecordingOn,
@@ -4366,12 +4835,12 @@ var StartRecording = () => {
   const [open, setOpen] = useState14(false);
   const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
-  const hmsActions = useHMSActions13();
+  const hmsActions = useHMSActions12();
   if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
     return null;
   }
   if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React34.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React34.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React34.createElement(RecordIcon, null), /* @__PURE__ */ React34.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React34.createElement(Popover2.Portal, null, /* @__PURE__ */ React34.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React34.createElement(Text, { variant: "body", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React34.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React34.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React34.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React34.createElement(RecordIcon, null), /* @__PURE__ */ React34.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React34.createElement(Popover2.Portal, null, /* @__PURE__ */ React34.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React34.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React34.createElement(
       Button,
       {
         "data-testid": "stop_recording_confirm",
@@ -4382,8 +4851,9 @@ var StartRecording = () => {
           try {
             yield hmsActions.stopRTMPAndRecording();
           } catch (error) {
+            const err = error;
             ToastManager.addToast({
-              title: error.message,
+              title: err.message,
               variant: "error"
             });
           }
@@ -4407,14 +4877,15 @@ var StartRecording = () => {
             record: true
           });
         } catch (error) {
-          if (error.message.includes("stream already running")) {
+          const err = error;
+          if (err.message.includes("stream already running")) {
             ToastManager.addToast({
               title: "Recording already running",
               variant: "error"
             });
           } else {
             ToastManager.addToast({
-              title: error.message,
+              title: err.message,
               variant: "error"
             });
           }
@@ -4432,7 +4903,10 @@ var StreamActions = () => {
   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);
 };
-var StopRecordingInSheet = ({ onStopRecording, onClose }) => {
+var StopRecordingInSheet = ({
+  onStopRecording,
+  onClose
+}) => {
   return /* @__PURE__ */ React34.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React34.createElement(Sheet.Content, null, /* @__PURE__ */ React34.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React34.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React34.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React34.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React34.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React34.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React34.createElement(CrossIcon4, null)))), /* @__PURE__ */ React34.createElement(HorizontalDivider, null), /* @__PURE__ */ React34.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React34.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", pb: "$8" } }, "Are you sure you want to stop recording? You can\u2019t undo this action."), /* @__PURE__ */ React34.createElement(
     Button,
     {
@@ -4454,21 +4928,24 @@ import {
   selectLocalVideoTrackID,
   selectVideoTrackByID,
   useDevices,
-  useHMSActions as useHMSActions14,
+  useHMSActions as useHMSActions13,
   useHMSStore as useHMSStore16
 } from "@100mslive/react-sdk";
 import { CameraFlipIcon, CheckIcon as CheckIcon2, CrossIcon as CrossIcon5, SpeakerIcon } from "@100mslive/react-icons";
 var CamaraFlipActions = () => {
-  const actions = useHMSActions14();
+  const actions = useHMSActions13();
   const { allDevices } = useDevices();
   const { videoInput } = allDevices;
   const isVideoOn = useHMSStore16(selectIsLocalVideoEnabled2);
   const videoTrackId = useHMSStore16(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore16(selectVideoTrackByID(videoTrackId));
+  if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
+    return null;
+  }
   return /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(
     IconButton_default,
     {
-      disabled: !(videoInput == null ? void 0 : videoInput.length) || !isVideoOn || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode),
+      disabled: !isVideoOn,
       onClick: () => __async(void 0, null, function* () {
         try {
           yield actions.switchCamera();
@@ -4529,6 +5006,7 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
       return /* @__PURE__ */ React35.createElement(
         SelectWithLabel,
         {
+          key: audioDevice.deviceId,
           label: audioDevice.label,
           id: audioDevice.deviceId,
           checked: audioDevice.deviceId === outputSelected,
@@ -4595,57 +5073,12 @@ var Header2 = () => {
   ));
 };
 
-// src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts
-function useRoomLayoutScreen({
-  screen
-}) {
-  var _a7;
-  const roomLayout = useRoomLayout();
-  const screenProps = (_a7 = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a7[screen];
-  return screenProps;
-}
-function useRoomLayoutPreviewScreen() {
-  var _a7;
-  const screenProps = useRoomLayoutScreen({ screen: "preview" });
-  const isPreviewScreenEnabled = !!screenProps;
-  let elements;
-  let screenType;
-  if (isPreviewScreenEnabled) {
-    screenType = Object.keys(screenProps)[0];
-    elements = (_a7 = screenProps[screenType]) == null ? void 0 : _a7.elements;
-  }
-  return {
-    isPreviewScreenEnabled,
-    elements,
-    screenType
-  };
-}
-function useRoomLayoutConferencingScreen() {
-  var _a7, _b7;
-  const screenProps = useRoomLayoutScreen({ screen: "conferencing" }) || {};
-  const screenType = Object.keys(screenProps)[0];
-  const elements = (_a7 = screenProps[screenType]) == null ? void 0 : _a7.elements;
-  const hideSections = ((_b7 = screenProps[screenType]) == null ? void 0 : _b7.hideSections) || [];
-  return {
-    hideSections,
-    elements,
-    screenType
-  };
-}
-function useRoomLayoutLeaveScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: "leave" });
-  const isLeaveScreenEnabled = !!screenProps;
-  return {
-    isLeaveScreenEnabled
-  };
-}
-
 // src/Prebuilt/components/PostLeave.jsx
 var PostLeave = () => {
-  const navigate = useNavigate2();
+  const navigate = useNavigate3();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { roomCode } = useHMSPrebuiltContext();
-  const { roomId, role } = useParams();
+  const { roomId, role } = useParams3();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return /* @__PURE__ */ React37.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React37.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React37.createElement(Header2, null)), /* @__PURE__ */ React37.createElement(
     Flex,
@@ -4691,13 +5124,14 @@ var PostLeave = () => {
 };
 var PostLeave_default = PostLeave;
 
-// src/Prebuilt/components/Preview/PreviewContainer.jsx
+// src/Prebuilt/components/Preview/PreviewContainer.tsx
 import React56 from "react";
-import { useNavigate as useNavigate3, useParams as useParams2 } from "react-router-dom";
+import { useNavigate as useNavigate4, useParams as useParams4 } from "react-router-dom";
 import { useSearchParam } from "react-use";
 
-// src/Prebuilt/components/Preview/PreviewJoin.jsx
-import React55, { Fragment as Fragment6, Suspense, useCallback as useCallback15, useEffect as useEffect24, useState as useState20 } from "react";
+// 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 {
   HMSRoomState as HMSRoomState7,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled5,
@@ -4705,7 +5139,7 @@ import {
   selectRoomState as selectRoomState7,
   selectVideoTrackByID as selectVideoTrackByID5,
   useAVToggle as useAVToggle2,
-  useHMSStore as useHMSStore27,
+  useHMSStore as useHMSStore26,
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming as useRecordingStreaming4
@@ -4722,7 +5156,7 @@ import {
   selectVideoTrackByID as selectVideoTrackByID2,
   useAVToggle,
   useDevices as useDevices2,
-  useHMSActions as useHMSActions15,
+  useHMSActions as useHMSActions14,
   useHMSStore as useHMSStore18
 } from "@100mslive/react-sdk";
 import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
@@ -4738,6 +5172,10 @@ var IconSection = styled(IconButton_default, {
   borderTopRightRadius: 0,
   borderColor: "$border_default",
   borderBottomRightRadius: 0,
+  position: "relative",
+  "&:not([disabled]):focus-visible": {
+    zIndex: 1
+  },
   "@md": {
     mx: 0,
     borderTopRightRadius: "$1",
@@ -4753,8 +5191,9 @@ var OptionsSection = styled(IconButton_default, {
   borderColor: "$border_default",
   borderBottomLeftRadius: 0,
   borderLeftWidth: 0,
+  position: "relative",
   "&:not([disabled]):focus-visible": {
-    boxShadow: "none"
+    zIndex: 1
   },
   "@md": {
     display: "none"
@@ -4857,16 +5296,17 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
     title: audioInput2.label
   }));
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
-  const actions = useHMSActions15();
+  const actions = useHMSActions14();
   const videoTrackId = useHMSStore18(selectLocalVideoTrackID2);
   const localVideoTrack = useHMSStore18(selectVideoTrackByID2(videoTrackId));
   const roomState = useHMSStore18(selectRoomState6);
-  const isAudioPermitted = toggleAudio && (audioInput == null ? void 0 : audioInput.length) > 0;
-  const isVideoPermitted = toggleVideo && (videoInput == null ? void 0 : videoInput.length) > 0;
-  return /* @__PURE__ */ React39.createElement(Fragment2, null, toggleAudio ? hideOptions ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React39.createElement(
+  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(
     IconButton_default,
     {
       active: isLocalAudioEnabled,
+      disabled: !toggleAudio,
       onClick: toggleAudio,
       key: "toggleAudio",
       "data-testid": "audio_btn",
@@ -4877,7 +5317,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
     IconButtonWithOptions,
     {
       options: formattedAudioInputList,
-      disabled: !isAudioPermitted,
+      disabled: !toggleAudio,
       onDisabledClick: toggleAudio,
       tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
       icon: !isLocalAudioEnabled ? /* @__PURE__ */ React39.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React39.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
@@ -4885,11 +5325,12 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
       onClick: toggleAudio,
       key: "toggleAudio"
     }
-  ) : null, toggleVideo ? hideOptions ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React39.createElement(
+  ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React39.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React39.createElement(
     IconButton_default,
     {
       key: "toggleVideo",
       active: isLocalVideoEnabled,
+      disabled: !toggleVideo,
       onClick: toggleVideo,
       "data-testid": "video_btn",
       className: "__cancel-drag-event"
@@ -4898,7 +5339,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
   )) : /* @__PURE__ */ React39.createElement(
     IconButtonWithOptions,
     {
-      disabled: !isVideoPermitted,
+      disabled: !toggleVideo,
       onDisabledClick: toggleVideo,
       options: formattedVideoInputList,
       tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
@@ -4941,11 +5382,11 @@ var Chip = ({
 };
 var Chip_default = Chip;
 
-// src/Prebuilt/components/Connection/TileConnection.jsx
+// src/Prebuilt/components/Connection/TileConnection.tsx
 import React42 from "react";
 import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
 
-// src/Prebuilt/components/Connection/ConnectionIndicator.jsx
+// src/Prebuilt/components/Connection/ConnectionIndicator.tsx
 import React41 from "react";
 import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore19 } from "@100mslive/react-sdk";
 import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
@@ -4978,14 +5419,13 @@ var getColor = (position, connectionScore, defaultColor, theme2) => {
   return defaultColor;
 };
 
-// src/Prebuilt/components/Connection/ConnectionIndicator.jsx
+// src/Prebuilt/components/Connection/ConnectionIndicator.tsx
 var Wrapper = styled("span", {
   width: "28px",
   height: "28px",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: "$background_dim",
   borderRadius: "$round",
   variants: {
     isTile: {
@@ -4996,7 +5436,11 @@ var Wrapper = styled("span", {
     }
   }
 });
-var ConnectionIndicator = ({ peerId, isTile = false }) => {
+var ConnectionIndicator = ({
+  peerId,
+  isTile = false,
+  hideBg = false
+}) => {
   var _a7;
   const downlinkQuality = (_a7 = useHMSStore19(selectConnectionQualityByPeerID2(peerId))) == null ? void 0 : _a7.downlinkQuality;
   const { theme: theme2 } = useTheme();
@@ -5008,7 +5452,7 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
     return /* @__PURE__ */ React41.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React41.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React41.createElement(PoorConnectivityIcon2, null)));
   }
   const size = isTile ? 12 : 16;
-  return /* @__PURE__ */ React41.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React41.createElement(Wrapper, { isTile, "data-testid": "tile_network" }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React41.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React41.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React41.createElement(
     "svg",
     {
       width: size,
@@ -5056,19 +5500,26 @@ var ConnectionIndicator = ({ peerId, isTile = false }) => {
   )));
 };
 
-// src/Prebuilt/components/Connection/TileConnection.jsx
-var TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned }) => {
-  return /* @__PURE__ */ React42.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(PinIcon, { width: "15", height: "15", css: { display: "block" } })), spotlighted && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(SpotlightIcon, { width: "15", height: "15", css: { display: "block" } })), /* @__PURE__ */ React42.createElement(
+// src/Prebuilt/components/Connection/TileConnection.tsx
+var TileConnection = ({
+  name,
+  peerId,
+  hideLabel,
+  width,
+  spotlighted,
+  pinned
+}) => {
+  return /* @__PURE__ */ React42.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React42.createElement(IconWrapper, null, /* @__PURE__ */ React42.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React42.createElement(
     Text,
     {
       css: __spreadValues({
         c: "$on_surface_high",
         verticalAlign: "baseline"
-      }, textEllipsis(width - 60)),
+      }, width ? textEllipsis(width - 60) : {}),
       variant: "xs"
     },
     name
-  )), /* @__PURE__ */ React42.createElement(ConnectionIndicator, { isTile: true, peerId })) : null);
+  )), /* @__PURE__ */ React42.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
 };
 var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1" });
 var Wrapper2 = styled("div", {
@@ -5088,7 +5539,7 @@ var Wrapper2 = styled("div", {
 var TileConnection_default = TileConnection;
 
 // src/Prebuilt/components/Settings/SettingsModal.jsx
-import React48, { useCallback as useCallback13, useEffect as useEffect21, useState as useState16 } from "react";
+import React48, { useCallback as useCallback15, useEffect as useEffect20, useState as useState16 } from "react";
 import { useMedia as useMedia5 } from "react-use";
 import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
 
@@ -5096,7 +5547,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 useEffect20, useRef as useRef6, useState as useState15 } from "react";
+import React44, { Fragment as Fragment3, useEffect as useEffect19, useRef as useRef6, useState as useState15 } from "react";
 import {
   DeviceType as DeviceType3,
   selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -5285,7 +5736,7 @@ var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
 var TestAudio = ({ id }) => {
   const audioRef = useRef6(null);
   const [playing, setPlaying] = useState15(false);
-  useEffect20(() => {
+  useEffect19(() => {
     if (audioRef.current && id) {
       try {
         if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -5322,8 +5773,8 @@ var TestAudio = ({ id }) => {
 var DeviceSettings_default = Settings;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
-import React46, { useCallback as useCallback12 } from "react";
-import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions16, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
+import React46, { useCallback as useCallback14 } from "react";
+import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore21 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
 import React45 from "react";
@@ -5365,11 +5816,11 @@ var SwitchWithLabel_default = SwitchWithLabel;
 
 // src/Prebuilt/components/Settings/LayoutSettings.jsx
 var LayoutSettings = () => {
-  const hmsActions = useHMSActions16();
+  const hmsActions = useHMSActions15();
   const isLocalVideoEnabled = useHMSStore21(selectIsLocalVideoEnabled4);
   const isLocalScreenShared = useHMSStore21(selectIsLocalScreenShared);
   const [{ isAudioOnly, maxTileCount, mirrorLocalVideo }, setUISettings] = useSetUiSettings();
-  const toggleIsAudioOnly = useCallback12(
+  const toggleIsAudioOnly = useCallback14(
     (isAudioOnlyModeOn) => __async(void 0, null, function* () {
       if (isAudioOnlyModeOn) {
         isLocalVideoEnabled && (yield hmsActions.setLocalVideoEnabled(false));
@@ -5503,11 +5954,11 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
   const [showSetting, setShowSetting] = useState16(
     () => settingsList.reduce((obj, { tabName }) => __spreadProps(__spreadValues({}, obj), { [tabName]: true }), {})
   );
-  const hideSettingByTabName = useCallback13(
+  const hideSettingByTabName = useCallback15(
     (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
     [setShowSetting]
   );
-  useEffect21(() => {
+  useEffect20(() => {
     if (screenType === "hls_live_streaming") {
       hideSettingByTabName("layout")(true);
     }
@@ -5516,10 +5967,10 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
     var _a7;
     return (_a7 = Object.keys(showSetting).find((key) => showSetting[key])) != null ? _a7 : "";
   });
-  const resetSelection = useCallback13(() => {
+  const resetSelection = useCallback15(() => {
     setSelection("");
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     var _a7;
     if (isMobile) {
       setSelection("");
@@ -5700,8 +6151,7 @@ var SettingsContentHeader = ({ children, isMobile, onBack }) => {
 var SettingsModal_default = SettingsModal;
 
 // src/Prebuilt/components/VideoTile.jsx
-import React53, { Fragment as Fragment5, useCallback as useCallback14, useEffect as useEffect23, useMemo as useMemo3, useRef as useRef7, useState as useState19 } from "react";
-import { useMedia as useMedia8 } from "react-use";
+import React53, { Fragment as Fragment5, useCallback as useCallback16, useEffect as useEffect22, useMemo as useMemo3, useRef as useRef7, useState as useState19 } from "react";
 import {
   selectAudioTrackByPeerID as selectAudioTrackByPeerID2,
   selectIsPeerAudioEnabled,
@@ -5713,13 +6163,13 @@ import {
   selectVideoTrackByID as selectVideoTrackByID4,
   selectVideoTrackByPeerID as selectVideoTrackByPeerID3,
   useHMSStore as useHMSStore25,
-  useHMSVanillaStore as useHMSVanillaStore4
+  useHMSVanillaStore as useHMSVanillaStore5
 } 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 { useMedia as useMedia7 } from "react-use";
+import { useMedia as useMedia8 } from "react-use";
 import {
   selectLocalPeerID as selectLocalPeerID4,
   selectPeerByID as selectPeerByID2,
@@ -5734,7 +6184,7 @@ import { CrossIcon as CrossIcon8, VerticalMenuIcon as VerticalMenuIcon2 } from "
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
 import React50, { useState as useState17 } from "react";
 import { useMedia as useMedia6 } from "react-use";
-import { selectLocalPeerName, useHMSActions as useHMSActions17, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
+import { selectLocalPeerName, useHMSActions as useHMSActions16, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
 import React49 from "react";
@@ -5764,6 +6214,7 @@ var ChangeNameContent = ({
           color: "$on_surface_high",
           fontWeight: "$semiBold",
           display: "flex",
+          pb: "$4",
           "@md": { px: "$8", borderBottom: "1px solid $border_default" }
         }
       },
@@ -5794,6 +6245,9 @@ var ChangeNameContent = ({
         onKeyDown: (e) => __async(void 0, null, function* () {
           if (e.key === "Enter" && currentName.trim().length > 0 && currentName !== localPeerName) {
             e.preventDefault();
+            if (isMobile) {
+              return;
+            }
             changeName();
           }
         })
@@ -5841,7 +6295,7 @@ var ChangeNameContent = ({
 // src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
 var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions17();
+  const hmsActions = useHMSActions16();
   const localPeerName = useHMSStore22(selectLocalPeerName);
   const [currentName, setCurrentName] = useState17(localPeerName);
   const isMobile = useMedia6(config.media.md);
@@ -5882,12 +6336,13 @@ 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 {
   selectPermissions as selectPermissions2,
   selectSessionStore as selectSessionStore2,
   selectTrackByID as selectTrackByID2,
-  useCustomEvent,
-  useHMSActions as useHMSActions18,
+  useCustomEvent as useCustomEvent2,
+  useHMSActions as useHMSActions17,
   useHMSStore as useHMSStore23,
   useRemoteAVToggle
 } from "@100mslive/react-sdk";
@@ -5912,7 +6367,7 @@ var SpotlightActions = ({
     return;
   }
 }) => {
-  const hmsActions = useHMSActions18();
+  const hmsActions = useHMSActions17();
   const spotlightPeerId = useHMSStore23(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 }));
@@ -5929,7 +6384,7 @@ var SpotlightActions = ({
         onSpotLightClick();
       }
     },
-    /* @__PURE__ */ React51.createElement(StarIcon, null),
+    /* @__PURE__ */ React51.createElement(StarIcon, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
   );
 };
@@ -5946,18 +6401,18 @@ var PinActions = ({ audioTrackID, videoTrackID }) => {
       css: spacingCSS,
       onClick: () => isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID)
     },
-    /* @__PURE__ */ React51.createElement(PinIcon2, null),
+    /* @__PURE__ */ React51.createElement(PinIcon2, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
   ));
 };
 var MinimiseInset = () => {
   const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(StyledMenuTile.ItemButton, { css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React51.createElement(ShrinkIcon, null), /* @__PURE__ */ React51.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
+  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(StyledMenuTile.ItemButton, { css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React51.createElement(ShrinkIcon, { height: 20, width: 20 }), /* @__PURE__ */ React51.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
 };
 var SimulcastLayers = ({ trackId }) => {
   var _a7;
   const track = useHMSStore23(selectTrackByID2(trackId));
-  const actions = useHMSActions18();
+  const actions = useHMSActions17();
   const bg = useDropdownSelection();
   if (!((_a7 = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a7.length) || track.degraded || !track.enabled) {
     return null;
@@ -6022,7 +6477,7 @@ var SimulcastLayers = ({ trackId }) => {
   ))));
 };
 var TileMenuContent = (props) => {
-  const actions = useHMSActions18();
+  const actions = useHMSActions17();
   const { removeOthers } = useHMSStore23(selectPermissions2);
   const {
     videoTrackID,
@@ -6044,9 +6499,10 @@ var TileMenuContent = (props) => {
     audioTrackID,
     videoTrackID
   );
-  const { sendEvent } = useCustomEvent({
+  const { sendEvent } = useCustomEvent2({
     type: REMOTE_STOP_SCREENSHARE_TYPE
   });
+  const isMobile = useMedia7(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,
     {
@@ -6055,7 +6511,7 @@ var TileMenuContent = (props) => {
         closeSheetOnClick();
       }
     },
-    /* @__PURE__ */ React51.createElement(PencilIcon, null),
+    /* @__PURE__ */ React51.createElement(PencilIcon, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement(Text, { variant: "sm", css: { "@md": { fontWeight: "$semiBold" }, c: "$on_surface_high" } }, "Change Name")
   )) : /* @__PURE__ */ React51.createElement(React51.Fragment, null, toggleVideo ? /* @__PURE__ */ React51.createElement(
     StyledMenuTile.ItemButton,
@@ -6067,7 +6523,7 @@ var TileMenuContent = (props) => {
       },
       "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
     },
-    isVideoEnabled ? /* @__PURE__ */ React51.createElement(VideoOnIcon3, null) : /* @__PURE__ */ React51.createElement(VideoOffIcon2, null),
+    isVideoEnabled ? /* @__PURE__ */ React51.createElement(VideoOnIcon3, { height: 20, width: 20 }) : /* @__PURE__ */ React51.createElement(VideoOffIcon2, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, isVideoEnabled ? "Mute" : "Request Unmute")
   ) : null, toggleAudio ? /* @__PURE__ */ React51.createElement(
     StyledMenuTile.ItemButton,
@@ -6079,9 +6535,9 @@ var TileMenuContent = (props) => {
       },
       "data-testid": isVideoEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
     },
-    isAudioEnabled ? /* @__PURE__ */ React51.createElement(MicOnIcon5, null) : /* @__PURE__ */ React51.createElement(MicOffIcon2, null),
+    isAudioEnabled ? /* @__PURE__ */ React51.createElement(MicOnIcon5, { height: 20, width: 20 }) : /* @__PURE__ */ React51.createElement(MicOffIcon2, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, isAudioEnabled ? "Mute" : "Request Unmute")
-  ) : null, audioTrackID ? /* @__PURE__ */ React51.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React51.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React51.createElement(SpeakerIcon3, null), /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React51.createElement(Slider, { css: { my: "0.5rem" }, step: 5, value: [volume], onValueChange: (e) => setVolume(e[0]) })) : null, showPinAction && /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React51.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), /* @__PURE__ */ React51.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React51.createElement(
+  ) : null, audioTrackID ? /* @__PURE__ */ React51.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React51.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React51.createElement(SpeakerIcon3, { height: 20, width: 20 }), /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React51.createElement(Slider, { css: { my: "0.5rem" }, step: 5, value: [volume], onValueChange: (e) => setVolume(e[0]) })) : null, showPinAction && /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React51.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), isMobile ? null : /* @__PURE__ */ React51.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React51.createElement(
     StyledMenuTile.RemoveItem,
     {
       css: __spreadProps(__spreadValues({}, spacingCSS), { borderTop: "none" }),
@@ -6094,7 +6550,7 @@ var TileMenuContent = (props) => {
       }),
       "data-testid": "remove_participant_btn"
     },
-    /* @__PURE__ */ React51.createElement(RemoveUserIcon, null),
+    /* @__PURE__ */ React51.createElement(RemoveUserIcon, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, "Remove Participant")
   ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React51.createElement(
     StyledMenuTile.RemoveItem,
@@ -6105,16 +6561,16 @@ var TileMenuContent = (props) => {
       },
       css: spacingCSS
     },
-    /* @__PURE__ */ React51.createElement(ShareScreenIcon2, null),
+    /* @__PURE__ */ React51.createElement(ShareScreenIcon2, { height: 20, width: 20 }),
     /* @__PURE__ */ React51.createElement("span", null, "Stop Screenshare")
   ) : null);
 };
 
 // src/Prebuilt/components/hooks/useDropdownList.jsx
-import { useEffect as useEffect22 } from "react";
+import { useEffect as useEffect21 } from "react";
 var useDropdownList = ({ name, open }) => {
   const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-  useEffect22(() => {
+  useEffect21(() => {
     if (open) {
       if (!dropdownList.includes(name)) {
         setDropdownList([...dropdownList, name]);
@@ -6151,7 +6607,7 @@ 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 = useMedia7(config.media.md);
+  const isMobile = useMedia8(config.media.md);
   const peer = useHMSStore24(selectPeerByID2(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState18(false);
   useDropdownList({ open, name: "TileMenu" });
@@ -6175,7 +6631,7 @@ var TileMenu = ({
     StyledMenuTile.Trigger,
     {
       "data-testid": "participant_menu_btn",
-      css: { bg: `${theme2.colors.background_dim.value}A3` },
+      css: { bg: `${theme2.colors.background_dim.value}A3`, p: "$2", w: "unset", h: "unset" },
       onClick: (e) => e.stopPropagation(),
       className: isMobile ? "__cancel-drag-event" : ""
     },
@@ -6239,7 +6695,8 @@ var Tile = ({
   enableSpotlightingPeer = true,
   hideParticipantNameOnTile = false,
   roundedVideoTile = true,
-  hideAudioMuteOnTile = false
+  hideAudioMuteOnTile = false,
+  hideMetadataOnTile = false
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID4(trackId) : selectVideoTrackByPeerID3(peerId);
   const track = useHMSStore25(trackSelector);
@@ -6266,7 +6723,7 @@ var Tile = ({
     track,
     isLocal
   });
-  const onHoverHandler = useCallback14((event) => {
+  const onHoverHandler = useCallback16((event) => {
     setIsMouseHovered(event.type === "mouseenter");
   }, []);
   const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
@@ -6281,7 +6738,6 @@ var Tile = ({
     }
     return "large";
   }, [width, height]);
-  const isMobile = useMedia8(config.media.md);
   return /* @__PURE__ */ React53.createElement(
     StyledVideoTile.Root,
     {
@@ -6300,7 +6756,7 @@ var Tile = ({
         css: containerCSS
       },
       showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React53.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-      track ? /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React53.createElement(
         Video,
         {
           trackId: track == null ? void 0 : track.id,
@@ -6314,19 +6770,16 @@ var Tile = ({
             bg: "transparent"
           }
         }
-      ) : null,
+      ),
       isVideoMuted || !isLocal && isAudioOnly ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null,
-      showAudioMuted({
-        hideAudioMute: hideAudioMuteOnTile,
-        isAudioMuted
-      }) ? /* @__PURE__ */ React53.createElement(
+      !hideAudioMuteOnTile ? isAudioMuted ? /* @__PURE__ */ React53.createElement(
         StyledVideoTile.AudioIndicator,
         {
           "data-testid": "participant_audio_mute_icon",
           size: width && height && (width < 180 || height < 180) ? "small" : "medium"
         },
         /* @__PURE__ */ React53.createElement(MicOffIcon3, null)
-      ) : /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id }),
+      ) : /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: audioTrack == null ? void 0 : audioTrack.id }) : null,
       isMouseHovered || isDragabble ? /* @__PURE__ */ React53.createElement(
         TileMenu_default,
         {
@@ -6337,8 +6790,8 @@ var Tile = ({
           enableSpotlightingPeer
         }
       ) : null,
-      /* @__PURE__ */ React53.createElement(PeerMetadata, { peerId }),
-      isMobile ? null : /* @__PURE__ */ React53.createElement(
+      !hideMetadataOnTile && /* @__PURE__ */ React53.createElement(PeerMetadata, { peerId }),
+      /* @__PURE__ */ React53.createElement(
         TileConnection_default,
         {
           hideLabel: hideParticipantNameOnTile,
@@ -6353,7 +6806,7 @@ var Tile = ({
     ) : null
   );
 };
-var metaStyles = { top: "$4", left: "$4" };
+var metaStyles = { top: "$4", left: "$4", width: "$14", height: "$14" };
 var heightAnimation = (value) => keyframes({
   "50%": {
     transform: `scale3d(1,${value},1)`
@@ -6363,9 +6816,9 @@ var heightAnimation = (value) => keyframes({
   }
 });
 var AudioLevelIndicator = ({ trackId, value, delay }) => {
-  const vanillaStore = useHMSVanillaStore4();
+  const vanillaStore = useHMSVanillaStore5();
   const ref = useRef7();
-  useEffect23(() => {
+  useEffect22(() => {
     const unsubscribe = vanillaStore.subscribe((audioLevel) => {
       if (ref.current) {
         ref.current.style["animation"] = `${heightAnimation(
@@ -6395,19 +6848,16 @@ var PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore25(selectPeerMetadata2(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: 24, height: 24 })) : null);
+  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);
 };
 var VideoTile = React53.memo(Tile);
-var showAudioMuted = ({ hideAudioMute, isAudioMuted }) => {
-  return isAudioMuted && !hideAudioMute;
-};
 var VideoTile_default = VideoTile;
 
 // src/Prebuilt/components/Preview/PreviewForm.tsx
 import React54 from "react";
 import { useMedia as useMedia9 } from "react-use";
 import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
-import { selectPermissions as selectPermissions4, useHMSStore as useHMSStore26, useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
+import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
 import { RadioIcon } from "@100mslive/react-icons";
 var PreviewForm = ({
   name,
@@ -6421,13 +6871,11 @@ var PreviewForm = ({
   const formSubmit = (e) => {
     e.preventDefault();
   };
-  const mediaQueryLg = config.media.md;
-  const isMobile = useMedia9(mediaQueryLg);
+  const isMobile = useMedia9(config.media.md);
   const { isHLSRunning } = useRecordingStreaming3();
-  const permissions = useHMSStore26(selectPermissions4);
   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) || {};
-  const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && (permissions == null ? void 0 : permissions.hlsStreaming);
+  const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
   return /* @__PURE__ */ React54.createElement(
     Form,
     {
@@ -6448,6 +6896,9 @@ var PreviewForm = ({
         onKeyDown: (e) => {
           if (e.key === "Enter" && name.trim().length > 0) {
             e.preventDefault();
+            if (isMobile) {
+              return;
+            }
             onJoin();
           }
         }
@@ -6469,8 +6920,8 @@ var Form = styled("form", {
 });
 var PreviewForm_default = PreviewForm;
 
-// src/Prebuilt/components/Preview/PreviewJoin.jsx
-var VirtualBackground = React55.lazy(() => import("./VirtualBackground-AYDHYLIZ.js"));
+// src/Prebuilt/components/Preview/PreviewJoin.tsx
+var VirtualBackground = React55.lazy(() => import("./VirtualBackground-UM2FOUHQ.js"));
 var getParticipantChipContent = (peerCount = 0) => {
   if (peerCount === 0) {
     return "You are the first to join";
@@ -6478,7 +6929,12 @@ var getParticipantChipContent = (peerCount = 0) => {
   const formattedNum = getFormattedCount(peerCount);
   return `${formattedNum} other${parseInt(formattedNum) === 1 ? "" : "s"} in the session`;
 };
-var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
+var PreviewJoin = ({
+  onJoin,
+  skipPreview,
+  initialName,
+  asRole
+}) => {
   var _a7, _b7, _c;
   const [previewPreference, setPreviewPreference] = useUserPreferences(
     UserPreferencesKeys.PREVIEW,
@@ -6487,7 +6943,7 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
   const { isStreamingOn } = useRecordingStreaming4();
   const authToken = useAuthToken();
   const [name, setName] = useState20(initialName || previewPreference.name);
-  const { isLocalAudioEnabled, isLocalVideoEnabled, toggleAudio, toggleVideo } = useAVToggle2();
+  const { toggleAudio, toggleVideo } = useAVToggle2();
   const [previewError, setPreviewError] = useState20(false);
   const { endpoints } = useHMSPrebuiltContext();
   const { peerCount } = useParticipants();
@@ -6508,19 +6964,17 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
     },
     asRole
   });
-  const roomState = useHMSStore27(selectRoomState7);
-  const savePreferenceAndJoin = useCallback15(() => {
+  const roomState = useHMSStore26(selectRoomState7);
+  const savePreferenceAndJoin = useCallback17(() => {
     setPreviewPreference({
-      name,
-      isAudioMuted: !isLocalAudioEnabled,
-      isVideoMuted: !isLocalVideoEnabled
+      name
     });
     join();
     onJoin && onJoin();
-  }, [join, isLocalAudioEnabled, isLocalVideoEnabled, name, setPreviewPreference, onJoin]);
+  }, [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) || {};
-  useEffect24(() => {
+  useEffect23(() => {
     if (authToken) {
       if (skipPreview) {
         savePreferenceAndJoin();
@@ -6529,7 +6983,7 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
       }
     }
   }, [authToken, skipPreview]);
-  useEffect24(() => {
+  useEffect23(() => {
     if (initialName) {
       setName(initialName);
     }
@@ -6569,14 +7023,7 @@ var PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => {
       }
     },
     /* @__PURE__ */ React55.createElement(PreviewTile, { name, error: previewError })
-  ) : null, /* @__PURE__ */ React55.createElement(Box, { css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(
-    PreviewControls,
-    {
-      enableJoin,
-      savePreferenceAndJoin,
-      hideSettings: !toggleVideo && !toggleAudio
-    }
-  ), /* @__PURE__ */ React55.createElement(
+  ) : null, /* @__PURE__ */ React55.createElement(Box, { css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React55.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React55.createElement(
     PreviewForm_default,
     {
       name,
@@ -6595,23 +7042,26 @@ var Container3 = styled("div", __spreadProps(__spreadValues({
   px: "$10"
 }));
 var PreviewTile = ({ name, error }) => {
-  const localPeer = useHMSStore27(selectLocalPeer);
+  const localPeer = useHMSStore26(selectLocalPeer);
   const { isLocalAudioEnabled, toggleAudio } = useAVToggle2();
-  const isVideoOn = useHMSStore27(selectIsLocalVideoEnabled5);
+  const isVideoOn = useHMSStore26(selectIsLocalVideoEnabled5);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID5(localPeer == null ? void 0 : localPeer.videoTrack);
-  const track = useHMSStore27(trackSelector);
+  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 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,
     {
       css: {
         bg: "$surface_default",
-        aspectRatio: 16 / 9,
-        width: "min(640px, 80vw)",
+        aspectRatio,
+        height: "min(640px, 40vh)",
+        maxWidth: "640px",
         overflow: "clip",
         "@md": {
-          aspectRatio: 9 / 16,
           width: "min(220px, 70vw)",
           maxWidth: "100%",
           my: "$4"
@@ -6626,11 +7076,12 @@ 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.audioTrack })
+    showMuteIcon ? /* @__PURE__ */ React55.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React55.createElement(MicOffIcon4, null)) : /* @__PURE__ */ React55.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack })
   );
 };
 var PreviewControls = ({ hideSettings }) => {
-  const isVideoOn = useHMSStore27(selectIsLocalVideoEnabled5);
+  const isVideoOn = useHMSStore26(selectIsLocalVideoEnabled5);
+  const isMobile = useMedia10(config.media.md);
   return /* @__PURE__ */ React55.createElement(
     Flex,
     {
@@ -6640,7 +7091,7 @@ var PreviewControls = ({ hideSettings }) => {
         mt: "$8"
       }
     },
-    /* @__PURE__ */ React55.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React55.createElement(AudioVideoToggle, { compact: true }), /* @__PURE__ */ React55.createElement(Suspense, { fallback: "" }, isVideoOn ? /* @__PURE__ */ React55.createElement(VirtualBackground, null) : null)),
+    /* @__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)),
     !hideSettings ? /* @__PURE__ */ React55.createElement(PreviewSettings, null) : null
   );
 };
@@ -6650,16 +7101,16 @@ var PreviewSettings = React55.memo(() => {
 });
 var PreviewJoin_default = PreviewJoin;
 
-// src/Prebuilt/components/Preview/PreviewContainer.jsx
+// src/Prebuilt/components/Preview/PreviewContainer.tsx
 var PreviewContainer = () => {
   var _a7, _b7, _c;
-  const navigate = useNavigate3();
+  const navigate = useNavigate4();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? "Beam" : "");
-  const { roomId: urlRoomId, role: userRole } = useParams2();
+  const { roomId: urlRoomId, role: userRole } = useParams4();
   const authToken = useAuthToken();
   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) || {};
@@ -6677,14 +7128,22 @@ var PreviewContainer = () => {
       justify: "center",
       align: "center"
     },
-    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React56.createElement(PreviewJoin_default, { initialName, skipPreview, asRole: previewAsRole, onJoin }) : /* @__PURE__ */ React56.createElement(FullPageProgress_default, null)
+    authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React56.createElement(
+      PreviewJoin_default,
+      {
+        initialName,
+        skipPreview,
+        asRole: previewAsRole != null ? previewAsRole : void 0,
+        onJoin
+      }
+    ) : /* @__PURE__ */ React56.createElement(FullPageProgress_default, null)
   ));
 };
 var PreviewContainer_default = PreviewContainer;
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
-import React58, { useEffect as useEffect25, useState as useState21 } from "react";
-import { selectIsConnectedToRoom as selectIsConnectedToRoom4, useHMSStore as useHMSStore28 } from "@100mslive/react-sdk";
+import React58, { useEffect as useEffect24, useState as useState21 } from "react";
+import { selectIsConnectedToRoom as selectIsConnectedToRoom4, useHMSStore as useHMSStore27 } from "@100mslive/react-sdk";
 
 // src/Prebuilt/components/Toast/Toast.jsx
 import React57 from "react";
@@ -6706,9 +7165,9 @@ var Toast2 = (_a7) => {
 
 // src/Prebuilt/components/Toast/ToastContainer.jsx
 var ToastContainer = () => {
-  const isConnected = useHMSStore28(selectIsConnectedToRoom4);
+  const isConnected = useHMSStore27(selectIsConnectedToRoom4);
   const [toasts, setToast] = useState21([]);
-  useEffect25(() => {
+  useEffect24(() => {
     ToastManager.addListener(setToast);
     return () => {
       ToastManager.removeListener(setToast);
@@ -6727,9 +7186,15 @@ var ToastContainer = () => {
 };
 
 // src/Prebuilt/plugins/FlyingEmoji.jsx
-import React59, { useCallback as useCallback16, useEffect as useEffect26, useMemo as useMemo4, useState as useState22 } from "react";
-import { useMedia as useMedia10 } from "react-use";
-import { selectLocalPeerID as selectLocalPeerID6, selectPeerNameByID as selectPeerNameByID2, useHMSStore as useHMSStore29, useHMSVanillaStore as useHMSVanillaStore5 } from "@100mslive/react-sdk";
+import React59, { useCallback as useCallback18, useEffect as useEffect25, useMemo as useMemo4, useState as useState22 } 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
+} from "@100mslive/react-sdk";
 var emojiCount = 1;
 var flyAndFade = keyframes({
   "20%": { opacity: 1 },
@@ -6754,13 +7219,13 @@ var getStartingPoints = (isMobile) => {
   return arr;
 };
 function FlyingEmoji() {
-  const localPeerId = useHMSStore29(selectLocalPeerID6);
-  const vanillaStore = useHMSVanillaStore5();
+  const localPeerId = useHMSStore28(selectLocalPeerID6);
+  const vanillaStore = useHMSVanillaStore6();
   const [emojis, setEmojis] = useState22([]);
-  const isMobile = useMedia10(config.media.md);
+  const isMobile = useMedia11(config.media.md);
   const startingPoints = useMemo4(() => getStartingPoints(isMobile), [isMobile]);
-  const showFlyingEmoji = useCallback16(
-    (emojiId, senderId) => {
+  const showFlyingEmoji = useCallback18(
+    ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
       }
@@ -6783,7 +7248,11 @@ function FlyingEmoji() {
     },
     [localPeerId, vanillaStore, startingPoints]
   );
-  useEffect26(() => {
+  useCustomEvent3({
+    type: EMOJI_REACTION_TYPE,
+    onEvent: showFlyingEmoji
+  });
+  useEffect25(() => {
     window.showFlyingEmoji = showFlyingEmoji;
   }, [showFlyingEmoji]);
   return /* @__PURE__ */ React59.createElement(
@@ -6847,30 +7316,117 @@ function FlyingEmoji() {
 }
 
 // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
-import React60, { useCallback as useCallback17 } from "react";
-import { useCustomEvent as useCustomEvent2, useHMSActions as useHMSActions19 } from "@100mslive/react-sdk";
+import React60, { useCallback as useCallback19 } from "react";
+import { useCustomEvent as useCustomEvent4, useHMSActions as useHMSActions18 } from "@100mslive/react-sdk";
 function RemoteStopScreenshare() {
-  const actions = useHMSActions19();
-  const onRemoteStopScreenshare = useCallback17(() => __async(this, null, function* () {
+  const actions = useHMSActions18();
+  const onRemoteStopScreenshare = useCallback19(() => __async(this, null, function* () {
     yield actions.setScreenShareEnabled(false);
   }), [actions]);
-  useCustomEvent2({
+  useCustomEvent4({
     type: REMOTE_STOP_SCREENSHARE_TYPE,
     onEvent: onRemoteStopScreenshare
   });
   return /* @__PURE__ */ React60.createElement(React60.Fragment, null);
 }
 
-// src/Prebuilt/App.tsx
-var Conference = React61.lazy(() => import("./conference-V2XZGTKU.js"));
-var getAspectRatio = ({ width, height }) => {
-  const host = define_process_env_default.REACT_APP_HOST_NAME || "";
-  const portraitDomains = (define_process_env_default.REACT_APP_PORTRAIT_MODE_DOMAINS || "").split(",");
-  if (portraitDomains.includes(host) && width > height) {
-    return { width: height, height: width };
+// src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
+import { useCallback as useCallback20, useEffect as useEffect27, useRef as useRef9 } from "react";
+import {
+  selectIsConnectedToRoom as selectIsConnectedToRoom6,
+  selectPermissions as selectPermissions4,
+  useHMSActions as useHMSActions19,
+  useHMSStore as useHMSStore30,
+  useRecordingStreaming as useRecordingStreaming5
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/common/hooks.js
+import { useEffect as useEffect26, useRef as useRef8, useState as useState23 } 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,
+  selectPeers,
+  selectRemotePeers,
+  useHMSStore as useHMSStore29,
+  useHMSVanillaStore as useHMSVanillaStore7
+} from "@100mslive/react-sdk";
+var useFilteredRoles = () => {
+  const roles = useHMSStore29(selectAvailableRoleNames2).filter((role) => !isInternalRole(role));
+  return roles;
+};
+var useShowStreamingUI = () => {
+  var _a7, _b7, _c;
+  const layout = useRoomLayout();
+  const { join_form } = ((_c = (_b7 = (_a7 = layout == null ? void 0 : layout.screens) == null ? void 0 : _a7.preview) == null ? void 0 : _b7.default) == null ? void 0 : _c.elements) || {};
+  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType3.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
+};
+var useParticipants2 = (params) => {
+  var _a7;
+  const isConnected = useHMSStore29(selectIsConnectedToRoom5);
+  const peerCount = useHMSStore29(selectPeerCount);
+  const availableRoles = useHMSStore29(selectAvailableRoleNames2);
+  let participantList = useHMSStore29(isConnected ? selectPeers : selectRemotePeers);
+  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
+  const vanillaStore = useHMSVanillaStore7();
+  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 { width, height };
+  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
+    participantList = participantList.filter((peer) => peer.roleName === params.role);
+  }
+  if (params == null ? void 0 : params.search) {
+    const search = params.search;
+    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
+  }
+  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
+};
+
+// src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
+var useAutoStartStreaming = () => {
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore30(selectPermissions4);
+  const showStreamingUI = useShowStreamingUI();
+  const hmsActions = useHMSActions19();
+  const isConnected = useHMSStore30(selectIsConnectedToRoom6);
+  const { isHLSRunning } = useRecordingStreaming5();
+  const streamStartedRef = useRef9(false);
+  const startHLS = useCallback20(() => __async(void 0, null, function* () {
+    var _a7;
+    try {
+      if (isHLSStarted || !showStreamingUI || isHLSRunning) {
+        return;
+      }
+      setHLSStarted(true);
+      streamStartedRef.current = true;
+      yield hmsActions.startHLSStreaming();
+    } catch (error) {
+      if ((_a7 = error.message) == null ? void 0 : _a7.includes("beam already started")) {
+        return;
+      }
+      streamStartedRef.current = false;
+      setHLSStarted(false);
+    }
+  }), [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
+  useEffect27(() => {
+    if (!isHLSStarted && !isHLSRunning) {
+      streamStartedRef.current = false;
+    }
+  }, [isHLSStarted, isHLSRunning]);
+  useEffect27(() => {
+    if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
+      return;
+    }
+    startHLS();
+  }, [isConnected]);
 };
+
+// src/Prebuilt/App.tsx
+var Conference = React61.lazy(() => import("./conference-UWLJHMB2.js"));
 var HMSPrebuilt = React61.forwardRef(
   ({
     roomCode = "",
@@ -6885,12 +7441,10 @@ var HMSPrebuilt = React61.forwardRef(
     onLeave
   }, ref) => {
     var _a7, _b7, _c, _d;
-    const aspectRatio = "1-1";
     const metadata = "";
-    const { 0: width, 1: height } = aspectRatio.split("-").map((el) => parseInt(el));
-    const reactiveStore = useRef8();
+    const reactiveStore = useRef10();
     const [hydrated, setHydrated] = React61.useState(false);
-    useEffect27(() => {
+    useEffect28(() => {
       setHydrated(true);
       const hms = new HMSReactiveStore();
       const hmsStore = hms.getStore();
@@ -6905,13 +7459,13 @@ var HMSPrebuilt = React61.forwardRef(
         hmsNotifications
       };
     }, []);
-    useEffect27(() => {
+    useEffect28(() => {
       if (!ref || !reactiveStore.current) {
         return;
       }
       ref.current = __spreadValues({}, reactiveStore.current);
     }, [ref]);
-    useEffect27(
+    useEffect28(
       () => () => {
         var _a8;
         (_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
@@ -6981,7 +7535,6 @@ var HMSPrebuilt = React61.forwardRef(
             HMSThemeProvider,
             {
               themeType: `${theme2.name}-${Date.now()}`,
-              aspectRatio: getAspectRatio({ width, height }),
               theme: {
                 //@ts-ignore: Prebuilt theme to match stiches theme
                 colors: theme2.palette,
@@ -7013,42 +7566,43 @@ var HMSPrebuilt = React61.forwardRef(
 );
 HMSPrebuilt.displayName = "HMSPrebuilt";
 var Redirector = ({ showPreview }) => {
-  const { roomId, role } = useParams3();
+  const { roomId, role } = useParams5();
   return /* @__PURE__ */ React61.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
 };
 var RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  useAutoStartStreaming();
   return /* @__PURE__ */ React61.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React61.createElement(Route, { path: "preview" }, /* @__PURE__ */ React61.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
     }
   ), /* @__PURE__ */ React61.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
+      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React61.createElement(PreviewContainer_default, null))
     }
   )) : null, /* @__PURE__ */ React61.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React61.createElement(
     Route,
     {
       path: ":roomId/:role",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
+      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
     }
   ), /* @__PURE__ */ React61.createElement(
     Route,
     {
       path: ":roomId",
-      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { loadingText: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
+      element: /* @__PURE__ */ React61.createElement(Suspense2, { fallback: /* @__PURE__ */ React61.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React61.createElement(Conference, null))
     }
   )), 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 = useHMSStore30(selectIsConnectedToRoom5);
+  const isConnectedToRoom = useHMSStore31(selectIsConnectedToRoom7);
   const hmsActions = useHMSActions20();
-  useEffect27(() => {
+  useEffect28(() => {
     const onRouteLeave = () => __async(void 0, null, function* () {
       if (isConnectedToRoom) {
         yield hmsActions.leave();
@@ -7070,7 +7624,8 @@ function AppRoutes({
   defaultAuthToken
 }) {
   const roomLayout = useRoomLayout();
-  return /* @__PURE__ */ React61.createElement(Router, null, /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(ToastContainer, null), /* @__PURE__ */ React61.createElement(Notifications, null), /* @__PURE__ */ React61.createElement(BackSwipe, null), /* @__PURE__ */ React61.createElement(FlyingEmoji, null), /* @__PURE__ */ React61.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React61.createElement(KeyboardHandler, null), /* @__PURE__ */ React61.createElement(BeamSpeakerLabelsLogging, null), /* @__PURE__ */ React61.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React61.createElement(Routes, null, /* @__PURE__ */ React61.createElement(Route, { path: "/*", element: /* @__PURE__ */ React61.createElement(RouteList, null) }))));
+  const isNotificationsDisabled = useIsNotificationDisabled();
+  return /* @__PURE__ */ React61.createElement(Router, null, /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(ToastContainer, null), /* @__PURE__ */ React61.createElement(Notifications, null), /* @__PURE__ */ React61.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React61.createElement(FlyingEmoji, null), /* @__PURE__ */ React61.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React61.createElement(KeyboardHandler, null), /* @__PURE__ */ React61.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React61.createElement(Routes, null, /* @__PURE__ */ React61.createElement(Route, { path: "/*", element: /* @__PURE__ */ React61.createElement(RouteList, null) }))));
 }
 
 // src/Progress/index.tsx
@@ -7138,7 +7693,6 @@ export {
   UI_SETTINGS,
   SIDE_PANE_OPTIONS,
   isChrome,
-  isSafari,
   isIOS,
   isMacOS,
   isAndroid,
@@ -7149,7 +7703,6 @@ export {
   useSidepaneToggle,
   useUISettings,
   useSetUiSettings,
-  useIsHeadless,
   useWaitingViewerRole,
   useAuthToken,
   useUrlToEmbed,
@@ -7164,18 +7717,19 @@ export {
   DialogSelect,
   DialogInputFile,
   FullPageProgress_default,
-  useRoomLayout,
   ToastManager,
+  getMetadata,
   isScreenshareSupported,
   isInternalRole,
   getFormattedCount,
+  PictureInPicture,
+  useRoomLayoutPreviewScreen,
+  useRoomLayoutConferencingScreen,
+  useRedirectToLeave,
   Sheet,
   useMyMetadata,
   StopRecordingInSheet,
   Header2 as Header,
-  useRoomLayoutPreviewScreen,
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutLeaveScreen,
   AudioVideoToggle,
   ConnectionIndicator,
   DialogDropdownTrigger,
@@ -7188,7 +7742,9 @@ export {
   VideoTile_default,
   PreviewTile,
   PreviewControls,
+  useFilteredRoles,
+  useParticipants2 as useParticipants,
   HMSPrebuilt,
   Progress
 };
-//# sourceMappingURL=chunk-RXTHJUMZ.js.map
+//# sourceMappingURL=chunk-LYSAET4G.js.map