agora-appbuilder-core 1.0.8 → 2.0.1

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,

package/template/src/components/Navbar.tsx

@@ -19,8 +19,8 @@ import {
   StyleSheet,
   Dimensions,
 } from 'react-native';
-// import {MinUidConsumer} from '../../agora-rn-uikit/src/MinUidContext';
-// import PropsContext from '../../agora-rn-uikit/src/PropsContext';
+// import {MinUidConsumer} from '../../agora-rn-uikit';
+// import {PropsContext} from '../../agora-rn-uikit';
 import icons from '../assets/icons';
 import Settings from './Settings';
 import ColorContext from './ColorContext';
@@ -30,9 +30,8 @@ import {navHolder} from '../../theme.json';
 import Layout from '../subComponents/LayoutEnum';
 import ChatContext from '../components/ChatContext';
 import mobileAndTabletCheck from '../utils/mobileWebTest';
-
-const {participantIcon, gridLayoutIcon, pinnedLayoutIcon, recordingIcon} =
-  icons;
+import {BtnTemplate} from '../../agora-rn-uikit';
+import {ImageIcon} from '../../agora-rn-uikit';
 
 const Navbar = (props: any) => {
   const {primaryColor} = useContext(ColorContext);
@@ -64,34 +63,68 @@ const Navbar = (props: any) => {
   return (
     <View
       onLayout={onLayout}
-      style={[Platform.OS === 'web' ? style.navHolder : style.navHolderNative, {backgroundColor: $config.SECONDARY_FONT_COLOR + 80}, Platform.OS === 'web' ? {justifyContent: mobileAndTabletCheck() ? 'space-between' : 'flex-end'} : {}]}>
+      style={[
+        Platform.OS === 'web' ? style.navHolder : style.navHolderNative,
+        {backgroundColor: $config.SECONDARY_FONT_COLOR + 80},
+        Platform.OS === 'web'
+          ? {
+              justifyContent: mobileAndTabletCheck()
+                ? 'space-between'
+                : 'flex-end',
+            }
+          : {},
+      ]}>
       {recordingActive && !mobileAndTabletCheck() ? (
-        <View style={[style.recordingView, {backgroundColor: $config.SECONDARY_FONT_COLOR}]}>
-          <Image source={{uri: icons.recordingActiveIcon}} style={{
-            width: 20,
-            height: 20,
-            margin: 1,
-            resizeMode: 'contain', tintColor: '#FD0845'}} />
+        <View
+          style={[
+            style.recordingView,
+            {backgroundColor: $config.SECONDARY_FONT_COLOR},
+          ]}>
+          <ImageIcon
+            name={'recordingActiveIcon'}
+            style={{
+              width: 20,
+              height: 20,
+              margin: 1,
+            }}
+            color='#FD0845'
+          />
           <Text
-              style={{
-                fontSize: Platform.OS === 'web' ? 16 : 12,
-                color: '#FD0845',
-                fontWeight: '400',
-                alignSelf: 'center',
-                textAlign: 'center',
-                flex: 1,
-              }}>
-              Recording
-            </Text>
+            style={{
+              fontSize: Platform.OS === 'web' ? 16 : 12,
+              color: '#FD0845',
+              fontWeight: '400',
+              alignSelf: 'center',
+              textAlign: 'center',
+              flex: 1,
+            }}>
+            Recording
+          </Text>
         </View>
       ) : (
         <></>
       )}
-      <View style={[style.roomNameContainer, Platform.OS === 'web' && !mobileAndTabletCheck() ? {transform: [{translateX: '50%'}]} : {}]}>
+      <View
+        style={[
+          style.roomNameContainer,
+          Platform.OS === 'web' && !mobileAndTabletCheck()
+            ? {transform: [{translateX: '50%'}]}
+            : {},
+        ]}>
         {Platform.OS === 'web' ? (
           <View
-            style={{flexDirection: 'row', justifyContent: 'flex-start', paddingLeft: 5}}>
-            <Text style={style.roomNameText}>{mobileAndTabletCheck() ? title.length > 13 ? title.slice(0,13) + '..' : title : title}</Text>
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'flex-start',
+              paddingLeft: 5,
+            }}>
+            <Text style={style.roomNameText}>
+              {mobileAndTabletCheck()
+                ? title.length > 13
+                  ? title.slice(0, 13) + '..'
+                  : title
+                : title}
+            </Text>
             <View
               style={{
                 backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
@@ -100,12 +133,13 @@ const Navbar = (props: any) => {
                 marginHorizontal: 10,
               }}
             />
-            <CopyJoinInfo />
+            <View style={{width: 30}}>
+              <CopyJoinInfo />
+            </View>
           </View>
         ) : (
           <Text style={style.roomNameText}>{title}</Text>
-        )}  
-        
+        )}
       </View>
       <View
         style={{
@@ -125,37 +159,37 @@ const Navbar = (props: any) => {
               Platform.OS === 'web'
                 ? $config.SECONDARY_FONT_COLOR
                 : $config.SECONDARY_FONT_COLOR + '00',
-            padding: 4,
+            paddingVertical: 4,
+            paddingHorizontal: mobileAndTabletCheck() ? 0 : 4,
             minHeight: 35,
             // height: 40,
             // backgroundColor: '#f0f',
             // paddingHorizontal: 16,
             borderRadius: 10,
-            minWidth: Platform.OS === 'web' && isDesktop ? 300 : mobileAndTabletCheck() ? 150 : 200,
+            minWidth:
+              Platform.OS === 'web' && isDesktop
+                ? 300
+                : mobileAndTabletCheck()
+                ? 160
+                : 200,
             // borderTopLeftRadius: 10,
             // borderBottomLeftRadius: 10,
             justifyContent: 'space-evenly',
           }}>
           <View style={{width: '20%', height: '100%'}}>
-            <TouchableOpacity
+            <BtnTemplate
               onPress={() => {
                 sidePanel === SidePanelType.Participants
                   ? setSidePanel(SidePanelType.None)
                   : setSidePanel(SidePanelType.Participants);
               }}
-              style={style.btnHolder}>
-              <Image
-                source={{uri: participantIcon}}
-                style={[style.participantBtnIcon, {tintColor: primaryColor}]}
-              />
-              {/* <MinUidConsumer>
-                {(minUsers) => (
-                  <Text style={[style.participantText, {color: primaryColor}]}>
-                    {minUsers.length + 1}
-                  </Text>
-                )}
-              </MinUidConsumer> */}
-            </TouchableOpacity>
+              style={style.btnHolder}
+              name={
+                sidePanel === SidePanelType.Participants
+                  ? 'participantFilledIcon'
+                  : 'participantIcon'
+              }
+            />
           </View>
           {$config.CHAT ? (
             <>
@@ -173,44 +207,34 @@ const Navbar = (props: any) => {
               ) : (
                 <></>
               )}
-              <View style={{width: '25%', height: '120%'}}>
-                <View
-                  style={{alignSelf: 'center', width: '100%', height: '110%'}}>
-                  <TouchableOpacity
-                    style={style.btnHolder}
-                    onPress={() => {
-                      setLastCheckedPublicState(messageStore.length);
-                      sidePanel === SidePanelType.Chat
-                        ? setSidePanel(SidePanelType.None)
-                        : setSidePanel(SidePanelType.Chat);
-                    }}>
-                    {sidePanel !== SidePanelType.Chat &&
-                    pendingMessageLength !== 0 ? (
-                      <View style={style.chatNotification}>
-                        <Text style={{color: $config.SECONDARY_FONT_COLOR}}>
-                          {pendingMessageLength}
-                        </Text>
-                      </View>
-                    ) : (
-                      <></>
-                    )}
-                    <Image
-                      source={{
-                        uri: sidePanel !== SidePanelType.Chat &&
-                          pendingMessageLength !== 0 ? icons.chatIconFilled : icons.chatIcon
+              <View style={{width: '20%', height: '100%', position: 'relative'}}>
+                    <BtnTemplate
+                      style={style.btnHolder}
+                      onPress={() => {
+                        setLastCheckedPublicState(messageStore.length);
+                        sidePanel === SidePanelType.Chat
+                          ? setSidePanel(SidePanelType.None)
+                          : setSidePanel(SidePanelType.Chat);
                       }}
-                      resizeMode={'contain'}
-                      style={[
-                        {
-                          width: '100%',
-                          height: '100%',
-                          tintColor: $config.PRIMARY_COLOR,
-                        },
-                      ]}
+                      name={
+                        sidePanel === SidePanelType.Chat
+                          ? 'chatIconFilled'
+                          : 'chatIcon'
+                      }
                     />
-                  </TouchableOpacity>
-                </View>
-              </View>
+                    <View style={{position: 'absolute', top: Platform.OS === 'web' ? 1 : -15, left: ( Platform.OS === 'web' && isDesktop) ? 10 : 1 }}>
+                      {sidePanel !== SidePanelType.Chat &&
+                      pendingMessageLength !== 0 ? (
+                        <View style={style.chatNotification}>
+                          <Text style={{color: $config.SECONDARY_FONT_COLOR}}>
+                            {pendingMessageLength}
+                          </Text>
+                        </View>
+                      ) : (
+                        <></>
+                      )}
+                    </View>
+                  </View>
             </>
           ) : (
             <></>
@@ -229,40 +253,34 @@ const Navbar = (props: any) => {
           ) : (
             <></>
           )}
-          <View style={{width: '18%', height: '105%'}}>
-            <View style={{alignSelf: 'center', width: '100%', height: '105%'}}>
-              <TouchableOpacity
+          <View style={{width: '20%', height: '100%'}}>
+              <BtnTemplate
                 style={style.btnHolder}
                 onPress={() => {
                   setLayout((l: Layout) =>
                     l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
                   );
-                }}>
-                <Image
-                  // source={{uri: layout ? gridLayoutIcon : pinnedLayoutIcon}}
-                  source={{uri: gridLayoutIcon}}
-                  resizeMode={'contain'}
+                }}
+                name={layout ? 'pinnedLayoutIcon' : 'gridLayoutIcon'}
+              />
+          </View>
+          {/** Show setting icon only in non native apps
+           * show in web/electron/mobile web
+           * hide in android/ios  */}
+          {Platform.OS !== 'android' && Platform.OS !== 'ios' ? (
+            <>
+              {Platform.OS === 'web' && isDesktop && (
+                <View
                   style={{
-                    width: '100%',
+                    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
+                    width: 1,
                     height: '100%',
-                    tintColor: $config.PRIMARY_COLOR,
+                    marginHorizontal: 10,
+                    alignSelf: 'center',
+                    opacity: 0.8,
                   }}
                 />
-              </TouchableOpacity>
-            </View>
-          </View>
-          {Platform.OS === 'web' && isDesktop ? (
-            <>
-              <View
-                style={{
-                  backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-                  width: 1,
-                  height: '100%',
-                  marginHorizontal: 10,
-                  alignSelf: 'center',
-                  opacity: 0.8,
-                }}
-              />
+              )}
               <View style={{width: '20%', height: '100%'}}>
                 <Settings
                   sidePanel={sidePanel}
@@ -316,7 +334,12 @@ const style = StyleSheet.create({
     margin: 1,
     resizeMode: 'contain',
   },
-  btnHolder: {padding: mobileAndTabletCheck() ? 2 : 5, width: '100%', height: '100%'},
+  btnHolder: {   
+    marginHorizontal: mobileAndTabletCheck() ? 2 : 0, 
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
   // participantBtnHolder: {
   //   backgroundColor: '#fff',
   //   // flex: 0.5,
@@ -340,13 +363,13 @@ const style = StyleSheet.create({
   //   alignSelf: 'center',
   //   flex: 1,
   // },
-  participantBtnIcon: {
-    height: '100%',
-    width: '100%',
-    // margin: 1,
-    tintColor: $config.PRIMARY_COLOR,
-    resizeMode: 'contain',
-  },
+  // participantBtnIcon: {
+  //   height: '100%',
+  //   width: '100%',
+  //   // margin: 1,
+  //   tintColor: $config.PRIMARY_COLOR,
+  //   resizeMode: 'contain',
+  // },
   // participantText: {
   //   fontSize: Platform.OS === 'web' ? 20 : 18,
   //   fontWeight: '400',