agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/App.tsx

@@ -13,84 +13,116 @@ import React, {useState} from 'react';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
-import Authenticate from './pages/Authenticate';
-import {Router, Route, Switch, Redirect} from './components/Router';
+import {Route, Switch, Redirect} from './components/Router';
 import PrivateRoute from './components/PrivateRoute';
 import OAuth from './components/OAuth';
-import Navigation from './components/Navigation';
 import StoreToken from './components/StoreToken';
-import {StorageProvider} from './components/StorageContext';
-import GraphQLProvider from './components/GraphQLProvider';
-// import JoinPhrase from './components/JoinPhrase';
-import {SessionProvider} from './components/SessionContext';
-import {ImageBackground, Platform, SafeAreaView, StatusBar} from 'react-native';
-import ColorConfigure from './components/ColorConfigure';
-import Toast from '../react-native-toast-message';
-import ToastConfig from './subComponents/toastConfig';
-import shouldAuthenticate from './utils/shouldAuthenticate';
+import {shouldAuthenticate, isIOS} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
-
-
-if (Platform.OS === 'ios') {
+// commented for v1 release
+//import {useFpe, CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'fpe-api';
+import AppWrapper from './AppWrapper';
+import {
+  MeetingInfoContextInterface,
+  MeetingInfoDefaultValue,
+  MeetingInfoProvider,
+} from './components/meeting-info/useMeetingInfo';
+import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
+import {ShareLinkProvider} from './components/useShareLink';
+if (isIOS) {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
   KeyboardManager.setShouldShowToolbarPlaceholder(false);
   KeyboardManager.setShouldResignOnTouchOutside(true);
 }
 
+//Extending the UI Kit Type defintion to add custom attribute to render interface
+declare module 'agora-rn-uikit' {
+  interface DefaultRenderInterface {
+    name: string;
+    screenUid: number;
+    offline: boolean;
+  }
+  interface RtcPropsInterface {
+    screenShareUid: number;
+    screenShareToken?: string;
+  }
+}
+
 const App: React.FC = () => {
-  const [phrase, onChangePhrase] = useState('');
+  //commented for v1 release
+  //const CustomRoutes = useFpe((data) => data?.customRoutes);
+  // const RenderCustomRoutes = () => {
+  //   try {
+  //     return (
+  //       CustomRoutes &&
+  //       Array.isArray(CustomRoutes) &&
+  //       CustomRoutes.length &&
+  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
+  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
+  //         return (
+  //           <RouteComponent
+  //             path={CUSTOM_ROUTES_PREFIX + item.path}
+  //             exact={item.exact}
+  //             key={i}
+  //             failureRedirectTo={
+  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
+  //             }
+  //             {...item.routeProps}>
+  //             <item.component {...item.componentProps} />
+  //           </RouteComponent>
+  //         );
+  //       })
+  //     );
+  //   } catch (error) {
+  //     console.error('Error on rendering the custom routes');
+  //     return null;
+  //   }
+  // };
+  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
+    MeetingInfoDefaultValue,
+  );
 
   return (
-    <ImageBackground
-      source={{uri: $config.BG}}
-      style={{flex: 1}}
-      resizeMode={'cover'}>
-      <SafeAreaView style={{flex: 1}}>
-        <StatusBar hidden={true} />
-        <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
-        <StorageProvider>
-          <GraphQLProvider>
-            <Router>
-              <SessionProvider>
-                <ColorConfigure>
-                  <Navigation />
-                  <Switch>
-                    <Route exact path={'/'}>
-                      <Redirect to={'/create'} />
-                    </Route>
-                    <Route exact path={'/authenticate'}>
-                      {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
-                    </Route>
-                    <Route path={'/auth-token/:token'}>
-                      <StoreToken />
-                    </Route>
-                    <Route exact path={'/join'}>
-                      <Join phrase={phrase} onChangePhrase={onChangePhrase} />
-                    </Route>
-                    {shouldAuthenticate ? (
-                      <PrivateRoute
-                        path={'/create'}
-                        failureRedirectTo={'/authenticate'}>
-                        <Create />
-                      </PrivateRoute>
-                    ) : (
-                      <Route path={'/create'}>
-                        <Create />
-                      </Route>
-                    )}
-                    <Route path={'/:phrase'}>
-                      <VideoCall />
-                    </Route>
-                  </Switch>
-                </ColorConfigure>
-              </SessionProvider>
-            </Router>
-          </GraphQLProvider>
-        </StorageProvider>
-      </SafeAreaView>
-    </ImageBackground>
+    <AppWrapper>
+      <SetMeetingInfoProvider value={{setMeetingInfo}}>
+        <MeetingInfoProvider value={{...meetingInfo}}>
+          <ShareLinkProvider>
+            <Switch>
+              {/* commented for v1 release */}
+              {/* {RenderCustomRoutes()} */}
+              <Route exact path={'/'}>
+                <Redirect to={'/create'} />
+              </Route>
+              <Route exact path={'/authenticate'}>
+                {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
+              </Route>
+              <Route path={'/auth-token/:token'}>
+                <StoreToken />
+              </Route>
+              <Route exact path={'/join'}>
+                <Join />
+              </Route>
+              {shouldAuthenticate ? (
+                <PrivateRoute
+                  path={'/create'}
+                  failureRedirectTo={'/authenticate'}>
+                  <Create />
+                </PrivateRoute>
+              ) : (
+                <Route path={'/create'}>
+                  <Create />
+                </Route>
+              )}
+              <Route path={'/:phrase'}>
+                <VideoCall />
+              </Route>
+            </Switch>
+          </ShareLinkProvider>
+        </MeetingInfoProvider>
+      </SetMeetingInfoProvider>
+    </AppWrapper>
   );
-  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
 };
+
 export default App;

package/template/src/AppWrapper.tsx

@@ -0,0 +1,79 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {Router} from './components/Router';
+import Navigation from './components/Navigation';
+import {StorageProvider} from './components/StorageContext';
+import GraphQLProvider from './components/GraphQLProvider';
+import {SessionProvider} from './components/SessionContext';
+import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
+import ColorConfigure from './components/ColorConfigure';
+import Toast from '../react-native-toast-message';
+import ToastConfig from './subComponents/toastConfig';
+import {isValidReactComponent} from './utils/common';
+import DimensionProvider from './components/dimension/DimensionProvider';
+import Error from './components/common/Error';
+import {ErrorProvider} from './components/common';
+import {useFpe, FpeProvider, fpeConfig, FpeApiInterface} from 'fpe-api';
+import {LanguageProvider} from './language/useLanguage';
+
+interface AppWrapperProps {
+  children: React.ReactNode;
+  fpeConfig?: FpeApiInterface;
+}
+
+const AppWrapper = (props: AppWrapperProps) => {
+  const AppRoot = useFpe((data) => {
+    if (data?.appRoot && isValidReactComponent(data.appRoot)) {
+      return data.appRoot;
+    }
+    return React.Fragment;
+  });
+
+  return (
+    <AppRoot>
+      <ImageBackground
+        source={{uri: $config.BG}}
+        style={{flex: 1}}
+        resizeMode={'cover'}>
+        <SafeAreaView
+          // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
+          style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
+          <StatusBar hidden={true} />
+          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
+          <StorageProvider>
+            <GraphQLProvider>
+              <Router>
+                <SessionProvider>
+                  <ColorConfigure>
+                    <DimensionProvider>
+                      <LanguageProvider>
+                        <ErrorProvider>
+                          <Error />
+                          <Navigation />
+                          {props.children}
+                        </ErrorProvider>
+                      </LanguageProvider>
+                    </DimensionProvider>
+                  </ColorConfigure>
+                </SessionProvider>
+              </Router>
+            </GraphQLProvider>
+          </StorageProvider>
+        </SafeAreaView>
+      </ImageBackground>
+    </AppRoot>
+  );
+  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
+};
+
+export default AppWrapper;

package/template/src/SDKAppWrapper.tsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useState} from 'react';
+import {fpeConfig, FpeProvider, FpeApiInterface} from 'fpe-api';
+import {installFPE as createFPE} from 'fpe-api/install';
+import SDKEvents from './utils/SdkEvents';
+import App from './App';
+
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: string,
+  ) => void;
+  preJoin: (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
+  ) => void;
+}
+
+export interface AppBuilderSdkApiInterface {
+  addFPE: (fpe: FpeApiInterface) => void;
+  createFPE: (fpe: FpeApiInterface) => FpeApiInterface;
+  joinMeeting: (joinPhrase: string) => void;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    callBack: userEventsMapInterface[T],
+  ) => void;
+  off: (userEventName: keyof userEventsMapInterface) => void;
+}
+
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  addFPE: (fpeConfig: FpeApiInterface) => {
+    SDKEvents.emit('addFpe', fpeConfig);
+  },
+  joinMeeting: (joinPhrase: string) => {
+    SDKEvents.emit('joinMeetingWithPhrase', joinPhrase);
+  },
+  createFPE,
+  on: (userEventName, cb) => {
+    SDKEvents.on(userEventName, cb);
+  },
+  off: (userEventName) => {
+    SDKEvents.off(userEventName);
+  },
+};
+
+const SDKAppWrapper = () => {
+  const [fpe, setFpe] = useState(fpeConfig);
+  useEffect(() => {
+    SDKEvents.on('addFpe', (sdkFpeConfig) => {
+      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      setFpe(sdkFpeConfig);
+    });
+    // Join event consumed in Create.tsx
+  }, []);
+  return (
+    <>
+      <FpeProvider value={fpe}>
+        <App />
+      </FpeProvider>
+    </>
+  );
+};
+
+export default SDKAppWrapper;

