@100mslive/react-native-room-kit 1.1.3 → 1.1.5

package/src/components/Participants/ParticipantsItem.tsx

@@ -2,10 +2,16 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+import { HMSPeerType } from '@100mslive/react-native-hms';
 
 import { isParticipantHostOrBroadcaster } from '../../utils/functions';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
-import { HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
+import {
+  AnswerPhoneIcon,
+  HandIcon,
+  NetworkQualityIcon,
+  ThreeDotsIcon,
+} from '../../Icons';
 import { Menu } from '../MenuModal';
 import { ParticipantsItemOptions } from './ParticipantsItemOptions';
 import type { RootState } from '../../redux';
@@ -45,6 +51,7 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
   }));
 
   const show3Dots = selfHostOrBroadcaster && !peer.isLocal;
+  const isSIPPeerType = peer.type === HMSPeerType.SIP;
 
   const showOptions = () => setOptionsVisible(true);
 
@@ -52,7 +59,12 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text testID={TestIds.participant_name} style={[styles.label, hmsRoomStyles.label]}>
+      <Text
+        testID={TestIds.participant_name}
+        style={[styles.label, hmsRoomStyles.label]}
+        ellipsizeMode="middle"
+        numberOfLines={1}
+      >
         {peer.name}
         {peer.isLocal ? ' (You)' : null}
       </Text>
@@ -70,7 +82,20 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
           </View>
         ) : null}
 
