agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/App.tsx

@@ -9,31 +9,21 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useState, useLayoutEffect} from 'react';
 import {Platform} from 'react-native';
-import Join from './pages/Join';
-import VideoCall from './pages/VideoCall';
-import Create from './pages/Create';
-import {Route, Switch, Redirect} from './components/Router';
-import PrivateRoute from './components/PrivateRoute';
-import OAuth from './components/OAuth';
-import StoreToken from './components/StoreToken';
-import {shouldAuthenticate} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
-// commented for v1 release
-//import {CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'customization-api';
-//import {useCustomization} from 'customization-implementation';
 import AppWrapper from './AppWrapper';
 import {
-  MeetingInfoContextInterface,
-  MeetingInfoDefaultValue,
-  MeetingInfoProvider,
-} from './components/meeting-info/useMeetingInfo';
-import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
+  RoomInfoContextInterface,
+  RoomInfoDefaultValue,
+  RoomInfoProvider,
+} from './components/room-info/useRoomInfo';
+import {SetRoomInfoProvider} from './components/room-info/useSetRoomInfo';
 import {ShareLinkProvider} from './components/useShareLink';
-import Endcall from './pages/Endcall';
+import AppRoutes from './AppRoutes';
+import {isWebInternal} from './utils/common';
 
-//hook can't be used in the outside react function calls. so directly checking the platform.
+// hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
@@ -43,15 +33,21 @@ if (Platform.OS === 'ios') {
 
 //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;
-    lastMessageTimeStamp: number;
-  }
-  interface RtcPropsInterface {
-    screenShareUid: number;
-    screenShareToken?: string;
+  // interface DefaultContentInterface {
+  //   name: string;
+  //   screenUid: number;
+  //   offline: boolean;
+  //   lastMessageTimeStamp: number;
+  // }
+  // interface RtcPropsInterface {
+  //   screenShareUid: number;
+  //   screenShareToken?: string;
+  // }
+}
+
+declare global {
+  interface Navigator {
+    notifyReady?: () => boolean;
   }
 }
 
@@ -85,52 +81,40 @@ const App: React.FC = () => {
   //     return null;
   //   }
   // };
-  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
-    MeetingInfoDefaultValue,
-  );
+
+  const notifyReady = () => {
+    if (typeof window.navigator.notifyReady === 'function') {
+      console.log('recording-bot: notifyReady is available');
+      window.navigator.notifyReady();
+    } else {
+      console.log('recording-bot: notifyReady is un-available');
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (isWebInternal()) {
+      // Register only on web
+      window.addEventListener('load', notifyReady);
+    }
+    return () => {
+      if (isWebInternal()) {
+        window.removeEventListener('load', notifyReady);
+      }
+    };
+  }, []);
+
+  const [roomInfo, setRoomInfo] =
+    useState<RoomInfoContextInterface>(RoomInfoDefaultValue);
 
   return (
     <AppWrapper>
-      <SetMeetingInfoProvider value={{setMeetingInfo}}>
-        <MeetingInfoProvider value={{...meetingInfo}}>
+      <SetRoomInfoProvider value={{setRoomInfo}}>
+        <RoomInfoProvider value={{...roomInfo}}>
           <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>
-              {/* Will be used in the future
-              <Route exact path={'/leave'}>
-                <Endcall />
-              </Route> */}
-              {shouldAuthenticate ? (
-                <PrivateRoute
-                  path={'/create'}
-                  failureRedirectTo={'/authenticate'}>
-                  <Create />
-                </PrivateRoute>
-              ) : (
-                <Route path={'/create'}>
-                  <Create />
-                </Route>
-              )}
-              <Route path={'/:phrase'}>
-                <VideoCall />
-              </Route>
-            </Switch>
+            <AppRoutes />
           </ShareLinkProvider>
-        </MeetingInfoProvider>
-      </SetMeetingInfoProvider>
+        </RoomInfoProvider>
+      </SetRoomInfoProvider>
     </AppWrapper>
   );
 };

package/template/src/AppRoutes.tsx

