@100mslive/react-native-room-kit 0.0.1 → 0.0.3

package/src/components/Participants/ParticipantsList.tsx

@@ -117,7 +117,6 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({ data }) => {
             <View style={styles.participantDescription}>
               <Text style={styles.participantName} numberOfLines={1}>
                 {peer.name}
-                {peer.isLocal && ' (You)'}
               </Text>
               <Text style={styles.participantRole} numberOfLines={1}>
                 {peer.role?.name}

package/src/components/PeerSettingsModalContent.tsx

@@ -41,6 +41,7 @@ export const PeerSettingsModalContent: React.FC<
   const spotlightTrackId = useSelector(
     (state: RootState) => state.user.spotlightTrackId
   );
+  const debugMode = useSelector((state: RootState) => state.user.debugMode);
   const { handleModalVisibleType: setModalVisible } = useModalType();
 
   const removePeer = () => {
@@ -241,9 +242,10 @@ export const PeerSettingsModalContent: React.FC<
         ) : null}
 
         {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
-        {peerTrackNode.peer.isLocal &&
-        peerTrackNode.track &&
-        peerTrackNode.track.source === HMSTrackSource.SCREEN ? null : (
+        {!debugMode ||
+        (peerTrackNode.peer.isLocal &&
+          peerTrackNode.track &&
+          peerTrackNode.track.source === HMSTrackSource.SCREEN) ? null : (
           <SettingItem
             text="Capture Screenshot"
             IconType={MaterialCommunityIcons}
@@ -254,7 +256,7 @@ export const PeerSettingsModalContent: React.FC<
         )}
 
         {/* Local Image Capture is only available for local peer */}
-        {peerTrackNode.peer.isLocal ? (
+        {debugMode && peerTrackNode.peer.isLocal ? (
           <SettingItem
             text="Local Image Capture"
             IconType={MaterialCommunityIcons}
@@ -267,7 +269,7 @@ export const PeerSettingsModalContent: React.FC<
         ) : null}
 
         {/* Don't show Streaming Quality option for local peer */}
-        {!peer.isLocal ? (
+        {debugMode && !peer.isLocal ? (
           <SettingItem
             text="Streaming Quality"
             IconType={Ionicons}

package/src/components/Preview.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { AvoidSoftInput } from 'react-native-avoid-softinput';
-
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import { useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import LinearGradient from 'react-native-linear-gradient';
 
 import { COLORS } from '../utils/theme';
 
@@ -19,7 +17,9 @@ import { HMSPreviewPeersList } from './HMSPreviewPeersList';
 import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
 import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
-import { HMSPreviewDeviceSettings } from './HMSPreviewDeviceSettings';
+import { HMSSpeakerSettings } from './HMSSpeakerSettings';
+import { GenericLogoIcon, NetworkQualityIcon } from '../Icons';
+import type { RootState } from '../redux';
 
 export const Preview = ({
   join,
@@ -28,7 +28,10 @@ export const Preview = ({
   join(): void;
   loadingButtonState: boolean;
 }) => {
-  const { bottom } = useSafeAreaInsets();
+  const localPeerNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
 
   useEffect(() => {
     AvoidSoftInput.setAdjustNothing();
@@ -38,58 +41,111 @@ export const Preview = ({
   }, []);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView
-        contentContainerStyle={styles.scrollContainer}
-        bounces={false}
+    <View style={styles.container}>
+      <HMSPreviewTile />
+
+      <LinearGradient
+        colors={[
+          '#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)',
+        ]}
+        locations={[0.45, 0.55, 0.7, 0.9, 0.95, 1]}
+        style={{
+          position: 'absolute',
+          top: 0,
+          width: '100%',
+          height: 260,
+        }}
+      />
+
+      <SafeAreaView
+        style={{ position: 'absolute', top: 0, width: '100%', marginTop: 24 }}
+        edges={['top', 'left', 'right']}
+        mode="margin"
       >
-        <BackButton />
+        <GenericLogoIcon style={{ alignSelf: 'center', marginBottom: 16 }} />
 
         <HMSPreviewTitle />
 
         <HMSPreviewSubtitle />
 
         <HMSPreviewPeersList />
+      </SafeAreaView>
+
+      <SafeAreaView
+        style={{ position: 'absolute', top: 0 }}
+        edges={['top']}
+        mode="margin"
+      >
+        <BackButton />
+      </SafeAreaView>
+
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          width: '100%',
+        }}
+      >
+        <View
+          style={{
+            marginLeft: 8,
+            marginBottom: 8,
+            borderRadius: 8,
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+            backgroundColor: COLORS.BACKGROUND.DIM_80,
+            alignSelf: 'flex-start',
+          }}
+        >
+          <NetworkQualityIcon quality={localPeerNetworkQuality} />
+        </View>
 
-        <HMSPreviewTile />
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: COLORS.BACKGROUND.DEFAULT,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            padding: 16,
+          }}
+        >
+          <View style={styles.controlsContainer}>
+            <View style={styles.micAndCameraControls}>
+              <HMSManageLocalAudio />
 
-        <View style={styles.controlsContainer}>
-          <View style={styles.micAndCameraControls}>
-            <HMSManageLocalAudio />
+              <View style={styles.manageLocalVideoWrapper}>
+                <HMSManageLocalVideo />
+              </View>
 
-            <View style={styles.manageLocalVideoWrapper}>
-              <HMSManageLocalVideo />
+              <HMSManageCameraRotation />
             </View>
 
-            <HMSManageCameraRotation />
+            <HMSSpeakerSettings />
           </View>
 
-          <HMSPreviewDeviceSettings />
-        </View>
+          <View style={styles.joinButtonRow}>
+            <HMSPreviewEditName />
 
-        <View
-          style={[styles.joinButtonRow, { marginBottom: 34 - bottom + 12 }]}
-        >
-          <HMSPreviewEditName />
-
-          <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
+            <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
+          </View>
         </View>
-      </ScrollView>
-    </SafeAreaView>
+      </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    position: 'relative',
     backgroundColor: COLORS.BACKGROUND.DIM,
   },
-  scrollContainer: {
-    flexGrow: 1,
-  },
   controlsContainer: {
-    marginHorizontal: 24,
-    marginTop: 24,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -101,8 +157,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
   },
   joinButtonRow: {
-    marginHorizontal: 24,
-    marginTop: 16,
+    marginVertical: 16,
     flexDirection: 'row',
   },
 });

package/src/components/RoomSettingsModalContent.tsx

@@ -435,7 +435,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.hlsStreaming ? (
+        {debugMode && localPeerRole?.permissions?.hlsStreaming ? (
           <SettingItem
             onPress={handleHLSStreaming}
             text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
@@ -444,7 +444,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.rtmpStreaming ? (
+        {debugMode && localPeerRole?.permissions?.rtmpStreaming ? (
           <SettingItem
             onPress={handleRTMPAndRecording}
             text={
@@ -457,7 +457,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.changeRole ? (
+        {debugMode && localPeerRole?.permissions?.changeRole ? (
           <SettingItem
             onPress={changeBulkRole}
             text="Bulk Role Change"
@@ -466,7 +466,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.mute ? (
+        {debugMode && localPeerRole?.permissions?.mute ? (
           <SettingItem
             onPress={handleRemoteAudiosMute}
             text="Remote Mute All Audio Tracks"
@@ -475,8 +475,9 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.mute ||
-        localPeerRole?.permissions?.unmute ? (
+        {debugMode &&
+        (localPeerRole?.permissions?.mute ||
+          localPeerRole?.permissions?.unmute) ? (
           <SettingItem
             onPress={changeTrackState}
             text="Change Track State For Role"

package/src/hooks-util.ts

@@ -5,7 +5,7 @@ import {
   HMSMessage,
   HMSPIPListenerActions,
   HMSPeer,
-  // HMSPeerUpdate,
+  HMSPeerUpdate,
   HMSRemotePeer,
   HMSRoleChangeRequest,
   HMSRoom,
@@ -33,8 +33,10 @@ import type { RootState } from './redux';
 import {
   addMessage,
   addPinnedMessage,
+  addToPreviewPeersList,
   changePipModeStatus,
   clearStore,
+  removeFromPreviewPeersList,
   saveUserData,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -45,9 +47,9 @@ import {
 } from './redux/actions';
 import {
   degradeOrRestorePeerTrackNodes,
-  // peerTrackNodeExistForPeer,
+  peerTrackNodeExistForPeer,
   peerTrackNodeExistForPeerAndTrack,
-  // removePeerTrackNodes,
+  removePeerTrackNodes,
   removePeerTrackNodesWithTrack,
   replacePeerTrackNodes,
   replacePeerTrackNodesWithTrack,
@@ -71,6 +73,7 @@ import {
 import { selectIsHLSViewer } from './hooks-util-selectors';
 
 export const useHMSListeners = (
+  meetingState: MeetingState,
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
   setMeetingState: React.Dispatch<React.SetStateAction<MeetingState>>
 ) => {
@@ -79,7 +82,12 @@ export const useHMSListeners = (
 
   useHMSRoomUpdate(hmsInstance, setMeetingState);
 
-  // useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+  useHMSPeersUpdate(
+    meetingState,
+    hmsInstance,
+    updateLocalPeer,
+    setPeerTrackNodes
+  );
 
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
@@ -198,72 +206,94 @@ const useHMSRoomUpdate = (
   }, [hmsInstance]);
 };
 
-// type PeerUpdate = {
-//   peer: HMSPeer;
-//   type: HMSPeerUpdate;
-// };
-
-// const useHMSPeersUpdate = (
-//   hmsInstance: HMSSDK,
-//   updateLocalPeer: () => void,
-//   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
-// ) => {
-//   useHMSPeerUpdates(
-//     ({ peer, type }: PeerUpdate) => {
-//       if (type === HMSPeerUpdate.PEER_JOINED) {
-//         return;
-//       }
-//       if (type === HMSPeerUpdate.PEER_LEFT) {
-//         setPeerTrackNodes((prevPeerTrackNodes) =>
-//           removePeerTrackNodes(prevPeerTrackNodes, peer)
-//         );
-//         return;
-//       }
-//       if (peer.isLocal) {
-//         setPeerTrackNodes((prevPeerTrackNodes) => {
-//           if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-//             return replacePeerTrackNodes(prevPeerTrackNodes, peer);
-//           }
-//           return prevPeerTrackNodes;
-//         });
-
-//         // - TODO: update local localPeer state
-//         // - Pass this updated data to Meeting component -> DisplayView component
-//         updateLocalPeer();
-//         return;
-//       }
-//       if (type === HMSPeerUpdate.ROLE_CHANGED) {
-//         if (
-//           peer.role?.publishSettings?.allowed === undefined ||
-//           (peer.role?.publishSettings?.allowed &&
-//             peer.role?.publishSettings?.allowed.length < 1)
-//         ) {
-//           setPeerTrackNodes((prevPeerTrackNodes) => {
-//             if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-//               return removePeerTrackNodes(prevPeerTrackNodes, peer);
-//             }
-//             return prevPeerTrackNodes;
-//           });
-//         }
-//         return;
-//       }
-//       if (
-//         type === HMSPeerUpdate.METADATA_CHANGED ||
-//         type === HMSPeerUpdate.NAME_CHANGED ||
-//         type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED
-//       ) {
-//         setPeerTrackNodes((prevPeerTrackNodes) => {
-//           if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
-//             return replacePeerTrackNodes(prevPeerTrackNodes, peer);
-//           }
-//           return prevPeerTrackNodes;
-//         });
-//         return;
-//       }
-//     },
-//     [hmsInstance]
-//   );
-// };
+type PeerUpdate = {
+  peer: HMSPeer;
+  type: HMSPeerUpdate;
+};
+
+const useHMSPeersUpdate = (
+  meetingState: MeetingState,
+  hmsInstance: HMSSDK,
+  updateLocalPeer: () => void,
+  setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
+) => {
+  const dispatch = useDispatch();
+  const inMeeting = meetingState === MeetingState.IN_MEETING;
+
+  useEffect(() => {
+    const peerUpdateHandler = ({ peer, type }: PeerUpdate) => {
+      // Handle State from Preview screen
+      if (!inMeeting) {
+        if (type === HMSPeerUpdate.PEER_JOINED) {
+          dispatch(addToPreviewPeersList(peer));
+        } else if (type === HMSPeerUpdate.PEER_LEFT) {
+          dispatch(removeFromPreviewPeersList(peer));
+        }
+      }
+
+      // Handle State for Meeting screen
+      if (type === HMSPeerUpdate.PEER_JOINED) {
+        return;
+      }
+      if (type === HMSPeerUpdate.PEER_LEFT) {
+        setPeerTrackNodes((prevPeerTrackNodes) =>
+          removePeerTrackNodes(prevPeerTrackNodes, peer)
+        );
+        return;
+      }
+      if (peer.isLocal) {
+        setPeerTrackNodes((prevPeerTrackNodes) => {
+          if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+            return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+          }
+          return prevPeerTrackNodes;
+        });
+
+        // - TODO: update local localPeer state
+        // - Pass this updated data to Meeting component -> DisplayView component
+        updateLocalPeer();
+        return;
+      }
+      if (type === HMSPeerUpdate.ROLE_CHANGED) {
+        if (
+          peer.role?.publishSettings?.allowed === undefined ||
+          (peer.role?.publishSettings?.allowed &&
+            peer.role?.publishSettings?.allowed.length < 1)
+        ) {
+          setPeerTrackNodes((prevPeerTrackNodes) => {
+            if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+              return removePeerTrackNodes(prevPeerTrackNodes, peer);
+            }
+            return prevPeerTrackNodes;
+          });
+        }
+        return;
+      }
+      if (
+        type === HMSPeerUpdate.METADATA_CHANGED ||
+        type === HMSPeerUpdate.NAME_CHANGED ||
+        type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED
+      ) {
+        setPeerTrackNodes((prevPeerTrackNodes) => {
+          if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+            return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+          }
+          return prevPeerTrackNodes;
+        });
+        return;
+      }
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_PEER_UPDATE,
+      peerUpdateHandler
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE);
+    };
+  }, [inMeeting, hmsInstance]); // TODO: When `inMeeting` becomes true Peer Update is resubscribed, we might lose some events during that time
+};
 
 type TrackUpdate = {
   peer: HMSPeer;
@@ -527,7 +557,7 @@ export const useHMSSessionStoreListeners = () => {
   useEffect(() => {
     // Check if instance of HMSSessionStore is available
     if (hmsSessionStore) {
-      let toastTimeoutId: NodeJS.Timeout | null = null;
+      // let toastTimeoutId: NodeJS.Timeout | null = null;
 
       const addSessionStoreListeners = () => {
         // Handle 'spotlight' key values
@@ -575,8 +605,8 @@ export const useHMSSessionStoreListeners = () => {
             )
           );
 
-        let lastSpotlightValue: HMSSessionStoreValue = null;
-        let lastPinnedMessageValue: HMSSessionStoreValue = null;
+        // let lastSpotlightValue: HMSSessionStoreValue = null;
+        // let lastPinnedMessageValue: HMSSessionStoreValue = null;
 
         // Add subscription for `spotlight` & `pinnedMessage` keys updates on Session Store
         const subscription = hmsSessionStore.addKeyChangeListener<
@@ -598,41 +628,41 @@ export const useHMSSessionStoreListeners = () => {
                 handleSpotlightIdChange(data.value);
 
                 // Showing Toast message if value has actually changed
-                if (
-                  data.value !== lastSpotlightValue &&
-                  (data.value || lastSpotlightValue)
-                ) {
-                  Toast.showWithGravity(
-                    `SessionStore: \`spotlight\` key's value changed to ${data.value}`,
-                    Toast.LONG,
-                    Toast.TOP
-                  );
-                }
-
-                lastSpotlightValue = data.value;
+                // if (
+                //   data.value !== lastSpotlightValue &&
+                //   (data.value || lastSpotlightValue)
+                // ) {
+                //   Toast.showWithGravity(
+                //     `SessionStore: \`spotlight\` key's value changed to ${data.value}`,
+                //     Toast.LONG,
+                //     Toast.TOP
+                //   );
+                // }
+
+                // lastSpotlightValue = data.value;
                 break;
               }
               case 'pinnedMessage': {
                 handlePinnedMessageChange(data.value);
 
                 // Showing Toast message if value has actually changed
-                if (
-                  data.value !== lastPinnedMessageValue &&
-                  (data.value || lastPinnedMessageValue)
-                ) {
-                  if (toastTimeoutId !== null) {
-                    clearTimeout(toastTimeoutId);
-                  }
-                  toastTimeoutId = setTimeout(() => {
-                    Toast.showWithGravity(
-                      `SessionStore: \`pinnedMessage\` key's value changed to ${data.value}`,
-                      Toast.LONG,
-                      Toast.TOP
-                    );
-                  }, 1500);
-                }
-
-                lastPinnedMessageValue = data.value;
+                // if (
+                //   data.value !== lastPinnedMessageValue &&
+                //   (data.value || lastPinnedMessageValue)
+                // ) {
+                //   if (toastTimeoutId !== null) {
+                //     clearTimeout(toastTimeoutId);
+                //   }
+                //   toastTimeoutId = setTimeout(() => {
+                //     Toast.showWithGravity(
+                //       `SessionStore: \`pinnedMessage\` key's value changed to ${data.value}`,
+                //       Toast.LONG,
+                //       Toast.TOP
+                //     );
+                //   }, 1500);
+                // }
+
+                // lastPinnedMessageValue = data.value;
                 break;
               }
             }
@@ -651,7 +681,7 @@ export const useHMSSessionStoreListeners = () => {
           listener.remove()
         );
 
-        if (toastTimeoutId !== null) clearTimeout(toastTimeoutId);
+        // if (toastTimeoutId !== null) clearTimeout(toastTimeoutId);
       };
     }
   }, [hmsSessionStore]);

package/src/redux/actionTypes.ts

@@ -82,4 +82,6 @@ export enum HmsStateActionTypes {
   SET_IS_LOCAL_SCREEN_SHARED_STATE = 'SET_IS_LOCAL_SCREEN_SHARED_STATE',
   SET_ROOM_LOCALLY_MUTED = 'SET_ROOM_LOCALLY_MUTED',
   SET_USER_NAME = 'SET_USER_NAME',
+  ADD_TO_PREVIEW_PEERS_LIST = 'ADD_TO_PREVIEW_PEERS_LIST',
+  REMOVE_FROM_PREVIEW_PEERS_LIST = 'REMOVE_FROM_PREVIEW_PEERS_LIST',
 }

package/src/redux/actions/index.ts

@@ -194,3 +194,13 @@ export const setPeerToUpdate = (peerToUpdate: HMSPeer) => ({
   type: actionTypes.SET_PEER_TO_UPDATE,
   payload: { peerToUpdate },
 });
+
+export const addToPreviewPeersList = (peer: HMSPeer) => ({
+  type: HmsStateActionTypes.ADD_TO_PREVIEW_PEERS_LIST,
+  peer,
+});
+
+export const removeFromPreviewPeersList = (peer: HMSPeer) => ({
+  type: HmsStateActionTypes.REMOVE_FROM_PREVIEW_PEERS_LIST,
+  peerId: peer.peerID,
+});