-        {peer.networkQuality &&
+        {isSIPPeerType ? (
+          <View
+            style={[
+              styles.control,
+              styles.iconWrapper,
+              hmsRoomStyles.iconWrapper,
+            ]}
+          >
+            <AnswerPhoneIcon style={styles.networkIcon} />
+          </View>
+        ) : null}
+
+        {!isSIPPeerType &&
+        peer.networkQuality &&
         peer.networkQuality.downlinkQuality >= 0 &&
         peer.networkQuality.downlinkQuality < 4 ? (
           <View
@@ -119,6 +144,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   label: {
+    flexShrink: 1,
     fontSize: 14,
     lineHeight: 20,
     letterSpacing: 0.1,

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+import { HMSPeerType } from '@100mslive/react-native-hms';
 
 import {
   useHMSInstance,
@@ -156,25 +157,29 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     !insideHandRaiseGroup &&
     localPeerCanMuteTrack &&
     peerCanPublishAudio &&
-    peer.audioTrack?.isMute() === false;
+    peer.audioTrack?.isMute() === false &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showUnmuteAudioOption =
     !insideHandRaiseGroup &&
     localPeerCanUnmuteTrack &&
     peerCanPublishAudio &&
-    peer.audioTrack?.isMute();
+    peer.audioTrack?.isMute() &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showMuteVideoOption =
     !insideHandRaiseGroup &&
     localPeerCanMuteTrack &&
     peerCanPublishVideo &&
-    peer.videoTrack?.isMute() === false;
+    peer.videoTrack?.isMute() === false &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showUnmuteVideoOption =
     !insideHandRaiseGroup &&
     localPeerCanUnmuteTrack &&
     peerCanPublishVideo &&
-    peer.videoTrack?.isMute();
+    peer.videoTrack?.isMute() &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showBringOnStageOptions =
     offStageRoles && offStageRoles.includes(peer.role?.name || '');

package/src/components/PeerSettingsModalContent.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
+import type { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
 import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  LayoutAnimation,
   InteractionManager,
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import type { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
-import { HMSTrack } from '@100mslive/react-native-hms';
+import { HMSPeerType, HMSTrack } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { ModalTypes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
+import { ModalTypes } from '../utils/types';
 import { setInsetViewMinimized } from '../redux/actions';
 import { useHMSRoomStyle, useModalType } from '../hooks-util';
 import {
@@ -157,7 +157,9 @@ export const PeerSettingsModalContent: React.FC<
             ) : null}
 
             {/* If Peer's Audio is Unmuted and Local Peer has mute Permissions */}
-            {!isPeerAudioMute && localPeerPermissions?.mute ? (
+            {!isPeerAudioMute &&
+            localPeerPermissions?.mute &&
+            peer.type === HMSPeerType.REGULAR ? (
               <SettingItem
                 text={'Mute Audio'}
                 icon={<MicIcon muted={true} style={styles.customIcon} />}
@@ -180,7 +182,9 @@ export const PeerSettingsModalContent: React.FC<
             ) : null}
 
             {/* If Peer's Video is Unmuted and Local Peer has mute Permissions */}
-            {!isPeerVideoMute && localPeerPermissions?.mute ? (
+            {!isPeerVideoMute &&
+            localPeerPermissions?.mute &&
+            peer.type === HMSPeerType.REGULAR ? (
               <SettingItem
                 text={'Mute Video'}
                 icon={<CameraIcon muted={true} style={styles.customIcon} />}

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -3,12 +3,17 @@ import { StyleSheet, Text, View } from 'react-native';
 import { HMSTrackSource } from '@100mslive/react-native-hms';
 
 import { hexToRgbA } from '../../utils/theme';
-import { NetworkQualityIcon, ScreenShareIcon } from '../../Icons';
+import {
+  AnswerPhoneIcon,
+  NetworkQualityIcon,
+  ScreenShareIcon,
+} from '../../Icons';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { TestIds } from '../../utils/constants';
 
 export interface PeerNameAndNetworkProps {
   name: string;
+  isSIPPeerType: boolean | undefined;
   isLocal: boolean | undefined;
   trackSource: HMSTrackSource | undefined;
   networkQuality: number | undefined;
@@ -16,6 +21,7 @@ export interface PeerNameAndNetworkProps {
 
 export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
   name,
+  isSIPPeerType,
   isLocal,
   trackSource,
   networkQuality,
@@ -41,24 +47,28 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
       <View style={[styles.contentContainer, hmsRoomStyles.contentContainer]}>
         {isScreenTrackSource ? (
           <ScreenShareIcon style={styles.screenShareIcon} />
+        ) : isSIPPeerType ? (
+          <AnswerPhoneIcon style={styles.phoneIcon} />
         ) : null}
 
         <Text
           testID={TestIds.tile_user_name}
           style={[styles.name, hmsRoomStyles.name]}
           numberOfLines={1}
-          ellipsizeMode={showTrackSource ? 'middle' : 'tail'}
+          ellipsizeMode={showTrackSource || isSIPPeerType ? 'middle' : 'tail'}
         >
           {name}
-          {isLocal ? ' (You)' : ''}
-          {showTrackSource ? `'s ${trackSource}` : ''}
+          {isLocal && ' (You)'}
+          {showTrackSource && `'s ${trackSource}`}
         </Text>
 
-        <NetworkQualityIcon
-          testID={TestIds.tile_network_icon}
-          quality={networkQuality}
-          style={styles.networkIcon}
-        />
+        {isSIPPeerType ? null : (
+          <NetworkQualityIcon
+            testID={TestIds.tile_network_icon}
+            quality={networkQuality}
+            style={styles.networkIcon}
+          />
+        )}
       </View>
     </View>
   );
@@ -76,6 +86,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 8,
+    alignItems: 'center',
     marginLeft: 8, // left offset
     marginRight: 20 + 4 + 44, // network icon width + network icon left margin + 3 dots button width and horizontal margins
   },
@@ -91,6 +102,11 @@ const styles = StyleSheet.create({
     height: 20,
     marginRight: 6,
   },
+  phoneIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
   networkIcon: {
     marginLeft: 4,
   },

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import {
+  HMSPeerType,
   HMSTrackSource,
   HMSTrackType,
   HMSVideoViewMode,
@@ -23,7 +24,7 @@ import type { PeerTrackNode } from '../../utils/types';
 import { isTileOnSpotlight } from '../../utils/functions';
 import {
   selectAllowedTracksToPublish,
-  selectCanPublishTrackForRole,
+  // selectCanPublishTrackForRole,
 } from '../../hooks-sdk-selectors';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { HMSFullScreenButton } from './HMSFullScreenButton';
@@ -89,14 +90,14 @@ export const _PeerVideoTileView = React.forwardRef<
 
     const { peer, track, isDegraded } = peerTrackNode;
 
-    const peerCanPublishAudio = selectCanPublishTrackForRole(
-      peer.role,
-      'audio'
-    );
-    const peerCanPublishVideo = selectCanPublishTrackForRole(
-      peer.role,
-      'video'
-    );
+    // const peerCanPublishAudio = selectCanPublishTrackForRole(
+    //   peer.role,
+    //   'audio'
+    // );
+    // const peerCanPublishVideo = selectCanPublishTrackForRole(
+    //   peer.role,
+    //   'video'
+    // );
 
     const allowedToPublish = useSelector((state: RootState) => {
       const allowed = selectAllowedTracksToPublish(state);
@@ -134,7 +135,7 @@ export const _PeerVideoTileView = React.forwardRef<
       !!trackSource && trackSource === HMSTrackSource.SCREEN;
 
     const showingVideoTrack =
-      peerCanPublishVideo &&
+      // peerCanPublishVideo && // Refer #RN-254@Jira, when user skips preview, it receives stub role object which has `publishPermissions` as `undefined`
       track &&
       track.trackId &&
       track.type === HMSTrackType.VIDEO &&
@@ -187,13 +188,14 @@ export const _PeerVideoTileView = React.forwardRef<
           isPipModeActive || isLandscapeOrientation ? null : (
             <HMSFullScreenButton peerTrackNode={peerTrackNode} />
           )
-        ) : peerCanPublishAudio ? (
-          <PeerAudioIndicator isMuted={peer.audioTrack?.isMute()} peer={peer} />
+        ) : peer.audioTrack && peer.audioTrack.id ? (
+          <PeerAudioIndicator isMuted={peer.audioTrack.isMute()} peer={peer} />
         ) : null}
 
         {/* Handling showing Peer name */}
         {insetMode || isPipModeActive ? null : (
           <PeerNameAndNetwork
+            isSIPPeerType={peer.type === HMSPeerType.SIP}
             name={peer.name}
             isLocal={peer.isLocal}
             trackSource={trackSource}

package/src/components/PollAndQuizVoting.tsx

@@ -49,6 +49,18 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
     }
     return null;
   });
+  const pollId = selectedPoll?.pollId;
+  const localPeerPollInitiator = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    const localPeerUserId = state.hmsStates.localPeer?.customerUserID;
+    const pollInitiatorUserID =
+      state.polls.polls[pollId]?.createdBy?.customerUserID;
+    return (
+      localPeerUserId &&
+      pollInitiatorUserID &&
+      localPeerUserId === pollInitiatorUserID
+    );
+  });
   const canCreateOrEndPoll = useSelector((state: RootState) => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
@@ -187,7 +199,7 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
         {selectedPoll &&
         selectedPoll.type === HMSPollType.quiz &&
         selectedPoll.state === HMSPollState.stopped &&
-        !canCreateOrEndPoll ? (
+        !localPeerPollInitiator ? (
           <React.Fragment>
             <VoterParticipationSummary pollId={selectedPoll.pollId} />
 

package/src/components/Preview.tsx

@@ -20,7 +20,11 @@ import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
-import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
+import {
+  useCanPublishAudio,
+  useCanPublishVideo,
+  useHMSActions,
+} from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import {
@@ -30,6 +34,9 @@ import {
 } from '../hooks-util';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { hexToRgbA } from '../utils/theme';
+import { HMSManageNoiseCancellation } from './HMSManageNoiseCancellation';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
@@ -88,6 +95,35 @@ export const Preview = ({
     setupAudioVideoOnPreview().then((r) => console.log(r));
   }, []);
 
+  const canPublishAudio = useCanPublishAudio();
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+
+  const [isNCAvailable, setIsNCAvailable] = React.useState(false);
+
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+
+  useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let isMounted = true;
+
+      noiseCancellationPlugin.isNoiseCancellationAvailable().then((r) => {
+        if (isMounted) {
+          setIsNCAvailable(r);
+        }
+      });
+      return () => {
+        isMounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+
+  const showNoiseCancellationButton =
+    canPublishAudio && !isLocalAudioMuted && isNCAvailable;
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={[styles.container, hmsRoomStyles.container]}>
@@ -138,13 +174,15 @@ export const Preview = ({
                 <View style={styles.micAndCameraControls}>
                   <HMSManageLocalAudio />
 
-                  <View style={styles.manageLocalVideoWrapper}>
+                  <View style={styles.manageLocalButtonWrapper}>
                     <HMSManageLocalVideo />
                   </View>
 
                   <HMSManageCameraRotation />
                 </View>
 
+                {showNoiseCancellationButton && <HMSManageNoiseCancellation />}
+
                 <HMSManageAudioOutput />
               </View>
             )}
@@ -201,8 +239,9 @@ const styles = StyleSheet.create({
   },
   micAndCameraControls: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
-  manageLocalVideoWrapper: {
+  manageLocalButtonWrapper: {
     marginHorizontal: 16,
   },
   joinButtonRow: {

package/src/components/QuizLeaderboardScreen.tsx

@@ -200,7 +200,7 @@ export const QuizLeaderboardScreen: React.FC<QuizLeaderboardScreenProps> = ({
                 );
               })}
 
-              {leaderboardData?.hasNext && leaderboardEntries.length <= 5 ? (
+              {leaderboardData?.hasNext && leaderboardEntries.length >= 5 ? (
                 <React.Fragment>
                   <View style={[styles.divider, hmsRoomStyles.divider]} />
 

package/src/components/RoomSettingsModalContent.tsx

@@ -16,10 +16,12 @@ import {
   PollVoteIcon,
   RecordingIcon,
   ScreenShareIcon,
+  WaveIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
+  useHMSConferencingScreenConfig,
   useHMSLayoutConfig,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -27,6 +29,7 @@ import {
   useStartRecording,
 } from '../hooks-util';
 import {
+  useCanPublishAudio,
   useCanPublishScreen,
   useHMSActions,
   useIsAnyStreamingOn,
@@ -183,6 +186,72 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
+  // #region Noise Cancellation Plugin
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+  const [isNoiseCancellationEnabled, setIsNoiseCancellationEnabled] =
+    React.useState(false);
+  const [isNoiseCancellationAvailable, setIsNoiseCancellationAvailable] =
+    React.useState(false);
+
+  const canPublishAudio = useCanPublishAudio();
+
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+
+  const showNoiseCancellationButton =
+    canPublishAudio && isNoiseCancellationAvailable;
+
+  React.useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let mounted = true;
+
+      Promise.all(
+        [
+          noiseCancellationPlugin.isEnabled(),
+          noiseCancellationPlugin.isNoiseCancellationAvailable(),
+        ].map((promise) =>
+          promise
+            .then((value) => ({ status: 'fulfilled' as const, value }))
+            .catch((reason) => ({ status: 'rejected' as const, reason }))
+        )
+      ).then((results) => {
+        const [isEnabledResult, isAvailableResult] = results;
+        if (mounted) {
+          if (isEnabledResult && isEnabledResult.status === 'fulfilled') {
+            setIsNoiseCancellationEnabled(isEnabledResult.value);
+          }
+          if (isAvailableResult && isAvailableResult.status === 'fulfilled') {
+            setIsNoiseCancellationAvailable(isAvailableResult.value);
+          }
+        }
+      });
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+
+  const handleNoiseCancellation = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      if (!noiseCancellationPlugin || !isNoiseCancellationAvailable) return;
+
+      if (isNoiseCancellationEnabled) {
+        noiseCancellationPlugin.disable();
+      } else {
+        noiseCancellationPlugin.enable();
+      }
+    });
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+  // #endregion
+
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -207,6 +276,10 @@ export const RoomSettingsModalContent: React.FC<
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
   );
 
+  const canRaiseHand = useHMSConferencingScreenConfig(
+    (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
+  );
+
   const isOnStage = useHMSLayoutConfig((layoutConfig) => {
     return !!layoutConfig?.screens?.conferencing?.default?.elements
       ?.on_stage_exp;
@@ -217,7 +290,7 @@ export const RoomSettingsModalContent: React.FC<
     return (allowed && allowed.length > 0) ?? false;
   });
 
-  const showHandRaiseIcon = !isOnStage && allowedToPublish;
+  const showHandRaiseIcon = canRaiseHand && !isOnStage && allowedToPublish;
 
   return (
     <View>
@@ -321,6 +394,17 @@ export const RoomSettingsModalContent: React.FC<
               isActive: false,
               hide: !canReadOrWritePoll,
             },
+            {
+              id: 'noise-cancellation',
+              icon: <WaveIcon style={{ width: 20, height: 20 }} />,
+              label: isNoiseCancellationEnabled
+                ? 'Noise Reduced'
+                : 'Reduce Noise',
+              pressHandler: handleNoiseCancellation,
+              isActive: isNoiseCancellationEnabled,
+              hide: !showNoiseCancellationButton,
+              disabled: isLocalAudioMuted,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/styles.ts

@@ -956,6 +956,10 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 10,
   },
+  noiseButton: {
+    marginLeft: 'auto',
+    marginRight: 16,
+  },
 });
 
 export { styles };

package/src/hooks-util.ts

@@ -1777,11 +1777,22 @@ export const useHMSConfig = () => {
 
     const storeState = store.getState() as RootState;
 
-    const token = await hmsInstance.getAuthTokenByRoomCode(
-      storeState.user.roomCode,
-      storeState.user.userId,
-      storeState.user.endPoints?.token
-    );
+    const givenToken = storeState.user.token;
+    let genToken = null;
+
+    if (!givenToken) {
+      if (storeState.user.roomCode) {
+        genToken = await hmsInstance.getAuthTokenByRoomCode(
+          storeState.user.roomCode,
+          storeState.user.userId,
+          storeState.user.endPoints?.token
+        );
+      } else {
+        throw new Error('`token` or `roomCode` is required to join a HMS Room');
+      }
+    }
+
+    const token = (givenToken || genToken) as string;
 
     // TODO: [REMOVE LATER] added trycatch block so that we can join rooms where we are getting error from Layout API
     try {
@@ -2165,6 +2176,7 @@ export const useLeaveMethods = () => {
           // Otherwise default action is to show "Meeting Ended" screen
           dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
         }
+        hmsInstance.setAlwaysScreenOn(false);
       } catch (e) {
         console.log(`Destroy HMS instance Error: ${e}`);
         Toast.showWithGravity(
@@ -2591,17 +2603,23 @@ export const useSavePropsToStore = (
   props: HMSPrebuiltProps,
   dispatch: AppDispatch
 ) => {
-  const { roomCode, options, onLeave, handleBackButton, autoEnterPipMode } =
-    props;
+  const {
+    roomCode,
+    token,
+    options,
+    onLeave,
+    handleBackButton,
+    autoEnterPipMode,
+  } = props;
 
-  dispatch(setPrebuiltData({ roomCode, options }));
+  dispatch(setPrebuiltData({ roomCode, token, options }));
 
   useEffect(() => {
     const passedUserName = options?.userName;
     if (passedUserName && passedUserName.length > 0) {
       dispatch(setEditUsernameDisabled(true));
     }
-  }, [roomCode, options]);
+  }, [roomCode, token, options]);
 
   useEffect(() => {
     dispatch(setOnLeaveHandler(onLeave));

package/src/redux/actionTypes.ts

@@ -185,6 +185,7 @@ export enum HmsStateActionTypes {
   REPLACE_PARTICIPANTS_LIST = 'REPLACE_PARTICIPANTS_LIST',
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
+  SET_NOISE_CANCELLATION_PLUGIN = 'SET_NOISE_CANCELLATION_PLUGIN',
   SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }