meeting joined bug fix

src/components/Buttons/LogoButton/LogoButton.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
-import {useTheme, Text, Icon} from '@ui-kitten/components';
+import {StyleSheet, View, TouchableOpacity} from 'react-native';
+import {Text} from '@ui-kitten/components';
 import {RALEWAY_BOLD} from '../../../constants/Fonts/Fonts';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../../store/rootReducer';
+import FastImage from 'react-native-fast-image';
 
 const LogoButton = (props: any) => {
   const theme = useSelector(
@@ -18,7 +19,7 @@ const LogoButton = (props: any) => {
         ]}
         onPress={props.onPress}>
         <View style={styles.left}>
-          <Image
+          <FastImage
             style={{
               width: props.buttonType == 'facebook' ? 30 : 25,
               height: props.buttonType == 'facebook' ? 30 : 25,

src/components/Card/GroupCard/GroupCard.tsx

@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   card: {
-    borderRadius: 70,
+    borderRadius: 10,
     padding: 10,
   },
   imgView: {

src/constants/Images/Images.ts

@@ -11,3 +11,9 @@ export const DEFAULT_GROUP_IMAGE =
 
 export const DEFAULT_GROUP_MEETING_IMAGE =
   'https://firebasestorage.googleapis.com/v0/b/baithak-4a1fe.appspot.com/o/Default_group_meeting.jpg?alt=media&token=fa20fcfb-edf3-4bab-a1d0-e9bf0653599e';
+
+export const FACEBOOK_LOGO =
+  'https://firebasestorage.googleapis.com/v0/b/baithak-4a1fe.appspot.com/o/facebookButton.png?alt=media&token=9f6c37fb-632c-43db-a53f-0fdac76953e5';
+
+export const GOOGLE_LOGO =
+  'https://firebasestorage.googleapis.com/v0/b/baithak-4a1fe.appspot.com/o/googleButton.png?alt=media&token=b2e498a6-54e5-4dff-83bd-41ffced27e23';

src/hooks/Meeting/useStartMeeting.ts

@@ -44,6 +44,7 @@ const useStartMeeting = (
   const [speakerOff, toogleSpeaker] = useState<boolean>(false);
   const [inVideoOff, toogleInVideoOff] = useState<boolean>(false);
   const [flashOn, toggleFlash] = useState<boolean>(false);
+  const [active, setActive] = useState<number>();
 
   let engine = useRef<RtcEngine | null>(null);
   let sound = useRef<Sound | null>(
@@ -82,101 +83,105 @@ const useStartMeeting = (
     }
   };
 
-  useEffect(() => {
-    const intializeRTC = async () => {
-      try {
-        await checkPermission();
+  const intializeRTC = async () => {
+    try {
+      await checkPermission();
 
-        engine.current = await RtcEngine.create(appId);
+      engine.current = await RtcEngine.create(appId);
 
-        // Enable the video module.
-        await engine.current?.enableVideo();
+      // Enable the video module.
+      await engine.current?.enableVideo();
 
-        //Start the call
-        await startCall();
+      //Start the call
+      await startCall();
 
-        //================ Event Listeners Start ====================================
+      //================ Event Listeners Start ====================================
 
-        // Listen for the UserJoined callback.
-        // This callback occurs when the remote user successfully joins the channel.
-        engine.current?.addListener('UserJoined', (uid, elapsed) => {
-          if (peerIds.indexOf(uid) === -1) {
-            setPeerIds((prev) => [...prev, uid]);
-            const userJoined = getBaithakPartiFromAgoraId(uid, baithak);
-            sound.current?.play();
-            Toast.show({
-              type: 'info',
-              text1: `${userJoined.name ? userJoined.name : 'Someone'} joined`,
-              position: 'top',
-            });
-          }
-        });
+      // Listen for the UserJoined callback.
+      // This callback occurs when the remote user successfully joins the channel.
+      engine.current?.addListener('UserJoined', async (uid, elapsed) => {
+        if (peerIds.indexOf(uid) === -1) {
+          setPeerIds((prev) => [...prev, uid]);
+          const userJoined = await getRemoteUserByAgoraId(uid);
+          sound.current?.play();
 
-        // Listen for the UserOffline callback.
-        // This callback occurs when the remote user gets cutt off the channel.
-        engine.current?.addListener('UserOffline', (uid, elapsed) => {
-          const user = getRemoteUserByAgoraId(uid);
-          if (user && user.name) {
+          if (userJoined && userJoined.name) {
             Toast.show({
               type: 'info',
-              text1: `${user.name} left the Baithak`,
+              text1: `${userJoined.name} joined`,
               position: 'top',
             });
           }
-        });
+        }
+      });
 
-        // Listen for the JoinChannelSuccess callback.
-        // This callback occurs when the local user successfully joins the channel.
-        engine.current?.addListener(
-          'JoinChannelSuccess',
-          async (channel, uid, elapsed) => {
-            if (meetConfig.creater === 'Host') {
-              await onHostJoinMeet(meetConfig, firebaseUser);
-            } else {
-              await onMemberJoinMeet(meetConfig, firebaseUser);
-            }
-            onPressMeetInfo();
-            setJoinSucceed(true);
-            toggleModal(false);
-          },
-        );
-
-        //Listen for the Warning callback.
-        //This callback occurs when there is some warning
-        // engine.current?.addListener('Warning', (warn) => {
-        //   console.log('Warn', warn);
-        // });
-
-        //Listen for the Warning callback.
-        //This callback occurs when there is some warning
-        engine.current?.addListener('Error', (err) => {
-          console.log('Error', err);
-          toggleModal(false);
-          navigation.goBack();
+      // Listen for the UserOffline callback.
+      // This callback occurs when the remote user gets cutt off the channel.
+      engine.current?.addListener('UserOffline', async (uid, elapsed) => {
+        const user = await getRemoteUserByAgoraId(uid);
+        // Remove peer ID from state array
+        setPeerIds((prev) => prev.filter((id) => id !== uid));
+        if (user && user.name) {
           Toast.show({
-            type: 'error',
-            text1: 'Oops!',
-            text2: 'Something went wrong. Please try again',
+            type: 'info',
+            text1: `${user.name} left the Baithak`,
             position: 'top',
           });
-        });
-      } catch (err) {
-        engine.current?.destroy();
-        console.log('Error in initialize RTC', err);
+        }
+      });
+
+      // Listen for the JoinChannelSuccess callback.
+      // This callback occurs when the local user successfully joins the channel.
+      engine.current?.addListener(
+        'JoinChannelSuccess',
+        async (channel, uid, elapsed) => {
+          if (meetConfig.creater === 'Host') {
+            await onHostJoinMeet(meetConfig, firebaseUser);
+          } else {
+            await onMemberJoinMeet(meetConfig, firebaseUser);
+          }
+          onPressMeetInfo();
+          setJoinSucceed(true);
+          toggleModal(false);
+        },
+      );
+
+      //Listen for the Warning callback.
+      //This callback occurs when there is some warning
+      // engine.current?.addListener('Warning', (warn) => {
+      //   console.log('Warn', warn);
+      // });
+
+      //Listen for the Warning callback.
+      //This callback occurs when there is some warning
+      engine.current?.addListener('Error', (err) => {
+        console.log('Error', err);
         toggleModal(false);
         navigation.goBack();
         Toast.show({
           type: 'error',
           text1: 'Oops!',
           text2: 'Something went wrong. Please try again',
           position: 'top',
-          visibilityTime: 300,
         });
-      }
-    };
-
-    //================ Event Listeners Ends ====================================
+      });
+      //================ Event Listeners Ends ====================================
+    } catch (err) {
+      engine.current?.destroy();
+      console.log('Error in initialize RTC', err);
+      toggleModal(false);
+      navigation.goBack();
+      Toast.show({
+        type: 'error',
+        text1: 'Oops!',
+        text2: 'Something went wrong. Please try again',
+        position: 'top',
+        visibilityTime: 300,
+      });
+    }
+  };
 
+  useEffect(() => {
     //Call the initialize RTC method
     intializeRTC();
   }, []);
@@ -345,6 +350,7 @@ const useStartMeeting = (
     onPressInVideo,
     flashOn,
     onCamerFlashOn,
+    active,
   };
 };
 

src/screens/Auth/SignIn/SignIn.tsx

@@ -27,6 +27,7 @@ import {
 import LogoButton from '../../../components/Buttons/LogoButton/LogoButton';
 import Divider from '../../../components/Divider/Divider';
 import useOnLogin from '../../../hooks/auth/useOnLogin';
+import {FACEBOOK_LOGO, GOOGLE_LOGO} from '../../../constants/Images/Images';
 
 interface props {
   navigation: any;
@@ -137,14 +138,14 @@ const SignIn = (props: props) => {
                   buttonType="google"
                   title="Sign in with Google"
                   style={styles.buttonHolder}
-                  src={require('../../../assets/Logos/googleButton.png')}
+                  src={{uri: GOOGLE_LOGO}}
                 />
                 <LogoButton
                   onPress={onFacebookAuth}
                   buttonType="facebook"
                   title="Sign in with Facebook"
                   style={styles.buttonHolder}
-                  src={require('../../../assets/Logos/facebookButton.png')}
+                  src={{uri: FACEBOOK_LOGO}}
                 />
               </View>
             )}

src/screens/Meeting/VideoStream/VideoStream.tsx

@@ -54,6 +54,7 @@ const VideoStream = (props: any) => {
     onPressInVideo,
     flashOn,
     onCamerFlashOn,
+    active,
   } = useStartMeeting(
     {
       appId: APP_ID,
@@ -104,7 +105,7 @@ const VideoStream = (props: any) => {
           onLeftPress={confirmEnd}
           rightIcon="sync-outline"
           onRightPress={onSwitchCamera}
-          centerText={getRefinedText(meetConfig.channelName, 15)}
+          centerText={getRefinedText(meetConfig.channelName, 20)}
           leftIconColor="white"
           centerTextColor="white"
           rightIconColor="white"

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   imgView: {
-    width: '100%',
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -159,13 +159,15 @@ const styles = StyleSheet.create({
     borderRadius: 70,
   },
   nameView: {
+    marginTop: 20,
+    paddingHorizontal: 14,
     width: '100%',
     alignItems: 'center',
-    marginTop: 20,
-    paddingHorizontal: 10,
   },
   name: {
     fontFamily: RALEWAY_BOLD,
+    alignSelf: 'center',
+    flex: 1,
   },
   tagLine: {
     fontFamily: RALEWAY_MEDIUM,

src/utils/User/Methods/getRemoteUser.ts

@@ -13,23 +13,18 @@ export const getRemoteUser = async (uid: string) => {
   }
 };
 
-export const getRemoteUserByAgoraId = (uid: number) => {
+export const getRemoteUserByAgoraId = async (uid: number) => {
   try {
     let data: UserInterface | undefined;
-    firestore()
+    const userRef = await firestore()
       .collection('users')
       .where('agoraId', '==', uid)
-      .onSnapshot(
-        (snapshot) => {
-          if (snapshot.docs.length !== 0) {
-            data =
-              snapshot.docs[0].exists &&
-              (snapshot.docs[0].data() as UserInterface);
-          }
-        },
-        (err) => console.log('Error in getting remote userBy agora Id', err),
-      );
+      .get();
 
+    //Will contain only one doc if uid is correct
+    for (const doc of userRef.docs) {
+      if (doc.exists) data = doc.data() as UserInterface;
+    }
     return data;
   } catch (error) {
     console.log('Error if fetching remote user by agora Id', error);