agora-appbuilder-core 1.0.9 → 2.0.2

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',

package/template/src/components/NetworkQualityContext.tsx

@@ -0,0 +1,134 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import React, {createContext, useContext, useState} from 'react';
+import {RtcContext} from '../../agora-rn-uikit';
+import useMount from './useMount';
+import icons from '../assets/icons';
+
+/**
+ * Network Icons container object with color and string mapping to network quality stat [ 0 - 8]
+ * 0 - Unpublished
+ * 1 - Excellent
+ * 2 - Good
+ * 3 - Bad
+ * 4 - Bad
+ * 5 - Very Bad
+ * 6 - Very Bad
+ * 7 - Unsupported
+ * 8 - Loading
+ */
+export const networkIconsObject: {
+  [key: number]: {
+    icon: string;
+    tint: string;
+    text: string;
+  };
+} = {
+  0: {
+    icon: icons.networkIcons['Unsupported'],
+    tint: 'primary',
+    text: 'Unknown',
+  },
+  1: {
+    icon: icons.networkIcons['Excellent'],
+    tint: '#2BD900',
+    text: 'Excellent',
+  },
+  2: {
+    icon: icons.networkIcons['Good'],
+    tint: '#FFEE00',
+    text: 'Good',
+  },
+  3: {
+    icon: icons.networkIcons['Bad'],
+    tint: '#F8AA00',
+    text: 'Bad',
+  },
+  4: {
+    icon: icons.networkIcons['Bad'],
+    tint: '#F8AA00',
+    text: 'Bad',
+  },
+  5: {
+    icon: icons.networkIcons['VeryBad'],
+    tint: 'red',
+    text: 'Very Bad',
+  },
+  6: {
+    icon: icons.networkIcons['VeryBad'],
+    tint: 'red',
+    text: 'Very Bad',
+  },
+  7: {
+    icon: icons.networkIcons['Unsupported'],
+    tint: 'primary',
+    text: 'Unpublished',
+  },
+  8: {
+    icon: icons.networkIcons['Loading'],
+    tint: 'primary',
+    text: 'Loading',
+  },
+};
+
+const initNewtorkQualityStats: {[key in string | number]: number} = {
+  local: 0,
+};
+
+const NetworkQualityContext = createContext(initNewtorkQualityStats);
+
+export default NetworkQualityContext;
+
+export const NetworkQualityConsumer = NetworkQualityContext.Consumer;
+
+export const NetworkQualityProvider: React.FC = (props) => {
+  const [networkQualityStats, setNetworkQualityStats] = useState(
+    initNewtorkQualityStats,
+  );
+  const {RtcEngine} = useContext(RtcContext);
+
+  useMount(() => {
+    function handleNetworkQuality(
+      uid: number | string,
+      downlinkQuality: number,
+      // Currently unused , potential use might be to take weighted average
+      // of this alongside the downlink quality.
+      uplinkQuality: number,
+    ) {
+      setNetworkQualityStats((prevNetworkQualityStats) => {
+        const updatedNetworkQualityStats = {...prevNetworkQualityStats};
+        if (uid === 0) {
+          const displayedNetworkQuality =
+          // check if either are unsupported (0)
+          // if not then display whichever is poorer
+            downlinkQuality * uplinkQuality !== 0
+              ? downlinkQuality < uplinkQuality
+                ? uplinkQuality
+                : downlinkQuality
+              : 0;
+          updatedNetworkQualityStats['local'] = displayedNetworkQuality;
+        } else {
+          updatedNetworkQualityStats[uid] = downlinkQuality;
+        }
+        return updatedNetworkQualityStats;
+      });
+    }
+
+    RtcEngine.addListener('NetworkQuality', handleNetworkQuality);
+  });
+
+  return (
+    <NetworkQualityContext.Provider value={networkQualityStats}>
+      {props.children}
+    </NetworkQualityContext.Provider>
+  );
+};