agora-appbuilder-core 2.0.0 → 2.0.1

package/template/src/components/Chat.tsx

@@ -18,17 +18,21 @@ import {
   TouchableOpacity,
   ScrollView,
   Dimensions,
+  useWindowDimensions
 } from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
 import ChatContainer from '../subComponents/ChatContainer';
 import ChatInput from '../subComponents/ChatInput';
-import {MinUidConsumer} from '../../agora-rn-uikit/src/MinUidContext';
-import {MaxUidConsumer} from '../../agora-rn-uikit/src/MaxUidContext';
+import {MinUidConsumer} from '../../agora-rn-uikit';
+import {MaxUidConsumer} from '../../agora-rn-uikit';
 import icons from '../assets/icons';
 import ColorContext from './ColorContext';
 import chatContext from './ChatContext';
 import {UserType} from './RTMConfigure';
+import TextWithTooltip from '../subComponents/TextWithTooltip';
 
 const Chat = (props: any) => {
+  const {height, width} = useWindowDimensions();
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
@@ -44,11 +48,16 @@ const Chat = (props: any) => {
     lastCheckedPrivateState,
     privateMessageCountMap,
     setPrivateMessageLastSeen,
+    setPrivateChatDisplayed
   } = props;
   const {primaryColor} = useContext(ColorContext);
   const [groupActive, setGroupActive] = useState(true);
   const [privateActive, setPrivateActive] = useState(false);
   const [selectedUser, setSelectedUser] = useState({uid: null});
+  //initally private state should be false
+  useEffect(()=>{
+    setPrivateChatDisplayed(false)
+  },[])
   useEffect(() => {
     if (privateActive) {
       setPrivateMessageLastSeen({
@@ -61,9 +70,11 @@ const Chat = (props: any) => {
   const selectGroup = () => {
     setPrivateActive(false);
     setGroupActive(true);
+    setPrivateChatDisplayed(false)
   };
   const selectPrivate = () => {
     setGroupActive(false);
+    setPrivateChatDisplayed(true)
   };
   const selectUser = (user: any) => {
     setSelectedUser(user);
@@ -122,7 +133,9 @@ const Chat = (props: any) => {
           }>
           {pendingPrivateNotification !== 0 ? (
             <View style={style.chatNotification}>
-              {pendingPrivateNotification}
+              <Text>
+                {pendingPrivateNotification}
+              </Text>
             </View>
           ) : null}
           <Text style={!groupActive ? style.groupTextActive : style.groupText}>
@@ -205,17 +218,22 @@ const Chat = (props: any) => {
                             {(privateMessageCountMap[user.uid] || 0) -
                               (lastCheckedPrivateState[user.uid] || 0) !==
                             0 ? (
-                              <View style={style.chatNotification}>
-                                {(privateMessageCountMap[user.uid] || 0) -
-                                  (lastCheckedPrivateState[user.uid] || 0)}
+                              <View style={style.chatNotificationPrivate}>
+                                <Text>{(privateMessageCountMap[user.uid] || 0) -
+                                  (lastCheckedPrivateState[user.uid] || 0)}</Text>
                               </View>
                             ) : null}
-                            <Text style={style.participantText}>
-                              {userList[user.uid]
-                                ? userList[user.uid].name + ' '
-                                : 'User '}
-                            </Text>
-                            <Text style={{color: $config.PRIMARY_FONT_COLOR}}>{`>`}</Text>
+                            <View style={{flex:1}}>
+                              <TextWithTooltip touchable={false}  style={[style.participantText,{
+                                fontSize: RFValue(16, height > width ? height : width)
+                              }]} value={userList[user.uid]
+                                  ? userList[user.uid].name + ' '
+                                  : 'User '} 
+                              />
+                            </View>
+                            <View>
+                              <Text style={{color: $config.PRIMARY_FONT_COLOR, fontSize: 18}}>{`>`}</Text>
+                            </View>                            
                           </TouchableOpacity>
                         );
                       }
@@ -357,25 +375,22 @@ const style = StyleSheet.create({
   },
   participantContainer: {
     flexDirection: 'row',
-    // flex: 1,
+    flex: 1,
     height: 20,
     marginTop: 10,
     backgroundColor: $config.SECONDARY_FONT_COLOR,
-    // height: '15%',
-    width: '90%',
-    alignSelf: 'center',
-    justifyContent: 'center',
-    alignItems: 'center',
+    overflow: 'hidden',
+    marginHorizontal: 10,
   },
   participantText: {
     flex: 1,
-    fontSize: 18,
     fontWeight: Platform.OS === 'web' ? '500' : '700',
     flexDirection: 'row',
     color: $config.PRIMARY_FONT_COLOR,
     lineHeight: 20,
-    paddingLeft: 10,
-    alignSelf: 'center',
+    textAlign:'left',
+    flexShrink: 1 ,
+    marginRight: 30
   },
   backButton: {
     // marginLeft: 5,
@@ -404,6 +419,20 @@ const style = StyleSheet.create({
     left: 25,
     top: -5,
   },
+  chatNotificationPrivate:{
+    width: 20,
+    height: 20,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: $config.PRIMARY_COLOR,
+    color: $config.SECONDARY_FONT_COLOR,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    borderRadius: 10,
+    position: 'absolute',
+    right: 20,
+    top: 0,
+  }
 });
 
 export default Chat;

package/template/src/components/ChatContext.ts

@@ -11,6 +11,7 @@
 */
 import RtmEngine from 'agora-react-native-rtm';
 import {createContext} from 'react';
+import {rtmEventsInterface} from './RTMEvents';
 
 export interface channelMessage {
   isLocal: boolean;
@@ -25,6 +26,25 @@ export interface messageStoreInterface {
   msg: string;
 }
 
+export interface messageEventInterface extends messageStoreInterface {
+  type: messageActionType;
+  source: messageSourceType;
+}
+
+export enum messageSourceType {
+  Core = 'core',
+}
+
+export enum messageChannelType {
+  Private = 'private',
+  Public = 'public',
+}
+
+export enum messageActionType {
+  Control = '0',
+  Normal = '1',
+}
+
 interface chatContext {
   messageStore: messageStoreInterface | any;
   privateMessageStore: any;
@@ -35,6 +55,7 @@ interface chatContext {
   engine: RtmEngine;
   localUid: string;
   userList: any;
+  events: rtmEventsInterface;
   // peersRTM: Array<string>;
 }
 
@@ -48,6 +69,6 @@ export enum controlMessageEnum {
   cloudRecordingUnactive = '7',
 }
 
-const ChatContext = createContext((null as unknown) as chatContext);
+const ChatContext = createContext(null as unknown as chatContext);
 
 export default ChatContext;

package/template/src/components/Controls.native.tsx

@@ -18,13 +18,13 @@ import {
   StyleSheet,
   Text,
 } from 'react-native';
-import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
+import {LocalUserContext} from '../../agora-rn-uikit';
 import {
   LocalAudioMute,
   LocalVideoMute,
   SwitchCamera,
   Endcall,
-} from '../../agora-rn-uikit/Components';
+} from '../../agora-rn-uikit';
 import Recording from '../subComponents/Recording';
 import icons from '../assets/icons';
 import ColorContext from './ColorContext';

package/template/src/components/Controls.tsx

@@ -17,12 +17,12 @@ import {
   StyleSheet,
   Text,
 } from 'react-native';
-import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
+import {LocalUserContext} from '../../agora-rn-uikit';
 import {
   LocalAudioMute,
   LocalVideoMute,
   Endcall,
-} from '../../agora-rn-uikit/Components';
+} from '../../agora-rn-uikit';
 import Recording from '../subComponents/Recording';
 import SwitchCamera from '../subComponents/SwitchCamera';
 // import icons from '../assets/icons';

package/template/src/components/DeviceConfigure.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {useState, useContext, useEffect} from 'react';
-import RtcContext from '../../agora-rn-uikit/src/RtcContext';
+import {RtcContext} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 
 const DeviceConfigure: React.FC = (props: any) => {

package/template/src/components/GridVideo.tsx

@@ -18,17 +18,23 @@ import {
   Dimensions,
   Image,
   Pressable,
+  useWindowDimensions,
 } from 'react-native';
-import MinUidContext from '../../agora-rn-uikit/src/MinUidContext';
-import MaxUidContext from '../../agora-rn-uikit/src/MaxUidContext';
-import {MaxVideoView} from '../../agora-rn-uikit/Components';
+import {MinUidContext} from '../../agora-rn-uikit';
+import {MaxUidContext} from '../../agora-rn-uikit';
+import {MaxVideoView} from '../../agora-rn-uikit';
+import {RtcContext} from '../../agora-rn-uikit';
 import chatContext from './ChatContext';
 import icons from '../assets/icons';
-import styles from './styles';
 import ColorContext from './ColorContext';
 import FallbackLogo from '../subComponents/FallbackLogo';
 import Layout from '../subComponents/LayoutEnum';
-import RtcContext, {DispatchType} from '../../agora-rn-uikit/src/RtcContext';
+import ScreenShareNotice from '../subComponents/ScreenShareNotice';
+import {RFValue} from 'react-native-responsive-fontsize';
+import networkQualityContext from './NetworkQualityContext';
+import {NetworkQualityPill} from '../subComponents/NetworkQualityPill';
+import {ImageIcon} from '../../agora-rn-uikit';
+import TextWithTooltip from '../subComponents/TextWithTooltip';
 
 const layout = (len: number, isDesktop: boolean = true) => {
   const rows = Math.round(Math.sqrt(len));
@@ -55,10 +61,12 @@ interface GridVideoProps {
 }
 
 const GridVideo = (props: GridVideoProps) => {
+  const {height, width} = useWindowDimensions();
   const {dispatch} = useContext(RtcContext);
   const max = useContext(MaxUidContext);
   const min = useContext(MinUidContext);
   const {primaryColor} = useContext(ColorContext);
+  const networkQualityStat = useContext(networkQualityContext);
   const {userList, localUid} = useContext(chatContext);
   const users = [...max, ...min];
   let onLayout = (e: any) => {
@@ -70,6 +78,7 @@ const GridVideo = (props: GridVideoProps) => {
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isDesktop = dim[0] > dim[1] + 100;
+
   let {matrix, dims} = useMemo(
     () => layout(users.length, isDesktop),
     [users.length, isDesktop],
@@ -97,11 +106,28 @@ const GridVideo = (props: GridVideoProps) => {
               }}
               key={cidx}>
               <View style={style.gridVideoContainerInner}>
+                <NetworkQualityPill
+                  networkStat={
+                    // When no network quality reported and if user has no stream
+                    // published show "unsupported" else show "loading"
+                    networkQualityStat[users[ridx * dims.c + cidx].uid]
+                      ? networkQualityStat[users[ridx * dims.c + cidx].uid]
+                      : users[ridx * dims.c + cidx].audio ||
+                        users[ridx * dims.c + cidx].video
+                      ? 8
+                      : 7
+                  }
+                  primaryColor={primaryColor}
+                  rootStyle={{top: 5, left: 5}}
+                />
+                <ScreenShareNotice uid={users[ridx * dims.c + cidx].uid} />
                 <MaxVideoView
                   fallback={() => {
                     if (users[ridx * dims.c + cidx].uid === 'local') {
                       return FallbackLogo(userList[localUid]?.name);
-                    } else if (String(users[ridx * dims.c + cidx].uid)[0] === '1') {
+                    } else if (
+                      String(users[ridx * dims.c + cidx].uid)[0] === '1'
+                    ) {
                       return FallbackLogo('PSTN User');
                     } else {
                       return FallbackLogo(
@@ -114,6 +140,7 @@ const GridVideo = (props: GridVideoProps) => {
                 />
                 <View
                   style={{
+                    zIndex: 5,
                     marginTop: -30,
                     backgroundColor: $config.SECONDARY_FONT_COLOR + 'bb',
                     alignSelf: 'flex-end',
@@ -130,7 +157,16 @@ const GridVideo = (props: GridVideoProps) => {
                   }}>
                   {/* <View style={{alignSelf: 'flex-end', flexDirection: 'row'}}> */}
                   <View style={[style.MicBackdrop]}>
-                    <Image
+                    <ImageIcon
+                      name={
+                        users[ridx * dims.c + cidx].audio ? 'mic' : 'micOff'
+                      }
+                      color={
+                        users[ridx * dims.c + cidx].audio ? primaryColor : 'red'
+                      }
+                      style={style.MicIcon}
+                    />
+                    {/* <Image
                       source={{
                         uri: users[ridx * dims.c + cidx].audio
                           ? icons.mic
@@ -145,33 +181,35 @@ const GridVideo = (props: GridVideoProps) => {
                         },
                       ]}
                       resizeMode={'contain'}
-                    />
+                    /> */}
                   </View>
-                  <Text
-                    textBreakStrategy={'simple'}
-                    style={{
-                      color: $config.PRIMARY_FONT_COLOR,
-                      lineHeight: 30,
-                      fontSize: 18,
-                      fontWeight: '600',
-                      // width: '100%',
-                      // alignSelf: 'stretch',
-                      // textAlign: 'center',
-                    }}>
-                    {users[ridx * dims.c + cidx].uid === 'local'
+                  <View style={{flex:1}}>
+                    <TextWithTooltip 
+                      value={users[ridx * dims.c + cidx].uid === 'local'
                       ? userList[localUid]
-                        ? userList[localUid].name.slice(0, 20) + ' '
+                        ? userList[localUid].name + ' '
                         : 'You '
                       : userList[users[ridx * dims.c + cidx].uid]
-                        ? userList[users[ridx * dims.c + cidx].uid].name.slice(
-                          0,
-                          20,
-                        ) + ' '
-                        : users[ridx * dims.c + cidx].uid === 1
-                          ? (userList[localUid]?.name + "'s screen ").slice(0, 20)
-                          : String(users[ridx * dims.c + cidx].uid)[0] === '1' ?
-                            'PSTN User ' : 'User '}
-                  </Text>
+                      ? userList[users[ridx * dims.c + cidx].uid].name + ' '
+                      : users[ridx * dims.c + cidx].uid === 1
+                      ? (userList[localUid]?.name + "'s screen ")
+                      : String(users[ridx * dims.c + cidx].uid)[0] === '1'
+                      ? 'PSTN User '
+                      : 'User '}
+                      style={
+                        {
+                          color: $config.PRIMARY_FONT_COLOR,
+                          lineHeight: 30,
+                          fontSize: RFValue(14, height > width ? height : width),
+                          fontWeight: '700',
+                          flexShrink: 1,
+                          // width: '100%',
+                          // alignSelf: 'stretch',
+                          // textAlign: 'center',
+                        }
+                      }
+                    />
+                  </View>
                   {/* </View> */}
                   {/* {console.log(
                     '!nax',
@@ -209,7 +247,7 @@ const style = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
     // margin: 1,
-    paddingHorizontal: 10,
+    marginHorizontal: 10,
   },
   MicBackdrop: {
     width: 20,