@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/{HLSView-IQRPLYNH.js → HLSView-DDGPZHA2.js} +3 -3
  2. package/dist/Prebuilt/App.d.ts +1 -0
  3. package/dist/Prebuilt/AppContext.d.ts +1 -0
  4. package/dist/Prebuilt/components/Footer/PaginatedParticipants.d.ts +5 -0
  5. package/dist/Prebuilt/components/Footer/RoleAccordion.d.ts +10 -3
  6. package/dist/Prebuilt/components/Notifications/HeadlessEndRoomListener.d.ts +2 -0
  7. package/dist/Prebuilt/components/PrebuiltTileElements.d.ts +2198 -0
  8. package/dist/{VirtualBackground-GP4ATXD3.js → VirtualBackground-UVZJVOA2.js} +3 -3
  9. package/dist/{chunk-Z3O2WGWV.js → chunk-6SQTFOK6.js} +2 -2
  10. package/dist/{chunk-Z3O2WGWV.js.map → chunk-6SQTFOK6.js.map} +1 -1
  11. package/dist/{chunk-2H5NIZB7.js → chunk-HUMNPIYI.js} +2 -2
  12. package/dist/{chunk-GLYGPYNS.js → chunk-PRM33R4R.js} +286 -251
  13. package/dist/chunk-PRM33R4R.js.map +7 -0
  14. package/dist/{conference-JD35TNH4.js → conference-N7S47TDK.js} +484 -385
  15. package/dist/conference-N7S47TDK.js.map +7 -0
  16. package/dist/index.cjs.js +1895 -1727
  17. package/dist/index.cjs.js.map +4 -4
  18. package/dist/index.js +2 -2
  19. package/dist/meta.cjs.json +234 -42
  20. package/dist/meta.esbuild.json +267 -74
  21. package/package.json +6 -6
  22. package/src/AudioLevel/AudioLevel.tsx +1 -1
  23. package/src/Prebuilt/App.tsx +5 -0
  24. package/src/Prebuilt/AppContext.tsx +2 -0
  25. package/src/Prebuilt/common/constants.js +1 -1
  26. package/src/Prebuilt/components/AppData/AppData.jsx +1 -1
  27. package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
  28. package/src/Prebuilt/components/Chip.tsx +6 -2
  29. package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx +94 -0
  30. package/src/Prebuilt/components/Footer/ParticipantList.jsx +53 -23
  31. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +86 -84
  32. package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -1
  33. package/src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx +23 -0
  34. package/src/Prebuilt/components/Notifications/Notifications.jsx +1 -1
  35. package/src/Prebuilt/components/PrebuiltTileElements.tsx +5 -0
  36. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +9 -6
  37. package/src/Prebuilt/components/SidePaneTabs.tsx +31 -5
  38. package/src/Prebuilt/components/VideoTile.jsx +19 -34
  39. package/src/Prebuilt/components/conference.jsx +4 -3
  40. package/src/Prebuilt/components/hooks/useDropdownSelection.jsx +1 -1
  41. package/src/Prebuilt/layouts/SidePane.tsx +1 -0
  42. package/dist/chunk-GLYGPYNS.js.map +0 -7
  43. package/dist/conference-JD35TNH4.js.map +0 -7
  44. /package/dist/{HLSView-IQRPLYNH.js.map → HLSView-DDGPZHA2.js.map} +0 -0
  45. /package/dist/{VirtualBackground-GP4ATXD3.js.map → VirtualBackground-UVZJVOA2.js.map} +0 -0
  46. /package/dist/{chunk-2H5NIZB7.js.map → chunk-HUMNPIYI.js.map} +0 -0
@@ -35,7 +35,7 @@ import {
35
35
  textEllipsis,
36
36
  theme,
37
37
  toastAnimation
38
- } from "./chunk-Z3O2WGWV.js";
38
+ } from "./chunk-6SQTFOK6.js";
39
39
 
40
40
  // src/Button/Button.tsx
41
41
  import React2 from "react";
@@ -1275,7 +1275,7 @@ var barAnimation = keyframes({
1275
1275
  to: {
1276
1276
  maskSize: "4em .8em",
1277
1277
  "-webkit-mask-position-y": ".1em",
1278
- maskPosition: "initial 0"
1278
+ maskPosition: "initial 0.1em"
1279
1279
  }
1280
1280
  });
1281
1281
  var AudioBar = () => {
@@ -2064,7 +2064,7 @@ var Collapsible = {
2064
2064
  };
2065
2065
 
2066
2066
  // src/Prebuilt/App.tsx
2067
- import React58, { Suspense as Suspense2, useEffect as useEffect28, useRef as useRef10 } from "react";
2067
+ import React59, { Suspense as Suspense2, useEffect as useEffect29, useRef as useRef10 } from "react";
2068
2068
  import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams as useParams5 } from "react-router-dom";
2069
2069
  import {
2070
2070
  HMSReactiveStore,
@@ -2203,7 +2203,7 @@ var APP_DATA = {
2203
2203
  pdfConfig: "pdfConfig",
2204
2204
  minimiseInset: "minimiseInset",
2205
2205
  activeScreensharePeerId: "activeScreensharePeerId",
2206
- disableNotificiations: "disableNotificiations"
2206
+ disableNotifications: "disableNotifications"
2207
2207
  };
2208
2208
  var UI_SETTINGS = {
2209
2209
  isAudioOnly: "isAudioOnly",
@@ -2329,7 +2329,7 @@ var useSubscribedNotifications = (notificationKey) => {
2329
2329
  return notificationPreference;
2330
2330
  };
2331
2331
  var useIsNotificationDisabled = () => {
2332
- const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotificiations));
2332
+ const notificationPreference = useHMSStore3(selectAppDataByPath(APP_DATA.disableNotifications));
2333
2333
  return notificationPreference;
2334
2334
  };
