agora-appbuilder-core 1.0.8 → 2.0.1

package/template/src/pages/Join.tsx

@@ -10,15 +10,12 @@
 *********************************************
 */
 import React, {useContext, useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-} from 'react-native';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
 import SessionContext from '../components/SessionContext';
 // import OpenInNativeButton from '../subComponents/OpenInNativeButton';
 import Logo from '../subComponents/Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 import LogoutButton from '../subComponents/LogoutButton';
 import ColorContext from '../components/ColorContext';
 // import Illustration from '../subComponents/Illustration';
@@ -38,8 +35,9 @@ const Join = (props: joinProps) => {
   const history = useHistory();
   const {primaryColor} = useContext(ColorContext);
   const {joinSession} = useContext(SessionContext);
-  const [error, setError] =
-    useState<null | {name: string; message: string}>(null);
+  const [error, setError] = useState<null | {name: string; message: string}>(
+    null,
+  );
   // const [dim, setDim] = useState([
   //   Dimensions.get('window').width,
   //   Dimensions.get('window').height,
@@ -57,18 +55,12 @@ const Join = (props: joinProps) => {
   const startCall = async () => {
     joinSession({phrase});
   };
-  // throw new Error("My first Sentry error!");
+
   return (
-    // <ImageBackground
-    //   // onLayout={onLayout}
-    //   style={style.full}
-    //   resizeMode={'cover'}>
-    <View style={style.main}>
-      {/* <KeyboardAvoidingView behavior={'height'} style={style.main}> */}
+    <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
-        <Logo />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
-        {/* <OpenInNativeButton /> */}
       </View>
       <View style={style.content}>
         <View style={style.leftContent}>
@@ -99,28 +91,19 @@ const Join = (props: joinProps) => {
             )}
           </View>
         </View>
-        {/* {dim[0] > dim[1] + 150 ? (
-            <View style={style.full}>
-              <Illustration />
-            </View>
-          ) : (
-            <></>
-          )} */}
       </View>
-      {/* </KeyboardAvoidingView> */}
-    </View>
-    // </ImageBackground>
+    </ScrollView>
   );
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
   illustration: {flex: 1, alignSelf: 'flex-end'},
   main: {
-    flex: 2,
-    justifyContent: 'space-evenly',
+    paddingVertical: '8%',
     marginHorizontal: '8%',
-    marginVertical: '2%',
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    flexGrow: 1,
   },
   nav: {
     flex: 1,

package/template/src/pages/VideoCall.tsx

@@ -12,8 +12,8 @@
 import React, {useState, useContext, useEffect} from 'react';
 import {View, StyleSheet, Text, Platform} from 'react-native';
 
-import RtcConfigure from '../../agora-rn-uikit/src/RTCConfigure';
-import {PropsProvider} from '../../agora-rn-uikit/src/PropsContext';
+import {RtcConfigure} from '../../agora-rn-uikit';
+import {PropsProvider} from '../../agora-rn-uikit';
 import Navbar from '../components/Navbar';
 import Precall from '../components/Precall';
 import ParticipantsView from '../components/ParticipantsView';
@@ -30,25 +30,31 @@ import {gql, useQuery} from '@apollo/client';
 // import Watermark from '../subComponents/Watermark';
 import StorageContext from '../components/StorageContext';
 import Logo from '../subComponents/Logo';
-import ChatContext from '../components/ChatContext';
+import hasBrandLogo from '../utils/hasBrandLogo';
+import ChatContext, {
+  messageActionType,
+  messageChannelType,
+} from '../components/ChatContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import Layout from '../subComponents/LayoutEnum';
 import Toast from '../../react-native-toast-message';
+import {NetworkQualityProvider} from '../components/NetworkQualityContext';
 
 const useChatNotification = (
   messageStore: string | any[],
   privateMessageStore: string | any[],
   chatDisplayed: boolean,
+  isPrivateChatDisplayed: boolean
 ) => {
   // store the last checked state from the messagestore, to identify unread messages
   const [lastCheckedPublicState, setLastCheckedPublicState] = useState(0);
   const [lastCheckedPrivateState, setLastCheckedPrivateState] = useState({});
   useEffect(() => {
-    if (chatDisplayed) {
+    if (chatDisplayed && !isPrivateChatDisplayed) {
       setLastCheckedPublicState(messageStore.length);
     }
-  }, [messageStore]);
+  }, [messageStore,isPrivateChatDisplayed]);
 
   const setPrivateMessageLastSeen = ({userId, lastSeenCount}) => {
     setLastCheckedPrivateState((prevState) => {
@@ -64,22 +70,30 @@ const useChatNotification = (
   ];
 };
 
-const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
-  const {messageStore, privateMessageStore, userList, localUid} = useContext(ChatContext);
+const NotificationControl = ({children, chatDisplayed, setSidePanel, isPrivateChatDisplayed}) => {
+  const {messageStore, privateMessageStore, userList, localUid, events} =
+    useContext(ChatContext);
   const [
     lastCheckedPublicState,
     setLastCheckedPublicState,
     lastCheckedPrivateState,
     setLastCheckedPrivateState,
     setPrivateMessageLastSeen,
-  ] = useChatNotification(messageStore, privateMessageStore, chatDisplayed);
+  ] = useChatNotification(messageStore, privateMessageStore, chatDisplayed, isPrivateChatDisplayed);
+
   const pendingPublicNotification =
     messageStore.length - lastCheckedPublicState;
   const privateMessageCountMap = Object.keys(privateMessageStore).reduce(
     (acc, curItem) => {
       let individualPrivateMessageCount = privateMessageStore[curItem].reduce(
         (total, item) => {
-          return item.uid === curItem ? total + 1 : total;
+          if (Platform.OS === 'android') {
+            //In template/src/components/RTMConfigure.tsx
+            //on messageReceived event - For android platform we are passing uid as number type. so checking == for android
+            return item.uid == curItem ? total + 1 : total;
+          } else {
+            return item.uid === curItem ? total + 1 : total;
+          }
         },
         0,
       );
@@ -97,36 +111,45 @@ const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
   );
   const pendingPrivateNotification = totalPrivateMessage - totalPrivateLastSeen;
 
-  // const oldMessageStore = useRef<messageStoreInterface[]>([]);
-  // useEffect(() => {
-  //   if (messageStore.length > oldMessageStore.current.length && messageStore[messageStore.length - 1].uid !== localUid) {
-  //     Toast.show({
-  //       text1: messageStore[messageStore.length - 1]?.msg.length > 50 ? messageStore[messageStore.length - 1]?.msg.slice(1, 50) + '...' : messageStore[messageStore.length - 1]?.msg.slice(1),
-  //       text2: userList[messageStore[messageStore.length - 1]?.uid] ? userList[messageStore[messageStore.length - 1]?.uid].name : 'User',
-  //       visibilityTime: 1000,
-  //       onPress: () => setSidePanel(SidePanelType.Chat),
-  //     });
-  //     oldMessageStore.current = messageStore;
-  //   }
-  // }, [messageStore, userList]);
-
-  useEffect(() => {
-    if (
-      messageStore.length !== 0 &&
-      messageStore[messageStore.length - 1]?.uid !== localUid
-    ) {
-      Toast.show({
-        text1: messageStore[messageStore.length - 1]?.msg.length > 50 ? messageStore[messageStore.length - 1]?.msg.slice(1, 50) + '...' : messageStore[messageStore.length - 1]?.msg.slice(1),
-        text2: userList[messageStore[messageStore.length - 1]?.uid] ? 'From: ' + userList[messageStore[messageStore.length - 1]?.uid].name : '',
-        visibilityTime: 1000,
-        onPress: () => {
-          setSidePanel(SidePanelType.Chat);
-          setLastCheckedPublicState(messageStore.length);
-        },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messageStore]);
+  React.useEffect(() => {
+    const showMessageNotification = (data: any) => {
+      if (data.type === messageActionType.Normal) {
+        const {uid, msg} = data;
+        Toast.show({
+          type: 'success',
+          text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
+          text2: userList[uid]?.name ? 'From: ' + userList[uid]?.name : '',
+          visibilityTime: 1000,
+          onPress: () => {
+            setSidePanel(SidePanelType.Chat);
+            setLastCheckedPublicState(messageStore.length);
+          },
+        });
+      }
+    };
+    events.on(
+      messageChannelType.Public,
+      'onPublicMessageReceived',
+      (data: any, error: any) => {
+        if (!data) return;
+        showMessageNotification(data);
+      },
+    );
+    events.on(
+      messageChannelType.Private,
+      'onPrivateMessageReceived',
+      (data: any, error: any) => {
+        if (!data) return;
+        if (data.uid === localUid) return;
+        showMessageNotification(data);
+      },
+    );
+    return () => {
+      // Cleanup the listeners
+      events.off(messageChannelType.Public, 'onPublicMessageReceived');
+      events.off(messageChannelType.Private, 'onPrivateMessageReceived');
+    };
+  }, [userList, messageStore]);
 
   return children({
     pendingPublicNotification,
@@ -212,8 +235,10 @@ enum RnEncryptionEnum {
 }
 
 const VideoCall: React.FC = () => {
-  const {store} = useContext(StorageContext);
-  const [username, setUsername] = useState('Getting name...');
+  const {store, setStore} = useContext(StorageContext);
+  const getInitialUsername = () =>
+    store?.displayName ? store.displayName : '';
+  const [username, setUsername] = useState(getInitialUsername);
   const [participantsView, setParticipantsView] = useState(false);
   const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
   const [layout, setLayout] = useState(Layout.Grid);
@@ -221,11 +246,12 @@ const VideoCall: React.FC = () => {
   const [chatDisplayed, setChatDisplayed] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
+  const [isPrivateChatDisplayed, setPrivateChatDisplayed] = useState(false)
   const {phrase} = useParams();
   const [errorMessage, setErrorMessage] = useState(null);
-  let isHost = true; //change to false by default after testing
-  let title = null;
-  let rtcProps = {
+  const [isHost, setIsHost] = React.useState(false);
+  const [title, setTitle] = React.useState('');
+  const [rtcProps, setRtcProps] = React.useState({
     appId: $config.APP_ID,
     channel: null,
     uid: null,
@@ -238,60 +264,59 @@ const VideoCall: React.FC = () => {
     encryption: $config.ENCRYPTION_ENABLED
       ? {key: null, mode: RnEncryptionEnum.AES128XTS, screenKey: null}
       : false,
-  };
-  let data, loading, error;
+  });
 
-  ({data, loading, error} = useQuery(
+  const {data, loading, error} = useQuery(
     store.token === null
       ? JOIN_CHANNEL_PHRASE
       : JOIN_CHANNEL_PHRASE_AND_GET_USER,
     {
       variables: {passphrase: phrase},
     },
-  ));
+  );
 
-  if (error) {
-    console.log('error', error);
-    // console.log('error data', data);
-    if (!errorMessage) {
-      setErrorMessage(error);
+  React.useEffect(() => {
+    if (error) {
+      console.log('error', error);
+      // console.log('error data', data);
+      if (!errorMessage) {
+        setErrorMessage(error);
+      }
+      return;
     }
-  }
 
-  if (!loading && data) {
-    console.log('token:', rtcProps.token);
-    console.log('error', data.error);
-    rtcProps = {
-      appId: $config.APP_ID,
-      channel: data.joinChannel.channel,
-      uid: data.joinChannel.mainUser.uid,
-      token: data.joinChannel.mainUser.rtc,
-      rtm: data.joinChannel.mainUser.rtm,
-      dual: true,
-      profile: $config.PROFILE,
-      encryption: $config.ENCRYPTION_ENABLED
-        ? {
-            key: data.joinChannel.secret,
-            mode: RnEncryptionEnum.AES128XTS,
-            screenKey: data.joinChannel.secret,
-          }
-        : false,
-      screenShareUid: data.joinChannel.screenShare.uid,
-      screenShareToken: data.joinChannel.screenShare.rtc,
-    };
-    isHost = data.joinChannel.isHost;
-    title = data.joinChannel.title;
-    console.log('query done: ', data, queryComplete);
-    if (username === 'Getting name...') {
+    if (!loading && data) {
+      console.log('token:', rtcProps.token);
+      console.log('error', data.error);
+      setRtcProps({
+        appId: $config.APP_ID,
+        channel: data.joinChannel.channel,
+        uid: data.joinChannel.mainUser.uid,
+        token: data.joinChannel.mainUser.rtc,
+        rtm: data.joinChannel.mainUser.rtm,
+        dual: true,
+        profile: $config.PROFILE,
+        encryption: $config.ENCRYPTION_ENABLED
+          ? {
+              key: data.joinChannel.secret,
+              mode: RnEncryptionEnum.AES128XTS,
+              screenKey: data.joinChannel.secret,
+            }
+          : false,
+        screenShareUid: data.joinChannel.screenShare.uid,
+        screenShareToken: data.joinChannel.screenShare.rtc,
+      });
+      setIsHost(data.joinChannel.isHost);
+      setTitle(data.joinChannel.title);
+      console.log('query done: ', data, queryComplete);
+      // 1. Store the display name from API
       if (data.getUser) {
         setUsername(data.getUser.name);
-      } else {
-        setUsername('');
       }
+      console.log('token:', rtcProps.token);
+      queryComplete ? {} : setQueryComplete(true);
     }
-    console.log('token:', rtcProps.token);
-    queryComplete ? {} : setQueryComplete(true);
-  }
+  }, [error, loading, data]);
 
   const history = useHistory();
   const callbacks = {
@@ -300,6 +325,14 @@ const VideoCall: React.FC = () => {
         history.push('/');
       }, 0),
   };
+
+  React.useEffect(() => {
+    // Update the username in localstorage when username changes
+    if (setStore) {
+      setStore({token: store?.token || null, displayName: username});
+    }
+  }, [username]);
+
   // throw new Error("My first Sentry error!");
   return (
     <>
@@ -307,11 +340,14 @@ const VideoCall: React.FC = () => {
         <>
           <PropsProvider
             value={{
-              rtcProps,
+              rtcProps: {
+                ...rtcProps,
+                callActive,
+              },
               callbacks,
               styleProps,
             }}>
-            <RtcConfigure callActive={callActive}>
+            <RtcConfigure>
               <DeviceConfigure>
                 <RtmConfigure
                   setRecordingActive={setRecordingActive}
@@ -321,7 +357,9 @@ const VideoCall: React.FC = () => {
                     <View style={style.full}>
                       <NotificationControl
                         setSidePanel={setSidePanel}
-                        chatDisplayed={sidePanel === SidePanelType.Chat}>
+                        chatDisplayed={sidePanel === SidePanelType.Chat}
+                        isPrivateChatDisplayed={isPrivateChatDisplayed}
+                        >
                         {({
                           pendingPublicNotification,
                           pendingPrivateNotification,
@@ -350,56 +388,63 @@ const VideoCall: React.FC = () => {
                                 setLastCheckedPublicState
                               }
                             />
-                            <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
-                              {layout === Layout.Pinned ? (
-                                <PinnedVideo />
-                              ) : (
-                                <GridVideo setLayout={setLayout} />
-                              )}
-                              {sidePanel === SidePanelType.Participants ? (
-                                <ParticipantsView
-                                  isHost={isHost}
-                                  // setParticipantsView={setParticipantsView}
-                                  setSidePanel={setSidePanel}
-                                />
-                              ) : (
-                                <></>
-                              )}
-                              {sidePanel === SidePanelType.Chat ? (
-                                $config.CHAT ? (
-                                  <Chat
-                                    privateMessageCountMap={
-                                      privateMessageCountMap
-                                    }
-                                    pendingPublicNotification={
-                                      pendingPublicNotification
-                                    }
-                                    pendingPrivateNotification={
-                                      pendingPrivateNotification
-                                    }
-                                    setPrivateMessageLastSeen={
-                                      setPrivateMessageLastSeen
-                                    }
-                                    lastCheckedPrivateState={
-                                      lastCheckedPrivateState
-                                    }
+                            <NetworkQualityProvider>
+                              <View
+                                style={[
+                                  style.videoView,
+                                  {backgroundColor: '#ffffff00'},
+                                ]}>
+                                {layout === Layout.Pinned ? (
+                                  <PinnedVideo />
+                                ) : (
+                                  <GridVideo setLayout={setLayout} />
+                                )}
+                                {sidePanel === SidePanelType.Participants ? (
+                                  <ParticipantsView
+                                    isHost={isHost}
+                                    // setParticipantsView={setParticipantsView}
+                                    setSidePanel={setSidePanel}
+                                  />
+                                ) : (
+                                  <></>
+                                )}
+                                {sidePanel === SidePanelType.Chat ? (
+                                  $config.CHAT ? (
+                                    <Chat
+                                      setPrivateChatDisplayed={setPrivateChatDisplayed}
+                                      privateMessageCountMap={
+                                        privateMessageCountMap
+                                      }
+                                      pendingPublicNotification={
+                                        pendingPublicNotification
+                                      }
+                                      pendingPrivateNotification={
+                                        pendingPrivateNotification
+                                      }
+                                      setPrivateMessageLastSeen={
+                                        setPrivateMessageLastSeen
+                                      }
+                                      lastCheckedPrivateState={
+                                        lastCheckedPrivateState
+                                      }
+                                    />
+                                  ) : (
+                                    <></>
+                                  )
+                                ) : (
+                                  <></>
+                                )}
+                                {sidePanel === SidePanelType.Settings ? (
+                                  <SettingsView
+                                    isHost={isHost}
+                                    // setParticipantsView={setParticipantsView}
+                                    setSidePanel={setSidePanel}
                                   />
                                 ) : (
                                   <></>
-                                )
-                              ) : (
-                                <></>
-                              )}
-                              {sidePanel === SidePanelType.Settings ? (
-                                <SettingsView
-                                  isHost={isHost}
-                                  // setParticipantsView={setParticipantsView}
-                                  setSidePanel={setSidePanel}
-                                />
-                              ) : (
-                                <></>
-                              )}
-                            </View>
+                                )}
+                              </View>
+                            </NetworkQualityProvider>
                             {Platform.OS !== 'web' &&
                             sidePanel === SidePanelType.Chat ? (
                               <></>
@@ -435,6 +480,7 @@ const VideoCall: React.FC = () => {
                       setUsername={setUsername}
                       setCallActive={setCallActive}
                       queryComplete={queryComplete}
+                      title={title}
                     />
                   ) : (
                     <></>
@@ -446,9 +492,7 @@ const VideoCall: React.FC = () => {
         </>
       ) : (
         <View style={style.loader}>
-          <View style={style.loaderLogo}>
-            <Logo />
-          </View>
+          <View style={style.loaderLogo}>{hasBrandLogo && <Logo />}</View>
           <Text style={style.loaderText}>Starting Call. Just a second.</Text>
         </View>
       )}

package/template/src/subComponents/ChatContainer.tsx

@@ -18,10 +18,13 @@ import {
   StyleSheet,
   Image,
   Platform,
+  useWindowDimensions
 } from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
 import ChatContext from '../components/ChatContext';
-import icons from '../assets/icons';
+import {BtnTemplate} from '../../agora-rn-uikit';
+import TextWithTooltip from './TextWithTooltip';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -29,33 +32,34 @@ import icons from '../assets/icons';
  * and maps it to a ChatBubble
  */
 const ChatContainer = (props: any) => {
-  const {
-    selectedUser,
-    privateActive,
-    setPrivateActive,
-    selectedUsername,
-  } = props;
+  const {height, width} = useWindowDimensions();
+  const {selectedUser, privateActive, setPrivateActive, selectedUsername} =
+    props;
   const {messageStore, localUid, privateMessageStore} = useContext(ChatContext);
   const scrollViewRef = useRef<ScrollView>(null);
   return (
     <View style={style.containerView}>
       {privateActive ? (
         <View style={style.row}>
-          <TouchableOpacity
-            style={style.backButton}
-            onPress={() => setPrivateActive(false)}>
-            <Image
-              resizeMode={'contain'}
-              style={style.backIcon}
-              source={{uri: icons.backBtn}}
+          <View style={style.backButton}>
+            <BtnTemplate
+              style={[style.backIcon]}
+              onPress={() => setPrivateActive(false)}
+              name={'backBtn'}
             />
-          </TouchableOpacity>
-          <Text style={style.name}>{selectedUsername}</Text>
+          </View>
+          <View style={{flex:1}}>
+            <TextWithTooltip style={[style.name, {flexShrink: 1,fontSize: RFValue(16, height > width ? height : width)}]} value={selectedUsername} />
+          </View>
         </View>
       ) : (
         <></>
       )}
-      <ScrollView ref={scrollViewRef} onContentSizeChange={()=>{scrollViewRef.current?.scrollToEnd({ animated: true })}}>
+      <ScrollView
+        ref={scrollViewRef}
+        onContentSizeChange={() => {
+          scrollViewRef.current?.scrollToEnd({animated: true});
+        }}>
         {!privateActive ? (
           messageStore.map((message: any) => {
             return (
@@ -90,26 +94,34 @@ const ChatContainer = (props: any) => {
 
 const style = StyleSheet.create({
   containerView: {flex: 8},
-  row: {flexDirection: 'row', marginTop: 2},
-  backButton: {
+  row: {
+    flexDirection: 'row',
+    marginTop: 2,
+    alignItems: 'center',
     paddingVertical: 10,
-    marginLeft: 10,
+    ...Platform.select({
+      android:{
+        height: 40
+      },
+      ios:{
+        height: 40
+      }
+    })
+  },
+  backButton: {
+    marginHorizontal: 10,
     justifyContent: 'center',
-    alignSelf: 'center',
+    alignSelf: 'flex-end',
   },
   name: {
-    fontSize: 18,
     fontWeight: Platform.OS === 'web' ? '500' : '700',
-    marginLeft: 10,
     color: $config.PRIMARY_FONT_COLOR,
-    alignSelf: 'center',
+    textAlign: 'left',
+    marginRight: 10
   },
   backIcon: {
     width: 20,
-    height: 12,
-    alignSelf: 'center',
-    justifyContent: 'center',
-    tintColor: $config.PRIMARY_FONT_COLOR,
+    height: 20,
   },
 });
 export default ChatContainer;