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

package/src/components/HMSManageAudioOutput.tsx

@@ -0,0 +1,311 @@
+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,
+  CheckIcon,
+  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 HMSManageAudioOutput: 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}>Audio Output</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(
+                  (a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]
+                )
+                .map((device) => (
+                  <React.Fragment key={device}>
+                    <View style={styles.divider} />
+
+                    <TouchableOpacity
+                      style={styles.audioDeviceItem}
+                      onPress={() => handleSelectAudioDevice(device)}
+                    >
+                      <View style={styles.itemTextWrapper}>
+                        {getIcon(
+                          device === HMSAudioDevice.AUTOMATIC &&
+                            currentAudioOutputDevice
+                            ? currentAudioOutputDevice
+                            : device
+                        )}
+
+                        <Text style={styles.itemText}>
+                          {getDescription(device, currentAudioOutputDevice)}
+                        </Text>
+                      </View>
+
+                      {device === currentAudioOutputDevice ? (
+                        <CheckIcon />
+                      ) : null}
+                    </TouchableOpacity>
+                  </React.Fragment>
+                ))}
+            </ScrollView>
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    backgroundColor: COLORS.BACKGROUND.DEFAULT,
+    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,
+  },
+  itemTextWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemText: {
+    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',
+    justifyContent: 'space-between',
+    paddingVertical: 20,
+  },
+  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 />;
+  }
+};
+
+const getDescription = (
+  ofDevice: HMSAudioDevice,
+  currentDevice: HMSAudioDevice | null
+): string => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return currentDevice && currentDevice !== HMSAudioDevice.AUTOMATIC
+        ? `Default (${getDescription(currentDevice, currentDevice)})`
+        : 'Automatic';
+    case HMSAudioDevice.BLUETOOTH:
+      return 'Bluetooth Device';
+    case HMSAudioDevice.EARPIECE:
+      return 'Phone';
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return 'Speaker';
+    case HMSAudioDevice.WIRED_HEADSET:
+      return 'Earphone';
+  }
+};
+
+const audioDeviceSortOrder = {
+  [HMSAudioDevice.AUTOMATIC]: 0,
+  [HMSAudioDevice.SPEAKER_PHONE]: 1,
+  [HMSAudioDevice.WIRED_HEADSET]: 2,
+  [HMSAudioDevice.EARPIECE]: 3,
+  [HMSAudioDevice.BLUETOOTH]: 4,
+} as const;

package/src/components/HMSManageLeave.tsx

@@ -1,15 +1,12 @@
-import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Toast from 'react-native-simple-toast';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { AlertIcon, LeaveIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
+import { useLeaveMethods } from '../hooks-util';
 import type { RootState } from '../redux';
-import { clearStore } from '../redux/actions';
 import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import { DefaultModal } from './DefaultModal';
@@ -36,10 +33,6 @@ type LeaveButtonProps =
     };
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
-  // TODO: What if useNavigation context is undefined?
-  const navigation = useNavigation();
-  const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
   const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
 
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
@@ -97,71 +90,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
-  const destroy = () => {
-    hmsInstance
-      .destroy()
-      .then((s) => {
-        console.log('Destroy Success: ', s);
-        // TODOS:
-        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
-        //    - Reset Redux States
-        //    - HMSInstance will not be available now
-        //    - When your presses "Re Join" Action button, restart process from root component
-        //    - When your presses "Done" Action button
-        //        - If we have callback fn, call it
-        //        - Otherwise try our best to navigate away from current screen
-        //
-        // - No screen to show
-        //    - No need to reset redux state?
-        //    - HMSInstance will be available till this point
-        //    - If we have callback fn, call it
-        //    - Otherwise try our best to navigate away from current screen
-        //    - When we are navigated away from screen, HMSInstance will be not available
-
-        // dispatch(clearMessageData());
-        // dispatch(clearPeerData());
-        // dispatch(clearHmsReference());
-
-        // if (navigation.canGoBack()) {
-        //   navigation.goBack();
-        // } else {
-        // TODO: remove this later
-        navigation.navigate('QRCodeScreen' as never);
-        dispatch(clearStore());
-        // }
-      })
-      .catch((e) => {
-        console.log(`Destroy HMS instance Error: ${e}`);
-        Toast.showWithGravity(
-          `Destroy HMS instance Error: ${e}`,
-          Toast.LONG,
-          Toast.TOP
-        );
-      });
-  };
-
-  const onLeavePress = () => {
-    hmsInstance
-      .leave()
-      .then((d) => {
-        console.log('Leave Success: ', d);
-        destroy();
-      })
-      .catch((e) => {
-        console.log(`Leave Room Error: ${e}`);
-        Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
-      });
-  };
-
-  const onEndRoomPress = () => {
-    hmsInstance
-      .endRoom('Host ended the room')
-      .then((d) => {
-        console.log('EndRoom Success: ', d);
-        destroy();
-      })
-      .catch((e) => console.log('EndRoom Error: ', e));
-  };
+  const { leave, endRoom } = useLeaveMethods();
 
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
@@ -197,7 +126,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         modalVisible={leaveModalType === ModalTypes.LEAVE_ROOM}
         setModalVisible={dismissModal}
       >
-        <LeaveRoomModal onSuccess={onLeavePress} cancelModal={dismissModal} />
+        <LeaveRoomModal onSuccess={leave} cancelModal={dismissModal} />
       </DefaultModal>
 
       <DefaultModal
@@ -205,7 +134,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         modalVisible={leaveModalType === ModalTypes.END_ROOM}
         setModalVisible={dismissModal}
       >
