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

package/dist/chunk-DANANDDE.js

@@ -1,418 +0,0 @@
-import {
-  isScreenshareSupported,
-  useRoomLayout,
-  useRoomLayoutConferencingScreen,
-  useSetAppDataByKey
-} from "./chunk-BGSYLCVD.js";
-import {
-  APP_DATA,
-  CHAT_SELECTOR,
-  RTMP_RECORD_DEFAULT_RESOLUTION,
-  __async,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env,
-  styled
-} from "./chunk-GLAJUP3O.js";
-
-// src/Dropdown/Dropdown.tsx
-init_define_process_env();
-import {
-  CheckboxItem,
-  Content,
-  Group,
-  Item,
-  ItemIndicator,
-  Label,
-  Portal,
-  Root,
-  Separator,
-  Sub,
-  SubContent,
-  SubTrigger,
-  Trigger
-} from "@radix-ui/react-dropdown-menu";
-var DropdownRoot = styled(Root, {});
-var DropdownTrigger = styled(Trigger, {
-  cursor: "pointer",
-  appearance: "none !important",
-  '&[data-state="open"]': {
-    backgroundColor: "$surface_bright"
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  "&:focus-visible": {
-    boxShadow: "0 0 0 3px $colors$primary_default"
-  }
-});
-var DropdownTriggerItem = styled(SubTrigger, {
-  w: "100%",
-  color: "$on_surface_high",
-  p: "$8",
-  display: "flex",
-  alignItems: "center",
-  "&:hover": {
-    cursor: "pointer",
-    bg: "$surface_brighter"
-  },
-  "&:focus-visible": {
-    bg: "$surface_brighter",
-    outline: "none"
-  }
-});
-var DropdownItem = styled(Item, {
-  color: "$on_surface_high",
-  p: "$8",
-  display: "flex",
-  alignItems: "center",
-  outline: "none",
-  backgroundColor: "$surface_dim",
-  "&:hover": {
-    cursor: "pointer",
-    bg: "$surface_bright"
-  },
-  "&:focus-visible": {
-    bg: "$surface_bright"
-  }
-});
-var DropdownItemSeparator = styled(Separator, {
-  h: 1,
-  backgroundColor: "$border_bright",
-  m: "$4 $8"
-});
-var DropdownContent = styled(Content, {
-  w: "$80",
-  maxHeight: "$64",
-  r: "$1",
-  py: "$4",
-  backgroundColor: "$surface_dim",
-  overflowY: "auto",
-  boxShadow: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
-  zIndex: 20,
-  fontFamily: "$sans"
-});
-var DropdownLabel = styled(Label, {
-  display: "flex",
-  alignItems: "center",
-  h: "$12",
-  w: "100%",
-  p: "$8 $4"
-});
-var DropdownGroup = styled(Group, {});
-var DropdownSubMenu = styled(Sub, {});
-var DropdownSubMenuContent = styled(SubContent, {
-  w: "$80",
-  maxHeight: "$64",
-  r: "$1",
-  py: "$4",
-  backgroundColor: "$surface_bright",
-  overflowY: "auto",
-  boxShadow: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
-  zIndex: 20
-});
-var DropdownCheckboxItem = styled(CheckboxItem, {
-  color: "$on_surface_high",
-  p: "$8",
-  display: "flex",
-  alignItems: "center",
-  outline: "none",
-  "&:hover": {
-    cursor: "pointer",
-    bg: "$surface_brighter"
-  },
-  "&:focus-visible": {
-    bg: "$surface_brighter"
-  },
-  gap: "$2"
-});
-var DropdownItemIndicator = styled(ItemIndicator, {
-  w: "$10",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-var Dropdown = {
-  Root: DropdownRoot,
-  Trigger: DropdownTrigger,
-  TriggerItem: DropdownTriggerItem,
-  Content: DropdownContent,
-  Portal,
-  SubMenu: DropdownSubMenu,
-  SubMenuContent: DropdownSubMenuContent,
-  Item: DropdownItem,
-  Label: DropdownLabel,
-  Group: DropdownGroup,
-  ItemSeparator: DropdownItemSeparator,
-  CheckboxItem: DropdownCheckboxItem,
-  ItemIndicator: DropdownItemIndicator
-};
-
-// src/Prebuilt/components/Toast/ToastManager.js
-init_define_process_env();
-import { v4 } from "uuid";
-var ToastManager = {
-  toasts: /* @__PURE__ */ new Map(),
-  listeners: /* @__PURE__ */ new Map(),
-  addToast(toast) {
-    const id = toast.id ? toast.id : v4();
-    this.toasts.set(id, __spreadProps(__spreadValues({}, toast), { id }));
-    this.onChange();
-    return id;
-  },
-  clearAllToast() {
-    this.toasts.clear();
-    this.onChange();
-  },
-  removeToast(id) {
-    this.toasts.delete(id);
-    this.onChange();
-  },
-  replaceToast(id, toast) {
-    if (this.isActive(id)) {
-      this.toasts.set(id, __spreadValues(__spreadValues({}, this.toasts.get(id)), toast));
-      this.onChange();
-      return id;
-    } else {
-      return this.addToast(toast);
-    }
-  },
-  addListener(cb) {
-    this.listeners.set(cb, cb);
-  },
-  removeListener(cb) {
-    this.listeners.delete(cb);
-  },
-  isActive(id) {
-    return this.toasts.has(id);
-  },
-  onChange() {
-    const toasts = Array.from(this.toasts.values());
-    this.listeners.forEach((listener) => listener(toasts));
-  }
-};
-
-// src/Prebuilt/common/hooks.ts
-init_define_process_env();
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useMedia } from "react-use";
-import { JoinForm_JoinBtnType } from "@100mslive/types-prebuilt/elements/join_form";
-import {
-  parsedUserAgent,
-  selectAvailableRoleNames,
-  selectIsAllowedToPublish,
-  selectIsConnectedToRoom,
-  selectLocalPeerRole,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers,
-  selectPeersByRoles,
-  selectRecordingState,
-  selectRemotePeers,
-  selectRolesMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-var useFilteredRoles = () => {
-  var _a;
-  const { elements } = useRoomLayoutConferencingScreen();
-  return ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.roles_whitelist) || [];
-};
-var useDefaultChatSelection = () => {
-  var _a;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const roles = useFilteredRoles();
-  if ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.public_chat_enabled) {
-    return CHAT_SELECTOR.EVERYONE;
-  }
-  if (roles.length > 0) {
-    return roles[0];
-  }
-  return "";
-};
-var useShowStreamingUI = () => {
-  var _a, _b, _c;
-  const layout = useRoomLayout();
-  const { join_form } = ((_c = (_b = (_a = layout == null ? void 0 : layout.screens) == null ? void 0 : _a.preview) == null ? void 0 : _b.default) == null ? void 0 : _c.elements) || {};
-  return (join_form == null ? void 0 : join_form.join_btn_type) === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-var useParticipants = (params) => {
-  var _a;
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerCount = useHMSStore(selectPeerCount);
-  const availableRoles = useHMSStore(selectAvailableRoleNames);
-  let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map((peer) => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore();
-  if ((_a = params == null ? void 0 : params.metadata) == null ? void 0 : _a.isHandRaised) {
-    participantList = participantList.filter((peer) => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if ((params == null ? void 0 : params.role) && availableRoles.includes(params.role)) {
-    participantList = participantList.filter((peer) => peer.roleName === params.role);
-  }
-  if (params == null ? void 0 : params.search) {
-    const search = params.search;
-    participantList = participantList.filter((peer) => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-var useIsLandscape = () => {
-  const isMobile = parsedUserAgent.getDevice().type === "mobile";
-  const isLandscape = useMedia(config.media.ls);
-  return isMobile && isLandscape;
-};
-var useLandscapeHLSStream = () => {
-  const isLandscape = useIsLandscape();
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isLandscape && screenType === "hls_live_streaming";
-};
-var useMobileHLSStream = () => {
-  const isMobile = useMedia(config.media.md);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isMobile && screenType === "hls_live_streaming";
-};
-var useKeyboardHandler = (isPaused, hlsPlayer) => {
-  const handleKeyEvent = useCallback(
-    (event) => __async(void 0, null, function* () {
-      switch (event.key) {
-        case " ":
-          if (isPaused) {
-            yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-          } else {
-            hlsPlayer == null ? void 0 : hlsPlayer.pause();
-          }
-          break;
-        case "ArrowRight":
-          hlsPlayer == null ? void 0 : hlsPlayer.seekTo((hlsPlayer == null ? void 0 : hlsPlayer.getVideoElement().currentTime) + 10);
-          break;
-        case "ArrowLeft":
-          hlsPlayer == null ? void 0 : hlsPlayer.seekTo((hlsPlayer == null ? void 0 : hlsPlayer.getVideoElement().currentTime) - 10);
-          break;
-      }
-    }),
-    [hlsPlayer, isPaused]
-  );
-  return handleKeyEvent;
-};
-var useRecordingHandler = () => {
-  const hmsActions = useHMSActions();
-  const recordingState = useHMSStore(selectRecordingState);
-  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
-  useEffect(() => {
-    if (recordingState.browser.error && recordingStarted) {
-      setRecordingState(false);
-    }
-  }, [recordingStarted, recordingState.browser.error, setRecordingState]);
-  const startRecording = useCallback(
-    (resolution = null) => __async(void 0, null, function* () {
-      try {
-        setRecordingState(true);
-        setIsRecordingLoading(true);
-        yield hmsActions.startRTMPOrRecording({
-          resolution: getResolution(resolution),
-          record: true
-        });
-      } catch (error) {
-        const err = error;
-        if (err.message.includes("stream already running")) {
-          ToastManager.addToast({
-            title: "Recording already running",
-            variant: "error"
-          });
-        } else {
-          ToastManager.addToast({
-            title: err.message,
-            variant: "error"
-          });
-        }
-        setRecordingState(false);
-      }
-      setIsRecordingLoading(false);
-    }),
-    [hmsActions, setRecordingState]
-  );
-  return {
-    recordingStarted,
-    startRecording,
-    isRecordingLoading
-  };
-};
-function getResolution(recordingResolution) {
-  if (!recordingResolution) {
-    return void 0;
-  }
-  const resolution = RTMP_RECORD_DEFAULT_RESOLUTION;
-  if (recordingResolution.width) {
-    resolution.width = recordingResolution.width;
-  }
-  if (recordingResolution.height) {
-    resolution.height = recordingResolution.height;
-  }
-  return resolution;
-}
-function useWaitingRoomInfo() {
-  const localPeerRole = useHMSStore(selectLocalPeerRole);
-  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
-  const isScreenShareAllowed = isScreenshareSupported();
-  const roles = useHMSStore(selectRolesMap);
-  const peersByRoles = useHMSStore(selectPeersByRoles((localPeerRole == null ? void 0 : localPeerRole.subscribeParams.subscribeToRoles) || []));
-  const isNotAllowedToPublish = !(video || audio || screen && isScreenShareAllowed);
-  const isScreenOnlyPublishParams = screen && !(video || audio);
-  const hasSubscribedRolePublishing = useMemo(() => {
-    return peersByRoles.some((peer) => {
-      var _a;
-      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
-        return !!((_a = roles[peer.roleName].publishParams) == null ? void 0 : _a.allowed.length);
-      }
-      return false;
-    });
-  }, [peersByRoles, roles]);
-  return {
-    isNotAllowedToPublish,
-    isScreenOnlyPublishParams,
-    hasSubscribedRolePublishing
-  };
-}
-
-// src/Prebuilt/components/hooks/useDropdownList.ts
-init_define_process_env();
-import { useEffect as useEffect2 } from "react";
-var useDropdownList = ({ name, open }) => {
-  const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
-  useEffect2(() => {
-    if (open) {
-      if (!dropdownList.includes(name)) {
-        setDropdownList([...dropdownList, name]);
-      }
-    } else {
-      const index = dropdownList.indexOf(name);
-      if (index >= 0) {
-        const newDropdownList = [...dropdownList];
-        newDropdownList.splice(index, 1);
-        setDropdownList(newDropdownList);
-      }
-    }
-  }, [open, name]);
-};
-
-export {
-  Dropdown,
-  ToastManager,
-  useFilteredRoles,
-  useDefaultChatSelection,
-  useShowStreamingUI,
-  useParticipants,
-  useIsLandscape,
-  useLandscapeHLSStream,
-  useMobileHLSStream,
-  useKeyboardHandler,
-  useRecordingHandler,
-  useWaitingRoomInfo,
-  useDropdownList
-};
-//# sourceMappingURL=chunk-DANANDDE.js.map

package/dist/chunk-DANANDDE.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Dropdown/Dropdown.tsx", "../src/Prebuilt/components/Toast/ToastManager.js", "../src/Prebuilt/common/hooks.ts", "../src/Prebuilt/components/hooks/useDropdownList.ts"],
-  "sourcesContent": ["import {\n  CheckboxItem,\n  Content,\n  Group,\n  Item,\n  ItemIndicator,\n  Label,\n  Portal,\n  Root,\n  Separator,\n  Sub,\n  SubContent,\n  SubTrigger,\n  Trigger,\n} from '@radix-ui/react-dropdown-menu';\nimport { styled } from '../Theme';\n\nconst DropdownRoot = styled(Root, {});\n\nconst DropdownTrigger = styled(Trigger, {\n  cursor: 'pointer',\n  appearance: 'none !important',\n  '&[data-state=\"open\"]': {\n    backgroundColor: '$surface_bright',\n  },\n  '&:focus': {\n    outline: 'none',\n  },\n  '&:focus-visible': {\n    boxShadow: '0 0 0 3px $colors$primary_default',\n  },\n});\n\nconst DropdownTriggerItem = styled(SubTrigger, {\n  w: '100%',\n  color: '$on_surface_high',\n  p: '$8',\n  display: 'flex',\n  alignItems: 'center',\n  '&:hover': {\n    cursor: 'pointer',\n    bg: '$surface_brighter',\n  },\n  '&:focus-visible': {\n    bg: '$surface_brighter',\n    outline: 'none',\n  },\n});\n\nconst DropdownItem = styled(Item, {\n  color: '$on_surface_high',\n  p: '$8',\n  display: 'flex',\n  alignItems: 'center',\n  outline: 'none',\n  backgroundColor: '$surface_dim',\n  '&:hover': {\n    cursor: 'pointer',\n    bg: '$surface_bright',\n  },\n  '&:focus-visible': {\n    bg: '$surface_bright',\n  },\n});\n\nconst DropdownItemSeparator = styled(Separator, {\n  h: 1,\n  backgroundColor: '$border_bright',\n  m: '$4 $8',\n});\n\nconst DropdownContent = styled(Content, {\n  w: '$80',\n  maxHeight: '$64',\n  r: '$1',\n  py: '$4',\n  backgroundColor: '$surface_dim',\n  overflowY: 'auto',\n  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n  zIndex: 20,\n  fontFamily: '$sans',\n});\n\nconst DropdownLabel = styled(Label, {\n  display: 'flex',\n  alignItems: 'center',\n  h: '$12',\n  w: '100%',\n  p: '$8 $4',\n});\n\nconst DropdownGroup = styled(Group, {});\n\nconst DropdownSubMenu = styled(Sub, {});\n\nconst DropdownSubMenuContent = styled(SubContent, {\n  w: '$80',\n  maxHeight: '$64',\n  r: '$1',\n  py: '$4',\n  backgroundColor: '$surface_bright',\n  overflowY: 'auto',\n  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n  zIndex: 20,\n});\n\nconst DropdownCheckboxItem = styled(CheckboxItem, {\n  color: '$on_surface_high',\n  p: '$8',\n  display: 'flex',\n  alignItems: 'center',\n  outline: 'none',\n  '&:hover': {\n    cursor: 'pointer',\n    bg: '$surface_brighter',\n  },\n  '&:focus-visible': {\n    bg: '$surface_brighter',\n  },\n  gap: '$2',\n});\n\nconst DropdownItemIndicator = styled(ItemIndicator, {\n  w: '$10',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nexport const Dropdown = {\n  Root: DropdownRoot,\n  Trigger: DropdownTrigger,\n  TriggerItem: DropdownTriggerItem,\n  Content: DropdownContent,\n  Portal: Portal,\n  SubMenu: DropdownSubMenu,\n  SubMenuContent: DropdownSubMenuContent,\n  Item: DropdownItem,\n  Label: DropdownLabel,\n  Group: DropdownGroup,\n  ItemSeparator: DropdownItemSeparator,\n  CheckboxItem: DropdownCheckboxItem,\n  ItemIndicator: DropdownItemIndicator,\n};\n", "import { v4 } from 'uuid';\n\nexport const ToastManager = {\n  toasts: new Map(),\n  listeners: new Map(),\n  addToast(toast) {\n    const id = toast.id ? toast.id : v4();\n    this.toasts.set(id, { ...toast, id });\n    this.onChange();\n    return id;\n  },\n\n  clearAllToast() {\n    this.toasts.clear();\n    this.onChange();\n  },\n\n  removeToast(id) {\n    this.toasts.delete(id);\n    this.onChange();\n  },\n  replaceToast(id, toast) {\n    if (this.isActive(id)) {\n      this.toasts.set(id, { ...this.toasts.get(id), ...toast });\n      this.onChange();\n      return id;\n    } else {\n      return this.addToast(toast);\n    }\n  },\n  addListener(cb) {\n    this.listeners.set(cb, cb);\n  },\n  removeListener(cb) {\n    this.listeners.delete(cb);\n  },\n  isActive(id) {\n    return this.toasts.has(id);\n  },\n  onChange() {\n    const toasts = Array.from(this.toasts.values());\n    this.listeners.forEach(listener => listener(toasts));\n  },\n};\n", "import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSHLSPlayer } from '@100mslive/hls-player';\nimport { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';\nimport {\n  HMSPeer,\n  HMSRecording,\n  parsedUserAgent,\n  selectAvailableRoleNames,\n  selectIsAllowedToPublish,\n  selectIsConnectedToRoom,\n  selectLocalPeerRole,\n  selectPeerCount,\n  selectPeerMetadata,\n  selectPeers,\n  selectPeersByRoles,\n  selectRecordingState,\n  selectRemotePeers,\n  selectRolesMap,\n  useHMSActions,\n  useHMSStore,\n  useHMSVanillaStore,\n} from '@100mslive/react-sdk';\n// @ts-ignore: No implicit any\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { config } from '../../Theme';\nimport { useRoomLayout } from '../provider/roomLayoutProvider';\n// @ts-ignore\nimport { useSetAppDataByKey } from '../components/AppData/useUISettings';\nimport { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n// @ts-ignore: No implicit any\nimport { isScreenshareSupported } from '../common/utils';\nimport { APP_DATA, CHAT_SELECTOR, RTMP_RECORD_DEFAULT_RESOLUTION } from './constants';\n/**\n * Hook to execute a callback when alone in room(after a certain 5d of time)\n * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,\n * starting from the instant when alone in room.\n * note: the cb is not called when another peer joins during this period.\n */\nexport const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {\n  const isConnected = useHMSStore(selectIsConnectedToRoom);\n  const peerCount = useHMSStore(selectPeerCount);\n  const [aloneForLong, setAloneForLong] = useState(false);\n  const cbTimeout = useRef(null);\n  const alone = isConnected && peerCount === 1;\n\n  useEffect(() => {\n    if (alone && !cbTimeout.current) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      cbTimeout.current = setTimeout(() => {\n        setAloneForLong(true);\n      }, thresholdMs);\n    } else if (!alone) {\n      cbTimeout.current && clearTimeout(cbTimeout.current);\n      cbTimeout.current = null;\n      setAloneForLong(false);\n    }\n  }, [alone, thresholdMs]);\n\n  useEffect(() => {\n    return () => {\n      if (cbTimeout.current) {\n        clearTimeout(cbTimeout.current);\n      }\n    };\n  }, []);\n\n  return { alone, aloneForLong };\n};\n\nexport const useFilteredRoles = () => {\n  const { elements } = useRoomLayoutConferencingScreen();\n  return elements?.chat?.roles_whitelist || [];\n};\n\nexport const useDefaultChatSelection = () => {\n  const { elements } = useRoomLayoutConferencingScreen();\n  const roles = useFilteredRoles();\n  // default is everyone for public chat\n  if (elements?.chat?.public_chat_enabled) {\n    return CHAT_SELECTOR.EVERYONE;\n  }\n  // sending first role as default\n  if (roles.length > 0) {\n    return roles[0];\n  }\n  // sending empty\n  return '';\n};\n\nexport const useShowStreamingUI = () => {\n  const layout = useRoomLayout();\n  const { join_form } = layout?.screens?.preview?.default?.elements || {};\n  return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;\n};\n\n// The search results should not have role name matches\nexport const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }; role?: string; search?: string }) => {\n  const isConnected = useHMSStore(selectIsConnectedToRoom);\n  const peerCount = useHMSStore(selectPeerCount);\n  const availableRoles = useHMSStore(selectAvailableRoleNames);\n  let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);\n  const rolesWithParticipants = Array.from(new Set(participantList.map(peer => peer.roleName)));\n  const vanillaStore = useHMSVanillaStore();\n  if (params?.metadata?.isHandRaised) {\n    participantList = participantList.filter(peer => {\n      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;\n    });\n  }\n  if (params?.role && availableRoles.includes(params.role)) {\n    participantList = participantList.filter(peer => peer.roleName === params.role);\n  }\n  if (params?.search) {\n    const search = params.search;\n    // Removed peer.roleName?.toLowerCase().includes(search)\n    participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search));\n  }\n  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };\n};\n\nexport const useIsLandscape = () => {\n  const isMobile = parsedUserAgent.getDevice().type === 'mobile';\n  const isLandscape = useMedia(config.media.ls);\n  return isMobile && isLandscape;\n};\n\nexport const useLandscapeHLSStream = () => {\n  const isLandscape = useIsLandscape();\n  const { screenType } = useRoomLayoutConferencingScreen();\n  return isLandscape && screenType === 'hls_live_streaming';\n};\n\nexport const useMobileHLSStream = () => {\n  const isMobile = useMedia(config.media.md);\n  const { screenType } = useRoomLayoutConferencingScreen();\n  return isMobile && screenType === 'hls_live_streaming';\n};\n\nexport const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) => {\n  const handleKeyEvent = useCallback(\n    async (event: KeyboardEvent) => {\n      switch (event.key) {\n        case ' ':\n          if (isPaused) {\n            await hlsPlayer?.play();\n          } else {\n            hlsPlayer?.pause();\n          }\n          break;\n        case 'ArrowRight':\n          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime + 10);\n          break;\n        case 'ArrowLeft':\n          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime - 10);\n          break;\n      }\n    },\n    [hlsPlayer, isPaused],\n  );\n\n  return handleKeyEvent;\n};\nexport interface RTMPRecordingResolution {\n  width: number;\n  height: number;\n}\nexport const useRecordingHandler = () => {\n  const hmsActions = useHMSActions();\n  const recordingState: HMSRecording = useHMSStore(selectRecordingState);\n  const [isRecordingLoading, setIsRecordingLoading] = useState(false);\n  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);\n  useEffect(() => {\n    if (recordingState.browser.error && recordingStarted) {\n      setRecordingState(false);\n    }\n  }, [recordingStarted, recordingState.browser.error, setRecordingState]);\n  const startRecording = useCallback(\n    async (resolution: RTMPRecordingResolution | null = null) => {\n      try {\n        setRecordingState(true);\n        setIsRecordingLoading(true);\n        await hmsActions.startRTMPOrRecording({\n          resolution: getResolution(resolution),\n          record: true,\n        });\n      } catch (error) {\n        const err = error as Error;\n        if (err.message.includes('stream already running')) {\n          ToastManager.addToast({\n            title: 'Recording already running',\n            variant: 'error',\n          });\n        } else {\n          ToastManager.addToast({\n            title: err.message,\n            variant: 'error',\n          });\n        }\n        setRecordingState(false);\n      }\n      setIsRecordingLoading(false);\n    },\n    [hmsActions, setRecordingState],\n  );\n  return {\n    recordingStarted,\n    startRecording,\n    isRecordingLoading,\n  };\n};\n\nexport function getResolution(\n  recordingResolution: RTMPRecordingResolution | null,\n): RTMPRecordingResolution | undefined {\n  if (!recordingResolution) {\n    return undefined;\n  }\n  const resolution: RTMPRecordingResolution = RTMP_RECORD_DEFAULT_RESOLUTION;\n  if (recordingResolution.width) {\n    resolution.width = recordingResolution.width;\n  }\n  if (recordingResolution.height) {\n    resolution.height = recordingResolution.height;\n  }\n  return resolution;\n}\n\nexport interface WaitingRoomInfo {\n  isNotAllowedToPublish: boolean;\n  isScreenOnlyPublishParams: boolean;\n  hasSubscribedRolePublishing: boolean;\n}\nexport function useWaitingRoomInfo(): WaitingRoomInfo {\n  const localPeerRole = useHMSStore(selectLocalPeerRole);\n  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);\n  const isScreenShareAllowed = isScreenshareSupported();\n  const roles = useHMSStore(selectRolesMap);\n  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));\n  // show no publish as screenshare in mweb is not possible\n  const isNotAllowedToPublish = !(video || audio || (screen && isScreenShareAllowed));\n  const isScreenOnlyPublishParams: boolean = screen && !(video || audio);\n  const hasSubscribedRolePublishing: boolean = useMemo(() => {\n    return peersByRoles.some((peer: HMSPeer) => {\n      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {\n        return !!roles[peer.roleName].publishParams?.allowed.length;\n      }\n      return false;\n    });\n  }, [peersByRoles, roles]);\n\n  return {\n    isNotAllowedToPublish,\n    isScreenOnlyPublishParams,\n    hasSubscribedRolePublishing,\n  };\n}\n", "import { useEffect } from 'react';\n// @ts-ignore: No implicit Any\nimport { useSetAppDataByKey } from '../AppData/useUISettings';\nimport { APP_DATA } from '../../common/constants';\n\nexport const useDropdownList = ({ name, open }: { name: string; open: boolean }) => {\n  const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);\n\n  useEffect(() => {\n    if (open) {\n      if (!dropdownList.includes(name)) {\n        setDropdownList([...dropdownList, name]);\n      }\n    } else {\n      const index = dropdownList.indexOf(name);\n      if (index >= 0) {\n        const newDropdownList = [...dropdownList];\n        newDropdownList.splice(index, 1);\n        setDropdownList(newDropdownList);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, name]);\n};\n"],
-  "mappings": "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",
-  "names": ["useEffect", "useEffect"]
-}