@100mslive/react-native-room-kit 1.0.7 → 1.0.8

package/src/components/Modals.tsx

@@ -40,7 +40,7 @@ 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();
@@ -48,16 +48,31 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   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>
                           );

package/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();
   };
@@ -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,

package/src/components/PeerSettingsModalContent.tsx

@@ -47,7 +47,9 @@ export const PeerSettingsModalContent: React.FC<
     const mininode = state.app.miniviewPeerTrackNode;
     return mininode && mininode.id === peerTrackNode.id;
   });
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const removeTextStyle = useHMSRoomStyle((theme) => ({
     color: theme.palette.alert_error_default,

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -52,7 +52,9 @@ export const _PeerVideoTileView = React.forwardRef<
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
     );
-    const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+    const editUsernameDisabled = useSelector(
+      (state: RootState) => state.app.editUsernameDisabled
+    );
 
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {

package/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]}>

package/src/components/PreviewForRoleChangeModal.tsx

@@ -124,8 +124,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.VIDEO
       ) as HMSLocalVideoTrack;
       if (localVideoTrack) {
+        localVideoTrack.setMute(false);
         setLocalVideoTrack(localVideoTrack);
-        setIsLocalVideoMuted(localVideoTrack.isMute());
+        setIsLocalVideoMuted(false);
       }
 
       const localAudioTrack = previewForRoleTracks.find(
@@ -133,8 +134,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.AUDIO
       ) as HMSLocalAudioTrack;
       if (localAudioTrack) {
+        localAudioTrack.setMute(false);
         setLocalAudioTrack(localAudioTrack);
-        setIsLocalAudioMuted(localAudioTrack.isMute());
+        setIsLocalAudioMuted(false);
       }
 
       // lower hand
@@ -362,7 +364,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: 'silver',
   },
   header: {
     position: 'absolute',

package/src/components/RoomSettingsModalContent.tsx

@@ -25,7 +25,11 @@ import {
   useShowChatAndParticipants,
   useStartRecording,
 } from '../hooks-util';
-import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
+import {
+  useCanPublishScreen,
+  useHMSActions,
+  useIsAnyStreamingOn,
+} from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
@@ -52,13 +56,16 @@ export const RoomSettingsModalContent: React.FC<
 
   const hmsActions = useHMSActions();
 
-  const { alert_error_default: alertErrorDefaultColor } = useHMSRoomColorPalette()
+  const { alert_error_default: alertErrorDefaultColor } =
+    useHMSRoomColorPalette();
 
   const isPublisher = useSelector((state: RootState) => {
     const localPeer = state.hmsStates.localPeer;
     return localPeer ? isPublishingAllowed(localPeer) : false;
   });
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const { registerOnModalHideAction } = useBottomSheetActions();
 
@@ -133,16 +140,27 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) =>
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
-
-  const isRecordingOn = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED
-  );
+  const isAnyStreamingOn = useIsAnyStreamingOn();
+
+  const isRecordingOn = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTED
+    );
+  });
   const isRecordingPaused = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED
+      state.hmsStates.room?.browserRecordingState?.state ===
+      HMSRecordingState.PAUSED
   );
+  const isRecordingDisabled = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      isAnyStreamingOn ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTING
+    );
+  });
 
   const { startRecording } = useStartRecording();
 
@@ -214,7 +232,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'share-screen',
-              testID: !!isLocalScreenShared ? TestIds.room_modal_stop_screen_share_btn : TestIds.room_modal_share_screen_btn,
+              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,
@@ -223,7 +243,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'brb',
-              testID: isBRBOn ? TestIds.room_modal_stop_brb_btn : TestIds.room_modal_brb_btn,
+              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,
@@ -232,7 +254,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'raise-hand',
-              testID: isHandRaised ? TestIds.room_modal_hand_raised_btn : TestIds.room_modal_hand_raise_btn,
+              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,
@@ -241,12 +265,28 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'recording',
-              testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
-              icon: <RecordingIcon type={isRecordingPaused ? 'pause' : 'on'} style={[{ width: 20, height: 20 }, isRecordingOn ? { tintColor: alertErrorDefaultColor } : null]} />,
-              label: isRecordingOn ? 'Recording' : isRecordingPaused ? 'Recording Paused' : 'Record',
+              testID: isRecordingOn
+                ? TestIds.room_modal_stop_recording_btn
+                : TestIds.room_modal_start_recording_btn,
+              icon: (
+                <RecordingIcon
+                  type={isRecordingPaused ? 'pause' : 'on'}
+                  style={[
+                    { width: 20, height: 20 },
+                    isRecordingOn
+                      ? { tintColor: alertErrorDefaultColor }
+                      : null,
+                  ]}
+                />
+              ),
+              label: isRecordingOn
+                ? 'Recording'
+                : isRecordingPaused
+                  ? 'Recording Paused'
+                  : 'Record',
               pressHandler: handleRecordingTogglePress,
               isActive: false,
