@100mslive/react-native-room-kit 1.0.3 → 1.0.4-beta.0

package/src/components/HMSManageAudioOutput.tsx

@@ -31,11 +31,13 @@ import {
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { TestIds } from '../utils/constants';
+import { useHMSActions } from '../hooks-sdk';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
   const isHLSViewer = useIsHLSViewer();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
+  const { setRoomMuteLocally } = useHMSActions();
 
   const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
     React.useState<HMSAudioDevice | null>(null);
@@ -43,6 +45,9 @@ export const HMSManageAudioOutput: React.FC = () => {
     React.useState<HMSAudioDevice[]>([]);
 
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const roomLocallyMuted = useSelector(
+    (state: RootState) => state.hmsStates.roomLocallyMuted
+  );
 
   // Fetch current selected audio device and audio devices list on Android
   React.useEffect(() => {
@@ -79,16 +84,12 @@ export const HMSManageAudioOutput: React.FC = () => {
 
   // Handles showing Modal for changing Audio device
   const handleSpeakerChange = () => {
-    if (Platform.OS === 'ios') {
-      hmsInstance.switchAudioOutputUsingIOSUI();
-    } else {
-      if (availableAudioOutputDevices.length === 0) {
-        hmsInstance
-          .getAudioDevicesList()
-          .then((devices) => setAvailableAudioOutputDevices(devices)); // TODO(set-state-after-unmount): setting state irrespective of component unmount check
-      }
-      setSettingsModalVisible(true);
+    if (Platform.OS === 'android' && availableAudioOutputDevices.length === 0) {
+      hmsInstance
+        .getAudioDevicesList()
+        .then((devices) => setAvailableAudioOutputDevices(devices)); // TODO(set-state-after-unmount): setting state irrespective of component unmount check
     }
+    setSettingsModalVisible(true);
   };
 
   // Add audio device change listeners
@@ -120,23 +121,29 @@ export const HMSManageAudioOutput: React.FC = () => {
   }, [hmsInstance, debugMode]);
 
   // Handle changing selected audio device
-  const handleSelectAudioDevice = (device: HMSAudioDevice) => {
-    hmsInstance.switchAudioOutput(device);
+  const handleSelectAudioDevice = (
+    device: HMSAudioDevice | 'mute-audio' | 'ios-audio-device'
+  ) => {
+    if (device === 'mute-audio') {
+      setRoomMuteLocally(true);
+    } else {
+      if (roomLocallyMuted) {
+        setRoomMuteLocally(false);
+      }
+      if (device === 'ios-audio-device') {
+        hmsInstance.switchAudioOutputUsingIOSUI();
+      } else {
+        hmsInstance.switchAudioOutput(device);
+      }
+    }
     setSettingsModalVisible(false);
   };
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    headerText: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-Medium`,
-    },
     text: {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
-    divider: {
-      backgroundColor: theme.palette.border_default,
-    },
   }));
 
   return (
@@ -146,7 +153,9 @@ export const HMSManageAudioOutput: React.FC = () => {
         onPress={handleSpeakerChange}
         style={isHLSViewer ? styles.button : null}
       >
-        {Platform.OS === 'ios' ? (
+        {roomLocallyMuted ? (
+          <SpeakerIcon muted={true} />
+        ) : Platform.OS === 'ios' ? (
           <SpeakerIcon muted={false} />
         ) : (
           getIcon(currentAudioOutputDevice || HMSAudioDevice.AUTOMATIC)
@@ -164,7 +173,33 @@ export const HMSManageAudioOutput: React.FC = () => {
         <BottomSheet.Divider />
 
         <View style={styles.contentContainer}>
-          {availableAudioOutputDevices.length === 0 ? (
+          {Platform.OS === 'ios' ? (
+            <>
+              <AudioOutputDevice
+                id={'ios-audio-device'}
+                hideDivider={true}
+                selected={!roomLocallyMuted}
+                text={'Auto'}
+                icon={<SpeakerIcon muted={false} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.automatic_audio_device_active}
+                textTestID={TestIds.automatic_audio_device_text}
+                buttonTestID={TestIds.automatic_audio_device_btn}
+              />
+
+              <AudioOutputDevice
+                id={'mute-audio'}
+                hideDivider={false}
+                selected={roomLocallyMuted}
+                text={'Mute Audio'}
+                icon={<SpeakerIcon muted={true} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.mute_audio_active}
+                textTestID={TestIds.mute_audio_text}
+                buttonTestID={TestIds.mute_audio_btn}
+              />
+            </>
+          ) : availableAudioOutputDevices.length === 0 ? (
             <View style={styles.emptyView}>
               <Text
                 testID={TestIds.audio_modal_empty_text}
@@ -183,36 +218,39 @@ export const HMSManageAudioOutput: React.FC = () => {
                   const isFirst = index === 0;
 
                   return (
-                    <React.Fragment key={device}>
-                      {isFirst ? null : (
-                        <View style={[styles.divider, hmsRoomStyles.divider]} />
+                    <AudioOutputDevice
+                      key={device}
+                      id={device}
+                      hideDivider={isFirst}
+                      selected={
+                        device === currentAudioOutputDevice && !roomLocallyMuted
+                      }
+                      checkTestID={activeAudioDeviceTestIds[device]}
+                      text={getDescription(device, currentAudioOutputDevice)}
+                      textTestID={audioDeviceTextTestIds[device]}
+                      icon={getIcon(
+                        device === HMSAudioDevice.AUTOMATIC &&
+                          currentAudioOutputDevice
+                          ? currentAudioOutputDevice
+                          : device
                       )}
-
-                      <TouchableOpacity
-                        testID={audioDeviceTestIds[device]}
-                        style={styles.audioDeviceItem}
-                        onPress={() => handleSelectAudioDevice(device)}
-                      >
-                        <View style={styles.itemTextWrapper}>
-                          {getIcon(
-                            device === HMSAudioDevice.AUTOMATIC &&
-                              currentAudioOutputDevice
-                              ? currentAudioOutputDevice
-                              : device
-                          )}
-
-                          <Text testID={audioDeviceTextTestIds[device]} style={[styles.itemText, hmsRoomStyles.text]}>
-                            {getDescription(device, currentAudioOutputDevice)}
-                          </Text>
-                        </View>
-
-                        {device === currentAudioOutputDevice ? (
-                          <CheckIcon testID={activeAudioDeviceTestIds[device]} />
-                        ) : null}
-                      </TouchableOpacity>
-                    </React.Fragment>
+                      buttonTestID={audioDeviceTestIds[device]}
+                      onPress={handleSelectAudioDevice}
+                    />
                   );
                 })}
+
+              <AudioOutputDevice
+                id={'mute-audio'}
+                hideDivider={false}
+                selected={roomLocallyMuted}
+                text={'Mute Audio'}
+                icon={<SpeakerIcon muted={true} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.mute_audio_active}
+                textTestID={TestIds.mute_audio_text}
+                buttonTestID={TestIds.mute_audio_btn}
+              />
             </ScrollView>
           )}
         </View>
@@ -221,6 +259,84 @@ export const HMSManageAudioOutput: React.FC = () => {
   );
 };
 
+interface AudioOutputDeviceProps {
+  id: HMSAudioDevice | 'mute-audio' | 'ios-audio-device';
+  hideDivider: boolean;
+  selected: boolean;
+  checkTestID: string;
+  text: string;
+  textTestID: string;
+  icon: React.ReactElement;
+  buttonTestID: string;
+  onPress(selected: HMSAudioDevice | 'mute-audio' | 'ios-audio-device'): void;
+}
+
+const AudioOutputDevice: React.FC<AudioOutputDeviceProps> = (props) => {
+  const {
+    id,
+    hideDivider,
+    selected,
+    checkTestID,
+    text,
+    textTestID,
+    icon,
+    buttonTestID,
+    onPress,
+  } = props;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      text: {
+        color: selected
+          ? theme.palette.primary_bright
+          : theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      divider: {
+        backgroundColor: theme.palette.border_default,
+      },
+      checkIcon: {
+        tintColor: theme.palette.primary_bright,
+      },
+    }),
+    [selected]
+  );
+
+  return (
+    <React.Fragment>
+      {hideDivider ? null : (
+        <View style={[styles.divider, hmsRoomStyles.divider]} />
+      )}
+
+      <TouchableOpacity
+        testID={buttonTestID}
+        disabled={selected}
+        style={styles.audioDeviceItem}
+        onPress={() => onPress(id)}
+      >
+        <View style={styles.itemTextWrapper}>
+          {icon
+            ? React.cloneElement(icon, {
+                style: selected ? hmsRoomStyles.checkIcon : null,
+              })
+            : null}
+
+          <Text
+            testID={textTestID}
+            style={[styles.itemText, hmsRoomStyles.text]}
+          >
+            {text}
+          </Text>
+        </View>
+
+        {selected ? (
+          <CheckIcon testID={checkTestID} style={hmsRoomStyles.checkIcon} />
+        ) : null}
+      </TouchableOpacity>
+    </React.Fragment>
+  );
+};
+
 const styles = StyleSheet.create({
   button: {
     backgroundColor: 'transparent',
@@ -321,4 +437,4 @@ const activeAudioDeviceTestIds = {
   [HMSAudioDevice.WIRED_HEADSET]: TestIds.wired_headset_audio_device_active,
   [HMSAudioDevice.EARPIECE]: TestIds.earpiece_audio_device_active,
   [HMSAudioDevice.BLUETOOTH]: TestIds.bluetooth_audio_device_active,
-} as const;
+} as const;

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -6,14 +6,15 @@ import {
   ScrollView,
   TouchableOpacity,
   Alert,
+  Linking,
 } from 'react-native';
 import {
   HMSAudioMixingMode,
   HMSUpdateListenerActions,
+  checkNotifications,
 } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 import Toast from 'react-native-simple-toast';
-import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
@@ -210,7 +211,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
       // check notification permission on android platform
       // Audio share feature needs foreground service running. for Foreground service to keep running, we need active notification.
       if (Platform.OS === 'android') {
-        const result = await requestNotifications(['alert', 'sound']);
+        const result = await checkNotifications();
 
         console.log('Notification Permission Result: ', result);
 
@@ -220,7 +221,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
             '100ms SDK needs notification permission to start audio share. Please allow notification from settings and try again!',
             [
               { text: 'cancel' },
-              { text: 'Go to Settings', onPress: () => openSettings() },
+              { text: 'Go to Settings', onPress: () => Linking.openSettings() },
             ],
             { cancelable: true }
           );

package/src/hooks-sdk.ts

@@ -5,6 +5,7 @@ import {
   setIsLocalAudioMutedState,
   setIsLocalScreenSharedState,
   setIsLocalVideoMutedState,
+  setRoomLocallyMuted,
 } from './redux/actions';
 import {
   selectAllowedTracksToPublish,
@@ -218,6 +219,28 @@ export const useHMSActions = () => {
     []
   );
 
+  const setRoomMuteLocally = useCallback(
+    async (mute: boolean): Promise<void> => {
+      const state: RootState = store.getState();
+      const hmsInstance = state.user.hmsInstance;
+
+      if (!hmsInstance) {
+        return Promise.reject('HMSSDK Instance is not available!');
+      }
+
+      try {
+        const result = await hmsInstance.setPlaybackForAllAudio(mute);
+        console.log('Set Room Mute Locally Success: ', result);
+
+        dispatch(setRoomLocallyMuted(mute));
+      } catch (error) {
+        console.log('Set Room Mute Locally Error: ', error);
+        return Promise.reject(error);
+      }
+    },
+    []
+  );
+
   return {
     setLocalAudioEnabled,
     setLocalVideoEnabled,
@@ -228,5 +251,6 @@ export const useHMSActions = () => {
     raiseLocalPeerHand,
     lowerLocalPeerHand,
     lowerRemotePeerHand,
+    setRoomMuteLocally,
   };
 };

package/src/hooks-util.ts

@@ -56,7 +56,11 @@ import {
   PeerListRefreshInterval,
   PipModes,
 } from './utils/types';
-import type { ChatBroadcastFilter, OnLeaveHandler, PeerTrackNode } from './utils/types';
+import type {
+  ChatBroadcastFilter,
+  OnLeaveHandler,
+  PeerTrackNode,
+} from './utils/types';
 import { createPeerTrackNode } from './utils/functions';
 import {
   batch,
@@ -1256,10 +1260,12 @@ export const useHMSReconnection = () => {
       if (mounted) {
         batch(() => {
           dispatch(setReconnecting(true));
-          dispatch(addNotification({
-            id: NotificationTypes.RECONNECTING,
-            type: NotificationTypes.RECONNECTING
-          }))
+          dispatch(
+            addNotification({
+              id: NotificationTypes.RECONNECTING,
+              type: NotificationTypes.RECONNECTING,
+            })
+          );
         });
       }
     });
@@ -1268,7 +1274,7 @@ export const useHMSReconnection = () => {
         batch(() => {
           dispatch(setReconnecting(false));
           dispatch(removeNotification(NotificationTypes.RECONNECTING));
-        })
+        });
       }
     });
 
@@ -1426,13 +1432,19 @@ export const useAutoPip = (oneToOneCall: boolean) => {
   );
   const [numerator, denominator] = usePipAspectRatio(oneToOneCall);
 
+  const remotePeersPresent = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return room && room.peerCount !== null ? room.peerCount > 1 : false; // `peerCount` includes local peer
+  });
+
   useEffect(() => {
-    if (autoEnterPipMode) {
+    if (autoEnterPipMode && remotePeersPresent) {
       enableAutoPip({ aspectRatio: [numerator, denominator] });
 
       return disableAutoPip;
     }
   }, [
+    remotePeersPresent,
     numerator,
     denominator,
     autoEnterPipMode,
@@ -1471,10 +1483,16 @@ export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
     }
     // default aspect ratio
     return [16, 9];
-  }, [isHLSViewer, firstSSNodeId, oneToOneCall, ssResolution, hlsPlayerResolution]);
+  }, [
+    isHLSViewer,
+    firstSSNodeId,
+    oneToOneCall,
+    ssResolution,
+    hlsPlayerResolution,
+  ]);
 
   return aspectRatio;
-}
+};
 
 export const useHMSActiveSpeakerUpdates = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
@@ -2008,57 +2026,60 @@ export const useLeaveMethods = () => {
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
 
-  const destroy = useCallback((reason: Parameters<OnLeaveHandler>[0]) => {
-    try {
-      const s = hmsInstance.destroy();
-      console.log('Destroy Success: ', s);
-      // TODOS:
-      // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
-      //    - Reset Redux States
-      //    - HMSInstance will not be available now
-      //    - When your presses "Re Join" Action button, restart process from root component
-      //    - When your presses "Done" Action button
-      //        - If we have callback fn, call it
-      //        - Otherwise try our best to navigate away from current screen
-      //
-      // - No screen to show
-      //    - No need to reset redux state?
-      //    - HMSInstance will be available till this point
-      //    - If we have callback fn, call it
-      //    - Otherwise try our best to navigate away from current screen
-      //    - When we are navigated away from screen, HMSInstance will be not available
-
-      // dispatch(clearMessageData());
-      // dispatch(clearPeerData());
-      // dispatch(clearHmsReference());
-
-      const onLeave = reduxStore.getState().user.onLeave;
-
-      if (typeof onLeave === 'function') {
-        onLeave(reason);
-        dispatch(clearStore());
-      } else if (
-        navigation &&
-        typeof navigation.canGoBack === 'function' &&
-        navigation.canGoBack()
-      ) {
-        navigation.goBack();
-        dispatch(clearStore());
-      } else {
-        // Otherwise default action is to show "Meeting Ended" screen
-        dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
-        dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
+  const destroy = useCallback(
+    (reason: Parameters<OnLeaveHandler>[0]) => {
+      try {
+        const s = hmsInstance.destroy();
+        console.log('Destroy Success: ', s);
+        // TODOS:
+        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
+        //    - Reset Redux States
+        //    - HMSInstance will not be available now
+        //    - When your presses "Re Join" Action button, restart process from root component
+        //    - When your presses "Done" Action button
+        //        - If we have callback fn, call it
+        //        - Otherwise try our best to navigate away from current screen
+        //
+        // - No screen to show
+        //    - No need to reset redux state?
+        //    - HMSInstance will be available till this point
+        //    - If we have callback fn, call it
+        //    - Otherwise try our best to navigate away from current screen
+        //    - When we are navigated away from screen, HMSInstance will be not available
+
+        // dispatch(clearMessageData());
+        // dispatch(clearPeerData());
+        // dispatch(clearHmsReference());
+
+        const onLeave = reduxStore.getState().user.onLeave;
+
+        if (typeof onLeave === 'function') {
+          onLeave(reason);
+          dispatch(clearStore());
+        } else if (
+          navigation &&
+          typeof navigation.canGoBack === 'function' &&
+          navigation.canGoBack()
+        ) {
+          navigation.goBack();
+          dispatch(clearStore());
+        } else {
+          // Otherwise default action is to show "Meeting Ended" screen
+          dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
+          dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
+        }
+      } catch (e) {
+        console.log(`Destroy HMS instance Error: ${e}`);
+        Toast.showWithGravity(
+          `Destroy HMS instance Error: ${e}`,
+          Toast.LONG,
+          Toast.TOP
+        );
+        return Promise.reject(e);
       }
-    } catch (e) {
-      console.log(`Destroy HMS instance Error: ${e}`);
-      Toast.showWithGravity(
-        `Destroy HMS instance Error: ${e}`,
-        Toast.LONG,
-        Toast.TOP
-      );
-      return Promise.reject(e);
-    }
-  }, [hmsInstance]);
+    },
+    [hmsInstance]
+  );
 
   const leave = useCallback(
     async (reason: OnLeaveReason, shouldEndStream: boolean = false) => {
@@ -2093,15 +2114,18 @@ export const useLeaveMethods = () => {
     }
   }, [hmsInstance]);
 
-  const endRoom = useCallback(async (reason: OnLeaveReason) => {
-    try {
-      const d = await hmsInstance.endRoom('Host ended the room');
-      console.log('EndRoom Success: ', d);
-      await destroy(reason);
-    } catch (e) {
-      console.log('EndRoom Error: ', e);
-    }
-  }, [destroy, hmsInstance]);
+  const endRoom = useCallback(
+    async (reason: OnLeaveReason) => {
+      try {
+        const d = await hmsInstance.endRoom('Host ended the room');
+        console.log('EndRoom Success: ', d);
+        await destroy(reason);
+      } catch (e) {
+        console.log('EndRoom Error: ', e);
+      }
+    },
+    [destroy, hmsInstance]
+  );
 
   return { destroy, leave, endRoom, prebuiltCleanUp };
 };
@@ -2227,8 +2251,8 @@ export const useSendMessage = () => {
         'publishSettings' in sendingTo
           ? HMSMessageRecipientType.ROLES
           : 'peerID' in sendingTo
-          ? HMSMessageRecipientType.PEER
-          : HMSMessageRecipientType.BROADCAST,
+            ? HMSMessageRecipientType.PEER
+            : HMSMessageRecipientType.BROADCAST,
       recipientPeer: 'peerID' in sendingTo ? sendingTo : undefined,
       recipientRoles: 'publishSettings' in sendingTo ? [sendingTo] : undefined,
     });
@@ -2396,7 +2420,7 @@ export const useStartRecording = () => {
           addNotification({
             id: Math.random().toString(16).slice(2),
             type: NotificationTypes.ERROR,
-            message: error.message
+            message: error.message,
           })
         );
       });

package/src/utils/constants.ts

@@ -143,4 +143,8 @@ export const TestIds = {
   bluetooth_audio_device_btn: 'bluetooth-audio-device-button',
   bluetooth_audio_device_text: 'bluetooth-audio-device-text',
   bluetooth_audio_device_active: 'bluetooth-audio-device--active',
+
+  mute_audio_btn: 'mute-audio-button',
+  mute_audio_text: 'mute-audio-text',
+  mute_audio_active: 'mute-audio--active',
 } as const;