@100mslive/roomkit-react 0.1.4-alpha.1 → 0.1.4

package/dist/conference-7QKOMJPP.js

@@ -1,3697 +0,0 @@
-import {
-  FirstPersonDisplay,
-  GridCenterView,
-  GridSidePaneView,
-  ScreenshareTile_default,
-  VideoList_default,
-  VideoTile_default,
-  useAppConfig
-} from "./chunk-ESUJK7AT.js";
-import {
-  AudioVideoToggle,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogCol,
-  DialogContent,
-  DialogDropdownTrigger,
-  DialogInput,
-  DialogInputFile,
-  DialogRow,
-  DialogSelect,
-  Dropdown,
-  EmojiReaction,
-  FeatureFlags,
-  Footer,
-  FullPageProgress_default,
-  Header,
-  HorizontalDivider,
-  Input,
-  Label,
-  LeaveRoom,
-  MetaActions_default,
-  RadioGroup,
-  RequestDialog,
-  ResolutionInput,
-  RoleChangeModal,
-  SettingsModal_default,
-  SidePane_default,
-  Slider,
-  StreamActions,
-  Switch,
-  ThemeTypes,
-  ToastManager,
-  UserPreferencesKeys,
-  Video,
-  VideoTileStats,
-  arrayIntersection,
-  getResolution,
-  isScreenshareSupported,
-  isStreamingKit,
-  useAuthToken,
-  useDropdownList,
-  useDropdownSelection,
-  useFilteredRoles,
-  useHLSViewerRole,
-  useHMSPrebuiltContext,
-  useIsHeadless,
-  useIsSidepaneTypeOpen,
-  useNavigation,
-  usePDFAnnotator,
-  usePinnedTrack,
-  useRoomLayout,
-  useSetAppDataByKey,
-  useSetUiSettings,
-  useSidepaneToggle,
-  useSkipPreview,
-  useTheme,
-  useUISettings,
-  useUrlToEmbed,
-  useUserPreferences,
-  useWaitingViewerRole,
-  useWhiteboardMetadata
-} from "./chunk-42SWPN2C.js";
-import {
-  Loading,
-  useIsFeatureEnabled,
-  useRolePreference
-} from "./chunk-4ZBEFSRC.js";
-import {
-  Box,
-  Flex,
-  Text
-} from "./chunk-R6PDR5WZ.js";
-import {
-  APP_DATA,
-  DEFAULT_HLS_VIEWER_ROLE,
-  EMOJI_REACTION_TYPE,
-  FEATURE_LIST,
-  IconButton,
-  IconButton_default,
-  RTMP_RECORD_DEFAULT_RESOLUTION,
-  SESSION_STORE_KEY,
-  SIDE_PANE_OPTIONS,
-  Tooltip,
-  UI_MODE_ACTIVE_SPEAKER,
-  UI_SETTINGS,
-  __async,
-  __publicField,
-  __spreadProps,
-  __spreadValues,
-  config,
-  define_process_env_default,
-  init_define_process_env,
-  isAndroid,
-  isChrome,
-  isIOS,
-  isIPadOS,
-  isMacOS,
-  isSafari,
-  styled
-} from "./chunk-4NEZLVVH.js";
-
-// src/Prebuilt/components/conference.jsx
-init_define_process_env();
-import React38, { useEffect as useEffect9, useRef as useRef7, useState as useState17 } from "react";
-import { useParams } from "react-router-dom";
-import { usePrevious } from "react-use";
-import {
-  HMSRoomState,
-  selectAppData as selectAppData3,
-  selectIsConnectedToRoom as selectIsConnectedToRoom2,
-  selectRoomState,
-  useHMSActions as useHMSActions16,
-  useHMSStore as useHMSStore21
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/Notifications/HLSFailureModal.jsx
-init_define_process_env();
-import React, { useCallback, useState } from "react";
-import { selectHLSState, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
-function HLSFailureModal() {
-  const { hlsError } = useHMSStore(selectHLSState).error || false;
-  const [openModal, setOpenModal] = useState(!!hlsError);
-  const hmsActions = useHMSActions();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback(() => __async(this, null, function* () {
-    try {
-      if (isHLSStarted) {
-        return;
-      }
-      setHLSStarted(true);
-      yield hmsActions.startHLSStreaming({});
-    } catch (error) {
-      if (error.message.includes("invalid input")) {
-        yield startHLS();
-        return;
-      }
-      setHLSStarted(false);
-    }
-  }), [hmsActions, isHLSStarted, setHLSStarted]);
-  return hlsError ? /* @__PURE__ */ React.createElement(
-    Dialog.Root,
-    {
-      open: openModal,
-      onOpenChange: (value) => {
-        if (!value) {
-          setOpenModal(false);
-        }
-      }
-    },
-    /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, null), /* @__PURE__ */ React.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React.createElement(
-      Dialog.Title,
-      {
-        css: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderBottom: "1px solid $border_default",
-          mt: "$4"
-        }
-      },
-      /* @__PURE__ */ React.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
-    ), /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React.createElement(Button, { css: { w: "100%" } }, "Go Live"))))
-  ) : null;
-}
-
-// src/Prebuilt/layouts/mainView.jsx
-init_define_process_env();
-import React12, { Suspense, useCallback as useCallback5, useEffect as useEffect5 } from "react";
-import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  selectIsConnectedToRoom,
-  selectLocalPeerRoleName as selectLocalPeerRoleName3,
-  selectPeerScreenSharing as selectPeerScreenSharing3,
-  selectPeerSharingAudio,
-  selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist3,
-  selectPermissions,
-  selectTemplateAppData,
-  useHMSActions as useHMSActions6,
-  useHMSStore as useHMSStore10,
-  useRecordingStreaming
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/layouts/EmbedView.jsx
-init_define_process_env();
-import React6, { useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { useMedia as useMedia2 } from "react-use";
-import {
-  selectLocalPeerID as selectLocalPeerID2,
-  selectLocalPeerRoleName as selectLocalPeerRoleName2,
-  selectPeers as selectPeers2,
-  selectPeerScreenSharing as selectPeerScreenSharing2,
-  throwErrorHandler,
-  useHMSStore as useHMSStore6,
-  useScreenShare
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/layouts/screenShareView.jsx
-init_define_process_env();
-import React5, { Fragment, useCallback as useCallback2, useMemo } from "react";
-import { useMedia } from "react-use";
-import {
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  selectPeers,
-  selectPeerScreenSharing,
-  selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist2,
-  selectScreenShareByPeerID,
-  useHMSStore as useHMSStore5
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/Playlist/VideoPlayer.jsx
-init_define_process_env();
-import React3, { useRef } from "react";
-import { useFullscreen, useToggle } from "react-use";
-import screenfull from "screenfull";
-import {
-  selectVideoPlaylist as selectVideoPlaylist3,
-  selectVideoPlaylistAudioTrackByPeerID as selectVideoPlaylistAudioTrackByPeerID2,
-  selectVideoPlaylistVideoTrackByPeerID,
-  useHMSActions as useHMSActions4,
-  useHMSStore as useHMSStore4
-} from "@100mslive/react-sdk";
-import { CrossIcon, ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Playlist/PlaylistControls.jsx
-init_define_process_env();
-import React2 from "react";
-import {
-  HMSPlaylistType as HMSPlaylistType2,
-  selectAudioPlaylist as selectAudioPlaylist2,
-  selectAudioTrackVolume,
-  selectPeerSharingVideoPlaylist,
-  selectVideoPlaylist as selectVideoPlaylist2,
-  selectVideoPlaylistAudioTrackByPeerID,
-  useHMSActions as useHMSActions3,
-  useHMSStore as useHMSStore3
-} from "@100mslive/react-sdk";
-import { NextIcon, PauseIcon, PlayIcon, PlaylistIcon, PrevIcon, SpeakerIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/hooks/usePlaylist.js
-init_define_process_env();
-import {
-  HMSPlaylistType,
-  selectAudioPlaylist,
-  selectVideoPlaylist,
-  useHMSActions as useHMSActions2,
-  useHMSStore as useHMSStore2
-} from "@100mslive/react-sdk";
-var usePlaylist = (type) => {
-  const isAudioPlaylist = type === HMSPlaylistType.audio;
-  const selector = isAudioPlaylist ? selectAudioPlaylist : selectVideoPlaylist;
-  const active = useHMSStore2(selector.selectedItem);
-  const selection = useHMSStore2(selector.selection);
-  const playlist = useHMSStore2(selector.list);
-  const hmsActions = useHMSActions2();
-  const playlistAction = isAudioPlaylist ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
-  return {
-    active,
-    hasNext: selection.hasNext,
-    hasPrevious: selection.hasPrevious,
-    actions: playlistAction,
-    list: playlist
-  };
-};
-
-// src/Prebuilt/components/Playlist/PlaylistControls.jsx
-var Progress = ({ type, duration }) => {
-  const selectPlaylist = type === HMSPlaylistType2.audio ? selectAudioPlaylist2 : selectVideoPlaylist2;
-  const progress = useHMSStore3(selectPlaylist.progress);
-  const hmsActions = useHMSActions3();
-  const playlistAction = type === HMSPlaylistType2.audio ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
-  if (!duration) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(
-    Slider,
-    {
-      step: 1,
-      value: [progress],
-      onValueChange: (e) => {
-        playlistAction.seekTo(e[0] * 0.01 * duration);
-      }
-    }
-  );
-};
-var Controls = ({ type, css = {} }) => {
-  const { active, hasNext, hasPrevious, actions } = usePlaylist(type);
-  if (!active) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(Flex, { justify: "center", css }, /* @__PURE__ */ React2.createElement(
-    IconButton,
-    {
-      disabled: !hasPrevious,
-      onClick: () => {
-        actions.playPrevious();
-      },
-      "data-testid": "playlist_prev_btn"
-    },
-    /* @__PURE__ */ React2.createElement(PrevIcon, null)
-  ), /* @__PURE__ */ React2.createElement(
-    IconButton,
-    {
-      onClick: () => {
-        active.playing ? actions.pause() : actions.play(active.id);
-      },
-      "data-testid": "playlist_play_pause_btn"
-    },
-    active.playing ? /* @__PURE__ */ React2.createElement(PauseIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React2.createElement(PlayIcon, { width: 32, height: 32 })
-  ), /* @__PURE__ */ React2.createElement(
-    IconButton,
-    {
-      disabled: !hasNext,
-      onClick: () => {
-        actions.playNext();
-      },
-      "data-testid": "playlist_next_btn"
-    },
-    /* @__PURE__ */ React2.createElement(NextIcon, null)
-  ));
-};
-var VolumeControl = () => {
-  const hmsActions = useHMSActions3();
-  const volume = useHMSStore3(selectVideoPlaylist2.volume);
-  const active = useHMSStore3(selectVideoPlaylist2.selectedItem);
-  const peerSharingPlaylist = useHMSStore3(selectPeerSharingVideoPlaylist);
-  const audioTrack = useHMSStore3(selectVideoPlaylistAudioTrackByPeerID(peerSharingPlaylist == null ? void 0 : peerSharingPlaylist.id));
-  const audioTrackVolume = useHMSStore3(selectAudioTrackVolume(audioTrack == null ? void 0 : audioTrack.id));
-  const sliderVolume = active ? volume : audioTrackVolume;
-  return /* @__PURE__ */ React2.createElement(Flex, { align: "center", css: { color: "$on_primary_high" } }, /* @__PURE__ */ React2.createElement(SpeakerIcon, null), /* @__PURE__ */ React2.createElement(
-    Slider,
-    {
-      css: { mx: "$4", w: "$20" },
-      min: 0,
-      max: 100,
-      step: 1,
-      value: [Math.floor(sliderVolume != null ? sliderVolume : 100)],
-      onValueChange: (e) => {
-        const value = e[0];
-        if (active) {
-          hmsActions.videoPlaylist.setVolume(value);
-        } else if (audioTrack) {
-          hmsActions.setVolume(value, audioTrack.id);
-        }
-      },
-      thumbStyles: { w: "$6", h: "$6" }
-    }
-  ));
-};
-var VideoPlaylistControls = ({ children }) => {
-  const { active } = usePlaylist(HMSPlaylistType2.video);
-  return /* @__PURE__ */ React2.createElement(
-    Box,
-    {
-      css: {
-        p: "$8",
-        mt: "-$24",
-        w: "100%",
-        zIndex: 1,
-        "@lg": {
-          mt: 0,
-          p: "$6"
-        }
-      }
-    },
-    active && /* @__PURE__ */ React2.createElement(Progress, { type: HMSPlaylistType2.video, duration: active.duration }),
-    /* @__PURE__ */ React2.createElement(Flex, { align: "center", justify: "between" }, /* @__PURE__ */ React2.createElement(VolumeControl, null), active && /* @__PURE__ */ React2.createElement(Controls, { css: { flex: "1 1 0" } }), children)
-  );
-};
-
-// src/Prebuilt/components/Playlist/VideoPlayer.jsx
-var VideoPlayer = React3.memo(({ peerId }) => {
-  const videoTrack = useHMSStore4(selectVideoPlaylistVideoTrackByPeerID(peerId));
-  const audioTrack = useHMSStore4(selectVideoPlaylistAudioTrackByPeerID2(peerId));
-  const active = useHMSStore4(selectVideoPlaylist3.selectedItem);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const hmsActions = useHMSActions4();
-  const ref = useRef(null);
-  const [show, toggle] = useToggle(false);
-  const isFullscreen = useFullscreen(ref, show, {
-    onClose: () => toggle(false)
-  });
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  return /* @__PURE__ */ React3.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", h: "100%" }, ref }, active && /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      justify: "between",
-      align: "center",
-      css: {
-        bg: "$surface_default",
-        p: "$2 $2 $2 $6",
-        borderTopLeftRadius: "$1",
-        borderTopRightRadius: "$1"
-      }
-    },
-    /* @__PURE__ */ React3.createElement(Text, { css: { color: "$on_primary_high" } }, active.name),
-    /* @__PURE__ */ React3.createElement(
-      IconButton,
-      {
-        css: {
-          color: "$on_primary_high"
-        },
-        onClick: () => {
-          hmsActions.videoPlaylist.stop();
-        },
-        "data-testid": "videoplaylist_cross_btn"
-      },
-      /* @__PURE__ */ React3.createElement(CrossIcon, null)
-    )
-  ), showStatsOnTiles ? /* @__PURE__ */ React3.createElement(Box, { css: { "& > div": { top: "$14", left: "$8" } } }, /* @__PURE__ */ React3.createElement(
-    VideoTileStats,
-    {
-      audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
-      videoTrackID: videoTrack == null ? void 0 : videoTrack.id,
-      peerID: peerId,
-      isLocal: active
-    }
-  )) : null, /* @__PURE__ */ React3.createElement(
-    Video,
-    {
-      trackId: videoTrack == null ? void 0 : videoTrack.id,
-      attach: !isAudioOnly,
-      css: {
-        objectFit: "contain",
-        h: "auto",
-        r: "$1",
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0
-      }
-    }
-  ), /* @__PURE__ */ React3.createElement(VideoPlaylistControls, null, screenfull.enabled && /* @__PURE__ */ React3.createElement(
-    IconButton,
-    {
-      onClick: () => toggle(),
-      css: {
-        color: "$on_primary_high",
-        height: "max-content",
-        alignSelf: "center",
-        cursor: "pointer"
-      }
-    },
-    isFullscreen ? /* @__PURE__ */ React3.createElement(ShrinkIcon, null) : /* @__PURE__ */ React3.createElement(ExpandIcon, null)
-  )));
-});
-
-// src/Prebuilt/components/ScreenshareDisplay.jsx
-init_define_process_env();
-import React4 from "react";
-import { useHMSActions as useHMSActions5 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon2, ShareScreenIcon } from "@100mslive/react-icons";
-var ScreenshareDisplay = () => {
-  const hmsActions = useHMSActions5();
-  return /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      direction: "column",
-      align: "center",
-      justify: "center",
-      css: {
-        position: "relative",
-        overflow: "hidden",
-        w: "37.5rem",
-        maxWidth: "80%",
-        h: "100%",
-        r: "$3",
-        m: "0 auto",
-        color: "$on_surface_high",
-        bg: "$surface_default",
-        textAlign: "center"
-      }
-    },
-    /* @__PURE__ */ React4.createElement(ShareScreenIcon, { width: 48, height: 48 }),
-    /* @__PURE__ */ React4.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
-    /* @__PURE__ */ React4.createElement(
-      Button,
-      {
-        variant: "danger",
-        onClick: () => __async(void 0, null, function* () {
-          yield hmsActions.setScreenShareEnabled(false);
-        }),
-        "data-testid": "stop_screen_share_btn"
-      },
-      /* @__PURE__ */ React4.createElement(CrossIcon2, { width: 18, height: 18 }),
-      "\xA0 Stop screen share"
-    )
-  );
-};
-
-// src/Prebuilt/layouts/screenShareView.jsx
-var ScreenShareView = () => {
-  var _a;
-  const mediaQueryLg = config.media.xl;
-  const showSidebarInBottom = useMedia(mediaQueryLg);
-  const peers = useHMSStore5(selectPeers);
-  const localPeerID = useHMSStore5(selectLocalPeerID);
-  const localPeerRole = useHMSStore5(selectLocalPeerRoleName);
-  const peerPresenting = useHMSStore5(selectPeerScreenSharing);
-  const peerSharingPlaylist = useHMSStore5(selectPeerSharingVideoPlaylist2);
-  const isPresenterFromMyRole = ((_a = peerPresenting == null ? void 0 : peerPresenting.roleName) == null ? void 0 : _a.toLowerCase()) === (localPeerRole == null ? void 0 : localPeerRole.toLowerCase());
-  const amIPresenting = localPeerID === (peerPresenting == null ? void 0 : peerPresenting.id);
-  const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
-  const smallTilePeers = useMemo(() => {
-    const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
-    if (showPresenterInSmallTile && peerPresenting) {
-      smallTilePeers2.unshift(peerPresenting);
-    }
-    return smallTilePeers2;
-  }, [peers, peerPresenting, showPresenterInSmallTile]);
-  return /* @__PURE__ */ React5.createElement(
-    Flex,
-    {
-      css: {
-        size: "100%"
-      },
-      direction: showSidebarInBottom ? "column" : "row"
-    },
-    /* @__PURE__ */ React5.createElement(
-      ScreenShareComponent,
-      {
-        amIPresenting,
-        peerPresenting,
-        peerSharingPlaylist
-      }
-    ),
-    /* @__PURE__ */ React5.createElement(
-      Flex,
-      {
-        direction: { "@initial": "column", "@lg": "row" },
-        css: {
-          overflow: "hidden",
-          p: "$4 $8",
-          flex: "0 0 20%",
-          "@xl": {
-            flex: "1 1 0"
-          }
-        }
-      },
-      /* @__PURE__ */ React5.createElement(
-        SidePane,
-        {
-          showSidebarInBottom,
-          peerScreenSharing: peerPresenting,
-          isPresenterInSmallTiles: showPresenterInSmallTile,
-          smallTilePeers,
-          totalPeers: peers.length
-        }
-      )
-    )
-  );
-};
-var SidePane = ({
-  isPresenterInSmallTiles,
-  peerScreenSharing,
-  // the peer who is screensharing
-  smallTilePeers,
-  showSidebarInBottom
-}) => {
-  const shouldShowScreenFn = useCallback2(
-    (peer) => peerScreenSharing && peer.id !== peerScreenSharing.id,
-    [peerScreenSharing]
-  );
-  return /* @__PURE__ */ React5.createElement(Fragment, null, !isPresenterInSmallTiles && /* @__PURE__ */ React5.createElement(LargeTilePeerView, { peerScreenSharing }), /* @__PURE__ */ React5.createElement(
-    SmallTilePeersView,
-    {
-      showSidebarInBottom,
-      smallTilePeers,
-      shouldShowScreenFn
-    }
-  ));
-};
-var ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist }) => {
-  const screenshareTrack = useHMSStore5(selectScreenShareByPeerID(peerPresenting == null ? void 0 : peerPresenting.id));
-  if (peerSharingPlaylist) {
-    return /* @__PURE__ */ React5.createElement(
-      Box,
-      {
-        css: {
-          mx: "$8",
-          flex: "3 1 0",
-          "@xl": {
-            flex: "2 1 0",
-            display: "flex",
-            alignItems: "center"
-          }
-        }
-      },
-      /* @__PURE__ */ React5.createElement(VideoPlayer, { peerId: peerSharingPlaylist.id })
-    );
-  }
-  return /* @__PURE__ */ React5.createElement(
-    Box,
-    {
-      css: {
-        flex: "3 1 0",
-        mx: "$8",
-        "@xl": { ml: "$4", maxHeight: "80%", minHeight: 0 }
-      }
-    },
-    peerPresenting && (amIPresenting && !["browser", "window", "application"].includes(screenshareTrack == null ? void 0 : screenshareTrack.displaySurface) ? /* @__PURE__ */ React5.createElement(Box, { css: { objectFit: "contain", h: "100%" } }, /* @__PURE__ */ React5.createElement(ScreenshareDisplay, null)) : /* @__PURE__ */ React5.createElement(ScreenshareTile_default, { peerId: peerPresenting == null ? void 0 : peerPresenting.id }))
-  );
-};
-var SmallTilePeersView = ({ smallTilePeers, shouldShowScreenFn, showSidebarInBottom }) => {
-  return /* @__PURE__ */ React5.createElement(
-    Flex,
-    {
-      css: {
-        flex: "2 1 0"
-      }
-    },
-    smallTilePeers && smallTilePeers.length > 0 && /* @__PURE__ */ React5.createElement(
-      VideoList_default,
-      {
-        peers: smallTilePeers,
-        maxColCount: showSidebarInBottom ? void 0 : 1,
-        maxRowCount: showSidebarInBottom ? 1 : void 0,
-        includeScreenShareForPeer: shouldShowScreenFn
-      }
-    )
-  );
-};
-var LargeTilePeerView = ({ peerScreenSharing, showStatsOnTiles }) => {
-  return peerScreenSharing ? /* @__PURE__ */ React5.createElement(
-    Box,
-    {
-      css: {
-        flex: "1 1 0",
-        minHeight: "25%",
-        py: "$4",
-        "@lg": {
-          mr: "$4",
-          minHeight: "unset",
-          py: 0
-        },
-        "@sm": {
-          height: "100%",
-          maxHeight: "75%",
-          alignSelf: "center"
-        }
-      }
-    },
-    /* @__PURE__ */ React5.createElement(VideoTile_default, { showStatsOnTiles, width: "100%", height: "100%", peerId: peerScreenSharing.id })
-  ) : null;
-};
-var screenShareView_default = ScreenShareView;
-
-// src/Prebuilt/layouts/EmbedView.jsx
-var EmbedView = () => {
-  return /* @__PURE__ */ React6.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React6.createElement(EmbedComponent, null));
-};
-var EmbebScreenShareView = ({ children }) => {
-  var _a;
-  const peers = useHMSStore6(selectPeers2);
-  const mediaQueryLg = config.media.xl;
-  const showSidebarInBottom = useMedia2(mediaQueryLg);
-  const localPeerID = useHMSStore6(selectLocalPeerID2);
-  const localPeerRole = useHMSStore6(selectLocalPeerRoleName2);
-  const peerPresenting = useHMSStore6(selectPeerScreenSharing2);
-  const isPresenterFromMyRole = ((_a = peerPresenting == null ? void 0 : peerPresenting.roleName) == null ? void 0 : _a.toLowerCase()) === (localPeerRole == null ? void 0 : localPeerRole.toLowerCase());
-  const amIPresenting = localPeerID === (peerPresenting == null ? void 0 : peerPresenting.id);
-  const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
-  const smallTilePeers = useMemo2(() => {
-    const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
-    if (showPresenterInSmallTile && peerPresenting) {
-      smallTilePeers2.unshift(peerPresenting);
-    }
-    return smallTilePeers2;
-  }, [peers, peerPresenting, showPresenterInSmallTile]);
-  return /* @__PURE__ */ React6.createElement(Flex, { css: { size: "100%" }, direction: showSidebarInBottom ? "column" : "row" }, children, /* @__PURE__ */ React6.createElement(
-    Flex,
-    {
-      direction: { "@initial": "column", "@lg": "row" },
-      css: {
-        overflow: "hidden",
-        p: "$4 $8",
-        flex: "0 0 20%",
-        "@xl": {
-          flex: "1 1 0"
-        }
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      SidePane,
-      {
-        showSidebarInBottom,
-        peerScreenSharing: peerPresenting,
-        isPresenterInSmallTiles: showPresenterInSmallTile,
-        smallTilePeers,
-        totalPeers: peers.length
-      }
-    )
-  ));
-};
-var EmbedComponent = () => {
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
-  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [wasScreenShared, setWasScreenShared] = useState2(false);
-  const screenShareAttemptInProgress = useRef2(false);
-  const src = embedConfig.url;
-  const iframeRef = useRef2();
-  const resetEmbedConfig = useCallback3(() => {
-    if (src) {
-      setEmbedConfig({ url: "" });
-    }
-  }, [src, setEmbedConfig]);
-  useEffect(() => {
-    if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
-      screenShareAttemptInProgress.current = true;
-      toggleScreenShare({
-        forceCurrentTab: true,
-        cropElement: iframeRef.current
-      }).then(() => {
-        setWasScreenShared(true);
-      }).catch(resetEmbedConfig).finally(() => {
-        screenShareAttemptInProgress.current = false;
-      });
-    }
-  }, []);
-  useEffect(() => {
-    if (wasScreenShared && !amIScreenSharing) {
-      resetEmbedConfig();
-    }
-    return () => {
-      if (wasScreenShared && amIScreenSharing) {
-        resetEmbedConfig();
-        toggleScreenShare();
-      }
-    };
-  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React6.createElement(
-    Box,
-    {
-      ref: iframeRef,
-      css: {
-        mx: "$8",
-        flex: "3 1 0",
-        "@lg": {
-          flex: "2 1 0",
-          display: "flex",
-          alignItems: "center"
-        }
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      "iframe",
-      {
-        src,
-        title: src,
-        style: { width: "100%", height: "100%", border: 0 },
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen",
-        referrerPolicy: "no-referrer"
-      }
-    )
-  );
-};
-
-// src/Prebuilt/layouts/InsetView.jsx
-init_define_process_env();
-import React7, { Fragment as Fragment2, useEffect as useEffect2, useRef as useRef3 } from "react";
-import Draggable from "react-draggable";
-import { useMedia as useMedia3 } from "react-use";
-import { selectAppData, selectLocalPeer, selectRemotePeers, selectRolesMap, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
-var getAspectRatio = ({ roleMap, roleName, isMobile }) => {
-  const role = roleMap[roleName];
-  const { width, height } = role.publishParams.video;
-  return isMobile ? height / width : width / height;
-};
-function InsetView() {
-  var _a;
-  const remotePeers = useHMSStore7(selectRemotePeers);
-  const localPeer = useHMSStore7(selectLocalPeer);
-  const isMobile = useMedia3(config.media.md);
-  const isLandscape = useMedia3(config.media.ls);
-  const roleMap = useHMSStore7(selectRolesMap);
-  const rolePreference = useRolePreference();
-  let centerPeers = [];
-  let sidepanePeers = [];
-  if (rolePreference) {
-    const center = ((_a = rolePreference[localPeer.roleName]) == null ? void 0 : _a.split(",")) || [];
-    for (const peer of remotePeers) {
-      if (center.includes(peer.roleName)) {
-        centerPeers.push(peer);
-      } else {
-        sidepanePeers.push(peer);
-      }
-    }
-    if (centerPeers.length === 0 && sidepanePeers.length > 0) {
-      centerPeers = sidepanePeers;
-      sidepanePeers = [];
-    }
-  } else {
-    centerPeers = remotePeers;
-  }
-  const hideInset = sidepanePeers.length > 0 && (isMobile || isLandscape);
-  return /* @__PURE__ */ React7.createElement(Fragment2, null, /* @__PURE__ */ React7.createElement(
-    Box,
-    {
-      css: {
-        display: "grid",
-        gridTemplateColumns: sidepanePeers.length > 0 ? "3fr 1fr" : "100%",
-        gridTemplateRows: "1fr",
-        gap: "$8",
-        px: "$10",
-        size: "100%",
-        "@md": {
-          gridTemplateColumns: "1fr",
-          gridTemplateRows: sidepanePeers.length > 0 ? `3fr 1fr` : "100%"
-        }
-      }
-    },
-    /* @__PURE__ */ React7.createElement(
-      Flex,
-      {
-        align: "center",
-        justify: "center",
-        css: {
-          size: "100%",
-          gap: "$8",
-          flexWrap: "wrap",
-          placeContent: "center",
-          minHeight: 0,
-          minWidth: 0,
-          "@lg": { flexFlow: "column" },
-          "@ls": { flexFlow: "row" }
-        }
-      },
-      centerPeers.length > 0 ? centerPeers.map((peer) => /* @__PURE__ */ React7.createElement(
-        VideoTile_default,
-        {
-          key: peer.videoTrack || peer.id,
-          peerId: peer.id,
-          trackId: peer.videoTrack,
-          rootCSS: {
-            aspectRatio: getAspectRatio({
-              roleMap,
-              roleName: peer.roleName,
-              isMobile
-            }),
-            padding: 0,
-            height: "100%",
-            maxWidth: "100%",
-            minWidth: 0,
-            minHeight: 0,
-            flex: remotePeers.length === 1 ? void 0 : "1 1 0",
-            display: "flex",
-            alignItems: "center",
-            "@lg": {
-              display: "block",
-              padding: "0 !important",
-              width: "100%"
-            }
-          },
-          objectFit: "contain"
-        }
-      )) : /* @__PURE__ */ React7.createElement(FirstPersonDisplay, null)
-    ),
-    sidepanePeers.length > 0 && /* @__PURE__ */ React7.createElement(
-      Flex,
-      {
-        align: "center",
-        justify: "center",
-        css: {
-          size: "100%",
-          gap: "$4",
-          flexFlow: "row wrap",
-          placeContent: "center"
-        }
-      },
-      (hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => /* @__PURE__ */ React7.createElement(
-        VideoTile_default,
-        {
-          key: peer.videoTrack || peer.id,
-          peerId: peer.id,
-          trackId: peer.videoTrack,
-          rootCSS: {
-            aspectRatio: getAspectRatio({
-              roleMap,
-              roleName: peer.roleName,
-              isMobile: false
-            }),
-            flexBasis: "100%",
-            "@ls": {
-              aspectRatio: 1,
-              flexBasis: "calc(50% - $4)"
-            },
-            "@md": {
-              aspectRatio: 1,
-              flexBasis: arr.length < 4 ? "calc(50% - $4)" : "calc(33% - $4)"
-            },
-            "@sm": {
-              flexBasis: arr.length <= 4 ? "calc(50% - $4)" : "calc(33% - $4)"
-            },
-            padding: 0
-          },
-          objectFit: "contain"
-        }
-      ))
-    )
-  ), !hideInset && /* @__PURE__ */ React7.createElement(InsetTile, { roleMap, isMobile, isLandscape }));
-}
-var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
-  const localPeer = useHMSStore7(selectLocalPeer);
-  const sidepane = useHMSStore7(selectAppData(APP_DATA.sidePane));
-  const aspectRatio = getAspectRatio({
-    roleMap,
-    roleName: localPeer.roleName,
-    isMobile
-  });
-  let height = 180;
-  let width = height * aspectRatio;
-  if (isLandscape && width > 240) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-  const nodeRef = useRef3(null);
-  useEffect2(() => {
-    if (!nodeRef.current || !window.ResizeObserver) {
-      return;
-    }
-    const node = nodeRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.target === node.parentElement) {
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    resizeObserver.observe(node.parentElement);
-    return () => {
-      (node == null ? void 0 : node.parentElement) && (resizeObserver == null ? void 0 : resizeObserver.unobserve(node.parentElement));
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-    };
-  }, []);
-  return /* @__PURE__ */ React7.createElement(Draggable, { bounds: "parent", nodeRef }, /* @__PURE__ */ React7.createElement(
-    Box,
-    {
-      ref: nodeRef,
-      css: {
-        position: "absolute",
-        bottom: 0,
-        right: sidepane ? "$100" : "$10",
-        mr: sidepane ? "$14" : 0,
-        boxShadow: "0 0 8px 0 rgba(0,0,0,0.3)",
-        zIndex: 10,
-        aspectRatio,
-        h: height
-      }
-    },
-    /* @__PURE__ */ React7.createElement(
-      VideoTile_default,
-      {
-        peerId: localPeer.id,
-        trackid: localPeer.videoTrack,
-        rootCSS: {
-          size: "100%",
-          padding: 0
-        },
-        width,
-        height
-      }
-    )
-  ));
-};
-
-// src/Prebuilt/layouts/mainGridView.jsx
-init_define_process_env();
-import React9, { useEffect as useEffect3, useState as useState3 } from "react";
-import {
-  selectLocalPeerID as selectLocalPeerID3,
-  selectLocalPeerRole,
-  selectPeers as selectPeers3,
-  selectPeersByRoles,
-  selectRolesMap as selectRolesMap2,
-  useHMSStore as useHMSStore9
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/layouts/NonPublisherView.jsx
-init_define_process_env();
-import React8 from "react";
-import { ShieldAlertIcon } from "@100mslive/react-icons";
-var NonPublisherView = React8.memo(({ message }) => {
-  return /* @__PURE__ */ React8.createElement(
-    Box,
-    {
-      css: {
-        overflow: "hidden",
-        w: "96%",
-        maxWidth: "96%",
-        h: "100%",
-        m: "auto",
-        background: "$surface_default",
-        borderRadius: "$3"
-      },
-      "data-testid": "non_publisher_view"
-    },
-    /* @__PURE__ */ React8.createElement(
-      Flex,
-      {
-        align: "center",
-        direction: "column",
-        css: {
-          w: "$96",
-          textAlign: "center",
-          margin: "auto",
-          h: "100%",
-          justifyContent: "center",
-          gap: "$8"
-        }
-      },
-      /* @__PURE__ */ React8.createElement(ShieldAlertIcon, { color: "#C3D0E5", width: "80px", height: "80px" }),
-      /* @__PURE__ */ React8.createElement(
-        Flex,
-        {
-          direction: "column",
-          css: {
-            w: "$80",
-            p: "$1",
-            gap: "$4"
-          }
-        },
-        /* @__PURE__ */ React8.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, message),
-        /* @__PURE__ */ React8.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Please go to dashboard and reconfigure role settings or contact the role admin.")
-      )
-    )
-  );
-});
-
-// src/Prebuilt/components/AppData/useAppLayout.js
-init_define_process_env();
-import { selectAppDataByPath, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
-var useAppLayout = (path) => {
-  return useHMSStore8(selectAppDataByPath(APP_DATA.appLayout, path));
-};
-
-// src/Prebuilt/layouts/mainGridView.jsx
-var MainGridView = () => {
-  var _a;
-  const centerRoles = useAppLayout("center") || [];
-  const sidepaneRoles = useAppLayout("sidepane") || [];
-  const maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  const peers = useHMSStore9(selectPeers3);
-  const roles = useHMSStore9(selectRolesMap2);
-  const localPeerId = useHMSStore9(selectLocalPeerID3);
-  const centerPeers = peers.filter((peer) => centerRoles.includes(peer.roleName));
-  const sidebarPeers = peers.filter((peer) => sidepaneRoles.includes(peer.roleName));
-  const localRole = useHMSStore9(selectLocalPeerRole);
-  const peersByRoles = useHMSStore9(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
-  const [placeholder, setPlaceholder] = useState3("");
-  useEffect3(() => {
-    var _a2;
-    const hasPublishingPeers = peers.some((peer) => {
-      var _a3;
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!((_a3 = roles[peer.roleName].publishParams) == null ? void 0 : _a3.allowed.length);
-      }
-      return true;
-    });
-    const hasSubscribedRolePublishing = peersByRoles.some((peer) => {
-      var _a3;
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!((_a3 = roles[peer.roleName].publishParams) == null ? void 0 : _a3.allowed.length);
-      }
-      return true;
-    });
-    if (!hasPublishingPeers) {
-      setPlaceholder("None of the roles can publish video, audio or screen");
-    } else if (!((_a2 = localRole.subscribeParams.subscribeToRoles) == null ? void 0 : _a2.length)) {
-      setPlaceholder("This role isn't subscribed to any role");
-    } else if (!hasSubscribedRolePublishing) {
-      setPlaceholder("This role subscribed to roles is not publishing");
-    } else {
-      setPlaceholder("");
-    }
-  }, [(_a = localRole.subscribeParams.subscribeToRoles) == null ? void 0 : _a.length, peers, peersByRoles, roles]);
-  let showSidePane = centerPeers.length > 0 && sidebarPeers.length > 0;
-  if (centerPeers.length === 0) {
-    const itsOnlyMeInTheRoom = peers.length === 1 && peers[0].id === localPeerId;
-    const nooneIsPublishing = sidebarPeers.length === 0;
-    showSidePane = itsOnlyMeInTheRoom || nooneIsPublishing;
-  }
-  return /* @__PURE__ */ React9.createElement(
-    Flex,
-    {
-      css: {
-        size: "100%"
-      },
-      direction: {
-        "@initial": "row",
-        "@md": "column"
-      }
-    },
-    placeholder ? /* @__PURE__ */ React9.createElement(NonPublisherView, { message: placeholder }) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-      GridCenterView,
-      {
-        peers: showSidePane ? centerPeers : peers,
-        maxTileCount,
-        allowRemoteMute: false,
-        hideSidePane: !showSidePane,
-        totalPeers: peers.length
-      }
-    ), showSidePane && /* @__PURE__ */ React9.createElement(GridSidePaneView, { peers: sidebarPeers, totalPeers: peers.length }))
-  );
-};
-
-// src/Prebuilt/layouts/PDFView.jsx
-init_define_process_env();
-import React10, { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
-import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
-var PDFView = () => {
-  return /* @__PURE__ */ React10.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React10.createElement(PDFEmbedComponent, null));
-};
-var PDFEmbedComponent = () => {
-  const ref = useRef4();
-  const themeType = useTheme().themeType;
-  const [isPDFLoaded, setIsPDFLoaded] = useState4(false);
-  let pdfJSURL = define_process_env_default.REACT_APP_PDFJS_IFRAME_URL;
-  const { amIScreenSharing, toggleScreenShare } = useScreenShare2(throwErrorHandler2);
-  const [pdfConfig, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  if (pdfConfig.url && !pdfConfig.file) {
-    pdfJSURL = pdfJSURL + "?file=" + encodeURIComponent(pdfConfig.url);
-  }
-  const [wasScreenShared, setWasScreenShared] = useState4(false);
-  const screenShareAttemptInProgress = useRef4(false);
-  const iframeRef = useRef4();
-  const resetEmbedConfig = useCallback4(() => {
-    setPDFConfig({ state: false });
-  }, [setPDFConfig]);
-  useEffect4(() => {
-    if (isPDFLoaded && ref.current) {
-      ref.current.contentWindow.postMessage(
-        {
-          theme: themeType === ThemeTypes.dark ? 2 : 1
-        },
-        "*"
-      );
-    }
-  }, [isPDFLoaded, themeType]);
-  useEffect4(() => {
-    if (!amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) {
-      screenShareAttemptInProgress.current = true;
-      toggleScreenShare({
-        forceCurrentTab: isChrome,
-        cropElement: iframeRef.current,
-        preferCurrentTab: isChrome
-      }).then(() => {
-        setWasScreenShared(true);
-      }).catch(resetEmbedConfig).finally(() => {
-        screenShareAttemptInProgress.current = false;
-      });
-    }
-  }, []);
-  useEffect4(() => {
-    if (wasScreenShared && !amIScreenSharing) {
-      resetEmbedConfig();
-    }
-    return () => {
-      if (wasScreenShared && amIScreenSharing) {
-        resetEmbedConfig();
-        toggleScreenShare();
-      }
-    };
-  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
-  return /* @__PURE__ */ React10.createElement(
-    Box,
-    {
-      ref: iframeRef,
-      css: {
-        mx: "$8",
-        flex: "3 1 0",
-        "@lg": {
-          flex: "2 1 0",
-          display: "flex",
-          alignItems: "center"
-        }
-      }
-    },
-    /* @__PURE__ */ React10.createElement(
-      "iframe",
-      {
-        src: pdfJSURL,
-        title: "PDF Annotator",
-        ref,
-        style: {
-          width: "100%",
-          height: "100%",
-          border: 0,
-          borderRadius: "0.75rem"
-        },
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen",
-        referrerPolicy: "no-referrer",
-        onLoad: () => {
-          if (ref.current && pdfConfig.file) {
-            requestAnimationFrame(() => {
-              ref.current.contentWindow.postMessage(
-                {
-                  file: pdfConfig.file,
-                  theme: themeType === ThemeTypes.dark ? 2 : 1
-                },
-                "*"
-              );
-              setIsPDFLoaded(true);
-            }, 1e3);
-          }
-        }
-      }
-    )
-  );
-};
-
-// src/Prebuilt/layouts/WaitingView.jsx
-init_define_process_env();
-import React11 from "react";
-import { ColoredTimeIcon } from "@100mslive/react-icons";
-var WaitingView = React11.memo(() => {
-  return /* @__PURE__ */ React11.createElement(
-    Box,
-    {
-      css: {
-        overflow: "hidden",
-        w: "96%",
-        maxWidth: "96%",
-        h: "100%",
-        m: "auto",
-        background: "$surface_default",
-        borderRadius: "$3"
-      },
-      "data-testid": "waiting_view"
-    },
-    /* @__PURE__ */ React11.createElement(
-      Flex,
-      {
-        align: "center",
-        direction: "column",
-        css: {
-          w: "$96",
-          textAlign: "center",
-          margin: "auto",
-          h: "100%",
-          justifyContent: "center",
-          gap: "$8"
-        }
-      },
-      /* @__PURE__ */ React11.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
-      /* @__PURE__ */ React11.createElement(
-        Flex,
-        {
-          direction: "column",
-          css: {
-            w: "$80",
-            p: "$1",
-            gap: "$4"
-          }
-        },
-        /* @__PURE__ */ React11.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
-        /* @__PURE__ */ React11.createElement(Text, { color: "$on_surface_medium", css: { mt: "$4", "@md": { fontSize: "$sm" } } }, "Sit back and relax till others let you join.")
-      )
-    )
-  );
-});
-
-// src/Prebuilt/plugins/whiteboard/index.js
-init_define_process_env();
-
-// src/Prebuilt/layouts/mainView.jsx
-var HLSView = React12.lazy(() => import("./HLSView-F2K5VSTS.js"));
-var ActiveSpeakerView = React12.lazy(() => import("./ActiveSpeakerView-V6O4K3BV.js"));
-var PinnedTrackView = React12.lazy(() => import("./PinnedTrackView-7YQG4QKC.js"));
-var ConferenceMainView = () => {
-  var _a, _b, _c;
-  const localPeerRole = useHMSStore10(selectLocalPeerRoleName3);
-  const pinnedTrack = usePinnedTrack();
-  const peerSharing = useHMSStore10(selectPeerScreenSharing3);
-  const peerSharingAudio = useHMSStore10(selectPeerSharingAudio);
-  const peerSharingPlaylist = useHMSStore10(selectPeerSharingVideoPlaylist3);
-  const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
-  const isConnected = useHMSStore10(selectIsConnectedToRoom);
-  const uiMode = useHMSStore10(selectTemplateAppData).uiMode;
-  const hmsActions = useHMSActions6();
-  const isHeadless = useIsHeadless();
-  const headlessUIMode = useAppConfig("headlessConfig", "uiMode");
-  const { uiViewMode, isAudioOnly } = useUISettings();
-  const hlsViewerRole = useHLSViewerRole();
-  const waitingViewerRole = useWaitingViewerRole();
-  const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFAnnotator();
-  const { isHLSRunning } = useRecordingStreaming();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const permissions = useHMSStore10(selectPermissions);
-  const roomLayout = useRoomLayout();
-  const { join_form: joinForm = {} } = ((_c = (_b = (_a = roomLayout == null ? void 0 : roomLayout.screens) == null ? void 0 : _a.preview) == null ? void 0 : _b.default) == null ? void 0 : _c.elements) || {};
-  const startHLS = useCallback5(() => __async(void 0, null, function* () {
-    try {
-      if (isHLSStarted) {
-        return;
-      }
-      setHLSStarted(true);
-      yield hmsActions.startHLSStreaming({});
-    } catch (error) {
-      if (error.message.includes("invalid input")) {
-        yield startHLS();
-        return;
-      }
-      setHLSStarted(false);
-    }
-  }), [hmsActions, isHLSStarted, setHLSStarted]);
-  useEffect5(() => {
-    if (!isConnected) {
-      return;
-    }
-    const audioPlaylist = JSON.parse(define_process_env_default.REACT_APP_AUDIO_PLAYLIST || "[]");
-    const videoPlaylist = JSON.parse(define_process_env_default.REACT_APP_VIDEO_PLAYLIST || "[]");
-    if (videoPlaylist.length > 0) {
-      hmsActions.videoPlaylist.setList(videoPlaylist);
-    }
-    if (audioPlaylist.length > 0) {
-      hmsActions.audioPlaylist.setList(audioPlaylist);
-    }
-    if ((permissions == null ? void 0 : permissions.hlsStreaming) && !isHLSRunning && joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE) {
-      startHLS();
-    }
-    hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
-  }, [isConnected, hmsActions, permissions, joinForm]);
-  if (!localPeerRole) {
-    return null;
-  }
-  let ViewComponent;
-  if (localPeerRole === hlsViewerRole) {
-    ViewComponent = HLSView;
-  } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = WaitingView;
-  } else if (pdfAnnotatorActive) {
-    ViewComponent = PDFView;
-  } else if (urlToIframe) {
-    ViewComponent = EmbedView;
-  } else if (whiteboardShared) {
-  } else if (uiMode === "inset") {
-    ViewComponent = InsetView;
-  } else if ((peerSharing && peerSharing.id !== (peerSharingAudio == null ? void 0 : peerSharingAudio.id) || peerSharingPlaylist) && !isAudioOnly) {
-    ViewComponent = screenShareView_default;
-  } else if (pinnedTrack) {
-    ViewComponent = PinnedTrackView;
-  } else if (uiViewMode === UI_MODE_ACTIVE_SPEAKER || isHeadless && headlessUIMode === UI_MODE_ACTIVE_SPEAKER) {
-    ViewComponent = ActiveSpeakerView;
-  } else {
-    ViewComponent = MainGridView;
-  }
-  return /* @__PURE__ */ React12.createElement(Suspense, { fallback: /* @__PURE__ */ React12.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React12.createElement(
-    Flex,
-    {
-      css: {
-        size: "100%",
-        position: "relative"
-      }
-    },
-    /* @__PURE__ */ React12.createElement(ViewComponent, null),
-    /* @__PURE__ */ React12.createElement(SidePane_default, null)
-  ));
-};
-
-// src/Prebuilt/components/Footer.jsx
-init_define_process_env();
-import React36 from "react";
-
-// src/Prebuilt/components/Footer/ConferencingFooter.jsx
-init_define_process_env();
-import React34, { Fragment as Fragment6, Suspense as Suspense2, useState as useState16 } from "react";
-import { useMedia as useMedia6 } from "react-use";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish3, useHMSStore as useHMSStore19, useScreenShare as useScreenShare5 } from "@100mslive/react-sdk";
-import { MusicIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/MoreSettings/MoreSettings.jsx
-init_define_process_env();
-import React21, { Fragment as Fragment3, useState as useState12 } from "react";
-import { useMedia as useMedia5 } from "react-use";
-import Hls from "hls.js";
-import {
-  selectAppData as selectAppData2,
-  selectIsAllowedToPublish,
-  selectLocalPeerID as selectLocalPeerID6,
-  selectLocalPeerRoleName as selectLocalPeerRoleName5,
-  selectPermissions as selectPermissions4,
-  useHMSActions as useHMSActions12,
-  useHMSStore as useHMSStore15,
-  useRecordingStreaming as useRecordingStreaming3
-} from "@100mslive/react-sdk";
-import {
-  ChangeRoleIcon as ChangeRoleIcon2,
-  CheckIcon as CheckIcon3,
-  InfoIcon,
-  MicOffIcon as MicOffIcon2,
-  PencilIcon,
-  RecordIcon,
-  SettingsIcon,
-  VerticalMenuIcon
-} from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Settings/StartRecording.jsx
-init_define_process_env();
-import React13, { useState as useState5 } from "react";
-import { selectPermissions as selectPermissions2, useHMSActions as useHMSActions7, useHMSStore as useHMSStore11, useRecordingStreaming as useRecordingStreaming2 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon } from "@100mslive/react-icons";
-var StartRecording = ({ open, onOpenChange }) => {
-  const permissions = useHMSStore11(selectPermissions2);
-  const [resolution, setResolution] = useState5(RTMP_RECORD_DEFAULT_RESOLUTION);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
-  const hmsActions = useHMSActions7();
-  if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
-    return null;
-  }
-  if (isBrowserRecordingOn) {
-    return /* @__PURE__ */ React13.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Dialog.Portal, null, /* @__PURE__ */ React13.createElement(
-      Dialog.Content,
-      {
-        css: {
-          width: "min(400px,80%)",
-          p: "$10",
-          bg: "#201617"
-        }
-      },
-      /* @__PURE__ */ React13.createElement(Dialog.Title, null, /* @__PURE__ */ React13.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React13.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React13.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
-      /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
-      /* @__PURE__ */ React13.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React13.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React13.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React13.createElement(
-        Button,
-        {
-          "data-testid": "stop_recording_confirm_mobile",
-          variant: "danger",
-          icon: true,
-          onClick: () => __async(void 0, null, function* () {
-            try {
-              yield hmsActions.stopRTMPAndRecording();
-            } catch (error) {
-              ToastManager.addToast({
-                title: error.message,
-                variant: "error"
-              });
-            }
-            onOpenChange(false);
-          })
-        },
-        "End recording"
-      ))
-    )));
-  }
-  return /* @__PURE__ */ React13.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React13.createElement(Dialog.Title, null, /* @__PURE__ */ React13.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React13.createElement(
-    ResolutionInput,
-    {
-      testId: "recording_resolution_mobile",
-      css: { flexDirection: "column", alignItems: "start" },
-      onResolutionChange: setResolution
-    }
-  ), /* @__PURE__ */ React13.createElement(
-    Button,
-    {
-      "data-testid": "start_recording_confirm_mobile",
-      variant: "primary",
-      icon: true,
-      css: { ml: "auto" },
-      type: "submit",
-      disabled: recordingStarted || isStreamingOn,
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          setRecordingState(true);
-          yield hmsActions.startRTMPOrRecording({
-            resolution: getResolution(resolution),
-            record: true
-          });
-        } catch (error) {
-          if (error.message.includes("stream already running")) {
-            ToastManager.addToast({
-              title: "Recording already running",
-              variant: "error"
-            });
-          } else {
-            ToastManager.addToast({
-              title: error.message,
-              variant: "error"
-            });
-          }
-          setRecordingState(false);
-        }
-        onOpenChange(false);
-      })
-    },
-    "Start"
-  )));
-};
-var StartRecording_default = StartRecording;
-
-// src/Prebuilt/components/StatsForNerds.jsx
-init_define_process_env();
-import React14, { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
-import {
-  selectHMSStats,
-  selectLocalPeerID as selectLocalPeerID4,
-  selectPeersMap,
-  selectTracksMap,
-  useHMSStatsStore,
-  useHMSStore as useHMSStore12
-} from "@100mslive/react-sdk";
-var StatsForNerds = ({ onOpenChange }) => {
-  var _a;
-  const tracksWithLabels = useTracksWithLabel();
-  const statsOptions = useMemo3(
-    () => [{ id: "local-peer", label: "Local Peer Stats" }, ...tracksWithLabels],
-    [tracksWithLabels]
-  );
-  const [selectedStat, setSelectedStat] = useState6(statsOptions[0]);
-  const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
-  const [open, setOpen] = useState6(false);
-  const ref = useRef5();
-  const selectionBg = useDropdownSelection();
-  useEffect6(() => {
-    if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
-      setSelectedStat("local-peer");
-    }
-  }, [tracksWithLabels, selectedStat]);
-  return /* @__PURE__ */ React14.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(Dialog.Overlay, null), /* @__PURE__ */ React14.createElement(
-    Dialog.Content,
-    {
-      css: {
-        width: "min(500px, 95%)",
-        maxHeight: "100%",
-        overflowY: "auto"
-      }
-    },
-    /* @__PURE__ */ React14.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React14.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React14.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React14.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
-    /* @__PURE__ */ React14.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
-    /* @__PURE__ */ React14.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React14.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React14.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
-    /* @__PURE__ */ React14.createElement(
-      Flex,
-      {
-        direction: "column",
-        css: {
-          mb: "$12",
-          position: "relative",
-          minWidth: 0
-        }
-      },
-      /* @__PURE__ */ React14.createElement(Label, { variant: "body2" }, "Stats For"),
-      /* @__PURE__ */ React14.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React14.createElement(
-        DialogDropdownTrigger,
-        {
-          title: selectedStat.label || "Select Stats",
-          css: { mt: "$4" },
-          titleCSS: { mx: 0 },
-          open,
-          ref
-        }
-      ), /* @__PURE__ */ React14.createElement(Dropdown.Portal, null, /* @__PURE__ */ React14.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
-        const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
-        return /* @__PURE__ */ React14.createElement(
-          Dropdown.Item,
-          {
-            key: `${option.id}-${option.layer || ""}`,
-            onClick: () => {
-              setSelectedStat(option);
-            },
-            css: {
-              px: "$9",
-              bg: isSelected ? selectionBg : void 0,
-              c: isSelected ? "$on_primary_high" : "$on_primary_high"
-            }
-          },
-          option.label
-        );
-      }))))
-    ),
-    selectedStat.id === "local-peer" ? /* @__PURE__ */ React14.createElement(LocalPeerStats, null) : /* @__PURE__ */ React14.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local })
-  )));
-};
-var useTracksWithLabel = () => {
-  const tracksMap = useHMSStore12(selectTracksMap);
-  const peersMap = useHMSStore12(selectPeersMap);
-  const localPeerID = useHMSStore12(selectLocalPeerID4);
-  const tracksWithLabels = useMemo3(
-    () => Object.values(tracksMap).reduce((res, track) => {
-      var _a, _b;
-      const peerName = (_a = peersMap[track.peerId]) == null ? void 0 : _a.name;
-      const isLocalTrack = track.peerId === localPeerID;
-      if (isLocalTrack && ((_b = track.layerDefinitions) == null ? void 0 : _b.length)) {
-        res = res.concat(
-          track.layerDefinitions.map(({ layer }) => {
-            return {
-              id: track.id,
-              layer,
-              local: true,
-              label: `${peerName} ${track.source} ${track.type} - ${layer}`
-            };
-          })
-        );
-        return res;
-      }
-      res.push({
-        id: track.id,
-        local: isLocalTrack,
-        label: `${peerName} ${track.source} ${track.type}`
-      });
-      return res;
-    }, []),
-    [tracksMap, peersMap, localPeerID]
-  );
-  return tracksWithLabels;
-};
-var LocalPeerStats = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const stats = useHMSStatsStore(selectHMSStats.localPeerStats);
-  if (!stats) {
-    return null;
-  }
-  return /* @__PURE__ */ React14.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(
-    StatsRow,
-    {
-      label: "Available Outgoing Bitrate",
-      value: formatBytes((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
-    }
-  ), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React14.createElement(
-    StatsRow,
-    {
-      label: "Round Trip Time",
-      value: `${(((((_h = stats.publish) == null ? void 0 : _h.currentRoundTripTime) || 0) + (((_i = stats.subscribe) == null ? void 0 : _i.currentRoundTripTime) || 0)) / 2).toFixed(3) * 1e3} ms`
-    }
-  ));
-};
-var TrackStats = ({ trackID, layer, local }) => {
-  var _a;
-  const selector = layer ? selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID) : local ? selectHMSStats.localAudioTrackStatsByID(trackID) : selectHMSStats.trackStatsByID(trackID);
-  const stats = useHMSStatsStore(selector);
-  if (!stats) {
-    return null;
-  }
-  const inbound = stats.type.includes("inbound");
-  return /* @__PURE__ */ React14.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React14.createElement(
-    StatsRow,
-    {
-      label: inbound ? "Bytes Received" : "Bytes Sent",
-      value: formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)
-    }
-  ), stats.kind === "video" && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React14.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React14.createElement(StatsRow, { label: "Round Trip Time", value: stats.roundTripTime ? `${stats.roundTripTime * 1e3} ms` : "-" }));
-};
-var StatsRow = React14.memo(({ label, value }) => /* @__PURE__ */ React14.createElement(Box, { css: { bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React14.createElement(
-  Text,
-  {
-    variant: "overline",
-    css: {
-      fontWeight: "$semiBold",
-      color: "$on_surface_medium",
-      textTransform: "uppercase"
-    }
-  },
-  label
-), /* @__PURE__ */ React14.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
-var formatBytes = (bytes, unit = "B", decimals = 2) => {
-  if (bytes === void 0)
-    return "-";
-  if (bytes === 0)
-    return "0 " + unit;
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"].map((size) => size + unit);
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-};
-
-// src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
-init_define_process_env();
-import React15, { useCallback as useCallback6, useRef as useRef6, useState as useState7 } from "react";
-import { useHMSActions as useHMSActions8 } from "@100mslive/react-sdk";
-import { AlertTriangleIcon as AlertTriangleIcon2, ChangeRoleIcon, CheckIcon } from "@100mslive/react-icons";
-var BulkRoleChangeModal = ({ onOpenChange }) => {
-  var _a, _b;
-  const roles = useFilteredRoles();
-  const hmsActions = useHMSActions8();
-  const ref = useRef6(null);
-  const roleRef = useRef6(null);
-  const [selectedBulkRole, setBulkRole] = useState7([]);
-  const [selectedRole, setRole] = useState7("");
-  const [bulkRoleDialog, setBulkRoleDialog] = useState7(false);
-  const [roleDialog, setRoleDialog] = useState7(false);
-  const [errorMessage, setErrorMessage] = useState7("");
-  const [isSubmiting, setIsSubmiting] = useState7(false);
-  const changeBulkRole = useCallback6(() => __async(void 0, null, function* () {
-    if (selectedBulkRole.length > 0 && selectedRole) {
-      try {
-        setIsSubmiting(true);
-        yield hmsActions.changeRoleOfPeersWithRoles(selectedBulkRole, selectedRole);
-        setIsSubmiting(false);
-        setErrorMessage("");
-        onOpenChange(false);
-      } catch (err) {
-        setErrorMessage((err == null ? void 0 : err.message) ? err == null ? void 0 : err.message : "Unknown error");
-        setIsSubmiting(false);
-      }
-    }
-  }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React15.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React15.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React15.createElement(DialogRow, null, /* @__PURE__ */ React15.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React15.createElement(
-    Dropdown.Root,
-    {
-      open: bulkRoleDialog,
-      onOpenChange: (value) => {
-        if (value) {
-          setBulkRoleDialog(value);
-        }
-      },
-      modal: false
-    },
-    /* @__PURE__ */ React15.createElement(
-      DialogDropdownTrigger,
-      {
-        ref,
-        title: selectedBulkRole.length === 0 ? "Select Multiple Roles" : selectedBulkRole.toString(),
-        css: {
-          w: "70%",
-          p: "$8"
-        },
-        open: bulkRoleDialog
-      }
-    ),
-    /* @__PURE__ */ React15.createElement(
-      Dropdown.Content,
-      {
-        css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 },
-        onInteractOutside: () => {
-          if (bulkRoleDialog) {
-            setBulkRoleDialog(false);
-          }
-        }
-      },
-      roles && roles.map((role) => {
-        return /* @__PURE__ */ React15.createElement(
-          Dropdown.CheckboxItem,
-          {
-            key: role,
-            checked: selectedBulkRole.includes(role),
-            onCheckedChange: (value) => {
-              setBulkRole((selection) => {
-                return value ? [...selection, role] : selection.filter((selectedRole2) => selectedRole2 !== role);
-              });
-              setErrorMessage("");
-            }
-          },
-          /* @__PURE__ */ React15.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React15.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React15.createElement(CheckIcon, { width: 16, height: 16 }))),
-          role
-        );
-      })
-    )
-  )), /* @__PURE__ */ React15.createElement(DialogRow, null, /* @__PURE__ */ React15.createElement(Text, null, "To Role: "), /* @__PURE__ */ React15.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React15.createElement(
-    DialogDropdownTrigger,
-    {
-      ref: roleRef,
-      title: selectedRole || "Select Role",
-      css: {
-        w: "70%",
-        p: "$8"
-      },
-      open: roleDialog
-    }
-  ), /* @__PURE__ */ React15.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
-    return /* @__PURE__ */ React15.createElement(
-      Dropdown.Item,
-      {
-        key: role,
-        onSelect: () => {
-          setRole(role);
-          setErrorMessage("");
-        }
-      },
-      role
-    );
-  })))), /* @__PURE__ */ React15.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React15.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React15.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React15.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React15.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React15.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React15.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
-};
-
-// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-init_define_process_env();
-import React16, { useState as useState8 } from "react";
-import { selectLocalPeerName, useHMSActions as useHMSActions9, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
-var ChangeNameModal = ({ onOpenChange }) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions9();
-  const localPeerName = useHMSStore13(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState8(localPeerName);
-  const changeName = () => __async(void 0, null, function* () {
-    const name = currentName.trim();
-    if (!name || name === localPeerName) {
-      return;
-    }
-    try {
-      yield hmsActions.changeName(name);
-      setPreviewPreference(__spreadProps(__spreadValues({}, previewPreference || {}), {
-        name
-      }));
-    } catch (error) {
-      console.error("failed to update name", error);
-      ToastManager.addToast({ title: error.message });
-    } finally {
-      onOpenChange(false);
-    }
-  });
-  return /* @__PURE__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(Dialog.Portal, null, /* @__PURE__ */ React16.createElement(Dialog.Overlay, null), /* @__PURE__ */ React16.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React16.createElement(Dialog.Title, { css: { p: "0 $4" } }, /* @__PURE__ */ React16.createElement(Text, { variant: "h6" }, " Change Name")), /* @__PURE__ */ React16.createElement(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        yield changeName();
-      })
-    },
-    /* @__PURE__ */ React16.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%" } }, /* @__PURE__ */ React16.createElement(
-      Input,
-      {
-        css: { width: "100%" },
-        value: currentName,
-        onChange: (e) => {
-          setCurrentName(e.target.value);
-        },
-        autoComplete: "name",
-        required: true,
-        "data-testid": "change_name_field"
-      }
-    )),
-    /* @__PURE__ */ React16.createElement(
-      Flex,
-      {
-        justify: "between",
-        align: "center",
-        css: {
-          width: "100%",
-          gap: "$md",
-          mt: "$10"
-        }
-      },
-      /* @__PURE__ */ React16.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React16.createElement(Dialog.Close, { css: { w: "100%" } }, /* @__PURE__ */ React16.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, type: "submit", disabled: !localPeerName }, "Cancel"))),
-      /* @__PURE__ */ React16.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React16.createElement(
-        Button,
-        {
-          variant: "primary",
-          css: { width: "100%" },
-          type: "submit",
-          disabled: !currentName.trim() || currentName.trim() === localPeerName,
-          "data-testid": "popup_change_btn"
-        },
-        "Change"
-      ))
-    )
-  ))));
-};
-
-// src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx
-init_define_process_env();
-import React17, { useMemo as useMemo4 } from "react";
-import { useMedia as useMedia4 } from "react-use";
-import {
-  selectLocalPeerID as selectLocalPeerID5,
-  selectLocalPeerRoleName as selectLocalPeerRoleName4,
-  selectPermissions as selectPermissions3,
-  useHMSActions as useHMSActions10,
-  useHMSStore as useHMSStore14
-} from "@100mslive/react-sdk";
-import { ArrowRightIcon, CheckIcon as CheckIcon2, PersonIcon } from "@100mslive/react-icons";
-var ChangeSelfRole = ({ onClick }) => {
-  const roles = useFilteredRoles();
-  const permissions = useHMSStore14(selectPermissions3);
-  const localPeerId = useHMSStore14(selectLocalPeerID5);
-  const localPeerRole = useHMSStore14(selectLocalPeerRoleName4);
-  const hmsActions = useHMSActions10();
-  const hideTriggerItem = useMedia4(config.media.sm);
-  const selfRoleChangeTo = useAppLayout("selfRoleChangeTo");
-  const availableSelfChangeRoles = useMemo4(() => arrayIntersection(selfRoleChangeTo, roles), [roles, selfRoleChangeTo]);
-  if (!permissions.changeRole) {
-    return null;
-  }
-  return hideTriggerItem ? /* @__PURE__ */ React17.createElement(Dropdown.Item, { onClick }, /* @__PURE__ */ React17.createElement(PersonIcon, null), /* @__PURE__ */ React17.createElement(Text, { variant: "sm", css: { mx: "$4" } }, "Change My Role")) : /* @__PURE__ */ React17.createElement(Dropdown.SubMenu, null, /* @__PURE__ */ React17.createElement(Dropdown.TriggerItem, { "data-testid": "change_my_role_btn" }, /* @__PURE__ */ React17.createElement(PersonIcon, null), /* @__PURE__ */ React17.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$4" } }, "Change My Role"), /* @__PURE__ */ React17.createElement(ArrowRightIcon, null)), /* @__PURE__ */ React17.createElement(Dropdown.SubMenuContent, { sideOffset: 8, alignOffset: -5, css: { py: "$0", "@md": { w: "$64" } } }, availableSelfChangeRoles.map((role) => /* @__PURE__ */ React17.createElement(
-    Dropdown.Item,
-    {
-      key: role,
-      css: { justifyContent: "space-between" },
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          yield hmsActions.changeRole(localPeerId, role, true);
-        } catch (error) {
-          ToastManager.addToast({ title: error.message });
-        }
-      }),
-      "data-testid": "change_to_role_" + role
-    },
-    /* @__PURE__ */ React17.createElement(Text, { variant: "sm" }, role),
-    localPeerRole === role && /* @__PURE__ */ React17.createElement(CheckIcon2, { width: 16, height: 16 })
-  ))));
-};
-
-// src/Prebuilt/components/MoreSettings/EmbedUrl.jsx
-init_define_process_env();
-import React18, { useState as useState9 } from "react";
-import { ViewIcon } from "@100mslive/react-icons";
-var EmbedUrl = ({ setShowOpenUrl }) => {
-  if (!window.CropTarget) {
-    return null;
-  }
-  return /* @__PURE__ */ React18.createElement(
-    Dropdown.Item,
-    {
-      onClick: () => {
-        setShowOpenUrl(true);
-      },
-      "data-testid": "embed_url_btn"
-    },
-    /* @__PURE__ */ React18.createElement(ViewIcon, null),
-    /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Embed URL")
-  );
-};
-function EmbedUrlModal({ onOpenChange }) {
-  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [url, setUrl] = useState9((embedConfig == null ? void 0 : embedConfig.url) || "");
-  const isAnythingEmbedded = !!(embedConfig == null ? void 0 : embedConfig.url);
-  const isModifying = isAnythingEmbedded && url && url !== embedConfig.url;
-  return /* @__PURE__ */ React18.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React18.createElement(DialogContent, { title: "Embed URL", Icon: ViewIcon }, /* @__PURE__ */ React18.createElement(DialogInput, { title: "URL", value: url, onChange: setUrl, placeholder: "https://www.tldraw.com/", type: "url" }), /* @__PURE__ */ React18.createElement(DialogRow, null, /* @__PURE__ */ React18.createElement(Text, null, "Embed a url and share with everyone in the room. Ensure that you're sharing the current tab when the prompt opens. Note that not all websites support being embedded.")), /* @__PURE__ */ React18.createElement(DialogRow, { justify: "end" }, isAnythingEmbedded ? /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
-    Button,
-    {
-      variant: "primary",
-      type: "submit",
-      disabled: !isModifying,
-      onClick: () => {
-        setEmbedConfig({ url, shareScreen: embedConfig.shareScreen });
-        onOpenChange(false);
-      },
-      "data-testid": "embed_url_btn",
-      css: { mr: "$4" }
-    },
-    "Update Embed"
-  ), /* @__PURE__ */ React18.createElement(
-    Button,
-    {
-      variant: "danger",
-      type: "submit",
-      onClick: () => {
-        setEmbedConfig({ url: "" });
-        onOpenChange(false);
-      },
-      "data-testid": "embed_url_btn"
-    },
-    "Stop Embed"
-  )) : /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
-    Button,
-    {
-      variant: "primary",
-      type: "submit",
-      disabled: !url.trim(),
-      onClick: () => {
-        setEmbedConfig({ url });
-        onOpenChange(false);
-      },
-      "data-testid": "embed_url_btn",
-      css: { mr: "$4" }
-    },
-    "Just Embed"
-  ), /* @__PURE__ */ React18.createElement(
-    Button,
-    {
-      variant: "primary",
-      type: "submit",
-      disabled: !url.trim(),
-      onClick: () => {
-        setEmbedConfig({ url, shareScreen: true });
-        onOpenChange(false);
-      },
-      "data-testid": "embed_url_btn"
-    },
-    "Embed and Share"
-  )))));
-}
-
-// src/Prebuilt/components/MoreSettings/FullScreenItem.jsx
-init_define_process_env();
-import React19 from "react";
-import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/hooks/useFullscreen.js
-init_define_process_env();
-import { useCallback as useCallback7, useEffect as useEffect7, useState as useState10 } from "react";
-import screenfull2 from "screenfull";
-var useFullscreen2 = () => {
-  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState10(screenfull2.isFullscreen);
-  const toggle = useCallback7(() => __async(void 0, null, function* () {
-    if (!screenfull2.isEnabled) {
-      ToastManager.addToast({ title: "Fullscreen feature not supported" });
-      return;
-    }
-    try {
-      if (isFullScreenEnabled) {
-        yield screenfull2.exit();
-      } else {
-        yield screenfull2.request();
-      }
-    } catch (err) {
-      ToastManager.addToast({ title: err.message });
-    }
-  }), [isFullScreenEnabled]);
-  useEffect7(() => {
-    const onChange = () => {
-      setIsFullScreenEnabled(screenfull2.isFullscreen);
-    };
-    if (screenfull2.isEnabled) {
-      screenfull2.on("change", onChange);
-    }
-    return () => {
-      if (screenfull2.isEnabled) {
-        screenfull2.off("change", onChange);
-      }
-    };
-  }, []);
-  return {
-    allowed: screenfull2.isEnabled,
-    isFullscreen: isFullScreenEnabled,
-    toggleFullscreen: toggle
-  };
-};
-
-// src/Prebuilt/components/MoreSettings/FullScreenItem.jsx
-var FullScreenItem = () => {
-  const { allowed, isFullscreen, toggleFullscreen } = useFullscreen2();
-  const isFullscreenEnabled = useIsFeatureEnabled(FEATURE_LIST.FULLSCREEN);
-  if (!isFullscreenEnabled || !allowed) {
-    return null;
-  }
-  return /* @__PURE__ */ React19.createElement(
-    Dropdown.Item,
-    {
-      onClick: () => {
-        toggleFullscreen();
-      },
-      "data-testid": "full_screen_btn"
-    },
-    /* @__PURE__ */ React19.createElement(ExpandIcon2, null),
-    /* @__PURE__ */ React19.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
-  );
-};
-
-// src/Prebuilt/components/MoreSettings/MuteAllModal.jsx
-init_define_process_env();
-import React20, { useCallback as useCallback8, useState as useState11 } from "react";
-import { useHMSActions as useHMSActions11 } from "@100mslive/react-sdk";
-import { MicOffIcon } from "@100mslive/react-icons";
-var trackSourceOptions = [
-  { label: "All Track Sources", value: "" },
-  { label: "regular", value: "regular" },
-  { label: "screen", value: "screen" },
-  { label: "audioplaylist", value: "audioplaylist" },
-  { label: "videoplaylist", value: "videoplaylist" }
-];
-var trackTypeOptions = [
-  { label: "All Track Types", value: "" },
-  { label: "audio", value: "audio" },
-  { label: "video", value: "video" }
-];
-var MuteAllModal = ({ onOpenChange }) => {
-  const roles = useFilteredRoles();
-  const hmsActions = useHMSActions11();
-  const [enabled, setEnabled] = useState11(false);
-  const [trackType, setTrackType] = useState11();
-  const [selectedRole, setRole] = useState11();
-  const [selectedSource, setSource] = useState11();
-  const muteAll = useCallback8(() => __async(void 0, null, function* () {
-    yield hmsActions.setRemoteTracksEnabled({
-      enabled,
-      type: trackType,
-      source: selectedSource,
-      roles: selectedRole ? [selectedRole] : void 0
-    });
-    onOpenChange(false);
-  }), [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
-  return /* @__PURE__ */ React20.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React20.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React20.createElement(
-    DialogSelect,
-    {
-      title: "Role",
-      options: [{ label: "All Roles", value: "" }, ...roles.map((role) => ({ label: role, value: role }))],
-      selected: selectedRole,
-      keyField: "value",
-      labelField: "label",
-      onChange: setRole
-    }
-  ), /* @__PURE__ */ React20.createElement(
-    DialogSelect,
-    {
-      title: "Track type",
-      options: trackTypeOptions,
-      selected: trackType,
-      onChange: setTrackType,
-      keyField: "value",
-      labelField: "label"
-    }
-  ), /* @__PURE__ */ React20.createElement(
-    DialogSelect,
-    {
-      title: "Track source",
-      options: trackSourceOptions,
-      selected: selectedSource,
-      onChange: setSource,
-      keyField: "value",
-      labelField: "label"
-    }
-  ), /* @__PURE__ */ React20.createElement(DialogRow, null, /* @__PURE__ */ React20.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React20.createElement(RadioGroup.Root, { value: enabled, onValueChange: setEnabled }, /* @__PURE__ */ React20.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Item, { value: false, id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React20.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), /* @__PURE__ */ React20.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Item, { value: true, id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React20.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React20.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React20.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React20.createElement(Button, { variant: "primary", onClick: muteAll }, "Apply"))));
-};
-
-// src/Prebuilt/components/MoreSettings/MoreSettings.jsx
-var isMobileOS = isAndroid || isIOS;
-var MODALS = {
-  CHANGE_NAME: "changeName",
-  SELF_ROLE_CHANGE: "selfRoleChange",
-  MORE_SETTINGS: "moreSettings",
-  START_RECORDING: "startRecording",
-  DEVICE_SETTINGS: "deviceSettings",
-  STATS_FOR_NERDS: "statsForNerds",
-  BULK_ROLE_CHANGE: "bulkRoleChange",
-  MUTE_ALL: "muteAll",
-  EMBED_URL: "embedUrl"
-};
-var MoreSettings = () => {
-  const permissions = useHMSStore15(selectPermissions4);
-  const isAllowedToPublish = useHMSStore15(selectIsAllowedToPublish);
-  const localPeerId = useHMSStore15(selectLocalPeerID6);
-  const localPeerRole = useHMSStore15(selectLocalPeerRoleName5);
-  const hmsActions = useHMSActions12();
-  const enablHlsStats = useHMSStore15(selectAppData2(APP_DATA.hlsStats));
-  const isMobile = useMedia5(config.media.md);
-  const { isBrowserRecordingOn } = useRecordingStreaming3();
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
-  const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL);
-  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
-  const [openModals, setOpenModals] = useState12(/* @__PURE__ */ new Set());
-  useDropdownList({ open: openModals.size > 0, name: "MoreSettings" });
-  const updateState = (modalName, value) => {
-    setOpenModals((modals) => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-  return /* @__PURE__ */ React21.createElement(Fragment3, null, /* @__PURE__ */ React21.createElement(
-    Dropdown.Root,
-    {
-      open: openModals.has(MODALS.MORE_SETTINGS),
-      onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value)
-    },
-    /* @__PURE__ */ React21.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React21.createElement(IconButton_default, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React21.createElement(Box, null, /* @__PURE__ */ React21.createElement(VerticalMenuIcon, null))))),
-    /* @__PURE__ */ React21.createElement(
-      Dropdown.Content,
-      {
-        sideOffset: 5,
-        align: "center",
-        css: {
-          py: "$0",
-          maxHeight: "$96",
-          "@md": { w: "$64" },
-          "div[role='separator']:first-child": {
-            display: "none"
-          }
-        }
-      },
-      isMobile && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.START_RECORDING, true) }, /* @__PURE__ */ React21.createElement(RecordIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isBrowserRecordingOn ? "Stop" : "Start", " Recording")), /* @__PURE__ */ React21.createElement(Dropdown.ItemSeparator, null)) : null,
-      isChangeNameEnabled && /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.CHANGE_NAME, true), "data-testid": "change_name_btn" }, /* @__PURE__ */ React21.createElement(PencilIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Change Name")),
-      /* @__PURE__ */ React21.createElement(ChangeSelfRole, { onClick: () => updateState(MODALS.SELF_ROLE_CHANGE, true) }),
-      (permissions == null ? void 0 : permissions.changeRole) && /* @__PURE__ */ React21.createElement(
-        Dropdown.Item,
-        {
-          onClick: () => updateState(MODALS.BULK_ROLE_CHANGE, true),
-          "data-testid": "bulk_role_change_btn"
-        },
-        /* @__PURE__ */ React21.createElement(ChangeRoleIcon2, null),
-        /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Bulk Role Change")
-      ),
-      /* @__PURE__ */ React21.createElement(FullScreenItem, null),
-      isAllowedToPublish.screen && isEmbedEnabled && /* @__PURE__ */ React21.createElement(EmbedUrl, { setShowOpenUrl: () => updateState(MODALS.EMBED_URL, true) }),
-      permissions.mute && /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.MUTE_ALL, true), "data-testid": "mute_all_btn" }, /* @__PURE__ */ React21.createElement(MicOffIcon2, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Mute All")),
-      /* @__PURE__ */ React21.createElement(Dropdown.ItemSeparator, null),
-      /* @__PURE__ */ React21.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React21.createElement(SettingsIcon, null), /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
-      FeatureFlags.enableStatsForNerds && isSFNEnabled && (localPeerRole === "hls-viewer" ? Hls.isSupported() ? /* @__PURE__ */ React21.createElement(
-        Dropdown.Item,
-        {
-          onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
-          "data-testid": "hls_stats"
-        },
-        /* @__PURE__ */ React21.createElement(
-          Checkbox.Root,
-          {
-            css: { margin: "$2" },
-            checked: enablHlsStats,
-            onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
-          },
-          /* @__PURE__ */ React21.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React21.createElement(CheckIcon3, { width: 16, height: 16 }))
-        ),
-        /* @__PURE__ */ React21.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), !isMobileOS ? /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`) : null)
-      ) : null : /* @__PURE__ */ React21.createElement(
-        Dropdown.Item,
-        {
-          onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
-          "data-testid": "stats_for_nreds_btn"
-        },
-        /* @__PURE__ */ React21.createElement(InfoIcon, null),
-        /* @__PURE__ */ React21.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
-      ))
-    )
-  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React21.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React21.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.CHANGE_NAME) && /* @__PURE__ */ React21.createElement(ChangeNameModal, { onOpenChange: (value) => updateState(MODALS.CHANGE_NAME, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React21.createElement(SettingsModal_default, { open: true, onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value) }), FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React21.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React21.createElement(RoleChangeModal, { peerId: localPeerId, onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React21.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.EMBED_URL) && /* @__PURE__ */ React21.createElement(EmbedUrlModal, { onOpenChange: (value) => updateState(MODALS.EMBED_URL, value) }));
-};
-
-// src/Prebuilt/components/PIP/index.jsx
-init_define_process_env();
-import React23 from "react";
-
-// src/Prebuilt/components/PIP/PIPComponent.jsx
-init_define_process_env();
-import React22, { useCallback as useCallback9, useEffect as useEffect8, useState as useState13 } from "react";
-import {
-  selectLocalPeerRoleName as selectLocalPeerRoleName6,
-  selectPeers as selectPeers4,
-  selectRemotePeers as selectRemotePeers2,
-  selectTracksMap as selectTracksMap2,
-  useHMSActions as useHMSActions13,
-  useHMSStore as useHMSStore16,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-import { PipIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/PIP/PIPManager.js
-init_define_process_env();
-import * as workerTimers from "worker-timers";
-
-// src/Prebuilt/components/PIP/pipUtils.js
-init_define_process_env();
-var CANVAS_FILL_COLOR;
-var CANVAS_STROKE_COLOR;
-function setPIPCanvasColors() {
-  if (!CANVAS_FILL_COLOR) {
-    CANVAS_FILL_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-surface_bright");
-  }
-  if (!CANVAS_STROKE_COLOR) {
-    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-border_bright");
-  }
-}
-function resetPIPCanvasColors() {
-  CANVAS_FILL_COLOR = "";
-  CANVAS_STROKE_COLOR = "";
-}
-function drawVideoElementsOnCanvas(videoElements, canvas) {
-  let videoTiles = videoElements.filter((videoElement) => videoElement.srcObject !== null);
-  const ctx = canvas.getContext("2d");
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  if (videoTiles.length === 0) {
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    return;
-  }
-  fillGridTiles(videoTiles.slice(0, 4), ctx, canvas);
-}
-function dummyChangeInCanvas(canvas) {
-  const ctx = canvas.getContext("2d");
-  setPIPCanvasColors();
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-}
-function fillGridTiles(videoElements, ctx, canvas) {
-  const offset = 8;
-  canvas.width = 480;
-  canvas.height = 320;
-  ctx.fillStyle = CANVAS_FILL_COLOR;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  if (videoElements.length > 0) {
-    ctx.strokeStyle = CANVAS_STROKE_COLOR;
-    ctx.lineWidth = offset / 2;
-    ctx.strokeRect(0, 0, canvas.width, canvas.height);
-  }
-  if (videoElements.length === 1) {
-    const video = videoElements[0];
-    const { width, height } = getRenderDimensions(video, canvas.width - offset, canvas.height - offset);
-    const xOffset = (canvas.width - width) / 2;
-    const yOffset = (canvas.height - height) / 2;
-    ctx.drawImage(video, xOffset, yOffset, width, height);
-  }
-  if (videoElements.length === 2) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(
-        video,
-        canvas.width / 2 - offset,
-        // This will be the max available width for each tile
-        canvas.height - offset
-      );
-      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * index;
-      const yOffset = (canvas.height - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-  }
-  if (videoElements.length === 3) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      const xOffset = index < 2 ? (canvas.width / 2 - width) / 2 + canvas.width / 2 * index : canvas.width / 2 - width / 2;
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height / 2);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-  if (videoElements.length === 4) {
-    videoElements.forEach((video, index) => {
-      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
-      const xOffset = (canvas.width / 2 - width) / 2 + canvas.width / 2 * (index % 2);
-      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
-      ctx.drawImage(video, xOffset, yOffset, width, height);
-    });
-    const path = new Path2D();
-    path.moveTo(canvas.width / 2, 0);
-    path.lineTo(canvas.width / 2, canvas.height);
-    ctx.stroke(path);
-    path.moveTo(0, canvas.height / 2);
-    path.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke(path);
-  }
-}
-function getRenderDimensions(video, width, height) {
-  let finalWidth = video.videoWidth / video.videoHeight * height;
-  let finalHeight = height;
-  if (finalWidth > width) {
-    finalWidth = width;
-    finalHeight = video.videoHeight / video.videoWidth * width;
-  }
-  return { width: finalWidth, height: finalHeight };
-}
-
-// src/Prebuilt/components/PIP/PIPManager.js
-var MAX_NUMBER_OF_TILES_IN_PIP = 4;
-var DEFAULT_FPS = 30;
-var DEFAULT_CANVAS_WIDTH = 480;
-var DEFAULT_CANVAS_HEIGHT = 320;
-var LEAVE_EVENT_NAME = "leavepictureinpicture";
-var PIPStates = {
-  starting: "starting",
-  started: "started",
-  stopping: "stopping",
-  stopped: "stopped"
-};
-var PipManager = class {
-  constructor() {
-    __publicField(this, "stop", () => __async(this, null, function* () {
-      var _a;
-      if (this.state === PIPStates.stopped) {
-        return;
-      }
-      this.state = PIPStates.stopping;
-      (_a = this.pipVideo) == null ? void 0 : _a.removeEventListener(LEAVE_EVENT_NAME, this.stop);
-      if (this.timeoutRef) {
-        workerTimers.clearTimeout(this.timeoutRef);
-      }
-      if (this.isOn()) {
-        this.exitPIP();
-      }
-      yield this.detachOldAttachNewTracks(this.tracksToShow, []);
-      this.onStateChange(false);
-      this.reset();
-      this.state = PIPStates.stopped;
-    }));
-    this.reset();
-  }
-  /**
-   * @private
-   */
-  reset() {
-    console.debug("resetting PIP state");
-    resetPIPCanvasColors();
-    this.canvas = null;
-    this.pipVideo = null;
-    this.timeoutRef = null;
-    this.hmsActions = null;
-    this.videoElements = [];
-    this.tracksToShow = [];
-    this.onStateChange = () => {
-    };
-    this.state = PIPStates.stopped;
-  }
-  /**
-   * check if PIP is supported in this browser env
-   */
-  isSupported() {
-    return !!document.pictureInPictureEnabled && !isIOS && !(isMacOS && isSafari);
-  }
-  /**
-   * check if pip is currently turned on
-   */
-  isOn() {
-    return !!document.pictureInPictureElement;
-  }
-  /**
-   * request browser to start pip and start the render loop updating the pip
-   * video element with peer tracks.
-   * @param hmsActions
-   * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
-   */
-  start(hmsActions, onStateChangeFn) {
-    return __async(this, null, function* () {
-      if (!this.isSupported()) {
-        throw new Error("pip is not supported on this browser");
-      }
-      console.debug("starting PIP, current state", this.state);
-      if (this.state === PIPStates.started) {
-        yield this.stop();
-      } else if (this.state === PIPStates.starting) {
-        return;
-      }
-      this.state = PIPStates.starting;
-      try {
-        yield this.init(hmsActions, onStateChangeFn);
-        this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
-        this.renderLoop();
-        if (!this.isOn()) {
-          yield this.requestPIP();
-        }
-        console.debug("pip started");
-        this.state = PIPStates.started;
-        this.onStateChange(true);
-      } catch (err) {
-        console.error("error in request pip", err);
-        this.state = PIPStates.stopped;
-      }
-    });
-  }
-  /**
-   * @param peers {Array} All Remote Peers present in call.
-   * @param tracksMap {Object} map of track id to track
-   * */
-  updatePeersAndTracks(peers, tracksMap) {
-    return __async(this, null, function* () {
-      if (!this.canvas) {
-        return;
-      }
-      const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
-      const currentTracksShowing = this.tracksToShow;
-      this.tracksToShow = this.orderNewTracksToShow(newTracksToShowUnordered, currentTracksShowing);
-      try {
-        yield this.detachOldAttachNewTracks(currentTracksShowing, this.tracksToShow, tracksMap);
-      } catch (error) {
-        console.error("error in detaching/attaching tracks", error);
-      }
-    });
-  }
-  // ------- Private function --------------
-  /**
-   * @private
-   */
-  init(hmsActions, onStateChangeFn) {
-    return __async(this, null, function* () {
-      yield this.initMediaElements();
-      this.hmsActions = hmsActions;
-      this.onStateChange = onStateChangeFn;
-    });
-  }
-  initMediaElements() {
-    return __async(this, null, function* () {
-      if (!this.canvas) {
-        const { canvas, pipVideo } = this.initializeCanvasAndVideoElement();
-        this.canvas = canvas;
-        this.pipVideo = pipVideo;
-        this.videoElements = this.initializeVideoElements();
-        const videoPlayPromise = this.pipVideo.play();
-        dummyChangeInCanvas(this.canvas);
-        yield videoPlayPromise;
-      }
-    });
-  }
-  initializeCanvasAndVideoElement() {
-    const canvas = document.createElement("canvas");
-    canvas.width = DEFAULT_CANVAS_WIDTH;
-    canvas.height = DEFAULT_CANVAS_HEIGHT;
-    const pipVideo = document.createElement("video");
-    pipVideo.width = DEFAULT_CANVAS_WIDTH;
-    pipVideo.height = DEFAULT_CANVAS_HEIGHT;
-    pipVideo.muted = true;
-    pipVideo.srcObject = canvas.captureStream();
-    return { canvas, pipVideo };
-  }
-  initializeVideoElements() {
-    let videoElements = [];
-    for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
-      const videoElement = document.createElement("video");
-      videoElement.autoplay = true;
-      videoElement.playsinline = true;
-      videoElements.push(videoElement);
-    }
-    return videoElements;
-  }
-  /**
-   * render loop is responsible for rendering the video elements on canvas/pip.
-   * in each loop current video elements are stitched and painted on canvas
-   */
-  renderLoop() {
-    const delay = 1e3 / DEFAULT_FPS;
-    this.timeoutRef = workerTimers.setTimeout(() => {
-      if (this.state === PIPStates.stopping || this.state === PIPStates.stopped) {
-        return;
-      }
-      if (this.state === PIPStates.started) {
-        drawVideoElementsOnCanvas(this.videoElements, this.canvas);
-      }
-      this.renderLoop();
-    }, delay);
-  }
-  requestPIP() {
-    return __async(this, null, function* () {
-      try {
-        if (this.isOn()) {
-          this.exitPIP();
-        }
-        yield this.pipVideo.requestPictureInPicture();
-      } catch (error) {
-        console.error("error in requestpip", error, "state", this.state);
-        throw error;
-      }
-    });
-  }
-  exitPIP() {
-    document.exitPictureInPicture();
-  }
-  /**
-   * Logic - pick only enabled video tracks
-   * @param peers {Array<any>}
-   * @param tracksMap {Record<string, any>}
-   */
-  pickTracksToShow(peers, tracksMap) {
-    var _a;
-    const tracksToShow = [];
-    for (const peer of peers) {
-      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
-        break;
-      } else if (peer.videoTrack && ((_a = tracksMap[peer.videoTrack]) == null ? void 0 : _a.enabled)) {
-        tracksToShow.push(peer.videoTrack);
-      }
-    }
-    return tracksToShow;
-  }
-  /**
-   * there has to be a smart reordering of new tracks based on currently showing
-   * ones to reduce unnecessary displacement. If someone was showing up both
-   * earlier and now, it's a better UX to keep their position same instead
-   * of letting it change.
-   * The returned array is a shuffled version of newTracks with position of
-   * tracks present in the old tracks intact.
-   * eg. old = [1,5,9,3], new = [3,8,2,9], result = [8,2,9,3]
-   * @param oldTracks {Array}
-   * @param newTracks {Array}
-   * @return {Array}
-   */
-  orderNewTracksToShow(newTracks, oldTracks) {
-    const betterNewTracks = [];
-    const leftOvers = [];
-    newTracks.forEach((track) => {
-      const oldPosition = oldTracks.indexOf(track);
-      if (oldPosition !== -1 && oldPosition < newTracks.length) {
-        betterNewTracks[oldPosition] = track;
-      } else {
-        leftOvers.push(track);
-      }
-    });
-    for (let i = 0; i < newTracks.length; i++) {
-      if (!betterNewTracks[i]) {
-        betterNewTracks[i] = leftOvers.shift();
-      }
-    }
-    return betterNewTracks;
-  }
-  /**
-   * call detach for tracks which no longer need to be shown and attach for
-   * new ones which are to be shown now.
-   * Note: oldTracks and newTracks are not necessarily of same length
-   * @param oldTracks {Array<String>}
-   * @param newTracks {Array<String>}
-   * @param tracksMap {Record<String, any>}
-   */
-  // eslint-disable-next-line complexity
-  detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
-    return __async(this, null, function* () {
-      const numTracks = Math.max(oldTracks.length, newTracks.length);
-      for (let i = 0; i < numTracks; i++) {
-        if (oldTracks[i] === newTracks[i]) {
-          continue;
-        } else if (oldTracks[i]) {
-          if (!tracksMap || tracksMap[oldTracks[i]]) {
-            yield this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
-          }
-          if (this.videoElements[i]) {
-            this.videoElements[i].srcObject = null;
-          }
-        }
-        if (newTracks[i]) {
-          yield this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
-        }
-      }
-    });
-  }
-};
-var PictureInPicture = new PipManager();
-
-// src/Prebuilt/components/PIP/SetupMediaSession.js
-init_define_process_env();
-import { selectIsLocalAudioEnabled, selectIsLocalVideoEnabled } from "@100mslive/react-sdk";
-var SetupMediaSession = class {
-  constructor() {
-    __publicField(this, "setup", (actions, store) => {
-      this.actions = actions;
-      this.store = store;
-      this.initState();
-      this.setUpHandlers();
-    });
-    __publicField(this, "initState", () => {
-      var _a, _b, _c, _d;
-      const isMicActive = this.store.getState(selectIsLocalAudioEnabled);
-      const isCamActive = this.store.getState(selectIsLocalVideoEnabled);
-      (_b = (_a = navigator.mediaSession) == null ? void 0 : _a.setMicrophoneActive) == null ? void 0 : _b.call(_a, isMicActive);
-      (_d = (_c = navigator.mediaSession) == null ? void 0 : _c.setCameraActive) == null ? void 0 : _d.call(_c, isCamActive);
-      this.store.subscribe((isMicActive2) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setMicrophoneActive) == null ? void 0 : _b2.call(_a2, isMicActive2);
-      }, selectIsLocalAudioEnabled);
-      this.store.subscribe((isCamActive2) => {
-        var _a2, _b2;
-        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setCameraActive) == null ? void 0 : _b2.call(_a2, isCamActive2);
-      }, selectIsLocalVideoEnabled);
-    });
-    __publicField(this, "toggleMic", () => __async(this, null, function* () {
-      console.log("toggle mic clicked in pip");
-      const current = this.store.getState(selectIsLocalAudioEnabled);
-      yield this.actions.setLocalAudioEnabled(!current);
-    }));
-    __publicField(this, "toggleCam", () => __async(this, null, function* () {
-      console.log("toggle cam clicked in pip");
-      const current = this.store.getState(selectIsLocalVideoEnabled);
-      yield this.actions.setLocalVideoEnabled(!current);
-    }));
-    __publicField(this, "leave", () => {
-      console.log("leave called from pip");
-      this.actions.leave();
-    });
-    __publicField(this, "setUpHandlers", () => {
-      if (navigator.mediaSession) {
-        try {
-          navigator.mediaSession.setActionHandler("togglemicrophone", this.toggleMic);
-          navigator.mediaSession.setActionHandler("togglecamera", this.toggleCam);
-          navigator.mediaSession.setActionHandler("hangup", this.leave);
-        } catch (err) {
-          console.error("error in setting media session handlers", err);
-        }
-      }
-    });
-  }
-};
-var MediaSession = new SetupMediaSession();
-
-// src/Prebuilt/components/PIP/PIPComponent.jsx
-var PIPComponent = ({ peers, showLocalPeer }) => {
-  const localPeerRole = useHMSStore16(selectLocalPeerRoleName6);
-  const [isPipOn, setIsPipOn] = useState13(PictureInPicture.isOn());
-  const hmsActions = useHMSActions13();
-  const store = useHMSVanillaStore();
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
-  const onPipToggle = useCallback9(() => {
-    if (!isPipOn) {
-      PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
-      MediaSession.setup(hmsActions, store);
-    } else {
-      PictureInPicture.stop().catch((err) => console.error("error in stopping pip", err));
-    }
-  }, [hmsActions, isPipOn, store]);
-  useEffect8(() => {
-    return () => {
-      PictureInPicture.stop().catch((err) => console.error("error in stopping pip on unmount", err));
-    };
-  }, []);
-  if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React22.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React22.createElement(PipIcon, null))), isPipOn && /* @__PURE__ */ React22.createElement(ActivatedPIP, { showLocalPeer, peers }));
-};
-var ActivatedPIP = ({ showLocalPeer, peers }) => {
-  const tracksMap = useHMSStore16(selectTracksMap2);
-  const storePeers = useHMSStore16(showLocalPeer ? selectPeers4 : selectRemotePeers2);
-  useEffect8(() => {
-    let pipPeers = storePeers;
-    if (peers) {
-      pipPeers = storePeers.filter((peer) => peers.includes(peer.id));
-    }
-    PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch((err) => {
-      console.error("error in updating pip", err);
-    });
-  }, [peers, storePeers, tracksMap]);
-  return null;
-};
-var PIPComponent_default = PIPComponent;
-
-// src/Prebuilt/components/PIP/index.jsx
-var PIP = () => {
-  const pinnedTrack = usePinnedTrack();
-  return /* @__PURE__ */ React23.createElement(PIPComponent_default, { peers: pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : void 0, showLocalPeer: true });
-};
-
-// src/Prebuilt/components/ScreenShare.jsx
-init_define_process_env();
-import React31, { Fragment as Fragment5 } from "react";
-import { selectIsAllowedToPublish as selectIsAllowedToPublish2, useHMSStore as useHMSStore17, useScreenShare as useScreenShare4 } from "@100mslive/react-sdk";
-import { ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
-init_define_process_env();
-import React30, { Fragment as Fragment4, useState as useState15 } from "react";
-import { useScreenShare as useScreenShare3 } from "@100mslive/react-sdk";
-import { PdfShare, ScreenShare, StarIcon, VerticalMenuIcon as VerticalMenuIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/ShareMenuIcon.jsx
-init_define_process_env();
-var ScreenShareButton = styled(IconButton_default, {
-  h: "$14",
-  px: "$8",
-  r: "$1",
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0,
-  "@md": {
-    px: "$4",
-    mx: 0
-  }
-});
-var ShareMenuIcon = styled(ScreenShareButton, {
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  borderTopRightRadius: "$1",
-  borderBottomRightRadius: "$1",
-  borderLeftWidth: 0,
-  w: "$4",
-  "@md": {
-    px: "$2"
-  }
-});
-
-// src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-init_define_process_env();
-import React29, { useState as useState14 } from "react";
-
-// src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx
-init_define_process_env();
-import React24 from "react";
-import { InfoIcon as InfoIcon2 } from "@100mslive/react-icons";
-var PdfErrorView = ({ isPDFUrlValid }) => {
-  return !isPDFUrlValid && /* @__PURE__ */ React24.createElement(
-    DialogRow,
-    {
-      css: {
-        mt: "-$8",
-        color: "$alert_error_default",
-        justifyContent: "start"
-      }
-    },
-    /* @__PURE__ */ React24.createElement(InfoIcon2, { width: "12px", height: "12px" }),
-    /* @__PURE__ */ React24.createElement(
-      Text,
-      {
-        variant: "caption",
-        css: {
-          pl: "$1",
-          color: "$alert_error_default"
-        }
-      },
-      "Please enter a valid PDF URL"
-    )
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
-init_define_process_env();
-import React25 from "react";
-var PDFHeader = () => {
-  return /* @__PURE__ */ React25.createElement(
-    DialogCol,
-    {
-      align: "start",
-      css: {
-        mt: 0,
-        mb: "$6"
-      }
-    },
-    /* @__PURE__ */ React25.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React25.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
-    /* @__PURE__ */ React25.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React25.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: {
-          c: "$on_surface_medium"
-        }
-      },
-      "Choose PDF you want to annotate and share"
-    ))
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx
-init_define_process_env();
-import React26 from "react";
-import { InfoIcon as InfoIcon3 } from "@100mslive/react-icons";
-var PDFInfo = () => {
-  return /* @__PURE__ */ React26.createElement(
-    DialogRow,
-    {
-      css: {
-        px: "$8",
-        py: "$3",
-        bg: "$surface_bright",
-        r: "$1",
-        outline: "none",
-        border: "1px solid $border_bright",
-        minHeight: "$11"
-      }
-    },
-    /* @__PURE__ */ React26.createElement(
-      InfoIcon3,
-      {
-        width: "64px",
-        height: "64px",
-        style: {
-          paddingRight: "16px"
-        }
-      }
-    ),
-    /* @__PURE__ */ React26.createElement(Text, { variant: "caption" }, "On the next screen, ensure you select \u201CThis Tab\u201D and click on share. Only the PDF viewer will be seen by other participants")
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
-init_define_process_env();
-import React27, { useCallback as useCallback10 } from "react";
-var SubmitPDF = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange
-}) => {
-  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  const isValidPDF = useCallback10(
-    (pdfURL2) => {
-      const extension = pdfURL2.split(".").pop().toLowerCase();
-      setIsValidateProgress(true);
-      if (extension === "pdf") {
-        setIsPDFUrlValid(true);
-        setIsValidateProgress(false);
-        setPDFConfig({ state: true, file: pdfFile, url: pdfURL2 });
-        onOpenChange(false);
-      }
-      fetch(pdfURL2, { method: "HEAD" }).then((response) => response.headers.get("content-type")).then((contentType) => {
-        if (contentType === "application/pdf") {
-          setIsPDFUrlValid(true);
-          setIsValidateProgress(false);
-          setPDFConfig({ state: true, file: pdfFile, url: pdfURL2 });
-          onOpenChange(false);
-        } else {
-          setIsPDFUrlValid(false);
-          setIsValidateProgress(false);
-        }
-      }).catch(() => {
-        setIsPDFUrlValid(false);
-        setIsValidateProgress(false);
-      });
-    },
-    [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig]
-  );
-  return /* @__PURE__ */ React27.createElement(
-    Flex,
-    {
-      direction: "row",
-      css: {
-        mb: "0",
-        mt: "auto",
-        gap: "$8"
-      }
-    },
-    /* @__PURE__ */ React27.createElement(
-      Button,
-      {
-        variant: "standard",
-        outlined: true,
-        type: "submit",
-        onClick: () => {
-          onOpenChange(false);
-        },
-        css: { w: "50%" }
-      },
-      "Cancel"
-    ),
-    /* @__PURE__ */ React27.createElement(
-      Button,
-      {
-        variant: "primary",
-        type: "submit",
-        onClick: () => {
-          if (pdfFile) {
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-            onOpenChange(false);
-          } else if (pdfURL) {
-            isValidPDF(pdfURL);
-          }
-        },
-        disabled: !pdfFile && !pdfURL,
-        loading: isValidateProgress,
-        "data-testid": "share_pdf_btn",
-        css: {
-          w: "50%"
-        }
-      },
-      "Start Sharing"
-    )
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
-init_define_process_env();
-import React28 from "react";
-import { TrashIcon } from "@100mslive/react-icons";
-var UploadedFile = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setPDFFile,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange
-}) => {
-  const [fileName, ext] = pdfFile.name.split(".");
-  return /* @__PURE__ */ React28.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React28.createElement(Dialog.Portal, null, /* @__PURE__ */ React28.createElement(Dialog.Overlay, null), /* @__PURE__ */ React28.createElement(
-    Dialog.Content,
-    {
-      css: {
-        w: "min(420px,80%)",
-        overflow: "auto",
-        p: "$10"
-      }
-    },
-    /* @__PURE__ */ React28.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React28.createElement(PDFHeader, null), /* @__PURE__ */ React28.createElement(
-      DialogRow,
-      {
-        css: {
-          fontFamily: "$sans",
-          bg: "$surface_bright",
-          r: "$1",
-          outline: "none",
-          border: "1px solid $border_bright",
-          p: "$4 $6",
-          minHeight: "$11",
-          c: "$on_primary_high",
-          fs: "$md",
-          w: "100%",
-          "&:focus": {
-            boxShadow: "0 0 0 1px $colors$primary_default",
-            border: "1px solid $transparent"
-          },
-          mb: 0,
-          mt: "$6"
-        }
-      },
-      /* @__PURE__ */ React28.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React28.createElement(
-        Text,
-        {
-          css: {
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap"
-          }
-        },
-        fileName
-      ), /* @__PURE__ */ React28.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
-      /* @__PURE__ */ React28.createElement(
-        TrashIcon,
-        {
-          onClick: () => setPDFFile(null),
-          style: {
-            cursor: "pointer"
-          }
-        }
-      )
-    ), /* @__PURE__ */ React28.createElement(PDFInfo, null), /* @__PURE__ */ React28.createElement(
-      SubmitPDF,
-      {
-        pdfFile,
-        pdfURL,
-        isValidateProgress,
-        setIsPDFUrlValid,
-        setIsValidateProgress,
-        onOpenChange
-      }
-    ))
-  )));
-};
-
-// src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-function PDFFileOptions({ onOpenChange }) {
-  const [isPDFUrlValid, setIsPDFUrlValid] = useState14(true);
-  const [isValidateProgress, setIsValidateProgress] = useState14(false);
-  const [pdfFile, setPDFFile] = useState14(null);
-  const [pdfURL, setPDFURL] = useState14("");
-  return !pdfFile ? /* @__PURE__ */ React29.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React29.createElement(Dialog.Portal, null, /* @__PURE__ */ React29.createElement(Dialog.Overlay, null), /* @__PURE__ */ React29.createElement(
-    Dialog.Content,
-    {
-      css: {
-        w: "min(420px,80%)",
-        overflow: "auto",
-        p: "$10"
-      }
-    },
-    /* @__PURE__ */ React29.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React29.createElement(PDFHeader, null), /* @__PURE__ */ React29.createElement(
-      DialogInputFile,
-      {
-        onChange: (target) => {
-          setPDFFile(target.files[0]);
-        },
-        placeholder: "Click to upload",
-        type: "file",
-        accept: ".pdf"
-      }
-    ), /* @__PURE__ */ React29.createElement(
-      DialogRow,
-      {
-        css: {
-          m: "$10 0"
-        }
-      },
-      /* @__PURE__ */ React29.createElement(
-        HorizontalDivider,
-        {
-          css: {
-            mr: "$4"
-          }
-        }
-      ),
-      /* @__PURE__ */ React29.createElement(
-        Text,
-        {
-          variant: "tiny",
-          css: {
-            color: "$on_surface_low"
-          }
-        },
-        "OR"
-      ),
-      /* @__PURE__ */ React29.createElement(
-        HorizontalDivider,
-        {
-          css: {
-            ml: "$4"
-          }
-        }
-      )
-    ), /* @__PURE__ */ React29.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: {
-          py: "$2"
-        }
-      },
-      "Import from URL"
-    ), /* @__PURE__ */ React29.createElement(
-      Input,
-      {
-        css: { w: "100%", mb: "$10" },
-        value: pdfURL,
-        onFocus: () => {
-          setIsPDFUrlValid(true);
-          setIsValidateProgress(false);
-        },
-        onChange: (e) => {
-          setPDFURL(e.target.value);
-        },
-        placeholder: "Add PDF URL",
-        type: "text",
-        error: !isPDFUrlValid
-      }
-    ), !isPDFUrlValid && /* @__PURE__ */ React29.createElement(PdfErrorView, { isPDFUrlValid }), /* @__PURE__ */ React29.createElement(PDFInfo, null), /* @__PURE__ */ React29.createElement(
-      SubmitPDF,
-      {
-        pdfFile,
-        pdfURL,
-        isValidateProgress,
-        setIsPDFUrlValid,
-        setIsValidateProgress,
-        onOpenChange
-      }
-    ))
-  ))) : /* @__PURE__ */ React29.createElement(
-    UploadedFile,
-    {
-      pdfFile,
-      pdfURL,
-      isValidateProgress,
-      setPDFFile,
-      setIsPDFUrlValid,
-      setIsValidateProgress,
-      onOpenChange
-    }
-  );
-}
-
-// src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
-var MODALS2 = {
-  SHARE: "share",
-  SCREEN_SHARE: "screenShare",
-  PDF_SHARE: "pdfShare"
-};
-function ShareScreenOptions() {
-  const [openModals, setOpenModals] = useState15(/* @__PURE__ */ new Set());
-  const { amIScreenSharing } = useScreenShare3();
-  const updateState = (modalName, value) => {
-    setOpenModals((modals) => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-  const { toggleScreenShare } = useScreenShare3();
-  return /* @__PURE__ */ React30.createElement(Fragment4, null, /* @__PURE__ */ React30.createElement(Dropdown.Root, { open: openModals.has(MODALS2.SHARE), onOpenChange: (value) => updateState(MODALS2.SHARE, value) }, /* @__PURE__ */ React30.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React30.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React30.createElement(Box, null, /* @__PURE__ */ React30.createElement(VerticalMenuIcon2, null))))), /* @__PURE__ */ React30.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      css: {
-        w: "$96",
-        maxHeight: "$96",
-        p: 0
-      }
-    },
-    /* @__PURE__ */ React30.createElement(
-      Dropdown.Item,
-      {
-        css: {
-          flexDirection: "column",
-          alignItems: "flex-start",
-          px: "$10",
-          pt: "$10",
-          pb: "$6",
-          "&:hover": {
-            bg: "$transparent",
-            cursor: "default"
-          }
-        }
-      },
-      /* @__PURE__ */ React30.createElement(Text, { variant: "h6" }, "Start Sharing"),
-      /* @__PURE__ */ React30.createElement(Text, { variant: "sm" }, "Choose what you want to share")
-    ),
-    /* @__PURE__ */ React30.createElement(
-      Dropdown.Item,
-      {
-        css: {
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: "$8",
-          px: "$10",
-          py: "$6",
-          "&:hover": {
-            bg: "$transparent",
-            cursor: "default"
-          }
-        }
-      },
-      /* @__PURE__ */ React30.createElement(
-        Flex,
-        {
-          direction: "column",
-          align: "center",
-          css: {
-            gap: "$6"
-          }
-        },
-        /* @__PURE__ */ React30.createElement(
-          IconButton,
-          {
-            as: "div",
-            onClick: () => toggleScreenShare(),
-            css: {
-              p: "$6",
-              display: "flex",
-              justifyContent: "center",
-              border: "1px solid $border_bright",
-              r: "$2",
-              bg: "$surface_brighter",
-              pb: "0"
-            }
-          },
-          /* @__PURE__ */ React30.createElement(
-            ScreenShare,
-            {
-              width: "100%",
-              height: "100%",
-              style: {
-                borderTopLeftRadius: "$0",
-                borderTopRightRadius: "$0"
-              }
-            }
-          )
-        ),
-        /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React30.createElement(
-          Text,
-          {
-            variant: "caption",
-            css: {
-              c: "$on_surface_low",
-              textAlign: "center"
-            }
-          },
-          "Share your tab, window or your entire screen"
-        ))
-      ),
-      /* @__PURE__ */ React30.createElement(
-        Flex,
-        {
-          direction: "column",
-          align: "center",
-          css: {
-            gap: "$6"
-          }
-        },
-        /* @__PURE__ */ React30.createElement(
-          IconButton,
-          {
-            onClick: () => {
-              updateState(MODALS2.PDF_SHARE, true);
-            },
-            disabled: amIScreenSharing,
-            css: {
-              p: "$6",
-              display: "flex",
-              justifyContent: "center",
-              border: "$border_bright 1px solid",
-              r: "$2",
-              bg: "$surface_bright",
-              pb: "0"
-            }
-          },
-          /* @__PURE__ */ React30.createElement(
-            PdfShare,
-            {
-              width: "100%",
-              height: "100%",
-              style: {
-                borderTopLeftRadius: "$0",
-                borderTopRightRadius: "$0"
-              }
-            }
-          ),
-          /* @__PURE__ */ React30.createElement(
-            Flex,
-            {
-              direction: "row",
-              align: "center",
-              css: {
-                position: "absolute",
-                top: "29%",
-                left: "54%",
-                padding: "$2 $4",
-                r: "$2",
-                bg: "$primary_bright",
-                zIndex: "2",
-                gap: "$2"
-              }
-            },
-            /* @__PURE__ */ React30.createElement(StarIcon, { height: 14, width: 14 }),
-            /* @__PURE__ */ React30.createElement(
-              Text,
-              {
-                variant: "xs",
-                css: {
-                  fontWeight: "$semiBold",
-                  c: "$on_primary_high",
-                  pr: "$4"
-                }
-              },
-              "New"
-            )
-          )
-        ),
-        /* @__PURE__ */ React30.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React30.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React30.createElement(
-          Text,
-          {
-            variant: "caption",
-            css: {
-              c: "$on_surface_low",
-              textAlign: "center"
-            }
-          },
-          "Annotate, draw shapes, and more over PDFs"
-        ))
-      )
-    ),
-    /* @__PURE__ */ React30.createElement(
-      Dropdown.Item,
-      {
-        css: {
-          px: "$10",
-          pb: "$10",
-          pt: "$6",
-          "&:hover": {
-            bg: "$transparent",
-            cursor: "default"
-          }
-        }
-      },
-      /* @__PURE__ */ React30.createElement(
-        Button,
-        {
-          variant: "standard",
-          outlined: true,
-          type: "submit",
-          onClick: () => {
-            updateState(MODALS2.SHARE, false);
-          },
-          "data-testid": "share_btn",
-          css: {
-            w: "100%"
-          }
-        },
-        "Cancel"
-      )
-    )
-  )), openModals.has(MODALS2.PDF_SHARE) && /* @__PURE__ */ React30.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS2.PDF_SHARE, value) }));
-}
-
-// src/Prebuilt/components/ScreenShare.jsx
-var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore17(selectIsAllowedToPublish2);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare4();
-  const isVideoScreenshare = amIScreenSharing && !!video;
-  if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
-    return null;
-  }
-  return /* @__PURE__ */ React31.createElement(Fragment5, null, /* @__PURE__ */ React31.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React31.createElement(
-    ScreenShareButton,
-    {
-      variant: "standard",
-      key: "ShareScreen",
-      active: !isVideoScreenshare,
-      css,
-      disabled: isAudioOnly,
-      onClick: () => {
-        toggleScreenShare();
-      }
-    },
-    /* @__PURE__ */ React31.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(ShareScreenIcon2, null)))
-  ), /* @__PURE__ */ React31.createElement(ShareScreenOptions, null)));
-};
-
-// src/Prebuilt/components/ScreenshareHintModal.jsx
-init_define_process_env();
-import React32 from "react";
-import { useHMSActions as useHMSActions14 } from "@100mslive/react-sdk";
-var ScreenShareHintModal = ({ onClose }) => {
-  const hmsActions = useHMSActions14();
-  return /* @__PURE__ */ React32.createElement(Dialog.Root, { defaultOpen: true, onOpenChange: (value) => !value && onClose() }, /* @__PURE__ */ React32.createElement(DialogContent, { title: "AudioOnly Screenshare" }, /* @__PURE__ */ React32.createElement(
-    "img",
-    {
-      src: "https://images.app.100ms.live/share-audio.png",
-      alt: "AudioOnly Screenshare instructions",
-      width: "100%"
-    }
-  ), /* @__PURE__ */ React32.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React32.createElement(
-    Button,
-    {
-      variant: "primary",
-      onClick: () => {
-        hmsActions.setScreenShareEnabled(true, {
-          audioOnly: true,
-          displaySurface: "browser"
-        }).catch(console.error);
-        onClose();
-      },
-      "data-testid": "audio_screenshare_continue"
-    },
-    "Continue"
-  ))));
-};
-
-// src/Prebuilt/components/Footer/ChatToggle.jsx
-init_define_process_env();
-import React33 from "react";
-import { selectUnreadHMSMessagesCount, useHMSStore as useHMSStore18 } from "@100mslive/react-sdk";
-import { ChatIcon, ChatUnreadIcon } from "@100mslive/react-icons";
-var ChatToggle = () => {
-  const countUnreadMessages = useHMSStore18(selectUnreadHMSMessagesCount);
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
-  if (!isFeatureEnabled) {
-    return;
-  }
-  return /* @__PURE__ */ React33.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React33.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React33.createElement(ChatIcon, null) : /* @__PURE__ */ React33.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
-};
-
-// src/Prebuilt/components/Footer/ConferencingFooter.jsx
-var TranscriptionButton = React34.lazy(() => import("./transcription-RJA4V6PC.js"));
-var VirtualBackground = React34.lazy(() => import("./VirtualBackground-S3XEPZ2T.js"));
-var ScreenshareAudio = () => {
-  const {
-    amIScreenSharing,
-    screenShareVideoTrackId: video,
-    screenShareAudioTrackId: audio,
-    toggleScreenShare
-  } = useScreenShare5();
-  const isAllowedToPublish = useHMSStore19(selectIsAllowedToPublish3);
-  const isAudioScreenshare = amIScreenSharing && !video && !!audio;
-  const [showModal, setShowModal] = useState16(false);
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.AUDIO_ONLY_SCREENSHARE);
-  if (!isFeatureEnabled || !isAllowedToPublish.screen || !isScreenshareSupported()) {
-    return null;
-  }
-  return /* @__PURE__ */ React34.createElement(Fragment6, null, /* @__PURE__ */ React34.createElement(Tooltip, { title: `${!isAudioScreenshare ? "Start" : "Stop"} audio sharing`, key: "shareAudio" }, /* @__PURE__ */ React34.createElement(
-    IconButton_default,
-    {
-      active: !isAudioScreenshare,
-      onClick: () => {
-        if (amIScreenSharing) {
-          toggleScreenShare();
-        } else {
-          setShowModal(true);
-        }
-      },
-      "data-testid": "screenshare_audio"
-    },
-    /* @__PURE__ */ React34.createElement(MusicIcon, null)
-  )), showModal && /* @__PURE__ */ React34.createElement(ScreenShareHintModal, { onClose: () => setShowModal(false) }));
-};
-var ConferencingFooter = () => {
-  const isMobile = useMedia6(config.media.md);
-  return /* @__PURE__ */ React34.createElement(Footer.Root, null, /* @__PURE__ */ React34.createElement(Footer.Left, null, /* @__PURE__ */ React34.createElement(ScreenshareAudio, null), /* @__PURE__ */ React34.createElement(Suspense2, { fallback: "" }, /* @__PURE__ */ React34.createElement(VirtualBackground, null)), FeatureFlags.enableTranscription ? /* @__PURE__ */ React34.createElement(TranscriptionButton, null) : null, /* @__PURE__ */ React34.createElement(
-    Flex,
-    {
-      align: "center",
-      css: {
-        display: "none",
-        "@md": {
-          display: "flex",
-          gap: "$8"
-        }
-      }
-    },
-    isMobile && /* @__PURE__ */ React34.createElement(EmojiReaction, null),
-    /* @__PURE__ */ React34.createElement(MetaActions_default, { isMobile: true })
-  )), /* @__PURE__ */ React34.createElement(Footer.Center, null, /* @__PURE__ */ React34.createElement(AudioVideoToggle, null), /* @__PURE__ */ React34.createElement(ScreenshareToggle, null), /* @__PURE__ */ React34.createElement(PIP, null), /* @__PURE__ */ React34.createElement(MoreSettings, null), /* @__PURE__ */ React34.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React34.createElement(ChatToggle, null)), /* @__PURE__ */ React34.createElement(LeaveRoom, null)), /* @__PURE__ */ React34.createElement(Footer.Right, null, !isMobile && /* @__PURE__ */ React34.createElement(EmojiReaction, null), /* @__PURE__ */ React34.createElement(MetaActions_default, null), /* @__PURE__ */ React34.createElement(ChatToggle, null)));
-};
-
-// src/Prebuilt/components/Footer/StreamingFooter.jsx
-init_define_process_env();
-import React35 from "react";
-var StreamingFooter = () => {
-  return /* @__PURE__ */ React35.createElement(
-    Footer.Root,
-    {
-      css: {
-        flexWrap: "nowrap",
-        "@md": {
-          justifyContent: "center"
-        }
-      }
-    },
-    /* @__PURE__ */ React35.createElement(
-      Footer.Left,
-      {
-        css: {
-          "@md": {
-            w: "unset",
-            p: "0"
-          }
-        }
-      },
-      /* @__PURE__ */ React35.createElement(AudioVideoToggle, null)
-    ),
-    /* @__PURE__ */ React35.createElement(
-      Footer.Center,
-      {
-        css: {
-          "@md": {
-            w: "unset"
-          }
-        }
-      },
-      /* @__PURE__ */ React35.createElement(ScreenshareToggle, { css: { "@sm": { display: "none" } } }),
-      /* @__PURE__ */ React35.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React35.createElement(PIP, null)),
-      /* @__PURE__ */ React35.createElement(
-        Box,
-        {
-          css: {
-            display: "none",
-            "@md": {
-              display: "flex",
-              alignItems: "center",
-              mx: "$4"
-            }
-          }
-        },
-        /* @__PURE__ */ React35.createElement(StreamActions, null)
-      ),
-      /* @__PURE__ */ React35.createElement(MoreSettings, null),
-      /* @__PURE__ */ React35.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React35.createElement(LeaveRoom, null)),
-      /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React35.createElement(ChatToggle, null))
-    ),
-    /* @__PURE__ */ React35.createElement(Footer.Right, null, /* @__PURE__ */ React35.createElement(EmojiReaction, null), /* @__PURE__ */ React35.createElement(MetaActions_default, null), /* @__PURE__ */ React35.createElement(ChatToggle, null))
-  );
-};
-
-// src/Prebuilt/components/Footer.jsx
-var Footer2 = () => {
-  return isStreamingKit() ? /* @__PURE__ */ React36.createElement(StreamingFooter, null) : /* @__PURE__ */ React36.createElement(ConferencingFooter, null);
-};
-
-// src/Prebuilt/components/RoleChangeRequestModal.jsx
-init_define_process_env();
-import React37 from "react";
-import { selectRoleChangeRequest, useHMSActions as useHMSActions15, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
-var RoleChangeRequestModal = () => {
-  var _a, _b;
-  const hmsActions = useHMSActions15();
-  const isHeadless = useIsHeadless();
-  const roleChangeRequest = useHMSStore20(selectRoleChangeRequest);
-  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role) || isHeadless) {
-    return null;
-  }
-  return /* @__PURE__ */ React37.createElement(
-    RequestDialog,
-    {
-      title: "Role Change Request",
-      onOpenChange: (value) => !value && hmsActions.rejectChangeRole(roleChangeRequest),
-      body: `${(_a = roleChangeRequest == null ? void 0 : roleChangeRequest.requestedBy) == null ? void 0 : _a.name} has requested you to change your role to ${(_b = roleChangeRequest == null ? void 0 : roleChangeRequest.role) == null ? void 0 : _b.name}.`,
-      onAction: () => {
-        hmsActions.acceptChangeRole(roleChangeRequest);
-      },
-      actionText: "Accept"
-    }
-  );
-};
-
-// src/Prebuilt/components/conference.jsx
-var Conference = () => {
-  var _a, _b;
-  const navigate = useNavigation();
-  const { roomId, role } = useParams();
-  const isHeadless = useIsHeadless();
-  const roomState = useHMSStore21(selectRoomState);
-  const prevState = usePrevious(roomState);
-  const isConnectedToRoom = useHMSStore21(selectIsConnectedToRoom2);
-  const hmsActions = useHMSActions16();
-  const [hideControls, setHideControls] = useState17(false);
-  const dropdownList = useHMSStore21(selectAppData3(APP_DATA.dropdownList));
-  const skipPreview = useSkipPreview();
-  const { showPreview } = useHMSPrebuiltContext();
-  const authTokenInAppData = useAuthToken();
-  const headerRef = useRef7();
-  const footerRef = useRef7();
-  const dropdownListRef = useRef7();
-  const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
-  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const toggleControls = () => {
-    var _a2;
-    if (((_a2 = dropdownListRef.current) == null ? void 0 : _a2.length) === 0) {
-      setHideControls((value) => !value);
-    }
-  };
-  useEffect9(() => {
-    let timeout = null;
-    dropdownListRef.current = dropdownList || [];
-    if (dropdownListRef.current.length === 0) {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        if (dropdownListRef.current.length === 0) {
-          setHideControls(true);
-        }
-      }, 5e3);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [dropdownList, hideControls]);
-  useEffect9(() => {
-    if (!roomId) {
-      navigate(`/`);
-      return;
-    }
-    if (!showPreview) {
-      return;
-    }
-    if (!prevState && !(roomState === HMSRoomState.Connecting || roomState === HMSRoomState.Reconnecting || isConnectedToRoom)) {
-      if (role)
-        navigate(`/preview/${roomId || ""}/${role}`);
-      else
-        navigate(`/preview/${roomId || ""}`);
-    }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, showPreview]);
-  useEffect9(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !showPreview && roomState !== HMSRoomState.Connecting) {
-      hmsActions.join({
-        userName: "Test",
-        authToken: authTokenInAppData,
-        initEndpoint: define_process_env_default.REACT_APP_ENV ? `https://${define_process_env_default.REACT_APP_ENV}-init.100ms.live/init` : void 0,
-        initialSettings: {
-          isAudioMuted: skipPreview,
-          isVideoMuted: skipPreview,
-          speakerAutoSelectionBlacklist: ["Yeti Stereo Microphone"]
-        }
-      }).catch(console.error);
-    }
-  }, [authTokenInAppData, skipPreview, hmsActions, isConnectedToRoom, showPreview, roomState]);
-  useEffect9(() => {
-    if (isHeadless) {
-      hmsActions.ignoreMessageTypes(["chat", EMOJI_REACTION_TYPE]);
-    }
-  }, [isHeadless, hmsActions]);
-  if (!isConnectedToRoom) {
-    return /* @__PURE__ */ React38.createElement(FullPageProgress_default, { loadingText: "Joining..." });
-  }
-  if (isHLSStarted) {
-    return /* @__PURE__ */ React38.createElement(FullPageProgress_default, { loadingText: "Starting live stream..." });
-  }
-  return /* @__PURE__ */ React38.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !isHeadless && /* @__PURE__ */ React38.createElement(
-    Box,
-    {
-      ref: headerRef,
-      css: {
-        h: "$18",
-        transition: "margin 0.3s ease-in-out",
-        marginTop: performAutoHide ? `-${(_a = headerRef.current) == null ? void 0 : _a.clientHeight}px` : "none",
-        "@md": {
-          h: "$17"
-        }
-      },
-      "data-testid": "header"
-    },
-    /* @__PURE__ */ React38.createElement(Header, null)
-  ), /* @__PURE__ */ React38.createElement(
-    Box,
-    {
-      css: {
-        w: "100%",
-        flex: "1 1 0",
-        minHeight: 0,
-        paddingBottom: "env(safe-area-inset-bottom)"
-      },
-      id: "conferencing",
-      "data-testid": "conferencing",
-      onClick: toggleControls
-    },
-    /* @__PURE__ */ React38.createElement(ConferenceMainView, null)
-  ), !isHeadless && /* @__PURE__ */ React38.createElement(
-    Box,
-    {
-      ref: footerRef,
-      css: {
-        flexShrink: 0,
-        maxHeight: "$24",
-        transition: "margin 0.3s ease-in-out",
-        marginBottom: performAutoHide ? `-${(_b = footerRef.current) == null ? void 0 : _b.clientHeight}px` : void 0,
-        "@md": {
-          maxHeight: "unset"
-        }
-      },
-      "data-testid": "footer"
-    },
-    /* @__PURE__ */ React38.createElement(Footer2, null)
-  ), /* @__PURE__ */ React38.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React38.createElement(HLSFailureModal, null));
-};
-var conference_default = Conference;
-export {
-  conference_default as default
-};
-//# sourceMappingURL=conference-7QKOMJPP.js.map