agora-appbuilder-core 1.0.6 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "1.0.6",
+  "version": "1.0.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -10,7 +10,9 @@
   "scripts": {
     "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout ab-dev-auto",
     "deps": "cd template && npm i",
-    "dev-setup": "npm run uikit && npm run deps && node devSetup.js"
+    "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
+    "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
+    "copy-vercel": "cp vercel.json template/dist"
   },
   "author": {
     "email": "svineth.face@gmail.com",

package/template/electron/main/index.js

@@ -62,24 +62,42 @@ autoUpdater.on('update-downloaded', (info) => {
 });
 
 const createWindow = () => {
-  let template = [];
   const name = app.getName();
-  template.unshift({
-    label: name,
-    submenu: [
-      {
-        label: 'About ' + name,
-        role: 'about',
-      },
-      {
-        label: 'Quit',
-        accelerator: 'Command+Q',
-        click() {
-          app.quit();
+  const template = [
+    {
+      label: name,
+      submenu: [
+        {
+          label: 'About ' + name,
+          role: 'about',
         },
-      },
-    ],
-  });
+        {type: 'separator'},
+        {
+          label: 'Quit',
+          accelerator: 'Command+Q',
+          click() {
+            app.quit();
+          },
+        },
+      ],
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        {label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:'},
+        {label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:'},
+        {type: 'separator'},
+        {label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:'},
+        {label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:'},
+        {label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:'},
+        {
+          label: 'Select All',
+          accelerator: 'CmdOrCtrl+A',
+          selector: 'selectAll:',
+        },
+      ],
+    },
+  ];
   autoUpdater.checkForUpdatesAndNotify();
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "HelloWorld",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": ".electron/index.js",
   "scripts": {
@@ -49,7 +49,7 @@
     "@sentry/react-native": "2.4.3",
     "@sentry/tracing": "6.2.1",
     "agora-react-native-rtm": "1.2.2-alpha.3",
-    "agora-rtc-sdk-ng": "4.5.0",
+    "agora-rtc-sdk-ng": "4.6.3",
     "agora-rtm-sdk": "1.4.3",
     "electron-log": "^4.3.5",
     "electron-squirrel-startup": "1.0.0",
@@ -70,11 +70,13 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
+    "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@babel/preset-env": "7.14.4",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "7.14.0",
-    "@bam.tech/react-native-make": "3.0.0",
+    "@bam.tech/react-native-make": "3.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.3.3",
     "@react-native-community/eslint-config": "1.1.0",
     "@types/jest": "25.2.3",
@@ -91,7 +93,7 @@
     "babel-plugin-transform-define": "2.0.0",
     "cross-env": "7.0.3",
     "del": "5.1.0",
-    "electron": "5.0.8",
+    "electron": "16.0.1",
     "electron-builder": "22.10.5",
     "electron-notarize": "1.0.0",
     "eslint": "6.8.0",

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';
@@ -25,6 +19,7 @@ import {LocalAudioMute, LocalVideoMute} from '../../agora-rn-uikit/Components';
 import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
 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';
@@ -39,6 +34,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]);
   };
@@ -50,7 +46,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>
@@ -94,17 +90,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 +137,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 +155,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/Authenticate.tsx

@@ -20,6 +20,7 @@ import {
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
+import hasBrandLogo from '../utils/hasBrandLogo';
 
 const Authenticate = () => {
   const [dim, setDim] = useState([
@@ -37,13 +38,13 @@ const Authenticate = () => {
       style={style.full}
       resizeMode={'cover'}>
       <View style={style.main}>
-        <View style={style.nav}>
-          <Logo />
-        </View>
+        <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
         <View style={style.content}>
           <View style={style.leftContent}>
             <Text style={style.heading}>Login using OAuth</Text>
-            <Text style={style.headline}>Please select an OAuth provider to login.</Text>
+            <Text style={style.headline}>
+              Please select an OAuth provider to login.
+            </Text>
             <OAuth />
           </View>
           {dim[0] > dim[1] + 150 ? (

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';
@@ -31,6 +26,7 @@ import HorizontalRule from '../atoms/HorizontalRule';
 import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import Toast from '../../react-native-toast-message';
+import hasBrandLogo from '../utils/hasBrandLogo';
 
 type PasswordInput = {
   host: string;
@@ -38,8 +34,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,9 +115,9 @@ 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 />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
         {/* <OpenInNativeButton /> */}
       </View>
@@ -179,17 +183,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,15 +10,12 @@
 *********************************************
 */
 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';
 import Logo from '../subComponents/Logo';
+import hasBrandLogo from '../utils/hasBrandLogo';
 import LogoutButton from '../subComponents/LogoutButton';
 import ColorContext from '../components/ColorContext';
 // import Illustration from '../subComponents/Illustration';
@@ -38,8 +35,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 +55,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 />
+        {hasBrandLogo && <Logo />}
         {error ? <Error error={error} /> : <></>}
-        {/* <OpenInNativeButton /> */}
       </View>
       <View style={style.content}>
         <View style={style.leftContent}>
@@ -99,28 +91,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,