@@ -0,0 +1,90 @@
+/*
+********************************************
+ 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 Join from './pages/Join';
+import VideoCall from './pages/VideoCall';
+import Create from './pages/Create';
+import {Route, Switch, Redirect} from './components/Router';
+import AuthRoute from './auth/AuthRoute';
+import {IDPAuth} from './auth/IDPAuth';
+import {Text} from 'react-native';
+import {useCustomization} from 'customization-implementation';
+import {CUSTOM_ROUTES_PREFIX, CustomRoutesInterface} from 'customization-api';
+import PrivateRoute from './components/PrivateRoute';
+import RecordingBotRoute from './components/recording-bot/RecordingBotRoute';
+import {useIsRecordingBot} from './subComponents/recording/useIsRecordingBot';
+
+function VideoCallWrapper(props) {
+  const {isRecordingBotRoute} = useIsRecordingBot();
+  return isRecordingBotRoute ? (
+    <RecordingBotRoute history={props.history}>
+      <VideoCall />
+    </RecordingBotRoute>
+  ) : (
+    <AuthRoute>
+      <VideoCall />
+    </AuthRoute>
+  );
+}
+
+function AppRoutes() {
+  const CustomRoutes = useCustomization(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;
+    }
+  };
+  return (
+    <Switch>
+      <Route exact path={'/'}>
+        <Redirect to={'/create'} />
+      </Route>
+      <Route exact path={'/authorize/:token?'}>
+        <IDPAuth />
+      </Route>
+      <AuthRoute exact path={'/join'}>
+        <Join />
+      </AuthRoute>
+      <AuthRoute exact path={'/create'}>
+        <Create />
+      </AuthRoute>
+      {RenderCustomRoutes()}
+      <Route exact path={'/:phrase'} component={VideoCallWrapper} />
+      <Route path="*">
+        <Text>Page not found</Text>
+      </Route>
+    </Switch>
+  );
+}
+export default AppRoutes;

package/template/src/AppWrapper.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useContext} from 'react';
 import {Router} from './components/Router';
 import Navigation from './components/Navigation';
 import {StorageProvider} from './components/StorageContext';
@@ -29,9 +29,12 @@ import Error from './components/common/Error';
 import {ErrorProvider} from './components/common';
 import {useCustomization} from 'customization-implementation';
 import {LanguageProvider} from './language/useLanguage';
+import {AuthProvider} from './auth/AuthProvider';
 import {PropsConsumer} from 'agora-rn-uikit';
 import ToastComponent from './components/ToastComponent';
 import {ToastContext, ToastProvider} from './components/useToast';
+import {SdkApiContext} from './components/SdkApiContext';
+import isSDK from './utils/isSDK';
 
 interface AppWrapperProps {
   children: React.ReactNode;
@@ -63,7 +66,7 @@ const ImageBackgroundComp = (props: {
 };
 
 const AppWrapper = (props: AppWrapperProps) => {
-  const AppRoot = useCustomization((data) => {
+  const AppRoot = useCustomization(data => {
     if (
       data?.components?.appRoot &&
       isValidReactComponent(data?.components?.appRoot)
@@ -73,6 +76,8 @@ const AppWrapper = (props: AppWrapperProps) => {
     return React.Fragment;
   });
 
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
   return (
     <AppRoot>
       <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
@@ -80,32 +85,44 @@ const AppWrapper = (props: AppWrapperProps) => {
           // @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} />
-          <ToastProvider>
-            <ToastContext.Consumer>
-              {({isActionSheetVisible}) => {
-                return !isActionSheetVisible ? <ToastComponent /> : null;
-              }}
-            </ToastContext.Consumer>
-            <StorageProvider>
+          <StorageProvider>
+            <LanguageProvider>
               <GraphQLProvider>
-                <Router>
-                  <SessionProvider>
-                    <ColorConfigure>
-                      <DimensionProvider>
-                        <LanguageProvider>
-                          <ErrorProvider>
-                            <Error />
-                            <Navigation />
-                            {props.children}
-                          </ErrorProvider>
-                        </LanguageProvider>
-                      </DimensionProvider>
-                    </ColorConfigure>
-                  </SessionProvider>
+                <Router
+                  /*@ts-ignore Router will be memory Router in sdk*/
+                  initialEntries={[
+                    //@ts-ignore
+                    isSDK && SdkJoinState.phrase
+                      ? //@ts-ignore
+                        `/${SdkJoinState.phrase}`
+                      : '',
+                  ]}>
+                  <ToastProvider>
+                    <ToastContext.Consumer>
+                      {({isActionSheetVisible}) => {
+                        return !isActionSheetVisible ? (
+                          <ToastComponent />
+                        ) : null;
+                      }}
+                    </ToastContext.Consumer>
+                    <AuthProvider>
+                      <SessionProvider>
+                        <ColorConfigure>
+                          <DimensionProvider>
+                            <ErrorProvider>
+                              <Error />
+                              <Navigation />
+                              {props.children}
+                            </ErrorProvider>
+                          </DimensionProvider>
+                        </ColorConfigure>
+                      </SessionProvider>
+                    </AuthProvider>
+                  </ToastProvider>
                 </Router>
               </GraphQLProvider>
