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

package/dist/ConferenceScreen-M6RBPTAJ.js

@@ -0,0 +1,1774 @@
+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