@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/dist/chunk-IVTWKQI3.js

@@ -1,827 +0,0 @@
-import {
-  Avatar,
-  Button,
-  Dialog,
-  Input,
-  Sheet,
-  Slider,
-  StyledMenuTile,
-  StyledPagination,
-  StyledVideoList,
-  StyledVideoTile,
-  TileConnection_default,
-  ToastManager,
-  UserPreferencesKeys,
-  Video,
-  VideoTileStats,
-  useBorderAudioLevel,
-  useDropdownList,
-  useDropdownSelection,
-  useIsHeadless,
-  useSetAppDataByKey,
-  useShowStreamingUI,
-  useTheme,
-  useUISettings,
-  useUserPreferences
-} from "./chunk-OSM4QEQG.js";
-import {
-  APP_DATA,
-  Box,
-  FEATURE_LIST,
-  Flex,
-  REMOTE_STOP_SCREENSHARE_TYPE,
-  SESSION_STORE_KEY,
-  Text,
-  UI_SETTINGS,
-  __async,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env,
-  useIsFeatureEnabled
-} from "./chunk-RVCZPPTL.js";
-
-// src/Prebuilt/components/VideoTile.jsx
-init_define_process_env();
-import React5, { Fragment as Fragment2, useCallback, useMemo, useState as useState3 } from "react";
-import { useMedia as useMedia3 } from "react-use";
-import {
-  selectAudioTrackByPeerID,
-  selectIsPeerAudioEnabled,
-  selectLocalPeerID as selectLocalPeerID2,
-  selectPeerMetadata,
-  selectPeerNameByID,
-  selectVideoTrackByID,
-  selectVideoTrackByPeerID as selectVideoTrackByPeerID2,
-  useHMSStore as useHMSStore5
-} from "@100mslive/react-sdk";
-import { BrbTileIcon, HandIcon, MicOffIcon as MicOffIcon2 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/TileMenu/TileMenu.jsx
-init_define_process_env();
-import React4, { useState as useState2 } from "react";
-import { useMedia as useMedia2 } from "react-use";
-import {
-  selectLocalPeerID,
-  selectPeerByID,
-  selectPermissions as selectPermissions2,
-  selectTemplateAppData,
-  selectTrackByID as selectTrackByID2,
-  selectVideoTrackByPeerID,
-  useHMSStore as useHMSStore3,
-  useRemoteAVToggle as useRemoteAVToggle2
-} from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon2, VerticalMenuIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-init_define_process_env();
-import React2, { useState } from "react";
-import { useMedia } from "react-use";
-import { selectLocalPeerName, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
-init_define_process_env();
-import React from "react";
-import { ChevronLeftIcon, CrossIcon } from "@100mslive/react-icons";
-var ChangeNameContent = ({
-  changeName,
-  setCurrentName,
-  currentName,
-  localPeerName,
-  isMobile,
-  onExit,
-  onBackClick
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        yield changeName();
-      })
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: isMobile ? "md" : "lg",
-        css: {
-          color: "$on_surface_high",
-          fontWeight: "$semiBold",
-          display: "flex",
-          borderBottom: isMobile ? "1px solid $border_default" : "",
-          pb: "$6",
-          mb: "$8",
-          px: isMobile ? "$8" : ""
-        }
-      },
-      isMobile ? /* @__PURE__ */ React.createElement(ChevronLeftIcon, { onClick: onBackClick, style: { marginRight: "0.5rem" } }) : null,
-      "Change Name",
-      /* @__PURE__ */ React.createElement(Box, { css: { color: "inherit", ml: "auto" }, onClick: onExit }, /* @__PURE__ */ React.createElement(CrossIcon, null))
-    ),
-    /* @__PURE__ */ React.createElement(Flex, { justify: "center", align: "center", css: { my: "$8", w: "100%", px: isMobile ? "$8" : "" } }, /* @__PURE__ */ React.createElement(
-      Input,
-      {
-        css: { width: "100%", bg: "$surface_default" },
-        value: currentName,
-        onChange: (e) => {
-          setCurrentName(e.target.value);
-        },
-        autoComplete: "name",
-        required: true,
-        "data-testid": "change_name_field",
-        onKeyDown: (e) => __async(void 0, null, function* () {
-          if (e.key === "Enter" && currentName.trim().length > 0 && currentName !== localPeerName) {
-            e.preventDefault();
-            changeName();
-          }
-        })
-      }
-    )),
-    /* @__PURE__ */ React.createElement(
-      Flex,
-      {
-        justify: "between",
-        align: "center",
-        css: {
-          width: "100%",
-          gap: "$md",
-          mt: "$10",
-          px: isMobile ? "$4" : ""
-        }
-      },
-      isMobile ? null : /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "standard",
-          css: { w: "100%" },
-          outlined: true,
-          type: "submit",
-          disabled: !localPeerName,
-          onClick: onExit
-        },
-        "Cancel"
-      ),
-      /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "primary",
-          css: { width: "100%" },
-          type: "submit",
-          disabled: !currentName.trim() || currentName.trim() === localPeerName,
-          "data-testid": "popup_change_btn"
-        },
-        "Change"
-      )
-    )
-  );
-};
-
-// src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
-var ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions();
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState(localPeerName);
-  const isMobile = useMedia(config.media.md);
-  const changeName = () => __async(void 0, null, function* () {
-    const name = currentName.trim();
-    if (!name || name === localPeerName) {
-      return;
-    }
-    try {
-      yield hmsActions.changeName(name);
-      setPreviewPreference(__spreadProps(__spreadValues({}, previewPreference || {}), {
-        name
-      }));
-    } catch (error) {
-      console.error("failed to update name", error);
-      ToastManager.addToast({ title: error.message });
-    } finally {
-      onOpenChange(false);
-    }
-  });
-  const props = {
-    changeName,
-    setCurrentName,
-    currentName,
-    localPeerName,
-    isMobile,
-    onExit: () => onOpenChange(false),
-    onBackClick: () => {
-      onOpenChange(false);
-      openParentSheet();
-    }
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React2.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React2.createElement(Sheet.Content, { css: { bg: "$surface_dim", py: "$8", px: 0 } }, /* @__PURE__ */ React2.createElement(ChangeNameContent, __spreadValues({}, props))));
-  }
-  return /* @__PURE__ */ React2.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React2.createElement(Dialog.Portal, null, /* @__PURE__ */ React2.createElement(Dialog.Overlay, null), /* @__PURE__ */ React2.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React2.createElement(ChangeNameContent, __spreadValues({}, props)))));
-};
-
-// src/Prebuilt/components/TileMenu/TileMenuContent.jsx
-init_define_process_env();
-import React3, { Fragment } from "react";
-import {
-  selectPermissions,
-  selectSessionStore,
-  selectTrackByID,
-  useCustomEvent,
-  useHMSActions as useHMSActions2,
-  useHMSStore as useHMSStore2,
-  useRemoteAVToggle
-} from "@100mslive/react-sdk";
-import {
-  MicOffIcon,
-  MicOnIcon,
-  PencilIcon,
-  PinIcon,
-  RemoveUserIcon,
-  ShareScreenIcon,
-  ShrinkIcon,
-  SpeakerIcon,
-  StarIcon,
-  VideoOffIcon,
-  VideoOnIcon
-} from "@100mslive/react-icons";
-var isSameTile = ({ trackId, videoTrackID, audioTrackID }) => trackId && (videoTrackID && videoTrackID === trackId || audioTrackID && audioTrackID === trackId);
-var spacingCSS = { "@md": { my: "$8", fontWeight: "$semiBold", fontSize: "sm" } };
-var SpotlightActions = ({
-  peerId,
-  onSpotLightClick = () => {
-    return;
-  }
-}) => {
-  const hmsActions = useHMSActions2();
-  const spotlightPeerId = useHMSStore2(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const isTileSpotlighted = spotlightPeerId === peerId;
-  const setSpotlightPeerId = (peer) => hmsActions.sessionStore.set(SESSION_STORE_KEY.SPOTLIGHT, peer).catch((err) => ToastManager.addToast({ title: err.description }));
-  return /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        if (isTileSpotlighted) {
-          setSpotlightPeerId();
-        } else {
-          setSpotlightPeerId(peerId);
-        }
-        onSpotLightClick();
-      }
-    },
-    /* @__PURE__ */ React3.createElement(StarIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, isTileSpotlighted ? "Remove from Spotlight" : "Spotlight Tile for everyone")
-  );
-};
-var PinActions = ({ audioTrackID, videoTrackID }) => {
-  const [pinnedTrackId, setPinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-  const isTilePinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID,
-    audioTrackID
-  });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID)
-    },
-    /* @__PURE__ */ React3.createElement(PinIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, isTilePinned ? "Unpin" : "Pin", " Tile for myself")
-  ));
-};
-var MinimiseInset = () => {
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(StyledMenuTile.ItemButton, { css: spacingCSS, onClick: () => setMinimised(!minimised) }, /* @__PURE__ */ React3.createElement(ShrinkIcon, null), /* @__PURE__ */ React3.createElement("span", null, minimised ? "Show" : "Minimise", " your video")));
-};
-var SimulcastLayers = ({ trackId }) => {
-  var _a;
-  const track = useHMSStore2(selectTrackByID(trackId));
-  const actions = useHMSActions2();
-  const bg = useDropdownSelection();
-  if (!((_a = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _a.length) || track.degraded || !track.enabled) {
-    return null;
-  }
-  const currentLayer = track.layerDefinitions.find((layer) => layer.layer === track.layer);
-  return /* @__PURE__ */ React3.createElement(Fragment, null, /* @__PURE__ */ React3.createElement(StyledMenuTile.ItemButton, { css: { color: "$on_surface_medium", cursor: "default" } }, "Select maximum resolution"), track.layerDefinitions.map((layer) => {
-    return /* @__PURE__ */ React3.createElement(
-      StyledMenuTile.ItemButton,
-      {
-        key: layer.layer,
-        onClick: () => __async(void 0, null, function* () {
-          yield actions.setPreferredLayer(trackId, layer.layer);
-        }),
-        css: {
-          justifyContent: "space-between",
-          bg: track.preferredLayer === layer.layer ? bg : void 0,
-          "&:hover": {
-            bg: track.preferredLayer === layer.layer ? bg : void 0
-          }
-        }
-      },
-      /* @__PURE__ */ React3.createElement(
-        Text,
-        {
-          as: "span",
-          css: {
-            textTransform: "capitalize",
-            mr: "$2",
-            fontWeight: track.preferredLayer === layer.layer ? "$semiBold" : "$regular"
-          }
-        },
-        layer.layer
-      ),
-      /* @__PURE__ */ React3.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, layer.resolution.width, "x", layer.resolution.height)
-    );
-  }), /* @__PURE__ */ React3.createElement(StyledMenuTile.ItemButton, null, /* @__PURE__ */ React3.createElement(Text, { as: "span", variant: "xs", css: { color: "$on_surface_medium" } }, "Currently streaming:", /* @__PURE__ */ React3.createElement(
-    Text,
-    {
-      as: "span",
-      variant: "xs",
-      css: {
-        fontWeight: "$semiBold",
-        textTransform: "capitalize",
-        color: "$on_surface_medium",
-        ml: "$2"
-      }
-    },
-    currentLayer ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, track.layer, " (", currentLayer.resolution.width, "x", currentLayer.resolution.height, ")") : "-"
-  ))));
-};
-var TileMenuContent = (props) => {
-  const actions = useHMSActions2();
-  const { removeOthers } = useHMSStore2(selectPermissions);
-  const {
-    videoTrackID,
-    audioTrackID,
-    isLocal,
-    isScreenshare,
-    showSpotlight,
-    showPinAction,
-    peerID,
-    canMinimise,
-    closeSheetOnClick = () => {
-      return;
-    },
-    openNameChangeModal = () => {
-      return;
-    }
-  } = props;
-  const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
-    audioTrackID,
-    videoTrackID
-  );
-  const { sendEvent } = useCustomEvent({
-    type: REMOTE_STOP_SCREENSHARE_TYPE
-  });
-  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
-  return isLocal ? (showPinAction || canMinimise) && /* @__PURE__ */ React3.createElement(React3.Fragment, null, showPinAction && /* @__PURE__ */ React3.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React3.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() }), canMinimise && /* @__PURE__ */ React3.createElement(MinimiseInset, null), isChangeNameEnabled ? /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      onClick: () => {
-        openNameChangeModal();
-        closeSheetOnClick();
-      }
-    },
-    /* @__PURE__ */ React3.createElement(PencilIcon, null),
-    /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Change Name")
-  ) : null) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, toggleVideo ? /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        toggleVideo();
-        closeSheetOnClick();
-      },
-      "data-testid": isVideoEnabled ? "mute_video_participant_btn" : "unmute_video_participant_btn"
-    },
-    isVideoEnabled ? /* @__PURE__ */ React3.createElement(VideoOnIcon, null) : /* @__PURE__ */ React3.createElement(VideoOffIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, isVideoEnabled ? "Mute" : "Request Unmute")
-  ) : null, toggleAudio ? /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.ItemButton,
-    {
-      css: spacingCSS,
-      onClick: () => {
-        toggleAudio();
-        closeSheetOnClick();
-      },
-      "data-testid": isVideoEnabled ? "mute_audio_participant_btn" : "unmute_audio_participant_btn"
-    },
-    isAudioEnabled ? /* @__PURE__ */ React3.createElement(MicOnIcon, null) : /* @__PURE__ */ React3.createElement(MicOffIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, isAudioEnabled ? "Mute" : "Request Unmute")
-  ) : null, audioTrackID ? /* @__PURE__ */ React3.createElement(StyledMenuTile.VolumeItem, { "data-testid": "participant_volume_slider", css: __spreadProps(__spreadValues({}, spacingCSS), { mb: "$0" }) }, /* @__PURE__ */ React3.createElement(Flex, { align: "center", gap: 1 }, /* @__PURE__ */ React3.createElement(SpeakerIcon, null), /* @__PURE__ */ React3.createElement(Box, { as: "span", css: { ml: "$4" } }, "Volume (", volume, ")")), /* @__PURE__ */ React3.createElement(Slider, { css: { my: "0.5rem" }, step: 5, value: [volume], onValueChange: (e) => setVolume(e[0]) })) : null, showPinAction && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(PinActions, { audioTrackID, videoTrackID }), showSpotlight && /* @__PURE__ */ React3.createElement(SpotlightActions, { peerId: peerID, onSpotLightClick: () => closeSheetOnClick() })), /* @__PURE__ */ React3.createElement(SimulcastLayers, { trackId: videoTrackID }), removeOthers ? /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.RemoveItem,
-    {
-      css: __spreadProps(__spreadValues({}, spacingCSS), { borderTop: "none" }),
-      onClick: () => __async(void 0, null, function* () {
-        try {
-          yield actions.removePeer(peerID, "");
-        } catch (error) {
-        }
-        closeSheetOnClick();
-      }),
-      "data-testid": "remove_participant_btn"
-    },
-    /* @__PURE__ */ React3.createElement(RemoveUserIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, "Remove Participant")
-  ) : null, removeOthers && isScreenshare ? /* @__PURE__ */ React3.createElement(
-    StyledMenuTile.RemoveItem,
-    {
-      onClick: () => {
-        sendEvent({});
-        closeSheetOnClick();
-      },
-      css: spacingCSS
-    },
-    /* @__PURE__ */ React3.createElement(ShareScreenIcon, null),
-    /* @__PURE__ */ React3.createElement("span", null, "Stop Screenshare")
-  ) : null);
-};
-
-// src/Prebuilt/components/TileMenu/TileMenu.jsx
-var TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, canMinimise }) => {
-  var _a, _b;
-  const [open, setOpen] = useState2(false);
-  const { theme } = useTheme();
-  const localPeerID = useHMSStore3(selectLocalPeerID);
-  const isLocal = localPeerID === peerID;
-  const { removeOthers, changeRole } = useHMSStore3(selectPermissions2);
-  const { setVolume, toggleAudio, toggleVideo } = useRemoteAVToggle2(audioTrackID, videoTrackID);
-  const showSpotlight = changeRole;
-  const isPrimaryVideoTrack = ((_a = useHMSStore3(selectVideoTrackByPeerID(peerID))) == null ? void 0 : _a.id) === videoTrackID;
-  const uiMode = useHMSStore3(selectTemplateAppData).uiMode;
-  const isInset = uiMode === "inset";
-  const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE);
-  const showPinAction = isPinEnabled && (audioTrackID || videoTrackID && isPrimaryVideoTrack) && !isInset;
-  const track = useHMSStore3(selectTrackByID2(videoTrackID));
-  const hideSimulcastLayers = !((_b = track == null ? void 0 : track.layerDefinitions) == null ? void 0 : _b.length) || track.degraded || !track.enabled;
-  const isMobile = useMedia2(config.media.md);
-  const peer = useHMSStore3(selectPeerByID(peerID));
-  const [showNameChangeModal, setShowNameChangeModal] = useState2(false);
-  useDropdownList({ open, name: "TileMenu" });
-  if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
-    return null;
-  }
-  if (isInset && isLocal) {
-    return null;
-  }
-  const openNameChangeModal = () => setShowNameChangeModal(true);
-  const props = {
-    isLocal,
-    isScreenshare,
-    audioTrackID,
-    videoTrackID,
-    peerID,
-    isPrimaryVideoTrack,
-    showSpotlight,
-    showPinAction,
-    canMinimise,
-    openNameChangeModal
-  };
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(StyledMenuTile.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React4.createElement(
-    StyledMenuTile.Trigger,
-    {
-      "data-testid": "participant_menu_btn",
-      css: { bg: `${theme.colors.background_dim.value}A3` },
-      onClick: (e) => e.stopPropagation(),
-      className: isMobile ? "__cancel-drag-event" : ""
-    },
-    /* @__PURE__ */ React4.createElement(VerticalMenuIcon, { width: 20, height: 20 })
-  ), isMobile ? /* @__PURE__ */ React4.createElement(Sheet.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React4.createElement(Sheet.Content, { css: { bg: "$surface_dim", pt: "$8" } }, /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      css: {
-        color: "$on_surface_high",
-        display: "flex",
-        w: "100%",
-        justifyContent: "space-between",
-        alignItems: "center",
-        px: "$10",
-        pb: "$8",
-        borderBottom: "1px solid $border_default"
-      }
-    },
-    /* @__PURE__ */ React4.createElement(Box, null, /* @__PURE__ */ React4.createElement(Text, { css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, peer.name, isLocal ? ` (You)` : null), (peer == null ? void 0 : peer.roleName) ? /* @__PURE__ */ React4.createElement(Text, { variant: "xs", css: { color: "$on_surface_low", mt: "$2" } }, peer.roleName) : null),
-    /* @__PURE__ */ React4.createElement(Sheet.Close, { css: { color: "inherit" } }, /* @__PURE__ */ React4.createElement(CrossIcon2, null))
-  ), /* @__PURE__ */ React4.createElement(Box, { css: { px: "$8", pb: "$10" } }, /* @__PURE__ */ React4.createElement(TileMenuContent, __spreadProps(__spreadValues({}, props), { closeSheetOnClick: () => setOpen(false) }))))) : /* @__PURE__ */ React4.createElement(StyledMenuTile.Content, { side: "top", align: "end" }, /* @__PURE__ */ React4.createElement(TileMenuContent, __spreadValues({}, props)))), showNameChangeModal && /* @__PURE__ */ React4.createElement(ChangeNameModal, { onOpenChange: setShowNameChangeModal }));
-};
-var TileMenu_default = TileMenu;
-
-// src/Prebuilt/components/peerTileUtils.jsx
-init_define_process_env();
-var PEER_NAME_PLACEHOLDER = "peerName";
-var labelMap = /* @__PURE__ */ new Map([
-  [[true, "screen"].toString(), "Your Screen"],
-  [[true, "regular"].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
-  [[false, "screen"].toString(), `${PEER_NAME_PLACEHOLDER}'s Screen`],
-  [[false, "regular"].toString(), PEER_NAME_PLACEHOLDER],
-  [[true, void 0].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
-  [[false, void 0].toString(), `${PEER_NAME_PLACEHOLDER}`]
-]);
-var getVideoTileLabel = ({ peerName, isLocal, track }) => {
-  const isPeerPresent = peerName !== void 0;
-  if (!isPeerPresent || !track) {
-    return isPeerPresent ? labelMap.get([isLocal, void 0].toString()).replace(PEER_NAME_PLACEHOLDER, peerName) : "";
-  }
-  const isLocallyMuted = track.volume === 0;
-  let label = labelMap.get([isLocal, track.source].toString());
-  if (label) {
-    label = label.replace(PEER_NAME_PLACEHOLDER, peerName);
-  } else {
-    label = `${peerName} ${track.source}`;
-  }
-  label = `${label}${track.degraded ? "(Degraded)" : ""}`;
-  return `${label}${isLocallyMuted ? " (Muted for you)" : ""}`;
-};
-
-// src/Prebuilt/components/AppData/useAppConfig.js
-init_define_process_env();
-import { selectAppDataByPath, useHMSStore as useHMSStore4 } from "@100mslive/react-sdk";
-var useAppConfig = (...path) => {
-  const appConfig = useHMSStore4(selectAppDataByPath(APP_DATA.appConfig, ...path));
-  return appConfig;
-};
-
-// src/Prebuilt/components/VideoTile.jsx
-var Tile = ({
-  peerId,
-  trackId,
-  width,
-  height,
-  objectFit = "cover",
-  canMinimise = false,
-  isDragabble = false,
-  rootCSS = {},
-  containerCSS = {}
-}) => {
-  const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID2(peerId);
-  const track = useHMSStore5(trackSelector);
-  const peerName = useHMSStore5(selectPeerNameByID(peerId));
-  const audioTrack = useHMSStore5(selectAudioTrackByPeerID(peerId));
-  const localPeerID = useHMSStore5(selectLocalPeerID2);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isHeadless = useIsHeadless();
-  const isAudioMuted = !useHMSStore5(selectIsPeerAudioEnabled(peerId));
-  const isVideoMuted = !(track == null ? void 0 : track.enabled);
-  const [isMouseHovered, setIsMouseHovered] = useState3(false);
-  const borderAudioRef = useBorderAudioLevel(audioTrack == null ? void 0 : audioTrack.id);
-  const isVideoDegraded = track == null ? void 0 : track.degraded;
-  const isLocal = localPeerID === peerId;
-  const isMobile = useMedia3(config.media.md);
-  const showStreamingUI = useShowStreamingUI();
-  const label = getVideoTileLabel({
-    peerName,
-    track,
-    isLocal
-  });
-  const onHoverHandler = useCallback((event) => {
-    setIsMouseHovered(event.type === "mouseenter");
-  }, []);
-  const headlessConfig = useAppConfig("headlessConfig");
-  const hideLabel = isHeadless && (headlessConfig == null ? void 0 : headlessConfig.hideTileName);
-  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
-  const avatarSize = useMemo(() => {
-    if (!width || !height) {
-      return void 0;
-    }
-    if (width <= 150 || height <= 150) {
-      return "small";
-    } else if (width <= 300 || height <= 300) {
-      return "medium";
-    }
-    return "large";
-  }, [width, height]);
-  return /* @__PURE__ */ React5.createElement(
-    StyledVideoTile.Root,
-    {
-      css: __spreadValues({
-        width,
-        height,
-        padding: getPadding({
-          isHeadless,
-          tileOffset: headlessConfig == null ? void 0 : headlessConfig.tileOffset,
-          hideAudioLevel: headlessConfig == null ? void 0 : headlessConfig.hideAudioLevel
-        })
-      }, rootCSS),
-      "data-testid": `participant_tile_${peerName}`
-    },
-    peerName !== void 0 ? /* @__PURE__ */ React5.createElement(
-      StyledVideoTile.Container,
-      {
-        onMouseEnter: onHoverHandler,
-        onMouseLeave: onHoverHandler,
-        ref: isHeadless && (headlessConfig == null ? void 0 : headlessConfig.hideAudioLevel) ? void 0 : borderAudioRef,
-        noRadius: isHeadless && Number(headlessConfig == null ? void 0 : headlessConfig.tileOffset) === 0,
-        css: containerCSS
-      },
-      showStatsOnTiles && isTileBigEnoughToShowStats ? /* @__PURE__ */ React5.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-      track ? /* @__PURE__ */ React5.createElement(
-        Video,
-        {
-          trackId: track == null ? void 0 : track.id,
-          attach: isLocal ? void 0 : !isAudioOnly,
-          mirror: mirrorLocalVideo && peerId === localPeerID && (track == null ? void 0 : track.source) === "regular" && (track == null ? void 0 : track.facingMode) !== "environment",
-          degraded: isVideoDegraded,
-          noRadius: isHeadless && Number(headlessConfig == null ? void 0 : headlessConfig.tileOffset) === 0,
-          "data-testid": "participant_video_tile",
-          css: {
-            objectFit
-          }
-        }
-      ) : null,
-      isVideoMuted || isVideoDegraded || !isLocal && isAudioOnly ? /* @__PURE__ */ React5.createElement(StyledVideoTile.AvatarContainer, null, /* @__PURE__ */ React5.createElement(Avatar, { name: peerName || "", "data-testid": "participant_avatar_icon", size: avatarSize })) : null,
-      showAudioMuted({
-        hideTileAudioMute: headlessConfig == null ? void 0 : headlessConfig.hideTileAudioMute,
-        isHeadless,
-        isAudioMuted
-      }) ? /* @__PURE__ */ React5.createElement(
-        StyledVideoTile.AudioIndicator,
-        {
-          "data-testid": "participant_audio_mute_icon",
-          size: width && height && (width < 180 || height < 180) ? "small" : "medium"
-        },
-        /* @__PURE__ */ React5.createElement(MicOffIcon2, null)
-      ) : null,
-      (isMouseHovered || isDragabble) && !isHeadless ? /* @__PURE__ */ React5.createElement(
-        TileMenu_default,
-        {
-          peerID: peerId,
-          audioTrackID: audioTrack == null ? void 0 : audioTrack.id,
-          videoTrackID: track == null ? void 0 : track.id,
-          canMinimise
-        }
-      ) : null,
-      /* @__PURE__ */ React5.createElement(PeerMetadata, { peerId }),
-      showStreamingUI && isMobile ? null : /* @__PURE__ */ React5.createElement(TileConnection_default, { hideLabel, name: label, isTile: true, peerId, width })
-    ) : null
-  );
-};
-var metaStyles = { top: "$4", left: "$4" };
-var PeerMetadata = ({ peerId }) => {
-  const metaData = useHMSStore5(selectPeerMetadata(peerId));
-  const isHandRaised = (metaData == null ? void 0 : metaData.isHandRaised) || false;
-  const isBRB = (metaData == null ? void 0 : metaData.isBRBOn) || false;
-  return /* @__PURE__ */ React5.createElement(Fragment2, null, isHandRaised ? /* @__PURE__ */ React5.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "raiseHand_icon_onTile" }, /* @__PURE__ */ React5.createElement(HandIcon, { width: 24, height: 24 })) : null, isBRB ? /* @__PURE__ */ React5.createElement(StyledVideoTile.AttributeBox, { css: metaStyles, "data-testid": "brb_icon_onTile" }, /* @__PURE__ */ React5.createElement(BrbTileIcon, { width: 24, height: 24 })) : null);
-};
-var VideoTile = React5.memo(Tile);
-var showAudioMuted = ({ hideTileAudioMute, isHeadless, isAudioMuted }) => {
-  if (!isHeadless) {
-    return isAudioMuted;
-  }
-  return isAudioMuted && !hideTileAudioMute;
-};
-var getPadding = ({ isHeadless, tileOffset, hideAudioLevel }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return void 0;
-  }
-  return Number(tileOffset) === 0 ? hideAudioLevel ? 0 : 3 : void 0;
-};
-var VideoTile_default = VideoTile;
-
-// src/Prebuilt/components/VideoList.jsx
-init_define_process_env();
-import React8, { Fragment as Fragment3, useEffect, useState as useState5 } from "react";
-import { useVideoList } from "@100mslive/react-sdk";
-
-// src/Prebuilt/components/Pagination.jsx
-init_define_process_env();
-import React6 from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon } from "@100mslive/react-icons";
-var Pagination = ({ page, onPageChange, numPages }) => {
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-  const nextPage = () => {
-    onPageChange(Math.min(page + 1, numPages - 1));
-  };
-  const prevPage = () => {
-    onPageChange(Math.max(page - 1, 0));
-  };
-  return /* @__PURE__ */ React6.createElement(StyledPagination.Root, null, /* @__PURE__ */ React6.createElement(StyledPagination.Chevron, { disabled: disableLeft, onClick: prevPage }, /* @__PURE__ */ React6.createElement(ChevronLeftIcon2, { width: 16, height: 16, style: { cursor: disableLeft ? "not-allowed" : "pointer" } })), /* @__PURE__ */ React6.createElement(StyledPagination.Dots, null, [...Array(numPages)].map((_, i) => /* @__PURE__ */ React6.createElement(StyledPagination.Dot, { key: i, active: page === i, onClick: () => onPageChange(i) }))), /* @__PURE__ */ React6.createElement(StyledPagination.Chevron, { disabled: disableRight, onClick: nextPage }, /* @__PURE__ */ React6.createElement(ChevronRightIcon, { width: 16, height: 16, style: { cursor: disableRight ? "not-allowed" : "pointer" } })));
-};
-
-// src/Prebuilt/components/ScreenshareTile.jsx
-init_define_process_env();
-import React7, { useRef, useState as useState4 } from "react";
-import { useFullscreen } from "react-use";
-import screenfull from "screenfull";
-import {
-  selectLocalPeerID as selectLocalPeerID3,
-  selectPeerByID as selectPeerByID2,
-  selectScreenShareAudioByPeerID,
-  selectScreenShareByPeerID,
-  useHMSStore as useHMSStore6
-} from "@100mslive/react-sdk";
-import { ExpandIcon, ShrinkIcon as ShrinkIcon2 } from "@100mslive/react-icons";
-var labelStyles = {
-  position: "unset",
-  width: "100%",
-  textAlign: "center",
-  transform: "none",
-  mt: "$2",
-  flexShrink: 0
-};
-var Tile2 = ({ peerId, width = "100%", height = "100%" }) => {
-  const isLocal = useHMSStore6(selectLocalPeerID3) === peerId;
-  const track = useHMSStore6(selectScreenShareByPeerID(peerId));
-  const peer = useHMSStore6(selectPeerByID2(peerId));
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const isHeadless = useIsHeadless();
-  const [isMouseHovered, setIsMouseHovered] = useState4(false);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const label = getVideoTileLabel({
-    peerName: peer.name,
-    isLocal: false,
-    track
-  });
-  const fullscreenRef = useRef(null);
-  const [fullscreen, setFullscreen] = useState4(false);
-  const isFullscreen = useFullscreen(fullscreenRef, fullscreen, {
-    onClose: () => setFullscreen(false)
-  });
-  const isFullScreenSupported = screenfull.isEnabled;
-  const audioTrack = useHMSStore6(selectScreenShareAudioByPeerID(peer == null ? void 0 : peer.id));
-  return /* @__PURE__ */ React7.createElement(StyledVideoTile.Root, { css: { width, height, p: 0 }, "data-testid": "screenshare_tile" }, peer ? /* @__PURE__ */ React7.createElement(
-    StyledVideoTile.Container,
-    {
-      transparentBg: true,
-      ref: fullscreenRef,
-      css: { flexDirection: "column" },
-      onMouseEnter: () => setIsMouseHovered(true),
-      onMouseLeave: () => {
-        setIsMouseHovered(false);
-      }
-    },
-    showStatsOnTiles ? /* @__PURE__ */ React7.createElement(VideoTileStats, { audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id, peerID: peerId, isLocal }) : null,
-    isFullScreenSupported && !isHeadless ? /* @__PURE__ */ React7.createElement(StyledVideoTile.FullScreenButton, { onClick: () => setFullscreen(!fullscreen) }, isFullscreen ? /* @__PURE__ */ React7.createElement(ShrinkIcon2, null) : /* @__PURE__ */ React7.createElement(ExpandIcon, null)) : null,
-    track ? /* @__PURE__ */ React7.createElement(
-      Video,
-      {
-        screenShare: true,
-        mirror: peer.isLocal && (track == null ? void 0 : track.source) === "regular",
-        attach: !isAudioOnly,
-        trackId: track.id
-      }
-    ) : null,
-    /* @__PURE__ */ React7.createElement(StyledVideoTile.Info, { css: labelStyles }, label),
-    isMouseHovered && !isHeadless && !(peer == null ? void 0 : peer.isLocal) ? /* @__PURE__ */ React7.createElement(TileMenu_default, { isScreenshare: true, peerID: peer == null ? void 0 : peer.id, audioTrackID: audioTrack == null ? void 0 : audioTrack.id, videoTrackID: track == null ? void 0 : track.id }) : null
-  ) : null);
-};
-var ScreenshareTile = React7.memo(Tile2);
-var ScreenshareTile_default = ScreenshareTile;
-
-// src/Prebuilt/components/VideoList.jsx
-var List = ({ maxTileCount, peers, maxColCount, maxRowCount, includeScreenShareForPeer }) => {
-  var _a;
-  const { aspectRatio } = useTheme();
-  const tileOffset = useAppConfig("headlessConfig", "tileOffset");
-  const isHeadless = useIsHeadless();
-  const { ref, pagesWithTiles } = useVideoList({
-    peers,
-    maxTileCount,
-    maxColCount,
-    maxRowCount,
-    includeScreenShareForPeer,
-    aspectRatio,
-    offsetY: getOffset({ isHeadless, tileOffset })
-  });
-  const [page, setPage] = useState5(0);
-  useEffect(() => {
-    if (page >= pagesWithTiles.length) {
-      setPage(0);
-    }
-  }, [pagesWithTiles.length, page]);
-  return /* @__PURE__ */ React8.createElement(StyledVideoList.Root, { ref }, /* @__PURE__ */ React8.createElement(StyledVideoList.Container, { css: { flexWrap: "wrap", placeContent: "center" } }, pagesWithTiles && pagesWithTiles.length > 0 ? (_a = pagesWithTiles[page]) == null ? void 0 : _a.map((tile) => {
-    var _a2, _b, _c, _d;
-    if (tile.width === 0 || tile.height === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ React8.createElement(Fragment3, { key: ((_a2 = tile.track) == null ? void 0 : _a2.id) || tile.peer.id }, ((_b = tile.track) == null ? void 0 : _b.source) === "screen" ? /* @__PURE__ */ React8.createElement(ScreenshareTile_default, { width: tile.width, height: tile.height, peerId: tile.peer.id }) : /* @__PURE__ */ React8.createElement(
-      VideoTile_default,
-      {
-        width: tile.width,
-        height: tile.height,
-        peerId: (_c = tile.peer) == null ? void 0 : _c.id,
-        trackId: (_d = tile.track) == null ? void 0 : _d.id
-      }
-    ));
-  }) : null), !isHeadless && pagesWithTiles.length > 1 ? /* @__PURE__ */ React8.createElement(Pagination, { page, onPageChange: setPage, numPages: pagesWithTiles.length }) : null);
-};
-var VideoList = React8.memo(List);
-var getOffset = ({ tileOffset, isHeadless }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return 32;
-  }
-  return Number(tileOffset);
-};
-var VideoList_default = VideoList;
-
-export {
-  ChangeNameModal,
-  useAppConfig,
-  VideoTile_default,
-  Pagination,
-  ScreenshareTile_default,
-  VideoList_default
-};
-//# sourceMappingURL=chunk-IVTWKQI3.js.map