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

package/lib/module/components/HMSSpeakerSettings.js

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Toast from 'react-native-simple-toast';
+import { useSelector } from 'react-redux';
+import { HMSUpdateListenerActions, HMSAudioDevice } from '@100mslive/react-native-hms';
+import { AnswerPhoneIcon, BluetoothIcon, HeadphonesIcon, SpeakerIcon, WaveIcon } from '../Icons';
+import { PressableIcon } from './PressableIcon';
+import { COLORS } from '../utils/theme';
+import { CloseIcon } from '../Icons';
+import { useHMSInstance } from '../hooks-util';
+export const HMSSpeakerSettings = () => {
+  const hmsInstance = useHMSInstance();
+  const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
+  const [currentAudioOutputDevice, setCurrentAudioOutputDevice] = React.useState(null);
+  const [availableAudioOutputDevices, setAvailableAudioOutputDevices] = React.useState([]);
+  const debugMode = useSelector(state => state.user.debugMode);
+
+  // Fetch current selected audio device and audio devices list on Android
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      let ignore = false;
+      const getCurrentAudioOutputDevice = async () => {
+        const device = await hmsInstance.getAudioOutputRouteType();
+        if (!ignore) {
+          setCurrentAudioOutputDevice(device);
+        }
+      };
+      const getAvailableAudioOutputDevices = async () => {
+        const devices = await hmsInstance.getAudioDevicesList();
+        if (!ignore) {
+          setAvailableAudioOutputDevices(devices);
+        }
+      };
+      getCurrentAudioOutputDevice();
+      getAvailableAudioOutputDevices();
+      return () => {
+        ignore = true;
+      };
+    }
+  }, [hmsInstance]);
+
+  // closes modal and no action will be taken after modal has been closed
+  const dismissModal = () => {
+    setSettingsModalVisible(false);
+  };
+
+  // Handles showing Modal for changing Audio device
+  const handleSpeakerChange = () => {
+    if (Platform.OS === 'ios') {
+      hmsInstance.switchAudioOutputUsingIOSUI();
+    } else {
+      if (availableAudioOutputDevices.length === 0) {
+        hmsInstance.getAudioDevicesList().then(devices => setAvailableAudioOutputDevices(devices)); // TODO(set-state-after-unmount): setting state irrespective of component unmount check
+      }
+
+      setSettingsModalVisible(true);
+    }
+  };
+
+  // Add audio device change listeners
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      let ignore = false;
+      hmsInstance.setAudioDeviceChangeListener(data => {
+        if (!ignore && data) {
+          setCurrentAudioOutputDevice(data.device);
+        }
+        if (debugMode) {
+          Toast.showWithGravity(`Audio Device Output changed to: ${data === null || data === void 0 ? void 0 : data.device}`, Toast.LONG, Toast.TOP);
+        }
+      });
+      return () => {
+        ignore = true;
+        hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED);
+      };
+    }
+  }, [hmsInstance, debugMode]);
+
+  // Handle changing selected audio device
+  const handleSelectAudioDevice = device => {
+    hmsInstance.switchAudioOutput(device);
+    setSettingsModalVisible(false);
+  };
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(PressableIcon, {
+    onPress: handleSpeakerChange
+  }, Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(SpeakerIcon, {
+    muted: false
+  }) : getIcon(currentAudioOutputDevice || HMSAudioDevice.AUTOMATIC)), /*#__PURE__*/React.createElement(Modal, {
+    isVisible: settingsModalVisible,
+    animationIn: 'slideInUp',
+    animationOut: 'slideOutDown',
+    backdropColor: COLORS.BACKGROUND.DIM,
+    backdropOpacity: 0.3,
+    onBackButtonPress: dismissModal,
+    onBackdropPress: dismissModal,
+    useNativeDriver: true,
+    useNativeDriverForBackdrop: true,
+    hideModalContentWhileAnimating: true
+    // swipeDirection={['up', 'down']}
+    // swipe
+    ,
+    style: styles.modal
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.headerText
+  }, "Speaker Settings"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: dismissModal,
+    hitSlop: styles.closeIconHitSlop
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), availableAudioOutputDevices.length === 0 ? /*#__PURE__*/React.createElement(View, {
+    style: styles.emptyView
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText
+  }, "No other devices available!")) : /*#__PURE__*/React.createElement(ScrollView, {
+    showsVerticalScrollIndicator: true
+  }, availableAudioOutputDevices.sort().map(device => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: device
+  }, true ? /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }) : null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.audioDeviceItem,
+    onPress: () => handleSelectAudioDevice(device)
+  }, getIcon(device), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText
+  }, device))))))));
+};
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  container: {
+    backgroundColor: COLORS.SURFACE.DIM,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingTop: 24,
+    paddingHorizontal: 16,
+    paddingBottom: 32
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16
+  },
+  headerText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    lineHeight: 24,
+    letterSpacing: 0.15
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16
+  },
+  itemText: {
+    flex: 1,
+    marginHorizontal: 16,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: 0.1
+  },
+  emptyView: {
+    height: 160,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  audioDeviceItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 24
+  },
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.BORDER.DEFAULT
+  }
+});
+const getIcon = ofDevice => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return /*#__PURE__*/React.createElement(WaveIcon, null);
+    case HMSAudioDevice.BLUETOOTH:
+      return /*#__PURE__*/React.createElement(BluetoothIcon, null);
+    case HMSAudioDevice.EARPIECE:
+      return /*#__PURE__*/React.createElement(AnswerPhoneIcon, null);
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return /*#__PURE__*/React.createElement(SpeakerIcon, {
+        muted: false
+      });
+    case HMSAudioDevice.WIRED_HEADSET:
+      return /*#__PURE__*/React.createElement(HeadphonesIcon, null);
+  }
+};
+//# sourceMappingURL=HMSSpeakerSettings.js.map

