agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/pages/Endcall.tsx

@@ -0,0 +1,148 @@
+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';
+
+/* For android only, bg audio */
+const StopForegroundService = () => {
+  if (Platform.OS === 'android') {
+    ReactNativeForegroundService.stop();
+    console.log('stopping foreground service');
+  }
+};
+
+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} 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,8 +29,18 @@ 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';
+
+const isLiveStream = $config.EVENT_MODE;
+const mobileOrTablet = isMobileOrTablet();
 
 const Join = () => {
   const hasBrandLogo = useHasBrandLogo();
@@ -36,22 +48,46 @@ const Join = () => {
   // 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 meetingIdInputPlaceholder = isLiveStream
+    ? 'Enter Stream ID'
+    : 'Enter Room ID';
+  const enterMeetingButton = isLiveStream ? 'Join Stream' : 'Join Room';
+  const createMeetingButton = isLiveStream
+    ? 'Create a Stream'
+    : 'Create a Room';
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
-  const {setMeetingInfo} = useSetMeetingInfo();
+
+  const useJoin = useJoinRoom();
+  const {setRoomInfo} = useSetRoomInfo();
   const createMeeting = () => {
     history.push('/create');
   };
 
   const startCall = async () => {
-    setMeetingInfo(MeetingInfoDefaultValue);
-    history.push(phrase);
+    useJoin(phrase)
+      .then(() => {
+        setRoomInfo(RoomInfoDefaultValue);
+        history.push(phrase);
+      })
+
+      .catch((error) => {
+        const isInvalidUrl =
+          error?.message.toLowerCase().trim() === 'invalid url' || false;
+        Toast.show({
+          type: 'error',
+          text1: isInvalidUrl ? 'Room ID Invalid.' : 'Some Error Occured.',
+          text2: isInvalidUrl
+            ? 'Please enter a valid Room ID'
+            : 'Please try again',
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+        });
+      });
   };
   const {JoinComponent} = useCustomization((data) => {
     let components: {
@@ -71,93 +107,83 @@ const Join = () => {
   return JoinComponent ? (
     <JoinComponent />
   ) : (
-    <ScrollView contentContainerStyle={style.main}>
-      <View style={style.nav}>
-        {hasBrandLogo() && <Logo />}
+    <View style={style.root}>
+      <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>
+            <Logo />
+            <Spacer size={20} />
+            <Text style={style.heading}>
+              {isLiveStream ? 'Join a Stream' : 'Join a Room'}
+            </Text>
+            <Spacer size={40} />
+            <Input
+              labelStyle={style.labelStyle}
+              label={isLiveStream ? 'Stream ID' : 'Room ID'}
+              autoFocus
               value={phrase}
+              helpText={
+                isLiveStream
+                  ? 'Enter the stream ID here for the room you’d like to join'
+                  : 'Enter the room ID here for the room you’d like to join'
+              }
+              placeholder={meetingIdInputPlaceholder}
               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}
+              containerStyle={isMobileUA() && {width: '100%'}}
             />
-            <HorizontalRule />
-            <SecondaryButton
-              onPress={() => createMeeting()}
+            <Spacer size={16} />
+            <LinkButton
               text={createMeetingButton}
+              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,
+  btnContainer: {
     width: '100%',
-    flexDirection: 'row',
     alignItems: 'center',
-    alignSelf: 'center',
-    justifyContent: 'center',
   },
-  content: {flex: 6, flexDirection: 'row'},
-  leftContent: {
-    width: '100%',
-    minHeight: 300,
+  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,
   },
 });