-              disabled: isRecordingPaused,
+              disabled: isRecordingDisabled,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -336,7 +376,11 @@ const SettingItem: React.FC<SettingItemProps> = ({
     <TouchableOpacity
       testID={testID}
       disabled={disabled}
-      style={[styles.button, isActive ? hmsRoomStyles.button : null]}
+      style={[
+        styles.button,
+        isActive ? hmsRoomStyles.button : null,
+        disabled ? { opacity: 0.6 } : null,
+      ]}
       onPress={onPress}
     >
       {icon}

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react-native';
 import {
   HMSAudioMixingMode,
-  HMSStreamingState,
   HMSUpdateListenerActions,
   checkNotifications,
 } from '@100mslive/react-native-hms';
@@ -27,6 +26,7 @@ import {
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
 import { useIsHLSViewer } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 interface RoomSettingsModalDebugModeContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -60,10 +60,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
   const localPeerRole = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.role
   );
-  const isHLSStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const pipModeStatus = useSelector(
     (state: RootState) => state.app.pipModeStatus

package/src/components/WebrtcView.tsx

@@ -1,6 +1,10 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { SafeAreaView, useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
   interpolate,
@@ -100,7 +104,7 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
     }
 
     return (
-      <SafeAreaView edges={['left','right']} style={{ flex: 1 }}>
+      <SafeAreaView edges={['left', 'right']} style={{ flex: 1 }}>
         <Animated.View style={headerPlaceholderAnimatedStyles} />
 
         <Animated.View style={animatedStyles}>

package/src/hooks-sdk-selectors.tsx

@@ -1,3 +1,4 @@
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 import type { HMSRole } from '@100mslive/react-native-hms';
 
 import type { RootState } from './redux';
@@ -14,3 +15,21 @@ export const selectCanPublishTrackForRole = (
   role: HMSRole | undefined,
   track: 'audio' | 'video' | 'screen'
 ) => role?.publishSettings?.allowed?.includes(track) ?? false;
+
+export const selectIsHLSStreamingOn = (state: RootState) => {
+  return (
+    state.hmsStates.room?.hlsStreamingState?.state ===
+      HMSStreamingState.STARTED ?? false
+  );
+};
+
+export const selectIsRTMPStreamingOn = (state: RootState) => {
+  return (
+    state.hmsStates.room?.rtmpHMSRtmpStreamingState?.state ===
+      HMSStreamingState.STARTED ?? false
+  );
+};
+
+export const selectIsAnyStreamingOn = (state: RootState) => {
+  return selectIsHLSStreamingOn(state) || selectIsRTMPStreamingOn(state);
+};

package/src/hooks-sdk.ts

@@ -10,9 +10,12 @@ import {
 import {
   selectAllowedTracksToPublish,
   selectCanPublishTrack,
+  selectIsAnyStreamingOn,
+  selectIsHLSStreamingOn,
 } from './hooks-sdk-selectors';
 import { useCallback } from 'react';
 import type { HMSPeer } from '@100mslive/react-native-hms';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 export const useAllowedTracksToPublish = () => {
   return useSelector(selectAllowedTracksToPublish);
@@ -254,3 +257,37 @@ export const useHMSActions = () => {
     setRoomMuteLocally,
   };
 };
+
+export const useIsHLSStreamingOn = () => {
+  return useSelector(selectIsHLSStreamingOn);
+};
+
+export const useIsAnyStreamingOn = () => {
+  return useSelector(selectIsAnyStreamingOn);
+};
+
+export const useIsAnyRecordingOn = () => {
+  return useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
+    );
+  });
+};
+
+export const useIsAnyRecordingPaused = () => {
+  const isRecordingPaused = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
+      room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
+    );
+  });
+  return isRecordingPaused;
+};

package/src/hooks-util-selectors.tsx

@@ -3,11 +3,11 @@ import type {
   HLSLiveStreamingScreen,
   Layout,
 } from '@100mslive/types-prebuilt';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 import type { HMSRole } from '@100mslive/react-native-hms';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
 import type { RootState } from './redux';
+import { selectIsHLSStreamingOn } from './hooks-sdk-selectors';
 
 export const selectIsHLSViewer = (
   role: HMSRole | null | undefined,
@@ -46,8 +46,7 @@ export const selectShouldGoLive = (state: RootState) => {
     currentRole
   );
 
-  const isHLSStreaming =
-    state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false;
+  const isHLSStreaming = selectIsHLSStreamingOn(state);
 
   const joinButtonType =
     layoutConfig?.screens?.preview?.default?.elements?.join_form