package/template/src/atoms/PrimaryButton.tsx

@@ -35,14 +35,20 @@ export default function PrimaryButton(props: ButtonProps) {
         {backgroundColor: props.disabled ? primaryColor + '80' : primaryColor},
       ]}
       {...otherProps}>
-      {props.text ? (
-        <Text style={[styles.primaryButtonText as StyleProp<TextStyle>, {color: '#fff'}]}>
-          {props.text}
-        </Text>
-      ) : (
-        <></>
-      )}
-      {children}
+      <>
+        {props.text ? (
+          <Text
+            style={[
+              styles.primaryButtonText as StyleProp<TextStyle>,
+              {color: '#fff'},
+            ]}>
+            {props.text}
+          </Text>
+        ) : (
+          <></>
+        )}
+        {children}
+      </>
     </Pressable>
   );
 }

package/template/src/atoms/TextInput.tsx

@@ -11,6 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {TextInputProps, StyleSheet, TextInput, Platform} from 'react-native';
+import {isWeb} from '../utils/common';
 import {textInput} from '../../theme.json';
 import ColorContext from '../components/ColorContext';
 
@@ -19,7 +20,13 @@ const PrimaryButton = (props: TextInputProps) => {
   const {style, ...otherProps} = props;
   return (
     <TextInput
-      style={[styles.textInput, styles.textWrapFix, style, styles.noOutline, {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR}]}
+      style={[
+        styles.textInput,
+        styles.textWrapFix,
+        style,
+        styles.noOutline,
+        {borderColor: primaryColor, color: $config.PRIMARY_FONT_COLOR},
+      ]}
       placeholderTextColor={$config.PRIMARY_FONT_COLOR + '70'}
       {...otherProps}
       autoCorrect={false}
@@ -31,10 +38,11 @@ export default PrimaryButton;
 
 const styles = StyleSheet.create({
   textInput,
-  noOutline: Platform.OS === 'web' ? { outlineStyle: "none" } : {},
+  // @ts-ignore
+  noOutline: isWeb ? {outlineStyle: 'none'} : {},
   textWrapFix: Platform.select({
     ios: {
-      paddingVertical: 5
-    }
-  })
+      paddingVertical: 5,
+    },
+  }),
 });