agora-appbuilder-core 1.0.8 → 2.0.1

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>
+  );
+};

package/template/src/components/ParticipantsView.tsx

@@ -19,12 +19,13 @@ import {
   Image,
   ScrollView,
   Dimensions,
+  useWindowDimensions
 } from 'react-native';
-import {MinUidConsumer} from '../../agora-rn-uikit/src/MinUidContext';
-import {MaxUidConsumer} from '../../agora-rn-uikit/src/MaxUidContext';
-import LocalAudioMute from '../subComponents/LocalAudioMute';
-import LocalVideoMute from '../subComponents/LocalVideoMute';
-import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {MinUidConsumer} from '../../agora-rn-uikit';
+import {MaxUidConsumer} from '../../agora-rn-uikit';
+import {LocalAudioMute, LocalVideoMute} from '../../agora-rn-uikit';
+import {LocalUserContext} from '../../agora-rn-uikit';
 import CopyJoinInfo from '../subComponents/CopyJoinInfo';
 import RemoteAudioMute from '../subComponents/RemoteAudioMute';
 import RemoteVideoMute from '../subComponents/RemoteVideoMute';
@@ -37,8 +38,11 @@ import icons from '../assets/icons';
 import platform from '../subComponents/Platform';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {UserType} from './RTMConfigure';
