@100mslive/roomkit-react 0.3.24-alpha.0 → 0.3.24-alpha.2

package/dist/ConferenceScreen-M6RBPTAJ.js

@@ -1,1774 +0,0 @@
-import {
-  Header
-} from "./chunk-LJVP6AWF.js";
-import {
-  Grid
-} from "./chunk-HMCBZI3A.js";
-import {
-  InsetTile
-} from "./chunk-YEL5ZTFU.js";
-import {
-  ChatToggle,
-  LeaveRoom
-} from "./chunk-EWPHJFZJ.js";
-import {
-  WaitingView
-} from "./chunk-REL3HBSD.js";
-import {
-  Pagination,
-  VideoTileContext,
-  usePagesWithTiles,
-  useTileLayout
-} from "./chunk-P6NV2XO4.js";
-import {
-  ParticipantCount
-} from "./chunk-U4SQBXPZ.js";
-import {
-  ActivatedPIP,
-  MoreSettings,
-  useUnreadPollQuizPresent
-} from "./chunk-ETRNLEWQ.js";
-import "./chunk-3C7IESSI.js";
-import {
-  EmojiReaction
-} from "./chunk-7FD3VT6Q.js";
-import {
-  RaiseHand
-} from "./chunk-OV6MVDCL.js";
-import {
-  useMyMetadata
-} from "./chunk-AHI4HCY3.js";
-import "./chunk-LXJGCRKM.js";
-import {
-  AudioVideoToggle,
-  Button,
-  Dialog,
-  DialogCol,
-  DialogInputFile,
-  DialogRow,
-  Footer,
-  FullPageProgress_default,
-  PictureInPicture,
-  PreviewControls,
-  PreviewTile,
-  Sheet,
-  SidePane_default,
-  VBToggle,
-  useHMSPrebuiltContext,
-  useIsSidepaneTypeOpen,
-  usePollViewToggle,
-  useSidepaneToggle
-} from "./chunk-MG3UGW66.js";
-import {
-  Text
-} from "./chunk-MUKUP7JU.js";
-import {
-  Dropdown,
-  ToastManager,
-  useLandscapeHLSStream,
-  useMobileHLSStream,
-  useWaitingRoomInfo
-} from "./chunk-DANANDDE.js";
-import {
-  Box,
-  Flex
-} from "./chunk-GOXRTCTY.js";
-import {
-  IconButton,
-  IconButton_default,
-  Tooltip,
-  isScreenshareSupported,
-  useAuthToken,
-  useIsCaptionEnabled,
-  usePDFConfig,
-  usePinnedTrack,
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutPreviewScreen,
-  useSetAppDataByKey,
-  useSetIsCaptionEnabled,
-  useShowPolls,
-  useUISettings,
-  useUrlToEmbed
-} from "./chunk-BGSYLCVD.js";
-import {
-  APP_DATA,
-  ROLE_CHANGE_DECLINED,
-  SIDE_PANE_OPTIONS,
-  UI_SETTINGS,
-  __async,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env,
-  isAndroid,
-  isIOS,
-  isIPadOS,
-  styled
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/ConferenceScreen.tsx
-init_define_process_env();
-import React19, { useEffect as useEffect10, useRef as useRef2, useState as useState8 } from "react";
-import { v4 as uuid } from "uuid";
-import {
-  HMSRoomState,
-  selectAppData,
-  selectIsConnectedToRoom as selectIsConnectedToRoom2,
-  selectRoomState,
-  useAwayNotifications as useAwayNotifications2,
-  useHMSActions as useHMSActions4,
-  useHMSStore as useHMSStore10
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/Footer/Footer.tsx
-init_define_process_env();
-import React11, { useEffect as useEffect2 } from "react";
-import { useMedia } from "react-use";
-import { Chat_ChatState } from "@100mslive/types-prebuilt/elements/chat";
-
-// src/Prebuilt/components/CaptionIcon.tsx
-init_define_process_env();
-import React from "react";
-import { selectIsTranscriptionEnabled, useHMSStore } from "@100mslive/react-sdk";
-import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
-var CaptionIcon = () => {
-  const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled);
-  const [isCaption, setIsCaption] = useSetIsCaptionEnabled();
-  const onClick = () => {
-    setIsCaption(!isCaption);
-  };
-  if (!isCaptionPresent) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: isCaption ? "Hide closed captions" : "Show closed captions" }, /* @__PURE__ */ React.createElement(IconButton_default, { "data-testid": "caption_btn", onClick }, isCaption ? /* @__PURE__ */ React.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
-};
-
-// src/Prebuilt/components/ScreenShareToggle.jsx
-init_define_process_env();
-import React8, { Fragment as Fragment2 } from "react";
-import { selectIsAllowedToPublish, useAwayNotifications, useHMSStore as useHMSStore2, useScreenShare as useScreenShare2 } from "@100mslive/react-sdk";
-import { ShareScreenIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
-init_define_process_env();
-import React7, { Fragment, useState as useState2 } from "react";
-import { useScreenShare } from "@100mslive/react-sdk";
-import { StarIcon, VerticalMenuIcon } from "@100mslive/react-icons";
-import PDFShareImg from "./pdf-share.png";
-import ScreenShareImg from "./screen-share.png";
-
-// 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": {
-    w: "unset",
-    px: "$2"
-  }
-});
-
-// src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-init_define_process_env();
-import React6, { useState } from "react";
-
-// src/Prebuilt/components/pdfAnnotator/pdfHeader.jsx
-init_define_process_env();
-import React2 from "react";
-var PDFHeader = () => {
-  return /* @__PURE__ */ React2.createElement(
-    DialogCol,
-    {
-      align: "start",
-      css: {
-        mt: 0,
-        mb: "$6"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(Dialog.Title, { asChild: true }, /* @__PURE__ */ React2.createElement(Text, { as: "h6", variant: "h6" }, "Share PDF")),
-    /* @__PURE__ */ React2.createElement(Dialog.Description, { asChild: true }, /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: {
-          c: "$on_surface_medium"
-        }
-      },
-      "Choose PDF you want to annotate and share"
-    ))
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/submitPdf.jsx
-init_define_process_env();
-import React3 from "react";
-var SubmitPDF = ({ pdfFile, onOpenChange }) => {
-  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  return /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      direction: "row",
-      css: {
-        mb: "0",
-        mt: "auto",
-        gap: "$8"
-      }
-    },
-    /* @__PURE__ */ React3.createElement(
-      Button,
-      {
-        variant: "standard",
-        outlined: true,
-        type: "submit",
-        onClick: () => {
-          onOpenChange(false);
-        },
-        css: { w: "50%" }
-      },
-      "Cancel"
-    ),
-    /* @__PURE__ */ React3.createElement(
-      Button,
-      {
-        variant: "primary",
-        type: "submit",
-        onClick: () => {
-          if (pdfFile) {
-            setPDFConfig(pdfFile);
-            onOpenChange(false);
-          }
-        },
-        disabled: !pdfFile,
-        "data-testid": "share_pdf_btn",
-        css: {
-          w: "50%"
-        }
-      },
-      "Start Sharing"
-    )
-  );
-};
-
-// src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx
-init_define_process_env();
-import React5 from "react";
-import { TrashIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/pdfAnnotator/pdfInfo.jsx
-init_define_process_env();
-import React4 from "react";
-import { InfoIcon } from "@100mslive/react-icons";
-var PDFInfo = () => {
-  return /* @__PURE__ */ React4.createElement(
-    DialogRow,
-    {
-      css: {
-        px: "$8",
-        py: "$3",
-        bg: "$surface_default",
-        r: "$1",
-        outline: "none",
-        border: "1px solid $border_bright",
-        minHeight: "$11"
-      }
-    },
-    /* @__PURE__ */ React4.createElement(
-      InfoIcon,
-      {
-        width: "64px",
-        height: "64px",
-        style: {
-          paddingRight: "16px"
-        }
-      }
-    ),
-    /* @__PURE__ */ React4.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/uploadedFile.jsx
-var UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
-  const [fileName, ext] = pdfFile.name.split(".");
-  return /* @__PURE__ */ React5.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React5.createElement(Dialog.Portal, null, /* @__PURE__ */ React5.createElement(Dialog.Overlay, null), /* @__PURE__ */ React5.createElement(
-    Dialog.Content,
-    {
-      css: {
-        w: "min(420px,80%)",
-        overflow: "auto",
-        p: "$10",
-        bg: "$surface_dim"
-      }
-    },
-    /* @__PURE__ */ React5.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React5.createElement(PDFHeader, null), /* @__PURE__ */ React5.createElement(
-      DialogRow,
-      {
-        css: {
-          fontFamily: "$sans",
-          bg: "$surface_bright",
-          r: "$1",
-          outline: "none",
-          border: "1px solid $border_bright",
-          p: "$4 $6",
-          minHeight: "$11",
-          c: "$on_primary_high",
-          fs: "$md",
-          w: "100%",
-          "&:focus": {
-            boxShadow: "0 0 0 1px $colors$primary_default",
-            border: "1px solid transparent"
-          },
-          mb: 0,
-          mt: "$6"
-        }
-      },
-      /* @__PURE__ */ React5.createElement(Flex, { direction: "row", css: { flexGrow: "1", maxWidth: "88%" } }, /* @__PURE__ */ React5.createElement(
-        Text,
-        {
-          css: {
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap"
-          }
-        },
-        fileName
-      ), /* @__PURE__ */ React5.createElement(Text, { css: { whiteSpace: "nowrap" } }, ".", ext)),
-      /* @__PURE__ */ React5.createElement(
-        TrashIcon,
-        {
-          onClick: () => setPDFFile(null),
-          style: {
-            cursor: "pointer"
-          }
-        }
-      )
-    ), /* @__PURE__ */ React5.createElement(PDFInfo, null), /* @__PURE__ */ React5.createElement(SubmitPDF, { pdfFile, onOpenChange }))
-  )));
-};
-
-// src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx
-function PDFFileOptions({ onOpenChange }) {
-  const [pdfFile, setPDFFile] = useState(null);
-  return !pdfFile ? /* @__PURE__ */ React6.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React6.createElement(Dialog.Portal, null, /* @__PURE__ */ React6.createElement(Dialog.Overlay, null), /* @__PURE__ */ React6.createElement(
-    Dialog.Content,
-    {
-      css: {
-        w: "min(420px,80%)",
-        overflow: "auto",
-        p: "$10",
-        bg: "$surface_dim"
-      }
-    },
-    /* @__PURE__ */ React6.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React6.createElement(PDFHeader, null), /* @__PURE__ */ React6.createElement(
-      DialogInputFile,
-      {
-        onChange: (target) => {
-          setPDFFile(target.files[0]);
-        },
-        placeholder: "Click to upload",
-        type: "file",
-        accept: ".pdf"
-      }
-    ), /* @__PURE__ */ React6.createElement(SubmitPDF, { pdfFile, onOpenChange }))
-  ))) : /* @__PURE__ */ React6.createElement(UploadedFile, { pdfFile, setPDFFile, onOpenChange });
-}
-
-// src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
-var MODALS = {
-  SHARE: "share",
-  SCREEN_SHARE: "screenShare",
-  PDF_SHARE: "pdfShare"
-};
-function ShareScreenOptions() {
-  const [openModals, setOpenModals] = useState2(/* @__PURE__ */ new Set());
-  const { amIScreenSharing } = useScreenShare();
-  const updateState = (modalName, value) => {
-    setOpenModals((modals) => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-  const { toggleScreenShare } = useScreenShare();
-  return /* @__PURE__ */ React7.createElement(Fragment, null, /* @__PURE__ */ React7.createElement(
-    Dropdown.Root,
-    {
-      open: openModals.has(MODALS.SHARE),
-      onOpenChange: (value) => updateState(MODALS.SHARE, value),
-      modal: false
-    },
-    /* @__PURE__ */ React7.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "sharing_btn", disabled: amIScreenSharing }, /* @__PURE__ */ React7.createElement(ShareMenuIcon, { disabled: amIScreenSharing }, /* @__PURE__ */ React7.createElement(Tooltip, { title: "Share" }, /* @__PURE__ */ React7.createElement(Box, null, /* @__PURE__ */ React7.createElement(VerticalMenuIcon, null))))),
-    /* @__PURE__ */ React7.createElement(
-      Dropdown.Content,
-      {
-        sideOffset: 5,
-        css: {
-          w: "$96",
-          maxHeight: "$96",
-          p: 0,
-          bg: "$surface_dim"
-        }
-      },
-      /* @__PURE__ */ React7.createElement(
-        Dropdown.Item,
-        {
-          css: {
-            flexDirection: "column",
-            alignItems: "flex-start",
-            px: "$10",
-            pt: "$10",
-            pb: "$6",
-            "&:hover": {
-              bg: "transparent",
-              cursor: "default"
-            }
-          }
-        },
-        /* @__PURE__ */ React7.createElement(Text, { variant: "h6" }, "Start Sharing"),
-        /* @__PURE__ */ React7.createElement(Text, { variant: "sm" }, "Choose what you want to share")
-      ),
-      /* @__PURE__ */ React7.createElement(
-        Dropdown.Item,
-        {
-          css: {
-            flexDirection: "row",
-            alignItems: "flex-start",
-            gap: "$8",
-            px: "$10",
-            pt: "$6",
-            pb: "$10",
-            "&:hover": {
-              bg: "transparent",
-              cursor: "default"
-            }
-          }
-        },
-        /* @__PURE__ */ React7.createElement(
-          Flex,
-          {
-            direction: "column",
-            align: "center",
-            css: {
-              gap: "$6"
-            }
-          },
-          /* @__PURE__ */ React7.createElement(
-            IconButton,
-            {
-              as: "div",
-              onClick: toggleScreenShare,
-              css: {
-                p: "$6",
-                display: "flex",
-                justifyContent: "center",
-                border: "1px solid $border_bright",
-                r: "$2",
-                bg: "$surface_brighter",
-                pb: "0"
-              }
-            },
-            /* @__PURE__ */ React7.createElement(
-              "img",
-              {
-                src: ScreenShareImg,
-                alt: "screen-share",
-                width: "100%",
-                height: "100%",
-                style: {
-                  borderTopLeftRadius: "0.5rem",
-                  // TODO: create image component to solve for style hardcoding
-                  borderTopRightRadius: "0.5rem"
-                }
-              }
-            )
-          ),
-          /* @__PURE__ */ React7.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React7.createElement(Text, { variant: "body2" }, "Share Screen"), /* @__PURE__ */ React7.createElement(
-            Text,
-            {
-              variant: "caption",
-              css: {
-                c: "$on_surface_low",
-                textAlign: "center"
-              }
-            },
-            "Share your tab, window or your entire screen"
-          ))
-        ),
-        /* @__PURE__ */ React7.createElement(
-          Flex,
-          {
-            direction: "column",
-            align: "center",
-            css: {
-              gap: "$6"
-            }
-          },
-          /* @__PURE__ */ React7.createElement(
-            IconButton,
-            {
-              onClick: () => {
-                updateState(MODALS.PDF_SHARE, true);
-              },
-              disabled: amIScreenSharing,
-              css: {
-                p: "$6",
-                display: "flex",
-                justifyContent: "center",
-                border: "$border_bright 1px solid",
-                r: "$2",
-                bg: "$surface_bright",
-                pb: "0"
-              }
-            },
-            /* @__PURE__ */ React7.createElement(
-              "img",
-              {
-                src: PDFShareImg,
-                alt: "pdf-share",
-                width: "100%",
-                height: "100%",
-                style: {
-                  borderTopLeftRadius: "0.5rem",
-                  // TODO: create image component to solve for style hardcoding
-                  borderTopRightRadius: "0.5rem"
-                }
-              }
-            ),
-            /* @__PURE__ */ React7.createElement(
-              Flex,
-              {
-                direction: "row",
-                align: "center",
-                css: {
-                  position: "absolute",
-                  top: "35%",
-                  left: "54%",
-                  padding: "$2 $4",
-                  r: "$2",
-                  bg: "$primary_bright",
-                  zIndex: "2",
-                  gap: "$2"
-                }
-              },
-              /* @__PURE__ */ React7.createElement(StarIcon, { height: 14, width: 14 }),
-              /* @__PURE__ */ React7.createElement(
-                Text,
-                {
-                  variant: "xs",
-                  css: {
-                    fontWeight: "$semiBold",
-                    c: "$on_primary_high",
-                    pr: "$4"
-                  }
-                },
-                "New"
-              )
-            )
-          ),
-          /* @__PURE__ */ React7.createElement(Flex, { direction: "column", align: "center" }, /* @__PURE__ */ React7.createElement(Text, { variant: "body2" }, "Share PDF"), /* @__PURE__ */ React7.createElement(
-            Text,
-            {
-              variant: "caption",
-              css: {
-                c: "$on_surface_low",
-                textAlign: "center"
-              }
-            },
-            "Annotate, draw shapes, and more over PDFs"
-          ))
-        )
-      )
-    )
-  ), openModals.has(MODALS.PDF_SHARE) && /* @__PURE__ */ React7.createElement(PDFFileOptions, { onOpenChange: (value) => updateState(MODALS.PDF_SHARE, value) }));
-}
-
-// src/Prebuilt/components/ScreenShareToggle.jsx
-var ScreenshareToggle = ({ css = {} }) => {
-  const isAllowedToPublish = useHMSStore2(selectIsAllowedToPublish);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const {
-    amIScreenSharing,
-    screenShareVideoTrackId: video,
-    toggleScreenShare
-  } = useScreenShare2((error) => {
-    ToastManager.addToast({
-      title: error.message,
-      variant: "error",
-      duration: 2e3
-    });
-  });
-  const { requestPermission } = useAwayNotifications();
-  const isVideoScreenshare = amIScreenSharing && !!video;
-  if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
-    return null;
-  }
-  return /* @__PURE__ */ React8.createElement(Fragment2, null, /* @__PURE__ */ React8.createElement(Flex, { direction: "row" }, /* @__PURE__ */ React8.createElement(
-    ScreenShareButton,
-    {
-      variant: "standard",
-      key: "ShareScreen",
-      active: !isVideoScreenshare,
-      css,
-      disabled: isAudioOnly,
-      onClick: () => __async(void 0, null, function* () {
-        yield toggleScreenShare();
-        yield requestPermission();
-      })
-    },
-    /* @__PURE__ */ React8.createElement(Tooltip, { title: `${!isVideoScreenshare ? "Start" : "Stop"} screen sharing` }, /* @__PURE__ */ React8.createElement(Box, null, /* @__PURE__ */ React8.createElement(ShareScreenIcon, null)))
-  ), /* @__PURE__ */ React8.createElement(ShareScreenOptions, null)));
-};
-
-// src/Prebuilt/components/Footer/PollsToggle.tsx
-init_define_process_env();
-import React9, { useEffect } from "react";
-import { QuizActiveIcon, QuizIcon } from "@100mslive/react-icons";
-var PollsToggle = () => {
-  const isPollsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.POLLS);
-  const togglePollView = usePollViewToggle();
-  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  useEffect(() => {
-    if (unreadPollQuiz && isPollsOpen) {
-      setUnreadPollQuiz(false);
-    }
-  }, [isPollsOpen, unreadPollQuiz, setUnreadPollQuiz]);
-  return /* @__PURE__ */ React9.createElement(Tooltip, { key: "polls", title: `${isPollsOpen ? "Close" : "Open"} polls and quizzes` }, /* @__PURE__ */ React9.createElement(
-    IconButton_default,
-    {
-      onClick: () => {
-        togglePollView();
-        setUnreadPollQuiz(false);
-      },
-      css: { bg: isPollsOpen ? "$surface_brighter" : "" },
-      "data-testid": "polls_btn"
-    },
-    unreadPollQuiz ? /* @__PURE__ */ React9.createElement(QuizActiveIcon, null) : /* @__PURE__ */ React9.createElement(QuizIcon, null)
-  ));
-};
-
-// src/Prebuilt/components/Footer/WhiteboardToggle.tsx
-init_define_process_env();
-import React10 from "react";
-import { selectPeerScreenSharing, useHMSStore as useHMSStore3, useWhiteboard } from "@100mslive/react-sdk";
-import { PencilDrawIcon } from "@100mslive/react-icons";
-var WhiteboardToggle = () => {
-  const { toggle, open, isOwner } = useWhiteboard();
-  const peerSharing = useHMSStore3(selectPeerScreenSharing);
-  const disabled = !!peerSharing || open && !isOwner;
-  if (!toggle) {
-    return null;
-  }
-  return /* @__PURE__ */ React10.createElement(
-    Tooltip,
-    {
-      key: "whiteboard",
-      title: peerSharing ? "Cannot open whiteboard when viewing a shared screen" : `${open ? "Close" : "Open"} Whiteboard`
-    },
-    /* @__PURE__ */ React10.createElement(
-      IconButton_default,
-      {
-        onClick: () => __async(void 0, null, function* () {
-          if (disabled) {
-            return;
-          }
-          try {
-            yield toggle();
-          } catch (error) {
-            ToastManager.addToast({ title: error.message, variant: "error" });
-          }
-        }),
-        active: !open,
-        disabled,
-        "data-testid": "whiteboard_btn"
-      },
-      /* @__PURE__ */ React10.createElement(PencilDrawIcon, null)
-    )
-  );
-};
-
-// src/Prebuilt/components/Footer/Footer.tsx
-var Footer2 = ({
-  screenType,
-  elements
-}) => {
-  var _a, _b;
-  const isMobile = useMedia(config.media.md);
-  const isOverlayChat = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay);
-  const openByDefault = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.initial_state) === Chat_ChatState.CHAT_STATE_OPEN;
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const { showPolls } = useShowPolls();
-  useEffect2(() => {
-    if (!isChatOpen && openByDefault) {
-      toggleChat();
-    }
-  }, [toggleChat, openByDefault]);
-  return /* @__PURE__ */ React11.createElement(
-    Footer.Root,
-    {
-      css: {
-        flexWrap: "nowrap",
-        "@md": {
-          justifyContent: "center",
-          gap: "$10",
-          position: "relative",
-          // To prevent it from showing over the sidepane if chat type is not overlay
-          zIndex: isOverlayChat && isChatOpen ? 20 : 1
-        }
-      }
-    },
-    /* @__PURE__ */ React11.createElement(
-      Footer.Left,
-      {
-        css: {
-          "@md": {
-            w: "unset",
-            p: "0",
-            gap: "$10"
-          }
-        }
-      },
-      isMobile ? /* @__PURE__ */ React11.createElement(LeaveRoom, { screenType }) : null,
-      /* @__PURE__ */ React11.createElement(AudioVideoToggle, null),
-      !isMobile && elements.virtual_background ? /* @__PURE__ */ React11.createElement(VBToggle, null) : null
-    ),
-    /* @__PURE__ */ React11.createElement(
-      Footer.Center,
-      {
-        css: {
-          "@md": {
-            w: "unset",
-            gap: "$10"
-          }
-        }
-      },
-      isMobile ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ScreenshareToggle, null), /* @__PURE__ */ React11.createElement(RaiseHand, null), (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React11.createElement(ChatToggle, null), /* @__PURE__ */ React11.createElement(MoreSettings, { elements, screenType })) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(ScreenshareToggle, null), /* @__PURE__ */ React11.createElement(RaiseHand, null), screenType !== "hls_live_streaming" && /* @__PURE__ */ React11.createElement(CaptionIcon, null), (elements == null ? void 0 : elements.emoji_reactions) && /* @__PURE__ */ React11.createElement(EmojiReaction, null), /* @__PURE__ */ React11.createElement(LeaveRoom, { screenType }))
-    ),
-    /* @__PURE__ */ React11.createElement(Footer.Right, null, /* @__PURE__ */ React11.createElement(WhiteboardToggle, null), showPolls && /* @__PURE__ */ React11.createElement(PollsToggle, null), !isMobile && (elements == null ? void 0 : elements.chat) && /* @__PURE__ */ React11.createElement(ChatToggle, null), (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React11.createElement(ParticipantCount, null), /* @__PURE__ */ React11.createElement(MoreSettings, { elements, screenType }))
-  );
-};
-
-// src/Prebuilt/components/Notifications/HLSFailureModal.tsx
-init_define_process_env();
-import React12, { useCallback, useState as useState3 } from "react";
-import { selectHLSState, useHMSActions, useHMSStore as useHMSStore4, useRecordingStreaming } from "@100mslive/react-sdk";
-function HLSFailureModal() {
-  const hlsError = useHMSStore4(selectHLSState).error || false;
-  const [openModal, setOpenModal] = useState3(!!hlsError);
-  const hmsActions = useHMSActions();
-  const { isRTMPRunning } = useRecordingStreaming();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback(() => __async(this, null, function* () {
-    try {
-      if (isHLSStarted || isRTMPRunning) {
-        return;
-      }
-      setHLSStarted(true);
-      yield hmsActions.startHLSStreaming({});
-    } catch (error) {
-      console.error(error);
-      setHLSStarted(false);
-    }
-  }), [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);
-  return hlsError ? /* @__PURE__ */ React12.createElement(
-    Dialog.Root,
-    {
-      open: openModal,
-      onOpenChange: (value) => {
-        if (!value) {
-          setOpenModal(false);
-        }
-      }
-    },
-    /* @__PURE__ */ React12.createElement(Dialog.Portal, null, /* @__PURE__ */ React12.createElement(Dialog.Overlay, null), /* @__PURE__ */ React12.createElement(Dialog.Content, { css: { w: "min(360px, 90%)" } }, /* @__PURE__ */ React12.createElement(
-      Dialog.Title,
-      {
-        css: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderBottom: "1px solid $border_default",
-          mt: "$4"
-        }
-      },
-      /* @__PURE__ */ React12.createElement(Text, { variant: "h6", css: { fontWeight: "$semiBold" } }, "Failed to Go Live")
-    ), /* @__PURE__ */ React12.createElement(Text, { variant: "sm", css: { mb: "$10", color: "$on_surface_medium" } }, "Something went wrong and your live broadcast failed. Please try again."), /* @__PURE__ */ React12.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", gap: "$8" } }, /* @__PURE__ */ React12.createElement(Button, { outlined: true, variant: "standard", css: { w: "100%" }, onClick: () => setOpenModal(false) }, "Dismiss"), /* @__PURE__ */ React12.createElement(Button, { css: { w: "100%" }, onClick: startHLS }, "Go Live"))))
-  ) : null;
-}
-
-// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
-init_define_process_env();
-import React14, { useEffect as useEffect3 } from "react";
-import {
-  selectIsInPreview,
-  selectLocalPeerName,
-  selectLocalPeerRoleName,
-  selectRoleChangeRequest,
-  useCustomEvent,
-  useHMSActions as useHMSActions2,
-  useHMSStore as useHMSStore5
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
-init_define_process_env();
-import React13 from "react";
-import { useMedia as useMedia2 } from "react-use";
-var RequestPrompt = ({
-  open = true,
-  onOpenChange,
-  title,
-  body,
-  actionText = "Accept",
-  onAction,
-  disableActions = false
-}) => {
-  const isMobile = useMedia2(config.media.md);
-  if (isMobile) {
-    return /* @__PURE__ */ React13.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Sheet.Content, { css: { py: "$8" } }, /* @__PURE__ */ React13.createElement(Text, { css: { fontWeight: "$semiBold", c: "$on_surface_high", "@md": { px: "$8" } } }, title), body, /* @__PURE__ */ React13.createElement(RequestActions, { actionText, onAction, disabled: disableActions })));
-  }
-  return /* @__PURE__ */ React13.createElement(Dialog.Root, { open, modal: false, onOpenChange }, /* @__PURE__ */ React13.createElement(Dialog.Portal, null, /* @__PURE__ */ React13.createElement(Dialog.Content, { css: { p: "$10" }, onInteractOutside: (e) => e.preventDefault() }, /* @__PURE__ */ React13.createElement(Dialog.Title, { css: { p: 0, display: "flex", flexDirection: "row", gap: "$md", justifyContent: "center" } }, /* @__PURE__ */ React13.createElement(Text, { variant: "h6" }, title)), /* @__PURE__ */ React13.createElement(Box, { css: { mt: "$4", mb: "$10" } }, body), /* @__PURE__ */ React13.createElement(RequestActions, { actionText, onAction, disabled: disableActions }))));
-};
-var RequestActions = ({
-  onAction,
-  actionText,
-  disabled = false
-}) => /* @__PURE__ */ React13.createElement(Flex, { justify: "center", align: "center", css: { width: "100%", gap: "$md", "@md": { mt: "$8", px: "$8" } } }, /* @__PURE__ */ React13.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React13.createElement(Dialog.Close, { css: { width: "100%", height: "100%" }, asChild: true }, /* @__PURE__ */ React13.createElement(Button, { variant: "standard", outlined: true, css: { width: "100%", p: "$4 $8" }, disabled }, "Decline"))), /* @__PURE__ */ React13.createElement(Box, { css: { width: "50%" } }, /* @__PURE__ */ React13.createElement(Button, { variant: "primary", css: { width: "100%" }, onClick: onAction, disabled }, actionText)));
-
-// src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx
-var RoleChangeRequestModal = () => {
-  const hmsActions = useHMSActions2();
-  const { updateMetaData } = useMyMetadata();
-  const isPreview = useHMSStore5(selectIsInPreview);
-  const currentRole = useHMSStore5(selectLocalPeerRoleName);
-  const roleChangeRequest = useHMSStore5(selectRoleChangeRequest);
-  const name = useHMSStore5(selectLocalPeerName);
-  const { sendEvent } = useCustomEvent({ type: ROLE_CHANGE_DECLINED });
-  const { elements = {} } = useRoomLayoutPreviewScreen();
-  const { virtual_background } = elements || {};
-  useEffect3(() => {
-    if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-      return;
-    }
-    (() => __async(void 0, null, function* () {
-      yield hmsActions.preview({ asRole: roleChangeRequest.role.name });
-    }))();
-  }, [hmsActions, roleChangeRequest, currentRole, updateMetaData]);
-  if (!(roleChangeRequest == null ? void 0 : roleChangeRequest.role)) {
-    return null;
-  }
-  const body = /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
-    Text,
-    {
-      variant: "xs",
-      css: {
-        c: "$on_surface_medium",
-        textAlign: "center",
-        "@md": { textAlign: "left", borderBottom: "1px solid $border_bright", pb: "$4", px: "$8" }
-      }
-    },
-    "Setup your audio and video before joining"
-  ), /* @__PURE__ */ React14.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: {
-        "@sm": { width: "100%" },
-        flexDirection: "column",
-        mt: "$6",
-        "@md": { px: "$8" }
-      }
-    },
-    /* @__PURE__ */ React14.createElement(PreviewTile, { name: name || "" }),
-    /* @__PURE__ */ React14.createElement(PreviewControls, { hideSettings: true, vbEnabled: !!virtual_background })
-  ));
-  return /* @__PURE__ */ React14.createElement(
-    RequestPrompt,
-    {
-      title: "You're invited to join the stage",
-      onOpenChange: (value) => __async(void 0, null, function* () {
-        var _a;
-        if (!value) {
-          hmsActions.rejectChangeRole(roleChangeRequest);
-          sendEvent(__spreadProps(__spreadValues({}, roleChangeRequest), { peerName: name }), { peerId: (_a = roleChangeRequest.requestedBy) == null ? void 0 : _a.id });
-          yield hmsActions.cancelMidCallPreview();
-          yield hmsActions.lowerLocalPeerHand();
-        }
-      }),
-      body,
-      onAction: () => __async(void 0, null, function* () {
-        yield hmsActions.acceptChangeRole(roleChangeRequest);
-        yield updateMetaData({ prevRole: currentRole });
-        yield hmsActions.lowerLocalPeerHand();
-      }),
-      actionText: "Accept",
-      disableActions: !isPreview
-    }
-  );
-};
-
-// src/Prebuilt/layouts/VideoStreamingSection.tsx
-init_define_process_env();
-import React18, { Suspense as Suspense2, useEffect as useEffect8, useState as useState7 } from "react";
-import { useMedia as useMedia5 } from "react-use";
-import { match } from "ts-pattern";
-import {
-  selectIsConnectedToRoom,
-  selectIsLocalScreenShared,
-  selectLocalPeerRoleName as selectLocalPeerRoleName3,
-  useHMSActions as useHMSActions3,
-  useHMSStore as useHMSStore9
-} from "@100mslive/react-sdk";
-import { PeopleAddIcon as PeopleAddIcon2, ShareScreenIcon as ShareScreenIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-init_define_process_env();
-import React16, { Suspense, useEffect as useEffect5, useMemo, useState as useState5 } from "react";
-import {
-  selectLocalPeerID,
-  selectLocalPeerRoleName as selectLocalPeerRoleName2,
-  selectPeers,
-  selectPeerScreenSharing as selectPeerScreenSharing2,
-  selectWhiteboard,
-  useHMSStore as useHMSStore6,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/VideoLayouts/EqualProminence.tsx
-init_define_process_env();
-import React15, { useEffect as useEffect4, useState as useState4 } from "react";
-import { useMedia as useMedia3 } from "react-use";
-import { PeopleAddIcon } from "@100mslive/react-icons";
-function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }) {
-  var _a;
-  const isMobile = useMedia3(config.media.md);
-  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
-  const pageList = usePagesWithTiles({
-    peers,
-    maxTileCount
-  });
-  const { ref, pagesWithTiles } = useTileLayout({
-    pageList,
-    maxTileCount,
-    edgeToEdge
-  });
-  const [page, setPage] = useState4(0);
-  const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
-  useEffect4(() => {
-    if (pageSize > 0) {
-      onPageSize == null ? void 0 : onPageSize(pageSize);
-    }
-  }, [pageSize, onPageSize]);
-  return /* @__PURE__ */ React15.createElement(Flex, { direction: "column", css: { flex: "1 1 0", h: "100%", position: "relative", minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Grid, { tiles: pagesWithTiles[page], ref, edgeToEdge }), !edgeToEdge && /* @__PURE__ */ React15.createElement(
-    Pagination,
-    {
-      page,
-      onPageChange: (page2) => {
-        setPage(page2);
-        onPageChange == null ? void 0 : onPageChange(page2);
-      },
-      numPages: pagesWithTiles.length
-    }
-  ), pageList.length === 0 ? /* @__PURE__ */ React15.createElement(
-    WaitingView,
-    {
-      title: "You're the only one here",
-      subtitle: "Sit back and relax till others join",
-      icon: /* @__PURE__ */ React15.createElement(PeopleAddIcon, { width: "56px", height: "56px", style: { color: "white" } })
-    }
-  ) : null, isInsetEnabled && /* @__PURE__ */ React15.createElement(InsetTile, null));
-}
-
-// src/Prebuilt/common/PeersSorter.ts
-init_define_process_env();
-import { selectDominantSpeaker } from "@100mslive/react-sdk";
-var PeersSorter = class {
-  constructor(store) {
-    this.storeUnsubscribe = void 0;
-    this.setPeersAndTilesPerPage = ({ peers, tilesPerPage }) => {
-      this.speaker = void 0;
-      this.tilesPerPage = tilesPerPage;
-      const peerIds = new Set(peers.map((peer) => peer.id));
-      this.peers.forEach((_, key) => {
-        if (!peerIds.has(key)) {
-          this.peers.delete(key);
-        }
-      });
-      this.lruPeers = new Set([...this.lruPeers].filter((peerId) => peerIds.has(peerId)));
-      peers.forEach((peer) => {
-        this.peers.set(peer.id, peer);
-        if (this.lruPeers.size < tilesPerPage) {
-          this.lruPeers.add(peer.id);
-        }
-      });
-      if (!this.storeUnsubscribe) {
-        this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, selectDominantSpeaker);
-      }
-      this.moveSpeakerToFront(this.speaker);
-    };
-    this.onUpdate = (cb) => {
-      this.listeners.add(cb);
-    };
-    this.stop = () => {
-      var _a;
-      this.updateListeners();
-      this.listeners.clear();
-      (_a = this.storeUnsubscribe) == null ? void 0 : _a.call(this);
-      this.storeUnsubscribe = void 0;
-      this.speaker = void 0;
-    };
-    this.moveSpeakerToFront = (speaker) => {
-      if (!speaker) {
-        this.maintainLruSize(this.tilesPerPage);
-        this.updateListeners();
-        return;
-      }
-      if (this.lruPeers.has(speaker.id) && this.lruPeers.size <= this.tilesPerPage) {
-        this.updateListeners();
-        return;
-      }
-      this.lruPeers.delete(speaker.id);
-      this.maintainLruSize(this.tilesPerPage - 1);
-      this.lruPeers = /* @__PURE__ */ new Set([speaker.id, ...this.lruPeers]);
-      this.updateListeners();
-    };
-    this.onDominantSpeakerChange = (speaker) => {
-      var _a;
-      if (!speaker || speaker.id === ((_a = this.speaker) == null ? void 0 : _a.id)) {
-        return;
-      }
-      if (!this.peers.has(speaker.id)) {
-        return;
-      }
-      this.speaker = speaker;
-      this.moveSpeakerToFront(speaker);
-    };
-    this.updateListeners = () => {
-      const orderedPeers = [];
-      this.lruPeers.forEach((key) => {
-        const peer = this.peers.get(key);
-        if (peer) {
-          orderedPeers.push(peer);
-        }
-      });
-      this.peers.forEach((peer) => {
-        if (!this.lruPeers.has(peer.id) && peer) {
-          orderedPeers.push(peer);
-        }
-      });
-      this.listeners.forEach((listener) => listener == null ? void 0 : listener(orderedPeers));
-    };
-    this.maintainLruSize = (size) => {
-      const lruPeerArray = Array.from(this.lruPeers);
-      while (lruPeerArray.length > size && lruPeerArray.length) {
-        lruPeerArray.pop();
-      }
-      this.lruPeers = new Set(lruPeerArray);
-    };
-    this.store = store;
-    this.peers = /* @__PURE__ */ new Map();
-    this.lruPeers = /* @__PURE__ */ new Set();
-    this.speaker = void 0;
-    this.listeners = /* @__PURE__ */ new Set();
-  }
-};
-var PeersSorter_default = PeersSorter;
-
-// src/Prebuilt/components/VideoLayouts/GridLayout.tsx
-var RoleProminence = React16.lazy(
-  () => import("./RoleProminence-235AFT7F.js").then((module) => ({ default: module.RoleProminence }))
-);
-var ScreenshareLayout = React16.lazy(
-  () => import("./ScreenshareLayout-PSQMS3NC.js").then((module) => ({ default: module.ScreenshareLayout }))
-);
-var WhiteboardLayout = React16.lazy(
-  () => import("./WhiteboardLayout-4YLFM3EY.js").then((module) => ({ default: module.WhiteboardLayout }))
-);
-var GridLayout = ({
-  enable_local_tile_inset: isInsetEnabled = false,
-  prominent_roles: prominentRoles = [],
-  enable_spotlighting_peer = false,
-  hide_participant_name_on_tile = false,
-  rounded_video_tile = true,
-  hide_audio_mute_on_tile = false,
-  video_object_fit = "contain",
-  edge_to_edge = false,
-  hide_metadata_on_tile = false
-}) => {
-  const peerSharing = useHMSStore6(selectPeerScreenSharing2);
-  const whiteboard = useHMSStore6(selectWhiteboard);
-  const pinnedTrack = usePinnedTrack();
-  const peers = useHMSStore6(selectPeers);
-  const localPeerRole = useHMSStore6(selectLocalPeerRoleName2);
-  const localPeerID = useHMSStore6(selectLocalPeerID);
-  const [activeScreensharePeerId] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
-  const isRoleProminence = prominentRoles.length && peers.some(
-    (peer) => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack)
-  ) || pinnedTrack;
-  const updatedPeers = useMemo(() => {
-    if (activeScreensharePeerId || (whiteboard == null ? void 0 : whiteboard.open)) {
-      return peers.filter((peer) => peer.id !== activeScreensharePeerId || peer.customerUserId !== (whiteboard == null ? void 0 : whiteboard.owner));
-    }
-    if (isInsetEnabled) {
-      const isLocalPeerPinned = localPeerID === (pinnedTrack == null ? void 0 : pinnedTrack.peerId);
-      if (localPeerRole && prominentRoles.includes(localPeerRole) || isLocalPeerPinned) {
-        return peers;
-      } else {
-        return peers.filter((peer) => !peer.isLocal);
-      }
-    }
-    return peers;
-  }, [
-    isInsetEnabled,
-    whiteboard,
-    activeScreensharePeerId,
-    localPeerRole,
-    localPeerID,
-    prominentRoles,
-    peers,
-    pinnedTrack
-  ]);
-  const vanillaStore = useHMSVanillaStore();
-  const [sortedPeers, setSortedPeers] = useState5(updatedPeers);
-  const peersSorter = useMemo(() => new PeersSorter_default(vanillaStore), [vanillaStore]);
-  const [pageSize, setPageSize] = useState5(0);
-  const [mainPage, setMainPage] = useState5(0);
-  const tileLayout = {
-    enableSpotlightingPeer: enable_spotlighting_peer,
-    hideParticipantNameOnTile: hide_participant_name_on_tile,
-    roundedVideoTile: rounded_video_tile,
-    hideAudioMuteOnTile: hide_audio_mute_on_tile,
-    hideMetadataOnTile: hide_metadata_on_tile,
-    objectFit: video_object_fit
-  };
-  useEffect5(() => {
-    if (mainPage !== 0) {
-      return;
-    }
-    peersSorter.setPeersAndTilesPerPage({
-      peers: updatedPeers,
-      tilesPerPage: pageSize
-    });
-    peersSorter.onUpdate(setSortedPeers);
-  }, [mainPage, peersSorter, updatedPeers, pageSize]);
-  if (peerSharing) {
-    return /* @__PURE__ */ React16.createElement(Suspense, { fallback: /* @__PURE__ */ React16.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React16.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React16.createElement(
-      ScreenshareLayout,
-      {
-        peers: sortedPeers,
-        onPageSize: setPageSize,
-        onPageChange: setMainPage,
-        edgeToEdge: edge_to_edge
-      }
-    )));
-  } else if (whiteboard == null ? void 0 : whiteboard.open) {
-    return /* @__PURE__ */ React16.createElement(Suspense, { fallback: /* @__PURE__ */ React16.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React16.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React16.createElement(
-      WhiteboardLayout,
-      {
-        peers: sortedPeers,
-        onPageSize: setPageSize,
-        onPageChange: setMainPage,
-        edgeToEdge: edge_to_edge
-      }
-    )));
-  } else if (isRoleProminence) {
-    return /* @__PURE__ */ React16.createElement(Suspense, { fallback: /* @__PURE__ */ React16.createElement(FullPageProgress_default, null) }, /* @__PURE__ */ React16.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React16.createElement(
-      RoleProminence,
-      {
-        peers: sortedPeers,
-        onPageSize: setPageSize,
-        onPageChange: setMainPage,
-        prominentRoles,
-        isInsetEnabled,
-        edgeToEdge: edge_to_edge
-      }
-    )));
-  }
-  return /* @__PURE__ */ React16.createElement(VideoTileContext.Provider, { value: tileLayout }, /* @__PURE__ */ React16.createElement(
-    EqualProminence,
-    {
-      peers: sortedPeers,
-      onPageSize: setPageSize,
-      onPageChange: setMainPage,
-      isInsetEnabled,
-      edgeToEdge: edge_to_edge
-    }
-  ));
-};
-
-// src/Prebuilt/plugins/CaptionsViewer.tsx
-init_define_process_env();
-import React17, { useEffect as useEffect6, useRef, useState as useState6 } from "react";
-import Draggable from "react-draggable";
-import { useMedia as useMedia4 } from "react-use";
-import {
-  selectIsTranscriptionEnabled as selectIsTranscriptionEnabled2,
-  selectPeerNameByID,
-  useHMSStore as useHMSStore7,
-  useTranscript
-} from "@100mslive/react-sdk";
-var SimpleQueue = class {
-  constructor(capacity = 3, MAX_STORAGE_TIME = 5e3) {
-    this.capacity = capacity;
-    this.MAX_STORAGE_TIME = MAX_STORAGE_TIME;
-    this.storage = [];
-  }
-  enqueue(data) {
-    var _a;
-    if (!data.transcript.trim()) {
-      return;
-    }
-    if (this.size() === this.capacity && this.storage[this.size() - 1].final) {
-      this.dequeue(this.storage[this.size() - 1]);
-    }
-    if (this.size() === 0) {
-      this.storage.push(data);
-      this.addTimeout(this.storage[this.size() - 1], data.final);
-      return;
-    }
-    if (this.size() > 0 && ((_a = this.storage[this.size() - 1]) == null ? void 0 : _a.final) === true) {
-      this.storage.push(data);
-      this.addTimeout(this.storage[this.size() - 1], data.final);
-      return;
-    }
-    this.storage[this.size() - 1].transcript = data.transcript;
-    this.storage[this.size() - 1].final = data.final;
-    this.storage[this.size() - 1].end = data.end;
-    this.addTimeout(this.storage[this.size() - 1], data.final);
-  }
-  addTimeout(item, isFinal) {
-    if (!isFinal) {
-      return;
-    }
-    item.timeout = setTimeout(() => {
-      this.dequeue(item);
-    }, this.MAX_STORAGE_TIME);
-  }
-  dequeue(item) {
-    const index = this.storage.indexOf(item);
-    if (index === -1) {
-      return void 0;
-    }
-    const removedItem = this.storage.splice(index, 1);
-    if (removedItem.length <= 0) {
-      return void 0;
-    }
-    this.clearTimeout(removedItem[0]);
-    return item;
-  }
-  clearTimeout(item) {
-    if (!item.timeout) {
-      return;
-    }
-    clearTimeout(item.timeout);
-  }
-  peek() {
-    if (this.size() <= 0) {
-      return void 0;
-    }
-    return this.storage[0];
-  }
-  getTranscription() {
-    let script = "";
-    this.storage.forEach((value) => script += value.transcript + " ");
-    return script;
-  }
-  reset() {
-    this.storage.length = 0;
-  }
-  size() {
-    return this.storage.length;
-  }
-};
-var Queue = class {
-  constructor(capacity = 3) {
-    this.capacity = capacity;
-    this.storage = {};
-  }
-  enqueue(data) {
-    if (this.size() === this.capacity) {
-      this.dequeue();
-    }
-    if (!this.storage[data.peer_id]) {
-      this.storage[data.peer_id] = {
-        peer_id: data.peer_id,
-        transcript: data.transcript,
-        final: data.final,
-        transcriptQueue: new SimpleQueue(),
-        start: data.start,
-        end: data.end
-      };
-      this.storage[data.peer_id].transcriptQueue.enqueue(data);
-      return;
-    }
-    this.storage[data.peer_id].transcriptQueue.enqueue(data);
-  }
-  dequeue() {
-    const key = Object.keys(this.storage).shift() || "";
-    const captionData = this.storage[key];
-    captionData.transcriptQueue.reset();
-    delete this.storage[key];
-    return captionData;
-  }
-  peek() {
-    if (this.size() <= 0)
-      return void 0;
-    const key = Object.keys(this.storage).shift() || "";
-    return this.storage[key];
-  }
-  findPeerData() {
-    const keys = Object.keys(this.storage);
-    const data = keys.map((key) => {
-      const data2 = this.storage[key];
-      const word = data2.transcriptQueue.getTranscription();
-      return { [key]: word };
-    });
-    return data;
-  }
-  size() {
-    return Object.keys(this.storage).length;
-  }
-};
-var CaptionMaintainerQueue = class {
-  constructor() {
-    this.captionData = new Queue();
-  }
-  push(data = []) {
-    data.forEach((value) => {
-      this.captionData.enqueue(value);
-    });
-  }
-};
-var TranscriptView = ({ peer_id, data }) => {
-  const peerName = useHMSStore7(selectPeerNameByID(peer_id)) || "Participant";
-  data = data.trim();
-  if (!data)
-    return null;
-  return /* @__PURE__ */ React17.createElement(
-    Text,
-    {
-      variant: "body2",
-      css: {
-        fontWeight: "$normal"
-      }
-    },
-    /* @__PURE__ */ React17.createElement("b", null, peerName, ": "),
-    data
-  );
-};
-var CaptionsViewer = ({
-  defaultPosition,
-  setDefaultPosition
-}) => {
-  var _a;
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const isMobile = useMedia4(config.media.md);
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const showCaptionAtTop = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && isChatOpen && isMobile;
-  const [captionQueue] = useState6(new CaptionMaintainerQueue());
-  const [currentData, setCurrentData] = useState6([]);
-  const isCaptionEnabled = useIsCaptionEnabled();
-  const isTranscriptionEnabled = useHMSStore7(selectIsTranscriptionEnabled2);
-  const nodeRef = useRef(null);
-  useEffect6(() => {
-    const timeInterval = setInterval(() => {
-      var _a2;
-      if (!captionQueue) {
-        return;
-      }
-      const data = (_a2 = captionQueue.captionData) == null ? void 0 : _a2.findPeerData();
-      setCurrentData(data);
-    }, 1e3);
-    return () => clearInterval(timeInterval);
-  }, [captionQueue]);
-  useTranscript({
-    onTranscript: (data) => {
-      captionQueue && captionQueue.push(data);
-    }
-  });
-  const dataToShow = currentData.filter((data) => {
-    const key = Object.keys(data)[0];
-    if (data[key]) {
-      return true;
-    }
-    return false;
-  });
-  if (dataToShow.length <= 0 || screenType === "hls_live_streaming" || !isCaptionEnabled || !isTranscriptionEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ React17.createElement(
-    Draggable,
-    {
-      bounds: "parent",
-      nodeRef,
-      defaultPosition,
-      onStop: (_, data) => {
-        setDefaultPosition({ x: data.lastX, y: data.lastY });
-      }
-    },
-    /* @__PURE__ */ React17.createElement(
-      Box,
-      {
-        ref: nodeRef,
-        css: {
-          position: "absolute",
-          w: isMobile ? "100%" : "40%",
-          bottom: showCaptionAtTop ? "" : "0",
-          top: showCaptionAtTop ? "0" : "",
-          left: isMobile ? 0 : "50%",
-          transform: isMobile ? "" : "translateX(-50%)",
-          background: "#000000A3",
-          overflow: "clip",
-          zIndex: 10,
-          height: "fit-content",
-          r: "$1",
-          p: "$6",
-          transition: "bottom 0.3s ease-in-out",
-          "&:empty": { display: "none" }
-        }
-      },
-      /* @__PURE__ */ React17.createElement(Flex, { direction: "column" }, dataToShow.map((data, index) => {
-        const key = Object.keys(data)[0];
-        return /* @__PURE__ */ React17.createElement(TranscriptView, { key: index, peer_id: key, data: data[key] });
-      }))
-    )
-  );
-};
-
-// src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx
-init_define_process_env();
-import { useEffect as useEffect7 } from "react";
-import { selectPeerScreenSharing as selectPeerScreenSharing3, useHMSStore as useHMSStore8, useWhiteboard as useWhiteboard2 } from "@100mslive/react-sdk";
-var useCloseScreenshareWhiteboard = () => {
-  const peerSharing = useHMSStore8(selectPeerScreenSharing3);
-  const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard2();
-  useEffect7(() => {
-    if (isWhiteboardOwner && peerSharing) {
-      toggleWhiteboard == null ? void 0 : toggleWhiteboard();
-    }
-  }, [isWhiteboardOwner, toggleWhiteboard, peerSharing]);
-};
-
-// src/Prebuilt/layouts/VideoStreamingSection.tsx
-var HLSView = React18.lazy(() => import("./HLSView-Q6GEB3UM.js"));
-var EmbedView = React18.lazy(() => import("./EmbedView-DDSO7ZCV.js").then((module) => ({ default: module.EmbedView })));
-var PDFView = React18.lazy(() => import("./PDFView-ZFSG2ESE.js").then((module) => ({ default: module.PDFView })));
-var WaitingView2 = React18.lazy(() => import("./WaitingView-NZIUOXBI.js").then((module) => ({ default: module.WaitingView })));
-var VideoStreamingSection = ({
-  screenType,
-  elements,
-  hideControls = false
-}) => {
-  var _a;
-  const localPeerRoleName = useHMSStore9(selectLocalPeerRoleName3);
-  const isConnected = useHMSStore9(selectIsConnectedToRoom);
-  const isSharingScreen = useHMSStore9(selectIsLocalScreenShared);
-  const hmsActions = useHMSActions3();
-  const urlToIframe = useUrlToEmbed();
-  const pdfAnnotatorActive = usePDFConfig();
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const isMobile = useMedia5(config.media.md);
-  const [captionPosition, setCaptionPosition] = useState7({ x: isMobile ? 0 : -200, y: 0 });
-  useCloseScreenshareWhiteboard();
-  const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();
-  useEffect8(() => {
-    if (!isConnected) {
-      return;
-    }
-    hmsActions.sessionStore.observe([
-      "pinnedMessages" /* PINNED_MESSAGES */,
-      "spotlight" /* SPOTLIGHT */,
-      "chatState" /* CHAT_STATE */,
-      "chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */,
-      "chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */
-    ]);
-  }, [isConnected, hmsActions]);
-  if (!localPeerRoleName) {
-    return null;
-  }
-  return /* @__PURE__ */ React18.createElement(
-    Flex,
-    {
-      css: {
-        size: "100%",
-        position: "relative",
-        gap: isMobileHLSStream || isLandscapeHLSStream ? "0" : "$4"
-      },
-      direction: match({ isLandscapeHLSStream, isMobileHLSStream }).with({ isLandscapeHLSStream: true }, () => "row").with({ isMobileHLSStream: true }, () => "column").otherwise(() => "row")
-    },
-    /* @__PURE__ */ React18.createElement(Suspense2, { fallback: /* @__PURE__ */ React18.createElement(FullPageProgress_default, null) }, match({
-      screenType,
-      isNotAllowedToPublish,
-      isScreenOnlyPublishParams,
-      hasSubscribedRolePublishing,
-      isSharingScreen,
-      pdfAnnotatorActive,
-      urlToIframe
-    }).with(
-      {
-        screenType: "hls_live_streaming"
-      },
-      () => /* @__PURE__ */ React18.createElement(HLSView, null)
-    ).when(
-      ({ isNotAllowedToPublish: isNotAllowedToPublish2, hasSubscribedRolePublishing: hasSubscribedRolePublishing2 }) => isNotAllowedToPublish2 && !hasSubscribedRolePublishing2,
-      () => /* @__PURE__ */ React18.createElement(
-        WaitingView2,
-        {
-          title: "Waiting for Host to join",
-          subtitle: "Sit back and relax",
-          icon: /* @__PURE__ */ React18.createElement(PeopleAddIcon2, { width: "56px", height: "56px", style: { color: "white" } })
-        }
-      )
-    ).when(
-      ({ isScreenOnlyPublishParams: isScreenOnlyPublishParams2, isSharingScreen: isSharingScreen2, hasSubscribedRolePublishing: hasSubscribedRolePublishing2 }) => isScreenOnlyPublishParams2 && !isSharingScreen2 && !hasSubscribedRolePublishing2,
-      () => /* @__PURE__ */ React18.createElement(
-        WaitingView2,
-        {
-          title: "Ready to present",
-          subtitle: "Select the Screenshare button to start presenting",
-          icon: /* @__PURE__ */ React18.createElement(ShareScreenIcon2, { width: "56px", height: "56px", style: { color: "white" } })
-        }
-      )
-    ).when(
-      ({ pdfAnnotatorActive: pdfAnnotatorActive2 }) => !!pdfAnnotatorActive2,
-      () => /* @__PURE__ */ React18.createElement(PDFView, null)
-    ).when(
-      ({ urlToIframe: urlToIframe2 }) => !!urlToIframe2,
-      () => /* @__PURE__ */ React18.createElement(EmbedView, null)
-    ).otherwise(() => {
-      var _a2;
-      return /* @__PURE__ */ React18.createElement(GridLayout, __spreadValues({}, (_a2 = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a2.grid));
-    }), /* @__PURE__ */ React18.createElement(CaptionsViewer, { setDefaultPosition: setCaptionPosition, defaultPosition: captionPosition })),
-    /* @__PURE__ */ React18.createElement(
-      Box,
-      {
-        css: {
-          flex: match({ isLandscapeHLSStream, isMobileHLSStream }).with({ isLandscapeHLSStream: true }, () => "1  1 0").with({ isMobileHLSStream: true }, () => "2 1 0").otherwise(() => void 0),
-          position: "relative",
-          height: !isMobileHLSStream ? "100%" : void 0,
-          maxHeight: "100%",
-          "&:empty": { display: "none" },
-          overflowY: "clip"
-        }
-      },
-      /* @__PURE__ */ React18.createElement(Suspense2, { fallback: /* @__PURE__ */ React18.createElement(React18.Fragment, null) }, /* @__PURE__ */ React18.createElement(
-        SidePane_default,
-        {
-          screenType,
-          tileProps: (_a = elements == null ? void 0 : elements.video_tile_layout) == null ? void 0 : _a.grid,
-          hideControls
-        }
-      ))
-    )
-  );
-};
-
-// src/Prebuilt/components/PreviousRoleInMetadata.tsx
-init_define_process_env();
-import { useEffect as useEffect9 } from "react";
-import { selectLocalPeerRoleName as selectLocalPeerRoleName4, useHMSVanillaStore as useHMSVanillaStore2 } from "@100mslive/react-sdk";
-var PreviousRoleInMetadata = () => {
-  const vanillaStore = useHMSVanillaStore2();
-  const { updateMetaData } = useMyMetadata();
-  useEffect9(() => {
-    let previousRole = vanillaStore.getState(selectLocalPeerRoleName4);
-    const unsubscribe = vanillaStore.subscribe((currentRole) => {
-      if (previousRole !== currentRole && currentRole) {
-        updateMetaData({ prevRole: previousRole });
-        previousRole = currentRole;
-      }
-    }, selectLocalPeerRoleName4);
-    return unsubscribe;
-  }, [vanillaStore]);
-  return null;
-};
-
-// src/Prebuilt/components/ConferenceScreen.tsx
-var ConferenceScreen = () => {
-  var _a, _b, _c, _d, _e, _f;
-  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
-  const screenProps = useRoomLayoutConferencingScreen();
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const roomState = useHMSStore10(selectRoomState);
-  const isConnectedToRoom = useHMSStore10(selectIsConnectedToRoom2);
-  const hmsActions = useHMSActions4();
-  const [hideControls, setHideControls] = useState8(false);
-  const dropdownList = useHMSStore10(selectAppData(APP_DATA.dropdownList));
-  const authTokenInAppData = useAuthToken();
-  const headerRef = useRef2(null);
-  const footerRef = useRef2(null);
-  const isMobileDevice = isAndroid || isIOS || isIPadOS;
-  const dropdownListRef = useRef2();
-  const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const { requestPermission } = useAwayNotifications2();
-  const showChat = !!((_a = screenProps.elements) == null ? void 0 : _a.chat);
-  const autoRoomJoined = useRef2(isPreviewScreenEnabled);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
-  const toggleControls = () => {
-    var _a2;
-    if (((_a2 = dropdownListRef.current) == null ? void 0 : _a2.length) === 0 && isMobileDevice && !isMwebHLSStream) {
-      setHideControls((value) => !value);
-    }
-  };
-  useEffect10(() => {
-    let timeout;
-    dropdownListRef.current = dropdownList || [];
-    if (dropdownListRef.current && dropdownListRef.current.length === 0) {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        if (dropdownListRef.current && dropdownListRef.current.length === 0) {
-          setHideControls(isMobileDevice);
-        }
-      }, 5e3);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [dropdownList, hideControls, isMobileDevice]);
-  useEffect10(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting && !autoRoomJoined.current) {
-      hmsActions.join({
-        userName: userName || uuid(),
-        authToken: authTokenInAppData,
-        initEndpoint: endpoints == null ? void 0 : endpoints.init,
-        settings: {
-          isAudioMuted: !isPreviewScreenEnabled,
-          isVideoMuted: !isPreviewScreenEnabled,
-          speakerAutoSelectionBlacklist: ["Yeti Stereo Microphone"]
-        }
-      }).then(() => requestPermission()).catch(console.error);
-      autoRoomJoined.current = true;
-    }
-  }, [
-    authTokenInAppData,
-    endpoints == null ? void 0 : endpoints.init,
-    hmsActions,
-    isConnectedToRoom,
-    isPreviewScreenEnabled,
-    roomState,
-    userName,
-    requestPermission
-  ]);
-  useEffect10(() => {
-    onJoinFunc == null ? void 0 : onJoinFunc();
-    return () => {
-      PictureInPicture.stop().catch((error) => console.error("stopping pip", error.message));
-    };
-  }, [onJoinFunc]);
-  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
-    return /* @__PURE__ */ React19.createElement(FullPageProgress_default, { text: roomState === HMSRoomState.Connecting ? "Joining..." : "" });
-  }
-  const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, isHLSStarted ? /* @__PURE__ */ React19.createElement(Box, { css: { position: "fixed", zIndex: 100, w: "100%", h: "100%", left: 0, top: 0 } }, /* @__PURE__ */ React19.createElement(FullPageProgress_default, { text: "Starting live stream...", css: { opacity: 0.8, bg: "$background_dim" } })) : null, /* @__PURE__ */ React19.createElement(Flex, { css: { size: "100%", overflow: "hidden" }, direction: "column" }, !(screenProps.hideSections.includes("header") || isMwebHLSStream) && /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      ref: headerRef,
-      css: {
-        h: "$18",
-        transition: "margin 0.3s ease-in-out",
-        marginTop: hideControlsForStreaming ? `-${(_b = headerRef.current) == null ? void 0 : _b.clientHeight}px` : "none",
-        "@md": {
-          h: "$17"
-        }
-      },
-      "data-testid": "header"
-    },
-    /* @__PURE__ */ React19.createElement(Header, null)
-  ), /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      css: {
-        w: "100%",
-        flex: "1 1 0",
-        minHeight: 0,
-        // @ts-ignore
-        px: ((_e = (_d = (_c = screenProps == null ? void 0 : screenProps.elements) == null ? void 0 : _c.video_tile_layout) == null ? void 0 : _d.grid) == null ? void 0 : _e.edge_to_edge) ? 0 : "$10",
-        // TODO: padding to be controlled by section/element
-        paddingBottom: "env(safe-area-inset-bottom)",
-        "@lg": {
-          px: 0
-        }
-      },
-      id: "conferencing",
-      "data-testid": "conferencing",
-      onClick: toggleControls
-    },
-    screenProps.elements ? /* @__PURE__ */ React19.createElement(
-      VideoStreamingSection,
-      {
-        screenType: screenProps.screenType,
-        elements: screenProps.elements,
-        hideControls: hideControlsForStreaming
-      }
-    ) : null
-  ), !screenProps.hideSections.includes("footer") && screenProps.elements && !isMwebHLSStream && /* @__PURE__ */ React19.createElement(
-    Box,
-    {
-      ref: footerRef,
-      css: {
-        flexShrink: 0,
-        maxHeight: "$24",
-        transition: "margin 0.3s ease-in-out",
-        bg: "$background_dim",
-        marginBottom: hideControlsForStreaming ? `-${(_f = footerRef.current) == null ? void 0 : _f.clientHeight}px` : void 0,
-        "@md": {
-          maxHeight: "unset",
-          bg: screenProps.screenType === "hls_live_streaming" ? "transparent" : "$background_dim"
-        }
-      },
-      "data-testid": "footer"
-    },
-    /* @__PURE__ */ React19.createElement(Footer2, { elements: screenProps.elements, screenType: screenProps.screenType })
-  ), isMwebHLSStream && !showChat && /* @__PURE__ */ React19.createElement(
-    Flex,
-    {
-      css: {
-        alignItems: "center",
-        pr: "$4",
-        pb: "$4",
-        position: "relative"
-      },
-      justify: "end",
-      gap: "2"
-    },
-    /* @__PURE__ */ React19.createElement(RaiseHand, null),
-    /* @__PURE__ */ React19.createElement(MoreSettings, { elements: screenProps.elements, screenType: screenProps.screenType }),
-    /* @__PURE__ */ React19.createElement(
-      Box,
-      {
-        css: {
-          position: "absolute",
-          bottom: "100%",
-          mb: "$4"
-        }
-      },
-      /* @__PURE__ */ React19.createElement(EmojiReaction, null)
-    )
-  ), /* @__PURE__ */ React19.createElement(RoleChangeRequestModal, null), /* @__PURE__ */ React19.createElement(HLSFailureModal, null), /* @__PURE__ */ React19.createElement(ActivatedPIP, null), /* @__PURE__ */ React19.createElement(PreviousRoleInMetadata, null)));
-};
-export {
-  ConferenceScreen
-};
-//# sourceMappingURL=ConferenceScreen-M6RBPTAJ.js.map