agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/pages/Endcall.tsx

@@ -0,0 +1,153 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {StyleSheet, View, Text, Platform} from 'react-native';
+import PrimaryButton from '../atoms/PrimaryButton';
+import TertiaryButton from '../atoms/TertiaryButton';
+import Spacer from '../atoms/Spacer';
+import {Logo} from '../components/common';
+import {useHistory} from '../components/Router';
+import StorageContext from '../components/StorageContext';
+import ThemeConfig from '../theme';
+import ReactNativeForegroundService from '@supersami/rn-foreground-service';
+import CircularProgress from '../atoms/CircularProgress';
+import {useIsDesktop} from '../utils/common';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
+
+/* For android only, bg audio */
+const StopForegroundService = () => {
+  if (Platform.OS === 'android') {
+    ReactNativeForegroundService.stop();
+    logger.debug(
+      LogSource.Internals,
+      'CONTROLS',
+      'End call - stopping foreground service, bg audio for android only',
+    );
+  }
+};
+
+const Endcall = () => {
+  const leftMeetingLabel = 'You have left the room.';
+  const rejoinBtnLabel = 'REJOIN';
+  const createMeetingLabel = 'START NEW ROOM';
+  const returnToHomeLabel = 'Returning to the home screen';
+  const {store} = useContext(StorageContext);
+  const history = useHistory();
+
+  const onComplete = React.useCallback(() => {
+    history.push('/');
+    StopForegroundService();
+  }, []);
+
+  const isDesktop = useIsDesktop();
+
+  const reJoin = () => {
+    StopForegroundService();
+  };
+  const goToCreate = () => {
+    history.push('/');
+    StopForegroundService();
+  };
+  return (
+    <View style={styles.main}>
+      <View
+        style={[
+          styles.contentContainer,
+          isDesktop() && {alignItems: 'center'},
+        ]}>
+        <View style={{alignSelf: 'center'}}>
+          <Logo />
+        </View>
+        <Spacer size={20} />
+        <Text
+          style={[
+            styles.heading,
+            !isDesktop() && {fontSize: 20, lineHeight: 25},
+          ]}>
+          {leftMeetingLabel}
+        </Text>
+        <Spacer size={40} />
+        <View
+          style={isDesktop() ? styles.btnContainer : styles.btnContainerMobile}>
+          <TertiaryButton
+            containerStyle={{
+              height: 60,
+              paddingHorizontal: 34,
+              paddingVertical: 20,
+              borderRadius: 8,
+              minWidth: isDesktop() ? 'auto' : '100%',
+              marginRight: isDesktop() ? 12 : 0,
+            }}
+            textStyle={styles.btnText}
+            text={rejoinBtnLabel}
+            onPress={() => {
+              reJoin();
+            }}
+          />
+
+          <PrimaryButton
+            containerStyle={{
+              height: 60,
+              minWidth: isDesktop() ? 'auto' : '100%',
+              marginBottom: isDesktop() ? 0 : 20,
+              paddingHorizontal: 30,
+              paddingVertical: 20,
+            }}
+            text={createMeetingLabel}
+            textStyle={styles.btnText}
+            onPress={() => {
+              goToCreate();
+            }}
+          />
+        </View>
+      </View>
+      <View style={styles.bottomContainer}>
+        <CircularProgress onComplete={onComplete} timer={60} />
+        <Spacer size={10} />
+        <Text style={styles.returnHomeText}>{returnToHomeLabel}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default Endcall;
+
+const styles = StyleSheet.create({
+  returnHomeText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 18,
+    color: $config.FONT_COLOR,
+    textAlign: 'center',
+  },
+  bottomContainer: {
+    marginBottom: 28,
+  },
+  main: {
+    flex: 1,
+    paddingHorizontal: 40,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 40,
+    lineHeight: 40,
+    color: $config.FONT_COLOR,
+    alignSelf: 'center',
+  },
+});

package/template/src/pages/Join.tsx

@@ -9,12 +9,14 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-// @ts-nocheck
-import React, {useState} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
-import Logo from '../subComponents/Logo';
+//import Logo from '../subComponents/Logo';
+import Logo from '../components/common/Logo';
+import Spacer from '../atoms/Spacer';
 import {
+  isMobileUA,
   isValidReactComponent,
   shouldAuthenticate,
   useHasBrandLogo,
@@ -27,33 +29,142 @@ import TextInput from '../atoms/TextInput';
 import Error from '../subComponents/Error';
 import {useString} from '../utils/useString';
 import {useCustomization} from 'customization-implementation';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
-import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import {RoomInfoDefaultValue} from '../components/room-info/useRoomInfo';
+import Card from '../atoms/Card';
+import Input from '../atoms/Input';
+import LinkButton from '../atoms/LinkButton';
+import Toast from '../../react-native-toast-message';
+import useJoinRoom from '../utils/useJoinRoom';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
+import ThemeConfig from '../theme';
+import IDPLogoutComponent from '../auth/IDPLogoutComponent';
+import {
+  joinRoomBtnText,
+  joinRoomCreateBtnText,
+  joinRoomErrorToastHeading,
+  joinRoomErrorToastSubHeading,
+  joinRoomHeading,
+  joinRoomInputLabel,
+  joinRoomInputPlaceHolderText,
+} from '../language/default-labels/joinScreenLabels';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+const mobileOrTablet = isMobileOrTablet();
 
 const Join = () => {
   const hasBrandLogo = useHasBrandLogo();
-  //commented for v1 release
-  // const meetingIdInputPlaceholder = useString('meetingIdInputPlaceholder')();
-  // const enterMeetingButton = useString('enterMeetingButton')();
-  // const createMeetingButton = useString('createMeetingButton')();
-  const meetingIdInputPlaceholder = 'Enter Meeting ID';
-  const enterMeetingButton = 'Enter Meeting';
-  const createMeetingButton = 'Create Meeting';
+
+  const headingText = useString<any>(joinRoomHeading)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const inputLabel = useString<any>(joinRoomInputLabel)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const placeHolderText = useString<any>(joinRoomInputPlaceHolderText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const joinBtnText = useString<any>(joinRoomBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const createBtnText = useString<any>(joinRoomCreateBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  //toast
+  const invalidRoomIdToastHeading = useString<any>(joinRoomErrorToastHeading)({
+    eventMode: $config.EVENT_MODE,
+  });
+  const invalidRoomIdToastSubheading = useString<any>(
+    joinRoomErrorToastSubHeading,
+  )({
+    eventMode: $config.EVENT_MODE,
+  });
+
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
-  const {setMeetingInfo} = useSetMeetingInfo();
+
+  const apiJoinCall = useJoinRoom();
+  const {setRoomInfo} = useSetRoomInfo();
+
   const createMeeting = () => {
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'User is navigated to create-room screen',
+    );
     history.push('/create');
   };
 
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'user landed on join-meeting screen',
+    );
+  }, []);
+
   const startCall = async () => {
-    setMeetingInfo(MeetingInfoDefaultValue);
-    history.push(phrase);
+    logger.log(
+      LogSource.Internals,
+      'JOIN_MEETING',
+      'User wants to join meeting',
+      phrase,
+    );
+    apiJoinCall(phrase)
+      .then(() => {
+        setRoomInfo(RoomInfoDefaultValue);
+        logger.log(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Navigating the user to precall screen or video call screen depending upon the project config',
+          phrase,
+        );
+        history.push(phrase);
+      })
+      .catch(error => {
+        logger.error(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Error on join room page',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
+        const isInvalidUrl =
+          error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: isInvalidUrl
+            ? invalidRoomIdToastHeading
+            : 'Some Error Occured.',
+          text2: isInvalidUrl
+            ? invalidRoomIdToastSubheading
+            : 'Please try again',
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
+        });
+      });
   };
-  const {JoinComponent} = useCustomization((data) => {
+
+  const {JoinComponent} = useCustomization(data => {
     let components: {
       JoinComponent?: React.ComponentType;
     } = {};
@@ -71,93 +182,92 @@ const Join = () => {
   return JoinComponent ? (
     <JoinComponent />
   ) : (
-    <ScrollView contentContainerStyle={style.main}>
-      <View style={style.nav}>
-        {hasBrandLogo() && <Logo />}
+    <View style={style.root}>
+      {!isMobileUA() ? (
+        <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+      ) : (
+        <></>
+      )}
+      <ScrollView contentContainerStyle={style.main}>
         {error ? <Error error={error} /> : <></>}
-      </View>
-      <View style={style.content}>
-        <View style={style.leftContent}>
-          <Text style={style.heading}>{$config.APP_NAME}</Text>
-          <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
-          <View style={style.inputs}>
-            <TextInput
+        <Card>
+          <View>
+            <View style={style.logoContainerStyle}>
+              <Logo />
+              {isMobileUA() ? (
+                <IDPLogoutComponent
+                  containerStyle={{marginTop: 0, marginRight: 0}}
+                />
+              ) : (
+                <></>
+              )}
+            </View>
+            <Spacer size={20} />
+            <Text style={style.heading}>{headingText}</Text>
+            <Spacer size={40} />
+            <Input
+              labelStyle={style.labelStyle}
+              label={inputLabel}
+              autoFocus
               value={phrase}
-              onChangeText={(text) => setPhrase(text)}
+              placeholder={placeHolderText}
+              onChangeText={text => setPhrase(text)}
               onSubmitEditing={() => startCall()}
-              placeholder={meetingIdInputPlaceholder}
             />
-            <View style={{height: 10}} />
+            <Spacer size={60} />
+          </View>
+          <View style={style.btnContainer}>
             <PrimaryButton
+              iconName="video-on"
               disabled={phrase === ''}
               onPress={() => startCall()}
-              text={enterMeetingButton}
-            />
-            <HorizontalRule />
-            <SecondaryButton
-              onPress={() => createMeeting()}
-              text={createMeetingButton}
+              text={joinBtnText}
+              containerStyle={isMobileUA() && {width: '100%'}}
             />
+            <Spacer size={16} />
+            <LinkButton text={createBtnText} onPress={() => createMeeting()} />
             {shouldAuthenticate ? (
-              <LogoutButton setError={setError} /> //setError not available in logout?
+              <LogoutButton
+                //@ts-ignore
+                setError={setError}
+              /> //setError not available in logout?
             ) : (
               <></>
             )}
           </View>
-        </View>
-      </View>
-    </ScrollView>
+        </Card>
+      </ScrollView>
+    </View>
   );
 };
 
 const style = StyleSheet.create({
-  illustration: {flex: 1, alignSelf: 'flex-end'},
-  main: {
-    paddingVertical: '8%',
-    marginHorizontal: '8%',
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    flexGrow: 1,
-  },
-  nav: {
-    flex: 1,
-    width: '100%',
+  logoContainerStyle: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    alignSelf: 'center',
-    justifyContent: 'center',
   },
-  content: {flex: 6, flexDirection: 'row'},
-  leftContent: {
+  btnContainer: {
     width: '100%',
-    minHeight: 300,
+    alignItems: 'center',
+  },
+  labelStyle: {
+    paddingLeft: 8,
+  },
+  root: {
     flex: 1,
-    justifyContent: 'space-evenly',
-    marginBottom: '15%',
-    marginTop: '8%',
-    // marginRight: '5%',
-    marginHorizontal: 'auto',
+  },
+  main: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
   heading: {
-    fontSize: 32,
+    fontSize: ThemeConfig.FontSize.extraLarge,
     fontWeight: '700',
-    textAlign: 'center',
-    color: $config.PRIMARY_FONT_COLOR,
-    marginBottom: 20,
-  },
-  headline: {
-    fontSize: 18,
-    fontWeight: '400',
-    textAlign: 'center',
-    color: $config.PRIMARY_FONT_COLOR,
-    marginBottom: 20,
-  },
-  inputs: {
-    flex: 1,
-    width: '100%',
-    alignSelf: 'flex-start',
-    alignItems: 'center',
-    justifyContent: 'space-evenly',
+    lineHeight: ThemeConfig.FontSize.extraLarge,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
   },
 });
 

package/template/src/pages/Login.tsx

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Logo} from '../components/common';
+import PrimaryButton from '../atoms/PrimaryButton';
+import {useAuth} from '../auth/AuthProvider';
+import Spacer from '../atoms/Spacer';
+
+export default function Login() {
+  const {authLogin} = useAuth();
+
+  return (
+    <View style={styles.container}>
+      <Logo />
+      <Spacer size={20} />
+      <PrimaryButton onPress={authLogin} text={'LOGIN/SIGNUP'} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});