agora-appbuilder-core 3.0.9 → 3.0.10

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 meeting.';
+  const rejoinBtnLabel = 'REJOIN';
+  const createMeetingLabel = 'START NEW MEETING';
+  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,
@@ -29,6 +31,16 @@ 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 Card from '../atoms/Card';
+import Input from '../atoms/Input';
+import LinkButton from '../atoms/LinkButton';
+import Toast from '../../react-native-toast-message';
+import useJoinMeeting from '../utils/useJoinMeeting';
+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 Meeting ID';
+  const enterMeetingButton = isLiveStream ? 'Join Stream' : 'Join Meeting';
+  const createMeetingButton = isLiveStream
+    ? 'Create a Stream'
+    : 'Create a meeting';
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
+
+  const useJoin = useJoinMeeting();
   const {setMeetingInfo} = useSetMeetingInfo();
   const createMeeting = () => {
     history.push('/create');
   };
 
   const startCall = async () => {
-    setMeetingInfo(MeetingInfoDefaultValue);
-    history.push(phrase);
+    useJoin(phrase)
+      .then(() => {
+        setMeetingInfo(MeetingInfoDefaultValue);
+        history.push(phrase);
+      })
+
+      .catch((error) => {
+        const isInvalidUrl =
+          error?.message.toLowerCase().trim() === 'invalid url' || false;
+        Toast.show({
+          type: 'error',
+          text1: isInvalidUrl ? 'Meeting ID Invalid.' : 'Some Error Occured.',
+          text2: isInvalidUrl
+            ? 'Please enter a valid Meeting 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 Meeting'}
+            </Text>
+            <Spacer size={40} />
+            <Input
+              labelStyle={style.labelStyle}
+              label={isLiveStream ? 'Stream ID' : 'Meeting ID'}
+              autoFocus
               value={phrase}
+              helpText={
+                isLiveStream
+                  ? 'Enter the stream ID here for the meeting you’d like to join'
+                  : 'Enter the meeting ID here for the meeting 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,
   },
 });
 

package/template/src/pages/VideoCall.tsx

@@ -11,7 +11,7 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect} from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
 import {
   RtcConfigure,
   PropsProvider,
@@ -24,7 +24,7 @@ import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {useHasBrandLogo, isArray} from '../utils/common';
+import {useHasBrandLogo, isArray, isMobileUA} from '../utils/common';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
@@ -54,6 +54,9 @@ import {useWakeLock} from '../components/useWakeLock';
 import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
 import EventsConfigure from '../components/EventsConfigure';
+import PermissionHelper from '../components/precall/PermissionHelper';
+import {currentFocus, FocusProvider} from '../utils/useFocus';
+import {VideoCallProvider} from '../components/useVideoCall';
 
 enum RnEncryptionEnum {
   /**
@@ -99,6 +102,9 @@ const VideoCall: React.FC = () => {
   const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
+  const [currentFocus, setFocus] = useState<currentFocus>({
+    editName: false,
+  });
   const {phrase} = useParams<{phrase: string}>();
   // commented for v1 release
   //const lifecycle = useCustomization((data) => data.lifecycle);
@@ -136,6 +142,7 @@ const VideoCall: React.FC = () => {
       .then(() => {})
       .catch((error) => {
         setGlobalErrorMessage(error);
+        history.push('/');
       });
   }, []);
 
@@ -181,7 +188,10 @@ const VideoCall: React.FC = () => {
         history.push('/');
       }, 0),
   };
-
+  const [isCameraAvailable, setCameraAvailable] = useState(false);
+  const [isMicAvailable, setMicAvailable] = useState(false);
+  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
+  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
   return (
     <>
       {queryComplete ? (
@@ -210,65 +220,80 @@ const VideoCall: React.FC = () => {
                           currentLayout,
                           setLayout,
                         }}>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
-                          <ChatMessagesProvider>
-                            <ScreenShareProvider>
-                              <RtmConfigure
-                                setRecordingActive={setRecordingActive}
-                                callActive={callActive}>
-                                <UserPreferenceProvider>
-                                  <EventsConfigure>
-                                    <WhiteboardProvider>
-                                      <RecordingProvider
-                                        value={{
-                                          setRecordingActive,
-                                          isRecordingActive,
-                                        }}>
-                                        <ScreenshareConfigure>
-                                          <LiveStreamContextProvider
-                                            value={{
-                                              setRtcProps,
-                                              rtcProps,
-                                              callActive,
-                                            }}>
-                                            <LiveStreamDataProvider>
-                                              <LocalUserContext
-                                                localUid={rtcProps?.uid || 0}>
-                                                <CustomUserContextHolder>
-                                                  <NetworkQualityProvider>
-                                                    {callActive ? (
-                                                      <VideoMeetingDataProvider>
-                                                        <VideoCallScreen />
-                                                      </VideoMeetingDataProvider>
-                                                    ) : $config.PRECALL ? (
-                                                      <PreCallProvider
-                                                        value={{
-                                                          callActive,
-                                                          setCallActive,
-                                                        }}>
-                                                        <Precall />
-                                                      </PreCallProvider>
-                                                    ) : (
-                                                      <></>
-                                                    )}
-                                                  </NetworkQualityProvider>
-                                                </CustomUserContextHolder>
-                                              </LocalUserContext>
-                                            </LiveStreamDataProvider>
-                                          </LiveStreamContextProvider>
-                                        </ScreenshareConfigure>
-                                      </RecordingProvider>
-                                    </WhiteboardProvider>
-                                  </EventsConfigure>
-                                </UserPreferenceProvider>
-                              </RtmConfigure>
-                            </ScreenShareProvider>
-                          </ChatMessagesProvider>
-                        </SidePanelProvider>
+                        <FocusProvider value={{currentFocus, setFocus}}>
+                          <SidePanelProvider
+                            value={{
+                              sidePanel,
+                              setSidePanel,
+                            }}>
+                            <ChatMessagesProvider>
+                              <ScreenShareProvider>
+                                <RtmConfigure
+                                  setRecordingActive={setRecordingActive}
+                                  callActive={callActive}>
+                                  <UserPreferenceProvider>
+                                    <EventsConfigure>
+                                      <WhiteboardProvider>
+                                        <RecordingProvider
+                                          value={{
+                                            setRecordingActive,
+                                            isRecordingActive,
+                                          }}>
+                                          <ScreenshareConfigure>
+                                            <LiveStreamContextProvider
+                                              value={{
+                                                setRtcProps,
+                                                rtcProps,
+                                                callActive,
+                                              }}>
+                                              <LiveStreamDataProvider>
+                                                <LocalUserContext
+                                                  localUid={rtcProps?.uid}>
+                                                  <CustomUserContextHolder>
+                                                    <NetworkQualityProvider>
+                                                      {!isMobileUA() && (
+                                                        <PermissionHelper />
+                                                      )}
+                                                      {callActive ? (
+                                                        <VideoMeetingDataProvider>
+                                                          <VideoCallProvider>
+                                                            <VideoCallScreen />
+                                                          </VideoCallProvider>
+                                                        </VideoMeetingDataProvider>
+                                                      ) : $config.PRECALL ? (
+                                                        <PreCallProvider
+                                                          value={{
+                                                            callActive,
+                                                            setCallActive,
+                                                            isCameraAvailable,
+                                                            isMicAvailable,
+                                                            setCameraAvailable,
+                                                            setMicAvailable,
+                                                            isPermissionRequested,
+                                                            setIsPermissionRequested,
+                                                            isSpeakerAvailable,
+                                                            setSpeakerAvailable,
+                                                          }}>
+                                                          <Precall />
+                                                        </PreCallProvider>
+                                                      ) : (
+                                                        <></>
+                                                      )}
+                                                    </NetworkQualityProvider>
+                                                  </CustomUserContextHolder>
+                                                </LocalUserContext>
+                                              </LiveStreamDataProvider>
+                                            </LiveStreamContextProvider>
+                                          </ScreenshareConfigure>
+                                        </RecordingProvider>
+                                      </WhiteboardProvider>
+                                    </EventsConfigure>
+                                  </UserPreferenceProvider>
+                                </RtmConfigure>
+                              </ScreenShareProvider>
+                            </ChatMessagesProvider>
+                          </SidePanelProvider>
+                        </FocusProvider>
                       </LayoutProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
@@ -302,7 +327,7 @@ const styleProps = {
     recording: styles.localButton,
     screenshare: styles.localButton,
   },
-  theme: $config.PRIMARY_COLOR,
+  theme: $config.PRIMARY_ACTION_BRAND_COLOR,
   remoteBtnStyles: {
     muteRemoteAudio: styles.remoteButton,
     muteRemoteVideo: styles.remoteButton,
@@ -330,7 +355,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: 30,
   },
-  loaderText: {fontWeight: '500', color: $config.PRIMARY_FONT_COLOR},
+  loaderText: {fontWeight: '500', color: $config.FONT_COLOR},
 });
 
 export default VideoCall;