@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.4

package/src/Prebuilt/AppStateContext.tsx

@@ -1,95 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { usePreviousDistinct } from 'react-use';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-import { match, P } from 'ts-pattern';
-import { HMSRoomState, selectRoomState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { VBHandler } from './components/VirtualBackground/VBHandler';
-import { useRoomLayout, useSetOriginalLayout } from './provider/roomLayoutProvider';
-import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
-import {
-  useRoomLayoutLeaveScreen,
-  useRoomLayoutPreviewScreen,
-} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { APP_DATA } from './common/constants';
-
-export enum PrebuiltStates {
-  MEETING = 'meeting',
-  PREVIEW = 'preview',
-  LEAVE = 'leave',
-}
-
-type AppStateContextType = {
-  rejoin: () => void;
-};
-
-export const AppStateContext = React.createContext<AppStateContextType>({
-  rejoin: () => {
-    console.log('Rejoin');
-  },
-});
-
-AppStateContext.displayName = 'AppStateContext';
-
-export const useHMSAppStateContext = () => {
-  const context = useContext(AppStateContext);
-  if (!context) {
-    throw Error('Make sure AppStateContext.Provider is present at the top level of your application');
-  }
-  return context;
-};
-
-export const useAppStateManager = () => {
-  const roomLayout = useRoomLayout();
-  const setOriginalLayout = useSetOriginalLayout();
-  const [activeState, setActiveState] = React.useState<PrebuiltStates | undefined>();
-  const roomState = useHMSStore(selectRoomState);
-  const prevRoomState = usePreviousDistinct(roomState);
-  const hmsActions = useHMSActions();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { redirectToLeave } = useRedirectToLeave();
-
-  const rejoin = () => {
-    setOriginalLayout?.();
-    hmsActions.setAppData(APP_DATA.authToken, '');
-    setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-  };
-
-  useEffect(() => {
-    if (!roomLayout) {
-      return;
-    }
-    match([roomState, prevRoomState])
-      .with([HMSRoomState.Connected, P.any], () => setActiveState(PrebuiltStates.MEETING))
-      .with(
-        [HMSRoomState.Disconnecting, HMSRoomState.Connected],
-        [HMSRoomState.Disconnecting, HMSRoomState.Connecting],
-        [HMSRoomState.Disconnecting, HMSRoomState.Reconnecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Connected],
-        [HMSRoomState.Disconnected, HMSRoomState.Connecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Preview],
-        () => {
-          setActiveState(prevState => {
-            return match({ isLeaveScreenEnabled, isPreviewScreenEnabled, prevState })
-              .when(
-                ({ isLeaveScreenEnabled, prevState }) => isLeaveScreenEnabled && prevState !== PrebuiltStates.LEAVE,
-                () => PrebuiltStates.LEAVE,
-              )
-              .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
-              .otherwise(() => PrebuiltStates.MEETING);
-          });
-          VBHandler.reset();
-          hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
-          redirectToLeave(1000); // to clear toasts after 1 second
-        },
-      )
-      .with([HMSRoomState.Disconnected, P.nullish], () => {
-        setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-      })
-      .otherwise(() => {
-        // do nothing
-      });
-  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]);
-  return { activeState, rejoin };
-};

package/src/Prebuilt/IconButton.tsx

@@ -1,26 +0,0 @@
-import { IconButton as BaseIconButton } from '../IconButton';
-import { styled } from '../Theme';
-
-const IconButton = styled(BaseIconButton, {
-  width: '$14',
-  height: '$14',
-  border: '1px solid $border_bright',
-  bg: '$background_dim',
-  r: '$1',
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
-  variants: {
-    active: {
-      true: {
-        color: '$on_surface_high',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-});
-
-export default IconButton;

package/src/Prebuilt/common/PeersSorter.ts

@@ -1,111 +0,0 @@
-import { HMSPeer, HMSPeerID, IStoreReadOnly, selectDominantSpeaker } from '@100mslive/react-sdk';
-
-class PeersSorter {
-  storeUnsubscribe: undefined | (() => void) = undefined;
-  store: IStoreReadOnly<any>;
-  peers: Map<string, HMSPeer>;
-  lruPeers: Set<HMSPeerID>;
-  tilesPerPage!: number;
-  speaker?: HMSPeer;
-  listeners: Set<(peers: HMSPeer[]) => void>;
-
-  constructor(store: IStoreReadOnly<any>) {
-    this.store = store;
-    this.peers = new Map();
-    this.lruPeers = new Set();
-    this.speaker = undefined;
-    this.listeners = new Set();
-  }
-
-  setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {
-    this.speaker = undefined;
-    this.tilesPerPage = tilesPerPage;
-    const peerIds = new Set(peers.map(peer => peer.id));
-    // remove existing peers which are no longer provided
-    this.peers.forEach((_, key) => {
-      if (!peerIds.has(key)) {
-        this.peers.delete(key);
-      }
-    });
-    this.lruPeers = new Set([...this.lruPeers].filter(peerId => peerIds.has(peerId)));
-    peers.forEach(peer => {
-      this.peers.set(peer.id, peer);
-      if (this.lruPeers.size < tilesPerPage) {
-        this.lruPeers.add(peer.id);
-      }
-    });
-    if (!this.storeUnsubscribe) {
-      this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, selectDominantSpeaker);
-    }
-    this.moveSpeakerToFront(this.speaker);
-  };
-
-  onUpdate = (cb: (peers: HMSPeer[]) => void) => {
-    this.listeners.add(cb);
-  };
-
-  stop = () => {
-    this.updateListeners();
-    this.listeners.clear();
-    this.storeUnsubscribe?.();
-    this.storeUnsubscribe = undefined;
-    this.speaker = undefined;
-  };
-
-  moveSpeakerToFront = (speaker?: HMSPeer) => {
-    if (!speaker) {
-      this.maintainLruSize(this.tilesPerPage);
-      this.updateListeners();
-      return;
-    }
-    if (this.lruPeers.has(speaker.id) && this.lruPeers.size <= this.tilesPerPage) {
-      this.updateListeners();
-      return;
-    }
-    // delete to insert at beginning
-    this.lruPeers.delete(speaker.id);
-    // - 1 as we are going to insert the new speaker
-    this.maintainLruSize(this.tilesPerPage - 1);
-    this.lruPeers = new Set([speaker.id, ...this.lruPeers]);
-    this.updateListeners();
-  };
-
-  onDominantSpeakerChange = (speaker: HMSPeer | null) => {
-    // no speaker or is current speaker do nothing
-    if (!speaker || speaker.id === this.speaker?.id) {
-      return;
-    }
-    // if the active speaker is not from the peers passed ignore
-    if (!this.peers.has(speaker.id)) {
-      return;
-    }
-    this.speaker = speaker;
-    this.moveSpeakerToFront(speaker);
-  };
-
-  updateListeners = () => {
-    const orderedPeers: HMSPeer[] = [];
-    this.lruPeers.forEach(key => {
-      const peer = this.peers.get(key);
-      if (peer) {
-        orderedPeers.push(peer);
-      }
-    });
-    this.peers.forEach(peer => {
-      if (!this.lruPeers.has(peer.id) && peer) {
-        orderedPeers.push(peer);
-      }
-    });
-    this.listeners.forEach(listener => listener?.(orderedPeers));
-  };
-
-  private maintainLruSize = (size: number) => {
-    const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length > size && lruPeerArray.length) {
-      lruPeerArray.pop();
-    }
-    this.lruPeers = new Set(lruPeerArray);
-  };
-}
-
-export default PeersSorter;

package/src/Prebuilt/common/constants.ts

@@ -1,151 +0,0 @@
-import { parsedUserAgent } from '@100mslive/react-sdk';
-
-export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
-export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
-export const QUERY_PARAM_NAME = 'name';
-export const QUERY_PARAM_VIEW_MODE = 'ui_mode';
-export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
-export const UI_MODE_GRID = 'grid';
-export const MAX_TOASTS = 5;
-export const RTMP_RECORD_RESOLUTION_MIN = 480;
-export const RTMP_RECORD_RESOLUTION_MAX = 1280;
-export const RTMP_RECORD_DEFAULT_RESOLUTION = {
-  width: 1280,
-  height: 720,
-};
-export const EMOJI_REACTION_TYPE = 'EMOJI_REACTION';
-
-export const CHAT_SELECTOR = {
-  PEER: 'peer',
-  ROLE: 'role',
-  EVERYONE: 'Everyone',
-};
-
-export const APP_DATA = {
-  uiSettings: 'uiSettings',
-  chatOpen: 'chatOpen',
-  chatSelector: 'chatSelector',
-  chatDraft: 'chatDraft',
-  appConfig: 'appConfig',
-  sidePane: 'sidePane',
-  hlsStats: 'hlsStats',
-  subscribedNotifications: 'subscribedNotifications',
-  logo: 'logo',
-  hlsStarted: 'hlsStarted',
-  rtmpStarted: 'rtmpStarted',
-  recordingStarted: 'recordingStarted',
-  embedConfig: 'embedConfig',
-  pinnedTrackId: 'pinnedTrackId',
-  dropdownList: 'dropdownList',
-  authToken: 'authToken',
-  pdfConfig: 'pdfConfig',
-  minimiseInset: 'minimiseInset',
-  activeScreensharePeerId: 'activeScreensharePeerId',
-  disableNotifications: 'disableNotifications',
-  pollState: 'pollState',
-  background: 'background',
-  sheet: 'sheet',
-  caption: 'caption',
-  loadingEffects: 'loadingEffects',
-  noiseCancellation: 'noiseCancellation',
-};
-
-export const UI_SETTINGS = {
-  isAudioOnly: 'isAudioOnly',
-  maxTileCount: 'maxTileCount',
-  uiViewMode: 'uiViewMode',
-  layoutMode: 'layoutMode',
-  showStatsOnTiles: 'showStatsOnTiles',
-  enableAmbientMusic: 'enableAmbientMusic',
-  mirrorLocalVideo: 'mirrorLocalVideo',
-};
-
-export const SIDE_PANE_OPTIONS = {
-  PARTICIPANTS: 'Participants',
-  CHAT: 'Chat',
-  STREAMING: 'STREAMING',
-  POLLS: 'POLLS',
-  VB: 'VB',
-  ROOM_DETAILS: 'ROOM_DETAILS',
-};
-
-export type SidePaneOption = (typeof SIDE_PANE_OPTIONS)[keyof typeof SIDE_PANE_OPTIONS];
-
-export const SHEET_OPTIONS = {
-  ROOM_DETAILS: 'ROOM_DETAILS',
-};
-
-export const POLL_STATE = {
-  pollInView: 'pollInView',
-  view: 'view',
-};
-
-export const POLL_VIEWS = {
-  CREATE_POLL_QUIZ: 'CREATE_POLL_QUIZ',
-  CREATE_QUESTIONS: 'CREATE_QUESTIONS',
-  VOTE: 'VOTE',
-  RESULTS: 'RESULTS',
-};
-
-export const CAPTION_TOAST = {
-  captionToast: 'captionToast',
-};
-export const SUBSCRIBED_NOTIFICATIONS = {
-  PEER_JOINED: 'PEER_JOINED',
-  PEER_LEFT: 'PEER_LEFT',
-  METADATA_UPDATED: 'METADATA_UPDATED',
-  NEW_MESSAGE: 'NEW_MESSAGE',
-  ERROR: 'ERROR',
-};
-
-export const CREATE_ROOM_DOC_URL = 'https://github.com/100mslive/100ms-web/wiki/Creating-and-joining-a-room';
-export const HLS_TIMED_METADATA_DOC_URL =
-  'https://www.100ms.live/docs/javascript/v2/how--to-guides/record-and-live-stream/hls/hls-timed-metadata';
-
-export const REMOTE_STOP_SCREENSHARE_TYPE = 'REMOTE_STOP_SCREENSHARE';
-
-export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'chrome';
-export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'firefox';
-export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'safari';
-export const isIOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'ios';
-export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'macos';
-export const isAndroid = parsedUserAgent.getOS()?.name?.toLowerCase() === 'android';
-export const isIPadOS = false;
-// typeof navigator !== "undefined" &&
-// navigator?.maxTouchPoints &&
-// navigator?.maxTouchPoints > 2 &&
-// navigator?.userAgent?.match(/Mac/);
-
-export enum SESSION_STORE_KEY {
-  TRANSCRIPTION_STATE = 'transcriptionState',
-  PINNED_MESSAGES = 'pinnedMessages',
-  SPOTLIGHT = 'spotlight',
-  CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
-  CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
-  CHAT_STATE = 'chatState',
-}
-
-export enum INTERACTION_TYPE {
-  POLL = 'Poll',
-  QUIZ = 'Quiz',
-}
-
-export enum QUESTION_TYPE_TITLE {
-  'single-choice' = 'Single Choice',
-  'multiple-choice' = 'Multiple Choice',
-  // 'short-answer' = 'Short Answer',
-  // 'long-answer' = 'Long Answer',
-}
-
-export enum QUESTION_TYPE {
-  SINGLE_CHOICE = 'single-choice',
-  MULTIPLE_CHOICE = 'multiple-choice',
-  // SHORT_ANSWER = 'short-answer',
-  // LONG_ANSWER = 'long-answer',
-}
-
-export const ROLE_CHANGE_DECLINED = 'role_change_declined';
-
-export const DEFAULT_PORTAL_CONTAINER = '.prebuilt-container';
-
-export const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';

package/src/Prebuilt/common/hooks.ts

@@ -1,257 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { HMSHLSPlayer } from '@100mslive/hls-player';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-import {
-  HMSPeer,
-  HMSRecording,
-  parsedUserAgent,
-  selectAvailableRoleNames,
-  selectIsAllowedToPublish,
-  selectIsConnectedToRoom,
-  selectLocalPeerRole,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers,
-  selectPeersByRoles,
-  selectRecordingState,
-  selectRemotePeers,
-  selectRolesMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-// @ts-ignore: No implicit any
-import { ToastManager } from '../components/Toast/ToastManager';
-import { config } from '../../Theme';
-import { useRoomLayout } from '../provider/roomLayoutProvider';
-// @ts-ignore
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit any
-import { isScreenshareSupported } from '../common/utils';
-import { APP_DATA, CHAT_SELECTOR, RTMP_RECORD_DEFAULT_RESOLUTION } from './constants';
-/**
- * Hook to execute a callback when alone in room(after a certain 5d of time)
- * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
- * starting from the instant when alone in room.
- * note: the cb is not called when another peer joins during this period.
- */
-export const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerCount = useHMSStore(selectPeerCount);
-  const [aloneForLong, setAloneForLong] = useState(false);
-  const cbTimeout = useRef(null);
-  const alone = isConnected && peerCount === 1;
-
-  useEffect(() => {
-    if (alone && !cbTimeout.current) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      cbTimeout.current = setTimeout(() => {
-        setAloneForLong(true);
-      }, thresholdMs);
-    } else if (!alone) {
-      cbTimeout.current && clearTimeout(cbTimeout.current);
-      cbTimeout.current = null;
-      setAloneForLong(false);
-    }
-  }, [alone, thresholdMs]);
-
-  useEffect(() => {
-    return () => {
-      if (cbTimeout.current) {
-        clearTimeout(cbTimeout.current);
-      }
-    };
-  }, []);
-
-  return { alone, aloneForLong };
-};
-
-export const useFilteredRoles = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  return elements?.chat?.roles_whitelist || [];
-};
-
-export const useDefaultChatSelection = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const roles = useFilteredRoles();
-  // default is everyone for public chat
-  if (elements?.chat?.public_chat_enabled) {
-    return CHAT_SELECTOR.EVERYONE;
-  }
-  // sending first role as default
-  if (roles.length > 0) {
-    return roles[0];
-  }
-  // sending empty
-  return '';
-};
-
-export const useShowStreamingUI = () => {
-  const layout = useRoomLayout();
-  const { join_form } = layout?.screens?.preview?.default?.elements || {};
-  return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-
-// The search results should not have role name matches
-export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }; role?: string; search?: string }) => {
-  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 (params?.metadata?.isHandRaised) {
-    participantList = participantList.filter(peer => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if (params?.role && availableRoles.includes(params.role)) {
-    participantList = participantList.filter(peer => peer.roleName === params.role);
-  }
-  if (params?.search) {
-    const search = params.search;
-    // Removed peer.roleName?.toLowerCase().includes(search)
-    participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-
-export const useIsLandscape = () => {
-  const isMobile = parsedUserAgent.getDevice().type === 'mobile';
-  const isLandscape = useMedia(config.media.ls);
-  return isMobile && isLandscape;
-};
-
-export const useLandscapeHLSStream = () => {
-  const isLandscape = useIsLandscape();
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isLandscape && screenType === 'hls_live_streaming';
-};
-
-export const useMobileHLSStream = () => {
-  const isMobile = useMedia(config.media.md);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isMobile && screenType === 'hls_live_streaming';
-};
-
-export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) => {
-  const handleKeyEvent = useCallback(
-    async (event: KeyboardEvent) => {
-      switch (event.key) {
-        case ' ':
-          if (isPaused) {
-            await hlsPlayer?.play();
-          } else {
-            hlsPlayer?.pause();
-          }
-          break;
-        case 'ArrowRight':
-          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime + 10);
-          break;
-        case 'ArrowLeft':
-          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime - 10);
-          break;
-      }
-    },
-    [hlsPlayer, isPaused],
-  );
-
-  return handleKeyEvent;
-};
-export interface RTMPRecordingResolution {
-  width: number;
-  height: number;
-}
-export const useRecordingHandler = () => {
-  const hmsActions = useHMSActions();
-  const recordingState: HMSRecording = 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(
-    async (resolution: RTMPRecordingResolution | null = null) => {
-      try {
-        setRecordingState(true);
-        setIsRecordingLoading(true);
-        await hmsActions.startRTMPOrRecording({
-          resolution: getResolution(resolution),
-          record: true,
-        });
-      } catch (error) {
-        const err = error as 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,
-  };
-};
-
-export function getResolution(
-  recordingResolution: RTMPRecordingResolution | null,
-): RTMPRecordingResolution | undefined {
-  if (!recordingResolution) {
-    return undefined;
-  }
-  const resolution: RTMPRecordingResolution = RTMP_RECORD_DEFAULT_RESOLUTION;
-  if (recordingResolution.width) {
-    resolution.width = recordingResolution.width;
-  }
-  if (recordingResolution.height) {
-    resolution.height = recordingResolution.height;
-  }
-  return resolution;
-}
-
-export interface WaitingRoomInfo {
-  isNotAllowedToPublish: boolean;
-  isScreenOnlyPublishParams: boolean;
-  hasSubscribedRolePublishing: boolean;
-}
-export function useWaitingRoomInfo(): WaitingRoomInfo {
-  const localPeerRole = useHMSStore(selectLocalPeerRole);
-  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
-  const isScreenShareAllowed = isScreenshareSupported();
-  const roles = useHMSStore(selectRolesMap);
-  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
-  // show no publish as screenshare in mweb is not possible
-  const isNotAllowedToPublish = !(video || audio || (screen && isScreenShareAllowed));
-  const isScreenOnlyPublishParams: boolean = screen && !(video || audio);
-  const hasSubscribedRolePublishing: boolean = useMemo(() => {
-    return peersByRoles.some((peer: HMSPeer) => {
-      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return false;
-    });
-  }, [peersByRoles, roles]);
-
-  return {
-    isNotAllowedToPublish,
-    isScreenOnlyPublishParams,
-    hasSubscribedRolePublishing,
-  };
-}