agora-appbuilder-core 1.0.8 → 1.0.9

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

@@ -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,12 +76,11 @@ 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>
       )}
@@ -95,10 +99,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>

package/template/src/components/Precall.tsx

@@ -10,13 +10,7 @@
 *********************************************
 */
 import React, {useState, useContext} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Dimensions,
-  Platform,
-} from 'react-native';
+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';
@@ -39,6 +33,7 @@ const Precall = (props: any) => {
     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]);
   };
@@ -94,17 +89,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>
@@ -140,7 +136,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 +154,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>

package/template/src/components/StorageContext.tsx

@@ -15,6 +15,7 @@ import useMount from './useMount';
 
 interface StoreInterface {
   token: null | string;
+  displayName: null | string;
 }
 
 interface StorageContextInterface {
@@ -24,6 +25,7 @@ interface StorageContextInterface {
 
 const initStoreValue: StoreInterface = {
   token: null,
+  displayName: '',
 };
 
 const initStorageContextValue = {

package/template/src/pages/Create.tsx

@@ -10,12 +10,7 @@
 *********************************************
 */
 import React, {useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Dimensions,
-} from 'react-native';
+import {View, Text, StyleSheet, Dimensions, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
 import Checkbox from '../subComponents/Checkbox';
 import {gql, useMutation} from '@apollo/client';
@@ -38,8 +33,16 @@ type PasswordInput = {
 };
 
 const CREATE_CHANNEL = gql`
-  mutation CreateChannel($title: String!, $backendURL: String!, $enablePSTN: Boolean) {
-    createChannel(title: $title, backendURL: $backendURL, enablePSTN: $enablePSTN) {
+  mutation CreateChannel(
+    $title: String!
+    $backendURL: String!
+    $enablePSTN: Boolean
+  ) {
+    createChannel(
+      title: $title
+      backendURL: $backendURL
+      enablePSTN: $enablePSTN
+    ) {
       passphrase {
         host
         view
@@ -111,7 +114,7 @@ const Create = () => {
     //   style={style.full}
     //   resizeMode={'cover'}>
     // <KeyboardAvoidingView behavior={'height'} style={style.main}>
-    <View style={style.main}>
+    <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
         <Logo />
         {error ? <Error error={error} /> : <></>}
@@ -179,17 +182,17 @@ const Create = () => {
           roomTitle={roomTitle}
         />
       )}
-    </View>
+    </ScrollView>
   );
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
   main: {
-    flex: 2,
-    justifyContent: 'space-evenly',
+    paddingVertical: '8%',
     marginHorizontal: '8%',
-    marginVertical: '2%',
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    flexGrow: 1,
   },
   nav: {
     flex: 1,

package/template/src/pages/Join.tsx

@@ -10,11 +10,7 @@
 *********************************************
 */
 import React, {useContext, useState} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-} from 'react-native';
+import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
 import SessionContext from '../components/SessionContext';
 // import OpenInNativeButton from '../subComponents/OpenInNativeButton';
@@ -38,8 +34,9 @@ const Join = (props: joinProps) => {
   const history = useHistory();
   const {primaryColor} = useContext(ColorContext);
   const {joinSession} = useContext(SessionContext);
-  const [error, setError] =
-    useState<null | {name: string; message: string}>(null);
+  const [error, setError] = useState<null | {name: string; message: string}>(
+    null,
+  );
   // const [dim, setDim] = useState([
   //   Dimensions.get('window').width,
   //   Dimensions.get('window').height,
@@ -57,18 +54,12 @@ const Join = (props: joinProps) => {
   const startCall = async () => {
     joinSession({phrase});
   };
-  // throw new Error("My first Sentry error!");
+
   return (
-    // <ImageBackground
-    //   // onLayout={onLayout}
-    //   style={style.full}
-    //   resizeMode={'cover'}>
-    <View style={style.main}>
-      {/* <KeyboardAvoidingView behavior={'height'} style={style.main}> */}
+    <ScrollView contentContainerStyle={style.main}>
       <View style={style.nav}>
         <Logo />
         {error ? <Error error={error} /> : <></>}
-        {/* <OpenInNativeButton /> */}
       </View>
       <View style={style.content}>
         <View style={style.leftContent}>
@@ -99,28 +90,19 @@ const Join = (props: joinProps) => {
             )}
           </View>
         </View>
-        {/* {dim[0] > dim[1] + 150 ? (
-            <View style={style.full}>
-              <Illustration />
-            </View>
-          ) : (
-            <></>
-          )} */}
       </View>
-      {/* </KeyboardAvoidingView> */}
-    </View>
-    // </ImageBackground>
+    </ScrollView>
   );
 };
 
 const style = StyleSheet.create({
-  full: {flex: 1},
   illustration: {flex: 1, alignSelf: 'flex-end'},
   main: {
-    flex: 2,
-    justifyContent: 'space-evenly',
+    paddingVertical: '8%',
     marginHorizontal: '8%',
-    marginVertical: '2%',
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    flexGrow: 1,
   },
   nav: {
     flex: 1,

package/template/src/pages/VideoCall.tsx

@@ -65,7 +65,8 @@ const useChatNotification = (
 };
 
 const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
-  const {messageStore, privateMessageStore, userList, localUid} = useContext(ChatContext);
+  const {messageStore, privateMessageStore, userList, localUid} =
+    useContext(ChatContext);
   const [
     lastCheckedPublicState,
     setLastCheckedPublicState,
@@ -116,8 +117,13 @@ const NotificationControl = ({children, chatDisplayed, setSidePanel}) => {
       messageStore[messageStore.length - 1]?.uid !== localUid
     ) {
       Toast.show({
-        text1: messageStore[messageStore.length - 1]?.msg.length > 50 ? messageStore[messageStore.length - 1]?.msg.slice(1, 50) + '...' : messageStore[messageStore.length - 1]?.msg.slice(1),
-        text2: userList[messageStore[messageStore.length - 1]?.uid] ? 'From: ' + userList[messageStore[messageStore.length - 1]?.uid].name : '',
+        text1:
+          messageStore[messageStore.length - 1]?.msg.length > 50
+            ? messageStore[messageStore.length - 1]?.msg.slice(1, 50) + '...'
+            : messageStore[messageStore.length - 1]?.msg.slice(1),
+        text2: userList[messageStore[messageStore.length - 1]?.uid]
+          ? 'From: ' + userList[messageStore[messageStore.length - 1]?.uid].name
+          : '',
         visibilityTime: 1000,
         onPress: () => {
           setSidePanel(SidePanelType.Chat);
@@ -212,8 +218,10 @@ enum RnEncryptionEnum {
 }
 
 const VideoCall: React.FC = () => {
-  const {store} = useContext(StorageContext);
-  const [username, setUsername] = useState('Getting name...');
+  const {store, setStore} = useContext(StorageContext);
+  const getInitialUsername = () =>
+    store?.displayName ? store.displayName : '';
+  const [username, setUsername] = useState(getInitialUsername);
   const [participantsView, setParticipantsView] = useState(false);
   const [callActive, setCallActive] = useState($config.PRECALL ? false : true);
   const [layout, setLayout] = useState(Layout.Grid);
@@ -223,9 +231,9 @@ const VideoCall: React.FC = () => {
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
   const {phrase} = useParams();
   const [errorMessage, setErrorMessage] = useState(null);
-  let isHost = true; //change to false by default after testing
-  let title = null;
-  let rtcProps = {
+  const [isHost, setIsHost] = React.useState(false);
+  const [title, setTitle] = React.useState('');
+  const [rtcProps, setRtcProps] = React.useState({
     appId: $config.APP_ID,
     channel: null,
     uid: null,
@@ -238,60 +246,59 @@ const VideoCall: React.FC = () => {
     encryption: $config.ENCRYPTION_ENABLED
       ? {key: null, mode: RnEncryptionEnum.AES128XTS, screenKey: null}
       : false,
-  };
-  let data, loading, error;
+  });
 
-  ({data, loading, error} = useQuery(
+  const {data, loading, error} = useQuery(
     store.token === null
       ? JOIN_CHANNEL_PHRASE
       : JOIN_CHANNEL_PHRASE_AND_GET_USER,
     {
       variables: {passphrase: phrase},
     },
-  ));
+  );
 
-  if (error) {
-    console.log('error', error);
-    // console.log('error data', data);
-    if (!errorMessage) {
-      setErrorMessage(error);
+  React.useEffect(() => {
+    if (error) {
+      console.log('error', error);
+      // console.log('error data', data);
+      if (!errorMessage) {
+        setErrorMessage(error);
+      }
+      return;
     }
-  }
 
-  if (!loading && data) {
-    console.log('token:', rtcProps.token);
-    console.log('error', data.error);
-    rtcProps = {
-      appId: $config.APP_ID,
-      channel: data.joinChannel.channel,
-      uid: data.joinChannel.mainUser.uid,
-      token: data.joinChannel.mainUser.rtc,
-      rtm: data.joinChannel.mainUser.rtm,
-      dual: true,
-      profile: $config.PROFILE,
-      encryption: $config.ENCRYPTION_ENABLED
-        ? {
-            key: data.joinChannel.secret,
-            mode: RnEncryptionEnum.AES128XTS,
-            screenKey: data.joinChannel.secret,
-          }
-        : false,
-      screenShareUid: data.joinChannel.screenShare.uid,
-      screenShareToken: data.joinChannel.screenShare.rtc,
-    };
-    isHost = data.joinChannel.isHost;
-    title = data.joinChannel.title;
-    console.log('query done: ', data, queryComplete);
-    if (username === 'Getting name...') {
+    if (!loading && data) {
+      console.log('token:', rtcProps.token);
+      console.log('error', data.error);
+      setRtcProps({
+        appId: $config.APP_ID,
+        channel: data.joinChannel.channel,
+        uid: data.joinChannel.mainUser.uid,
+        token: data.joinChannel.mainUser.rtc,
+        rtm: data.joinChannel.mainUser.rtm,
+        dual: true,
+        profile: $config.PROFILE,
+        encryption: $config.ENCRYPTION_ENABLED
+          ? {
+              key: data.joinChannel.secret,
+              mode: RnEncryptionEnum.AES128XTS,
+              screenKey: data.joinChannel.secret,
+            }
+          : false,
+        screenShareUid: data.joinChannel.screenShare.uid,
+        screenShareToken: data.joinChannel.screenShare.rtc,
+      });
+      setIsHost(data.joinChannel.isHost);
+      setTitle(data.joinChannel.title);
+      console.log('query done: ', data, queryComplete);
+      // 1. Store the display name from API
       if (data.getUser) {
         setUsername(data.getUser.name);
-      } else {
-        setUsername('');
       }
+      console.log('token:', rtcProps.token);
+      queryComplete ? {} : setQueryComplete(true);
     }
-    console.log('token:', rtcProps.token);
-    queryComplete ? {} : setQueryComplete(true);
-  }
+  }, [error, loading, data]);
 
   const history = useHistory();
   const callbacks = {
@@ -300,6 +307,14 @@ const VideoCall: React.FC = () => {
         history.push('/');
       }, 0),
   };
+
+  React.useEffect(() => {
+    // Update the username in localstorage when username changes
+    if (setStore) {
+      setStore({token: store?.token || null, displayName: username});
+    }
+  }, [username]);
+
   // throw new Error("My first Sentry error!");
   return (
     <>
@@ -350,7 +365,11 @@ const VideoCall: React.FC = () => {
                                 setLastCheckedPublicState
                               }
                             />
-                            <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
+                            <View
+                              style={[
+                                style.videoView,
+                                {backgroundColor: '#ffffff00'},
+                              ]}>
                               {layout === Layout.Pinned ? (
                                 <PinnedVideo />
                               ) : (

package/template/src/subComponents/LogoutButton.tsx

@@ -31,7 +31,7 @@ const LogoutButton = () => {
 
   const logout = () => {
     if (setStore) {
-      setStore({token: null});
+      setStore({token: null, displayName: ''});
     }
     logoutQuery({variables: {token}}).catch((e) => {
       console.log(e);

package/template/webpack.commons.js

@@ -94,6 +94,7 @@ module.exports = {
             plugins: [
               // Adds support for class properties
               ['transform-define', configVars],
+              '@babel/plugin-proposal-optional-chaining',
               '@babel/plugin-proposal-class-properties',
               isDevelopment && require.resolve('react-refresh/babel'),
             ].filter(Boolean),