agora-appbuilder-core 2.0.0 → 2.0.1

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',
   },
 });
 

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

@@ -18,15 +18,15 @@ import {
   ImageBackground,
   Platform,
 } from 'react-native';
-import MaxUidContext from '../../agora-rn-uikit/src/MaxUidContext';
-import {MaxVideoView} from '../../agora-rn-uikit/Components';
+import {MaxUidContext} from '../../agora-rn-uikit';
+import {MaxVideoView} from '../../agora-rn-uikit';
 import {
   LocalAudioMute,
   LocalVideoMute,
   SwitchCamera,
-} from '../../agora-rn-uikit/Components';
-import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
-import RtcContext from '../../agora-rn-uikit/src/RtcContext';
+} from '../../agora-rn-uikit';
+import {LocalUserContext} from '../../agora-rn-uikit';
+import {RtcContext} from '../../agora-rn-uikit';
 // import ColorContext from './ColorContext';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
@@ -87,11 +87,17 @@ const Precall = (props: any) => {
       <View style={{height: 20}} />
       <View style={style.controls}>
         <LocalUserContext>
-          <LocalVideoMute />
+          <View style={style.width50}>
+            <LocalVideoMute />
+          </View>
           <View style={style.width50} />
-          <LocalAudioMute />
+          <View style={style.width50}>
+            <LocalAudioMute />
+          </View>
           <View style={style.width50} />
-          <SwitchCamera />
+          <View style={style.width50}>
+            <SwitchCamera />
+          </View>
         </LocalUserContext>
       </View>
       <View
@@ -140,7 +146,12 @@ const style = StyleSheet.create({
     minHeight: 45,
     alignSelf: 'center',
   },
-  controls: {flex: 0.2, flexDirection: 'row', alignSelf: 'center', padding: 5},
+  controls: {
+    flex: 0.2,
+    flexDirection: 'row',
+    alignSelf: 'center',
+    padding: 5,
+  },
   width50: {width: 50},
   buttonActive: {
     backgroundColor: $config.PRIMARY_COLOR,

package/template/src/components/Precall.tsx

@@ -1,34 +1,36 @@
 /*
 ********************************************
  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, {useState, useContext} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, Dimensions, Platform} from 'react-native';
 import TextInput from '../atoms/TextInput';
 import PrimaryButton from '../atoms/PrimaryButton';
-import {MaxUidConsumer} from '../../agora-rn-uikit/src/MaxUidContext';
-import {MaxVideoView} from '../../agora-rn-uikit/Components';
-import {LocalAudioMute, LocalVideoMute} from '../../agora-rn-uikit/Components';
-import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
+
+import {
+  MaxUidConsumer,
+  MaxVideoView,
+  LocalAudioMute,
+  LocalVideoMute,
+  LocalUserContext,
+} from '../../agora-rn-uikit';
+
 import SelectDevice from '../subComponents/SelectDevice';
 import Logo from '../subComponents/Logo';
 import hasBrandLogo from '../utils/hasBrandLogo';
-// import OpenInNativeButton from '../subComponents/OpenInNativeButton';
 import ColorContext from './ColorContext';
-// import {useHistory} from './Router';
-// import {precallCard} from '../../theme.json';
 import Error from '../subComponents/Error';
 
 const Precall = (props: any) => {
   const {primaryColor} = useContext(ColorContext);
-  const {setCallActive, queryComplete, username, setUsername, error} = props;
+  const {setCallActive, queryComplete, username, setUsername, error, title} = props;
   const [dim, setDim] = useState([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
@@ -39,6 +41,14 @@ const Precall = (props: any) => {
     setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
   };
 
+  useEffect(()=>{
+    if(Platform.OS === 'web'){
+      if(title){
+        document.title = title + ' | ' + $config.APP_NAME
+      }
+    }
+  })
+
   return (
     // <ImageBackground
     //   onLayout={onLayout}
@@ -63,25 +73,9 @@ const Precall = (props: any) => {
             <LocalUserContext>
               <View style={{alignSelf: 'center'}}>
                 <LocalVideoMute />
-                {/* <Text
-                  style={{
-                    textAlign: 'center',
-                    marginTop: 5,
-                    color: $config.PRIMARY_COLOR,
-                  }}>
-                  Video
-                </Text> */}
               </View>
               <View style={{alignSelf: 'center'}}>
                 <LocalAudioMute />
-                {/* <Text
-                  style={{
-                    textAlign: 'center',
-                    marginTop: 5,
-                    color: $config.PRIMARY_COLOR,
-                  }}>
-                  Audio
-                </Text> */}
               </View>
             </LocalUserContext>
           </View>
@@ -129,6 +123,10 @@ const Precall = (props: any) => {
               justifyContent: 'center',
               marginBottom: '10%',
             }}>
+            <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
+              {title}
+            </Text>
+            <View style={{height: 20}} />
             <View style={[{shadowColor: primaryColor}, style.precallPickers]}>
               {/* <View style={{flex: 1}}> */}
               <Text
@@ -206,11 +204,16 @@ const style = StyleSheet.create({
     marginBottom: '1%',
     // marginRight: '5%',
   },
-  subHeading: {
+  titleHeading: {
     fontSize: 28,
     fontWeight: '700',
     color: $config.SECONDARY_FONT_COLOR,
   },
+  subHeading: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: $config.SECONDARY_FONT_COLOR,
+  },
   headline: {
     fontSize: 20,
     fontWeight: '400',