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

package/src/components/Preview.tsx

@@ -23,20 +23,17 @@ import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
 import { useCanPublishVideo } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
-import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+} from '../hooks-util';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+import { hexToRgbA } from '../utils/theme';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
 
-const gradientColorShades = [
-  '#000000',
-  'rgba(0, 0, 0, 0.9)',
-  'rgba(0, 0, 0, 0.7)',
-  'rgba(0, 0, 0, 0.1)',
-  'rgba(0, 0, 0, 0.05)',
-  'rgba(0, 0, 0, 0)',
-];
 const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
 
 export const Preview = ({
@@ -49,6 +46,23 @@ export const Preview = ({
   const canPublishVideo = useCanPublishVideo();
   const isHLSViewer = useIsHLSViewer();
 
+  const { background_dim } = useHMSRoomColorPalette();
+
+  const gradientColorShades = React.useMemo(
+    () =>
+      background_dim
+        ? [
+            hexToRgbA(background_dim, 1),
+            hexToRgbA(background_dim, 0.9),
+            hexToRgbA(background_dim, 0.7),
+            hexToRgbA(background_dim, 0.1),
+            hexToRgbA(background_dim, 0.05),
+            hexToRgbA(background_dim, 0),
+          ]
+        : [],
+    [background_dim]
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet(
     (theme) => ({
       container: {

package/src/components/PreviewForRoleChangeModal.tsx

@@ -17,7 +17,7 @@ import {
 import { setRoleChangeRequest } from '../redux/actions';
 import { useHMSActions } from '../hooks-sdk';
 import { parseMetadata } from '../utils/functions';
-import { NotificationTypes } from '../utils';
+import { NotificationTypes } from '../types';
 import { Header } from './Header';
 import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
@@ -138,12 +138,7 @@ const _PreviewForRoleChangeModal = () => {
       }
 
       // lower hand
-      const newMetadata = {
-        ...localPeerMetadata,
-        isHandRaised: false,
-        isBRBOn: localPeerMetadata.isBRBOn,
-      };
-      await hmsActions.changeMetadata(newMetadata);
+      await hmsActions.lowerLocalPeerHand();
     }
   };
 

package/src/components/RoomSettingsModalContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { ModalTypes } from '../utils/types';
@@ -10,19 +10,20 @@ import {
   BRBIcon,
   HandIcon,
   ParticipantsIcon,
+  PencilIcon,
   RecordingIcon,
   ScreenShareIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
-  useHMSInstance,
+  isPublishingAllowed,
   useHMSLayoutConfig,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
+  useStartRecording,
 } from '../hooks-util';
 import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
-import { setStartingOrStoppingRecording } from '../redux/actions';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 
@@ -43,12 +44,15 @@ export const RoomSettingsModalContent: React.FC<
 > = (props) => {
   const { closeRoomSettingsModal, setModalVisible } = props;
 
-  const dispatch = useDispatch();
-  const hmsInstance = useHMSInstance();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
 
   const hmsActions = useHMSActions();
 
+  const isPublisher = useSelector((state: RootState) => {
+    const localPeer = state.hmsStates.localPeer;
+    return localPeer ? isPublishingAllowed(localPeer) : false;
+  });
+
   const { registerOnModalHideAction } = useBottomSheetActions();
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
@@ -84,26 +88,36 @@ export const RoomSettingsModalContent: React.FC<
   const parsedMetadata = parseMetadata(localPeerMetadata);
 
   const isBRBOn = !!parsedMetadata.isBRBOn;
-  const isHandRaised = !!parsedMetadata.isHandRaised;
+  const isHandRaised = useSelector(
+    (state: RootState) => !!state.hmsStates.localPeer?.isHandRaised
+  );
 
   const toggleRaiseHand = async () => {
-    const newMetadata = {
-      ...parsedMetadata,
-      isBRBOn: false,
-      isHandRaised: !isHandRaised,
-    };
     closeRoomSettingsModal();
-    await hmsActions.changeMetadata(newMetadata);
+    if (isBRBOn) {
+      const newMetadata = {
+        ...parsedMetadata,
+        isBRBOn: false,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    } else {
+      await hmsActions.raiseLocalPeerHand();
+    }
   };
 
   const toggleBRB = async () => {
     const newMetadata = {
       ...parsedMetadata,
-      isHandRaised: false,
       isBRBOn: !isBRBOn,
     };
     closeRoomSettingsModal();
     await hmsActions.changeMetadata(newMetadata);
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    }
   };
   // #endregion
 
@@ -117,6 +131,8 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
 
+  const { startRecording } = useStartRecording();
+
   const handleRecordingTogglePress = () => {
     if (isRecordingOn) {
       registerOnModalHideAction(() => {
@@ -124,15 +140,22 @@ export const RoomSettingsModalContent: React.FC<
       });
       closeRoomSettingsModal();
     } else {
-      dispatch(setStartingOrStoppingRecording(true));
-      hmsInstance
-        .startRTMPOrRecording({ record: true })
-        .catch(() => dispatch(setStartingOrStoppingRecording(false)));
+      startRecording();
       closeRoomSettingsModal();
     }
   };
   // #endregion
 
+  const changeName = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      setModalVisible(ModalTypes.CHANGE_NAME);
+    });
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+
   const canShowBRB = useHMSLayoutConfig(
     (layoutConfig) =>
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
@@ -192,7 +215,7 @@ export const RoomSettingsModalContent: React.FC<
             {
               id: 'raise-hand',
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
-              label: parsedMetadata.isHandRaised ? 'Hand Raised' : 'Raise Hand',
+              label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
               isActive: isHandRaised, // Show active if `isHandRaised` is set on metadata
               hide: !showHandRaiseIcon, // Hide if can't publish screen
@@ -205,6 +228,14 @@ export const RoomSettingsModalContent: React.FC<
               isActive: isRecordingOn,
               hide: !canStartRecording, // Hide if can't publish screen
             },
+            {
+              id: 'change-name',
+              icon: <PencilIcon style={{ width: 20, height: 20 }} />,
+              label: 'Change Name',
+              pressHandler: changeName,
+              isActive: false,
+              hide: isPublisher,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -90,7 +90,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
     closeRoomSettingsModal();
 
     try {
-      const isEnabled = await hmsInstance?.enablePipMode({
+      const isEnabled = await hmsInstance?.enterPipMode({
         aspectRatio: [16, 9], // for 16:9 aspect ratio
         endButton: true,
         videoButton: true,

package/src/components/StopRecordingModalContent.tsx

@@ -18,7 +18,9 @@ export const StopRecordingModalContent: React.FC<
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const startingOrStoppingRecording = useSelector(
-    (state: RootState) => state.app.startingOrStoppingRecording
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      (state.hmsStates.room?.browserRecordingState.initialising ?? false)
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({

package/src/components/WebrtcView.tsx

@@ -56,7 +56,16 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
     );
 
     if (isPipModeActive) {
-      return <PIPView pairedPeers={pairedPeers} />;
+      return (
+        <PIPView
+          peerTrackNodes={peerTrackNodes}
+          customView={showWelcomeBanner ? (
+            <WelcomeInMeeting />
+          ) : pairedPeers.length <= 0 ? (
+            <LocalPeerRegularVideoView />
+          ) : null}
+        />
+      );
     }
 
     return (

package/src/components/WelcomeInMeeting.tsx

@@ -1,15 +1,32 @@
 import * as React from 'react';
-import { View, StyleSheet, Image } from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
+
+import { WelcomeHandIcon } from '../Icons';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export interface WelcomeInMeetingProps {}
 
 export const WelcomeInMeeting: React.FC<WelcomeInMeetingProps> = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    title: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subtitle: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
   return (
     <View style={styles.container}>
-      <Image
-        source={require('../assets/welcome.png')}
-        style={{ width: 149, height: 152 }}
-      />
+      <WelcomeHandIcon />
+
+      <Text style={[styles.title, hmsRoomStyles.title]}>Welcome!</Text>
+
+      <Text style={[styles.subtitle, hmsRoomStyles.subtitle]}>
+        Sit back and relax.
+      </Text>
     </View>
   );
 };
@@ -20,4 +37,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  title: {
+    fontSize: 24,
+    lineHeight: 32,
+    marginTop: 24,
+  },
+  subtitle: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginTop: 8,
+  },
 });

package/src/hooks-sdk.ts

@@ -11,6 +11,7 @@ import {
   selectCanPublishTrack,
 } from './hooks-sdk-selectors';
 import { useCallback } from 'react';
+import type { HMSPeer } from '@100mslive/react-native-hms';
 
 export const useAllowedTracksToPublish = () => {
   return useSelector(selectAllowedTracksToPublish);
@@ -163,6 +164,60 @@ export const useHMSActions = () => {
     }
   }, []);
 
+  const raiseLocalPeerHand = useCallback(async (): 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.raiseLocalPeerHand();
+      console.log('Raise Local Peer Hand Success: ', result);
+    } catch (error) {
+      console.log('Raise Local Peer Hand Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const lowerLocalPeerHand = useCallback(async (): 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.lowerLocalPeerHand();
+      console.log('Lower Local Peer Hand Success: ', result);
+    } catch (error) {
+      console.log('Lower Local Peer Hand Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const lowerRemotePeerHand = useCallback(
+    async (peer: HMSPeer): 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.lowerRemotePeerHand(peer);
+        console.log('Lower Remote Peer Hand Success: ', result);
+      } catch (error) {
+        console.log('Lower Remote Peer Hand Error: ', error);
+        return Promise.reject(error);
+      }
+    },
+    []
+  );
+
   return {
     setLocalAudioEnabled,
     setLocalVideoEnabled,
@@ -170,5 +225,8 @@ export const useHMSActions = () => {
     setScreenShareEnabled,
     changeMetadata,
     changeName,
+    raiseLocalPeerHand,
+    lowerLocalPeerHand,
+    lowerRemotePeerHand,
   };
 };