agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/AppRoutes.tsx

@@ -0,0 +1,101 @@
+/*
+********************************************
+ 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, {useEffect} 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';
+import {LogSource, logger} from './logger/AppBuilderLogger';
+import {isValidReactComponent} from './utils/common';
+
+function VideoCallWrapper(props) {
+  const {isRecordingBot} = useIsRecordingBot();
+  return isRecordingBot ? (
+    <RecordingBotRoute history={props.history}>
+      <VideoCall />
+    </RecordingBotRoute>
+  ) : (
+    <AuthRoute>
+      <VideoCall />
+    </AuthRoute>
+  );
+}
+
+function AppRoutes() {
+  const CustomRoutes = useCustomization(data => data?.customRoutes);
+  const AppConfig = useCustomization(data => data?.config);
+  const {defaultRootFallback: DefaultRootFallback} = AppConfig || {};
+  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={'/'}>
+        {DefaultRootFallback &&
+        (typeof DefaultRootFallback === 'object' ||
+          typeof DefaultRootFallback === 'function') &&
+        isValidReactComponent(DefaultRootFallback) ? (
+          <DefaultRootFallback />
+        ) : (
+          <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,29 +9,65 @@
  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';
 import GraphQLProvider from './components/GraphQLProvider';
 import {SessionProvider} from './components/SessionContext';
-import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
+import {
+  ImageBackground,
+  SafeAreaView,
+  StatusBar,
+  Platform,
+  View,
+} 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 {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';
+import BlockUI from './subComponents/BlockUI';
 
 interface AppWrapperProps {
   children: React.ReactNode;
 }
 
+const ImageBackgroundComp = (props: {
+  bg?: string;
+  color?: string;
+  children?: React.ReactNode;
+}) => {
+  if (props?.bg) {
+    return (
+      <ImageBackground
+        source={{uri: props.bg}}
+        style={{flex: 1}}
+        resizeMode={'cover'}>
+        {props.children}
+      </ImageBackground>
+    );
+  } else if (props?.color) {
+    return (
+      <View style={{flex: 1, backgroundColor: props.color}}>
+        {props.children}
+      </View>
+    );
+  } else {
+    return <>{props.children}</>;
+  }
+};
+
 const AppWrapper = (props: AppWrapperProps) => {
-  const AppRoot = useCustomization((data) => {
+  const AppRoot = useCustomization(data => {
     if (
       data?.components?.appRoot &&
       isValidReactComponent(data?.components?.appRoot)
@@ -41,38 +77,56 @@ const AppWrapper = (props: AppWrapperProps) => {
     return React.Fragment;
   });
 
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
   return (
     <AppRoot>
-      <ImageBackground
-        source={{uri: $config.BG}}
-        style={{flex: 1}}
-        resizeMode={'cover'}>
+      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
         <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} />
+          <StatusBar backgroundColor={$config.BACKGROUND_COLOR} />
+          {$config.DISABLE_LANDSCAPE_MODE && <BlockUI />}
           <StorageProvider>
-            <GraphQLProvider>
-              <Router>
-                <SessionProvider>
-                  <ColorConfigure>
-                    <DimensionProvider>
-                      <LanguageProvider>
-                        <ErrorProvider>
-                          <Error />
-                          <Navigation />
-                          {props.children}
-                        </ErrorProvider>
-                      </LanguageProvider>
-                    </DimensionProvider>
-                  </ColorConfigure>
-                </SessionProvider>
-              </Router>
-            </GraphQLProvider>
+            <LanguageProvider>
+              <GraphQLProvider>
+                <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>
+            </LanguageProvider>
           </StorageProvider>
         </SafeAreaView>
-      </ImageBackground>
+      </ImageBackgroundComp>
     </AppRoot>
   );
   // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}

package/template/src/SDKAppWrapper.tsx

@@ -1,86 +1,173 @@
-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';
+import {LogSource, logger} from './logger/AppBuilderLogger';
 
-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,
+    preference?: {
+      disableShareTile: boolean;
+      disableVideoProcessors: boolean;
+    },
+  ) => Promise<meetingData>;
+  joinPrecall: (
+    roomDetails: string | meetingData,
+    userName?: string,
+    skipPrecall?: boolean,
+    preference?: {
+      disableShareTile: boolean;
+      disableVideoProcessors: 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) => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - login');
+    return await SDKMethodEventsManager.emit('login', token);
+  },
+  logout: async () => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - logout');
+    return await SDKMethodEventsManager.emit('logout');
+  },
+  customize: async customization => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - customize');
+    return await SDKMethodEventsManager.emit('customize', customization);
+  },
+  customEvents: customEvents,
+  joinRoom: async (roomDetails, userName, preference) => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event for joinRoom - join', {
+      room: roomDetails,
+      userName: userName,
+      preference: preference,
+    });
+    return await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      true,
+      userName,
+      preference,
+    );
+  },
+  joinPrecall: async (roomDetails, userName, skipPrecall, preference) => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event for joinPrecall - join', {
+      room: roomDetails,
+      userName: userName,
+      preference: preference,
+    });
+    if (!$config.PRECALL) {
+      logger.error(
+        LogSource.SDK,
+        'Log',
+        'Precall disabled in config, cant join precall',
+      );
+      throw new Error('Precall disabled in config, cant join precall');
+    }
+    const t = await SDKMethodEventsManager.emit(
+      'join',
+      roomDetails,
+      skipPrecall,
+      userName,
+      preference,
+    );
+    return t as unknown as [
+      RoomInfoContextInterface['data'],
+      (userName?: string) => Promise<RoomInfoContextInterface['data']>,
+    ];
+  },
+  setMicrophone: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - microphoneDevice',
+      deviceId,
+    );
+    return await SDKMethodEventsManager.emit('microphoneDevice', deviceId);
+  },
+  setSpeaker: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - speakerDevice',
+      deviceId,
+    );
+    return await SDKMethodEventsManager.emit('speakerDevice', deviceId);
+  },
+  setCamera: async deviceId => {
+    logger.log(
+      LogSource.SDK,
+      'Event',
+      'emiting event - cameraDevice',
+      deviceId,
+    );
+    return await SDKMethodEventsManager.emit('cameraDevice', deviceId);
+  },
+  muteAudio: async state => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - muteAudio', state);
+    return await SDKMethodEventsManager.emit('muteAudio', state);
+  },
+  muteVideo: async state => {
+    logger.log(LogSource.SDK, 'Event', 'emiting event - muteVideo', 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);
+    logger.debug(
+      LogSource.SDK,
+      'Event',
+      `Event Registered for SDK event- ${userEventName}`,
+    );
     return SDKEvents.on(userEventName, cb);
   },
 };
 
 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/useBeautyEffects.ts

@@ -0,0 +1,30 @@
+import {type BeautyEffects} from 'customization-api';
+import {
+  useBeautyEffect,
+  type BeautyProcessorType,
+} from '../components/beauty-effect/useBeautyEffects';
+
+export interface BeautyEffectInterface {
+  applyBeautyEffect: (config: BeautyEffects) => void;
+  removeBeautyEffect: () => void;
+  beautyProcessor: BeautyProcessorType;
+}
+
+export const useBeautyEffects: () => BeautyEffectInterface = () => {
+  const {applyBeautyEffect, removeBeautyEffect, beautyProcessor} =
+    useBeautyEffect();
+
+  // const beautyEffects = {
+  //   lighteningContrastLevel,
+  //   lighteningLevel,
+  //   smoothnessLevel,
+  //   sharpnessLevel,
+  //   rednessLevel,
+  // };
+
+  return {
+    applyBeautyEffect,
+    removeBeautyEffect,
+    beautyProcessor,
+  };
+};

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/useMessages.ts

@@ -3,24 +3,39 @@ import {
   useChatNotification,
 } from '../components/chat-notification/useChatNotification';
 import {
+  ChatOption,
+  MessageStatusCallback,
   messageStoreInterface,
   useChatMessages,
+  SDKChatType,
 } from '../components/chat-messages/useChatMessages';
+import {useChatConfigure} from '../components/chat/chatConfigure';
+import {isWeb} from '../utils/common';
+import type {UidType} from '../../agora-rn-uikit';
 
 export interface messageInterface {
   groupMessages: messageStoreInterface[];
   privateMessages: {
     [key: string]: messageStoreInterface[];
   };
-  sendMessage: (msg: string, toUid?: number) => void;
-  editMessage: (msgId: string, msg: string, toUid?: number) => void;
-  deleteMessage: (msgId: string, toUid?: number) => void;
+  sendMessage: (
+    option: ChatOption,
+    messageStatusCallback?: MessageStatusCallback,
+  ) => void;
+  // editMessage: (msgId: string, msg: string, toUid?: number) => void;
+  deleteMessage: (msgId: string, to?: string, chatType?: SDKChatType) => void;
   groupUnreadCount: number;
   individualUnreadCount: individualUnreadMessageCount;
   setGroupUnreadCount: React.Dispatch<React.SetStateAction<number>>;
   setIndividualUnreadCount: React.Dispatch<
     React.SetStateAction<individualUnreadMessageCount>
   >;
+
+  removeMessageFromStore: (msgId: string, isMsgRecalled: boolean) => void;
+  removeMessageFromPrivateStore: (
+    msgId: string,
+    isMsgRecalled: boolean,
+  ) => void;
 }
 
 /**
@@ -28,12 +43,12 @@ export interface messageInterface {
  */
 export const useMessages: () => messageInterface = () => {
   const {
-    deleteChatMessage: deleteMessage,
-    editChatMessage: editMessage,
     messageStore: groupMessages,
     privateMessageStore: privateMessages,
-    sendChatMessage: sendMessage,
+    removeMessageFromPrivateStore,
+    removeMessageFromStore,
   } = useChatMessages();
+  const {sendChatSDKMessage, deleteAttachment} = useChatConfigure();
   const {
     setUnreadIndividualMessageCount: setIndividualUnreadCount,
     setUnreadGroupMessageCount: setGroupUnreadCount,
@@ -41,15 +56,40 @@ export const useMessages: () => messageInterface = () => {
     unreadIndividualMessageCount: individualUnreadCount,
   } = useChatNotification();
 
+  const sendMessageWrapper = (
+    option: ChatOption,
+    messageStatusCallback?: MessageStatusCallback,
+  ) => {
+    if (isWeb()) {
+      sendChatSDKMessage(option);
+    } else {
+      sendChatSDKMessage(option, messageStatusCallback);
+    }
+  };
+
+  const deleteMessageWrapper = (
+    msgId: string,
+    to?: string,
+    chatType?: SDKChatType,
+  ) => {
+    if (isWeb()) {
+      deleteAttachment(msgId, to, chatType);
+    } else {
+      deleteAttachment(msgId);
+    }
+  };
+
   return {
     groupMessages,
     privateMessages,
-    sendMessage,
-    editMessage,
-    deleteMessage,
+    sendMessage: sendMessageWrapper,
+    //editMessage,
+    deleteMessage: deleteMessageWrapper,
     groupUnreadCount,
     individualUnreadCount,
     setGroupUnreadCount,
     setIndividualUnreadCount,
+    removeMessageFromStore,
+    removeMessageFromPrivateStore,
   };
 };