agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.7

package/template/src/pages/Create.tsx

@@ -41,9 +41,26 @@ import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {randomNameGenerator} from '../utils';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
+import IDPLogoutComponent from '../auth/IDPLogoutComponent';
+import isSDK from '../utils/isSDK';
+import {
+  createRoomAllowPhoneNumberJoining,
+  createRoomAllowPhoneNumberJoiningTooltipText,
+  createRoomBtnText,
+  createRoomErrorToastHeading,
+  createRoomErrorToastSubHeading,
+  createRoomHeading,
+  createRoomInputLabel,
+  createRoomInputPlaceholderText,
+  createRoomJoinWithID,
+  createRoomMakeEveryOneCoHost,
+  createRoomMakeEveryOneCoHostTooltipText,
+  createRoomSuccessToastHeading,
+  createRoomSuccessToastSubHeading,
+} from '../language/default-labels/createScreenLabels';
 
 const Create = () => {
-  const {CreateComponent} = useCustomization((data) => {
+  const {CreateComponent} = useCustomization(data => {
     let components: {
       CreateComponent?: React.ElementType;
     } = {};
@@ -73,39 +90,64 @@ const Create = () => {
   const [roomCreated, setRoomCreated] = useState(false);
   const createRoomFun = useCreateRoom();
   const {setRoomInfo} = useSetRoomInfo();
-  //commented for v1 release
-  // const createdText = useString('meetingCreatedNotificationLabel')();
-  // const hostControlsToggle = useString<boolean>('hostControlsToggle');
-  // const pstnToggle = useString<boolean>('pstnToggle');
-  // const loadingWithDots = useString('loadingWithDots')();
-  // const createMeetingButton = useString('createMeetingButton')();
-  // const haveMeetingID = useString('haveMeetingID')();
 
-  const createdText = ' has been created';
-  // const meetingNameInputPlaceholder = useString(
-  //   'meetingNameInputPlaceholder',
-  // )();
-  const meetingNameInputPlaceholder = 'The Annual Galactic Meet';
-  const loadingWithDots = 'Loading...';
+  const loadingText = useString('loadingText')();
 
-  const btnLabel = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'CREATE A AUDIO LIVECAST';
-      } else {
-        return 'CREATE A VOICE CHAT';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'CREATE A STREAM';
-      } else {
-        return 'CREATE A ROOM';
-      }
-    }
-  };
+  //heading
+  const headingText = useString<any>(createRoomHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //heading
+
+  //input label
+  const inputLabel = useString<any>(createRoomInputLabel)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //input label
+
+  //placeholder
+  const placeHolderText = useString(createRoomInputPlaceholderText)();
+  //placeholder
+
+  //toggle
+  const everyoneCoHost = useString(createRoomMakeEveryOneCoHost)();
+  const everyoneCoHostTooltip = useString(
+    createRoomMakeEveryOneCoHostTooltipText,
+  )();
+  const allowPhoneNumberJoining = useString(
+    createRoomAllowPhoneNumberJoining,
+  )();
+  const allowPhoneNumberJoiningToolTip = useString(
+    createRoomAllowPhoneNumberJoiningTooltipText,
+  )();
+  //toggle
+
+  //create button
+  const createBtnText = useString<any>(createRoomBtnText)({
+    audioRoom: $config.AUDIO_ROOM,
+    eventMode: $config.EVENT_MODE,
+  });
+  //create button
+
+  const joinWithRoomID = useString(createRoomJoinWithID)();
+
+  //toast
+  const createRoomSuccessToastHeadingText = useString(
+    createRoomSuccessToastHeading,
+  );
+  const createRoomSuccessToastSubHeadingText = useString(
+    createRoomSuccessToastSubHeading,
+  )();
+  //toast
 
-  const createMeetingButton = btnLabel();
-  const haveMeetingID = 'Join with a room ID';
+  const createRoomErrorToastHeadingText = useString(
+    createRoomErrorToastHeading,
+  )();
+  const createRoomErrorToastSubHeadingText = useString(
+    createRoomErrorToastSubHeading,
+  )();
 
   const isDesktop = !isMobileUA();
   useEffect(() => {
@@ -116,7 +158,7 @@ const Create = () => {
     //   )}-${randomNameGenerator(3)}`,
     // );
 
-    if (isWebInternal()) {
+    if (isWebInternal() && !isSDK) {
       document.title = $config.APP_NAME;
     }
     console.log('[SDKEvents] Join listener registered');
@@ -141,17 +183,29 @@ const Create = () => {
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
         setLoading(false);
         Toast.show({
+          leadingIconName: 'tick-fill',
           type: 'success',
-          text1: trimText(roomTitle) + createdText,
-          text2: 'Your New room is now live',
+          text1: createRoomSuccessToastHeadingText(trimText(roomTitle)),
+          text2: createRoomSuccessToastSubHeadingText,
           visibilityTime: 3000,
           primaryBtn: null,
           secondaryBtn: null,
+          leadingIcon: null,
         });
         showShareScreen();
       } catch (error) {
         setLoading(false);
-        setGlobalErrorMessage(error);
+        if (
+          createRoomErrorToastHeadingText ||
+          createRoomErrorToastSubHeadingText
+        ) {
+          setGlobalErrorMessage({
+            name: createRoomErrorToastHeadingText,
+            message: createRoomErrorToastSubHeadingText,
+          });
+        } else {
+          setGlobalErrorMessage(error);
+        }
       }
     }
   };
@@ -173,46 +227,16 @@ const Create = () => {
     );
   };
 
-  const getHeading = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'Create a Audio Livecast';
-      } else {
-        return 'Create a Voice Chat';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'Create a Livestream';
-      } else {
-        return 'Create a Room';
-      }
-    }
-  };
-
-  const getInputLabel = () => {
-    if ($config.AUDIO_ROOM) {
-      if ($config.EVENT_MODE) {
-        return 'Audio Livecast Name';
-      } else {
-        return 'Voice Chat Name';
-      }
-    } else {
-      if ($config.EVENT_MODE) {
-        return 'Stream Name';
-      } else {
-        return 'Room Name';
-      }
-    }
-  };
-
   const showError = () => {
     Toast.show({
+      leadingIconName: 'alert',
       type: 'error',
       text1: 'Backend endpoint not configured',
       text2: 'Please configure backend endpoint config.json',
       visibilityTime: 1000 * 10,
       primaryBtn: null,
       secondaryBtn: null,
+      leadingIcon: null,
     });
   };
 
@@ -226,20 +250,34 @@ const Create = () => {
           <CreateComponent />
         ) : (
           <View style={style.root}>
+            {!isMobileUA() ? (
+              <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+            ) : (
+              <></>
+            )}
             <ScrollView contentContainerStyle={style.main}>
               <Card>
                 <View>
-                  <Logo />
+                  <View style={style.logoContainerStyle}>
+                    <Logo />
+                    {isMobileUA() ? (
+                      <IDPLogoutComponent
+                        containerStyle={{marginTop: 0, marginRight: 0}}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </View>
                   <Spacer size={isDesktop ? 20 : 16} />
-                  <Text style={style.heading}>{getHeading()}</Text>
+                  <Text style={style.heading}>{headingText}</Text>
                   <Spacer size={40} />
                   <Input
                     maxLength={maxInputLimit}
                     labelStyle={style.inputLabelStyle}
-                    label={getInputLabel()}
+                    label={inputLabel}
                     value={roomTitle}
-                    placeholder={meetingNameInputPlaceholder}
-                    onChangeText={(text) => onChangeRoomTitle(text)}
+                    placeholder={placeHolderText}
+                    onChangeText={text => onChangeRoomTitle(text)}
                     onSubmitEditing={() => {
                       if (!roomTitle?.trim()) {
                         return;
@@ -270,18 +308,19 @@ const Create = () => {
                       ]}>
                       <View style={style.infoContainer}>
                         <Text numberOfLines={1} style={style.toggleLabel}>
-                          Make everyone a Co-Host
+                          {everyoneCoHost}
                         </Text>
                         <Tooltip
                           activeBgStyle={style.tooltipActiveBgStyle}
                           defaultBgStyle={style.tooltipDefaultBgStyle}
-                          toolTipMessage="Turning on will give everyone the control of this room"
+                          toolTipMessage={everyoneCoHostTooltip}
                           renderContent={(
                             isToolTipVisible,
                             setToolTipVisible,
                           ) =>
                             renderInfoIcon(isToolTipVisible, setToolTipVisible)
-                          }></Tooltip>
+                          }
+                        />
                       </View>
                       <View style={style.infoToggleContainer}>
                         <Toggle
@@ -303,12 +342,12 @@ const Create = () => {
                         ]}>
                         <View style={style.infoContainer}>
                           <Text numberOfLines={1} style={style.toggleLabel}>
-                            Allow joining via a phone number
+                            {allowPhoneNumberJoining}
                           </Text>
                           <Tooltip
                             activeBgStyle={style.tooltipActiveBgStyle}
                             defaultBgStyle={style.tooltipDefaultBgStyle}
-                            toolTipMessage="Attendees can dial a number and join via PSTN"
+                            toolTipMessage={allowPhoneNumberJoiningToolTip}
                             renderContent={(
                               isToolTipVisible,
                               setToolTipVisible,
@@ -317,7 +356,8 @@ const Create = () => {
                                 isToolTipVisible,
                                 setToolTipVisible,
                               )
-                            }></Tooltip>
+                            }
+                          />
                         </View>
                         <View style={style.infoToggleContainer}>
                           <Toggle
@@ -350,11 +390,11 @@ const Create = () => {
                         );
                       }
                     }}
-                    text={loading ? loadingWithDots : createMeetingButton}
+                    text={loading ? loadingText : createBtnText}
                   />
                   <Spacer size={16} />
                   <LinkButton
-                    text={haveMeetingID}
+                    text={joinWithRoomID}
                     onPress={() => history.push('/join')}
                   />
                 </View>
@@ -371,6 +411,11 @@ const Create = () => {
 };
 
 const style = StyleSheet.create({
+  logoContainerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   root: {
     flex: 1,
   },

package/template/src/pages/Join.tsx

@@ -38,23 +38,52 @@ 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';
 
-const isLiveStream = $config.EVENT_MODE;
 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 = isLiveStream
-    ? 'Enter Stream ID'
-    : 'Enter Room ID';
-  const enterMeetingButton = isLiveStream ? 'Join Stream' : 'Join Room';
-  const createMeetingButton = isLiveStream
-    ? 'Create a Stream'
-    : 'Create a Room';
+
+  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}>(
@@ -74,22 +103,26 @@ const Join = () => {
         history.push(phrase);
       })
 
-      .catch((error) => {
+      .catch(error => {
         const isInvalidUrl =
-          error?.message.toLowerCase().trim() === 'invalid url' || false;
+          error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
         Toast.show({
+          leadingIconName: 'alert',
           type: 'error',
-          text1: isInvalidUrl ? 'Room ID Invalid.' : 'Some Error Occured.',
+          text1: isInvalidUrl
+            ? invalidRoomIdToastHeading
+            : 'Some Error Occured.',
           text2: isInvalidUrl
-            ? 'Please enter a valid Room ID'
+            ? 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;
     } = {};
@@ -108,28 +141,35 @@ const Join = () => {
     <JoinComponent />
   ) : (
     <View style={style.root}>
+      {!isMobileUA() ? (
+        <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+      ) : (
+        <></>
+      )}
       <ScrollView contentContainerStyle={style.main}>
         {error ? <Error error={error} /> : <></>}
         <Card>
           <View>
-            <Logo />
+            <View style={style.logoContainerStyle}>
+              <Logo />
+              {isMobileUA() ? (
+                <IDPLogoutComponent
+                  containerStyle={{marginTop: 0, marginRight: 0}}
+                />
+              ) : (
+                <></>
+              )}
+            </View>
             <Spacer size={20} />
-            <Text style={style.heading}>
-              {isLiveStream ? 'Join a Stream' : 'Join a Room'}
-            </Text>
+            <Text style={style.heading}>{headingText}</Text>
             <Spacer size={40} />
             <Input
               labelStyle={style.labelStyle}
-              label={isLiveStream ? 'Stream ID' : 'Room ID'}
+              label={inputLabel}
               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)}
+              placeholder={placeHolderText}
+              onChangeText={text => setPhrase(text)}
               onSubmitEditing={() => startCall()}
             />
             <Spacer size={60} />
@@ -139,14 +179,11 @@ const Join = () => {
               iconName="video-on"
               disabled={phrase === ''}
               onPress={() => startCall()}
-              text={enterMeetingButton}
+              text={joinBtnText}
               containerStyle={isMobileUA() && {width: '100%'}}
             />
             <Spacer size={16} />
-            <LinkButton
-              text={createMeetingButton}
-              onPress={() => createMeeting()}
-            />
+            <LinkButton text={createBtnText} onPress={() => createMeeting()} />
             {shouldAuthenticate ? (
               <LogoutButton
                 //@ts-ignore
@@ -163,6 +200,11 @@ const Join = () => {
 };
 
 const style = StyleSheet.create({
+  logoContainerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   btnContainer: {
     width: '100%',
     alignItems: 'center',

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',
+  },
+});