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

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/Chat/ChatBanner.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
+import React from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
-
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { useIsLandscapeOrientation } from '../../utils/dimension';
 

package/src/components/CustomButton.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import React from 'react';
 import {
   StyleSheet,

package/src/components/DisplayView.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { InteractionManager, View } from 'react-native';
+import { InteractionManager, Platform, View } from 'react-native';
 import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -134,7 +134,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
         handlePeerTileMorePress={handlePeerTileMorePress}
       />
 
-      {isPipModeActive ? null : (
+      {isPipModeActive && Platform.OS === 'android' ? null : (
         <>
           <LeaveRoomBottomSheet />
 

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/HMSPreviewHLSLiveIndicator.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 

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,13 +138,33 @@ 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'} />
 
       <GestureDetector gesture={tapGesture}>
         <View collapsable={false} style={styles.container}>
-          {isPipModeActive ? null : (
+          {isPipModeActive && Platform.OS === 'android' ? null : (
             <AnimatedHeader offset={offset}>
               <Header />
             </AnimatedHeader>
@@ -152,7 +172,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
 
           <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-          {isPipModeActive ? null : (
+          {isPipModeActive && Platform.OS === 'android' ? null : (
             <AnimatedFooter offset={offset}>
               <Footer />
             </AnimatedFooter>

package/src/components/MenuModal/MenuDivider.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore - Ignoring React import as it is generating error while running prepack script
 import React from 'react';
 
 import { StyleSheet, View } from 'react-native';

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/VirtualBackgroundModalContent.tsx

@@ -109,7 +109,7 @@ export const VirtualBackgroundModalContent: React.FC<
       // If PIP is enabled, disable it
       if (pipModeEnabled) {
         dispatch(setAutoEnterPipMode(false));
-        disableAutoPip();
+        disableAutoPip({});
       }
 
       const imageLibraryResponse = await ImagePicker.launchImageLibrary({

package/src/components/WebrtcView.tsx

@@ -24,7 +24,7 @@ import { OverlayContainer } from './OverlayContainer';
 import { OverlayedViews } from './OverlayedViews';
 import { useFooterHeight } from './Footer';
 import { useHeaderHeight } from './Header';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { WebrtcTranscriptOverlayView } from './WebrtcTranscriptOverlayView';
 
 interface WebrtcViewProps {
@@ -111,7 +111,7 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       };
     }, [isPortrait, bottom]);
 
-    if (isPipModeActive) {
+    if (isPipModeActive && Platform.OS === 'android') {
       return (
         <PIPView
           peerTrackNodes={peerTrackNodes}

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,