package/lib/module/components/HMSSpeakerSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Modal","Platform","ScrollView","StyleSheet","Text","TouchableOpacity","View","Toast","useSelector","HMSUpdateListenerActions","HMSAudioDevice","AnswerPhoneIcon","BluetoothIcon","HeadphonesIcon","SpeakerIcon","WaveIcon","PressableIcon","COLORS","CloseIcon","useHMSInstance","HMSSpeakerSettings","hmsInstance","settingsModalVisible","setSettingsModalVisible","useState","currentAudioOutputDevice","setCurrentAudioOutputDevice","availableAudioOutputDevices","setAvailableAudioOutputDevices","debugMode","state","user","useEffect","OS","ignore","getCurrentAudioOutputDevice","device","getAudioOutputRouteType","getAvailableAudioOutputDevices","devices","getAudioDevicesList","dismissModal","handleSpeakerChange","switchAudioOutputUsingIOSUI","length","then","setAudioDeviceChangeListener","data","showWithGravity","LONG","TOP","removeEventListener","ON_AUDIO_DEVICE_CHANGED","handleSelectAudioDevice","switchAudioOutput","createElement","onPress","muted","getIcon","AUTOMATIC","isVisible","animationIn","animationOut","backdropColor","BACKGROUND","DIM","backdropOpacity","onBackButtonPress","onBackdropPress","useNativeDriver","useNativeDriverForBackdrop","hideModalContentWhileAnimating","style","styles","modal","container","header","headerText","hitSlop","closeIconHitSlop","emptyView","itemText","showsVerticalScrollIndicator","sort","map","Fragment","key","divider","audioDeviceItem","create","margin","justifyContent","backgroundColor","SURFACE","borderTopLeftRadius","borderTopRightRadius","paddingTop","paddingHorizontal","paddingBottom","flexDirection","alignItems","marginBottom","color","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing","bottom","left","right","top","flex","marginHorizontal","height","paddingVertical","BORDER","DEFAULT","ofDevice","BLUETOOTH","EARPIECE","SPEAKER_PHONE","WIRED_HEADSET"],"sourceRoot":"../../../src","sources":["components/HMSSpeakerSettings.tsx"],"mappings":"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"}

package/lib/module/components/Preview.js