-            </StorageProvider>
-          </ToastProvider>
+            </LanguageProvider>
+          </StorageProvider>
         </SafeAreaView>
       </ImageBackgroundComp>
     </AppRoot>

package/template/src/SDKAppWrapper.tsx

@@ -1,63 +1,105 @@
-import React, {useEffect, useState} from 'react';
-import {CustomizationApiInterface, customize} from 'customization-api';
+import React from 'react';
 import {
-  customizationConfig,
-  CustomizationProvider,
-} from 'customization-implementation';
-import SDKEvents from './utils/SdkEvents';
-import {Unsubscribe} from 'nanoevents';
+  CustomizationApiInterface,
+  customize,
+  RoomInfoContextInterface,
+  customEvents,
+} from 'customization-api';
+import {CustomizationProvider} from 'customization-implementation';
+import SDKEvents, {userEventsMapInterface} from './utils/SdkEvents';
+import SDKMethodEventsManager from './utils/SdkMethodEvents';
 import App from './App';
+import SdkApiContextProvider from './components/SdkApiContext';
+import {Unsubscribe} from 'nanoevents';
+import {deviceId} from './components/DeviceConfigure';
 
-export interface userEventsMapInterface {
-  leave: () => void;
-  create: (
-    hostPhrase: string,
-    attendeePhrase?: string,
-    pstnNumer?: {
-      number: string;
-      pin: string;
-    },
-  ) => void;
-  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
-  join: (
-    meetingTitle: string,
-    devices: MediaDeviceInfo[],
-    isHost: boolean,
-  ) => void;
-}
+type meetingData = Partial<RoomInfoContextInterface['data']>;
 
 export interface AppBuilderSdkApiInterface {
-  customize: (customization: CustomizationApiInterface) => void;
+  customize: (customization: CustomizationApiInterface) => Promise<void>;
+  joinRoom: (
+    roomDetails: string | meetingData,
+    userName?: string,
+  ) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+    userName?: string,
+    skipPrecall?: boolean,
+  ) => Promise<
+    [
+      meetingData,
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
+    ]
+  >;
+  setMicrophone: (deviceId: deviceId) => Promise<void>;
+  setCamera: (deviceId: deviceId) => Promise<void>;
+  setSpeaker: (deviceId: deviceId) => Promise<void>;
+  muteAudio: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
+  muteVideo: (
+    mute: boolean | ((currentMute: boolean) => boolean),
+  ) => Promise<void>;
   createCustomization: (
     customization: CustomizationApiInterface,
   ) => CustomizationApiInterface;
-  join: (roomid: string) => Promise<void>;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+  customEvents: typeof customEvents;
   on: <T extends keyof userEventsMapInterface>(
     userEventName: T,
-    callBack: userEventsMapInterface[T],
+    cb: userEventsMapInterface[T],
   ) => Unsubscribe;
 }
 
-let joinInit = false;
-
 export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
-  customize: (customization: CustomizationApiInterface) => {
-    SDKEvents.emit('addFpe', customization);
+  login: async (token: string) => {
+    return await SDKMethodEventsManager.emit('login', token);
+  },
+  logout: async () => {
+    return await SDKMethodEventsManager.emit('logout');
+  },
+  customize: async customization => {
+    return await SDKMethodEventsManager.emit('customize', customization);
+  },
+  customEvents: customEvents,
+  joinRoom: async (roomDetails, userName) => {
+    return await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      true,
+      userName,
+    );
+  },
+  joinPrecall: async (roomDetails, userName, skipPrecall) => {
+    if (!$config.PRECALL)
+      throw new Error('Precall disabled in config, cant join precall');
+    const t = await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      skipPrecall,
+      userName,
+    );
+    return t as unknown as [
+      RoomInfoContextInterface['data'],
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
+    ];
+  },
+  setMicrophone: async deviceId => {
+    return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
+  },
+  setSpeaker: async deviceId => {
+    return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
+  },
+  setCamera: async deviceId => {
+    return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
+  },
+  muteAudio: async state => {
+    return await SDKMethodEventsManager.emit('muteAudio', state);
+  },
+  muteVideo: async state => {
+    return await SDKMethodEventsManager.emit('muteVideo', state);
   },
