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

package/src/Icons/Speaker/index.tsx

@@ -4,9 +4,11 @@ import type { ImageProps } from 'react-native';
 
 interface SpeakerIconProps extends Omit<ImageProps, 'source'> {
   muted: boolean;
+  size?: 'normal' | 'large';
 }
 
 export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
+  size = 'normal',
   muted,
   style,
   ...restProps
@@ -16,9 +18,11 @@ export const SpeakerIcon: React.FC<SpeakerIconProps> = ({
       source={
         muted
           ? require('./assets/speaker-muted.png')
-          : require('./assets/speaker.png')
+          : size === 'normal'
+          ? require('./assets/speaker.png')
+          : require('./assets/speaker-large.png')
       }
-      style={[styles.icon, style]}
+      style={[styles.icon, style, size === 'large' ? styles.large : null]}
       {...restProps}
     />
   );
@@ -31,4 +35,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  large: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/Wave/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface WaveIconProps extends Omit<ImageProps, 'source'> {}
+
+export const WaveIcon: React.FC<WaveIconProps> = ({ style, ...restProps }) => {
+  return (
+    <Image
+      source={require('./assets/wave.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -17,3 +17,9 @@ export * from './Clock';
 export * from './End';
 export * from './100ms';
 export * from './Hand';
+export * from './Person';
+export * from './AnswerPhone';
+export * from './Bluetooth';
+export * from './Headphones';
+export * from './Wave';
+export * from './GenericLogo';

package/src/components/BackButton.tsx

@@ -36,7 +36,7 @@ export const BackButton: React.FC<BackButtonProps> = () => {
 const styles = StyleSheet.create({
   button: {
     marginTop: 16,
-    marginLeft: 8,
+    marginLeft: 16,
     backgroundColor: COLORS.SURFACE.DEFAULT,
   },
 });

package/src/components/DisplayTrack.tsx

@@ -79,7 +79,7 @@ const DisplayTrack = React.forwardRef<
           videoTrack?.source !== HMSTrackSource.REGULAR
             ? `${peer.name}'s ${videoTrack.source}`
             : isLocal
-            ? `You (${peer.name})`
+            ? `${peer.name} (You)`
             : peer.name}
         </Text>
       </View>

package/src/components/HMSPreviewEditName.tsx

@@ -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}

package/src/components/HMSPreviewJoinButton.tsx

@@ -5,8 +5,10 @@ import {
   Text,
   TouchableHighlight,
 } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -17,12 +19,21 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
   loading,
   onJoin,
 }) => {
+  const userNameInvalid = useSelector(
+    (state: RootState) => state.user.userName.length <= 0
+  );
+
+  const disabledJoin = userNameInvalid || loading;
+
   return (
     <TouchableHighlight
       underlayColor={COLORS.PRIMARY.DARK}
-      style={styles.button}
+      style={[
+        styles.button,
+        disabledJoin ? { backgroundColor: COLORS.PRIMARY.DISABLED } : null,
+      ]}
       onPress={onJoin}
-      disabled={loading}
+      disabled={disabledJoin}
     >
       <>
         {loading ? (
@@ -33,8 +44,14 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
           />
         ) : null}
 
-        <Text style={[styles.text, { opacity: loading ? 0 : undefined }]}>
-          {'Join ->'}
+        <Text
+          style={[
+            styles.text,
+            { opacity: loading ? 0 : undefined },
+            disabledJoin ? { color: COLORS.PRIMARY.ON_PRIMARY.LOW } : null,
+          ]}
+        >
+          Join Now
         </Text>
       </>
     </TouchableHighlight>

package/src/components/HMSPreviewPeersList.tsx

@@ -1,53 +1,30 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import {
-  HMSPeer,
-  // HMSPeerUpdate,
-  // useHMSPeerUpdates,
-} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+import type { HMSPeer } from '@100mslive/react-native-hms';
 
 import { COLORS } from '../utils/theme';
 import { ParticipantsIcon } from '../Icons';
+import type { RootState } from '../redux';
 
 export interface HMSPreviewPeersListProps {}
 
 export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
-  const [peerList, _setPeerList] = React.useState<HMSPeer[]>([]);
-
-  // TODO: Handle case when peer updates are received before this hook mounts
-  // It leads to some already joined peer missing in list
-  // useHMSPeerUpdates(
-  //   ({ peer, type }: { peer: HMSPeer; type: HMSPeerUpdate }) => {
-  //     switch (type) {
-  //       case HMSPeerUpdate.PEER_JOINED:
-  //         setPeerList((prevPeerList) => [...prevPeerList, peer]);
-  //         break;
-  //       case HMSPeerUpdate.PEER_LEFT:
-  //         setPeerList((prevPeerList) =>
-  //           prevPeerList.filter(
-  //             (peerFromList) => peerFromList.peerID !== peer.peerID
-  //           )
-  //         );
-  //         break;
-
-  //       default:
-  //         break;
-  //     }
-  //   },
-  //   []
-  // );
+  const previewPeersList = useSelector(
+    (state: RootState) => state.hmsStates.previewPeersList
+  );
 
   return (
     <View style={styles.container}>
-      {peerList.length > 0 ? <ParticipantsIcon /> : null}
+      {previewPeersList.length > 0 ? <ParticipantsIcon /> : null}
 
-      {peerList.length === 0 ? (
+      {previewPeersList.length === 0 ? (
         <Text style={[styles.text, styles.textSpacer]}>
           You are the first to join
         </Text>
-      ) : peerList.length === 1 ? (
+      ) : previewPeersList.length === 1 ? (
         <Text style={[styles.text, styles.textSpacer]}>
-          {peerList[0]!.name} has joined
+          {previewPeersList[0]!.name} has joined
         </Text>
       ) : (
         <View style={styles.multiTextContainer}>
@@ -56,17 +33,17 @@ export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
             ellipsizeMode="tail"
             numberOfLines={1}
           >
-            {peerList
+            {previewPeersList
               .slice(0, 2)
-              .map((peer) => peer.name)
+              .map((peer: HMSPeer) => peer.name)
               .join(', ')}
           </Text>
 
-          {peerList.length - 2 > 0 ? (
+          {previewPeersList.length - 2 > 0 ? (
             <Text style={styles.text}>
               {' '}
-              +{peerList.length - 2}{' '}
-              {peerList.length - 2 > 1 ? 'others' : 'other'}
+              +{previewPeersList.length - 2}{' '}
+              {previewPeersList.length - 2 > 1 ? 'others' : 'other'}
             </Text>
           ) : null}
         </View>
@@ -81,7 +58,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: COLORS.SURFACE.DEFAULT,
     marginTop: 16,
-    marginBottom: 24,
     alignSelf: 'center',
     paddingVertical: 8,
     paddingHorizontal: 12,
@@ -99,7 +75,10 @@ const styles = StyleSheet.create({
   textSpacer: {
     marginHorizontal: 8,
   },
-  flexView: { flex: 1 },
+  flexView: {
+    flex: 1,
+    flexShrink: 1,
+  },
   multiTextContainer: {
     flexDirection: 'row',
     marginHorizontal: 8,

package/src/components/HMSPreviewSubtitle.tsx

@@ -15,7 +15,7 @@ export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
 
 const styles = StyleSheet.create({
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.LOW,
+    color: COLORS.SURFACE.ON_SURFACE.MEDIUM,
     fontSize: 14,
     fontFamily: 'Inter',
     fontWeight: '400',

package/src/components/HMSPreviewTile.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { HMSVideoViewMode } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { MicIcon, NetworkQualityIcon } from '../Icons';
+import { PersonIcon } from '../Icons';
 import { useHMSInstance } from '../hooks-util';
 import type { RootState } from '../redux';
 import { getInitials } from '../utils/functions';
@@ -21,16 +21,9 @@ export const HMSPreviewTile: React.FC = () => {
   const isLocalVideoMuted = useSelector(
     (state: RootState) => state.hmsStates.isLocalVideoMuted
   );
-  const isLocalAudioMuted = useSelector(
-    (state: RootState) => state.hmsStates.isLocalAudioMuted
-  );
   const localVideoTrackId = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.videoTrack?.trackId
   );
-  const localPeerNetworkQuality = useSelector(
-    (state: RootState) =>
-      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
-  );
   const userName = useSelector((state: RootState) => state.user.userName);
 
   React.useEffect(() => {
@@ -43,15 +36,12 @@ export const HMSPreviewTile: React.FC = () => {
     <View style={styles.modalContainer}>
       {isLocalVideoMuted || !localVideoTrackId ? (
         <View style={styles.avatarContainer}>
-          <View
-            style={[
-              styles.avatar,
-              userName.length === 0 ? styles.emptyAvatar : null,
-            ]}
-          >
-            <Text style={styles.avatarText}>
-              {userName.length === 0 ? '👤' : getInitials(userName)}
-            </Text>
+          <View style={styles.avatar}>
+            {userName.length === 0 ? (
+              <PersonIcon style={styles.avatarIcon} />
+            ) : (
+              <Text style={styles.avatarText}>{getInitials(userName)}</Text>
+            )}
           </View>
         </View>
       ) : (
@@ -64,18 +54,6 @@ export const HMSPreviewTile: React.FC = () => {
           style={styles.hmsView}
         />
       )}
-
-      {isLocalAudioMuted ? (
-        <View style={styles.micMuted}>
-          <MicIcon muted={true} style={styles.micMutedIcon} />
-        </View>
-      ) : null}
-
-      <View style={styles.nameInTileContainer}>
-        {userName ? <Text style={styles.nameInTile}>{userName}</Text> : null}
-
-        <NetworkQualityIcon quality={localPeerNetworkQuality} />
-      </View>
     </View>
   );
 };
@@ -84,29 +62,12 @@ const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DEFAULT,
-    marginHorizontal: 8,
-    borderRadius: 16,
-    alignSelf: 'center',
+    backgroundColor: COLORS.BACKGROUND.DIM,
     overflow: 'hidden',
-    minWidth: '50%',
-    // minHeight: '50%',
-    aspectRatio: 377 / 482, // TODO: DO WE NEED THIS?
   },
   hmsView: {
     flex: 1,
   },
-  micMuted: {
-    position: 'absolute',
-    top: 8,
-    right: 8,
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
-    padding: 8,
-    borderRadius: 12,
-  },
-  micMutedIcon: {
-    tintColor: COLORS.ALERT.ERROR.BRIGHTER,
-  },
   avatarContainer: {
     flex: 1,
     alignItems: 'center',
@@ -120,8 +81,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  emptyAvatar: {
-    backgroundColor: '#C3D0E5', // TODO: use it from variable
+  avatarIcon: {
+    width: 40,
+    height: 40,
   },
   avatarText: {
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
@@ -131,22 +93,4 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     letterSpacing: 0.25,
   },
-  nameInTileContainer: {
-    position: 'absolute',
-    bottom: 8,
-    left: 8,
-    backgroundColor: COLORS.BACKGROUND.DIM_80,
-    padding: 8,
-    borderRadius: 12,
-    flexDirection: 'row',
-  },
-  nameInTile: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
-    letterSpacing: 0.25,
-    marginRight: 8,
-  },
 });

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/Header.tsx

@@ -23,6 +23,7 @@ export const _Header: React.FC<HeaderProps> = ({ offset }) => {
   const roomName = useSelector(
     (state: RootState) => state.hmsStates.room?.name
   );
+  const debugMode = useSelector((state: RootState) => state.user.debugMode);
   const animatedStyles = useAnimatedStyle(() => {
     return {
       opacity: offset.value,
@@ -44,7 +45,9 @@ export const _Header: React.FC<HeaderProps> = ({ offset }) => {
         <View style={styles.hlsContainer}>
           <HmsLogoIcon />
 
-          {roomName ? <Text style={styles.roomName}>{roomName}</Text> : null}
+          {debugMode && roomName ? (
+            <Text style={styles.roomName}>{roomName}</Text>
+          ) : null}
         </View>
       ) : (
         <View style={styles.container}>