@100mslive/react-native-room-kit 1.0.0 → 1.0.1

package/src/components/RoomSettingsModalContent.tsx

@@ -10,11 +10,13 @@ import {
   BRBIcon,
   HandIcon,
   ParticipantsIcon,
+  PencilIcon,
   RecordingIcon,
   ScreenShareIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
+  isPublishingAllowed,
   useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomStyleSheet,
@@ -49,6 +51,11 @@ export const RoomSettingsModalContent: React.FC<
 
   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 +91,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
 
@@ -133,6 +150,16 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #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 +219,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 +232,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/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,
   };
 };