implemented skipping of preview while doing role change

packages/react-native-room-kit/example/ExampleAppChangelog.txt

@@ -6,7 +6,10 @@ https://100ms.atlassian.net/browse/RN-138
 - Disable editing username in preview screen if username is passed to prebuilt in options config
 https://100ms.atlassian.net/browse/RN-143
 
-Room Kit: 1.0.7
-React Native SDK: 1.9.6
-Android SDK: 2.8.3
-iOS SDK: 1.4.0
+- One click role change on Prebuilt
+https://100ms.atlassian.net/browse/RN-150
+
+Room Kit: 1.0.8
+React Native SDK: 1.9.7
+Android SDK: 2.8.4
+iOS SDK: 1.4.1

packages/react-native-room-kit/example/src/redux/reducers/appState.ts

@@ -6,7 +6,7 @@ type ActionType = {
   type: String;
 };
 
-type IntialStateType = {
+type InitialStateType = {
   joinConfig: {
     debugMode: boolean;
     mutedAudio: boolean;
@@ -21,11 +21,11 @@ type IntialStateType = {
   };
 };
 
-const INITIAL_STATE: IntialStateType = {
+const INITIAL_STATE: InitialStateType = {
   joinConfig: {
     debugMode: false,
-    mutedAudio: false,
-    mutedVideo: false,
+    mutedAudio: true,
+    mutedVideo: true,
     mirrorCamera: true,
     skipPreview: false,
     audioMixer: false, // IOS only
@@ -39,7 +39,7 @@ const INITIAL_STATE: IntialStateType = {
 const appReducer = (
   state = INITIAL_STATE,
   action: ActionType
-): IntialStateType => {
+): InitialStateType => {
   switch (action.type) {
     case ActionTypes.RESET_JOIN_CONFIG:
       return {

packages/react-native-room-kit/src/HMSRoomSetup.tsx

@@ -16,6 +16,7 @@ import {
   changeStartingHLSStream,
   setHMSLocalPeerState,
   setHMSRoomState,
+  setInitialRole,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
   updateLocalPeerTrackNode,
@@ -311,6 +312,9 @@ export const HMSRoomSetup = () => {
 
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
+        if (data.room.localPeer.role) {
+          dispatch(setInitialRole(data.room.localPeer.role));
+        }
       });
 
       // If `peerTrackNodes` also contains a tile for local peer then updating it

packages/react-native-room-kit/src/components/HMSHandRaiseNotification.tsx

@@ -61,7 +61,11 @@ export const HMSHandRaiseNotification: React.FC<
       );
     }
     dispatch(removeNotification(id));
-    await hmsInstance.changeRoleOfPeer(peer, onStageRole, false);
+    await hmsInstance.changeRoleOfPeer(
+      peer,
+      onStageRole,
+      onStageExpData?.skip_preview_for_role_change || false
+    );
   };
 
   return (

packages/react-native-room-kit/src/components/Modals.tsx

@@ -40,24 +40,39 @@ import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { SwitchRow } from './SwitchRow';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSConferencingScreenConfig, useHMSInstance } from '../hooks-util';
 
 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 [request, setRequest] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
 
+  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;
+    }
+  );
   const hideMenu = () => setVisible(false);
   const showMenu = () => setVisible(true);
   const changeRole = () => {
-    instance?.changeRoleOfPeer(peer!, newRole, !request).catch((e) => {
-      console.log('Change Role of Peer Error: ', e);
-      Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
-    });
+    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);
+      });
     cancelModal();
   };
 
@@ -100,23 +115,6 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
           );
         })}
       </Menu>
-      {!peer?.isLocal && (
-        <TouchableOpacity
-          style={styles.roleChangeModalPermissionContainer}
-          onPress={() => {
-            setRequest(!request);
-          }}
-        >
-          <Text
-            style={[
-              styles.roleChangeModalPermission,
-              request ? { color: COLORS.PRIMARY.DEFAULT } : null,
-            ]}
-          >
-            Request permission from the user
-          </Text>
-        </TouchableOpacity>
-      )}
       <View style={styles.roleChangeModalPermissionContainer}>
         <CustomButton
           title="Cancel"
