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

package/dist/chunk-IVTWKQI3.js

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