-  join: (roomid: string) =>
-    new Promise((resolve, reject) => {
-      if (joinInit) {
-        console.log('[SDKEvents] Join listener emitted preemptive');
-        SDKEvents.emit('joinMeetingWithPhrase', roomid, resolve, reject);
-      }
-      SDKEvents.on('joinInit', () => {
-        if (!joinInit) {
-          console.log('[SDKEvents] Join listener emitted');
-          SDKEvents.emit('joinMeetingWithPhrase', roomid, resolve, reject);
-          joinInit = true;
-        }
-      });
-    }),
   createCustomization: customize,
   on: (userEventName, cb) => {
     console.log('SDKEvents: Event Registered', userEventName);
@@ -66,21 +108,12 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
 };
 
 const SDKAppWrapper = () => {
-  const [fpe, setFpe] = useState(customizationConfig);
-  useEffect(() => {
-    SDKEvents.on('addFpe', (sdkFpeConfig) => {
-      console.log('SDKEvents: addFpe event called');
-      setFpe(sdkFpeConfig);
-    });
-    SDKEvents.emit('addFpeInit');
-    // Join event consumed in Create.tsx
-  }, []);
   return (
-    <>
-      <CustomizationProvider value={fpe}>
+    <SdkApiContextProvider>
+      <CustomizationProvider>
         <App />
       </CustomizationProvider>
-    </>
+    </SdkApiContextProvider>
   );
 };
 

package/template/src/app-state/useLocalUserInfo.ts

@@ -1,11 +1,11 @@
 import {useLocalUid} from '../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 
 /**
  * The LocalUserInfo app state contains the local user information like uid, audio and video mute states etc.
  */
 export const useLocalUserInfo = () => {
   const localUid = useLocalUid();
-  const {renderList} = useRender();
-  return renderList[localUid];
+  const {defaultContent} = useContent();
+  return defaultContent[localUid];
 };

package/template/src/app-state/useNoiseSupression.native.tsx

@@ -0,0 +1,67 @@
+import React, {createContext, useState, useEffect} from 'react';
+import {ToggleState} from '../../agora-rn-uikit';
+import {createHook} from 'customization-implementation';
+
+export interface NoiseSupressionContextInterface {
+  isNoiseSupressionEnabled: ToggleState;
+  setNoiseSupression: (
+    p: (currentState: boolean) => boolean | boolean,
+  ) => Promise<void>;
+}
+
+export const NoiseSupressionContext =
+  createContext<NoiseSupressionContextInterface>({
+    isNoiseSupressionEnabled: ToggleState.disabled,
+    setNoiseSupression: async () => {},
+  });
+
+export function NoiseSupressionProvider(props) {
+  const [isNoiseSupressionEnabled, setIsNoiseSupressionEnabled] = useState(
+    ToggleState.disabled,
+  );
+
+  useEffect(() => {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
+    }
+  }, []);
+
+  const enableNoiseSuppression = async () => {};
+
+  const disableNoiseSuppression = async () => {};
+
+  const setNoiseSupression: NoiseSupressionContextInterface['setNoiseSupression'] =
+    async p => {
+      if (
+        isNoiseSupressionEnabled === ToggleState.disabling ||
+        isNoiseSupressionEnabled === ToggleState.enabling
+      ) {
+        throw new Error('Cant change noise supression, already in transition');
+      }
+      let stateToBeSet =
+        typeof p === 'function'
+          ? p(isNoiseSupressionEnabled === ToggleState.enabled)
+          : p;
+
+      if (stateToBeSet) {
+        setIsNoiseSupressionEnabled(ToggleState.enabling);
+        await enableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.enabled);
+      } else {
+        setIsNoiseSupressionEnabled(ToggleState.disabling);
+        await disableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.disabled);
+      }
+    };
+
+  return (
+    <NoiseSupressionContext.Provider
+      value={{
+        isNoiseSupressionEnabled,
+        setNoiseSupression,
+      }}>
+      {props.children}
+    </NoiseSupressionContext.Provider>
+  );
+}
+
+export const useNoiseSupression = createHook(NoiseSupressionContext);