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

package/src/components/HMSPreviewTitle.tsx

@@ -20,7 +20,6 @@ const styles = StyleSheet.create({
     fontFamily: 'Inter',
     fontWeight: '600',
     lineHeight: 32,
-    marginTop: 8,
     textAlign: 'center',
   },
 });

package/src/components/HMSSpeakerSettings.tsx

@@ -0,0 +1,259 @@
+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';
+import type { RootState } from '../redux';
+
+export const HMSSpeakerSettings: React.FC = () => {
+  const hmsInstance = useHMSInstance();
+  const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
+
+  const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
+    React.useState<HMSAudioDevice | null>(null);
+  const [availableAudioOutputDevices, setAvailableAudioOutputDevices] =
+    React.useState<HMSAudioDevice[]>([]);
+
+  const debugMode = useSelector((state: RootState) => 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: any) => {
+        if (!ignore && data) {
+          setCurrentAudioOutputDevice(data.device);
+        }
+
+        if (debugMode) {
+          Toast.showWithGravity(
+            `Audio Device Output changed to: ${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: HMSAudioDevice) => {
+    hmsInstance.switchAudioOutput(device);
+    setSettingsModalVisible(false);
+  };
+
+  return (
+    <View>
+      <PressableIcon onPress={handleSpeakerChange}>
+        {Platform.OS === 'ios' ? (
+          <SpeakerIcon muted={false} />
+        ) : (
+          getIcon(currentAudioOutputDevice || HMSAudioDevice.AUTOMATIC)
+        )}
+      </PressableIcon>
+
+      <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}
+      >
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Text style={styles.headerText}>Speaker Settings</Text>
+
+            <TouchableOpacity
+              onPress={dismissModal}
+              hitSlop={styles.closeIconHitSlop}
+            >
+              <CloseIcon />
+            </TouchableOpacity>
+          </View>
+
+          {availableAudioOutputDevices.length === 0 ? (
+            <View style={styles.emptyView}>
+              <Text style={styles.itemText}>No other devices available!</Text>
+            </View>
+          ) : (
+            <ScrollView showsVerticalScrollIndicator={true}>
+              {availableAudioOutputDevices.sort().map((device) => (
+                <React.Fragment key={device}>
+                  {true ? <View style={styles.divider} /> : null}
+
+                  <TouchableOpacity
+                    style={styles.audioDeviceItem}
+                    onPress={() => handleSelectAudioDevice(device)}
+                  >
+                    {getIcon(device)}
+                    <Text style={styles.itemText}>{device}</Text>
+                  </TouchableOpacity>
+                </React.Fragment>
+              ))}
+            </ScrollView>
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+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: HMSAudioDevice) => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return <WaveIcon />;
+    case HMSAudioDevice.BLUETOOTH:
+      return <BluetoothIcon />;
+    case HMSAudioDevice.EARPIECE:
+      return <AnswerPhoneIcon />;
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return <SpeakerIcon muted={false} />;
+    case HMSAudioDevice.WIRED_HEADSET:
+      return <HeadphonesIcon />;
+  }
+};

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/hooks-util.ts

@@ -33,8 +33,10 @@ import type { RootState } from './redux';
 import {
   addMessage,
   addPinnedMessage,
+  addToPreviewPeersList,
   changePipModeStatus,
   clearStore,
+  removeFromPreviewPeersList,
   saveUserData,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -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);
 };
@@ -204,68 +212,26 @@ type PeerUpdate = {
 };
 
 const useHMSPeersUpdate = (
+  meetingState: MeetingState,
   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]
-  // );
+  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;
       }
@@ -326,7 +292,7 @@ const useHMSPeersUpdate = (
     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
 };
 
 type TrackUpdate = {

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,
+});

package/src/redux/reducers/hmsStates.ts

@@ -1,5 +1,6 @@
 import type {
   HMSLocalPeer,
+  HMSPeer,
   HMSRole,
   HMSRoom,
 } from '@100mslive/react-native-hms';
@@ -13,7 +14,9 @@ type ActionType =
   | SetIsLocalVideoMutedAction
   | SetIsLocalScreenSharedAction
   | SetRoomLocallyMutedAction
-  | ResetAction;
+  | ResetAction
+  | AddToPreviewPeersList
+  | RemoveFromPreviewPeersList;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -54,6 +57,16 @@ type SetRoomLocallyMutedAction = {
   roomLocallyMuted: boolean;
 };
 
+type AddToPreviewPeersList = {
+  type: HmsStateActionTypes.ADD_TO_PREVIEW_PEERS_LIST;
+  peer: HMSPeer;
+};
+
+type RemoveFromPreviewPeersList = {
+  type: HmsStateActionTypes.REMOVE_FROM_PREVIEW_PEERS_LIST;
+  peerId: string;
+};
+
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
@@ -62,6 +75,7 @@ type IntialStateType = {
   room: HMSRoom | null;
   localPeer: HMSLocalPeer | null;
   roles: HMSRole[];
+  previewPeersList: HMSPeer[];
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -72,6 +86,7 @@ const INITIAL_STATE: IntialStateType = {
   room: null,
   localPeer: null,
   roles: [],
+  previewPeersList: [],
 };
 
 const hmsStatesReducer = (
@@ -116,6 +131,18 @@ const hmsStatesReducer = (
         ...state,
         roomLocallyMuted: action.roomLocallyMuted,
       };
+    case HmsStateActionTypes.ADD_TO_PREVIEW_PEERS_LIST:
+      return {
+        ...state,
+        previewPeersList: [...state.previewPeersList, action.peer],
+      };
+    case HmsStateActionTypes.REMOVE_FROM_PREVIEW_PEERS_LIST:
+      return {
+        ...state,
+        previewPeersList: state.previewPeersList.filter(
+          (prevPeer) => prevPeer.peerID !== action.peerId
+        ),
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/utils/theme.ts

@@ -54,7 +54,10 @@ export const COLORS = {
     LIGHT: '#66A1FF',
     DEFAULT: '#2572ED',
     DARK: '#143466',
-    DISABLED: '#3666B2',
+    DISABLED: '#004299',
+    ON_PRIMARY: {
+      LOW: '#84AAFF',
+    },
   },
   SECONDARY: {
     DIM: '#293042',
@@ -88,6 +91,7 @@ export const COLORS = {
     LIGHTER: '#272E38',
     ON_SURFACE: {
       LOW: '#8F9099',
+      MEDIUM: '#C5C6D0',
       HIGH: '#EFF0FA',
     },
   },