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

package/src/components/HMSPreviewPeersList.tsx

@@ -1,88 +1,34 @@
 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 { 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}
-
-      {peerList.length === 0 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          You are the first to join
-        </Text>
-      ) : peerList.length === 1 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          {peerList[0]!.name} has joined
-        </Text>
-      ) : (
-        <View style={styles.multiTextContainer}>
-          <Text
-            style={[styles.text, styles.flexView]}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-          >
-            {peerList
-              .slice(0, 2)
-              .map((peer) => peer.name)
-              .join(', ')}
-          </Text>
-
-          {peerList.length - 2 > 0 ? (
-            <Text style={styles.text}>
-              {' '}
-              +{peerList.length - 2}{' '}
-              {peerList.length - 2 > 1 ? 'others' : 'other'}
-            </Text>
-          ) : null}
-        </View>
-      )}
+      <Text style={[styles.text, styles.textSpacer]}>
+        {previewPeersList.length === 0
+          ? 'You are the first to join'
+          : `${previewPeersList.length} ${
+              previewPeersList.length > 1 ? 'others' : 'other'
+            } in session`}
+      </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: COLORS.SURFACE.DEFAULT,
-    marginTop: 16,
-    marginBottom: 24,
-    alignSelf: 'center',
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 20,
@@ -99,10 +45,4 @@ const styles = StyleSheet.create({
   textSpacer: {
     marginHorizontal: 8,
   },
-  flexView: { flex: 1 },
-  multiTextContainer: {
-    flexDirection: 'row',
-    marginHorizontal: 8,
-    maxWidth: '70%',
-  },
 });

package/src/components/HMSPreviewSubtitle.tsx

@@ -2,20 +2,44 @@ import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { COLORS } from '../utils/theme';
+import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
 }
 
 export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
-  subtitle = 'Setup your audio and video before joining',
+  subtitle,
 }) => {
-  return <Text style={styles.title}>{subtitle}</Text>;
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+
+  if (subtitle) {
+    return <Text style={styles.title}>{subtitle}</Text>;
+  }
+
+  if (canPublishAudio && canPublishVideo) {
+    return (
+      <Text style={styles.title}>
+        Setup your audio and video before joining
+      </Text>
+    );
+  }
+
+  if (canPublishAudio) {
+    return <Text style={styles.title}>Setup your audio before joining</Text>;
+  }
+
+  if (canPublishVideo) {
+    return <Text style={styles.title}>Setup your video before joining</Text>;
+  }
+
+  return <Text style={styles.title}>Enter your name before joining</Text>;
 };
 
 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

@@ -1,81 +1,37 @@
 import * as React from 'react';
 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 { useHMSInstance } from '../hooks-util';
+import { PersonIcon } from '../Icons';
 import type { RootState } from '../redux';
 import { getInitials } from '../utils/functions';
 import { COLORS } from '../utils/theme';
+import { HMSLocalVideoView } from './HMSLocalVideoView';
 
 export const HMSPreviewTile: React.FC = () => {
-  const hmsInstance = useHMSInstance();
-  const HmsView = hmsInstance.HmsView;
-  const mirrorCamera = useSelector(
-    (state: RootState) => state.app.joinConfig.mirrorCamera
-  );
-  const autoSimulcast = useSelector(
-    (state: RootState) => state.app.joinConfig.autoSimulcast
-  );
   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(() => {
-    hmsInstance.enableNetworkQualityUpdates();
-
-    return () => hmsInstance.disableNetworkQualityUpdates();
-  }, []);
-
   return (
     <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>
       ) : (
-        <HmsView
-          trackId={localVideoTrackId}
-          key={localVideoTrackId}
-          mirror={mirrorCamera}
-          autoSimulcast={autoSimulcast}
-          scaleType={HMSVideoViewMode.ASPECT_FILL}
-          style={styles.hmsView}
-        />
+        <HMSLocalVideoView />
       )}
-
-      {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 +40,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 +59,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 +71,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/HMSRoomOptions.tsx

@@ -75,16 +75,10 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       </DefaultModal>
       <DefaultModal
         modalPosiion="center"
-        modalVisible={
-          modalVisible === ModalTypes.RECORDING ||
-          modalVisible === ModalTypes.RESOLUTION
-        }
+        modalVisible={modalVisible === ModalTypes.RECORDING}
         setModalVisible={dismissModal}
       >
-        <RecordingModal
-          setModalVisible={setModalVisible}
-          recordingModal={modalVisible === ModalTypes.RECORDING}
-        />
+        <RecordingModal setModalVisible={setModalVisible} />
       </DefaultModal>
       <DefaultModal
         modalPosiion="center"

package/src/components/HMSShowNetworkQuality.tsx

@@ -14,7 +14,6 @@ export const HMSShowNetworkQuality = () => {
       state.hmsStates.localPeer?.networkQuality?.downlinkQuality
   );
 
-  // TODO: test network quality usage
   useEffect(() => {
     hmsInstance.enableNetworkQualityUpdates();
 

package/src/components/Meeting.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { PeerTrackNode } from '../utils/types';
@@ -16,12 +17,18 @@ import {
 } from '../hooks-util';
 import { ChatView } from './ChatWindow';
 import { MeetingScreenContent } from './MeetingScreenContent';
+import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
+import type { RootState } from '../redux';
 
 interface MeetingProps {
   peerTrackNodes: Array<PeerTrackNode>;
 }
 
 export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
+  const startingHLSStream = useSelector(
+    (state: RootState) => state.app.startingHLSStream
+  );
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
@@ -48,6 +55,10 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     };
   }, []);
 
+  if (startingHLSStream) {
+    return <HMSHLSStreamLoading />;
+  }
+
   /**
    * TODO: disbaled Expended View animation in Webrtc flow
    *

package/src/components/MenuModal/Menu.tsx

@@ -11,9 +11,9 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   View,
+  ScrollView,
 } from 'react-native';
 import type { LayoutChangeEvent, ViewStyle } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 
 import { COLORS } from '../../utils/theme';