@100mslive/roomkit-react 0.1.0

package/dist/conference-IDNRO4WK.js

@@ -0,0 +1,3812 @@
+import {
+  FirstPersonDisplay,
+  GridCenterView,
+  GridSidePaneView,
+  ScreenshareTile_default,
+  VideoList_default,
+  VideoTile_default,
+  useAppConfig
+} from "./chunk-7YUYZ64D.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,
+  ToastManager,
+  UserPreferencesKeys,
+  Video,
+  VideoTileStats,
+  arrayIntersection,
+  getResolution,
+  isScreenshareSupported,
+  isStreamingKit,
+  useAuthToken,
+  useDropdownList,
+  useDropdownSelection,
+  useFilteredRoles,
+  useHLSViewerRole,
+  useHMSPrebuiltContext,
+  useIsHeadless,
+  useIsSidepaneTypeOpen,
+  useNavigation,
+  usePDFAnnotator,
+  usePinnedTrack,
+  useSetAppDataByKey,
+  useSetUiSettings,
+  useSidepaneToggle,
+  useSkipPreview,
+  useTheme,
+  useUISettings,
+  useUrlToEmbed,
+  useUserPreferences,
+  useWaitingViewerRole,
+  useWhiteboardMetadata
+} from "./chunk-HCAGFNXW.js";
+import {
+  Loading,
+  useIsFeatureEnabled,
+  useRolePreference
+} from "./chunk-ULXGBUSC.js";
+import {
+  Box,
+  Flex,
+  Text
+} from "./chunk-XRJXE6UO.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-KYYP6ZVK.js";
+
+// src/Prebuilt/components/conference.jsx
+init_define_process_env();
+import React39, { 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 selectAppData4,
+  selectIsConnectedToRoom as selectIsConnectedToRoom2,
+  selectRoomState,
+  useHMSActions as useHMSActions15,
+  useHMSStore as useHMSStore21
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/layouts/mainView.jsx
+init_define_process_env();
+import React11, { Suspense, useEffect as useEffect5 } from "react";
+import {
+  selectIsConnectedToRoom,
+  selectLocalPeerRoleName as selectLocalPeerRoleName3,
+  selectPeerScreenSharing as selectPeerScreenSharing3,
+  selectPeerSharingAudio,
+  selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist3,
+  selectTemplateAppData,
+  useHMSActions as useHMSActions5,
+  useHMSStore as useHMSStore9
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/layouts/EmbedView.jsx
+init_define_process_env();
+import React5, { useCallback as useCallback2, useEffect, useMemo as useMemo2, useRef as useRef2, useState } 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 useHMSStore5,
+  useScreenShare
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/layouts/screenShareView.jsx
+init_define_process_env();
+import React4, { Fragment, useCallback, useMemo } from "react";
+import { useMedia } from "react-use";
+import {
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPeers,
+  selectPeerScreenSharing,
+  selectPeerSharingVideoPlaylist as selectPeerSharingVideoPlaylist2,
+  selectScreenShareByPeerID,
+  useHMSStore as useHMSStore4
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/Playlist/VideoPlayer.jsx
+init_define_process_env();
+import React2, { useRef } from "react";
+import { useFullscreen, useToggle } from "react-use";
+import screenfull from "screenfull";
+import {
+  selectVideoPlaylist as selectVideoPlaylist3,
+  selectVideoPlaylistAudioTrackByPeerID as selectVideoPlaylistAudioTrackByPeerID2,
+  selectVideoPlaylistVideoTrackByPeerID,
+  useHMSActions as useHMSActions3,
+  useHMSStore as useHMSStore3
+} from "@100mslive/react-sdk";
+import { CrossIcon, ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Playlist/PlaylistControls.jsx
+init_define_process_env();
+import React from "react";
+import {
+  HMSPlaylistType as HMSPlaylistType2,
+  selectAudioPlaylist as selectAudioPlaylist2,
+  selectAudioTrackVolume,
+  selectPeerSharingVideoPlaylist,
+  selectVideoPlaylist as selectVideoPlaylist2,
+  selectVideoPlaylistAudioTrackByPeerID,
+  useHMSActions as useHMSActions2,
+  useHMSStore as useHMSStore2
+} 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,
+  useHMSStore
+} from "@100mslive/react-sdk";
+var usePlaylist = (type) => {
+  const isAudioPlaylist = type === HMSPlaylistType.audio;
+  const selector = isAudioPlaylist ? selectAudioPlaylist : selectVideoPlaylist;
+  const active = useHMSStore(selector.selectedItem);
+  const selection = useHMSStore(selector.selection);
+  const playlist = useHMSStore(selector.list);
+  const hmsActions = useHMSActions();
+  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 = useHMSStore2(selectPlaylist.progress);
+  const hmsActions = useHMSActions2();
+  const playlistAction = type === HMSPlaylistType2.audio ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
+  if (!duration) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Slider,
+    {
+      step: 1,
+      value: [progress],
+      onValueChange: (e) => {
+        playlistAction.seekTo(e[0] * 0.01 * duration);
+      }
+    }
+  );
+};
+var PlaylistActive = ({ type, onToggle }) => {
+  var _a, _b;
+  const isAudioPlaylist = type === HMSPlaylistType2.audio;
+  const selector = isAudioPlaylist ? selectAudioPlaylist2 : selectVideoPlaylist2;
+  const active = useHMSStore2(selector.selectedItem);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Box, { css: { mt: "$8" } }, /* @__PURE__ */ React.createElement(Flex, { justify: "between", css: { w: "100%" } }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { variant: "md" }, active.name), ((_a = active.metadata) == null ? void 0 : _a.description) && /* @__PURE__ */ React.createElement(Text, { variant: "xs" }, (_b = active.metadata) == null ? void 0 : _b.description)), /* @__PURE__ */ React.createElement(IconButton, { onClick: onToggle, css: { alignSelf: "center" }, "data-testid": "playlist_collapse_btn" }, /* @__PURE__ */ React.createElement(PlaylistIcon, null))));
+};
+var Controls = ({ type, css = {} }) => {
+  const { active, hasNext, hasPrevious, actions } = usePlaylist(type);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Flex, { justify: "center", css }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      disabled: !hasPrevious,
+      onClick: () => {
+        actions.playPrevious();
+      },
+      "data-testid": "playlist_prev_btn"
+    },
+    /* @__PURE__ */ React.createElement(PrevIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      onClick: () => {
+        active.playing ? actions.pause() : actions.play(active.id);
+      },
+      "data-testid": "playlist_play_pause_btn"
+    },
+    active.playing ? /* @__PURE__ */ React.createElement(PauseIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React.createElement(PlayIcon, { width: 32, height: 32 })
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      disabled: !hasNext,
+      onClick: () => {
+        actions.playNext();
+      },
+      "data-testid": "playlist_next_btn"
+    },
+    /* @__PURE__ */ React.createElement(NextIcon, null)
+  ));
+};
+var VolumeControl = () => {
+  const hmsActions = useHMSActions2();
+  const volume = useHMSStore2(selectVideoPlaylist2.volume);
+  const active = useHMSStore2(selectVideoPlaylist2.selectedItem);
+  const peerSharingPlaylist = useHMSStore2(selectPeerSharingVideoPlaylist);
+  const audioTrack = useHMSStore2(selectVideoPlaylistAudioTrackByPeerID(peerSharingPlaylist == null ? void 0 : peerSharingPlaylist.id));
+  const audioTrackVolume = useHMSStore2(selectAudioTrackVolume(audioTrack == null ? void 0 : audioTrack.id));
+  const sliderVolume = active ? volume : audioTrackVolume;
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { color: "$white" } }, /* @__PURE__ */ React.createElement(SpeakerIcon, null), /* @__PURE__ */ React.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 AudioPlaylistControls = ({ onToggle }) => {
+  const { active } = usePlaylist(HMSPlaylistType2.audio);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      css: {
+        p: "$8",
+        borderTop: "1px solid $borderLight",
+        bg: "$menuBg"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Controls, { type: HMSPlaylistType2.audio }),
+    /* @__PURE__ */ React.createElement(Progress, { type: HMSPlaylistType2.audio, duration: active.duration }),
+    /* @__PURE__ */ React.createElement(PlaylistActive, { type: HMSPlaylistType2.audio, onToggle })
+  );
+};
+var VideoPlaylistControls = ({ children }) => {
+  const { active } = usePlaylist(HMSPlaylistType2.video);
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      css: {
+        p: "$8",
+        mt: "-$24",
+        w: "100%",
+        zIndex: 1,
+        "@lg": {
+          mt: 0,
+          p: "$6"
+        }
+      }
+    },
+    active && /* @__PURE__ */ React.createElement(Progress, { type: HMSPlaylistType2.video, duration: active.duration }),
+    /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "between" }, /* @__PURE__ */ React.createElement(VolumeControl, null), active && /* @__PURE__ */ React.createElement(Controls, { css: { flex: "1 1 0" } }), children)
+  );
+};
+
+// src/Prebuilt/components/Playlist/VideoPlayer.jsx
+var VideoPlayer = React2.memo(({ peerId }) => {
+  const videoTrack = useHMSStore3(selectVideoPlaylistVideoTrackByPeerID(peerId));
+  const audioTrack = useHMSStore3(selectVideoPlaylistAudioTrackByPeerID2(peerId));
+  const active = useHMSStore3(selectVideoPlaylist3.selectedItem);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const hmsActions = useHMSActions3();
+  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__ */ React2.createElement(Flex, { direction: "column", justify: "center", css: { w: "100%", h: "100%" }, ref }, active && /* @__PURE__ */ React2.createElement(
+    Flex,
+    {
+      justify: "between",
+      align: "center",
+      css: {
+        bg: "$menuBg",
+        p: "$2 $2 $2 $6",
+        borderTopLeftRadius: "$1",
+        borderTopRightRadius: "$1"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(Text, { css: { color: "$textPrimary" } }, active.name),
+    /* @__PURE__ */ React2.createElement(
+      IconButton,
+      {
+        css: {
+          color: "$white"
+        },
+        onClick: () => {
+          hmsActions.videoPlaylist.stop();
+        },
+        "data-testid": "videoplaylist_cross_btn"
+      },
+      /* @__PURE__ */ React2.createElement(CrossIcon, null)
+    )
+  ), showStatsOnTiles ? /* @__PURE__ */ React2.createElement(Box, { css: { "& > div": { top: "$14", left: "$8" } } }, /* @__PURE__ */ React2.createElement(
+    VideoTileStats,
+    {
+      audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
+      videoTrackID: videoTrack == null ? void 0 : videoTrack.id,
+      peerID: peerId,
+      isLocal: active
+    }
+  )) : null, /* @__PURE__ */ React2.createElement(
+    Video,
+    {
+      trackId: videoTrack == null ? void 0 : videoTrack.id,
+      attach: !isAudioOnly,
+      css: {
+        objectFit: "contain",
+        h: "auto",
+        r: "$1",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      }
+    }
+  ), /* @__PURE__ */ React2.createElement(VideoPlaylistControls, null, screenfull.enabled && /* @__PURE__ */ React2.createElement(
+    IconButton,
+    {
+      onClick: () => toggle(),
+      css: {
+        color: "$white",
+        height: "max-content",
+        alignSelf: "center",
+        cursor: "pointer"
+      }
+    },
+    isFullscreen ? /* @__PURE__ */ React2.createElement(ShrinkIcon, null) : /* @__PURE__ */ React2.createElement(ExpandIcon, null)
+  )));
+});
+
+// src/Prebuilt/components/ScreenshareDisplay.jsx
+init_define_process_env();
+import React3 from "react";
+import { useHMSActions as useHMSActions4 } from "@100mslive/react-sdk";
+import { CrossIcon as CrossIcon2, ShareScreenIcon } from "@100mslive/react-icons";
+var ScreenshareDisplay = () => {
+  const hmsActions = useHMSActions4();
+  return /* @__PURE__ */ React3.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: "$textPrimary",
+        bg: "$surfaceDefault",
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(ShareScreenIcon, { width: 48, height: 48 }),
+    /* @__PURE__ */ React3.createElement(Text, { variant: "h5", css: { m: "$8 0" } }, "You are sharing your screen"),
+    /* @__PURE__ */ React3.createElement(
+      Button,
+      {
+        variant: "danger",
+        onClick: () => __async(void 0, null, function* () {
+          yield hmsActions.setScreenShareEnabled(false);
+        }),
+        "data-testid": "stop_screen_share_btn"
+      },
+      /* @__PURE__ */ React3.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 = useHMSStore4(selectPeers);
+  const localPeerID = useHMSStore4(selectLocalPeerID);
+  const localPeerRole = useHMSStore4(selectLocalPeerRoleName);
+  const peerPresenting = useHMSStore4(selectPeerScreenSharing);
+  const peerSharingPlaylist = useHMSStore4(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__ */ React4.createElement(
+    Flex,
+    {
+      css: {
+        size: "100%"
+      },
+      direction: showSidebarInBottom ? "column" : "row"
+    },
+    /* @__PURE__ */ React4.createElement(
+      ScreenShareComponent,
+      {
+        amIPresenting,
+        peerPresenting,
+        peerSharingPlaylist
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      Flex,
+      {
+        direction: { "@initial": "column", "@lg": "row" },
+        css: {
+          overflow: "hidden",
+          p: "$4 $8",
+          flex: "0 0 20%",
+          "@xl": {
+            flex: "1 1 0"
+          }
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        SidePane,
+        {
+          showSidebarInBottom,
+          peerScreenSharing: peerPresenting,
+          isPresenterInSmallTiles: showPresenterInSmallTile,
+          smallTilePeers,
+          totalPeers: peers.length
+        }
+      )
+    )
+  );
+};
+var SidePane = ({
+  isPresenterInSmallTiles,
+  peerScreenSharing,
+  // the peer who is screensharing
+  smallTilePeers,
+  showSidebarInBottom
+}) => {
+  const shouldShowScreenFn = useCallback(
+    (peer) => peerScreenSharing && peer.id !== peerScreenSharing.id,
+    [peerScreenSharing]
+  );
+  return /* @__PURE__ */ React4.createElement(Fragment, null, !isPresenterInSmallTiles && /* @__PURE__ */ React4.createElement(LargeTilePeerView, { peerScreenSharing }), /* @__PURE__ */ React4.createElement(
+    SmallTilePeersView,
+    {
+      showSidebarInBottom,
+      smallTilePeers,
+      shouldShowScreenFn
+    }
+  ));
+};
+var ScreenShareComponent = ({ amIPresenting, peerPresenting, peerSharingPlaylist }) => {
+  const screenshareTrack = useHMSStore4(selectScreenShareByPeerID(peerPresenting == null ? void 0 : peerPresenting.id));
+  if (peerSharingPlaylist) {
+    return /* @__PURE__ */ React4.createElement(
+      Box,
+      {
+        css: {
+          mx: "$8",
+          flex: "3 1 0",
+          "@xl": {
+            flex: "2 1 0",
+            display: "flex",
+            alignItems: "center"
+          }
+        }
+      },
+      /* @__PURE__ */ React4.createElement(VideoPlayer, { peerId: peerSharingPlaylist.id })
+    );
+  }
+  return /* @__PURE__ */ React4.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__ */ React4.createElement(Box, { css: { objectFit: "contain", h: "100%" } }, /* @__PURE__ */ React4.createElement(ScreenshareDisplay, null)) : /* @__PURE__ */ React4.createElement(ScreenshareTile_default, { peerId: peerPresenting == null ? void 0 : peerPresenting.id }))
+  );
+};
+var SmallTilePeersView = ({ smallTilePeers, shouldShowScreenFn, showSidebarInBottom }) => {
+  return /* @__PURE__ */ React4.createElement(
+    Flex,
+    {
+      css: {
+        flex: "2 1 0"
+      }
+    },
+    smallTilePeers && smallTilePeers.length > 0 && /* @__PURE__ */ React4.createElement(
+      VideoList_default,
+      {
+        peers: smallTilePeers,
+        maxColCount: showSidebarInBottom ? void 0 : 1,
+        maxRowCount: showSidebarInBottom ? 1 : void 0,
+        includeScreenShareForPeer: shouldShowScreenFn
+      }
+    )
+  );
+};
+var LargeTilePeerView = ({ peerScreenSharing, showStatsOnTiles }) => {
+  return peerScreenSharing ? /* @__PURE__ */ React4.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__ */ React4.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__ */ React5.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React5.createElement(EmbedComponent, null));
+};
+var EmbebScreenShareView = ({ children }) => {
+  var _a;
+  const peers = useHMSStore5(selectPeers2);
+  const mediaQueryLg = config.media.xl;
+  const showSidebarInBottom = useMedia2(mediaQueryLg);
+  const localPeerID = useHMSStore5(selectLocalPeerID2);
+  const localPeerRole = useHMSStore5(selectLocalPeerRoleName2);
+  const peerPresenting = useHMSStore5(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__ */ React5.createElement(Flex, { css: { size: "100%" }, direction: showSidebarInBottom ? "column" : "row" }, children, /* @__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 EmbedComponent = () => {
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler);
+  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
+  const [wasScreenShared, setWasScreenShared] = useState(false);
+  const screenShareAttemptInProgress = useRef2(false);
+  const src = embedConfig.url;
+  const iframeRef = useRef2();
+  const resetEmbedConfig = useCallback2(() => {
+    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__ */ React5.createElement(
+    Box,
+    {
+      ref: iframeRef,
+      css: {
+        mx: "$8",
+        flex: "3 1 0",
+        "@lg": {
+          flex: "2 1 0",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    },
+    /* @__PURE__ */ React5.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 React6, { 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 useHMSStore6 } 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 = useHMSStore6(selectRemotePeers);
+  const localPeer = useHMSStore6(selectLocalPeer);
+  const isMobile = useMedia3(config.media.md);
+  const isLandscape = useMedia3(config.media.ls);
+  const roleMap = useHMSStore6(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__ */ React6.createElement(Fragment2, null, /* @__PURE__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.createElement(FirstPersonDisplay, null)
+    ),
+    sidepanePeers.length > 0 && /* @__PURE__ */ React6.createElement(
+      Flex,
+      {
+        align: "center",
+        justify: "center",
+        css: {
+          size: "100%",
+          gap: "$4",
+          flexFlow: "row wrap",
+          placeContent: "center"
+        }
+      },
+      (hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => /* @__PURE__ */ React6.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__ */ React6.createElement(InsetTile, { roleMap, isMobile, isLandscape }));
+}
+var InsetTile = ({ isMobile, roleMap, isLandscape }) => {
+  const localPeer = useHMSStore6(selectLocalPeer);
+  const sidepane = useHMSStore6(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__ */ React6.createElement(Draggable, { bounds: "parent", nodeRef }, /* @__PURE__ */ React6.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__ */ React6.createElement(
+      VideoTile_default,
+      {
+        peerId: localPeer.id,
+        trackid: localPeer.videoTrack,
+        rootCSS: {
+          size: "100%",
+          padding: 0
+        },
+        containerCSS: {
+          bg: "$surfaceDefault"
+        },
+        width,
+        height
+      }
+    )
+  ));
+};
+
+// src/Prebuilt/layouts/mainGridView.jsx
+init_define_process_env();
+import React8, { useEffect as useEffect3, useState as useState2 } from "react";
+import {
+  selectLocalPeerID as selectLocalPeerID3,
+  selectLocalPeerRole,
+  selectPeers as selectPeers3,
+  selectPeersByRoles,
+  selectRolesMap as selectRolesMap2,
+  useHMSStore as useHMSStore8
+} from "@100mslive/react-sdk";
+
+// src/Prebuilt/layouts/NonPublisherView.jsx
+init_define_process_env();
+import React7 from "react";
+import { ShieldAlertIcon } from "@100mslive/react-icons";
+var NonPublisherView = React7.memo(({ message }) => {
+  return /* @__PURE__ */ React7.createElement(
+    Box,
+    {
+      css: {
+        overflow: "hidden",
+        w: "96%",
+        maxWidth: "96%",
+        h: "100%",
+        m: "auto",
+        background: "$surfaceDefault",
+        borderRadius: "$3"
+      },
+      "data-testid": "non_publisher_view"
+    },
+    /* @__PURE__ */ React7.createElement(
+      Flex,
+      {
+        align: "center",
+        direction: "column",
+        css: {
+          w: "$96",
+          textAlign: "center",
+          margin: "auto",
+          h: "100%",
+          justifyContent: "center",
+          gap: "$8"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(ShieldAlertIcon, { color: "#C3D0E5", width: "80px", height: "80px" }),
+      /* @__PURE__ */ React7.createElement(
+        Flex,
+        {
+          direction: "column",
+          css: {
+            w: "$80",
+            p: "$1",
+            gap: "$4"
+          }
+        },
+        /* @__PURE__ */ React7.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, message),
+        /* @__PURE__ */ React7.createElement(Text, { color: "$textMedEmp", 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 useHMSStore7 } from "@100mslive/react-sdk";
+var useAppLayout = (path) => {
+  return useHMSStore7(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 = useHMSStore8(selectPeers3);
+  const roles = useHMSStore8(selectRolesMap2);
+  const localPeerId = useHMSStore8(selectLocalPeerID3);
+  const centerPeers = peers.filter((peer) => centerRoles.includes(peer.roleName));
+  const sidebarPeers = peers.filter((peer) => sidepaneRoles.includes(peer.roleName));
+  const localRole = useHMSStore8(selectLocalPeerRole);
+  const peersByRoles = useHMSStore8(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
+  const [placeholder, setPlaceholder] = useState2("");
+  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__ */ React8.createElement(
+    Flex,
+    {
+      css: {
+        size: "100%"
+      },
+      direction: {
+        "@initial": "row",
+        "@md": "column"
+      }
+    },
+    placeholder ? /* @__PURE__ */ React8.createElement(NonPublisherView, { message: placeholder }) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+      GridCenterView,
+      {
+        peers: showSidePane ? centerPeers : peers,
+        maxTileCount,
+        allowRemoteMute: false,
+        hideSidePane: !showSidePane,
+        totalPeers: peers.length
+      }
+    ), showSidePane && /* @__PURE__ */ React8.createElement(GridSidePaneView, { peers: sidebarPeers, totalPeers: peers.length }))
+  );
+};
+
+// src/Prebuilt/layouts/PDFView.jsx
+init_define_process_env();
+import React9, { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import { throwErrorHandler as throwErrorHandler2, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
+var PDFView = () => {
+  return /* @__PURE__ */ React9.createElement(EmbebScreenShareView, null, /* @__PURE__ */ React9.createElement(PDFEmbedComponent, null));
+};
+var PDFEmbedComponent = () => {
+  const ref = useRef4();
+  const themeType = useTheme().themeType;
+  const [isPDFLoaded, setIsPDFLoaded] = useState3(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] = useState3(false);
+  const screenShareAttemptInProgress = useRef4(false);
+  const iframeRef = useRef4();
+  const resetEmbedConfig = useCallback3(() => {
+    setPDFConfig({ state: false });
+  }, [setPDFConfig]);
+  useEffect4(() => {
+    if (isPDFLoaded && ref.current) {
+      ref.current.contentWindow.postMessage(
+        {
+          theme: themeType === "dark" /* 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__ */ React9.createElement(
+    Box,
+    {
+      ref: iframeRef,
+      css: {
+        mx: "$8",
+        flex: "3 1 0",
+        "@lg": {
+          flex: "2 1 0",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    },
+    /* @__PURE__ */ React9.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 === "dark" /* dark */ ? 2 : 1
+                },
+                "*"
+              );
+              setIsPDFLoaded(true);
+            }, 1e3);
+          }
+        }
+      }
+    )
+  );
+};
+
+// src/Prebuilt/layouts/WaitingView.jsx
+init_define_process_env();
+import React10 from "react";
+import { ColoredTimeIcon } from "@100mslive/react-icons";
+var WaitingView = React10.memo(() => {
+  return /* @__PURE__ */ React10.createElement(
+    Box,
+    {
+      css: {
+        overflow: "hidden",
+        w: "96%",
+        maxWidth: "96%",
+        h: "100%",
+        m: "auto",
+        background: "$surfaceDefault",
+        borderRadius: "$3"
+      },
+      "data-testid": "waiting_view"
+    },
+    /* @__PURE__ */ React10.createElement(
+      Flex,
+      {
+        align: "center",
+        direction: "column",
+        css: {
+          w: "$96",
+          textAlign: "center",
+          margin: "auto",
+          h: "100%",
+          justifyContent: "center",
+          gap: "$8"
+        }
+      },
+      /* @__PURE__ */ React10.createElement(ColoredTimeIcon, { width: "80px", height: "80px" }),
+      /* @__PURE__ */ React10.createElement(
+        Flex,
+        {
+          direction: "column",
+          css: {
+            w: "$80",
+            p: "$1",
+            gap: "$4"
+          }
+        },
+        /* @__PURE__ */ React10.createElement(Text, { color: "white", variant: "h6", css: { "@md": { fontSize: "$md" } } }, "Please wait"),
+        /* @__PURE__ */ React10.createElement(Text, { color: "$textMedEmp", 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 = React11.lazy(() => import("./HLSView-3RDXRV7Y.js"));
+var ActiveSpeakerView = React11.lazy(() => import("./ActiveSpeakerView-H3VYXANB.js"));
+var PinnedTrackView = React11.lazy(() => import("./PinnedTrackView-453PELNU.js"));
+var ConferenceMainView = () => {
+  const localPeerRole = useHMSStore9(selectLocalPeerRoleName3);
+  const pinnedTrack = usePinnedTrack();
+  const peerSharing = useHMSStore9(selectPeerScreenSharing3);
+  const peerSharingAudio = useHMSStore9(selectPeerSharingAudio);
+  const peerSharingPlaylist = useHMSStore9(selectPeerSharingVideoPlaylist3);
+  const { whiteboardOwner: whiteboardShared } = useWhiteboardMetadata();
+  const isConnected = useHMSStore9(selectIsConnectedToRoom);
+  const uiMode = useHMSStore9(selectTemplateAppData).uiMode;
+  const hmsActions = useHMSActions5();
+  const isHeadless = useIsHeadless();
+  const headlessUIMode = useAppConfig("headlessConfig", "uiMode");
+  const { uiViewMode, isAudioOnly } = useUISettings();
+  const hlsViewerRole = useHLSViewerRole();
+  const waitingViewerRole = useWaitingViewerRole();
+  const urlToIframe = useUrlToEmbed();
+  const pdfAnntatorActive = usePDFAnnotator();
+  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);
+    }
+    hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
+  }, [isConnected, hmsActions]);
+  if (!localPeerRole) {
+    return null;
+  }
+  let ViewComponent;
+  if (localPeerRole === hlsViewerRole) {
+    ViewComponent = HLSView;
+  } else if (localPeerRole === waitingViewerRole) {
+    ViewComponent = WaitingView;
+  } else if (pdfAnntatorActive) {
+    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__ */ React11.createElement(Suspense, { fallback: /* @__PURE__ */ React11.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React11.createElement(
+    Flex,
+    {
+      css: {
+        size: "100%",
+        position: "relative"
+      }
+    },
+    /* @__PURE__ */ React11.createElement(ViewComponent, null),
+    /* @__PURE__ */ React11.createElement(SidePane_default, null)
+  ));
+};
+
+// src/Prebuilt/components/Footer.jsx
+init_define_process_env();
+import React37 from "react";
+
+// src/Prebuilt/components/Footer/ConferencingFooter.jsx
+init_define_process_env();
+import React35, { Fragment as Fragment7, Suspense as Suspense2, useState as useState16 } from "react";
+import { useMedia as useMedia6 } from "react-use";
+import { HMSPlaylistType as HMSPlaylistType4, selectIsAllowedToPublish as selectIsAllowedToPublish4, useHMSStore as useHMSStore19, useScreenShare as useScreenShare5 } from "@100mslive/react-sdk";
+import { MusicIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Playlist/Playlist.jsx
+init_define_process_env();
+import React13, { Fragment as Fragment3, useState as useState4 } from "react";
+import { HMSPlaylistType as HMSPlaylistType3, selectIsAllowedToPublish, useHMSStore as useHMSStore10 } from "@100mslive/react-sdk";
+import { AudioPlayerIcon, CrossIcon as CrossIcon3, VideoPlayerIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Playlist/PlaylistItem.jsx
+init_define_process_env();
+import React12 from "react";
+function formatDuration(duration) {
+  if (!duration) {
+    return "";
+  }
+  let mins = Math.floor(duration / 60);
+  if (mins < 10) {
+    mins = `0${String(mins)}`;
+  }
+  let secs = Math.floor(duration % 60);
+  if (secs < 10) {
+    secs = `0${String(secs)}`;
+  }
+  return `${mins}:${secs}`;
+}
+var PlaylistItem = React12.memo(({ name, metadata, duration, selected, onClick }) => {
+  return /* @__PURE__ */ React12.createElement(
+    Dropdown.Item,
+    {
+      css: {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        h: "$18",
+        p: "$8",
+        "&:hover": {
+          cursor: "pointer",
+          bg: "$menuBg"
+        },
+        "&:focus-visible": {
+          bg: "$menuBg"
+        }
+      },
+      onClick
+    },
+    /* @__PURE__ */ React12.createElement(Flex, { align: "center", justify: "between", css: { width: "100%", minHeight: 0 } }, /* @__PURE__ */ React12.createElement(Text, { variant: "md", css: { color: selected ? "$brandDefault" : "$textPrimary" } }, name), /* @__PURE__ */ React12.createElement(Text, { variant: "xs" }, formatDuration(duration))),
+    (metadata == null ? void 0 : metadata.description) && /* @__PURE__ */ React12.createElement(Text, { variant: "xs", css: { mt: "$4" } }, metadata == null ? void 0 : metadata.description)
+  );
+});
+
+// src/Prebuilt/components/Playlist/Playlist.jsx
+var BrowseAndPlayFromLocal = ({ type, actions }) => {
+  return /* @__PURE__ */ React13.createElement(Fragment3, null, /* @__PURE__ */ React13.createElement(Text, { as: "label", htmlFor: `${type}PlaylistBrowse`, variant: "sm", css: { cursor: "pointer", mr: "$2" } }, "Browse"), /* @__PURE__ */ React13.createElement(
+    "input",
+    {
+      type: "file",
+      id: `${type}PlaylistBrowse`,
+      accept: type === HMSPlaylistType3.audio ? "audio/*" : "video/*",
+      onChange: (e) => {
+        const file = e.target.files[0];
+        const id = file.lastModified;
+        actions.setList([
+          {
+            type,
+            id,
+            name: file.name,
+            url: URL.createObjectURL(file)
+          }
+        ]);
+        actions.play(id);
+      },
+      style: { display: "none" }
+    }
+  ));
+};
+var Playlist = ({ type }) => {
+  const isAudioPlaylist = type === HMSPlaylistType3.audio;
+  const { active, list: playlist, actions } = usePlaylist(type);
+  const [open, setOpen] = useState4(false);
+  const [collapse, setCollapse] = useState4(false);
+  const isAllowedToPublish = useHMSStore10(selectIsAllowedToPublish);
+  const isFeatureEnabled = useIsFeatureEnabled(
+    isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST
+  );
+  if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ React13.createElement(Fragment3, null, /* @__PURE__ */ React13.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React13.createElement(Dropdown.Trigger, { asChild: true, "data-testid": type === HMSPlaylistType3.audio ? "audio_playlist" : "video_playlist" }, /* @__PURE__ */ React13.createElement(IconButton_default, { active: !active }, /* @__PURE__ */ React13.createElement(Tooltip, { title: isAudioPlaylist ? "Audio Playlist" : "Video Playlist" }, /* @__PURE__ */ React13.createElement(Box, null, isAudioPlaylist ? /* @__PURE__ */ React13.createElement(AudioPlayerIcon, null) : /* @__PURE__ */ React13.createElement(VideoPlayerIcon, null))))), /* @__PURE__ */ React13.createElement(
+    Dropdown.Content,
+    {
+      sideOffset: 5,
+      align: "center",
+      css: {
+        maxHeight: "unset",
+        width: "$60",
+        p: "$0",
+        bg: "$bgSecondary",
+        border: "1px solid $menuBg"
+      }
+    },
+    /* @__PURE__ */ React13.createElement(
+      Flex,
+      {
+        align: "center",
+        css: {
+          p: "$4 $8",
+          borderBottom: "1px solid $borderLight",
+          bg: "$menuBg"
+        }
+      },
+      /* @__PURE__ */ React13.createElement(Text, { variant: "md", css: { flex: "1 1 0" } }, isAudioPlaylist ? "Audio Player" : "Video Playlist"),
+      /* @__PURE__ */ React13.createElement(BrowseAndPlayFromLocal, { type, actions }),
+      /* @__PURE__ */ React13.createElement(
+        IconButton_default,
+        {
+          css: { mr: "-$4" },
+          onClick: () => __async(void 0, null, function* () {
+            if (active) {
+              yield actions.stop();
+            }
+            setOpen(false);
+            setCollapse(false);
+          })
+        },
+        /* @__PURE__ */ React13.createElement(CrossIcon3, { width: 24, height: 24 })
+      )
+    ),
+    !collapse && /* @__PURE__ */ React13.createElement(Box, { css: { maxHeight: "$96", overflowY: "auto" } }, playlist.map((playlistItem) => {
+      return /* @__PURE__ */ React13.createElement(
+        PlaylistItem,
+        __spreadProps(__spreadValues({
+          key: playlistItem.id
+        }, playlistItem), {
+          onClick: (e) => __async(void 0, null, function* () {
+            e.preventDefault();
+            try {
+              yield actions.play(playlistItem.id);
+            } catch (e2) {
+            }
+            if (!isAudioPlaylist) {
+              setOpen(false);
+            }
+          })
+        })
+      );
+    })),
+    isAudioPlaylist && /* @__PURE__ */ React13.createElement(AudioPlaylistControls, { onToggle: () => setCollapse((value) => !value) })
+  )));
+};
+
+// src/Prebuilt/components/MoreSettings/MoreSettings.jsx
+init_define_process_env();
+import React22, { Fragment as Fragment4, useState as useState12 } from "react";
+import { useMedia as useMedia5 } from "react-use";
+import Hls from "hls.js";
+import {
+  selectAppData as selectAppData3,
+  selectIsAllowedToPublish as selectIsAllowedToPublish2,
+  selectLocalPeerID as selectLocalPeerID6,
+  selectLocalPeerRoleName as selectLocalPeerRoleName5,
+  selectPermissions as selectPermissions3,
+  useHMSActions as useHMSActions11,
+  useHMSStore as useHMSStore15,
+  useRecordingStreaming as useRecordingStreaming2
+} 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 React14, { useState as useState5 } from "react";
+import {
+  selectAppData as selectAppData2,
+  selectPermissions,
+  useHMSActions as useHMSActions6,
+  useHMSStore as useHMSStore11,
+  useRecordingStreaming
+} from "@100mslive/react-sdk";
+import { AlertTriangleIcon } from "@100mslive/react-icons";
+var StartRecording = ({ open, onOpenChange }) => {
+  const permissions = useHMSStore11(selectPermissions);
+  const recordingUrl = useHMSStore11(selectAppData2(APP_DATA.recordingUrl));
+  const [resolution, setResolution] = useState5(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+  const hmsActions = useHMSActions6();
+  if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
+    return null;
+  }
+  if (isBrowserRecordingOn) {
+    return /* @__PURE__ */ React14.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(
+      Dialog.Content,
+      {
+        css: {
+          width: "min(400px,80%)",
+          p: "$10",
+          bg: "#201617"
+        }
+      },
+      /* @__PURE__ */ React14.createElement(Dialog.Title, null, /* @__PURE__ */ React14.createElement(Flex, { gap: 2, css: { c: "$error" } }, /* @__PURE__ */ React14.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React14.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
+      /* @__PURE__ */ React14.createElement(Text, { variant: "sm", css: { c: "$textMedEmp", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
+      /* @__PURE__ */ React14.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React14.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React14.createElement(Button, { outlined: true, css: { borderColor: "$secondaryLight", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React14.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__ */ React14.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React14.createElement(Dialog.Title, null, /* @__PURE__ */ React14.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React14.createElement(
+    ResolutionInput,
+    {
+      testId: "recording_resolution_mobile",
+      css: { flexDirection: "column", alignItems: "start" },
+      onResolutionChange: setResolution
+    }
+  ), /* @__PURE__ */ React14.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({
+            meetingURL: recordingUrl,
+            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 React15, { 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__ */ React15.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React15.createElement(Dialog.Portal, null, /* @__PURE__ */ React15.createElement(Dialog.Overlay, null), /* @__PURE__ */ React15.createElement(
+    Dialog.Content,
+    {
+      css: {
+        width: "min(500px, 95%)",
+        maxHeight: "100%",
+        overflowY: "auto"
+      }
+    },
+    /* @__PURE__ */ React15.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React15.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React15.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React15.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React15.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
+    /* @__PURE__ */ React15.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
+    /* @__PURE__ */ React15.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React15.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React15.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
+    /* @__PURE__ */ React15.createElement(
+      Flex,
+      {
+        direction: "column",
+        css: {
+          mb: "$12",
+          position: "relative",
+          minWidth: 0
+        }
+      },
+      /* @__PURE__ */ React15.createElement(Label, { variant: "body2" }, "Stats For"),
+      /* @__PURE__ */ React15.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React15.createElement(
+        DialogDropdownTrigger,
+        {
+          title: selectedStat.label || "Select Stats",
+          css: { mt: "$4" },
+          titleCSS: { mx: 0 },
+          open,
+          ref
+        }
+      ), /* @__PURE__ */ React15.createElement(Dropdown.Portal, null, /* @__PURE__ */ React15.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__ */ React15.createElement(
+          Dropdown.Item,
+          {
+            key: `${option.id}-${option.layer || ""}`,
+            onClick: () => {
+              setSelectedStat(option);
+            },
+            css: {
+              px: "$9",
+              bg: isSelected ? selectionBg : void 0,
+              c: isSelected ? "$white" : "$textPrimary"
+            }
+          },
+          option.label
+        );
+      }))))
+    ),
+    selectedStat.id === "local-peer" ? /* @__PURE__ */ React15.createElement(LocalPeerStats, null) : /* @__PURE__ */ React15.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__ */ React15.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(
+    StatsRow,
+    {
+      label: "Available Outgoing Bitrate",
+      value: formatBytes((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
+    }
+  ), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React15.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__ */ React15.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React15.createElement(
+    StatsRow,
+    {
+      label: inbound ? "Bytes Received" : "Bytes Sent",
+      value: formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)
+    }
+  ), stats.kind === "video" && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React15.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React15.createElement(StatsRow, { label: "Round Trip Time", value: stats.roundTripTime ? `${stats.roundTripTime * 1e3} ms` : "-" }));
+};
+var StatsRow = React15.memo(({ label, value }) => /* @__PURE__ */ React15.createElement(Box, { css: { bg: "$surfaceLight", w: "calc(50% - $6)", p: "$8", r: "$3" } }, /* @__PURE__ */ React15.createElement(
+  Text,
+  {
+    variant: "overline",
+    css: {
+      fontWeight: "$semiBold",
+      color: "$textMedEmp",
+      textTransform: "uppercase"
+    }
+  },
+  label,
+  " "
+), /* @__PURE__ */ React15.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$textHighEmp" } }, 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 React16, { useCallback as useCallback4, useRef as useRef6, useState as useState7 } from "react";
+import { useHMSActions as useHMSActions7 } 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 = useHMSActions7();
+  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 = useCallback4(() => __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__ */ React16.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React16.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React16.createElement(
+    Dropdown.Root,
+    {
+      open: bulkRoleDialog,
+      onOpenChange: (value) => {
+        if (value) {
+          setBulkRoleDialog(value);
+        }
+      },
+      modal: false
+    },
+    /* @__PURE__ */ React16.createElement(
+      DialogDropdownTrigger,
+      {
+        ref,
+        title: selectedBulkRole.length === 0 ? "Select Multiple Roles" : selectedBulkRole.toString(),
+        css: {
+          w: "70%",
+          p: "$8"
+        },
+        open: bulkRoleDialog
+      }
+    ),
+    /* @__PURE__ */ React16.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__ */ React16.createElement(
+          Dropdown.CheckboxItem,
+          {
+            key: role,
+            checked: selectedBulkRole.includes(role),
+            onCheckedChange: (value) => {
+              setBulkRole((selection) => {
+                return value ? [...selection, role] : selection.filter((selectedRole2) => selectedRole2 !== role);
+              });
+              setErrorMessage("");
+            }
+          },
+          /* @__PURE__ */ React16.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React16.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React16.createElement(CheckIcon, { width: 16, height: 16 }))),
+          role
+        );
+      })
+    )
+  )), /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, null, "To Role: "), /* @__PURE__ */ React16.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React16.createElement(
+    DialogDropdownTrigger,
+    {
+      ref: roleRef,
+      title: selectedRole || "Select Role",
+      css: {
+        w: "70%",
+        p: "$8"
+      },
+      open: roleDialog
+    }
+  ), /* @__PURE__ */ React16.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
+    return /* @__PURE__ */ React16.createElement(
+      Dropdown.Item,
+      {
+        key: role,
+        onSelect: () => {
+          setRole(role);
+          setErrorMessage("");
+        }
+      },
+      role
+    );
+  })))), /* @__PURE__ */ React16.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React16.createElement(Flex, { gap: 2, css: { c: "$error", w: "70%", ml: "auto" } }, /* @__PURE__ */ React16.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React16.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React16.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React16.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React16.createElement(Loading, { css: { color: "$textSecondary" } }), "Apply"))));
+};
+
+// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
+init_define_process_env();
+import React17, { useState as useState8 } from "react";
+import { selectLocalPeerName, useHMSActions as useHMSActions8, useHMSStore as useHMSStore13 } from "@100mslive/react-sdk";
+var ChangeNameModal = ({ onOpenChange }) => {
+  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
+  const hmsActions = useHMSActions8();
+  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__ */ React17.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(Dialog.Portal, null, /* @__PURE__ */ React17.createElement(Dialog.Overlay, null), /* @__PURE__ */ React17.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React17.createElement(Dialog.Title, { css: { p: "0 $4" } }, /* @__PURE__ */ React17.createElement(Text, { variant: "h6" }, " Change Name")), /* @__PURE__ */ React17.createElement(
+    "form",
+    {
+      onSubmit: (e) => __async(void 0, null, function* () {
+        e.preventDefault();
+        yield changeName();
+      })
+    },
+    /* @__PURE__ */ React17.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%" } }, /* @__PURE__ */ React17.createElement(
+      Input,
+      {
+        css: { width: "100%" },
+        value: currentName,
+        onChange: (e) => {
+          setCurrentName(e.target.value);
+        },
+        autoComplete: "name",
+        required: true,
+        "data-testid": "change_name_field"
+      }
+    )),
+    /* @__PURE__ */ React17.createElement(
+      Flex,
+      {
+        justify: "between",
+        align: "center",
+        css: {
+          width: "100%",
+          gap: "$md",
+          mt: "$10"
+        }
+      },
+      /* @__PURE__ */ React17.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React17.createElement(Dialog.Close, { css: { w: "100%" } }, /* @__PURE__ */ React17.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, type: "submit", disabled: !localPeerName }, "Cancel"))),
+      /* @__PURE__ */ React17.createElement(Box, { css: { w: "50%" } }, /* @__PURE__ */ React17.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 React18, { useMemo as useMemo4 } from "react";
+import { useMedia as useMedia4 } from "react-use";
+import {
+  selectLocalPeerID as selectLocalPeerID5,
+  selectLocalPeerRoleName as selectLocalPeerRoleName4,
+  selectPermissions as selectPermissions2,
+  useHMSActions as useHMSActions9,
+  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(selectPermissions2);
+  const localPeerId = useHMSStore14(selectLocalPeerID5);
+  const localPeerRole = useHMSStore14(selectLocalPeerRoleName4);
+  const hmsActions = useHMSActions9();
+  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__ */ React18.createElement(Dropdown.Item, { onClick }, /* @__PURE__ */ React18.createElement(PersonIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { mx: "$4" } }, "Change My Role")) : /* @__PURE__ */ React18.createElement(Dropdown.SubMenu, null, /* @__PURE__ */ React18.createElement(Dropdown.TriggerItem, { "data-testid": "change_my_role_btn" }, /* @__PURE__ */ React18.createElement(PersonIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { flex: "1 1 0", mx: "$4" } }, "Change My Role"), /* @__PURE__ */ React18.createElement(ArrowRightIcon, null)), /* @__PURE__ */ React18.createElement(Dropdown.SubMenuContent, { sideOffset: 8, alignOffset: -5, css: { "@md": { w: "$64" } } }, availableSelfChangeRoles.map((role) => /* @__PURE__ */ React18.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__ */ React18.createElement(Text, { variant: "sm" }, role),
+    localPeerRole === role && /* @__PURE__ */ React18.createElement(CheckIcon2, { width: 16, height: 16 })
+  ))));
+};
+
+// src/Prebuilt/components/MoreSettings/EmbedUrl.jsx
+init_define_process_env();
+import React19, { useState as useState9 } from "react";
+import { ViewIcon } from "@100mslive/react-icons";
+var EmbedUrl = ({ setShowOpenUrl }) => {
+  if (!window.CropTarget) {
+    return null;
+  }
+  return /* @__PURE__ */ React19.createElement(
+    Dropdown.Item,
+    {
+      onClick: () => {
+        setShowOpenUrl(true);
+      },
+      "data-testid": "embed_url_btn"
+    },
+    /* @__PURE__ */ React19.createElement(ViewIcon, null),
+    /* @__PURE__ */ React19.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__ */ React19.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React19.createElement(DialogContent, { title: "Embed URL", Icon: ViewIcon }, /* @__PURE__ */ React19.createElement(DialogInput, { title: "URL", value: url, onChange: setUrl, placeholder: "https://www.tldraw.com/", type: "url" }), /* @__PURE__ */ React19.createElement(DialogRow, null, /* @__PURE__ */ React19.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__ */ React19.createElement(DialogRow, { justify: "end" }, isAnythingEmbedded ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.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__ */ React19.createElement(
+    Button,
+    {
+      variant: "danger",
+      type: "submit",
+      onClick: () => {
+        setEmbedConfig({ url: "" });
+        onOpenChange(false);
+      },
+      "data-testid": "embed_url_btn"
+    },
+    "Stop Embed"
+  )) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.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__ */ React19.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 React20 from "react";
+import { ExpandIcon as ExpandIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/hooks/useFullscreen.js
+init_define_process_env();
+import { useCallback as useCallback5, useEffect as useEffect7, useState as useState10 } from "react";
+import screenfull2 from "screenfull";
+var useFullscreen2 = () => {
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState10(screenfull2.isFullscreen);
+  const toggle = useCallback5(() => __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__ */ React20.createElement(
+    Dropdown.Item,
+    {
+      onClick: () => {
+        toggleFullscreen();
+      },
+      "data-testid": "full_screen_btn"
+    },
+    /* @__PURE__ */ React20.createElement(ExpandIcon2, null),
+    /* @__PURE__ */ React20.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
+  );
+};
+
+// src/Prebuilt/components/MoreSettings/MuteAllModal.jsx
+init_define_process_env();
+import React21, { useCallback as useCallback6, useState as useState11 } from "react";
+import { useHMSActions as useHMSActions10 } 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 = useHMSActions10();
+  const [enabled, setEnabled] = useState11(false);
+  const [trackType, setTrackType] = useState11();
+  const [selectedRole, setRole] = useState11();
+  const [selectedSource, setSource] = useState11();
+  const muteAll = useCallback6(() => __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__ */ React21.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React21.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React21.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__ */ React21.createElement(
+    DialogSelect,
+    {
+      title: "Track type",
+      options: trackTypeOptions,
+      selected: trackType,
+      onChange: setTrackType,
+      keyField: "value",
+      labelField: "label"
+    }
+  ), /* @__PURE__ */ React21.createElement(
+    DialogSelect,
+    {
+      title: "Track source",
+      options: trackSourceOptions,
+      selected: selectedSource,
+      onChange: setSource,
+      keyField: "value",
+      labelField: "label"
+    }
+  ), /* @__PURE__ */ React21.createElement(DialogRow, null, /* @__PURE__ */ React21.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React21.createElement(RadioGroup.Root, { value: enabled, onValueChange: setEnabled }, /* @__PURE__ */ React21.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, { value: false, id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React21.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), /* @__PURE__ */ React21.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Item, { value: true, id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React21.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React21.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React21.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React21.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(selectPermissions3);
+  const isAllowedToPublish = useHMSStore15(selectIsAllowedToPublish2);
+  const localPeerId = useHMSStore15(selectLocalPeerID6);
+  const localPeerRole = useHMSStore15(selectLocalPeerRoleName5);
+  const hmsActions = useHMSActions11();
+  const enablHlsStats = useHMSStore15(selectAppData3(APP_DATA.hlsStats));
+  const isMobile = useMedia5(config.media.md);
+  const { isBrowserRecordingOn } = useRecordingStreaming2();
+  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__ */ React22.createElement(Fragment4, null, /* @__PURE__ */ React22.createElement(
+    Dropdown.Root,
+    {
+      open: openModals.has(MODALS.MORE_SETTINGS),
+      onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value)
+    },
+    /* @__PURE__ */ React22.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React22.createElement(IconButton_default, null, /* @__PURE__ */ React22.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React22.createElement(Box, null, /* @__PURE__ */ React22.createElement(VerticalMenuIcon, null))))),
+    /* @__PURE__ */ React22.createElement(
+      Dropdown.Content,
+      {
+        sideOffset: 5,
+        align: "center",
+        css: {
+          maxHeight: "$96",
+          "@md": { w: "$64" },
+          "div[role='separator']:first-child": {
+            display: "none"
+          }
+        }
+      },
+      isMobile && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.START_RECORDING, true) }, /* @__PURE__ */ React22.createElement(RecordIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isBrowserRecordingOn ? "Stop" : "Start", " Recording")), /* @__PURE__ */ React22.createElement(Dropdown.ItemSeparator, null)) : null,
+      isChangeNameEnabled && /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.CHANGE_NAME, true), "data-testid": "change_name_btn" }, /* @__PURE__ */ React22.createElement(PencilIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Change Name")),
+      /* @__PURE__ */ React22.createElement(ChangeSelfRole, { onClick: () => updateState(MODALS.SELF_ROLE_CHANGE, true) }),
+      (permissions == null ? void 0 : permissions.changeRole) && /* @__PURE__ */ React22.createElement(
+        Dropdown.Item,
+        {
+          onClick: () => updateState(MODALS.BULK_ROLE_CHANGE, true),
+          "data-testid": "bulk_role_change_btn"
+        },
+        /* @__PURE__ */ React22.createElement(ChangeRoleIcon2, null),
+        /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Bulk Role Change")
+      ),
+      /* @__PURE__ */ React22.createElement(FullScreenItem, null),
+      isAllowedToPublish.screen && isEmbedEnabled && /* @__PURE__ */ React22.createElement(EmbedUrl, { setShowOpenUrl: () => updateState(MODALS.EMBED_URL, true) }),
+      permissions.mute && /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.MUTE_ALL, true), "data-testid": "mute_all_btn" }, /* @__PURE__ */ React22.createElement(MicOffIcon2, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Mute All")),
+      /* @__PURE__ */ React22.createElement(Dropdown.ItemSeparator, null),
+      /* @__PURE__ */ React22.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React22.createElement(SettingsIcon, null), /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
+      FeatureFlags.enableStatsForNerds && isSFNEnabled && (localPeerRole === "hls-viewer" ? Hls.isSupported() ? /* @__PURE__ */ React22.createElement(
+        Dropdown.Item,
+        {
+          onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
+          "data-testid": "hls_stats"
+        },
+        /* @__PURE__ */ React22.createElement(
+          Checkbox.Root,
+          {
+            css: { margin: "$2" },
+            checked: enablHlsStats,
+            onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
+          },
+          /* @__PURE__ */ React22.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React22.createElement(CheckIcon3, { width: 16, height: 16 }))
+        ),
+        /* @__PURE__ */ React22.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), !isMobileOS ? /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`) : null)
+      ) : null : /* @__PURE__ */ React22.createElement(
+        Dropdown.Item,
+        {
+          onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
+          "data-testid": "stats_for_nreds_btn"
+        },
+        /* @__PURE__ */ React22.createElement(InfoIcon, null),
+        /* @__PURE__ */ React22.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+      ))
+    )
+  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React22.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React22.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.CHANGE_NAME) && /* @__PURE__ */ React22.createElement(ChangeNameModal, { onOpenChange: (value) => updateState(MODALS.CHANGE_NAME, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React22.createElement(SettingsModal_default, { open: true, onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value) }), FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React22.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React22.createElement(RoleChangeModal, { peerId: localPeerId, onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React22.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.EMBED_URL) && /* @__PURE__ */ React22.createElement(EmbedUrlModal, { onOpenChange: (value) => updateState(MODALS.EMBED_URL, value) }));
+};
+
+// src/Prebuilt/components/PIP/index.jsx
+init_define_process_env();
+import React24 from "react";
+
+// src/Prebuilt/components/PIP/PIPComponent.jsx
+init_define_process_env();
+import React23, { useCallback as useCallback7, useEffect as useEffect8, useState as useState13 } from "react";
+import {
+  selectLocalPeerRoleName as selectLocalPeerRoleName6,
+  selectPeers as selectPeers4,
+  selectRemotePeers as selectRemotePeers2,
+  selectTracksMap as selectTracksMap2,
+  useHMSActions as useHMSActions12,
+  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-surfaceLight");
+  }
+  if (!CANVAS_STROKE_COLOR) {
+    CANVAS_STROKE_COLOR = window.getComputedStyle(document.documentElement).getPropertyValue("--hms-ui-colors-borderLight");
+  }
+}
+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 = useHMSActions12();
+  const store = useHMSVanillaStore();
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
+  const onPipToggle = useCallback7(() => {
+    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__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React23.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React23.createElement(PipIcon, null))), isPipOn && /* @__PURE__ */ React23.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__ */ React24.createElement(PIPComponent_default, { peers: pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : void 0, showLocalPeer: true });
+};
+
+// src/Prebuilt/components/ScreenShare.jsx
+init_define_process_env();
+import React32, { Fragment as Fragment6 } from "react";
+import { selectIsAllowedToPublish as selectIsAllowedToPublish3, 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 React31, { Fragment as Fragment5, 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 React30, { useState as useState14 } from "react";
+
+// src/Prebuilt/components/pdfAnnotator/pdfErrorView.jsx
+init_define_process_env();
+import React25 from "react";
+import { InfoIcon as InfoIcon2 } from "@100mslive/react-icons";
+var PdfErrorView = ({ isPDFUrlValid }) => {
+  return !isPDFUrlValid && /* @__PURE__ */ React25.createElement(
+    DialogRow,
+    {
+      css: {
+        mt: "-$8",
+        color: "$error",
+        justifyContent: "start"
+      }
+    },
+    /* @__PURE__ */ React25.createElement(InfoIcon2, { width: "12px", height: "12px" }),
+    /* @__PURE__ */ React25.createElement(
+      Text,
+      {
+        variant: "caption",
+        css: {
+          pl: "$1",
+          color: "$error"
+        }
+      },
+      "Please enter a valid PDF URL"
+    )
+  );
+};
+
+// src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
+init_define_process_env();
+import React26 from "react";
+var PDFHeader = () => {
+  return /* @__PURE__ */ React26.createElement(
+    DialogCol,
+    {
+      align: "start",
+      css: {
+        mt: 0,
+        mb: "$6"
+      }
+    },
+    /* @__PURE__ */ React26.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React26.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
+    /* @__PURE__ */ React26.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React26.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: {
+          c: "$textMedEmp"
+        }
+      },
+      "Choose PDF you want to annotate and share"
+    ))
+  );
+};
+
+// src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx
+init_define_process_env();
+import React27 from "react";
+import { InfoIcon as InfoIcon3 } from "@100mslive/react-icons";
+var PDFInfo = () => {
+  return /* @__PURE__ */ React27.createElement(
+    DialogRow,
+    {
+      css: {
+        px: "$8",
+        py: "$3",
+        bg: "$surfaceLight",
+        r: "$1",
+        outline: "none",
+        border: "1px solid $borderLight",
+        minHeight: "$11"
+      }
+    },
+    /* @__PURE__ */ React27.createElement(
+      InfoIcon3,
+      {
+        width: "64px",
+        height: "64px",
+        style: {
+          paddingRight: "16px"
+        }
+      }
+    ),
+    /* @__PURE__ */ React27.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 React28, { useCallback as useCallback8 } from "react";
+var SubmitPDF = ({
+  pdfFile,
+  pdfURL,
+  isValidateProgress,
+  setIsPDFUrlValid,
+  setIsValidateProgress,
+  onOpenChange
+}) => {
+  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
+  const isValidPDF = useCallback8(
+    (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__ */ React28.createElement(
+    Flex,
+    {
+      direction: "row",
+      css: {
+        mb: "0",
+        mt: "auto",
+        gap: "$8"
+      }
+    },
+    /* @__PURE__ */ React28.createElement(
+      Button,
+      {
+        variant: "standard",
+        outlined: true,
+        type: "submit",
+        onClick: () => {
+          onOpenChange(false);
+        },
+        css: { w: "50%" }
+      },
+      "Cancel"
+    ),
+    /* @__PURE__ */ React28.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 React29 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__ */ 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(
+      DialogRow,
+      {
+        css: {
+          fontFamily: "$sans",
+          bg: "$surfaceLight",
+          r: "$1",
+          outline: "none",
+          border: "1px solid $borderLight",
+          p: "$4 $6",
+          minHeight: "$11",
+          c: "$textPrimary",
+          fs: "$md",
+          w: "100%",
+          "&:focus": {
+            boxShadow: "0 0 0 1px $colors$borderAccent",
+            border: "1px solid $transparent"
+          },
+          mb: 0,
+          mt: "$6"
+        }
+      },
+      /* @__PURE__ */ React29.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React29.createElement(
+        Text,
+        {
+          css: {
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap"
+          }
+        },
+        fileName
+      ), /* @__PURE__ */ React29.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
+      /* @__PURE__ */ React29.createElement(
+        TrashIcon,
+        {
+          onClick: () => setPDFFile(null),
+          style: {
+            cursor: "pointer"
+          }
+        }
+      )
+    ), /* @__PURE__ */ React29.createElement(PDFInfo, null), /* @__PURE__ */ React29.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__ */ React30.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React30.createElement(Dialog.Portal, null, /* @__PURE__ */ React30.createElement(Dialog.Overlay, null), /* @__PURE__ */ React30.createElement(
+    Dialog.Content,
+    {
+      css: {
+        w: "min(420px,80%)",
+        overflow: "auto",
+        p: "$10"
+      }
+    },
+    /* @__PURE__ */ React30.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React30.createElement(PDFHeader, null), /* @__PURE__ */ React30.createElement(
+      DialogInputFile,
+      {
+        onChange: (target) => {
+          setPDFFile(target.files[0]);
+        },
+        placeholder: "Click to upload",
+        type: "file",
+        accept: ".pdf"
+      }
+    ), /* @__PURE__ */ React30.createElement(
+      DialogRow,
+      {
+        css: {
+          m: "$10 0"
+        }
+      },
+      /* @__PURE__ */ React30.createElement(
+        HorizontalDivider,
+        {
+          css: {
+            mr: "$4"
+          }
+        }
+      ),
+      /* @__PURE__ */ React30.createElement(
+        Text,
+        {
+          variant: "tiny",
+          css: {
+            color: "$textDisabled"
+          }
+        },
+        "OR"
+      ),
+      /* @__PURE__ */ React30.createElement(
+        HorizontalDivider,
+        {
+          css: {
+            ml: "$4"
+          }
+        }
+      )
+    ), /* @__PURE__ */ React30.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: {
+          py: "$2"
+        }
+      },
+      "Import from URL"
+    ), /* @__PURE__ */ React30.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__ */ React30.createElement(PdfErrorView, { isPDFUrlValid }), /* @__PURE__ */ React30.createElement(PDFInfo, null), /* @__PURE__ */ React30.createElement(
+      SubmitPDF,
+      {
+        pdfFile,
+        pdfURL,
+        isValidateProgress,
+        setIsPDFUrlValid,
+        setIsValidateProgress,
+        onOpenChange
+      }
+    ))
+  ))) : /* @__PURE__ */ React30.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__ */ React31.createElement(Fragment5, null, /* @__PURE__ */ React31.createElement(Dropdown.Root, { open: openModals.has(MODALS2.SHARE), onOpenChange: (value) => updateState(MODALS2.SHARE, value) }, /* @__PURE__ */ React31.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React31.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React31.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React31.createElement(Box, null, /* @__PURE__ */ React31.createElement(VerticalMenuIcon2, null))))), /* @__PURE__ */ React31.createElement(
+    Dropdown.Content,
+    {
+      sideOffset: 5,
+      css: {
+        w: "$96",
+        maxHeight: "$96",
+        p: 0
+      }
+    },
+    /* @__PURE__ */ React31.createElement(
+      Dropdown.Item,
+      {
+        css: {
+          flexDirection: "column",
+          alignItems: "flex-start",
+          px: "$10",
+          pt: "$10",
+          pb: "$6",
+          "&:hover": {
+            bg: "$transparent",
+            cursor: "default"
+          }
+        }
+      },
+      /* @__PURE__ */ React31.createElement(Text, { variant: "h6" }, "Start Sharing"),
+      /* @__PURE__ */ React31.createElement(Text, { variant: "sm" }, "Choose what you want to share")
+    ),
+    /* @__PURE__ */ React31.createElement(
+      Dropdown.Item,
+      {
+        css: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: "$8",
+          px: "$10",
+          py: "$6",
+          "&:hover": {
+            bg: "$transparent",
+            cursor: "default"
+          }
+        }
+      },
+      /* @__PURE__ */ React31.createElement(
+        Flex,
+        {
+          direction: "column",
+          align: "center",
+          css: {
+            gap: "$6"
+          }
+        },
+        /* @__PURE__ */ React31.createElement(
+          IconButton,
+          {
+            as: "div",
+            onClick: () => toggleScreenShare(),
+            css: {
+              p: "$6",
+              display: "flex",
+              justifyContent: "center",
+              border: "1px solid $grayDefault",
+              r: "$2",
+              bg: "$surfaceLighter",
+              pb: "0"
+            }
+          },
+          /* @__PURE__ */ React31.createElement(
+            ScreenShare,
+            {
+              width: "100%",
+              height: "100%",
+              style: {
+                borderTopLeftRadius: "$0",
+                borderTopRightRadius: "$0"
+              }
+            }
+          )
+        ),
+        /* @__PURE__ */ React31.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React31.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React31.createElement(
+          Text,
+          {
+            variant: "caption",
+            css: {
+              c: "$textDisabled",
+              textAlign: "center"
+            }
+          },
+          "Share your tab, window or your entire screen"
+        ))
+      ),
+      /* @__PURE__ */ React31.createElement(
+        Flex,
+        {
+          direction: "column",
+          align: "center",
+          css: {
+            gap: "$6"
+          }
+        },
+        /* @__PURE__ */ React31.createElement(
+          IconButton,
+          {
+            onClick: () => {
+              updateState(MODALS2.PDF_SHARE, true);
+            },
+            disabled: amIScreenSharing,
+            css: {
+              p: "$6",
+              display: "flex",
+              justifyContent: "center",
+              border: "$grayDefault 1px solid",
+              r: "$2",
+              bg: "$surfaceLight",
+              pb: "0"
+            }
+          },
+          /* @__PURE__ */ React31.createElement(
+            PdfShare,
+            {
+              width: "100%",
+              height: "100%",
+              style: {
+                borderTopLeftRadius: "$0",
+                borderTopRightRadius: "$0"
+              }
+            }
+          ),
+          /* @__PURE__ */ React31.createElement(
+            Flex,
+            {
+              direction: "row",
+              css: {
+                position: "absolute",
+                top: "29%",
+                left: "54%",
+                padding: "$2 $4",
+                r: "$2",
+                bg: "$primaryLight",
+                zIndex: "2"
+              }
+            },
+            /* @__PURE__ */ React31.createElement(
+              IconButton,
+              {
+                css: {
+                  w: "$10",
+                  h: "$8",
+                  "&:hover": {
+                    bg: "$transparent !important",
+                    border: "none"
+                  }
+                }
+              },
+              /* @__PURE__ */ React31.createElement(StarIcon, null)
+            ),
+            /* @__PURE__ */ React31.createElement(
+              Text,
+              {
+                variant: "xs",
+                css: {
+                  fontWeight: "$semiBold",
+                  c: "$white",
+                  pr: "$4"
+                }
+              },
+              "New"
+            )
+          )
+        ),
+        /* @__PURE__ */ React31.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React31.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React31.createElement(
+          Text,
+          {
+            variant: "caption",
+            css: {
+              c: "$textDisabled",
+              textAlign: "center"
+            }
+          },
+          "Annotate, draw shapes, and more over PDFs"
+        ))
+      )
+    ),
+    /* @__PURE__ */ React31.createElement(
+      Dropdown.Item,
+      {
+        css: {
+          px: "$10",
+          pb: "$10",
+          pt: "$6",
+          "&:hover": {
+            bg: "$transparent",
+            cursor: "default"
+          }
+        }
+      },
+      /* @__PURE__ */ React31.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__ */ React31.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS2.PDF_SHARE, value) }));
+}
+
+// src/Prebuilt/components/ScreenShare.jsx
+var ScreenshareToggle = ({ css = {} }) => {
+  const isAllowedToPublish = useHMSStore17(selectIsAllowedToPublish3);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare4();
+  const isVideoScreenshare = amIScreenSharing && !!video;
+  if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
+    return null;
+  }
+  return /* @__PURE__ */ React32.createElement(Fragment6, null, /* @__PURE__ */ React32.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React32.createElement(
+    ScreenShareButton,
+    {
+      variant: "standard",
+      key: "ShareScreen",
+      active: !isVideoScreenshare,
+      css,
+      disabled: isAudioOnly,
+      onClick: () => {
+        toggleScreenShare();
+      }
+    },
+    /* @__PURE__ */ React32.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(ShareScreenIcon2, null)))
+  ), /* @__PURE__ */ React32.createElement(ShareScreenOptions, null)));
+};
+
+// src/Prebuilt/components/ScreenshareHintModal.jsx
+init_define_process_env();
+import React33 from "react";
+import { useHMSActions as useHMSActions13 } from "@100mslive/react-sdk";
+var ScreenShareHintModal = ({ onClose }) => {
+  const hmsActions = useHMSActions13();
+  return /* @__PURE__ */ React33.createElement(Dialog.Root, { defaultOpen: true, onOpenChange: (value) => !value && onClose() }, /* @__PURE__ */ React33.createElement(DialogContent, { title: "AudioOnly Screenshare" }, /* @__PURE__ */ React33.createElement(
+    "img",
+    {
+      src: "https://images.app.100ms.live/share-audio.png",
+      alt: "AudioOnly Screenshare instructions",
+      width: "100%"
+    }
+  ), /* @__PURE__ */ React33.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React33.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 React34 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__ */ React34.createElement(Tooltip, { key: "chat", title: `${isChatOpen ? "Close" : "Open"} chat` }, /* @__PURE__ */ React34.createElement(IconButton_default, { onClick: toggleChat, active: !isChatOpen, "data-testid": "chat_btn" }, countUnreadMessages === 0 ? /* @__PURE__ */ React34.createElement(ChatIcon, null) : /* @__PURE__ */ React34.createElement(ChatUnreadIcon, { "data-testid": "chat_unread_btn" })));
+};
+
+// src/Prebuilt/components/Footer/ConferencingFooter.jsx
+var TranscriptionButton = React35.lazy(() => import("./transcription-BTSB7FZH.js"));
+var VirtualBackground = React35.lazy(() => import("./VirtualBackground-LHYBWUT5.js"));
+var ScreenshareAudio = () => {
+  const {
+    amIScreenSharing,
+    screenShareVideoTrackId: video,
+    screenShareAudioTrackId: audio,
+    toggleScreenShare
+  } = useScreenShare5();
+  const isAllowedToPublish = useHMSStore19(selectIsAllowedToPublish4);
+  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__ */ React35.createElement(Fragment7, null, /* @__PURE__ */ React35.createElement(Tooltip, { title: `${!isAudioScreenshare ? "Start" : "Stop"} audio sharing`, key: "shareAudio" }, /* @__PURE__ */ React35.createElement(
+    IconButton_default,
+    {
+      active: !isAudioScreenshare,
+      onClick: () => {
+        if (amIScreenSharing) {
+          toggleScreenShare();
+        } else {
+          setShowModal(true);
+        }
+      },
+      "data-testid": "screenshare_audio"
+    },
+    /* @__PURE__ */ React35.createElement(MusicIcon, null)
+  )), showModal && /* @__PURE__ */ React35.createElement(ScreenShareHintModal, { onClose: () => setShowModal(false) }));
+};
+var ConferencingFooter = () => {
+  const isMobile = useMedia6(config.media.md);
+  return /* @__PURE__ */ React35.createElement(Footer.Root, null, /* @__PURE__ */ React35.createElement(Footer.Left, null, /* @__PURE__ */ React35.createElement(ScreenshareAudio, null), /* @__PURE__ */ React35.createElement(Playlist, { type: HMSPlaylistType4.audio }), /* @__PURE__ */ React35.createElement(Playlist, { type: HMSPlaylistType4.video }), /* @__PURE__ */ React35.createElement(Suspense2, { fallback: "" }, /* @__PURE__ */ React35.createElement(VirtualBackground, null)), FeatureFlags.enableTranscription ? /* @__PURE__ */ React35.createElement(TranscriptionButton, null) : null, /* @__PURE__ */ React35.createElement(
+    Flex,
+    {
+      align: "center",
+      css: {
+        display: "none",
+        "@md": {
+          display: "flex",
+          gap: "$8"
+        }
+      }
+    },
+    isMobile && /* @__PURE__ */ React35.createElement(EmojiReaction, null),
+    /* @__PURE__ */ React35.createElement(MetaActions_default, { isMobile: true })
+  )), /* @__PURE__ */ React35.createElement(Footer.Center, null, /* @__PURE__ */ React35.createElement(AudioVideoToggle, null), /* @__PURE__ */ React35.createElement(ScreenshareToggle, null), /* @__PURE__ */ React35.createElement(PIP, null), /* @__PURE__ */ React35.createElement(MoreSettings, null), /* @__PURE__ */ React35.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React35.createElement(ChatToggle, null)), /* @__PURE__ */ React35.createElement(LeaveRoom, null)), /* @__PURE__ */ React35.createElement(Footer.Right, null, !isMobile && /* @__PURE__ */ React35.createElement(EmojiReaction, null), /* @__PURE__ */ React35.createElement(MetaActions_default, null), /* @__PURE__ */ React35.createElement(ChatToggle, null)));
+};
+
+// src/Prebuilt/components/Footer/StreamingFooter.jsx
+init_define_process_env();
+import React36 from "react";
+var StreamingFooter = () => {
+  return /* @__PURE__ */ React36.createElement(
+    Footer.Root,
+    {
+      css: {
+        flexWrap: "nowrap",
+        "@md": {
+          justifyContent: "center"
+        }
+      }
+    },
+    /* @__PURE__ */ React36.createElement(
+      Footer.Left,
+      {
+        css: {
+          "@md": {
+            w: "unset",
+            p: "0"
+          }
+        }
+      },
+      /* @__PURE__ */ React36.createElement(AudioVideoToggle, null)
+    ),
+    /* @__PURE__ */ React36.createElement(
+      Footer.Center,
+      {
+        css: {
+          "@md": {
+            w: "unset"
+          }
+        }
+      },
+      /* @__PURE__ */ React36.createElement(ScreenshareToggle, { css: { "@sm": { display: "none" } } }),
+      /* @__PURE__ */ React36.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React36.createElement(PIP, null)),
+      /* @__PURE__ */ React36.createElement(
+        Box,
+        {
+          css: {
+            display: "none",
+            "@md": {
+              display: "flex",
+              alignItems: "center",
+              mx: "$4"
+            }
+          }
+        },
+        /* @__PURE__ */ React36.createElement(StreamActions, null)
+      ),
+      /* @__PURE__ */ React36.createElement(MoreSettings, null),
+      /* @__PURE__ */ React36.createElement(Box, { css: { "@md": { display: "none" } } }, /* @__PURE__ */ React36.createElement(LeaveRoom, null)),
+      /* @__PURE__ */ React36.createElement(Flex, { align: "center", css: { display: "none", "@md": { display: "flex" } } }, /* @__PURE__ */ React36.createElement(ChatToggle, null))
+    ),
+    /* @__PURE__ */ React36.createElement(Footer.Right, null, /* @__PURE__ */ React36.createElement(EmojiReaction, null), /* @__PURE__ */ React36.createElement(MetaActions_default, null), /* @__PURE__ */ React36.createElement(ChatToggle, null))
+  );
+};
+
+// src/Prebuilt/components/Footer.jsx
+var Footer2 = () => {
+  return isStreamingKit() ? /* @__PURE__ */ React37.createElement(StreamingFooter, null) : /* @__PURE__ */ React37.createElement(ConferencingFooter, null);
+};
+
+// src/Prebuilt/components/RoleChangeRequestModal.jsx
+init_define_process_env();
+import React38 from "react";
+import { selectRoleChangeRequest, useHMSActions as useHMSActions14, useHMSStore as useHMSStore20 } from "@100mslive/react-sdk";
+var RoleChangeRequestModal = () => {
+  var _a, _b;
+  const hmsActions = useHMSActions14();
+  const isHeadless = useIsHeadless();
+  const roleChangeRequest = useHMSStore20(selectRoleChangeRequest);
+  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role) || isHeadless) {
+    return null;
+  }
+  return /* @__PURE__ */ React38.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 = useHMSActions15();
+  const [hideControls, setHideControls] = useState17(false);
+  const dropdownList = useHMSStore21(selectAppData4(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 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__ */ React39.createElement(FullPageProgress_default, null);
+  }
+  return /* @__PURE__ */ React39.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !isHeadless && /* @__PURE__ */ React39.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__ */ React39.createElement(Header, null)
+  ), /* @__PURE__ */ React39.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__ */ React39.createElement(ConferenceMainView, null)
+  ), !isHeadless && /* @__PURE__ */ React39.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__ */ React39.createElement(Footer2, null)
+  ), /* @__PURE__ */ React39.createElement(RoleChangeRequestModal, null));
+};
+var conference_default = Conference;
+export {
+  conference_default as default
+};
+//# sourceMappingURL=conference-IDNRO4WK.js.map