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

package/dist/chunk-DANANDDE.js

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

@@ -0,0 +1,7 @@
+{
+  "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"]
+}