agora-appbuilder-core 2.0.0 → 2.0.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';
@@ -31,25 +31,30 @@ import {gql, useQuery} from '@apollo/client';
 import StorageContext from '../components/StorageContext';
 import Logo from '../subComponents/Logo';
 import hasBrandLogo from '../utils/hasBrandLogo';
-import ChatContext from '../components/ChatContext';
+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) => {
@@ -65,8 +70,8 @@ const useChatNotification = (
   ];
 };
 
-const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
-  const {messageStore, privateMessageStore, userList, localUid} =
+const NotificationControl = ({children, chatDisplayed, setSidePanel, isPrivateChatDisplayed}) => {
+  const {messageStore, privateMessageStore, userList, localUid, events} =
     useContext(ChatContext);
   const [
     lastCheckedPublicState,
@@ -74,14 +79,21 @@ const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
     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,
       );
@@ -99,41 +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,
@@ -230,6 +246,7 @@ 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);
   const [isHost, setIsHost] = React.useState(false);
@@ -323,11 +340,14 @@ const VideoCall: React.FC = () => {
         <>
           <PropsProvider
             value={{
-              rtcProps,
+              rtcProps: {
+                ...rtcProps,
+                callActive,
+              },
               callbacks,
               styleProps,
             }}>
-            <RtcConfigure callActive={callActive}>
+            <RtcConfigure>
               <DeviceConfigure>
                 <RtmConfigure
                   setRecordingActive={setRecordingActive}
@@ -337,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,
@@ -366,60 +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 ? (
                               <></>
@@ -455,6 +480,7 @@ const VideoCall: React.FC = () => {
                       setUsername={setUsername}
                       setCallActive={setCallActive}
                       queryComplete={queryComplete}
+                      title={title}
                     />
                   ) : (
                     <></>

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;

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -17,6 +17,7 @@ import icons from '../assets/icons';
 import platform from '../subComponents/Platform';
 import {useParams} from '../components/Router';
 import Toast from '../../react-native-toast-message';
+import {BtnTemplate} from '../../agora-rn-uikit';
 
 const SHARE = gql`
   query share($passphrase: String!) {
@@ -72,19 +73,14 @@ const ParticipantView = (props: {showText?: boolean}) => {
   };
 
   return (
-    <TouchableOpacity
+    <BtnTemplate
       disabled={!data}
       style={style.backButton}
-      onPress={() => copyToClipboard()}>
-      <Image
-        resizeMode={'contain'}
-        style={!data ? [style.backIcon] : style.backIcon}
-        source={{uri: icons.clipboard}}
-      />
-      {props.showText ?
-        <Text style={{color: $config.PRIMARY_FONT_COLOR}}>Copy Meeting Invite</Text>
-        :<></>}
-    </TouchableOpacity>
+      onPress={() => copyToClipboard()}
+      name={'clipboard'}
+      btnText={props.showText ? 'Copy Meeting Invite' : ''}
+      color={$config.PRIMARY_FONT_COLOR}
+    />
   );
 };
 
@@ -94,13 +90,14 @@ const style = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignSelf: 'center',
+    width: 28,
+    height: 20,
   },
   backIcon: {
     width: 28,
     height: 20,
     alignSelf: 'center',
     justifyContent: 'center',
-    tintColor: $config.PRIMARY_FONT_COLOR,
   },
 });
 

package/template/src/subComponents/LocalAudioMute.tsx

@@ -1,17 +1,17 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 import React, {useContext} from 'react';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
-import {LocalContext} from '../../agora-rn-uikit/src/LocalUserContext';
+import {RtcContext} from '../../agora-rn-uikit';
+import {LocalContext} from '../../agora-rn-uikit';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
@@ -27,7 +27,7 @@ function LocalAudioMute() {
   return (
     <TouchableOpacity
       onPress={() => {
-        (dispatch as DispatchType<'LocalMuteAudio'>)({
+        dispatch({
           type: 'LocalMuteAudio',
           value: [local.audio],
         });

package/template/src/subComponents/LocalVideoMute.tsx

@@ -1,17 +1,17 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 import React, {useContext} from 'react';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
-import {LocalContext} from '../../agora-rn-uikit/src/LocalUserContext';
+import {RtcContext} from '../../agora-rn-uikit';
+import {LocalContext} from '../../agora-rn-uikit';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import icons from '../assets/icons';
 import ColorContext from '../components/ColorContext';
@@ -27,7 +27,7 @@ function LocalVideoMute() {
   return (
     <TouchableOpacity
       onPress={() => {
-        (dispatch as DispatchType<'LocalMuteVideo'>)({
+        dispatch({
           type: 'LocalMuteVideo',
           value: [local.video],
         });