@@ -1,7 +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';
 import { BackButton } from './BackButton';
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
@@ -13,51 +15,100 @@ 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';
 export const Preview = _ref => {
   let {
     join,
     loadingButtonState
   } = _ref;
-  const {
-    bottom
-  } = useSafeAreaInsets();
+  const localPeerNetworkQuality = useSelector(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.networkQuality) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.downlinkQuality;
+  });
   useEffect(() => {
     AvoidSoftInput.setAdjustNothing();
     AvoidSoftInput.setEnabled(true);
     return () => AvoidSoftInput.setEnabled(false);
   }, []);
-  return /*#__PURE__*/React.createElement(SafeAreaView, {
+  return /*#__PURE__*/React.createElement(View, {
     style: styles.container
-  }, /*#__PURE__*/React.createElement(ScrollView, {
-    contentContainerStyle: styles.scrollContainer,
-    bounces: false
-  }, /*#__PURE__*/React.createElement(BackButton, null), /*#__PURE__*/React.createElement(HMSPreviewTitle, null), /*#__PURE__*/React.createElement(HMSPreviewSubtitle, null), /*#__PURE__*/React.createElement(HMSPreviewPeersList, null), /*#__PURE__*/React.createElement(HMSPreviewTile, null), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(HMSPreviewTile, null), /*#__PURE__*/React.createElement(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
+    }
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      marginTop: 24
+    },
+    edges: ['top', 'left', 'right'],
+    mode: "margin"
+  }, /*#__PURE__*/React.createElement(GenericLogoIcon, {
+    style: {
+      alignSelf: 'center',
+      marginBottom: 16
+    }
+  }), /*#__PURE__*/React.createElement(HMSPreviewTitle, null), /*#__PURE__*/React.createElement(HMSPreviewSubtitle, null), /*#__PURE__*/React.createElement(HMSPreviewPeersList, null)), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      position: 'absolute',
+      top: 0
+    },
+    edges: ['top'],
+    mode: "margin"
+  }, /*#__PURE__*/React.createElement(BackButton, null)), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginLeft: 8,
+      marginBottom: 8,
+      borderRadius: 8,
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      backgroundColor: COLORS.BACKGROUND.DIM_80,
+      alignSelf: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(NetworkQualityIcon, {
+    quality: localPeerNetworkQuality
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      backgroundColor: COLORS.BACKGROUND.DEFAULT,
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      padding: 16
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.controlsContainer
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.micAndCameraControls
   }, /*#__PURE__*/React.createElement(HMSManageLocalAudio, null), /*#__PURE__*/React.createElement(View, {
     style: styles.manageLocalVideoWrapper
-  }, /*#__PURE__*/React.createElement(HMSManageLocalVideo, null)), /*#__PURE__*/React.createElement(HMSManageCameraRotation, null)), /*#__PURE__*/React.createElement(HMSPreviewDeviceSettings, null)), /*#__PURE__*/React.createElement(View, {
-    style: [styles.joinButtonRow, {
-      marginBottom: 34 - bottom + 12
-    }]
+  }, /*#__PURE__*/React.createElement(HMSManageLocalVideo, null)), /*#__PURE__*/React.createElement(HMSManageCameraRotation, null)), /*#__PURE__*/React.createElement(HMSSpeakerSettings, null)), /*#__PURE__*/React.createElement(View, {
+    style: styles.joinButtonRow
   }, /*#__PURE__*/React.createElement(HMSPreviewEditName, null), /*#__PURE__*/React.createElement(HMSPreviewJoinButton, {
     onJoin: join,
     loading: loadingButtonState
-  }))));
+  })))));
 };
 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'
@@ -69,8 +120,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 16
   },
   joinButtonRow: {
-    marginHorizontal: 24,
-    marginTop: 16,
+    marginVertical: 16,
     flexDirection: 'row'
   }
 });

