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

package/lib/typescript/redux/reducers/index.d.ts

@@ -47,6 +47,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         room: import("@100mslive/react-native-hms").HMSRoom | null;
         localPeer: import("@100mslive/react-native-hms").HMSLocalPeer | null;
         roles: import("@100mslive/react-native-hms").HMSRole[];
+        previewPeersList: import("@100mslive/react-native-hms").HMSPeer[];
     };
     chatWindow: any;
 }>, any>;

package/lib/typescript/redux/reducers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAMG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAMG"}

package/lib/typescript/utils/theme.d.ts

@@ -50,6 +50,9 @@ export declare const COLORS: {
         DEFAULT: string;
         DARK: string;
         DISABLED: string;
+        ON_PRIMARY: {
+            LOW: string;
+        };
     };
     SECONDARY: {
         DIM: string;
@@ -83,6 +86,7 @@ export declare const COLORS: {
         LIGHTER: string;
         ON_SURFACE: {
             LOW: string;
+            MEDIUM: string;
             HIGH: string;
         };
     };

package/lib/typescript/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ChB,CAAC;AAGH,eAAO,MAAM,WAAW,aAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,UAAW,KAAK,UAAwB,CAAC;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ElB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ChB,CAAC;AAGH,eAAO,MAAM,WAAW,aAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,UAAW,KAAK,UAAwB,CAAC;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -60,6 +60,7 @@
     "react-native-document-picker": "^8.1.1",
     "react-native-fs": "^2.19.0",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-linear-gradient": "^2.7.3",
     "react-native-modal": "^12.1.0",
     "react-native-safe-area-context": "^3.3.0",
     "react-native-share": "^8.2.2",
@@ -94,9 +95,9 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-vector-icons": "^9.1.0",
+    "react-native-permissions": "3.4.0",
     "react-native-reanimated": "^2.17.0",
-    "react-native-permissions": "3.4.0"
+    "react-native-vector-icons": "^9.1.0"
   },
   "resolutions": {
     "@types/react": "17.0.21"

package/src/HMSRoomSetup.tsx

@@ -68,7 +68,7 @@ export const HMSRoomSetup = () => {
   }, [getConfig, hmsInstance]);
 
   // HMS Room, Peers, Track Listeners
-  useHMSListeners(setPeerTrackNodes, setMeetingState);
+  useHMSListeners(meetingState, setPeerTrackNodes, setMeetingState);
 
   /**
    * Session store is a shared realtime key-value store that is accessible by everyone in the room.

package/src/Icons/AnswerPhone/index.tsx

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

package/src/Icons/Bluetooth/index.tsx

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

package/src/Icons/GenericLogo/index.tsx

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

package/src/Icons/Headphones/index.tsx

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

package/src/Icons/Person/index.tsx

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

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