+import styles from './styles';
+import TextWithToolTip from '../subComponents/TextWithTooltip'
 
 const ParticipantView = (props: any) => {
+  const {height, width} = useWindowDimensions();
   const {userList, localUid} = useContext(chatContext);
   const {primaryColor} = useContext(ColorContext);
   const [dim, setDim] = useState([
@@ -47,12 +51,14 @@ const ParticipantView = (props: any) => {
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isSmall = dim[0] < 700;
-  
+  let fontSize = Platform.OS === 'web' ? 14 : 16
   return (
     <View
       style={
         Platform.OS === 'web'
-          ? isSmall ? style.participantViewNative : style.participantView
+          ? isSmall
+            ? style.participantViewNative
+            : style.participantView
           : style.participantViewNative
       }>
       <TouchableOpacity style={style.backButton}>
@@ -72,50 +78,83 @@ const ParticipantView = (props: any) => {
                 [...minUsers, ...maxUser].map((user) =>
                   user.uid === 'local' ? (
                     <View style={style.participantContainer} key={user.uid}>
-                      <Text style={style.participantText}>
-                        {userList[localUid]
-                          ? userList[localUid].name + ' '
-                          : 'You '}
-                      </Text>
+                      <View style={{flex:1}}>
+                        <TextWithToolTip 
+                          value={userList[localUid] ? userList[localUid].name + ' ' : 'You '} 
+                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
+                        />
+                      </View>
                       <View style={style.participantButtonContainer}>
                         <LocalUserContext>
-                          <LocalAudioMute />
-                          <LocalVideoMute />
+                          <View
+                            style={[style.actionBtnIcon, {marginRight: 10}]}>
+                            <LocalAudioMute btnText=" " variant="text" />
+                          </View>
+                          <View style={style.actionBtnIcon}>
+                            <LocalVideoMute btnText=" " variant="text" />
+                          </View>
                         </LocalUserContext>
                       </View>
                     </View>
                   ) : user.uid === 1 ? (
                     <View style={style.participantContainer} key={user.uid}>
-                      <Text style={style.participantText}>
-                        {userList[localUid]
-                          ? userList[localUid].name + "'s screenshare "
-                          : 'Your screenshare '}
-                      </Text>
+                      <View style={{flex:1}}>
+                        <TextWithToolTip 
+                          value={userList[localUid]
+                            ? userList[localUid].name + "'s screenshare "
+                            : 'Your screenshare '} 
+                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
+                        />
+                      </View>
+                      <View style={style.dummyView}>
+                          {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
+                          <Text>local screen sharing</Text>
+                      </View>
                     </View>
                   ) : (
-                    <View style={style.participantContainer} key={user.uid}>
-                      <Text style={style.participantText}>
-                        {userList[user.uid]
-                          ? userList[user.uid].name + ' '
-                          : String(user.uid)[0] === '1'
-                            ? 'PSTN User ' : 'User '}
-                      </Text>
+                    <View style={style.participantContainer} key={user.uid} >
+                      <View style={{flex:1}}>
+                        <TextWithToolTip 
+                          value={userList[user.uid]
+                            ? userList[user.uid].name + ' '
+                            : String(user.uid)[0] === '1'
+                            ? 'PSTN User '
+                            : 'User '} 
+                          style={[style.participantText, { fontSize: RFValue(fontSize, height > width ? height : width) }]}
+                        />
+                      </View>
                       {userList[user.uid]?.type !== UserType.ScreenShare ? (
                         <View style={style.participantButtonContainer}>
-                          <RemoteEndCall uid={user.uid} isHost={props.isHost} />
-                          <RemoteAudioMute
-                            uid={user.uid}
-                            audio={user.audio}
-                            isHost={props.isHost}
-                          />
-                          <RemoteVideoMute
-                            uid={user.uid}
-                            video={user.video}
-                            isHost={props.isHost}
-                          />
+                          <View style={style.actionBtnIcon}>
+                            <RemoteEndCall
+                              uid={user.uid}
+                              isHost={props.isHost}
+                            />
+                          </View>
+                          <View
+                            style={[
+                              style.actionBtnIcon,
+                              {marginLeft: 10, marginRight: 5},
+                            ]}>
+                            <RemoteAudioMute
+                              uid={user.uid}
+                              audio={user.audio}
+                              isHost={props.isHost}
+                            />
+                          </View>
+                          <View style={[style.actionBtnIcon, {marginRight:5}]}>
+                            <RemoteVideoMute
+                              uid={user.uid}
+                              video={user.video}
+                              isHost={props.isHost}
+                            />
+                          </View>
                         </View>
                       ) : (
-                        <></>
+                        <View style={style.dummyView}>
+                          {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
+                          <Text>remote screen sharing</Text>
+                        </View>
                       )}
                     </View>
                   ),
@@ -125,8 +164,16 @@ const ParticipantView = (props: any) => {
           )}
         </MinUidConsumer>
       </ScrollView>
-      <View style={{width: '100%', height: 50, alignSelf: 'flex-end', flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
-        <CopyJoinInfo showText={true}/>
+      <View
+        style={{
+          width: '100%',
+          height: 50,
+          alignSelf: 'flex-end',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <CopyJoinInfo showText={true} />
       </View>
     </View>
   );
@@ -162,32 +209,34 @@ const style = StyleSheet.create({
     color: $config.PRIMARY_FONT_COLOR,
   },
   participantContainer: {
+    width: '100%',
+    display: 'flex',
     flexDirection: 'row',
     flex: 1,
     marginVertical: 2,
     backgroundColor: $config.SECONDARY_FONT_COLOR,
     // height: 10,
-    width: '90%',
+    paddingLeft: 10,
+    paddingRight: 10,
     alignSelf: 'center',
-    justifyContent: 'center',
     alignItems: 'center',
+    justifyContent: 'space-between',
   },
   participantText: {
     flex: 1,
-    fontSize: Platform.OS === 'web' ? 18 : 16,
     fontWeight: '500',
     flexDirection: 'row',
     color: $config.PRIMARY_FONT_COLOR,
     lineHeight: 20,
-    paddingLeft: 10,
-    alignSelf: 'center',
+    paddingHorizontal: 5,
+    textAlign:'left',
+    flexShrink: 1 
   },
   participantButtonContainer: {
-    // flex: 0.3,
+    flex: 0.5,
     flexDirection: 'row',
-    paddingRight: 10,
-    alignSelf: 'center',
-    alignItems: 'center',
+    paddingRight: 5,
+    justifyContent:'flex-end'
   },
   secondaryBtn: {
     alignSelf: 'center',
@@ -222,6 +271,13 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     tintColor: $config.PRIMARY_FONT_COLOR,
   },
+  actionBtnIcon: {
+    width: 25,
+    height: 25,
+  },
+  dummyView:{
+    flex: 0.5,opacity:0, marginHorizontal: 5
+  }
 });
 
 export default ParticipantView;

package/template/src/components/PinnedVideo.tsx

@@ -18,21 +18,28 @@ import {
   Text,
   Image,
   Pressable,
+  useWindowDimensions,
 } from 'react-native';
-import {MinUidConsumer} from '../../agora-rn-uikit/src/MinUidContext';
-import RtcContext from '../../agora-rn-uikit/src/RtcContext';
-import {MaxVideoView} from '../../agora-rn-uikit/Components';
-import {MaxUidConsumer} from '../../agora-rn-uikit/src/MaxUidContext';
+import {MinUidConsumer} from '../../agora-rn-uikit';
+import {RtcContext} from '../../agora-rn-uikit';
+import {MaxVideoView} from '../../agora-rn-uikit';
+import {MaxUidConsumer} from '../../agora-rn-uikit';
 import chatContext from './ChatContext';
 import ColorContext from './ColorContext';
-import icons from '../assets/icons';
 import {layoutProps} from '../../theme.json';
 import FallbackLogo from '../subComponents/FallbackLogo';
-
+import {ImageIcon} from '../../agora-rn-uikit';
+import ScreenShareNotice from '../subComponents/ScreenShareNotice';
+import {RFValue} from 'react-native-responsive-fontsize';
 const {topPinned} = layoutProps;
+import networkQualityContext from './NetworkQualityContext';
+import {NetworkQualityPill} from '../subComponents/NetworkQualityPill';
+import TextWithTooltip from '../subComponents/TextWithTooltip';
 
 const PinnedVideo = () => {
+  const {height, width} = useWindowDimensions();
   const {primaryColor} = useContext(ColorContext);
+  const networkQualityStat = useContext(networkQualityContext);
   const [collapse, setCollapse] = useState(false);
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
@@ -129,18 +136,26 @@ const PinnedVideo = () => {
                         data.dispatch({type: 'SwapVideo', value: [user]});
                       }}>
                       <View style={style.flex1}>
+                        <NetworkQualityPill
+                          networkStat={
+                            networkQualityStat[user.uid]
+                              ? networkQualityStat[user.uid]
+                              : user.audio || user.video
+                              ? 8
+                              : 7
+                          }
+                          primaryColor={primaryColor}
+                          rootStyle={{left: 5, top: 5}}
+                          small
+                        />
                         <MaxVideoView
                           fallback={() => {
                             if (user.uid === 'local') {
                               return FallbackLogo(userList[localUid]?.name);
                             } else if (String(user.uid)[0] === '1') {
-                              return FallbackLogo(
-                                'PSTN User'
-                              );
+                              return FallbackLogo('PSTN User');
                             } else {
-                              return FallbackLogo(
-                                userList[user.uid]?.name,
-                              );
+                              return FallbackLogo(userList[user.uid]?.name);
                             }
                           }}
                           user={user}
@@ -148,31 +163,36 @@ const PinnedVideo = () => {
                         />
                         <View style={style.nameHolder}>
                           <View style={[style.MicBackdrop]}>
-                            <Image
-                              source={{
-                                uri: user.audio ? icons.mic : icons.micOff,
-                              }}
+                            <ImageIcon
+                              name={user.audio ? 'mic' : 'micOff'}
+                              color={user.audio ? primaryColor : 'red'}
+                              style={style.MicIcon}
+                            />
+                          </View>
+                          <View style={{flex:1}}>
+                            <TextWithTooltip 
+                              value={user.uid === 'local'
+                              ? userList[localUid]
+                                ? userList[localUid].name + ' '
+                                : 'You '
+                              : userList[user.uid]
+                              ? userList[user.uid].name + ' '
+                              : user.uid === 1
+                              ? (userList[localUid]?.name + "'s screen ")
+                              : String(user.uid)[0] === '1'
+                              ? 'PSTN User '
+                              : 'User '}
                               style={[
-                                style.MicIcon,
+                                style.name,
                                 {
-                                  tintColor: user.audio ? primaryColor : 'red',
+                                  fontSize: RFValue(
+                                    14,
+                                    height > width ? height : width,
+                                  ),
                                 },
                               ]}
-                              resizeMode={'contain'}
                             />
                           </View>
-                          <Text style={style.name}>
-                            {user.uid === 'local'
-                              ? userList[localUid]
-                                ? userList[localUid].name.slice(0, 20) + ' '
-                                : 'You '
-                              : userList[user.uid]
-                                ? userList[user.uid].name.slice(0, 20) + ' '
-                                : user.uid === 1
-                                  ? (userList[localUid]?.name + "'s screen ").slice(0, 20)
-                                  : String(user.uid)[0] === '1' ?
-                                    'PSTN User ' : 'User '}
-                          </Text>
                         </View>
                       </View>
                     </Pressable>
@@ -193,48 +213,66 @@ const PinnedVideo = () => {
         }>
         <MaxUidConsumer>
           {(maxUsers) => (
-            <View style={style.flex1}>
-              <MaxVideoView
-                fallback={() => {
-                  if (maxUsers[0].uid === 'local') {
-                    return FallbackLogo(userList[localUid]?.name);
-                  } else if (String(maxUsers[0].uid)[0] === '1') {
-                    return FallbackLogo('PSTN User');
-                  } else {
-                    return FallbackLogo(userList[maxUsers[0].uid]?.name);
+            <>
+              <View style={style.flex1}>
+                <ScreenShareNotice uid={maxUsers[0].uid} />
+                <NetworkQualityPill
+                  networkStat={
+                    networkQualityStat[maxUsers[0].uid]
+                      ? networkQualityStat[maxUsers[0].uid]
+                      : maxUsers[0].audio || maxUsers[0].video
+                      ? 8
+                      : 7
                   }
-                }}
-                user={maxUsers[0]}
-                key={maxUsers[0].uid}
-              />
-              <View style={style.nameHolder}>
-                <View style={[style.MicBackdrop]}>
-                  <Image
-                    source={{
-                      uri: maxUsers[0].audio ? icons.mic : icons.micOff,
-                    }}
-                    style={[
-                      style.MicIcon,
-                      {
-                        tintColor: maxUsers[0].audio ? primaryColor : 'red',
-                      },
-                    ]}
-                    resizeMode={'contain'}
-                  />
+                  primaryColor={primaryColor}
+                  rootStyle={{
+                    marginLeft: 25,
+                    top: 8,
+                    right: 10,
+                  }}
+                  small
+                />
+                <MaxVideoView
+                  fallback={() => {
+                    if (maxUsers[0].uid === 'local') {
+                      return FallbackLogo(userList[localUid]?.name);
+                    } else if (String(maxUsers[0].uid)[0] === '1') {
+                      return FallbackLogo('PSTN User');
+                    } else {
+                      return FallbackLogo(userList[maxUsers[0].uid]?.name);
+                    }
+                  }}
+                  user={maxUsers[0]}
+                  key={maxUsers[0].uid}
+                />
+                <View style={style.nameHolder}>
+                  <View style={[style.MicBackdrop]}>
+                    <ImageIcon
+                      name={maxUsers[0].audio ? 'mic' : 'micOff'}
+                      color={maxUsers[0].audio ? primaryColor : 'red'}
+                      style={style.MicIcon}
+                    />
+                  </View>
+                  <View style={{flex:1}}>
+                    <TextWithTooltip 
+                      value={maxUsers[0].uid === 'local'
+                      ? userList[localUid]
+                        ? userList[localUid].name + ' '
+                        : 'You '
+                      : userList[maxUsers[0].uid]
+                      ? userList[maxUsers[0].uid].name + ' '
+                      : maxUsers[0].uid === 1
+                      ? (userList[localUid].name + "'s screen ")
+                      : 'User '}
+                      style={[
+                        style.name,
+                        {fontSize: RFValue(14, height > width ? height : width)},
+                      ]}
+                    />
+                  </View>
                 </View>
-                <Text style={style.name}>
-                  {maxUsers[0].uid === 'local'
-                    ? userList[localUid]
-                      ? userList[localUid].name.slice(0,20) + ' '
-                      : 'You '
-                    : userList[maxUsers[0].uid]
-                    ? userList[maxUsers[0].uid].name.slice(0,20) + ' '
-                    : maxUsers[0].uid === 1
-                    ? (userList[localUid].name + "'s screen ").slice(0,20)
-                    : 'User '}
-                </Text>
               </View>
-            </View>
+            </>
           )}
         </MaxUidConsumer>
       </View>
@@ -257,8 +295,10 @@ const style = StyleSheet.create({
     borderTopLeftRadius: 15,
     borderBottomRightRadius: 15,
     flexDirection: 'row',
+    zIndex: 5,
+    maxWidth: '100%',
   },
-  name: {color: $config.PRIMARY_FONT_COLOR, lineHeight: 25, fontWeight: '700'},
+  name: {color: $config.PRIMARY_FONT_COLOR, lineHeight: 25, fontWeight: '700', flexShrink: 1},
   MicBackdrop: {
     width: 20,
     height: 20,
@@ -273,6 +313,7 @@ const style = StyleSheet.create({
     width: '80%',
     height: '80%',
     alignSelf: 'center',
+    resizeMode: 'contain',
   },
 });