package/lib/module/components/Preview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","ScrollView","StyleSheet","View","AvoidSoftInput","SafeAreaView","useSafeAreaInsets","COLORS","BackButton","HMSManageCameraRotation","HMSManageLocalAudio","HMSManageLocalVideo","HMSPreviewEditName","HMSPreviewJoinButton","HMSPreviewPeersList","HMSPreviewSubtitle","HMSPreviewTile","HMSPreviewTitle","HMSPreviewDeviceSettings","Preview","_ref","join","loadingButtonState","bottom","setAdjustNothing","setEnabled","createElement","style","styles","container","contentContainerStyle","scrollContainer","bounces","controlsContainer","micAndCameraControls","manageLocalVideoWrapper","joinButtonRow","marginBottom","onJoin","loading","create","flex","backgroundColor","BACKGROUND","DIM","flexGrow","marginHorizontal","marginTop","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../src","sources":["components/Preview.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","StyleSheet","View","AvoidSoftInput","useSelector","SafeAreaView","LinearGradient","COLORS","BackButton","HMSManageCameraRotation","HMSManageLocalAudio","HMSManageLocalVideo","HMSPreviewEditName","HMSPreviewJoinButton","HMSPreviewPeersList","HMSPreviewSubtitle","HMSPreviewTile","HMSPreviewTitle","HMSSpeakerSettings","GenericLogoIcon","NetworkQualityIcon","Preview","_ref","join","loadingButtonState","localPeerNetworkQuality","state","_state$hmsStates$loca","hmsStates","localPeer","networkQuality","downlinkQuality","setAdjustNothing","setEnabled","createElement","style","styles","container","colors","locations","position","top","width","height","marginTop","edges","mode","alignSelf","marginBottom","bottom","marginLeft","borderRadius","paddingVertical","paddingHorizontal","backgroundColor","BACKGROUND","DIM_80","quality","flex","DEFAULT","borderTopLeftRadius","borderTopRightRadius","padding","controlsContainer","micAndCameraControls","manageLocalVideoWrapper","joinButtonRow","onJoin","loading","create","DIM","flexDirection","alignItems","justifyContent","marginHorizontal","marginVertical"],"sourceRoot":"../../../src","sources":["components/Preview.tsx"],"mappings":"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"}

package/lib/module/hooks-util.js

@@ -6,7 +6,7 @@ import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
 import { ModalTypes, PipModes } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import { useDispatch, useSelector, useStore } from 'react-redux';
-import { addMessage, addPinnedMessage, changePipModeStatus, clearStore, saveUserData, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setModalType } from './redux/actions';
+import { addMessage, addPinnedMessage, addToPreviewPeersList, changePipModeStatus, clearStore, removeFromPreviewPeersList, saveUserData, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setModalType } from './redux/actions';
 import { degradeOrRestorePeerTrackNodes, peerTrackNodeExistForPeer, peerTrackNodeExistForPeerAndTrack, removePeerTrackNodes, removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
 import { AppState, InteractionManager, LayoutAnimation, Platform } from 'react-native';
@@ -14,11 +14,11 @@ import { useNavigation } from '@react-navigation/native';
 import { useIsLandscapeOrientation, useIsPortraitOrientation } from './utils/dimension';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { selectIsHLSViewer } from './hooks-util-selectors';
-export const useHMSListeners = (setPeerTrackNodes, setMeetingState) => {
+export const useHMSListeners = (meetingState, setPeerTrackNodes, setMeetingState) => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
   useHMSRoomUpdate(hmsInstance, setMeetingState);
-  useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+  useHMSPeersUpdate(meetingState, hmsInstance, updateLocalPeer, setPeerTrackNodes);
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
 const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
@@ -93,69 +93,25 @@ const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
     };
   }, [hmsInstance]);
 };
-const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
-  // 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]
-  // );
-
+const useHMSPeersUpdate = (meetingState, hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
+  const dispatch = useDispatch();
+  const inMeeting = meetingState === MeetingState.IN_MEETING;
   useEffect(() => {
     const peerUpdateHandler = _ref => {
       let {
         peer,
         type
       } = _ref;
+      // 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;
       }
@@ -202,8 +158,9 @@ const useHMSPeersUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
     return () => {
       hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE);
     };
-  }, [hmsInstance]);
+  }, [inMeeting, hmsInstance]); // TODO: When `inMeeting` becomes true Peer Update is resubscribed, we might lose some events during that time
 };
+
 const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
   const dispatch = useDispatch();
   useEffect(() => {