agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/react-native-toast-message/src/styles.sdk.ts

@@ -1,12 +1,11 @@
-import { StyleSheet } from 'react-native';
+import isMobileOrTablet from '../../src/utils/isMobileOrTablet';
+import { Dimensions, StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     position: 'absolute',
     alignItems: 'center',
-    justifyContent: 'center',
-    left: 0,
-    right: 0
+    justifyContent: 'center'
   },
   top: {
     top: 30

package/template/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    project: {
+        ios: {},
+        android: {},
+    },
+    assets: ["./src/assets/fonts"]
+}

package/template/src/App.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
 import {Platform} from 'react-native';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
@@ -25,12 +25,13 @@ import KeyboardManager from 'react-native-keyboard-manager';
 //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';
 
 //hook can't be used in the outside react function calls. so directly checking the platform.
 if (Platform.OS === 'ios') {
@@ -42,10 +43,11 @@ if (Platform.OS === 'ios') {
 
 //Extending the UI Kit Type defintion to add custom attribute to render interface
 declare module 'agora-rn-uikit' {
-  interface DefaultRenderInterface {
+  interface DefaultContentInterface {
     name: string;
     screenUid: number;
     offline: boolean;
+    lastMessageTimeStamp: number;
   }
   interface RtcPropsInterface {
     screenShareUid: number;
@@ -83,14 +85,13 @@ const App: React.FC = () => {
   //     return null;
   //   }
   // };
-  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
-    MeetingInfoDefaultValue,
-  );
+  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 */}
@@ -107,6 +108,10 @@ const App: React.FC = () => {
               <Route exact path={'/join'}>
                 <Join />
               </Route>
+              {/* Will be used in the future
+              <Route exact path={'/leave'}>
+                <Endcall />
+              </Route> */}
               {shouldAuthenticate ? (
                 <PrivateRoute
                   path={'/create'}
@@ -123,8 +128,8 @@ const App: React.FC = () => {
               </Route>
             </Switch>
           </ShareLinkProvider>
-        </MeetingInfoProvider>
-      </SetMeetingInfoProvider>
+        </RoomInfoProvider>
+      </SetRoomInfoProvider>
     </AppWrapper>
   );
 };

package/template/src/AppWrapper.tsx

@@ -9,27 +9,61 @@
  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 {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;
 }
 
+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) => {
     if (
@@ -41,38 +75,49 @@ 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} />
-          <StorageProvider>
-            <GraphQLProvider>
-              <Router>
-                <SessionProvider>
-                  <ColorConfigure>
-                    <DimensionProvider>
-                      <LanguageProvider>
-                        <ErrorProvider>
-                          <Error />
-                          <Navigation />
-                          {props.children}
-                        </ErrorProvider>
-                      </LanguageProvider>
-                    </DimensionProvider>
-                  </ColorConfigure>
-                </SessionProvider>
-              </Router>
-            </GraphQLProvider>
-          </StorageProvider>
+          <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>
         </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,82 @@
-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';
 
-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 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>;
 
-export interface AppBuilderSdkApiInterface {
+export interface SdkMethodEvents {
   customize: (customization: CustomizationApiInterface) => void;
-  createCustomization: (
-    customization: CustomizationApiInterface,
-  ) => CustomizationApiInterface;
-  join: (roomid: string) => Promise<void>;
-  on: <T extends keyof userEventsMapInterface>(
-    userEventName: T,
-    callBack: userEventsMapInterface[T],
-  ) => Unsubscribe;
+  join(
+    roomid: string | Partial<RoomInfoContextInterface['data']>,
+    skipPrecall?: boolean,
+  ): RoomInfoContextInterface['data'];
 }
 
-let joinInit = false;
+// 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: AppBuilderSdkApiInterface = {
-  customize: (customization: CustomizationApiInterface) => {
-    SDKEvents.emit('addFpe', customization);
+export const AppBuilderSdkApi = {
+  customize: async (customization: CustomizationApiInterface) => {
+    return await SDKMethodEventsManager.emit('customize', customization);
+  },
+  customEvents: customEvents,
+  join: async (roomDetails: string) => {
+    await SDKMethodEventsManager.emit('join', roomDetails, false);
+  },
+  joinRoom: async (
+    roomDetails: string | Partial<RoomInfoContextInterface['data']>,
+  ) => {
+    return await SDKMethodEventsManager.emit('join', roomDetails, true);
+  },
+  joinPrecall: async (
+    roomDetails: string | Partial<RoomInfoContextInterface['data']>,
+  ) => {
+    const t = await SDKMethodEventsManager.emit('join', roomDetails);
+    return t as unknown as [RoomInfoContextInterface['data'], () => {}];
   },
-  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) => {
+  on: <T extends keyof userEventsMapInterface>(
+    userEventName: T,
+    cb: userEventsMapInterface[T],
+  ): Unsubscribe => {
     console.log('SDKEvents: Event Registered', 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/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];
 };