@@ -347,8 +345,8 @@ export const RtcStatsModal = () => {
                                       value?.width ?? 0
                                     }`
                                   : key === 'qualityLimitationReasons'
-                                  ? value.reason
-                                  : value}
+                                    ? value.reason
+                                    : value}
                               </Text>
                             </View>
                           );

packages/react-native-room-kit/src/components/Participants/ParticipantsItemOptions.tsx

@@ -67,6 +67,12 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     return roles.find((role) => role.name === offStageRoleStr);
   });
 
+  const skipPreviewForRoleChange = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.skip_preview_for_role_change
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     divider: {
       backgroundColor: theme.palette.border_bright,
@@ -79,7 +85,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
   const handleBringOnStagePress = () => {
     if (onStageRole) {
       hmsInstance
-        .changeRoleOfPeer(peer, onStageRole)
+        .changeRoleOfPeer(peer, onStageRole, skipPreviewForRoleChange || false)
         .then((d) => console.log('Bring on Stage Success: ', d))
         .catch((e) => console.log('Bring on Stage Error: ', e));
     } else {
@@ -95,7 +101,9 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         .then((d) => console.log('Lower Remote Peer hand Success: ', d))
         .catch((e) => console.log('Lower Remote Peer hand Error: ', e));
     } else {
-      console.warn(`peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`);
+      console.warn(
+        `peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`
+      );
     }
     onItemPress();
   };
@@ -123,7 +131,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
   const handleRemoveFromStagePress = () => {
     if (offStageRole) {
       hmsInstance
-        .changeRoleOfPeer(peer, offStageRole, true)
+        .changeRoleOfPeer(peer, offStageRole, skipPreviewForRoleChange || false)
         .then((d) => console.log('Remove from Stage Success: ', d))
         .catch((e) => console.log('Remove from Stage Error: ', e));
     } else {
@@ -169,8 +177,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     peer.videoTrack?.isMute();
 
   const showBringOnStageOptions =
-    offStageRoles &&
-    offStageRoles.includes(peer.role?.name || '');
+    offStageRoles && offStageRoles.includes(peer.role?.name || '');
 
   const showLowerHandOption = peer.isHandRaised;
 
@@ -189,9 +196,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         },
         {
           id: 'lower-hand',
-          icon: (
-            <HandIcon type="off" style={{ width: 20, height: 20 }} />
-          ),
+          icon: <HandIcon type="off" style={{ width: 20, height: 20 }} />,
           label: 'Lower Hand',
           pressHandler: handleLowerHandPress,
           isActive: false,

packages/react-native-room-kit/src/components/Preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   Keyboard,
   StyleSheet,
@@ -20,7 +20,7 @@ import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
-import { useCanPublishVideo } from '../hooks-sdk';
+import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import {
@@ -75,6 +75,19 @@ export const Preview = ({
     []
   );
 
+  const hmsActions = useHMSActions();
+
+  useEffect(() => {
+    async function setupAudioVideoOnPreview() {
+      // TODO: rectify the below issue,
+      // false means audio/video is enabled, true means audio/video is disabled
+      // it should have been true means audio/video is enabled, false means audio/video is disabled
+      await hmsActions.setLocalAudioEnabled(false);
+      await hmsActions.setLocalVideoEnabled(false);
+    }
+    setupAudioVideoOnPreview().then((r) => console.log(r));
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={[styles.container, hmsRoomStyles.container]}>

packages/react-native-room-kit/src/hooks-util.ts

@@ -64,7 +64,7 @@ import type {
   OnLeaveHandler,
   PeerTrackNode,
 } from './utils/types';
-import { createPeerTrackNode } from './utils/functions';
+import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import {
   batch,
   shallowEqual,
@@ -153,6 +153,7 @@ import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
 import { NotificationTypes } from './types';
 import { KeyboardState, useSharedValue } from 'react-native-reanimated';
+import { useHMSActions } from './hooks-sdk';
 
 export const useHMSListeners = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -220,6 +221,7 @@ const useHMSPeersUpdate = (
   // const inMeeting = useSelector(
   //   (state: RootState) => state.app.meetingState === MeetingState.IN_MEETING
   // );
+  const hmsActions = useHMSActions();
 
   useEffect(() => {
     const peerUpdateHandler = ({ peer, type }: PeerUpdate) => {
@@ -273,6 +275,7 @@ const useHMSPeersUpdate = (
         const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
         const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
         const localPeerTrackNode = reduxState.app.localPeerTrackNode;
+        const initialRole = reduxState.app.initialRole;
 
         // Currently Applied Layout config
         const currentLayoutConfig = selectLayoutConfigForRole(
@@ -343,6 +346,26 @@ const useHMSPeersUpdate = (
         // - TODO: update local localPeer state
         // - Pass this updated data to Meeting component -> DisplayView component
         updateLocalPeer();
+
+        if (type === HMSPeerUpdate.ROLE_CHANGED) {
+          const parsedLocalPeerMetadata = parseMetadata(peer.metadata);
+
+          if (parsedLocalPeerMetadata.prevRole !== initialRole) {
+            const newMetadata = {
+              ...parsedLocalPeerMetadata,
+              prevRole: initialRole?.name,
+            };
+
+            hmsActions
+              .changeMetadata(newMetadata)
+              .then((r) => {
+                console.log('Metadata changed successfully', r);
+              })
+              .catch((e) => {
+                console.log('Metadata change failed', e);
+              });
+          }
+        }
         return;
       }
       if (type === HMSPeerUpdate.ROLE_CHANGED) {

packages/react-native-room-kit/src/redux/actionTypes.ts

@@ -90,6 +90,8 @@ const SET_AUTO_ENTER_PIP_MODE = 'SET_AUTO_ENTER_PIP_MODE';
 
 const SET_EDIT_USERNAME_DISABLED = 'SET_EDIT_USERNAME_DISABLED';
 
+const SET_INITIAL_ROLE = 'SET_INITIAL_ROLE';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -132,6 +134,7 @@ export default {
   SET_HANDLE_BACK_BUTTON,
   SET_AUTO_ENTER_PIP_MODE,
   SET_EDIT_USERNAME_DISABLED,
+  SET_INITIAL_ROLE,
 };
 
 export enum HmsStateActionTypes {
@@ -158,4 +161,5 @@ export enum HmsStateActionTypes {
   REPLACE_PARTICIPANTS_LIST = 'REPLACE_PARTICIPANTS_LIST',
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
+  SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }

packages/react-native-room-kit/src/redux/actions/index.ts

@@ -399,3 +399,8 @@ export const setEditUsernameDisabled = (editUsernameDisabled: boolean) => ({
   type: actionTypes.SET_EDIT_USERNAME_DISABLED,
   payload: { editUsernameDisabled },
 });
+
+export const setInitialRole = (initialRole: HMSRole) => ({
+  type: actionTypes.SET_INITIAL_ROLE,
+  payload: { initialRole },
+});

packages/react-native-room-kit/src/redux/reducers/appState.ts

@@ -9,6 +9,7 @@ import {
   HMSPeer,
   HMSRemoteAudioStats,
   HMSRemoteVideoStats,
+  HMSRole,
 } from '@100mslive/react-native-hms';
 import { MeetingState } from '../../types';
 import type { Notification } from '../../types';
@@ -55,6 +56,7 @@ type IntialStateType = {
   handleBackButton: boolean;
   autoEnterPipMode: boolean;
   editUsernameDisabled: boolean;
+  initialRole: HMSRole | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -87,6 +89,7 @@ const INITIAL_STATE: IntialStateType = {
   handleBackButton: false,
   autoEnterPipMode: false,
   editUsernameDisabled: false,
+  initialRole: null,
 };
 
 const appReducer = (
@@ -312,6 +315,12 @@ const appReducer = (
           INITIAL_STATE.editUsernameDisabled,
       };
     }
+    case ActionTypes.SET_INITIAL_ROLE: {
+      return {
+        ...state,
+        initialRole: action.payload.initialRole ?? INITIAL_STATE.initialRole,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

packages/react-native-room-kit/src/utils.ts

@@ -1,8 +1,8 @@
 // @ts-nocheck
 
 const DEFAULT_JOINING_CONFIG = {
-  mutedAudio: false,
-  mutedVideo: false,
+  mutedAudio: true,
+  mutedVideo: true,
   skipPreview: false,
   audioMixer: false, // IOS only
   musicMode: false, // IOS only