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

package/template/src/App.tsx

@@ -11,18 +11,7 @@
 */
 import React, {useState, useContext} 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 {
   RoomInfoContextInterface,
@@ -31,9 +20,9 @@ import {
 } 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';
 
-//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,48 +32,20 @@ if (Platform.OS === 'ios') {
 
 //Extending the UI Kit Type defintion to add custom attribute to render interface
 declare module 'agora-rn-uikit' {
-  interface DefaultContentInterface {
-    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;
+  // }
 }
 
 const App: React.FC = () => {
   //commented for v1 release
-  //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;
-  //   }
-  // };
   const [roomInfo, setRoomInfo] =
     useState<RoomInfoContextInterface>(RoomInfoDefaultValue);
 
@@ -93,40 +54,7 @@ const App: React.FC = () => {
       <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>
         </RoomInfoProvider>
       </SetRoomInfoProvider>

package/template/src/AppRoutes.tsx

@@ -0,0 +1,77 @@
+/*
+********************************************
+ 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';
+
+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()}
+      <AuthRoute path={'/:phrase'}>
+        <VideoCall />
+      </AuthRoute>
+      <Route path="*">
+        <Text>Page not found</Text>
+      </Route>
+    </Switch>
+  );
+}
+export default AppRoutes;

package/template/src/AppWrapper.tsx

@@ -29,6 +29,7 @@ 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';
@@ -65,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)
@@ -84,38 +85,42 @@ 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>
-              <GraphQLProvider>
-                <Router
-                  /*@ts-ignore Router will be memory Router in sdk*/
-                  initialEntries={[
-                    isSDK && SdkJoinState.phrase
-                      ? `/${SdkJoinState.phrase}`
-                      : '',
-                  ]}>
-                  <SessionProvider>
-                    <ColorConfigure>
-                      <DimensionProvider>
-                        <LanguageProvider>
-                          <ErrorProvider>
-                            <Error />
-                            <Navigation />
-                            {props.children}
-                          </ErrorProvider>
-                        </LanguageProvider>
-                      </DimensionProvider>
-                    </ColorConfigure>
-                  </SessionProvider>
-                </Router>
-              </GraphQLProvider>
-            </StorageProvider>
-          </ToastProvider>
+          <StorageProvider>
+            <LanguageProvider>
+              <ToastProvider>
+                <ToastContext.Consumer>
+                  {({isActionSheetVisible}) => {
+                    return !isActionSheetVisible ? <ToastComponent /> : null;
+                  }}
+                </ToastContext.Consumer>
+                <GraphQLProvider>
+                  <Router
+                    /*@ts-ignore Router will be memory Router in sdk*/
+                    initialEntries={[
+                      //@ts-ignore
+                      isSDK && SdkJoinState.phrase
+                        ? //@ts-ignore
+                          `/${SdkJoinState.phrase}`
+                        : '',
+                    ]}>
+                    <AuthProvider>
+                      <SessionProvider>
+                        <ColorConfigure>
+                          <DimensionProvider>
+                            <ErrorProvider>
+                              <Error />
+                              <Navigation />
+                              {props.children}
+                            </ErrorProvider>
+                          </DimensionProvider>
+                        </ColorConfigure>
+                      </SessionProvider>
+                    </AuthProvider>
+                  </Router>
+                </GraphQLProvider>
+              </ToastProvider>
+            </LanguageProvider>
+          </StorageProvider>
         </SafeAreaView>
       </ImageBackgroundComp>
     </AppRoot>

package/template/src/SDKAppWrapper.tsx

@@ -11,60 +11,96 @@ import SDKMethodEventsManager from './utils/SdkMethodEvents';
 import App from './App';
 import SdkApiContextProvider from './components/SdkApiContext';
 import {Unsubscribe} from 'nanoevents';
+import {deviceId} from './components/DeviceConfigure';
 
-// type makeAsync<T extends (...p: any) => void> = (
-//   ...p: Parameters<T>
-// ) => PromiseLike<ReturnType<T>>;
-//
-// type takeOnlyFirstParam<T extends (...p: any) => void> = (
-//   p: Parameters<T>[0],
-// ) => ReturnType<T>;
+type meetingData = Partial<RoomInfoContextInterface['data']>;
 
-export interface SdkMethodEvents {
-  customize: (customization: CustomizationApiInterface) => void;
-  join(
-    roomid: string | Partial<RoomInfoContextInterface['data']>,
-    skipPrecall?: boolean,
-  ): RoomInfoContextInterface['data'];
+export interface AppBuilderSdkApiInterface {
+  customize: (customization: CustomizationApiInterface) => Promise<void>;
+  joinRoom: (
+    roomDetails: string | meetingData,
+    userName?: string,
+  ) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+    userName?: string,
+  ) => 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;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+  customEvents: typeof customEvents;
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    cb: userEventsMapInterface[T],
+  ) => Unsubscribe;
 }
 
-// interface AppBuilderSdkApiInterface {
-//   customize: makeAsync<SdkMethodEvents['customize']>;
-//   joinRoom: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
-//   joinPrecall: makeAsync<takeOnlyFirstParam<SdkMethodEvents['join']>>;
-//   createCustomization: (
-//     customization: CustomizationApiInterface,
-//   ) => CustomizationApiInterface;
-//   on: <T extends keyof userEventsMapInterface>(
-//     userEventName: T,
-//     callBack: userEventsMapInterface[T],
-//   ) => Unsubscribe;
-// }
-
-export const AppBuilderSdkApi = {
-  customize: async (customization: CustomizationApiInterface) => {
+export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
+  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,
-  join: async (roomDetails: string) => {
-    await SDKMethodEventsManager.emit('join', roomDetails, false);
+  joinRoom: async (roomDetails, userName) => {
+    return await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      true,
+      userName,
+    );
+  },
+  joinPrecall: async (roomDetails, userName) => {
+    if (!$config.PRECALL)
+      throw new Error('Precall disabled in config, cant join precall');
+    const t = await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      false,
+      userName,
+    );
+    return t as unknown as [
+      RoomInfoContextInterface['data'],
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
+    ];
   },
-  joinRoom: async (
-    roomDetails: string | Partial<RoomInfoContextInterface['data']>,
-  ) => {
-    return await SDKMethodEventsManager.emit('join', roomDetails, true);
+  setMicrophone: async deviceId => {
+    return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
   },
-  joinPrecall: async (
-    roomDetails: string | Partial<RoomInfoContextInterface['data']>,
-  ) => {
-    const t = await SDKMethodEventsManager.emit('join', roomDetails);
-    return t as unknown as [RoomInfoContextInterface['data'], () => {}];
+  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);
   },
   createCustomization: customize,
-  on: <T extends keyof userEventsMapInterface>(
-    userEventName: T,
-    cb: userEventsMapInterface[T],
-  ): Unsubscribe => {
+  on: (userEventName, cb) => {
     console.log('SDKEvents: Event Registered', userEventName);
     return SDKEvents.on(userEventName, cb);
   },

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);

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

@@ -0,0 +1,107 @@
+import React, {createContext, useState, useEffect, useRef} from 'react';
+import {useRtc} from 'customization-api';
+import {ToggleState} from '../../agora-rn-uikit';
+import AgoraRTC from 'agora-rtc-sdk-ng';
+import {AIDenoiserExtension} from 'agora-extension-ai-denoiser';
+//@ts-ignore
+import wasm1 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm.wasm';
+//@ts-ignore
+import wasm2 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm-simd.wasm';
+import {createHook} from 'customization-implementation';
+// Necessary To bypass treeshaking, dont remove
+console.log('wasm files loaded are', wasm1, wasm2);
+
+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 {callActive} = props;
+  const [isNoiseSupressionEnabled, setIsNoiseSupressionEnabled] = useState(
+    ToggleState.disabled,
+  );
+
+  const {RtcEngineUnsafe} = useRtc();
+  let processor = useRef(null);
+
+  useEffect(() => {
+    if (callActive && $config.ENABLE_NOISE_CANCELLATION_BY_DEFAULT) {
+      setNoiseSupression(p => !p);
+    }
+  }, [callActive]);
+
+  useEffect(() => {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
+      const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
+      AgoraRTC.registerExtensions([denoiserExtension]);
+      processor.current = denoiserExtension.createProcessor();
+      processor.current.disable();
+    }
+  }, []);
+
+  const enableNoiseSuppression = async () => {
+    if (!$config.ENABLE_NOISE_CANCELLATION) {
+      throw new Error('AINS disabled in config');
+    }
+    //@ts-ignore
+    const localAudioTrack = RtcEngineUnsafe?.localStream?.audio;
+
+    if (processor?.current) {
+      localAudioTrack
+        ?.pipe(processor.current)
+        .pipe(localAudioTrack?.processorDestination);
+      await processor?.current?.enable();
+    }
+  };
+
+  const disableNoiseSuppression = async () => {
+    if (processor?.current) {
+      await processor?.current?.disable();
+    }
+  };
+
+  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);

package/template/src/app-state/useVideoQuality.tsx

@@ -0,0 +1,39 @@
+import React, {createContext, useState} from 'react';
+import {useRtc} from 'customization-api';
+import {createHook} from 'customization-implementation';
+import {Platform} from 'react-native';
+
+export type VideoQualityType = typeof $config.PROFILE;
+
+interface VideoQualityContextInterface {
+  videoQuality: VideoQualityType;
+  setVideoQuality: (videoQuality: VideoQualityType) => void;
+}
+
+export const VideoQualityContext = createContext<VideoQualityContextInterface>({
+  videoQuality: $config.PROFILE,
+  setVideoQuality: (_p: VideoQualityType) => {},
+});
+
+export const VideoQualityContextProvider = props => {
+  const [currentVideoQuality, setCurrentVideoQuality] =
+    useState<VideoQualityType>($config.PROFILE);
+  const {RtcEngineUnsafe} = useRtc();
+
+  const setVideoQuality = async (p: VideoQualityType) => {
+    if (Platform.OS === 'web' && RtcEngineUnsafe) {
+      // @ts-ignore
+      await RtcEngineUnsafe.setVideoProfile(p);
+      setCurrentVideoQuality(p);
+    }
+  };
+
+  return (
+    <VideoQualityContext.Provider
+      value={{videoQuality: currentVideoQuality, setVideoQuality}}>
+      {props.children}
+    </VideoQualityContext.Provider>
+  );
+};
+
+export const useVideoQuality = createHook(VideoQualityContext);