2335
2335
  var useSetSubscribedNotifications = (notificationKey) => {
@@ -2428,7 +2428,7 @@ var initialAppData = {
2428
2428
  [APP_DATA.authToken]: "",
2429
2429
  [APP_DATA.minimiseInset]: false,
2430
2430
  [APP_DATA.activeScreensharePeerId]: "",
2431
- [APP_DATA.disableNotificiations]: false
2431
+ [APP_DATA.disableNotifications]: false
2432
2432
  };
2433
2433
  var AppData = React16.memo(({ appDetails, tokenEndpoint }) => {
2434
2434
  const hmsActions = useHMSActions3();
@@ -2539,7 +2539,8 @@ var HMSPrebuiltContext = React17.createContext({
2539
2539
  userName: "",
2540
2540
  userId: "",
2541
2541
  endpoints: {},
2542
- onLeave: void 0
2542
+ onLeave: void 0,
2543
+ onJoin: void 0
2543
2544
  });
2544
2545
  HMSPrebuiltContext.displayName = "HMSPrebuiltContext";
2545
2546
  var useHMSPrebuiltContext = () => {
@@ -4374,32 +4375,50 @@ function Notifications() {
4374
4375
  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(TrackUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackBulkUnmuteModal, null), /* @__PURE__ */ React32.createElement(TrackNotifications, null), roomState === HMSRoomState2.Connected ? /* @__PURE__ */ React32.createElement(PeerNotifications, null) : null, /* @__PURE__ */ React32.createElement(ReconnectNotifications, null), /* @__PURE__ */ React32.createElement(AutoplayBlockedModal, null), /* @__PURE__ */ React32.createElement(PermissionErrorModal, null), /* @__PURE__ */ React32.createElement(InitErrorModal, { notification }));
4375
4376
  }
4376
4377
 
4378
+ // src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx
4379
+ import React33, { useEffect as useEffect18 } from "react";
4380
+ import { HMSNotificationTypes as HMSNotificationTypes8, useHMSNotifications as useHMSNotifications8 } from "@100mslive/react-sdk";
4381
+ function HeadlessEndRoomListener() {
4382
+ const notification = useHMSNotifications8();
4383
+ const isNotificationDisabled = useIsNotificationDisabled();
4384
+ const { redirectToLeave } = useRedirectToLeave();
4385
+ useEffect18(() => {
4386
+ if (!notification || !isNotificationDisabled) {
4387
+ return;
4388
+ }
4389
+ if ([HMSNotificationTypes8.ROOM_ENDED, HMSNotificationTypes8.REMOVED_FROM_ROOM].includes(notification.type)) {
4390
+ redirectToLeave(1e3);
4391
+ }
4392
+ }, [notification]);
4393
+ return /* @__PURE__ */ React33.createElement(React33.Fragment, null);
4394
+ }
4395
+
4377
4396
  // src/Prebuilt/components/PostLeave.jsx
4378
- import React39 from "react";
4397
+ import React40 from "react";
4379
4398
  import { useNavigate as useNavigate3, useParams as useParams3 } from "react-router-dom";
4380
4399
  import { ExitIcon } from "@100mslive/react-icons";
4381
4400
 
4382
4401
  // src/Prebuilt/components/Header/Header.tsx
4383
- import React38 from "react";
4402
+ import React39 from "react";
4384
4403
  import { useMedia as useMedia3 } from "react-use";
4385
4404
  import { HMSRoomState as HMSRoomState4, selectRoomState as selectRoomState4, useHMSStore as useHMSStore16 } from "@100mslive/react-sdk";
4386
4405
 
4387
4406
  // src/Prebuilt/components/Header/HeaderComponents.jsx
4388
- import React33, { useEffect as useEffect18, useState as useState11 } from "react";
4407
+ import React34, { useEffect as useEffect19, useState as useState11 } from "react";
4389
4408
  import { selectDominantSpeaker, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
4390
4409
  import { VolumeOneIcon } from "@100mslive/react-icons";
4391
4410
  var SpeakerTag = () => {
4392
4411
  const dominantSpeaker = useHMSStore8(selectDominantSpeaker);
4393
- return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React33.createElement(
4412
+ return dominantSpeaker && dominantSpeaker.name && /* @__PURE__ */ React34.createElement(
4394
4413
  Flex,
4395
4414
  {
4396
4415
  align: "center",
4397
4416
  justify: "center",
4398
4417
  css: { flex: "1 1 0", color: "$on_primary_high", "@md": { display: "none" } }
4399
4418
  },
4400
- /* @__PURE__ */ React33.createElement(VerticalDivider, { css: { ml: "$8" } }),
4401
- /* @__PURE__ */ React33.createElement(VolumeOneIcon, null),
4402
- /* @__PURE__ */ React33.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
4419
+ /* @__PURE__ */ React34.createElement(VerticalDivider, { css: { ml: "$8" } }),
4420
+ /* @__PURE__ */ React34.createElement(VolumeOneIcon, null),
4421
+ /* @__PURE__ */ React34.createElement(Text, { variant: "md", css: __spreadProps(__spreadValues({}, textEllipsis(200)), { ml: "$2" }), title: dominantSpeaker.name }, dominantSpeaker.name)
4403
4422
  );
4404
4423
  };
4405
4424
  var LogoImg = styled("img", {
@@ -4415,12 +4434,12 @@ var Logo = () => {
4415
4434
  const roomLayout = useRoomLayout();
4416
4435
  const logo = (_a7 = roomLayout == null ? void 0 : roomLayout.logo) == null ? void 0 : _a7.url;
4417
4436
  const [hideImage, setHideImage] = useState11(false);
4418
- useEffect18(() => {
4437
+ useEffect19(() => {
4419
4438
  if (hideImage) {
4420
4439
  setHideImage(false);
4421
4440
  }
4422
4441
  }, [logo]);
4423
- return logo && !hideImage ? /* @__PURE__ */ React33.createElement(
4442
+ return logo && !hideImage ? /* @__PURE__ */ React34.createElement(
4424
4443
  LogoImg,
4425
4444
  {
4426
4445
  src: logo,
@@ -4434,7 +4453,7 @@ var Logo = () => {
4434
4453
  };
4435
4454
 
4436
4455
  // src/Prebuilt/components/Header/StreamActions.tsx
4437
- import React36, { useCallback as useCallback13, useEffect as useEffect20, useRef as useRef6, useState as useState13 } from "react";
4456
+ import React37, { useCallback as useCallback13, useEffect as useEffect21, useRef as useRef6, useState as useState13 } from "react";
4438
4457
  import { useMedia as useMedia2 } from "react-use";
4439
4458
  import {
4440
4459
  HMSRoomState as HMSRoomState3,
@@ -4449,7 +4468,7 @@ import {
4449
4468
  import { AlertTriangleIcon, CrossIcon as CrossIcon4, RecordIcon } from "@100mslive/react-icons";
4450
4469
 
4451
4470
  // src/Sheet/Sheet.tsx
4452
- import React34 from "react";
4471
+ import React35 from "react";
4453
4472
  import * as DialogPrimitive2 from "@radix-ui/react-dialog";
4454
4473
  var SheetRoot = styled(DialogPrimitive2.Root, {
4455
4474
  minHeight: "240px",
@@ -4523,10 +4542,10 @@ var StyledContent6 = styled(DialogPrimitive2.Content, {
4523
4542
  side: "bottom"
4524
4543
  }
4525
4544
  });
4526
- var SheetContent = React34.forwardRef(
4545
+ var SheetContent = React35.forwardRef(
4527
4546
  (_a7, forwardedRef) => {
4528
4547
  var _b7 = _a7, { children } = _b7, props = __objRest(_b7, ["children"]);
4529
- return /* @__PURE__ */ React34.createElement(Dialog.Portal, null, /* @__PURE__ */ React34.createElement(StyledOverlay, null), /* @__PURE__ */ React34.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
4548
+ return /* @__PURE__ */ React35.createElement(Dialog.Portal, null, /* @__PURE__ */ React35.createElement(StyledOverlay, null), /* @__PURE__ */ React35.createElement(StyledContent6, __spreadProps(__spreadValues({}, props), { ref: forwardedRef }), children));
4530
4549
  }
4531
4550
  );
4532
4551
  var SheetClose = Dialog.Close;
@@ -4546,7 +4565,7 @@ var Sheet = {
4546
4565
  };
4547
4566
 
4548
4567
  // src/Prebuilt/components/Header/AdditionalRoomState.jsx
4549
- import React35, { useState as useState12 } from "react";
4568
+ import React36, { useState as useState12 } from "react";
4550
4569
  import { selectLocalPeerID as selectLocalPeerID3, selectPeerSharingVideoPlaylist, useHMSStore as useHMSStore13, useScreenShare } from "@100mslive/react-sdk";
4551
4570
  import {
4552
4571
  AudioPlayerIcon,
@@ -4559,7 +4578,7 @@ import {
4559
4578
  } from "@100mslive/react-icons";
4560
4579
 
4561
4580
  // src/Prebuilt/plugins/whiteboard/useWhiteboardMetadata.js
4562
- import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo2 } from "react";
4581
+ import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo2 } from "react";
4563
4582
  import { selectLocalPeerID as selectLocalPeerID2, selectPeerByCondition, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
4564
4583
 
4565
4584
  // src/Prebuilt/components/hooks/useMetadata.jsx
@@ -4641,7 +4660,7 @@ var useWhiteboardMetadata = () => {
4641
4660
  console.error("failed to toggle whiteboard to ", !whiteboardOwner, error);
4642
4661
  }
4643
4662
  }), [whiteboardOwner, updateMetaData, amIWhiteboardOwner]);
4644
- useEffect19(() => {
4663
+ useEffect20(() => {
4645
4664
  window.toggleWhiteboard = toggleWhiteboard;
4646
4665
  }, [toggleWhiteboard]);
4647
4666
  return {
@@ -4755,7 +4774,7 @@ var AdditionalRoomState = () => {
4755
4774
  if (isPlaylistInactive && isAudioshareInactive && !shouldShowScreenShareState && !shouldShowVideoState && !whiteboardOwner) {
4756
4775
  return null;
4757
4776
  }
4758
- return /* @__PURE__ */ React35.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React35.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React35.createElement(
4777
+ return /* @__PURE__ */ React36.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(
4759
4778
  Flex,
4760
4779
  {
4761
4780
  align: "center",
@@ -4768,13 +4787,13 @@ var AdditionalRoomState = () => {
4768
4787
  },
4769
4788
  "data-testid": "record_status_dropdown"
4770
4789
  },
4771
- !isAudioshareInactive && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(MusicIcon, { width: 24, height: 24 }))),
4772
- shouldShowScreenShareState && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
4773
- shouldShowVideoState && /* @__PURE__ */ React35.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
4774
- !isPlaylistInactive && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
4775
- whiteboardOwner && /* @__PURE__ */ React35.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React35.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
4776
- /* @__PURE__ */ React35.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React35.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React35.createElement(ChevronDownIcon2, null))
4777
- )), /* @__PURE__ */ React35.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React35.createElement(
4790
+ !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare Audio" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }))),
4791
+ shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Screenshare" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }))),
4792
+ shouldShowVideoState && /* @__PURE__ */ React36.createElement(Tooltip, { title: "video playlist" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }))),
4793
+ !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Playlist Music" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }))),
4794
+ whiteboardOwner && /* @__PURE__ */ React36.createElement(Tooltip, { title: "Whiteboard" }, /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { color: "$on_primary_high", mx: "$2" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }))),
4795
+ /* @__PURE__ */ React36.createElement(Box, { css: { "@lg": { display: "none" }, color: "$on_surface_low" } }, open ? /* @__PURE__ */ React36.createElement(ChevronUpIcon2, null) : /* @__PURE__ */ React36.createElement(ChevronDownIcon2, null))
4796
+ )), /* @__PURE__ */ React36.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { w: "$60" } }, !isPlaylistInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(AudioPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Playlist is playing"), playlist.peer.isLocal ? /* @__PURE__ */ React36.createElement(
4778
4797
  Text,
4779
4798
  {
4780
4799
  variant: "sm",
@@ -4785,7 +4804,7 @@ var AdditionalRoomState = () => {
4785
4804
  }
4786
4805
  },
4787
4806
  playlist.selection.playing ? "Pause" : "Play"
4788
- ) : /* @__PURE__ */ React35.createElement(
4807
+ ) : /* @__PURE__ */ React36.createElement(
4789
4808
  Text,
4790
4809
  {
4791
4810
  variant: "sm",
@@ -4796,7 +4815,7 @@ var AdditionalRoomState = () => {
4796
4815
  }
4797
4816
  },
4798
4817
  playlist.track.volume === 0 ? "Unmute" : "Mute"
4799
- )), !isAudioshareInactive && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React35.createElement(
4818
+ )), !isAudioshareInactive && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(MusicIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Music is playing"), /* @__PURE__ */ React36.createElement(
4800
4819
  Text,
4801
4820
  {
4802
4821
  variant: "sm",
@@ -4807,7 +4826,7 @@ var AdditionalRoomState = () => {
4807
4826
  }
4808
4827
  },
4809
4828
  screenshareAudio.muted ? "Unmute" : "Mute"
4810
- )), shouldShowScreenShareState && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React35.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React35.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React35.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React35.createElement(
4829
+ )), shouldShowScreenShareState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(ShareScreenIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${screenSharingPeerId === localPeerID ? "You" : screenSharingPeerName}`)), shouldShowVideoState && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(VideoPlayerIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, `Shared by: ${peerSharingPlaylist.id === localPeerID ? "You" : peerSharingPlaylist.name}`)), whiteboardOwner && /* @__PURE__ */ React36.createElement(Dropdown.Item, { css: { color: "$on_primary_high" } }, /* @__PURE__ */ React36.createElement(PencilDrawIcon, { width: 24, height: 24 }), /* @__PURE__ */ React36.createElement(Text, { variant: "sm", css: { ml: "$2", flex: "1 1 0" } }, "Whiteboard Owner - ", whiteboardOwner.name, amIWhiteboardOwner && "(You)"), amIWhiteboardOwner && /* @__PURE__ */ React36.createElement(
4811
4830
  Text,
4812
4831
  {
4813
4832
  variant: "sm",
@@ -4837,7 +4856,7 @@ var LiveStatus = () => {
4837
4856
  }
4838
4857
  }, 1e3);
4839
4858
  }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants]);
4840
- useEffect20(() => {
4859
+ useEffect21(() => {
4841
4860
  if (hlsState == null ? void 0 : hlsState.running) {
4842
4861
  startTimer();
4843
4862
  }
@@ -4853,7 +4872,7 @@ var LiveStatus = () => {
4853
4872
  if (!isHLSRunning && !isRTMPRunning) {
4854
4873
  return null;
4855
4874
  }
4856
- return /* @__PURE__ */ React36.createElement(
4875
+ return /* @__PURE__ */ React37.createElement(
4857
4876
  Flex,
4858
4877
  {
4859
4878
  align: "center",
@@ -4864,8 +4883,8 @@ var LiveStatus = () => {
4864
4883
  borderRadius: "$1"
4865
4884
  }
4866
4885
  },
4867
- /* @__PURE__ */ React36.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
4868
- /* @__PURE__ */ React36.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React36.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React36.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
4886
+ /* @__PURE__ */ React37.createElement(Box, { css: { w: "$4", h: "$4", r: "$round", bg: "$alert_error_default", mr: "$2" } }),
4887
+ /* @__PURE__ */ React37.createElement(Flex, { align: "center", gap: "2" }, /* @__PURE__ */ React37.createElement(Text, { variant: !isMobile ? "button" : "body2" }, "LIVE"), /* @__PURE__ */ React37.createElement(Text, { variant: "caption" }, ((_a7 = hlsState == null ? void 0 : hlsState.variants) == null ? void 0 : _a7.length) > 0 ? formatTime(liveTime) : ""))
4869
4888
  );
4870
4889
  };
4871
4890
  var RecordingStatus = () => {
@@ -4880,7 +4899,7 @@ var RecordingStatus = () => {
4880
4899
  if (!(isMobile && isRecordingOn))
4881
4900
  return null;
4882
4901
  }
4883
- return /* @__PURE__ */ React36.createElement(
4902
+ return /* @__PURE__ */ React37.createElement(
4884
4903
  Tooltip,
4885
4904
  {
4886
4905
  boxCss: { zIndex: 1 },
@@ -4890,7 +4909,7 @@ var RecordingStatus = () => {
4890
4909
  isHLSRecordingOn
4891
4910
  })
4892
4911
  },
4893
- /* @__PURE__ */ React36.createElement(
4912
+ /* @__PURE__ */ React37.createElement(
4894
4913
  Flex,
4895
4914
  {
4896
4915
  css: {
@@ -4898,7 +4917,7 @@ var RecordingStatus = () => {
4898
4917
  alignItems: "center"
4899
4918
  }
4900
4919
  },
4901
- /* @__PURE__ */ React36.createElement(RecordIcon, { width: 24, height: 24 })
4920
+ /* @__PURE__ */ React37.createElement(RecordIcon, { width: 24, height: 24 })
4902
4921
  )
4903
4922
  );
4904
4923
  };
@@ -4912,7 +4931,7 @@ var StartRecording = () => {
4912
4931
  return null;
4913
4932
  }
4914
4933
  if (isBrowserRecordingOn) {
4915
- return /* @__PURE__ */ React36.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React36.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React36.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React36.createElement(RecordIcon, null), /* @__PURE__ */ React36.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React36.createElement(Popover2.Portal, null, /* @__PURE__ */ React36.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React36.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React36.createElement(
4934
+ return /* @__PURE__ */ React37.createElement(Popover2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React37.createElement(Popover2.Trigger, { asChild: true }, /* @__PURE__ */ React37.createElement(Button, { variant: "danger", "data-testid": "stop_recording", icon: true, outlined: true, onClick: () => setOpen(true) }, /* @__PURE__ */ React37.createElement(RecordIcon, null), /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, "Stop Recording"))), /* @__PURE__ */ React37.createElement(Popover2.Portal, null, /* @__PURE__ */ React37.createElement(Popover2.Content, { align: "end", sideOffset: 8, css: { w: "$64" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium" } }, "Are you sure you want to end the recording?"), /* @__PURE__ */ React37.createElement(
4916
4935
  Button,
4917
4936
  {
4918
4937
  "data-testid": "stop_recording_confirm",
@@ -4935,7 +4954,7 @@ var StartRecording = () => {
4935
4954
  "Stop"
4936
4955
  ))));
4937
4956
  }
4938
- return /* @__PURE__ */ React36.createElement(
4957
+ return /* @__PURE__ */ React37.createElement(
4939
4958
  Button,
4940
4959
  {
4941
4960
  "data-testid": "start_recording",
@@ -4965,21 +4984,21 @@ var StartRecording = () => {
4965
4984
  }
4966
4985
  })
4967
4986
  },
4968
- recordingStarted ? /* @__PURE__ */ React36.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React36.createElement(RecordIcon, null),
4969
- /* @__PURE__ */ React36.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
4987
+ recordingStarted ? /* @__PURE__ */ React37.createElement(Loading, { size: 24, color: "currentColor" }) : /* @__PURE__ */ React37.createElement(RecordIcon, null),
4988
+ /* @__PURE__ */ React37.createElement(Text, { as: "span", css: { "@md": { display: "none" }, color: "currentColor" } }, recordingStarted ? "Starting" : "Start", " Recording")
4970
4989
  );
4971
4990
  };
4972
4991
  var StreamActions = () => {
4973
4992
  const isConnected = useHMSStore14(selectIsConnectedToRoom2);
4974
4993
  const isMobile = useMedia2(config.media.md);
4975
4994
  const roomState = useHMSStore14(selectRoomState3);
4976
- return /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React36.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React36.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React36.createElement(StartRecording, null) : null);
4995
+ return /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(AdditionalRoomState, null), !isMobile && /* @__PURE__ */ React37.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React37.createElement(RecordingStatus, null), roomState !== HMSRoomState3.Preview ? /* @__PURE__ */ React37.createElement(LiveStatus, null) : null), isConnected && !isMobile ? /* @__PURE__ */ React37.createElement(StartRecording, null) : null);
4977
4996
  };
4978
4997
  var StopRecordingInSheet = ({
4979
4998
  onStopRecording,
4980
4999
  onClose
4981
5000
  }) => {
4982
- return /* @__PURE__ */ React36.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React36.createElement(Sheet.Content, null, /* @__PURE__ */ React36.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React36.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React36.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React36.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React36.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React36.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React36.createElement(CrossIcon4, null)))), /* @__PURE__ */ React36.createElement(HorizontalDivider, null), /* @__PURE__ */ React36.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React36.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__ */ React36.createElement(
5001
+ return /* @__PURE__ */ React37.createElement(Sheet.Root, { open: true }, /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { p: "$10" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%", c: "$alert_error_default" } }, /* @__PURE__ */ React37.createElement(Flex, { justify: "start", align: "center", gap: "3" }, /* @__PURE__ */ React37.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React37.createElement(Text, { variant: "h5", css: { c: "$alert_error_default" } }, "Stop Recording")), /* @__PURE__ */ React37.createElement(Sheet.Close, { css: { color: "white" }, onClick: onClose }, /* @__PURE__ */ React37.createElement(CrossIcon4, null)))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(Box, { as: "div", css: { p: "$10", overflowY: "scroll", maxHeight: "70vh" } }, /* @__PURE__ */ React37.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__ */ React37.createElement(
4983
5002
  Button,
4984
5003
  {
4985
5004
  variant: "danger",
@@ -4993,7 +5012,7 @@ var StopRecordingInSheet = ({
4993
5012
  };
4994
5013
 
4995
5014
  // src/Prebuilt/components/Header/common.jsx
4996
- import React37 from "react";
5015
+ import React38 from "react";
4997
5016
  import {
4998
5017
  DeviceType,
4999
5018
  selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
@@ -5014,7 +5033,7 @@ var CamaraFlipActions = () => {
5014
5033
  if (!videoInput || !(videoInput == null ? void 0 : videoInput.length) || !(localVideoTrack == null ? void 0 : localVideoTrack.facingMode)) {
5015
5034
  return null;
5016
5035
  }
5017
- return /* @__PURE__ */ React37.createElement(Box, null, /* @__PURE__ */ React37.createElement(
5036
+ return /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(
5018
5037
  IconButton_default,
5019
5038
  {
5020
5039
  disabled: !isVideoOn,
@@ -5029,7 +5048,7 @@ var CamaraFlipActions = () => {
5029
5048
  }
5030
5049
  })
5031
5050
  },
5032
- /* @__PURE__ */ React37.createElement(CameraFlipIcon, null)
5051
+ /* @__PURE__ */ React38.createElement(CameraFlipIcon, null)
5033
5052
  ));
5034
5053
  };
5035
5054
  var AudioOutputActions = () => {
@@ -5041,7 +5060,7 @@ var AudioOutputActions = () => {
5041
5060
  if (!shouldShowAudioOutput || !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) > 0) {
5042
5061
  return null;
5043
5062
  }
5044
- return /* @__PURE__ */ React37.createElement(
5063
+ return /* @__PURE__ */ React38.createElement(
5045
5064
  AudioOutputSelectionSheet,
5046
5065
  {
5047
5066
  outputDevices: audioOutput,
@@ -5060,11 +5079,11 @@ var AudioOutputActions = () => {
5060
5079
  }
5061
5080
  })
5062
5081
  },
5063
- /* @__PURE__ */ React37.createElement(Box, null, /* @__PURE__ */ React37.createElement(IconButton_default, null, /* @__PURE__ */ React37.createElement(SpeakerIcon, null)))
5082
+ /* @__PURE__ */ React38.createElement(Box, null, /* @__PURE__ */ React38.createElement(IconButton_default, null, /* @__PURE__ */ React38.createElement(SpeakerIcon, null)))
5064
5083
  );
5065
5084
  };
5066
5085
  var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
5067
- return /* @__PURE__ */ React37.createElement(Sheet.Root, null, /* @__PURE__ */ React37.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React37.createElement(Sheet.Content, null, /* @__PURE__ */ React37.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React37.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React37.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React37.createElement(Sheet.Close, null, /* @__PURE__ */ React37.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React37.createElement(CrossIcon5, null))))), /* @__PURE__ */ React37.createElement(HorizontalDivider, null), /* @__PURE__ */ React37.createElement(
5086
+ return /* @__PURE__ */ React38.createElement(Sheet.Root, null, /* @__PURE__ */ React38.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React38.createElement(Sheet.Content, null, /* @__PURE__ */ React38.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React38.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React38.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Audio Output"), /* @__PURE__ */ React38.createElement(Sheet.Close, null, /* @__PURE__ */ React38.createElement(IconButton_default, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React38.createElement(CrossIcon5, null))))), /* @__PURE__ */ React38.createElement(HorizontalDivider, null), /* @__PURE__ */ React38.createElement(
5068
5087
  Flex,
5069
5088
  {
5070
5089
  direction: "column",
@@ -5075,7 +5094,7 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
5075
5094
  }
5076
5095
  },
5077
5096
  outputDevices.map((audioDevice) => {
5078
- return /* @__PURE__ */ React37.createElement(
5097
+ return /* @__PURE__ */ React38.createElement(
5079
5098
  SelectWithLabel,
5080
5099
  {
5081
5100
  key: audioDevice.deviceId,
@@ -5088,8 +5107,8 @@ var AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, chil
5088
5107
  })
5089
5108
  )));
5090
5109
  };
5091
- var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(React37.Fragment, null), checked, id, onChange }) => {
5092
- return /* @__PURE__ */ React37.createElement(
5110
+ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React38.createElement(React38.Fragment, null), checked, id, onChange }) => {
5111
+ return /* @__PURE__ */ React38.createElement(
5093
5112
  Flex,
5094
5113
  {
5095
5114
  align: "center",
@@ -5101,7 +5120,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
5101
5120
  },
5102
5121
  onClick: onChange
5103
5122
  },
5104
- /* @__PURE__ */ React37.createElement(
5123
+ /* @__PURE__ */ React38.createElement(
5105
5124
  Label3,
5106
5125
  {
5107
5126
  htmlFor: id,
@@ -5119,7 +5138,7 @@ var SelectWithLabel = ({ label, icon = /* @__PURE__ */ React37.createElement(Rea
5119
5138
  icon,
5120
5139
  label
5121
5140
  ),
5122
- checked && /* @__PURE__ */ React37.createElement(CheckIcon2, { width: 24, height: 24 })
5141
+ checked && /* @__PURE__ */ React38.createElement(CheckIcon2, { width: 24, height: 24 })
5123
5142
  );
5124
5143
  };
5125
5144
 
@@ -5128,9 +5147,9 @@ var Header2 = () => {
5128
5147
  const roomState = useHMSStore16(selectRoomState4);
5129
5148
  const isMobile = useMedia3(config.media.md);
5130
5149
  if (roomState !== HMSRoomState4.Connected) {
5131
- return /* @__PURE__ */ React38.createElement(React38.Fragment, null);
5150
+ return /* @__PURE__ */ React39.createElement(React39.Fragment, null);
5132
5151
  }
5133
- return /* @__PURE__ */ React38.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React38.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React38.createElement(Logo, null), /* @__PURE__ */ React38.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React38.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React38.createElement(LiveStatus, null), /* @__PURE__ */ React38.createElement(RecordingStatus, null))), /* @__PURE__ */ React38.createElement(
5152
+ return /* @__PURE__ */ React39.createElement(Flex, { justify: "between", align: "center", css: { position: "relative", height: "100%" } }, /* @__PURE__ */ React39.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$10" } }, /* @__PURE__ */ React39.createElement(Logo, null), /* @__PURE__ */ React39.createElement(SpeakerTag, null), isMobile && /* @__PURE__ */ React39.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React39.createElement(LiveStatus, null), /* @__PURE__ */ React39.createElement(RecordingStatus, null))), /* @__PURE__ */ React39.createElement(
5134
5153
  Flex,
5135
5154
  {
5136
5155
  align: "center",
@@ -5140,8 +5159,8 @@ var Header2 = () => {
5140
5159
  gap: "$4"
5141
5160
  }
5142
5161
  },
5143
- /* @__PURE__ */ React38.createElement(StreamActions, null),
5144
- isMobile ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(CamaraFlipActions, null), /* @__PURE__ */ React38.createElement(AudioOutputActions, null)) : null
5162
+ /* @__PURE__ */ React39.createElement(StreamActions, null),
5163
+ isMobile ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(CamaraFlipActions, null), /* @__PURE__ */ React39.createElement(AudioOutputActions, null)) : null
5145
5164
  ));
5146
5165
  };
5147
5166
 
@@ -5152,7 +5171,7 @@ var PostLeave = () => {
5152
5171
  const { roomCode } = useHMSPrebuiltContext();
5153
5172
  const { roomId, role } = useParams3();
5154
5173
  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
5155
- return /* @__PURE__ */ React39.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React39.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React39.createElement(Header2, null)), /* @__PURE__ */ React39.createElement(
5174
+ return /* @__PURE__ */ React40.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React40.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React40.createElement(Header2, null)), /* @__PURE__ */ React40.createElement(
5156
5175
  Flex,
5157
5176
  {
5158
5177
  justify: "center",
@@ -5160,9 +5179,9 @@ var PostLeave = () => {
5160
5179
  align: "center",
5161
5180
  css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
5162
5181
  },
5163
- /* @__PURE__ */ React39.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
5164
- /* @__PURE__ */ React39.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
5165
- /* @__PURE__ */ React39.createElement(
5182
+ /* @__PURE__ */ React40.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
5183
+ /* @__PURE__ */ React40.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
5184
+ /* @__PURE__ */ React40.createElement(
5166
5185
  Text,
5167
5186
  {
5168
5187
  variant: "body1",
@@ -5174,10 +5193,10 @@ var PostLeave = () => {
5174
5193
  }
5175
5194
  },
5176
5195
  "Have a nice day",
5177
- previewPreference.name && /* @__PURE__ */ React39.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
5196
+ previewPreference.name && /* @__PURE__ */ React40.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
5178
5197
  "!"
5179
5198
  ),
5180
- /* @__PURE__ */ React39.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React39.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React39.createElement(
5199
+ /* @__PURE__ */ React40.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React40.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React40.createElement(
5181
5200
  Button,
5182
5201
  {
5183
5202
  onClick: () => {
@@ -5189,20 +5208,20 @@ var PostLeave = () => {
5189
5208
  },
5190
5209
  "data-testid": "join_again_btn"
5191
5210
  },
5192
- /* @__PURE__ */ React39.createElement(ExitIcon, null),
5193
- /* @__PURE__ */ React39.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
5211
+ /* @__PURE__ */ React40.createElement(ExitIcon, null),
5212
+ /* @__PURE__ */ React40.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
5194
5213
  ))
5195
5214
  ));
5196
5215
  };
5197
5216
  var PostLeave_default = PostLeave;
5198
5217
 
5199
5218
  // src/Prebuilt/components/Preview/PreviewContainer.tsx
5200
- import React53 from "react";
5219
+ import React54 from "react";
5201
5220
  import { useNavigate as useNavigate4, useParams as useParams4 } from "react-router-dom";
5202
5221
  import { useSearchParam } from "react-use";
5203
5222
 
5204
5223
  // src/Prebuilt/components/Preview/PreviewJoin.tsx
5205
- import React52, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect23, useState as useState16 } from "react";
5224
+ import React53, { Fragment as Fragment4, Suspense, useCallback as useCallback16, useEffect as useEffect24, useState as useState16 } from "react";
5206
5225
  import { useMedia as useMedia6 } from "react-use";
5207
5226
  import {
5208
5227
  HMSRoomState as HMSRoomState6,
@@ -5219,7 +5238,7 @@ import {
5219
5238
  import { MicOffIcon as MicOffIcon2, SettingsIcon as SettingsIcon2 } from "@100mslive/react-icons";
5220
5239
 
5221
5240
  // src/Prebuilt/components/AudioVideoToggle.jsx
5222
- import React41, { Fragment as Fragment2 } from "react";
5241
+ import React42, { Fragment as Fragment2 } from "react";
5223
5242
  import {
5224
5243
  DeviceType as DeviceType2,
5225
5244
  HMSRoomState as HMSRoomState5,
@@ -5234,7 +5253,7 @@ import {
5234
5253
  import { CameraFlipIcon as CameraFlipIcon2, MicOffIcon, MicOnIcon as MicOnIcon3, VideoOffIcon, VideoOnIcon } from "@100mslive/react-icons";
5235
5254
 
5236
5255
  // src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx
5237
- import React40 from "react";
5256
+ import React41 from "react";
5238
5257
  import { VerticalMenuIcon } from "@100mslive/react-icons";
5239
5258
  var IconSection = styled(IconButton_default, {
5240
5259
  w: "unset",
@@ -5286,7 +5305,7 @@ var IconButtonWithOptions = ({
5286
5305
  }) => {
5287
5306
  const bgCss = { backgroundColor: disabled ? "$surface_brighter" : active ? "$transparent" : "$secondary_dim" };
5288
5307
  const iconCss = { color: disabled ? "$on_surface_low" : active ? "$on_surface_high" : "$on_primary_high" };
5289
- return /* @__PURE__ */ React40.createElement(Flex, null, /* @__PURE__ */ React40.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React40.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React40.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React40.createElement(Dropdown.Root, null, /* @__PURE__ */ React40.createElement(
5308
+ return /* @__PURE__ */ React41.createElement(Flex, null, /* @__PURE__ */ React41.createElement(IconSection, { css: bgCss, onClick }, /* @__PURE__ */ React41.createElement(Tooltip, { disabled: !tooltipMessage, title: tooltipMessage }, /* @__PURE__ */ React41.createElement(Flex, { align: "center", justify: "center", css: iconCss }, icon))), /* @__PURE__ */ React41.createElement(Dropdown.Root, null, /* @__PURE__ */ React41.createElement(
5290
5309
  Dropdown.Trigger,
5291
5310
  {
5292
5311
  asChild: true,
@@ -5297,8 +5316,8 @@ var IconButtonWithOptions = ({
5297
5316
  }
5298
5317
  }
5299
5318
  },
5300
- /* @__PURE__ */ React40.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React40.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React40.createElement(Box, { css: iconCss }, /* @__PURE__ */ React40.createElement(VerticalMenuIcon, null))))
5301
- ), /* @__PURE__ */ React40.createElement(
5319
+ /* @__PURE__ */ React41.createElement(OptionsSection, { css: bgCss }, /* @__PURE__ */ React41.createElement(Tooltip, { title: "View Options" }, /* @__PURE__ */ React41.createElement(Box, { css: iconCss }, /* @__PURE__ */ React41.createElement(VerticalMenuIcon, null))))
5320
+ ), /* @__PURE__ */ React41.createElement(
5302
5321
  Dropdown.Content,
5303
5322
  {
5304
5323
  sideOffset: 5,
@@ -5310,7 +5329,7 @@ var IconButtonWithOptions = ({
5310
5329
  border: "none"
5311
5330
  }
5312
5331
  },
5313
- options.map((option, index) => /* @__PURE__ */ React40.createElement(
5332
+ options.map((option, index) => /* @__PURE__ */ React41.createElement(
5314
5333
  Dropdown.Item,
5315
5334
  {
5316
5335
  key: option.title,
@@ -5337,7 +5356,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5337
5356
  const { videoInput, audioInput } = allDevices;
5338
5357
  const formattedVideoInputList = videoInput == null ? void 0 : videoInput.map((videoInput2) => ({
5339
5358
  active: selectedDeviceIDs.videoInput === videoInput2.deviceId,
5340
- content: /* @__PURE__ */ React41.createElement(
5359
+ content: /* @__PURE__ */ React42.createElement(
5341
5360
  Text,
5342
5361
  {
5343
5362
  variant: "sm",
@@ -5353,7 +5372,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5353
5372
  }));
5354
5373
  const formattedAudioInputList = audioInput == null ? void 0 : audioInput.map((audioInput2) => ({
5355
5374
  active: selectedDeviceIDs.audioInput === audioInput2.deviceId,
5356
- content: /* @__PURE__ */ React41.createElement(
5375
+ content: /* @__PURE__ */ React42.createElement(
5357
5376
  Text,
5358
5377
  {
5359
5378
  variant: "sm",
@@ -5374,7 +5393,7 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5374
5393
  const roomState = useHMSStore17(selectRoomState5);
5375
5394
  const hasAudioDevices = (audioInput == null ? void 0 : audioInput.length) > 0;
5376
5395
  const hasVideoDevices = (videoInput == null ? void 0 : videoInput.length) > 0;
5377
- return /* @__PURE__ */ React41.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React41.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React41.createElement(
5396
+ return /* @__PURE__ */ React42.createElement(Fragment2, null, toggleAudio ? hideOptions || !hasAudioDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)` }, /* @__PURE__ */ React42.createElement(
5378
5397
  IconButton_default,
5379
5398
  {
5380
5399
  active: isLocalAudioEnabled,
@@ -5384,20 +5403,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5384
5403
  "data-testid": "audio_btn",
5385
5404
  className: "__cancel-drag-event"
5386
5405
  },
5387
- !isLocalAudioEnabled ? /* @__PURE__ */ React41.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React41.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
5388
- )) : /* @__PURE__ */ React41.createElement(
5406
+ !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" })
5407
+ )) : /* @__PURE__ */ React42.createElement(
5389
5408
  IconButtonWithOptions,
5390
5409
  {
5391
5410
  options: formattedAudioInputList,
5392
5411
  disabled: !toggleAudio,
5393
5412
  onDisabledClick: toggleAudio,
5394
5413
  tooltipMessage: `Turn ${isLocalAudioEnabled ? "off" : "on"} audio (${isMacOS ? "\u2318" : "ctrl"} + d)`,
5395
- icon: !isLocalAudioEnabled ? /* @__PURE__ */ React41.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React41.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
5414
+ icon: !isLocalAudioEnabled ? /* @__PURE__ */ React42.createElement(MicOffIcon, { "data-testid": "audio_off_btn" }) : /* @__PURE__ */ React42.createElement(MicOnIcon3, { "data-testid": "audio_on_btn" }),
5396
5415
  active: isLocalAudioEnabled,
5397
5416
  onClick: toggleAudio,
5398
5417
  key: "toggleAudio"
5399
5418
  }
5400
- ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React41.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React41.createElement(
5419
+ ) : null, toggleVideo ? hideOptions || !hasVideoDevices ? /* @__PURE__ */ React42.createElement(Tooltip, { title: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)` }, /* @__PURE__ */ React42.createElement(
5401
5420
  IconButton_default,
5402
5421
  {
5403
5422
  key: "toggleVideo",
@@ -5407,20 +5426,20 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5407
5426
  "data-testid": "video_btn",
5408
5427
  className: "__cancel-drag-event"
5409
5428
  },
5410
- !isLocalVideoEnabled ? /* @__PURE__ */ React41.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React41.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
5411
- )) : /* @__PURE__ */ React41.createElement(
5429
+ !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" })
5430
+ )) : /* @__PURE__ */ React42.createElement(
5412
5431
  IconButtonWithOptions,
5413
5432
  {
5414
5433
  disabled: !toggleVideo,
5415
5434
  onDisabledClick: toggleVideo,
5416
5435
  options: formattedVideoInputList,
5417
5436
  tooltipMessage: `Turn ${isLocalVideoEnabled ? "off" : "on"} video (${isMacOS ? "\u2318" : "ctrl"} + e)`,
5418
- icon: !isLocalVideoEnabled ? /* @__PURE__ */ React41.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React41.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
5437
+ icon: !isLocalVideoEnabled ? /* @__PURE__ */ React42.createElement(VideoOffIcon, { "data-testid": "video_off_btn" }) : /* @__PURE__ */ React42.createElement(VideoOnIcon, { "data-testid": "video_on_btn" }),
5419
5438
  key: "toggleVideo",
5420
5439
  active: isLocalVideoEnabled,
5421
5440
  onClick: toggleVideo
5422
5441
  }
5423
- ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React41.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React41.createElement(
5442
+ ) : null, (localVideoTrack == null ? void 0 : localVideoTrack.facingMode) && roomState === HMSRoomState5.Preview ? /* @__PURE__ */ React42.createElement(Tooltip, { title: "Switch Camera", key: "switchCamera" }, /* @__PURE__ */ React42.createElement(
5424
5443
  IconButton_default,
5425
5444
  {
5426
5445
  onClick: () => __async(void 0, null, function* () {
@@ -5434,14 +5453,14 @@ var AudioVideoToggle = ({ hideOptions = false }) => {
5434
5453
  }
5435
5454
  })
5436
5455
  },
5437
- /* @__PURE__ */ React41.createElement(CameraFlipIcon2, null)
5456
+ /* @__PURE__ */ React42.createElement(CameraFlipIcon2, null)
5438
5457
  )) : null);
5439
5458
  };
5440
5459
 
5441
5460
  // src/Prebuilt/components/Chip.tsx
5442
- import React42 from "react";
5461
+ import React43 from "react";
5443
5462
  var Chip = ({
5444
- icon = /* @__PURE__ */ React42.createElement(React42.Fragment, null),
5463
+ icon = /* @__PURE__ */ React43.createElement(React43.Fragment, null),
5445
5464
  content = "",
5446
5465
  backgroundColor = "$surface_default",
5447
5466
  textColor = "$on_surface_high",
@@ -5452,16 +5471,25 @@ var Chip = ({
5452
5471
  if (hideIfNoContent && !content) {
5453
5472
  return null;
5454
5473
  }
5455
- return /* @__PURE__ */ React42.createElement(Flex, { align: "center", css: __spreadValues({ backgroundColor, p: "$4 $6", borderRadius: "$4" }, css2), onClick: () => onClick == null ? void 0 : onClick() }, icon, /* @__PURE__ */ React42.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor, ml: "$2" } }, content));
5474
+ return /* @__PURE__ */ React43.createElement(
5475
+ Flex,
5476
+ {
5477
+ align: "center",
5478
+ css: __spreadValues({ backgroundColor, p: "$4 $6", gap: "$2", borderRadius: "$4" }, css2),
5479
+ onClick: () => onClick == null ? void 0 : onClick()
5480
+ },
5481
+ icon,
5482
+ /* @__PURE__ */ React43.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: textColor } }, content)
5483
+ );
5456
5484
  };
5457
5485
  var Chip_default = Chip;
5458
5486
 
5459
5487
  // src/Prebuilt/components/Connection/TileConnection.tsx
5460
- import React44 from "react";
5488
+ import React45 from "react";
5461
5489
  import { PinIcon, SpotlightIcon } from "@100mslive/react-icons";
5462
5490
 
5463
5491
  // src/Prebuilt/components/Connection/ConnectionIndicator.tsx
5464
- import React43 from "react";
5492
+ import React44 from "react";
5465
5493
  import { selectConnectionQualityByPeerID as selectConnectionQualityByPeerID2, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
5466
5494
  import { PoorConnectivityIcon as PoorConnectivityIcon2 } from "@100mslive/react-icons";
5467
5495
 
@@ -5523,10 +5551,10 @@ var ConnectionIndicator = ({
5523
5551
  return null;
5524
5552
  }
5525
5553
  if (downlinkQuality === 0) {
5526
- return /* @__PURE__ */ React43.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React43.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React43.createElement(PoorConnectivityIcon2, null)));
5554
+ return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, css: { color: "#ED4C5A" }, "data-testid": "tile_network" }, /* @__PURE__ */ React44.createElement(PoorConnectivityIcon2, null)));
5527
5555
  }
5528
5556
  const size = isTile ? 12 : 16;
5529
- return /* @__PURE__ */ React43.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React43.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React43.createElement(
5557
+ return /* @__PURE__ */ React44.createElement(Tooltip, { title: getTooltipText(downlinkQuality) }, /* @__PURE__ */ React44.createElement(Wrapper, { isTile, "data-testid": "tile_network", css: { backgroundColor: hideBg ? "" : "$surface_bright" } }, /* @__PURE__ */ React44.createElement(
5530
5558
  "svg",
5531
5559
  {
5532
5560
  width: size,
@@ -5541,7 +5569,7 @@ var ConnectionIndicator = ({
5541
5569
  strokeMiterlimit: 2
5542
5570
  }
5543
5571
  },
5544
- /* @__PURE__ */ React43.createElement(
5572
+ /* @__PURE__ */ React44.createElement(
5545
5573
  "path",
5546
5574
  {
5547
5575
  d: "M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z",
@@ -5549,7 +5577,7 @@ var ConnectionIndicator = ({
5549
5577
  transform: "translate(-.333)"
5550
5578
  }
5551
5579
  ),
5552
- /* @__PURE__ */ React43.createElement(
5580
+ /* @__PURE__ */ React44.createElement(
5553
5581
  "path",
5554
5582
  {
5555
5583
  d: "M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z",
@@ -5557,14 +5585,14 @@ var ConnectionIndicator = ({
5557
5585
  transform: "translate(-.333)"
5558
5586
  }
5559
5587
  ),
5560
- /* @__PURE__ */ React43.createElement(
5588
+ /* @__PURE__ */ React44.createElement(
5561
5589
  "path",
5562
5590
  {
5563
5591
  d: "M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z",
5564
5592
  fill: getColor(2, downlinkQuality, defaultColor, theme2)
5565
5593
  }
5566
5594
  ),
5567
- /* @__PURE__ */ React43.createElement(
5595
+ /* @__PURE__ */ React44.createElement(
5568
5596
  "path",
5569
5597
  {
5570
5598
  d: "M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z",
@@ -5583,7 +5611,7 @@ var TileConnection = ({
5583
5611
  spotlighted,
5584
5612
  pinned
5585
5613
  }) => {
5586
- return /* @__PURE__ */ React44.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React44.createElement(IconWrapper, null, /* @__PURE__ */ React44.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React44.createElement(IconWrapper, null, /* @__PURE__ */ React44.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React44.createElement(
5614
+ return /* @__PURE__ */ React45.createElement(Wrapper2, null, !hideLabel ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(Flex, { align: "center" }, pinned && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(PinIcon, { width: "15", height: "15" })), spotlighted && /* @__PURE__ */ React45.createElement(IconWrapper, null, /* @__PURE__ */ React45.createElement(SpotlightIcon, { width: "15", height: "15" })), /* @__PURE__ */ React45.createElement(
5587
5615
  Text,
5588
5616
  {
5589
5617
  css: __spreadValues({
@@ -5593,7 +5621,7 @@ var TileConnection = ({
5593
5621
  variant: "xs"
5594
5622
  },
5595
5623
  name
5596
- )), /* @__PURE__ */ React44.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
5624
+ )), /* @__PURE__ */ React45.createElement(ConnectionIndicator, { isTile: true, peerId, hideBg: true })) : null);
5597
5625
  };
5598
5626
  var IconWrapper = styled("div", { c: "$on_surface_high", ml: "$3", mt: "$1" });
5599
5627
  var Wrapper2 = styled("div", {
@@ -5612,8 +5640,12 @@ var Wrapper2 = styled("div", {
5612
5640
  });
5613
5641
  var TileConnection_default = TileConnection;
5614
5642
 
5643
+ // src/Prebuilt/components/PrebuiltTileElements.tsx
5644
+ var PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: "$12", width: "$12" });
5645
+ var PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: "$12", width: "$12" });
5646
+
5615
5647
  // src/Prebuilt/components/Settings/SettingsModal.jsx
5616
- import React50, { useCallback as useCallback15, useEffect as useEffect22, useState as useState15 } from "react";
5648
+ import React51, { useCallback as useCallback15, useEffect as useEffect23, useState as useState15 } from "react";
5617
5649
  import { useMedia as useMedia4 } from "react-use";
5618
5650
  import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons";
5619
5651
 
@@ -5621,7 +5653,7 @@ import { ChevronLeftIcon, CrossIcon as CrossIcon6 } from "@100mslive/react-icons
5621
5653
  import { GridFourIcon, NotificationsIcon, SettingsIcon } from "@100mslive/react-icons";
5622
5654
 
5623
5655
  // src/Prebuilt/components/Settings/DeviceSettings.jsx
5624
- import React46, { Fragment as Fragment3, useEffect as useEffect21, useRef as useRef7, useState as useState14 } from "react";
5656
+ import React47, { Fragment as Fragment3, useEffect as useEffect22, useRef as useRef7, useState as useState14 } from "react";
5625
5657
  import {
5626
5658
  DeviceType as DeviceType3,
5627
5659
  selectIsLocalVideoEnabled as selectIsLocalVideoEnabled3,
@@ -5633,10 +5665,10 @@ import {
5633
5665
  import { MicOnIcon as MicOnIcon4, SpeakerIcon as SpeakerIcon2, VideoOnIcon as VideoOnIcon2 } from "@100mslive/react-icons";
5634
5666
 
5635
5667
  // src/Prebuilt/primitives/DropdownTrigger.jsx
5636
- import React45 from "react";
5668
+ import React46 from "react";
5637
5669
  import { ChevronDownIcon as ChevronDownIcon3, ChevronUpIcon as ChevronUpIcon3 } from "@100mslive/react-icons";
5638
- var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
5639
- return /* @__PURE__ */ React45.createElement(
5670
+ var DialogDropdownTrigger = React46.forwardRef(({ title, css: css2, open, icon, titleCSS = {} }, ref) => {
5671
+ return /* @__PURE__ */ React46.createElement(
5640
5672
  Dropdown.Trigger,
5641
5673
  {
5642
5674
  asChild: true,
@@ -5650,7 +5682,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
5650
5682
  }, css2),
5651
5683
  ref
5652
5684
  },
5653
- /* @__PURE__ */ React45.createElement(
5685
+ /* @__PURE__ */ React46.createElement(
5654
5686
  Flex,
5655
5687
  {
5656
5688
  css: {
@@ -5661,7 +5693,7 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
5661
5693
  }
5662
5694
  },
5663
5695
  icon,
5664
- /* @__PURE__ */ React45.createElement(
5696
+ /* @__PURE__ */ React46.createElement(
5665
5697
  Text,
5666
5698
  {
5667
5699
  css: __spreadValues(__spreadProps(__spreadValues({
@@ -5673,14 +5705,14 @@ var DialogDropdownTrigger = React45.forwardRef(({ title, css: css2, open, icon,
5673
5705
  },
5674
5706
  title
5675
5707
  ),
5676
- open ? /* @__PURE__ */ React45.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React45.createElement(ChevronDownIcon3, null)
5708
+ open ? /* @__PURE__ */ React46.createElement(ChevronUpIcon3, null) : /* @__PURE__ */ React46.createElement(ChevronDownIcon3, null)
5677
5709
  )
5678
5710
  );
5679
5711
  });
5680
5712
 
5681
5713
  // src/Prebuilt/components/hooks/useDropdownSelection.jsx
5682
5714
  var useDropdownSelection = () => {
5683
- return "$primary_dim";
5715
+ return "$surface_bright";
5684
5716
  };
5685
5717
 
5686
5718
  // src/Prebuilt/components/Settings/DeviceSettings.jsx
@@ -5698,7 +5730,7 @@ var Settings = ({ setHide }) => {
5698
5730
  if (!(videoInput == null ? void 0 : videoInput.length) && !(audioInput == null ? void 0 : audioInput.length) && !(audioOutputFiltered == null ? void 0 : audioOutputFiltered.length)) {
5699
5731
  setHide(true);
5700
5732
  }
5701
- return /* @__PURE__ */ React46.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React46.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React46.createElement(
5733
+ return /* @__PURE__ */ React47.createElement(Box, { className: settingOverflow() }, (videoInput == null ? void 0 : videoInput.length) ? /* @__PURE__ */ React47.createElement(Fragment3, null, isVideoOn && /* @__PURE__ */ React47.createElement(
5702
5734
  StyledVideoTile.Container,
5703
5735
  {
5704
5736
  css: {
@@ -5709,24 +5741,24 @@ var Settings = ({ setHide }) => {
5709
5741
  m: "$10 auto"
5710
5742
  }
5711
5743
  },
5712
- /* @__PURE__ */ React46.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
5713
- ), /* @__PURE__ */ React46.createElement(
5744
+ /* @__PURE__ */ React47.createElement(Video, { trackId: videoTrackId, mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo })
5745
+ ), /* @__PURE__ */ React47.createElement(
5714
5746
  DeviceSelector,
5715
5747
  {
5716
5748
  title: "Video",
5717
5749
  devices: videoInput,
5718
- icon: /* @__PURE__ */ React46.createElement(VideoOnIcon2, null),
5750
+ icon: /* @__PURE__ */ React47.createElement(VideoOnIcon2, null),
5719
5751
  selection: selectedDeviceIDs.videoInput,
5720
5752
  onChange: (deviceId) => updateDevice({
5721
5753
  deviceId,
5722
5754
  deviceType: DeviceType3.videoInput
5723
5755
  })
5724
5756
  }
5725
- )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React46.createElement(
5757
+ )) : null, (audioInput == null ? void 0 : audioInput.length) ? /* @__PURE__ */ React47.createElement(
5726
5758
  DeviceSelector,
5727
5759
  {
5728
5760
  title: shouldShowAudioOutput ? "Microphone" : "Audio",
5729
- icon: /* @__PURE__ */ React46.createElement(MicOnIcon4, null),
5761
+ icon: /* @__PURE__ */ React47.createElement(MicOnIcon4, null),
5730
5762
  devices: audioInput,
5731
5763
  selection: selectedDeviceIDs.audioInput,
5732
5764
  onChange: (deviceId) => updateDevice({
@@ -5734,11 +5766,11 @@ var Settings = ({ setHide }) => {
5734
5766
  deviceType: DeviceType3.audioInput
5735
5767
  })
5736
5768
  }
5737
- ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React46.createElement(
5769
+ ) : null, (audioOutputFiltered == null ? void 0 : audioOutputFiltered.length) && shouldShowAudioOutput ? /* @__PURE__ */ React47.createElement(
5738
5770
  DeviceSelector,
5739
5771
  {
5740
5772
  title: "Speaker",
5741
- icon: /* @__PURE__ */ React46.createElement(SpeakerIcon2, null),
5773
+ icon: /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
5742
5774
  devices: audioOutput,
5743
5775
  selection: selectedDeviceIDs.audioOutput,
5744
5776
  onChange: (deviceId) => updateDevice({
@@ -5746,7 +5778,7 @@ var Settings = ({ setHide }) => {
5746
5778
  deviceType: DeviceType3.audioOutput
5747
5779
  })
5748
5780
  },
5749
- /* @__PURE__ */ React46.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
5781
+ /* @__PURE__ */ React47.createElement(TestAudio, { id: selectedDeviceIDs.audioOutput })
5750
5782
  ) : null);
5751
5783
  };
5752
5784
  var DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
@@ -5754,7 +5786,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
5754
5786
  const [open, setOpen] = useState14(false);
5755
5787
  const selectionBg = useDropdownSelection();
5756
5788
  const ref = useRef7(null);
5757
- return /* @__PURE__ */ React46.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React46.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React46.createElement(
5789
+ return /* @__PURE__ */ React47.createElement(Box, { css: { mb: "$10" } }, /* @__PURE__ */ React47.createElement(Text, { css: { mb: "$4" } }, title), /* @__PURE__ */ React47.createElement(
5758
5790
  Flex,
5759
5791
  {
5760
5792
  align: "center",
@@ -5766,7 +5798,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
5766
5798
  }
5767
5799
  }
5768
5800
  },
5769
- /* @__PURE__ */ React46.createElement(
5801
+ /* @__PURE__ */ React47.createElement(
5770
5802
  Box,
5771
5803
  {
5772
5804
  css: {
@@ -5780,7 +5812,7 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
5780
5812
  }
5781
5813
  }
5782
5814
  },
5783
- /* @__PURE__ */ React46.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React46.createElement(
5815
+ /* @__PURE__ */ React47.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(
5784
5816
  DialogDropdownTrigger,
5785
5817
  {
5786
5818
  ref,
@@ -5788,8 +5820,8 @@ var DeviceSelector = ({ title, devices, selection, onChange, icon, children = nu
5788
5820
  title: ((_a7 = devices.find(({ deviceId }) => deviceId === selection)) == null ? void 0 : _a7.label) || "Select device from list",
5789
5821
  open
5790
5822
  }
5791
- ), /* @__PURE__ */ React46.createElement(Dropdown.Portal, null, /* @__PURE__ */ React46.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
5792
- return /* @__PURE__ */ React46.createElement(
5823
+ ), /* @__PURE__ */ React47.createElement(Dropdown.Portal, null, /* @__PURE__ */ React47.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_b7 = ref.current) == null ? void 0 : _b7.clientWidth, zIndex: 1001 } }, devices.map((device) => {
5824
+ return /* @__PURE__ */ React47.createElement(
5793
5825
  Dropdown.Item,
5794
5826
  {
5795
5827
  key: device.label,
@@ -5810,7 +5842,7 @@ var TEST_AUDIO_URL = "https://100ms.live/test-audio.wav";
5810
5842
  var TestAudio = ({ id }) => {
5811
5843
  const audioRef = useRef7(null);
5812
5844
  const [playing, setPlaying] = useState14(false);
5813
- useEffect21(() => {
5845
+ useEffect22(() => {
5814
5846
  if (audioRef.current && id) {
5815
5847
  try {
5816
5848
  if (typeof audioRef.current.setSinkId !== "undefined") {
@@ -5821,7 +5853,7 @@ var TestAudio = ({ id }) => {
5821
5853
  }
5822
5854
  }
5823
5855
  }, [id]);
5824
- return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
5856
+ return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
5825
5857
  Button,
5826
5858
  {
5827
5859
  variant: "standard",
@@ -5838,22 +5870,22 @@ var TestAudio = ({ id }) => {
5838
5870
  },
5839
5871
  disabled: playing
5840
5872
  },
5841
- /* @__PURE__ */ React46.createElement(SpeakerIcon2, null),
5873
+ /* @__PURE__ */ React47.createElement(SpeakerIcon2, null),
5842
5874
  "\xA0Test",
5843
5875
  " ",
5844
- /* @__PURE__ */ React46.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
5845
- ), /* @__PURE__ */ React46.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
5876
+ /* @__PURE__ */ React47.createElement(Text, { as: "span", css: { display: "none", "@md": { display: "inline" } } }, "\xA0 speaker")
5877
+ ), /* @__PURE__ */ React47.createElement("audio", { ref: audioRef, src: TEST_AUDIO_URL, onEnded: () => setPlaying(false), onPlay: () => setPlaying(true) }));
5846
5878
  };
5847
5879
  var DeviceSettings_default = Settings;
5848
5880
 
5849
5881
  // src/Prebuilt/components/Settings/LayoutSettings.jsx
5850
- import React48, { useCallback as useCallback14 } from "react";
5882
+ import React49, { useCallback as useCallback14 } from "react";
5851
5883
  import { selectIsLocalScreenShared, selectIsLocalVideoEnabled as selectIsLocalVideoEnabled4, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
5852
5884
 
5853
5885
  // src/Prebuilt/components/Settings/SwitchWithLabel.jsx
5854
- import React47 from "react";
5886
+ import React48 from "react";
5855
5887
  var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) => {
5856
- return /* @__PURE__ */ React47.createElement(
5888
+ return /* @__PURE__ */ React48.createElement(
5857
5889
  Flex,
5858
5890
  {
5859
5891
  align: "center",
@@ -5865,7 +5897,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
5865
5897
  display: hide ? "none" : "flex"
5866
5898
  }
5867
5899
  },
5868
- /* @__PURE__ */ React47.createElement(
5900
+ /* @__PURE__ */ React48.createElement(
5869
5901
  Label3,
5870
5902
  {
5871
5903
  htmlFor: id,
@@ -5883,7 +5915,7 @@ var SwitchWithLabel = ({ label, icon, id, onChange, checked, hide = false }) =>
5883
5915
  icon,
5884
5916
  label
5885
5917
  ),
5886
- /* @__PURE__ */ React47.createElement(Switch, { id, checked, onCheckedChange: onChange })
5918
+ /* @__PURE__ */ React48.createElement(Switch, { id, checked, onCheckedChange: onChange })
5887
5919
  );
5888
5920
  };
5889
5921
  var SwitchWithLabel_default = SwitchWithLabel;
@@ -5904,7 +5936,7 @@ var LayoutSettings = () => {
5904
5936
  }),
5905
5937
  [hmsActions, isLocalVideoEnabled, isLocalScreenShared, setUISettings]
5906
5938
  );
5907
- return /* @__PURE__ */ React48.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React48.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React48.createElement(
5939
+ return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(SwitchWithLabel_default, { label: "Audio Only Mode", id: "audioOnlyMode", checked: isAudioOnly, onChange: toggleIsAudioOnly }), /* @__PURE__ */ React49.createElement(
5908
5940
  SwitchWithLabel_default,
5909
5941
  {
5910
5942
  label: "Mirror Local Video",
@@ -5916,7 +5948,7 @@ var LayoutSettings = () => {
5916
5948
  });
5917
5949
  }
5918
5950
  }
5919
- ), /* @__PURE__ */ React48.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React48.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React48.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React48.createElement(
5951
+ ), /* @__PURE__ */ React49.createElement(Flex, { align: "center", css: { w: "100%", my: "$2", py: "$8", "@md": { display: "none" } } }, /* @__PURE__ */ React49.createElement(Text, { variant: "md", css: { fontWeight: "$semiBold" } }, "Tiles In View(", maxTileCount, ")"), /* @__PURE__ */ React49.createElement(Flex, { justify: "end", css: { flex: "1 1 0" } }, /* @__PURE__ */ React49.createElement(
5920
5952
  Slider,
5921
5953
  {
5922
5954
  step: 1,
@@ -5932,11 +5964,11 @@ var LayoutSettings = () => {
5932
5964
  };
5933
5965
 
5934
5966
  // src/Prebuilt/components/Settings/NotificationSettings.jsx
5935
- import React49 from "react";
5967
+ import React50 from "react";
5936
5968
  import { AlertOctagonIcon, HandIcon as HandIcon2, PeopleAddIcon as PeopleAddIcon2, PeopleRemoveIcon as PeopleRemoveIcon2 } from "@100mslive/react-icons";
5937
5969
  var NotificationItem = ({ type, label, icon, checked }) => {
5938
5970
  const [, setSubscribedNotifications] = useSetSubscribedNotifications(type);
5939
- return /* @__PURE__ */ React49.createElement(
5971
+ return /* @__PURE__ */ React50.createElement(
5940
5972
  SwitchWithLabel_default,
5941
5973
  {
5942
5974
  label,
@@ -5951,36 +5983,36 @@ var NotificationItem = ({ type, label, icon, checked }) => {
5951
5983
  };
5952
5984
  var NotificationSettings = () => {
5953
5985
  const subscribedNotifications = useSubscribedNotifications();
5954
- return /* @__PURE__ */ React49.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React49.createElement(
5986
+ return /* @__PURE__ */ React50.createElement(Box, { className: settingOverflow() }, /* @__PURE__ */ React50.createElement(
5955
5987
  NotificationItem,
5956
5988
  {
5957
5989
  label: "Peer Joined",
5958
5990
  type: SUBSCRIBED_NOTIFICATIONS.PEER_JOINED,
5959
- icon: /* @__PURE__ */ React49.createElement(PeopleAddIcon2, null),
5991
+ icon: /* @__PURE__ */ React50.createElement(PeopleAddIcon2, null),
5960
5992
  checked: subscribedNotifications.PEER_JOINED
5961
5993
  }
5962
- ), /* @__PURE__ */ React49.createElement(
5994
+ ), /* @__PURE__ */ React50.createElement(
5963
5995
  NotificationItem,
5964
5996
  {
5965
5997
  label: "Peer Leave",
5966
5998
  type: SUBSCRIBED_NOTIFICATIONS.PEER_LEFT,
5967
- icon: /* @__PURE__ */ React49.createElement(PeopleRemoveIcon2, null),
5999
+ icon: /* @__PURE__ */ React50.createElement(PeopleRemoveIcon2, null),
5968
6000
  checked: subscribedNotifications.PEER_LEFT
5969
6001
  }
5970
- ), /* @__PURE__ */ React49.createElement(
6002
+ ), /* @__PURE__ */ React50.createElement(
5971
6003
  NotificationItem,
5972
6004
  {
5973
6005
  label: "Hand Raised",
5974
6006
  type: SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED,
5975
- icon: /* @__PURE__ */ React49.createElement(HandIcon2, null),
6007
+ icon: /* @__PURE__ */ React50.createElement(HandIcon2, null),
5976
6008
  checked: subscribedNotifications.METADATA_UPDATED
5977
6009
  }
5978
- ), /* @__PURE__ */ React49.createElement(
6010
+ ), /* @__PURE__ */ React50.createElement(
5979
6011
  NotificationItem,
5980
6012
  {
5981
6013
  label: "Error",
5982
6014
  type: SUBSCRIBED_NOTIFICATIONS.ERROR,
5983
- icon: /* @__PURE__ */ React49.createElement(AlertOctagonIcon, null),
6015
+ icon: /* @__PURE__ */ React50.createElement(AlertOctagonIcon, null),
5984
6016
  checked: subscribedNotifications.ERROR
5985
6017
  }
5986
6018
  ));
@@ -6022,7 +6054,7 @@ var settingsList = [
6022
6054
  ];
6023
6055
 
6024
6056
  // src/Prebuilt/components/Settings/SettingsModal.jsx
6025
- var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React50.createElement(React50.Fragment, null) }) => {
6057
+ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ */ React51.createElement(React51.Fragment, null) }) => {
6026
6058
  const mediaQueryLg = config.media.md;
6027
6059
  const isMobile = useMedia4(mediaQueryLg);
6028
6060
  const [showSetting, setShowSetting] = useState15(
@@ -6032,7 +6064,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
6032
6064
  (key) => (hide) => setShowSetting((prev) => __spreadProps(__spreadValues({}, prev), { [key]: !hide })),
6033
6065
  [setShowSetting]
6034
6066
  );
6035
- useEffect22(() => {
6067
+ useEffect23(() => {
6036
6068
  if (screenType === "hls_live_streaming") {
6037
6069
  hideSettingByTabName("layout")(true);
6038
6070
  }
@@ -6044,7 +6076,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
6044
6076
  const resetSelection = useCallback15(() => {
6045
6077
  setSelection("");
6046
6078
  }, []);
6047
- useEffect22(() => {
6079
+ useEffect23(() => {
6048
6080
  var _a7;
6049
6081
  if (isMobile) {
6050
6082
  setSelection("");
@@ -6053,7 +6085,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
6053
6085
  setSelection(firstNotHiddenTabName);
6054
6086
  }
6055
6087
  }, [isMobile, showSetting]);
6056
- return isMobile ? /* @__PURE__ */ React50.createElement(
6088
+ return isMobile ? /* @__PURE__ */ React51.createElement(
6057
6089
  MobileSettingModal,
6058
6090
  {
6059
6091
  open,
@@ -6065,7 +6097,7 @@ var SettingsModal = ({ open, onOpenChange, screenType, children = /* @__PURE__ *
6065
6097
  resetSelection,
6066
6098
  children
6067
6099
  }
6068
- ) : /* @__PURE__ */ React50.createElement(
6100
+ ) : /* @__PURE__ */ React51.createElement(
6069
6101
  DesktopSettingModal,
6070
6102
  {
6071
6103
  open,
@@ -6087,9 +6119,9 @@ var MobileSettingModal = ({
6087
6119
  showSetting,
6088
6120
  hideSettingByTabName,
6089
6121
  resetSelection,
6090
- children = /* @__PURE__ */ React50.createElement(React50.Fragment, null)
6122
+ children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
6091
6123
  }) => {
6092
- return /* @__PURE__ */ React50.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React50.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React50.createElement(
6124
+ return /* @__PURE__ */ React51.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Sheet.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(
6093
6125
  Sheet.Content,
6094
6126
  {
6095
6127
  css: {
@@ -6097,9 +6129,9 @@ var MobileSettingModal = ({
6097
6129
  overflowY: "auto"
6098
6130
  }
6099
6131
  },
6100
- /* @__PURE__ */ React50.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React50.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React50.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React50.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React50.createElement(Sheet.Close, null, /* @__PURE__ */ React50.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React50.createElement(CrossIcon6, null))))),
6101
- /* @__PURE__ */ React50.createElement(HorizontalDivider, null),
6102
- !selection ? /* @__PURE__ */ React50.createElement(
6132
+ /* @__PURE__ */ React51.createElement(Sheet.Title, { css: { py: "$10", px: "$8", alignItems: "center" } }, /* @__PURE__ */ React51.createElement(Flex, { direction: "row", justify: "between", css: { w: "100%" } }, !selection ? /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, "Settings") : /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { display: "flex" } }, /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { r: "$round", mr: "$2" }, onClick: resetSelection }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), (selection == null ? void 0 : selection.charAt(0).toUpperCase()) + selection.slice(1)), /* @__PURE__ */ React51.createElement(Sheet.Close, null, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null))))),
6133
+ /* @__PURE__ */ React51.createElement(HorizontalDivider, null),
6134
+ !selection ? /* @__PURE__ */ React51.createElement(
6103
6135
  Flex,
6104
6136
  {
6105
6137
  direction: "column",
@@ -6110,7 +6142,7 @@ var MobileSettingModal = ({
6110
6142
  }
6111
6143
  },
6112
6144
  settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
6113
- return /* @__PURE__ */ React50.createElement(
6145
+ return /* @__PURE__ */ React51.createElement(
6114
6146
  Box,
6115
6147
  {
6116
6148
  key: tabName,
@@ -6140,18 +6172,18 @@ var MobileSettingModal = ({
6140
6172
  borderBottom: "1px solid $border_default"
6141
6173
  }
6142
6174
  },
6143
- /* @__PURE__ */ React50.createElement(Icon2, null),
6175
+ /* @__PURE__ */ React51.createElement(Icon2, null),
6144
6176
  title
6145
6177
  );
6146
6178
  })
6147
- ) : /* @__PURE__ */ React50.createElement(
6179
+ ) : /* @__PURE__ */ React51.createElement(
6148
6180
  Box,
6149
6181
  {
6150
6182
  direction: "column",
6151
6183
  css: { overflowY: "scroll", px: "$8", py: "$10", maxHeight: "70vh", overflowX: "hidden" }
6152
6184
  },
6153
6185
  settingsList.filter(({ tabName }) => showSetting[tabName] && selection === tabName).map(({ content: Content10, title, tabName }) => {
6154
- return /* @__PURE__ */ React50.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
6186
+ return /* @__PURE__ */ React51.createElement(Content10, { key: title, setHide: hideSettingByTabName(tabName) });
6155
6187
  })
6156
6188
  )
6157
6189
  ));
@@ -6164,9 +6196,9 @@ var DesktopSettingModal = ({
6164
6196
  showSetting,
6165
6197
  hideSettingByTabName,
6166
6198
  resetSelection,
6167
- children = /* @__PURE__ */ React50.createElement(React50.Fragment, null)
6199
+ children = /* @__PURE__ */ React51.createElement(React51.Fragment, null)
6168
6200
  }) => {
6169
- return /* @__PURE__ */ React50.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React50.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React50.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React50.createElement(Dialog.Overlay, null), /* @__PURE__ */ React50.createElement(
6201
+ return /* @__PURE__ */ React51.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React51.createElement(Dialog.Trigger, { asChild: true }, children), /* @__PURE__ */ React51.createElement(PrebuiltDialogPortal, null, /* @__PURE__ */ React51.createElement(Dialog.Overlay, null), /* @__PURE__ */ React51.createElement(
6170
6202
  Dialog.Content,
6171
6203
  {
6172
6204
  css: {
@@ -6176,7 +6208,7 @@ var DesktopSettingModal = ({
6176
6208
  r: "$4"
6177
6209
  }
6178
6210
  },
6179
- /* @__PURE__ */ React50.createElement(
6211
+ /* @__PURE__ */ React51.createElement(
6180
6212
  Tabs.Root,
6181
6213
  {
6182
6214
  value: selection,
@@ -6184,7 +6216,7 @@ var DesktopSettingModal = ({
6184
6216
  onValueChange: setSelection,
6185
6217
  css: { size: "100%", position: "relative" }
6186
6218
  },
6187
- /* @__PURE__ */ React50.createElement(
6219
+ /* @__PURE__ */ React51.createElement(
6188
6220
  Tabs.List,
6189
6221
  {
6190
6222
  css: {
@@ -6196,12 +6228,12 @@ var DesktopSettingModal = ({
6196
6228
  borderBottomLeftRadius: "$4"
6197
6229
  }
6198
6230
  },
6199
- /* @__PURE__ */ React50.createElement(Text, { variant: "h5" }, "Settings "),
6200
- /* @__PURE__ */ React50.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
6201
- return /* @__PURE__ */ React50.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React50.createElement(Icon2, null), title);
6231
+ /* @__PURE__ */ React51.createElement(Text, { variant: "h5" }, "Settings "),
6232
+ /* @__PURE__ */ React51.createElement(Flex, { direction: "column", css: { mx: 0, overflowY: "auto", pt: "$10" } }, settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ icon: Icon2, tabName, title }) => {
6233
+ return /* @__PURE__ */ React51.createElement(Tabs.Trigger, { key: tabName, value: tabName, css: { gap: "$8" } }, /* @__PURE__ */ React51.createElement(Icon2, null), title);
6202
6234
  }))
6203
6235
  ),
6204
- selection && /* @__PURE__ */ React50.createElement(
6236
+ selection && /* @__PURE__ */ React51.createElement(
6205
6237
  Flex,
6206
6238
  {
6207
6239
  direction: "column",
@@ -6212,20 +6244,20 @@ var DesktopSettingModal = ({
6212
6244
  }
6213
6245
  },
6214
6246
  settingsList.filter(({ tabName }) => showSetting[tabName]).map(({ content: Content10, title, tabName }) => {
6215
- return /* @__PURE__ */ React50.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React50.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React50.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
6247
+ return /* @__PURE__ */ React51.createElement(Tabs.Content, { key: tabName, value: tabName, className: settingContent() }, /* @__PURE__ */ React51.createElement(SettingsContentHeader, { onBack: resetSelection, isMobile: false }, title), /* @__PURE__ */ React51.createElement(Content10, { setHide: hideSettingByTabName(tabName) }));
6216
6248
  })
6217
6249
  )
6218
6250
  ),
6219
- /* @__PURE__ */ React50.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React50.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React50.createElement(CrossIcon6, null)))
6251
+ /* @__PURE__ */ React51.createElement(Dialog.Close, { css: { position: "absolute", right: "$10", top: "$10" } }, /* @__PURE__ */ React51.createElement(IconButton, { as: "div", "data-testid": "dialog_cross_icon" }, /* @__PURE__ */ React51.createElement(CrossIcon6, null)))
6220
6252
  )));
6221
6253
  };
6222
6254
  var SettingsContentHeader = ({ children, isMobile, onBack }) => {
6223
- return /* @__PURE__ */ React50.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React50.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React50.createElement(ChevronLeftIcon, null)), children);
6255
+ return /* @__PURE__ */ React51.createElement(Text, { variant: "h6", css: { mb: "$12", display: "flex", alignItems: "center" } }, isMobile && /* @__PURE__ */ React51.createElement(Box, { as: "span", css: { bg: "$surface_bright", mr: "$4", r: "$round", p: "$2" }, onClick: onBack }, /* @__PURE__ */ React51.createElement(ChevronLeftIcon, null)), children);
6224
6256
  };
6225
6257
  var SettingsModal_default = SettingsModal;
6226
6258
 
6227
6259
  // src/Prebuilt/components/Preview/PreviewForm.tsx
6228
- import React51 from "react";
6260
+ import React52 from "react";
6229
6261
  import { useMedia as useMedia5 } from "react-use";
6230
6262
  import { JoinForm_JoinBtnType as JoinForm_JoinBtnType2 } from "@100mslive/types-prebuilt/elements/join_form";
6231
6263
  import { useRecordingStreaming as useRecordingStreaming3 } from "@100mslive/react-sdk";
@@ -6247,13 +6279,13 @@ var PreviewForm = ({
6247
6279
  const layout = useRoomLayout();
6248
6280
  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) || {};
6249
6281
  const showGoLive = (joinForm == null ? void 0 : joinForm.join_btn_type) === JoinForm_JoinBtnType2.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning;
6250
- return /* @__PURE__ */ React51.createElement(
6282
+ return /* @__PURE__ */ React52.createElement(
6251
6283
  Form,
6252
6284
  {
6253
6285
  css: { flexDirection: cannotPublishVideo ? "column" : "row", "@md": { flexDirection: "row" } },
6254
6286
  onSubmit: formSubmit
6255
6287
  },
6256
- /* @__PURE__ */ React51.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React51.createElement(
6288
+ /* @__PURE__ */ React52.createElement(Flex, { align: "center", css: { gap: "$8", w: "100%" } }, /* @__PURE__ */ React52.createElement(
6257
6289
  Input,
6258
6290
  {
6259
6291
  required: true,
@@ -6274,8 +6306,8 @@ var PreviewForm = ({
6274
6306
  }
6275
6307
  }
6276
6308
  }
6277
- ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React51.createElement(PreviewSettings, null) : null),
6278
- /* @__PURE__ */ React51.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React51.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
6309
+ ), cannotPublishAudio && cannotPublishVideo && !isMobile ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null),
6310
+ /* @__PURE__ */ React52.createElement(Button, { type: "submit", icon: true, disabled: !name || !enableJoin, onClick: onJoin }, showGoLive ? /* @__PURE__ */ React52.createElement(RadioIcon, { height: 18, width: 18 }) : null, showGoLive ? joinForm.go_live_btn_label : joinForm.join_btn_label)
6279
6311
  );
6280
6312
  };
6281
6313
  var Form = styled("form", {
@@ -6292,7 +6324,7 @@ var Form = styled("form", {
6292
6324
  var PreviewForm_default = PreviewForm;
6293
6325
 
6294
6326
  // src/Prebuilt/components/Preview/PreviewJoin.tsx
6295
- var VirtualBackground = React52.lazy(() => import("./VirtualBackground-GP4ATXD3.js"));
6327
+ var VirtualBackground = React53.lazy(() => import("./VirtualBackground-UVZJVOA2.js"));
6296
6328
  var getParticipantChipContent = (peerCount = 0) => {
6297
6329
  if (peerCount === 0) {
6298
6330
  return "You are the first to join";
@@ -6349,7 +6381,7 @@ var PreviewJoin = ({
6349
6381
  const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
6350
6382
  const isMobile = useMedia6(config.media.md);
6351
6383
  const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
6352
- useEffect23(() => {
6384
+ useEffect24(() => {
6353
6385
  if (authToken) {
6354
6386
  if (skipPreview) {
6355
6387
  savePreferenceAndJoin();
@@ -6358,34 +6390,34 @@ var PreviewJoin = ({
6358
6390
  }
6359
6391
  }
6360
6392
  }, [authToken, skipPreview]);
6361
- useEffect23(() => {
6393
+ useEffect24(() => {
6362
6394
  if (initialName) {
6363
6395
  setName(initialName);
6364
6396
  }
6365
6397
  }, [initialName]);
6366
- return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React52.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React52.createElement(Box, null), /* @__PURE__ */ React52.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React52.createElement(Logo, null), /* @__PURE__ */ React52.createElement(
6398
+ return roomState === HMSRoomState6.Preview ? /* @__PURE__ */ React53.createElement(Container3, { css: { h: "100%", pt: "$10", "@md": { justifyContent: "space-between" } } }, toggleVideo ? null : /* @__PURE__ */ React53.createElement(Box, null), /* @__PURE__ */ React53.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", maxWidth: "640px" } }, /* @__PURE__ */ React53.createElement(Logo, null), /* @__PURE__ */ React53.createElement(
6367
6399
  Text,
6368
6400
  {
6369
6401
  variant: "h4",
6370
6402
  css: { wordBreak: "break-word", textAlign: "center", mt: "$14", mb: "$4", "@md": { mt: "$8", mb: "$2" } }
6371
6403
  },
6372
6404
  previewHeader.title
6373
- ), /* @__PURE__ */ React52.createElement(
6405
+ ), /* @__PURE__ */ React53.createElement(
6374
6406
  Text,
6375
6407
  {
6376
6408
  css: { c: "$on_surface_medium", my: "0", textAlign: "center", maxWidth: "100%", wordWrap: "break-word" },
6377
6409
  variant: "sm"
6378
6410
  },
6379
6411
  previewHeader.sub_title
6380
- ), /* @__PURE__ */ React52.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React52.createElement(
6412
+ ), /* @__PURE__ */ React53.createElement(Flex, { justify: "center", css: { mt: "$14", "@md": { mt: "$8", mb: "0" }, gap: "$4" } }, isStreamingOn ? /* @__PURE__ */ React53.createElement(
6381
6413
  Chip_default,
6382
6414
  {
6383
6415
  content: "LIVE",
6384
6416
  backgroundColor: "$alert_error_default",
6385
6417
  textColor: "#FFF",
6386
- icon: /* @__PURE__ */ React52.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
6418
+ icon: /* @__PURE__ */ React53.createElement(Box, { css: { h: "$sm", w: "$sm", backgroundColor: "$on_primary_high", borderRadius: "$round" } })
6387
6419
  }
6388
- ) : null, /* @__PURE__ */ React52.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React52.createElement(
6420
+ ) : null, /* @__PURE__ */ React53.createElement(Chip_default, { content: getParticipantChipContent(peerCount), hideIfNoContent: true }))), toggleVideo ? /* @__PURE__ */ React53.createElement(
6389
6421
  Flex,
6390
6422
  {
6391
6423
  align: "center",
@@ -6397,8 +6429,8 @@ var PreviewJoin = ({
6397
6429
  flexDirection: "column"
6398
6430
  }
6399
6431
  },
6400
- /* @__PURE__ */ React52.createElement(PreviewTile, { name, error: previewError })
6401
- ) : null, /* @__PURE__ */ React52.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React52.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React52.createElement(
6432
+ /* @__PURE__ */ React53.createElement(PreviewTile, { name, error: previewError })
6433
+ ) : null, /* @__PURE__ */ React53.createElement(Box, { css: { w: "100%", maxWidth: `${Math.max(aspectRatio, 1) * 360}px` } }, /* @__PURE__ */ React53.createElement(PreviewControls, { hideSettings: !toggleVideo && !toggleAudio }), /* @__PURE__ */ React53.createElement(
6402
6434
  PreviewForm_default,
6403
6435
  {
6404
6436
  name,
@@ -6408,7 +6440,7 @@ var PreviewJoin = ({
6408
6440
  cannotPublishVideo: !toggleVideo,
6409
6441
  cannotPublishAudio: !toggleAudio
6410
6442
  }
6411
- ))) : /* @__PURE__ */ React52.createElement(FullPageProgress_default, null);
6443
+ ))) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null);
6412
6444
  };
6413
6445
  var Container3 = styled("div", __spreadProps(__spreadValues({
6414
6446
  width: "100%"
@@ -6427,7 +6459,7 @@ var PreviewTile = ({ name, error }) => {
6427
6459
  const videoTrack = useHMSStore21(selectVideoTrackByID4(localPeer == null ? void 0 : localPeer.videoTrack));
6428
6460
  const isMobile = useMedia6(config.media.md);
6429
6461
  const aspectRatio = (videoTrack == null ? void 0 : videoTrack.width) && (videoTrack == null ? void 0 : videoTrack.height) ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
6430
- return /* @__PURE__ */ React52.createElement(
6462
+ return /* @__PURE__ */ React53.createElement(
6431
6463
  StyledVideoTile.Container,
6432
6464
  {
6433
6465
  css: {
@@ -6443,20 +6475,20 @@ var PreviewTile = ({ name, error }) => {
6443
6475
  }
6444
6476
  }
6445
6477
  },
6446
- localPeer ? /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React52.createElement(
6478
+ localPeer ? /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(TileConnection_default, { name, peerId: localPeer.id, hideLabel: true }), /* @__PURE__ */ React53.createElement(
6447
6479
  Video,
6448
6480
  {
6449
6481
  mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
6450
6482
  trackId: localPeer.videoTrack,
6451
6483
  "data-testid": "preview_tile"
6452
6484
  }
6453
- ), !isVideoOn ? /* @__PURE__ */ React52.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React52.createElement(Avatar, { name, "data-testid": "preview_avatar_tile" })) : null) : !error ? /* @__PURE__ */ React52.createElement(FullPageProgress_default, null) : null,
6454
- showMuteIcon ? /* @__PURE__ */ React52.createElement(StyledVideoTile.AudioIndicator, null, /* @__PURE__ */ React52.createElement(MicOffIcon2, null)) : /* @__PURE__ */ React52.createElement(StyledVideoTile.AudioIndicator, { size: "medium" }, /* @__PURE__ */ React52.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
6485
+ ), !isVideoOn ? /* @__PURE__ */ React53.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React53.createElement(Avatar, { name, "data-testid": "preview_avatar_tile", size: "medium" })) : null) : !error ? /* @__PURE__ */ React53.createElement(FullPageProgress_default, null) : null,
6486
+ showMuteIcon ? /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(MicOffIcon2, { height: 16, width: 16 })) : /* @__PURE__ */ React53.createElement(PrebuiltAudioIndicator, null, /* @__PURE__ */ React53.createElement(AudioLevel, { trackId: localPeer == null ? void 0 : localPeer.audioTrack }))
6455
6487
  );
6456
6488
  };
6457
6489
  var PreviewControls = ({ hideSettings }) => {
6458
6490
  const isMobile = useMedia6(config.media.md);
6459
- return /* @__PURE__ */ React52.createElement(
6491
+ return /* @__PURE__ */ React53.createElement(
6460
6492
  Flex,
6461
6493
  {
6462
6494
  justify: hideSettings && isMobile ? "center" : "between",
@@ -6465,13 +6497,13 @@ var PreviewControls = ({ hideSettings }) => {
6465
6497
  mt: "$8"
6466
6498
  }
6467
6499
  },
6468
- /* @__PURE__ */ React52.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React52.createElement(AudioVideoToggle, null), /* @__PURE__ */ React52.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React52.createElement(VirtualBackground, null) : null)),
6469
- !hideSettings ? /* @__PURE__ */ React52.createElement(PreviewSettings, null) : null
6500
+ /* @__PURE__ */ React53.createElement(Flex, { css: { gap: "$4" } }, /* @__PURE__ */ React53.createElement(AudioVideoToggle, null), /* @__PURE__ */ React53.createElement(Suspense, { fallback: "" }, !isMobile ? /* @__PURE__ */ React53.createElement(VirtualBackground, null) : null)),
6501
+ !hideSettings ? /* @__PURE__ */ React53.createElement(PreviewSettings, null) : null
6470
6502
  );
6471
6503
  };
6472
- var PreviewSettings = React52.memo(() => {
6504
+ var PreviewSettings = React53.memo(() => {
6473
6505
  const [open, setOpen] = useState16(false);
6474
- return /* @__PURE__ */ React52.createElement(Fragment4, null, /* @__PURE__ */ React52.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React52.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React52.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
6506
+ return /* @__PURE__ */ React53.createElement(Fragment4, null, /* @__PURE__ */ React53.createElement(IconButton_default, { "data-testid": "preview_setting_btn", css: { flexShrink: 0 }, onClick: () => setOpen((value) => !value) }, /* @__PURE__ */ React53.createElement(SettingsIcon2, null)), open && /* @__PURE__ */ React53.createElement(SettingsModal_default, { open, onOpenChange: setOpen }));
6475
6507
  });
6476
6508
  var PreviewJoin_default = PreviewJoin;
6477
6509
 
@@ -6495,14 +6527,14 @@ var PreviewContainer = () => {
6495
6527
  }
6496
6528
  navigate(meetingURL);
6497
6529
  };
6498
- return /* @__PURE__ */ React53.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React53.createElement(
6530
+ return /* @__PURE__ */ React54.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React54.createElement(
6499
6531
  Flex,
6500
6532
  {
6501
6533
  css: { flex: "1 1 0", position: "relative", overflowY: "auto", color: "$primary_default" },
6502
6534
  justify: "center",
6503
6535
  align: "center"
6504
6536
  },
6505
- authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React53.createElement(
6537
+ authToken && Object.keys(previewHeader).length > 0 ? /* @__PURE__ */ React54.createElement(
6506
6538
  PreviewJoin_default,
6507
6539
  {
6508
6540
  initialName,
@@ -6510,20 +6542,20 @@ var PreviewContainer = () => {
6510
6542
  asRole: previewAsRole != null ? previewAsRole : void 0,
6511
6543
  onJoin
6512
6544
  }
6513
- ) : /* @__PURE__ */ React53.createElement(FullPageProgress_default, null)
6545
+ ) : /* @__PURE__ */ React54.createElement(FullPageProgress_default, null)
6514
6546
  ));
6515
6547
  };
6516
6548
  var PreviewContainer_default = PreviewContainer;
6517
6549
 
6518
6550
  // src/Prebuilt/components/Toast/ToastContainer.jsx
6519
- import React55, { useEffect as useEffect24, useState as useState17 } from "react";
6551
+ import React56, { useEffect as useEffect25, useState as useState17 } from "react";
6520
6552
  import { selectIsConnectedToRoom as selectIsConnectedToRoom3, useHMSStore as useHMSStore22 } from "@100mslive/react-sdk";
6521
6553
 
6522
6554
  // src/Prebuilt/components/Toast/Toast.jsx
6523
- import React54 from "react";
6555
+ import React55 from "react";
6524
6556
  var Toast2 = (_a7) => {
6525
6557
  var _b7 = _a7, { title, description, close = true, open, duration, onOpenChange, icon } = _b7, props = __objRest(_b7, ["title", "description", "close", "open", "duration", "onOpenChange", "icon"]);
6526
- return /* @__PURE__ */ React54.createElement(
6558
+ return /* @__PURE__ */ React55.createElement(
6527
6559
  Toast.HMSToast,
6528
6560
  __spreadValues({
6529
6561
  title,
@@ -6541,15 +6573,15 @@ var Toast2 = (_a7) => {
6541
6573
  var ToastContainer = () => {
6542
6574
  const isConnected = useHMSStore22(selectIsConnectedToRoom3);
6543
6575
  const [toasts, setToast] = useState17([]);
6544
- useEffect24(() => {
6576
+ useEffect25(() => {
6545
6577
  ToastManager.addListener(setToast);
6546
6578
  return () => {
6547
6579
  ToastManager.removeListener(setToast);
6548
6580
  };
6549
6581
  }, []);
6550
- return /* @__PURE__ */ React55.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
6551
- return /* @__PURE__ */ React55.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
6552
- }), /* @__PURE__ */ React55.createElement(
6582
+ return /* @__PURE__ */ React56.createElement(Toast.Provider, { swipeDirection: "left", duration: 3e3 }, toasts.slice(0, MAX_TOASTS).map((toast) => {
6583
+ return /* @__PURE__ */ React56.createElement(Toast2, __spreadProps(__spreadValues({ key: toast.id }, toast), { onOpenChange: (value) => !value && ToastManager.removeToast(toast.id) }));
6584
+ }), /* @__PURE__ */ React56.createElement(
6553
6585
  Toast.Viewport,
6554
6586
  {
6555
6587
  css: __spreadValues({
@@ -6560,7 +6592,7 @@ var ToastContainer = () => {
6560
6592
  };
6561
6593
 
6562
6594
  // src/Prebuilt/plugins/FlyingEmoji.jsx
6563
- import React56, { useCallback as useCallback17, useEffect as useEffect25, useMemo as useMemo3, useState as useState18 } from "react";
6595
+ import React57, { useCallback as useCallback17, useEffect as useEffect26, useMemo as useMemo3, useState as useState18 } from "react";
6564
6596
  import { useMedia as useMedia7 } from "react-use";
6565
6597
  import {
6566
6598
  selectLocalPeerID as selectLocalPeerID4,
@@ -6626,10 +6658,10 @@ function FlyingEmoji() {
6626
6658
  type: EMOJI_REACTION_TYPE,
6627
6659
  onEvent: showFlyingEmoji
6628
6660
  });
6629
- useEffect25(() => {
6661
+ useEffect26(() => {
6630
6662
  window.showFlyingEmoji = showFlyingEmoji;
6631
6663
  }, [showFlyingEmoji]);
6632
- return /* @__PURE__ */ React56.createElement(
6664
+ return /* @__PURE__ */ React57.createElement(
6633
6665
  Box,
6634
6666
  {
6635
6667
  css: {
@@ -6645,7 +6677,7 @@ function FlyingEmoji() {
6645
6677
  }
6646
6678
  },
6647
6679
  emojis.map((emoji) => {
6648
- return /* @__PURE__ */ React56.createElement(
6680
+ return /* @__PURE__ */ React57.createElement(
6649
6681
  Flex,
6650
6682
  {
6651
6683
  key: emoji.id,
@@ -6661,8 +6693,8 @@ function FlyingEmoji() {
6661
6693
  setEmojis(emojis.filter((item) => item.id !== emoji.id));
6662
6694
  }
6663
6695
  },
6664
- /* @__PURE__ */ React56.createElement(Box, null, /* @__PURE__ */ React56.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
6665
- /* @__PURE__ */ React56.createElement(
6696
+ /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement("em-emoji", { id: emoji.emojiId, size: "48px", set: "apple" })),
6697
+ /* @__PURE__ */ React57.createElement(
6666
6698
  Box,
6667
6699
  {
6668
6700
  css: {
@@ -6672,7 +6704,7 @@ function FlyingEmoji() {
6672
6704
  borderRadius: "$1"
6673
6705
  }
6674
6706
  },
6675
- /* @__PURE__ */ React56.createElement(
6707
+ /* @__PURE__ */ React57.createElement(
6676
6708
  Text,
6677
6709
  {
6678
6710
  css: {
@@ -6690,7 +6722,7 @@ function FlyingEmoji() {
6690
6722
  }
6691
6723
 
6692
6724
  // src/Prebuilt/plugins/RemoteStopScreenshare.jsx
6693
- import React57, { useCallback as useCallback18 } from "react";
6725
+ import React58, { useCallback as useCallback18 } from "react";
6694
6726
  import { useCustomEvent as useCustomEvent3, useHMSActions as useHMSActions16 } from "@100mslive/react-sdk";
6695
6727
  function RemoteStopScreenshare() {
6696
6728
  const actions = useHMSActions16();
@@ -6701,11 +6733,11 @@ function RemoteStopScreenshare() {
6701
6733
  type: REMOTE_STOP_SCREENSHARE_TYPE,
6702
6734
  onEvent: onRemoteStopScreenshare
6703
6735
  });
6704
- return /* @__PURE__ */ React57.createElement(React57.Fragment, null);
6736
+ return /* @__PURE__ */ React58.createElement(React58.Fragment, null);
6705
6737
  }
6706
6738
 
6707
6739
  // src/Prebuilt/components/hooks/useAutoStartStreaming.tsx
6708
- import { useCallback as useCallback19, useEffect as useEffect27, useRef as useRef9 } from "react";
6740
+ import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef9 } from "react";
6709
6741
  import {
6710
6742
  selectIsConnectedToRoom as selectIsConnectedToRoom5,
6711
6743
  selectPermissions as selectPermissions2,
@@ -6715,7 +6747,7 @@ import {
6715
6747
  } from "@100mslive/react-sdk";
6716
6748
 
6717
6749
  // src/Prebuilt/common/hooks.js
6718
- import { useEffect as useEffect26, useRef as useRef8, useState as useState19 } from "react";
6750
+ import { useEffect as useEffect27, useRef as useRef8, useState as useState19 } from "react";
6719
6751
  import { JoinForm_JoinBtnType as JoinForm_JoinBtnType3 } from "@100mslive/types-prebuilt/elements/join_form";
6720
6752
  import {
6721
6753
  selectAvailableRoleNames as selectAvailableRoleNames2,
@@ -6786,12 +6818,12 @@ var useAutoStartStreaming = () => {
6786
6818
  setHLSStarted(false);
6787
6819
  }
6788
6820
  }), [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
6789
- useEffect27(() => {
6821
+ useEffect28(() => {
6790
6822
  if (!isHLSStarted && !isHLSRunning) {
6791
6823
  streamStartedRef.current = false;
6792
6824
  }
6793
6825
  }, [isHLSStarted, isHLSRunning]);
6794
- useEffect27(() => {
6826
+ useEffect28(() => {
6795
6827
  if (!isConnected || streamStartedRef.current || !(permissions == null ? void 0 : permissions.hlsStreaming)) {
6796
6828
  return;
6797
6829
  }
@@ -6800,8 +6832,8 @@ var useAutoStartStreaming = () => {
6800
6832
  };
6801
6833
 
6802
6834
  // src/Prebuilt/App.tsx
6803
- var Conference = React58.lazy(() => import("./conference-JD35TNH4.js"));
6804
- var HMSPrebuilt = React58.forwardRef(
6835
+ var Conference = React59.lazy(() => import("./conference-N7S47TDK.js"));
6836
+ var HMSPrebuilt = React59.forwardRef(
6805
6837
  ({
6806
6838
  roomCode = "",
6807
6839
  authToken = "",
@@ -6812,13 +6844,14 @@ var HMSPrebuilt = React58.forwardRef(
6812
6844
  themes,
6813
6845
  options: { userName = "", userId = "", endpoints } = {},
6814
6846
  screens,
6815
- onLeave
6847
+ onLeave,
6848
+ onJoin
6816
6849
  }, ref) => {
6817
6850
  var _a7, _b7, _c, _d;
6818
6851
  const metadata = "";
6819
6852
  const reactiveStore = useRef10();
6820
- const [hydrated, setHydrated] = React58.useState(false);
6821
- useEffect28(() => {
6853
+ const [hydrated, setHydrated] = React59.useState(false);
6854
+ useEffect29(() => {
6822
6855
  setHydrated(true);
6823
6856
  const hms = new HMSReactiveStore();
6824
6857
  const hmsStore = hms.getStore();
@@ -6833,13 +6866,13 @@ var HMSPrebuilt = React58.forwardRef(
6833
6866
  hmsNotifications
6834
6867
  };
6835
6868
  }, []);
6836
- useEffect28(() => {
6869
+ useEffect29(() => {
6837
6870
  if (!ref || !reactiveStore.current) {
6838
6871
  return;
6839
6872
  }
6840
6873
  ref.current = __spreadValues({}, reactiveStore.current);
6841
6874
  }, [ref]);
6842
- useEffect28(
6875
+ useEffect29(
6843
6876
  () => () => {
6844
6877
  var _a8;
6845
6878
  (_a8 = reactiveStore == null ? void 0 : reactiveStore.current) == null ? void 0 : _a8.hmsActions.leave();
@@ -6869,7 +6902,7 @@ var HMSPrebuilt = React58.forwardRef(
6869
6902
  return null;
6870
6903
  }
6871
6904
  globalStyles();
6872
- return /* @__PURE__ */ React58.createElement(ErrorBoundary, null, /* @__PURE__ */ React58.createElement(
6905
+ return /* @__PURE__ */ React59.createElement(ErrorBoundary, null, /* @__PURE__ */ React59.createElement(
6873
6906
  HMSPrebuiltContext.Provider,
6874
6907
  {
6875
6908
  value: {
@@ -6877,6 +6910,7 @@ var HMSPrebuilt = React58.forwardRef(
6877
6910
  roomId,
6878
6911
  role,
6879
6912
  onLeave,
6913
+ onJoin,
6880
6914
  userName,
6881
6915
  userId,
6882
6916
  endpoints: {
@@ -6887,7 +6921,7 @@ var HMSPrebuilt = React58.forwardRef(
6887
6921
  }
6888
6922
  }
6889
6923
  },
6890
- /* @__PURE__ */ React58.createElement(
6924
+ /* @__PURE__ */ React59.createElement(
6891
6925
  HMSRoomProvider,
6892
6926
  {
6893
6927
  isHMSStatsOn: FeatureFlags.enableStatsForNerds,
@@ -6896,7 +6930,7 @@ var HMSPrebuilt = React58.forwardRef(
6896
6930
  notifications: (_c = reactiveStore.current) == null ? void 0 : _c.hmsNotifications,
6897
6931
  stats: (_d = reactiveStore.current) == null ? void 0 : _d.hmsStats
6898
6932
  },
6899
- /* @__PURE__ */ React58.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React58.createElement(RoomLayoutContext.Consumer, null, (data) => {
6933
+ /* @__PURE__ */ React59.createElement(RoomLayoutProvider, { roomLayoutEndpoint, overrideLayout }, /* @__PURE__ */ React59.createElement(RoomLayoutContext.Consumer, null, (data) => {
6900
6934
  var _a8;
6901
6935
  const layout = data == null ? void 0 : data.layout;
6902
6936
  const theme2 = ((_a8 = layout == null ? void 0 : layout.themes) == null ? void 0 : _a8[0]) || {};
@@ -6905,7 +6939,7 @@ var HMSPrebuilt = React58.forwardRef(
6905
6939
  if (typography2 == null ? void 0 : typography2.font_family) {
6906
6940
  fontFamily = [`${typography2 == null ? void 0 : typography2.font_family}`, ...fontFamily];
6907
6941
  }
6908
- return /* @__PURE__ */ React58.createElement(
6942
+ return /* @__PURE__ */ React59.createElement(
6909
6943
  HMSThemeProvider,
6910
6944
  {
6911
6945
  themeType: `${theme2.name}-${Date.now()}`,
@@ -6918,9 +6952,9 @@ var HMSPrebuilt = React58.forwardRef(
6918
6952
  }
6919
6953
  }
6920
6954
  },
6921
- /* @__PURE__ */ React58.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
6922
- /* @__PURE__ */ React58.createElement(Init, null),
6923
- /* @__PURE__ */ React58.createElement(
6955
+ /* @__PURE__ */ React59.createElement(AppData, { appDetails: metadata, tokenEndpoint: tokenByRoomIdRoleEndpoint }),
6956
+ /* @__PURE__ */ React59.createElement(Init, null),
6957
+ /* @__PURE__ */ React59.createElement(
6924
6958
  Box,
6925
6959
  {
6926
6960
  id: "prebuilt-container",
@@ -6931,7 +6965,7 @@ var HMSPrebuilt = React58.forwardRef(
6931
6965
  "-webkit-text-size-adjust": "100%"
6932
6966
  }
6933
6967
  },
6934
- /* @__PURE__ */ React58.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
6968
+ /* @__PURE__ */ React59.createElement(AppRoutes, { authTokenByRoomCodeEndpoint: tokenByRoomCodeEndpoint, defaultAuthToken: authToken })
6935
6969
  )
6936
6970
  );
6937
6971
  }))
@@ -6942,42 +6976,42 @@ var HMSPrebuilt = React58.forwardRef(
6942
6976
  HMSPrebuilt.displayName = "HMSPrebuilt";
6943
6977
  var Redirector = ({ showPreview }) => {
6944
6978
  const { roomId, role } = useParams5();
6945
- return /* @__PURE__ */ React58.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
6979
+ return /* @__PURE__ */ React59.createElement(Navigate, { to: `/${showPreview ? "preview" : "meeting"}/${roomId}/${role || ""}` });
6946
6980
  };
6947
6981
  var RouteList = () => {
6948
6982
  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
6949
6983
  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
6950
6984
  useAutoStartStreaming();
6951
- return /* @__PURE__ */ React58.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React58.createElement(Route, { path: "preview" }, /* @__PURE__ */ React58.createElement(
6985
+ return /* @__PURE__ */ React59.createElement(Routes, null, isPreviewScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "preview" }, /* @__PURE__ */ React59.createElement(
6952
6986
  Route,
6953
6987
  {
6954
6988
  path: ":roomId/:role",
6955
- element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React58.createElement(PreviewContainer_default, null))
6989
+ element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
6956
6990
  }
6957
- ), /* @__PURE__ */ React58.createElement(
6991
+ ), /* @__PURE__ */ React59.createElement(
6958
6992
  Route,
6959
6993
  {
6960
6994
  path: ":roomId",
6961
- element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React58.createElement(PreviewContainer_default, null))
6995
+ element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Loading preview..." }) }, /* @__PURE__ */ React59.createElement(PreviewContainer_default, null))
6962
6996
  }
6963
- )) : null, /* @__PURE__ */ React58.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React58.createElement(
6997
+ )) : null, /* @__PURE__ */ React59.createElement(Route, { path: "meeting" }, /* @__PURE__ */ React59.createElement(
6964
6998
  Route,
6965
6999
  {
6966
7000
  path: ":roomId/:role",
6967
- element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React58.createElement(Conference, null))
7001
+ element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
6968
7002
  }
6969
- ), /* @__PURE__ */ React58.createElement(
7003
+ ), /* @__PURE__ */ React59.createElement(
6970
7004
  Route,
6971
7005
  {
6972
7006
  path: ":roomId",
6973
- element: /* @__PURE__ */ React58.createElement(Suspense2, { fallback: /* @__PURE__ */ React58.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React58.createElement(Conference, null))
7007
+ element: /* @__PURE__ */ React59.createElement(Suspense2, { fallback: /* @__PURE__ */ React59.createElement(FullPageProgress_default, { text: "Joining..." }) }, /* @__PURE__ */ React59.createElement(Conference, null))
6974
7008
  }
6975
- )), isLeaveScreenEnabled ? /* @__PURE__ */ React58.createElement(Route, { path: "leave" }, /* @__PURE__ */ React58.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React58.createElement(PostLeave_default, null) }), /* @__PURE__ */ React58.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React58.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React58.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React58.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React58.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React58.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
7009
+ )), isLeaveScreenEnabled ? /* @__PURE__ */ React59.createElement(Route, { path: "leave" }, /* @__PURE__ */ React59.createElement(Route, { path: ":roomId/:role", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) }), /* @__PURE__ */ React59.createElement(Route, { path: ":roomId", element: /* @__PURE__ */ React59.createElement(PostLeave_default, null) })) : null, /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/:role", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }), /* @__PURE__ */ React59.createElement(Route, { path: "/:roomId/", element: /* @__PURE__ */ React59.createElement(Redirector, { showPreview: isPreviewScreenEnabled }) }));
6976
7010
  };
6977
7011
  var BackSwipe = () => {
6978
7012
  const isConnectedToRoom = useHMSStore26(selectIsConnectedToRoom6);
6979
7013
  const hmsActions = useHMSActions18();
6980
- useEffect28(() => {
7014
+ useEffect29(() => {
6981
7015
  const onRouteLeave = () => __async(void 0, null, function* () {
6982
7016
  if (isConnectedToRoom) {
6983
7017
  yield hmsActions.leave();
@@ -6992,7 +7026,7 @@ var BackSwipe = () => {
6992
7026
  };
6993
7027
  var Router = ({ children }) => {
6994
7028
  const { roomId, role, roomCode } = useHMSPrebuiltContext();
6995
- return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React58.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React58.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
7029
+ return [roomId, role, roomCode].every((value) => !value) ? /* @__PURE__ */ React59.createElement(BrowserRouter, null, children) : /* @__PURE__ */ React59.createElement(MemoryRouter, { initialEntries: [`/${roomCode ? roomCode : `${roomId}/${role || ""}`}`], initialIndex: 0 }, children);
6996
7030
  };
6997
7031
  function AppRoutes({
6998
7032
  authTokenByRoomCodeEndpoint,
@@ -7000,7 +7034,7 @@ function AppRoutes({
7000
7034
  }) {
7001
7035
  const roomLayout = useRoomLayout();
7002
7036
  const isNotificationsDisabled = useIsNotificationDisabled();
7003
- return /* @__PURE__ */ React58.createElement(Router, null, /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(ToastContainer, null), /* @__PURE__ */ React58.createElement(Notifications, null), /* @__PURE__ */ React58.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React58.createElement(FlyingEmoji, null), /* @__PURE__ */ React58.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React58.createElement(KeyboardHandler, null), /* @__PURE__ */ React58.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React58.createElement(Routes, null, /* @__PURE__ */ React58.createElement(Route, { path: "/*", element: /* @__PURE__ */ React58.createElement(RouteList, null) }))));
7037
+ return /* @__PURE__ */ React59.createElement(Router, null, /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(ToastContainer, null), /* @__PURE__ */ React59.createElement(Notifications, null), /* @__PURE__ */ React59.createElement(BackSwipe, null), !isNotificationsDisabled && /* @__PURE__ */ React59.createElement(FlyingEmoji, null), /* @__PURE__ */ React59.createElement(RemoteStopScreenshare, null), /* @__PURE__ */ React59.createElement(HeadlessEndRoomListener, null), /* @__PURE__ */ React59.createElement(KeyboardHandler, null), /* @__PURE__ */ React59.createElement(AuthToken_default, { authTokenByRoomCodeEndpoint, defaultAuthToken }), roomLayout && /* @__PURE__ */ React59.createElement(Routes, null, /* @__PURE__ */ React59.createElement(Route, { path: "/*", element: /* @__PURE__ */ React59.createElement(RouteList, null) }))));
7004
7038
  }
7005
7039
 
7006
7040
  // src/Progress/index.tsx
@@ -7109,9 +7143,10 @@ export {
7109
7143
  StopRecordingInSheet,
7110
7144
  Header2 as Header,
7111
7145
  AudioVideoToggle,
7112
- Chip_default,
7113
7146
  ConnectionIndicator,
7114
7147
  TileConnection_default,
7148
+ PrebuiltAudioIndicator,
7149
+ PrebuiltAttributeBox,
7115
7150
  DialogDropdownTrigger,
7116
7151
  useDropdownSelection,
7117
7152
  SettingsModal_default,
@@ -7122,4 +7157,4 @@ export {
7122
7157
  HMSPrebuilt,
7123
7158
  Progress
7124
7159
  };
7125
- //# sourceMappingURL=chunk-GLYGPYNS.js.map
7160
+ //# sourceMappingURL=chunk-PRM33R4R.js.map