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

package/src/components/RoomSettingsModalContent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
@@ -26,6 +27,7 @@ import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
+import { TestIds } from '../utils/constants';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -178,6 +180,8 @@ export const RoomSettingsModalContent: React.FC<
       <BottomSheet.Header
         dismissModal={closeRoomSettingsModal}
         heading="Options"
+        headingTestID={TestIds.room_modal_heading}
+        closeIconTestID={TestIds.room_modal_close_btn}
       />
 
       <BottomSheet.Divider />
@@ -187,6 +191,7 @@ export const RoomSettingsModalContent: React.FC<
           [
             {
               id: 'participants',
+              testID: TestIds.room_modal_participants_btn,
               icon: <ParticipantsIcon style={{ width: 20, height: 20 }} />,
               label: 'Participants',
               pressHandler: onParticipantsPress,
@@ -198,6 +203,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'share-screen',
+              testID: !!isLocalScreenShared ? TestIds.room_modal_stop_screen_share_btn : TestIds.room_modal_share_screen_btn,
               icon: <ScreenShareIcon style={{ width: 20, height: 20 }} />,
               label: isLocalScreenShared ? 'Sharing Screen' : 'Share Screen',
               pressHandler: handleScreenShareTogglePress,
@@ -206,6 +212,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'brb',
+              testID: isBRBOn ? TestIds.room_modal_stop_brb_btn : TestIds.room_modal_brb_btn,
               icon: <BRBIcon style={{ width: 20, height: 20 }} />,
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
@@ -214,6 +221,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'raise-hand',
+              testID: isHandRaised ? TestIds.room_modal_hand_raised_btn : TestIds.room_modal_hand_raise_btn,
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
               label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
@@ -222,6 +230,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'start-recording',
+              testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
               icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
               label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
               pressHandler: handleRecordingTogglePress,
@@ -230,6 +239,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'change-name',
+              testID: TestIds.room_modal_change_name_btn,
               icon: <PencilIcon style={{ width: 20, height: 20 }} />,
               label: 'Change Name',
               pressHandler: changeName,
@@ -257,6 +267,7 @@ export const RoomSettingsModalContent: React.FC<
                         {item ? (
                           <>
                             <SettingItem
+                              testID={item.testID}
                               icon={item.icon}
                               onPress={item.pressHandler}
                               text={item.label}
@@ -285,10 +296,12 @@ type SettingItemProps = {
   text: string;
   icon: React.ReactElement;
   onPress(): void;
+  testID?: TouchableOpacityProps['testID'];
   isActive?: boolean;
 };
 
 const SettingItem: React.FC<SettingItemProps> = ({
+  testID,
   text,
   icon,
   onPress,
@@ -306,6 +319,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
 
   return (
     <TouchableOpacity
+      testID={testID}
       style={[styles.button, isActive ? hmsRoomStyles.button : null]}
       onPress={onPress}
     >

package/src/hooks-util.ts

@@ -1946,8 +1946,9 @@ export const useFilteredParticipants = (filterText: string) => {
         t.push({
           id: role.name!,
           label: `${role.name!} (${
-            typeof offStageRoleTotalCount === 'number'
-              ? offStageRoleTotalCount
+            typeof offStageRoleTotalCount === 'number' &&
+            offStageRoleTotalCount > filteredList.length
+              ? offStageRoleTotalCount // only use `offStageRoleTotalCount` when it is number and more than list length
               : filteredList.length
           })`,
           showViewAll:

package/src/redux/reducers/hmsStates.ts

@@ -402,17 +402,29 @@ const hmsStatesReducer = (
       };
     }
     case HmsStateActionTypes.UPDATE_PARTICIPANT: {
-      const previousParticipant = Object.values(state.groupedParticipants)
-        .flat()
-        .find(
-          (participant) => participant.peerID === action.participant.peerID
-        );
+      let previousRoleName: HMSRole['name'] | null = null;
+
+      for (const groupName in state.groupedParticipants) {
+        if (Object.prototype.hasOwnProperty.call(state.groupedParticipants, groupName)) {
+          const participantsList = state.groupedParticipants[groupName];
+
+          if (Array.isArray(participantsList)) {
+            const result = participantsList.find(
+              (participant) => participant.peerID === action.participant.peerID
+            );
+
+            if (result) {
+              previousRoleName = groupName;
+              break;
+            }
+          }
+        }
+      }
 
-      if (!previousParticipant) {
+      if (!previousRoleName) {
         return state;
       }
 
-      const previousRoleName = previousParticipant.role?.name!;
       const currentRoleName = action.participant.role?.name!;
 
       // check if role change

package/src/utils/constants.ts

@@ -0,0 +1,146 @@
+export const TestIds = {
+  // Common
+  back_button: 'back-button',
+  company_logo: 'company-logo',
+  manage_audio_output: 'change-audio-output-button',
+
+  switch_camera: 'switch-camera-button',
+  switch_camera_disabled: 'switch-camera-disabled-button',
+
+  mic_muted_btn: 'mic-muted-button',
+  mic_unmuted_btn: 'mic-unmuted-button',
+
+  mic_muted_icon: 'mic-muted-icon',
+  mic_unmuted_icon: 'mic-unmuted-icon',
+
+  camera_muted_btn: 'camera-muted-button',
+  camera_unmuted_btn: 'camera-unmuted-button',
+
+  // Preview
+  enter_name: 'enter-name-input',
+  go_live_btn: 'go-live-button',
+  join_now_btn: 'join-now-button',
+  title: 'preview-title-text',
+  subtitle: 'preview-subtitle-text',
+
+  // Meeting - Header
+  live_text: 'live-text',
+  peer_count_icon: 'peer-count-icon',
+  peer_count: 'peer-count-text',
+
+  notification_sharing_screen: 'notification-sharing-screen-text',
+  notification_stop_screen_share_btn: 'notification-stop-screen-share-button',
+
+  // Meeting - Tile
+  brb_icon: 'brb-icon',
+
+  hand_icon: 'hand-icon',
+  hand_off_icon: 'hand-off-icon',
+
+  tile_options: 'tile-three-dots-button',
+  tile_user_name: 'tile-user-name',
+  tile_network_icon: 'tile-network-icon',
+
+  tile_modal_heading: 'tile-modal-heading',
+  tile_modal_subheading: 'tile-modal-subheading',
+  tile_modal_close_btn: 'tile-modal-close-button',
+  tile_modal_change_name_btn: 'tile-modal-change-name-button',
+
+  change_name_modal_heading: 'change-name-modal-heading',
+  change_name_input: 'change-name-input',
+  change_name_modal_close_btn: 'change-name-modal-close-button',
+  change_name_modal_cta: 'change-name-modal-cta',
+
+  // Meeting - Footer
+  footer_leave_btn: 'footer-leave-button',
+
+  leave_icon: 'leave-icon',
+  leave_description: 'leave-description',
+  leave_cta: 'leave-cta',
+
+  stop_icon: 'stop-icon',
+
+  end_session_description: 'end-session-description',
+  end_session_cta: 'end-session-cta',
+
+  end_stream_description: 'end-stream-description',
+  end_stream_cta: 'end-stream-cta',
+
+  end_confirmation_close_btn: 'end-confirmation-close-btn',
+  end_confirmation_cta: 'end-confirmation-cta',
+  end_confirmation_heading: 'end-confirmation-heading',
+  end_confirmation_description: 'end-confirmation-description',
+
+  hand_raise_btn: 'hand-raise-button',
+  hand_raised_btn: 'hand-raised-button',
+
+  open_chat_btn: 'open-chat-button',
+  close_chat_btn: 'close-chat-button',
+  enter_message_input: 'enter-message-input',
+  send_message_cta: 'send-message-cta',
+
+  room_options_btn: 'room-options-button',
+  room_modal_heading: 'room-modal-heading',
+  room_modal_close_btn: 'room-modal-close-button',
+
+  room_modal_participants_btn: 'room-modal-participants-button',
+
+  room_modal_share_screen_btn: 'room-modal-share-screen-button',
+  room_modal_stop_screen_share_btn: 'room-modal-stop-screen-share-button',
+
+  room_modal_brb_btn: 'room-modal-brb-button',
+  room_modal_stop_brb_btn: 'room-modal-stop-brb-button',
+
+  room_modal_hand_raise_btn: 'room-modal-hand-raise-button',
+  room_modal_hand_raised_btn: 'room-modal-hand-raised-button',
+
+  room_modal_start_recording_btn: 'room-modal-start-recording-button',
+  room_modal_stop_recording_btn: 'room-modal-stop-recording-button',
+
+  room_modal_change_name_btn: 'room-modal-change-name-button',
+
+  // Participants And Chat Modal
+  participants_heading: 'participants-heading',
+  participants_heading_active: 'participants-heading--active',
+  participants_heading_btn: 'participants-heading-button',
+
+  chat_heading: 'chat-heading',
+  chat_heading_active: 'chat-heading--active',
+  chat_heading_btn: 'chat-heading-button',
+
+  participants_close_btn: 'participants-close-button',
+
+  search_participant_input: 'search-participant-input',
+
+  participants_group_name: 'participants-group-name',
+  participants_group_back_btn: 'participants-group-back-button',
+  participants_group_expand_btn: 'participants-group-expand-button',
+  participants_group_collapse_btn: 'participants-group-collapse-button',
+
+  participant_name: 'participant-name',
+
+  // Audio Output Modal
+  audio_modal_heading: 'audio-modal-heading',
+  audio_modal_close_btn: 'audio-modal-close-button',
+  audio_modal_empty_text: 'audio-modal-empty-text',
+
+  automatic_audio_device_btn: 'automatic-audio-device-button',
+  automatic_audio_device_text: 'automatic-audio-device-text',
+  automatic_audio_device_active: 'automatic-audio-device--active',
+
+  phone_speaker_audio_device_btn: 'phone-speaker-audio-device-button',
+  phone_speaker_audio_device_text: 'phone-speaker-audio-device-text',
+  phone_speaker_audio_device_active: 'phone-speaker-audio-device--active',
+
+  wired_headset_audio_device_btn: 'wired-headset-audio-device-button',
+  wired_headset_audio_device_text: 'wired-headset-audio-device-text',
+  wired_headset_audio_device_active: 'wired-headset-audio-device--active',
+
+  earpiece_audio_device_btn: 'earpiece-audio-device-button',
+  earpiece_audio_device_text: 'earpiece-audio-device-text',
+  earpiece_audio_device_active: 'earpiece-audio-device--active',
+
+  bluetooth_audio_device_btn: 'bluetooth-audio-device-button',
+  bluetooth_audio_device_text: 'bluetooth-audio-device-text',
+  bluetooth_audio_device_active: 'bluetooth-audio-device--active',
+} as const;