-        <EndRoomModal onSuccess={onEndRoomPress} cancelModal={dismissModal} />
+        <EndRoomModal onSuccess={endRoom} cancelModal={dismissModal} />
       </DefaultModal>
     </View>
   );
@@ -272,7 +201,7 @@ const LeavePopup: React.FC<LeavePopupProps> = ({
           onPress={onLeavePress}
         >
           <LeaveIcon style={leavePopupStyles.leaveButtonIcon} />
-          <Text style={leavePopupStyles.leaveButtonText}>Leave</Text>
+          <Text style={leavePopupStyles.leaveButtonText}>Leave Studio</Text>
         </TouchableOpacity>
 
         {canEndRoom ? (

package/src/components/HMSMeetingEnded.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { COLORS } from '../utils/theme';
+
+export const HMSMeetingEnded = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Meeting Ended</Text>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 24,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 32,
+  },
+});

package/src/components/HMSPreviewEditName.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, TextInput } from 'react-native';
+import { Platform, StyleSheet, TextInput } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { COLORS } from '../utils/theme';
@@ -11,13 +11,13 @@ export interface HMSPreviewEditNameProps {}
 
 export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
-  const { clearConfig } = useHMSConfig();
+  const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
   const [inputFocused, setInputFocused] = React.useState(false);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
-    clearConfig();
+    updateConfig({ username: name });
   };
 
   const handleInputFocus = () => setInputFocused(true);
@@ -29,7 +29,7 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
       style={[styles.input, inputFocused ? styles.focusedInput : null]}
       value={userName}
       onChangeText={handleNameChange}
-      placeholder="Name"
+      placeholder="Enter Name..."
       autoCapitalize="words"
       autoCompleteType="name"
       placeholderTextColor={COLORS.SURFACE.ON_SURFACE.LOW}
@@ -43,13 +43,14 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
 const styles = StyleSheet.create({
   input: {
     flex: 1,
+    height: 50,
     textAlignVertical: 'center',
     backgroundColor: COLORS.SURFACE.DEFAULT,
     paddingHorizontal: 16,
-    paddingVertical: 12,
     borderRadius: 8,
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 16,
+    lineHeight: Platform.OS === 'android' ? 24 : undefined,
     fontFamily: 'Inter',
     fontWeight: '400',
     letterSpacing: 0.5,

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+
+export const HMSPreviewHLSLiveIndicator = () => {
+  const isHLSStreaming = useSelector(
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
+  );
+
+  if (!isHLSStreaming) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.circleContainer}>
+        <View style={styles.circle} />
+      </View>
+      <Text style={styles.text}>LIVE</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
+    paddingLeft: 8,
+    paddingRight: 12,
+    marginRight: 8,
+  },
+  circleContainer: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circle: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: COLORS.WHITE,
+  },
+  text: {
+    marginLeft: 4,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/HMSPreviewJoinButton.tsx

@@ -5,8 +5,12 @@ import {
   Text,
   TouchableHighlight,
 } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { RadioIcon } from '../Icons';
+import { useShouldGoLive } from '../hooks-util';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -17,12 +21,20 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
   loading,
   onJoin,
 }) => {
+  const userNameInvalid = useSelector(
+    (state: RootState) => state.user.userName.length <= 0
+  );
+
+  const shouldGoLive = useShouldGoLive();
+
+  const disabledJoin = userNameInvalid || loading;
+
   return (
     <TouchableHighlight
       underlayColor={COLORS.PRIMARY.DARK}
-      style={styles.button}
+      style={[styles.button, disabledJoin ? styles.disabledButton : null]}
       onPress={onJoin}
-      disabled={loading}
+      disabled={disabledJoin}
     >
       <>
         {loading ? (
@@ -33,8 +45,23 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
           />
         ) : null}
 
-        <Text style={[styles.text, { opacity: loading ? 0 : undefined }]}>
-          {'Join'}
+        {shouldGoLive ? (
+          <RadioIcon
+            style={[
+              loading ? styles.hiddenView : null,
+              disabledJoin ? styles.disabledIcon : null,
+            ]}
+          />
+        ) : null}
+
+        <Text
+          style={[
+            styles.text,
+            loading ? styles.hiddenView : null,
+            disabledJoin ? styles.disabledText : null,
+          ]}
+        >
+          {shouldGoLive ? 'Go Live' : 'Join Now'}
         </Text>
       </>
     </TouchableHighlight>
@@ -43,6 +70,7 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
 const styles = StyleSheet.create({
   button: {
+    flexDirection: 'row',
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
@@ -61,4 +89,16 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   loader: { position: 'absolute' },
+  disabledButton: {
+    backgroundColor: COLORS.PRIMARY.DISABLED,
+  },
+  disabledIcon: {
+    tintColor: COLORS.PRIMARY.ON_PRIMARY.LOW,
+  },
+  disabledText: {
+    color: COLORS.PRIMARY.ON_PRIMARY.LOW,
+  },
+  hiddenView: {
+    opacity: 0,
+  },
 });

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { NetworkQualityIcon } from '../Icons';
+import { COLORS } from '..//utils/theme';
+import type { RootState } from '../redux';
+import { useHMSInstance } from '../hooks-util';
+
+export const HMSPreviewNetworkQuality = () => {
+  const hmsInstance = useHMSInstance();
+  const localPeerNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
+
+  React.useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <NetworkQualityIcon quality={localPeerNetworkQuality} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 8,
+    marginBottom: 8,
+    borderRadius: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    backgroundColor: COLORS.BACKGROUND.DIM_80,
+    alignSelf: 'flex-start',
+  },
+});