agora-appbuilder-core 1.0.8 → 2.0.1

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';
@@ -46,24 +46,29 @@ const Precall = (props: any) => {
       <View style={style.heading}>
         <Text style={style.headingText}>Precall </Text>
       </View>
-      <View style={{zIndex: 50, position: 'absolute', width: '100%', left: '18%', top: 10, alignSelf: 'center'}}>
+      <View
+        style={{
+          zIndex: 50,
+          position: 'absolute',
+          width: '100%',
+          left: '18%',
+          top: 10,
+          alignSelf: 'center',
+        }}>
         {error ? <Error error={error} showBack={true} /> : <></>}
       </View>
       <View style={style.full}>
         <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
       </View>
       {Platform.OS === 'ios' ? (
-        <View 
-          style={style.textInputHolder}>
+        <View style={style.textInputHolder}>
           <TextInput
             value={username}
             onChangeText={(text) => {
-              if (username !== 'Getting name...') {
-                setUsername(text);
-              }
+              setUsername(text);
             }}
             onSubmitEditing={() => {}}
-            placeholder="Display Name"
+            placeholder={queryComplete ? 'Display name*' : 'Getting name...'}
           />
         </View>
       ) : (
@@ -71,23 +76,28 @@ const Precall = (props: any) => {
           <TextInput
             value={username}
             onChangeText={(text) => {
-              if (username !== 'Getting name...') {
-                setUsername(text);
-              }
+              setUsername(text);
             }}
             onSubmitEditing={() => {}}
-            placeholder="Display Name"
+            placeholder={queryComplete ? 'Display name*' : 'Getting name...'}
+            editable={queryComplete}
           />
         </View>
       )}
       <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
@@ -95,10 +105,14 @@ const Precall = (props: any) => {
         // disabled={!queryComplete}
         style={{marginBottom: 50}}>
         {/* <Text style={style.buttonText}> */}
-          {/* {queryComplete ? 'Join Room' : 'Loading...'} */}
+        {/* {queryComplete ? 'Join Room' : 'Loading...'} */}
         {/* </Text> */}
-      {/* </TouchableOpacity> */}
-      <PrimaryButton text={"Join Room"} disabled={!queryComplete} onPress={() => setCallActive(true)} />
+        {/* </TouchableOpacity> */}
+        <PrimaryButton
+          text={'Join Room'}
+          disabled={!queryComplete || username.trim() === ''}
+          onPress={() => setCallActive(true)}
+        />
       </View>
       {/* </ImageBackground> */}
     </View>
@@ -132,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,48 +1,54 @@
 /*
 ********************************************
  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 {
-  View,
-  Text,
-  StyleSheet,
-  Dimensions,
-  Platform,
-} from 'react-native';
+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 OpenInNativeButton from '../subComponents/OpenInNativeButton';
+import hasBrandLogo from '../utils/hasBrandLogo';
 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,
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
+
   let onLayout = (e: 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}
@@ -50,7 +56,7 @@ const Precall = (props: any) => {
     //   resizeMode={'cover'}>
     <View style={style.main} onLayout={onLayout}>
       <View style={style.nav}>
-        <Logo />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} showBack={true} /> : <></>}
         {/* <OpenInNativeButton /> */}
       </View>
@@ -67,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>
@@ -94,17 +84,18 @@ const Precall = (props: any) => {
               <TextInput
                 value={username}
                 onChangeText={(text) => {
-                  if (username !== 'Getting name...') {
-                    setUsername(text);
-                  }
+                  setUsername(text);
                 }}
                 onSubmitEditing={() => {}}
-                placeholder="Display Name"
+                placeholder={
+                  queryComplete ? 'Display name*' : 'Getting name...'
+                }
+                editable={queryComplete}
               />
               <View style={style.margin5Btm} />
               <PrimaryButton
                 onPress={() => setCallActive(true)}
-                disabled={!queryComplete}
+                disabled={!queryComplete || username.trim() === ''}
                 text={queryComplete ? 'Join Room' : 'Loading...'}
               />
             </View>
@@ -132,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
@@ -140,7 +135,11 @@ const Precall = (props: any) => {
               </Text>
               {/* </View> */}
               <View style={{height: 20}} />
-              <View style={{flex: 1, maxWidth: Platform.OS === 'web'? '25vw' : 'auto'}}>
+              <View
+                style={{
+                  flex: 1,
+                  maxWidth: Platform.OS === 'web' ? '25vw' : 'auto',
+                }}>
                 <SelectDevice />
               </View>
               <View
@@ -154,17 +153,18 @@ const Precall = (props: any) => {
                 <TextInput
                   value={username}
                   onChangeText={(text) => {
-                    if (username !== 'Getting name...') {
-                      setUsername(text);
-                    }
+                    setUsername(text);
                   }}
                   onSubmitEditing={() => {}}
-                  placeholder="Display Name"
+                  placeholder={
+                    queryComplete ? 'Display name*' : 'Getting name...'
+                  }
+                  editable={queryComplete}
                 />
                 <View style={{height: 20}} />
                 <PrimaryButton
                   onPress={() => setCallActive(true)}
-                  disabled={!queryComplete}
+                  disabled={!queryComplete || username.trim() === ''}
                   text={queryComplete ? 'Join Room' : 'Loading...'}
                 />
               </View>
@@ -204,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',