@100mslive/react-native-room-kit 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -127,7 +127,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@100mslive/types-prebuilt": "^0.12.8",
+    "@100mslive/types-prebuilt": "^0.12.9",
     "@react-navigation/native": "^6.0.8",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0"
@@ -157,7 +157,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.10.8",
+    "@100mslive/react-native-hms": "1.10.9",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",

package/src/HMSInstanceSetup.tsx

@@ -75,7 +75,7 @@ const getTrackSettings = (
       ? HMSTrackSettingsInitState.MUTED
       : HMSTrackSettingsInitState.UNMUTED,
     cameraFacing: HMSCameraFacing.FRONT,
-    disableAutoResize: !joinConfig.autoResize,
+    disableAutoResize: joinConfig.autoResize,
     forceSoftwareDecoder: joinConfig.softwareDecoder,
     videoPlugin: videoPlugin || undefined,
   });
@@ -141,6 +141,7 @@ const getHmsInstance = async (
   const hmsInstance = await HMSSDK.build({
     logSettings,
     trackSettings,
+    haltPreviewJoinForPermissionsRequestOnAndroid: true,
     appGroup,
     preferredExtension,
     isPrebuilt: true,

package/src/HMSRoomSetup.tsx

@@ -7,7 +7,16 @@ import {
   HMSWhiteboardUpdateType,
 } from '@100mslive/react-native-hms';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Alert, Keyboard, StatusBar, StyleSheet, View } from 'react-native';
+import {
+  Alert,
+  Keyboard,
+  PermissionsAndroid,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
+import type { Permission } from 'react-native';
 import Toast from 'react-native-simple-toast';
 import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
@@ -366,6 +375,44 @@ export const HMSRoomSetup = () => {
     };
   }, [startHLSStreaming, hmsInstance]);
 
+  if (Platform.OS === 'android') {
+    /**
+     * Sets up a listener for permissions requests on Android devices.
+     *
+     * This listener is activated when the HMS SDK requests permissions, such as camera or microphone access.
+     * It uses the `PermissionsAndroid` API to request these permissions from the user asynchronously.
+     * Upon receiving the permissions, it notifies the HMS SDK that the permissions have been accepted,
+     * allowing the SDK to proceed with operations that require these permissions.
+     *
+     * Note: This listener is only set up and functional on Android devices, as indicated by the `Platform.OS` check.
+     */
+    useEffect(() => {
+      const onPermissionsRequested = async ({
+        permissions,
+      }: {
+        permissions: Array<string>;
+      }) => {
+        // Requests multiple permissions using the PermissionsAndroid API.
+        await PermissionsAndroid.requestMultiple(permissions as Permission[]);
+        // Notifies the HMS SDK that the permissions have been accepted.
+        await hmsInstance.setPermissionsAcceptedOnAndroid();
+      };
+
+      // Adds the permissions requested listener to the HMS SDK.
+      hmsInstance.addEventListener(
+        HMSUpdateListenerActions.ON_PERMISSIONS_REQUESTED,
+        onPermissionsRequested
+      );
+
+      // Cleanup function to remove the listener when the component unmounts or dependencies change.
+      return () => {
+        hmsInstance.removeEventListener(
+          HMSUpdateListenerActions.ON_PERMISSIONS_REQUESTED
+        );
+      };
+    }, [hmsInstance]);
+  }
+
   // HMS Active Speaker Listener
   // dev-note: This is added here because we have `setPeerTrackNodes` here
   useHMSActiveSpeakerUpdates(setPeerTrackNodes, meetingJoined);
@@ -452,7 +499,7 @@ export const HMSRoomSetup = () => {
               // Show notification only if poll is started 20 or more seconds ago
               if (
                 poll.startedAt &&
-                Date.now() - poll.startedAt.getTime() >= 20_000
+                Date.now() - poll.startedAt.getTime() >= 20000
               ) {
                 dispatch(
                   addNotification({

package/src/components/HMSManageNoiseCancellation.tsx

@@ -4,6 +4,7 @@ import { PressableIcon } from './PressableIcon';
 import { styles } from './styles';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
+import { useHMSLayoutConfig } from '../hooks-util';
 
 export const HMSManageNoiseCancellation = () => {
   const noiseCancellationPlugin = useSelector(
@@ -12,6 +13,20 @@ export const HMSManageNoiseCancellation = () => {
   const [isNoiseCancellationEnabled, setIsNoiseCancellationEnabled] =
     React.useState(false);
 
+  const enabledByDefault = useHMSLayoutConfig((layoutConfig) => {
+    return (
+      layoutConfig?.screens?.preview?.default?.elements?.noise_cancellation
+        ?.enabled_by_default || false
+    );
+  });
+
+  React.useEffect(() => {
+    if (enabledByDefault) {
+      noiseCancellationPlugin?.enable();
+      setIsNoiseCancellationEnabled(true);
+    }
+  }, []);
+
   const handleButtonPress = async () => {
     const isAvailable =
       await noiseCancellationPlugin?.isNoiseCancellationAvailable();

package/src/components/MeetingScreenContent.tsx

@@ -17,7 +17,7 @@ import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useKeyboardState } from '../hooks-util';
+import { useHMSLayoutConfig, useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { AnimatedHeader } from './AnimatedHeader';
@@ -138,6 +138,26 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     .onEnd(() => toggleControls())
     .requireExternalGestureToFail();
 
+  const enabledByDefault = useHMSLayoutConfig((layoutConfig) => {
+    return (
+      layoutConfig?.screens?.preview?.default?.elements?.noise_cancellation
+        ?.enabled_by_default || false
+    );
+  });
+
+  const shouldEnableNoiseCancellation =
+    Platform.OS === 'ios' && enabledByDefault;
+
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+
+  React.useEffect(() => {
+    if (shouldEnableNoiseCancellation) {
+      noiseCancellationPlugin?.enable();
+    }
+  }, []);
+
   return (
     <View style={styles.container}>
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />

package/src/components/Modals.tsx

@@ -10,7 +10,6 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import type { ImageURISource } from 'react-native';
-import Toast from 'react-native-simple-toast';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   HMSTrack,
@@ -34,53 +33,75 @@ import { styles } from './styles';
 import { CustomButton } from './CustomButton';
 import { Menu, MenuItem } from './MenuModal';
 
-import { changeHLSAspectRatio, changeShowStats } from '../redux/actions';
+import {
+  addNotification,
+  changeHLSAspectRatio,
+  changeShowStats,
+} from '../redux/actions';
 import { getTime } from '../utils/functions';
 import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { SwitchRow } from './SwitchRow';
-import { useHMSConferencingScreenConfig, useHMSInstance } from '../hooks-util';
+import { useHMSInstance } from '../hooks-util';
+import { ChevronIcon } from '../Icons';
+import { NotificationTypes } from '../types';
 
 export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   const instance = useHMSInstance();
-  const peer = useSelector((state: RootState) => state.app.peerToUpdate);
-  const roles = useSelector((state: RootState) => state.hmsStates.roles);
-
-  const [newRole, setNewRole] = useState<HMSRole>(peer?.role!);
-  const [visible, setVisible] = useState<boolean>(false);
+  const dispatch = useDispatch();
+  const allRoles = useSelector((state: RootState) => state.hmsStates.roles);
+  let peer = useSelector((state: RootState) => state.app.peerToUpdate);
 
-  const skipPreviewForRoleChange = useHMSConferencingScreenConfig(
-    (conferencingScreenConfig) => {
-      if (
-        conferencingScreenConfig?.elements &&
-        'on_stage_exp' in conferencingScreenConfig.elements
-      ) {
-        return (
-          conferencingScreenConfig.elements.on_stage_exp
-            ?.skip_preview_for_role_change || false
-        );
-      }
-      return false;
+  useEffect(() => {
+    let validRoles = allRoles.filter(
+      (role) =>
+        role.name !== peer?.role?.name && role.name !== '__internal_recorder'
+    );
+    setValidRoles(validRoles);
+    if (validRoles.length > 0) {
+      setNewRole(validRoles[0]);
     }
+  }, [allRoles, peer]);
+
+  const [validRoles, setValidRoles] = useState<HMSRole[] | undefined>(
+    undefined
   );
+  const [newRole, setNewRole] = useState<HMSRole | undefined>(undefined);
+
+  const [visible, setVisible] = useState<boolean>(false);
+
   const hideMenu = () => setVisible(false);
   const showMenu = () => setVisible(true);
-  const changeRole = () => {
-    instance
-      ?.changeRoleOfPeer(peer!, newRole, skipPreviewForRoleChange)
-      .catch((e) => {
-        console.log('Change Role of Peer Error: ', e);
-        Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
+  const switchRole = () => {
+    if (newRole) {
+      instance?.changeRoleOfPeer(peer!, newRole, true).catch((e) => {
+        console.log('Switch Role of Peer Error: ', e);
+        dispatch(
+          addNotification({
+            id: Math.random().toString(16).slice(2),
+            type: NotificationTypes.ERROR,
+            title: e.message,
+          })
+        );
       });
+    } else {
+      dispatch(
+        addNotification({
+          id: Math.random().toString(16).slice(2),
+          type: NotificationTypes.ERROR,
+          title: 'Please select a role',
+        })
+      );
+    }
     cancelModal();
   };
 
   return (
     <View style={styles.roleChangeModal}>
-      <Text style={styles.roleChangeModalHeading}>Change Role</Text>
+      <Text style={styles.roleChangeModalHeading}>Switch Role</Text>
       <Text style={styles.roleChangeModalDescription}>
-        Change the role of '{peer?.name}' to
+        Switch the role of '{peer?.name}' from '{peer?.role?.name}' to
       </Text>
       <Menu
         visible={visible}
@@ -88,16 +109,20 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
           <TouchableOpacity
             style={styles.participantChangeRoleContainer}
             onPress={showMenu}
+            disabled={validRoles && validRoles?.length <= 1}
           >
             <Text style={styles.participantFilterText} numberOfLines={1}>
               {newRole?.name}
             </Text>
+            {validRoles && validRoles?.length > 1 && (
+              <ChevronIcon direction={'down'} />
+            )}
           </TouchableOpacity>
         }
         onRequestClose={hideMenu}
         style={styles.participantsMenuContainer}
       >
-        {roles?.map((knownRole) => {
+        {validRoles?.map((knownRole) => {
           return (
             <MenuItem
               onPress={() => {
@@ -123,8 +148,8 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
           textStyle={styles.roleChangeModalButtonText}
         />
         <CustomButton
-          title="Change"
-          onPress={changeRole}
+          title="Switch Role"
+          onPress={switchRole}
           viewStyle={styles.roleChangeModalSuccessButton}
           textStyle={styles.roleChangeModalButtonText}
         />

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
 import { HMSPeerType } from '@100mslive/react-native-hms';
 
@@ -8,12 +8,15 @@ import {
   useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomStyleSheet,
+  useModalType,
 } from '../../hooks-util';
 import { CameraIcon, HandIcon, MicIcon, PersonIcon } from '../../Icons';
 import { ParticipantsItemOption } from './ParticipantsItemOption';
 import type { RootState } from '../../redux';
 import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
 import { parseMetadata } from '../../utils/functions';
+import { ModalTypes } from '../../utils/types';
+import { setPeerToUpdate } from '../../redux/actions';
 
 interface ParticipantsItemOptionsProps {
   insideHandRaiseGroup: boolean;
@@ -33,12 +36,16 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     (state: RootState) => state.hmsStates.localPeer?.role?.permissions
   );
 
+  const roles = useSelector((state: RootState) => state.hmsStates.roles);
+
   const localPeerCanMuteTrack =
     localPeerPermissions && localPeerPermissions.mute;
   const localPeerCanUnmuteTrack =
     localPeerPermissions && localPeerPermissions.unmute;
   const localPeerCanRemove =
     localPeerPermissions && localPeerPermissions.removeOthers;
+  const localPeerCanChangeRole =
+    localPeerPermissions && localPeerPermissions.changeRole && roles.length > 1;
 
   // Selected Peer Permissions related states
   const peerCanPublishAudio = selectCanPublishTrackForRole(peer.role!, 'audio');
@@ -153,6 +160,16 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     onItemPress();
   };
 
+  const { handleModalVisibleType: setModalVisible } = useModalType();
+
+  const dispatch = useDispatch();
+
+  const handleChangeRolePress = () => {
+    setModalVisible(ModalTypes.CHANGE_ROLE, true);
+    dispatch(setPeerToUpdate(peer));
+    onItemPress();
+  };
+
   const showMuteAudioOption =
     !insideHandRaiseGroup &&
     localPeerCanMuteTrack &&
@@ -249,6 +266,16 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
           isActive: false,
           hide: Boolean(!onStageRoleStr || peer.role?.name !== onStageRoleStr),
         },
+        {
+          id: 'change-role',
+          icon: (
+            <PersonIcon type="rectangle" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Switch Role',
+          pressHandler: handleChangeRolePress,
+          isActive: false,
+          hide: !localPeerCanChangeRole,
+        },
         {
           id: 'remove-participant',
           icon: <PersonIcon type="left" style={{ width: 20, height: 20 }} />,

package/src/components/PeerSettingsModalContent.tsx

@@ -14,7 +14,7 @@ import { HMSPeerType, HMSTrack } from '@100mslive/react-native-hms';
 import type { RootState } from '../redux';
 import type { PeerTrackNode } from '../utils/types';
 import { ModalTypes } from '../utils/types';
-import { setInsetViewMinimized } from '../redux/actions';
+import { setInsetViewMinimized, setPeerToUpdate } from '../redux/actions';
 import { useHMSRoomStyle, useModalType } from '../hooks-util';
 import {
   CameraIcon,
@@ -40,6 +40,7 @@ export const PeerSettingsModalContent: React.FC<
 > = ({ peerTrackNode, peerTrackNodesListEmpty, cancelModal }) => {
   const dispatch = useDispatch();
   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+  const allRoles = useSelector((state: RootState) => state.hmsStates.roles);
   const localPeer = useSelector(
     (state: RootState) => state.hmsStates.localPeer
   );
@@ -92,6 +93,11 @@ export const PeerSettingsModalContent: React.FC<
     );
   };
 
+  const switchRole = () => {
+    setModalVisible(ModalTypes.CHANGE_ROLE, true);
+    dispatch(setPeerToUpdate(peerTrackNode.peer));
+  };
+
   const changeName = () => {
     setModalVisible(ModalTypes.CHANGE_NAME, true);
   };
@@ -194,6 +200,16 @@ export const PeerSettingsModalContent: React.FC<
           </>
         ) : null}
 
+        {allRoles.length > 1 &&
+        !peer.isLocal &&
+        localPeerPermissions?.changeRole ? (
+          <SettingItem
+            text={'Switch Role'}
+            icon={<PersonIcon type="rectangle" style={styles.customIcon} />}
+            onPress={switchRole}
+          />
+        ) : null}
+
         {!peer.isLocal && localPeerPermissions?.removeOthers ? (
           <SettingItem
             text="Remove Participant"

package/src/components/RoomSettingsModalContent.tsx

@@ -252,7 +252,7 @@ export const RoomSettingsModalContent: React.FC<
   }, [noiseCancellationPlugin]);
 
   const handleNoiseCancellation = () => {
-    // Register callback to be called when bottom sheet is hiddden
+    // Register callback to be called when bottom sheet is hidden
     registerOnModalHideAction(() => {
       if (!noiseCancellationPlugin || !isNoiseCancellationAvailable) return;
 

package/src/components/styles.ts

@@ -766,6 +766,7 @@ const styles = StyleSheet.create({
     padding: 8,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     width: '100%',
     marginTop: 24,
     borderWidth: 1,

package/src/hooks-util.ts

@@ -217,9 +217,10 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
         if (captionTranscription?.state === TranscriptionState.STARTED) {
           batch(() => {
             dispatch(removeNotification('enable-cc'));
+            dispatch(removeNotification('TranscriptionState.STARTED'));
             dispatch(
               addNotification({
-                id: Math.random().toString(16).slice(2),
+                id: 'TranscriptionState.STARTED',
                 type: NotificationTypes.INFO,
                 icon: 'cc',
                 title: 'Closed Captioning enabled for everyone',
@@ -287,6 +288,8 @@ const useHMSPeersUpdate = (
   // );
   const hmsActions = useHMSActions();
 
+  const isFirstRunForRoleChangeModal = useRef(true);
+
   useEffect(() => {
     const peerUpdateHandler = ({ peer, type }: PeerUpdate) => {
       // Handle State from Preview screen
@@ -428,6 +431,18 @@ const useHMSPeersUpdate = (
               .catch((e) => {
                 console.log('Metadata change failed', e);
               });
+
+            if (isFirstRunForRoleChangeModal.current) {
+              isFirstRunForRoleChangeModal.current = false;
+            } else {
+              dispatch(
+                addNotification({
+                  id: Math.random().toString(16).slice(2),
+                  type: NotificationTypes.INFO,
+                  title: `You are now a ${peer.role?.name}`,
+                })
+              );
+            }
           }
         }
         return;
@@ -1591,35 +1606,37 @@ const pipConfig: HMSPIPConfig = {
 export const useEnableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
-  const enableAutoPip = useCallback(
+  return useCallback(
     (data: HMSPIPConfig) => {
-      hmsInstance.setPipParams({
-        ...pipConfig,
-        ...data,
-        autoEnterPipMode: true,
-      });
+      hmsInstance
+        .setPipParams({
+          ...pipConfig,
+          ...data,
+          autoEnterPipMode: true,
+        })
+        .then((r) => console.log('Enable Auto PIP: ', r))
+        .catch((e) => console.log('Enable Auto PIP Error: ', e));
     },
     [hmsInstance]
   );
-
-  return enableAutoPip;
 };
 
 export const useDisableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
-  const disableAutoPip = useCallback(
+  return useCallback(
     (data: HMSPIPConfig) => {
-      hmsInstance.setPipParams({
-        ...pipConfig,
-        ...data,
-        autoEnterPipMode: false,
-      });
+      hmsInstance
+        .setPipParams({
+          ...pipConfig,
+          ...data,
+          autoEnterPipMode: false,
+        })
+        .then((r) => console.log('Disable Auto PIP: ', r))
+        .catch((e) => console.log('Disable Auto PIP Error: ', e));
     },
     [hmsInstance]
   );
-
-  return disableAutoPip;
 };
 
 export const useAutoPip = (oneToOneCall: boolean) => {

package/src/utils.ts

@@ -4,8 +4,8 @@ const DEFAULT_JOINING_CONFIG = {
   mutedAudio: true,
   mutedVideo: true,
   skipPreview: false,
-  audioMixer: false, // IOS only
-  musicMode: false, // IOS only
+  audioMixer: false, // iOS only
+  musicMode: false, // iOS only
   softwareDecoder: true, // Android only
   autoResize: false, // Android only
 };