agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/AppRoutes.tsx

@@ -17,8 +17,54 @@ 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={'/'}>
@@ -33,9 +79,8 @@ function AppRoutes() {
       <AuthRoute exact path={'/create'}>
         <Create />
       </AuthRoute>
-      <AuthRoute path={'/:phrase'}>
-        <VideoCall />
-      </AuthRoute>
+      {RenderCustomRoutes()}
+      <Route exact path={'/:phrase'} component={VideoCallWrapper} />
       <Route path="*">
         <Text>Page not found</Text>
       </Route>

package/template/src/AppWrapper.tsx

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

package/template/src/SDKAppWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   CustomizationApiInterface,
   customize,
-  MeetingInfoContextInterface,
+  RoomInfoContextInterface,
   customEvents,
 } from 'customization-api';
 import {CustomizationProvider} from 'customization-implementation';
@@ -13,7 +13,7 @@ import SdkApiContextProvider from './components/SdkApiContext';
 import {Unsubscribe} from 'nanoevents';
 import {deviceId} from './components/DeviceConfigure';
 
-type meetingData = Partial<MeetingInfoContextInterface['data']>;
+type meetingData = Partial<RoomInfoContextInterface['data']>;
 
 export interface AppBuilderSdkApiInterface {
   customize: (customization: CustomizationApiInterface) => Promise<void>;
@@ -27,7 +27,7 @@ export interface AppBuilderSdkApiInterface {
   ) => Promise<
     [
       meetingData,
-      (userName?: string) => Promise<MeetingInfoContextInterface['data']>,
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
     ]
   >;
   setMicrophone: (deviceId: deviceId) => Promise<void>;
@@ -58,7 +58,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
   logout: async () => {
     return await SDKMethodEventsManager.emit('logout');
   },
-  customize: async (customization) => {
+  customize: async customization => {
     return await SDKMethodEventsManager.emit('customize', customization);
   },
   customEvents: customEvents,
@@ -80,23 +80,23 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
       userName,
     );
     return t as unknown as [
-      MeetingInfoContextInterface['data'],
-      (userName?: string) => Promise<MeetingInfoContextInterface['data']>,
+      RoomInfoContextInterface['data'],
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
     ];
   },
-  setMicrophone: async (deviceId) => {
+  setMicrophone: async deviceId => {
     return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
   },
-  setSpeaker: async (deviceId) => {
+  setSpeaker: async deviceId => {
     return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
   },
-  setCamera: async (deviceId) => {
+  setCamera: async deviceId => {
     return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
   },
-  muteAudio: async (state) => {
+  muteAudio: async state => {
     return await SDKMethodEventsManager.emit('muteAudio', state);
   },
-  muteVideo: async (state) => {
+  muteVideo: async state => {
     return await SDKMethodEventsManager.emit('muteVideo', state);
   },
   createCustomization: customize,

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

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

package/template/src/assets/font-styles.css

@@ -2,8 +2,7 @@
 
 @font-face {
   font-family: 'icomoon';
-  src: url('https://dbudicf5k4as1.cloudfront.net/10/icomoon.ttf')
-    format('truetype');
+  src: url('fonts/icomoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +24,178 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-play-circle:before {
+  content: '\e978';
+  color: #fff;
+}
+.icon-clear-all:before {
+  content: '\e96f';
+  color: #fff;
+}
+.icon-erasor:before {
+  content: '\e970';
+  color: #fff;
+}
+.icon-color-picker:before {
+  content: '\e973';
+  color: #fff;
+}
+.icon-shapes:before {
+  content: '\e974';
+  color: #fff;
+}
+.icon-pen:before {
+  content: '\e975';
+  color: #fff;
+}
+.icon-selector:before {
+  content: '\e977';
+  color: #fff;
+}
+.icon-view-only:before {
+  content: '\e97a';
+  color: #808080;
+}
+.icon-fit-to-screen:before {
+  content: '\e979';
+  color: #fff;
+}
+.icon-zoom-in:before {
+  content: '\e963';
+  color: #fff;
+}
+.icon-zoom-out:before {
+  content: '\e964';
+  color: #fff;
+}
+.icon-undo:before {
+  content: '\e965';
+  color: #fff;
+}
+.icon-redo:before {
+  content: '\e966';
+  color: #fff;
+}
+.icon-light:before {
+  content: '\e967';
+  color: #fff;
+}
+.icon-dark:before {
+  content: '\e968';
+  color: #fff;
+}
+.icon-line:before {
+  content: '\e969';
+  color: #fff;
+}
+.icon-square:before {
+  content: '\e96a';
+  color: #fff;
+}
+.icon-circle:before {
+  content: '\e96b';
+  color: #fff;
+}
+.icon-arrow:before {
+  content: '\e96c';
+  color: #fff;
+}
+.icon-gradient:before {
+  content: '\e96d';
+  color: #eac443;
+}
+.icon-area-selection:before {
+  content: '\e96e';
+  color: #fff;
+}
+.icon-highlight:before {
+  content: '\e971';
+  color: #fff;
+}
+.icon-move:before {
+  content: '\e972';
+  color: #fff;
+}
+.icon-text:before {
+  content: '\e976';
+  color: #fff;
+}
+.icon-celebration:before {
+  content: '\e962';
+  color: #ff414d;
+}
+.icon-upload-new:before {
+  content: '\e961';
+  color: #fff;
+}
+.icon-add:before {
+  content: '\e95d';
+  color: #fff;
+}
+.icon-blur:before {
+  content: '\e95e';
+  color: #fff;
+}
+.icon-remove:before {
+  content: '\e95f';
+  color: #fff;
+}
+.icon-vb:before {
+  content: '\e960';
+  color: #fff;
+}
+.icon-captions:before {
+  content: '\e941';
+  color: #fff;
+}
+.icon-captions-off:before {
+  content: '\e958';
+  color: #fff;
+}
+.icon-view-last:before {
+  content: '\e95c';
+  color: #fff;
+}
+.icon-download:before {
+  content: '\e959';
+  color: #fff;
+}
+.icon-transcript-stop:before {
+  content: '\e95a';
+  color: #fff;
+}
+.icon-transcript:before {
+  content: '\e95b';
+  color: #fff;
+}
+.icon-search:before {
+  content: '\e945';
+  color: #808080;
+}
+.icon-lang-select:before {
+  content: '\e942';
+  color: #fff;
+}
+.icon-globe:before {
+  content: '\e944';
+  color: #808080;
+}
+.icon-down-arrow:before {
+  content: '\e93f';
+  color: #fff;
+}
+.icon-caption-mode:before {
+  content: '\e93c';
+  color: #fff;
+}
+.icon-stt:before {
+  content: '\e93d';
+  color: #fff;
+}
+.icon-transcript-mode:before {
+  content: '\e93e';
+  color: #fff;
+}
 .icon-demote-filled:before {
   content: '\e912';
   color: #fafafa;
@@ -255,7 +426,7 @@
 .icon-recording:before {
   content: '\e928';
 }
-.icon-remove:before {
+.icon-remove1:before {
   content: '\e929';
 }
 .icon-remove-meeting:before {