agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/babel.config.js

@@ -10,7 +10,7 @@
 *********************************************
 */
 const configVars = require('./configTransform');
-const getFpePath = require('./fpe.config');
+const getCustomizationApiPath = require('./customization.config');
 
 // This file is read only by react native for IOS & Android. Doesn't apply to electron, Web targets
 module.exports = {
@@ -20,14 +20,14 @@ module.exports = {
     [
       require.resolve('babel-plugin-module-resolver'),
       {
-        root: ["./"],
+        root: ['./'],
         alias: {
-          "fpe-api/install": "./fpe-api/install.ts",
-          "fpe-api": "./fpe-api/index.ts",
-          "fpe-implementation": "./fpe-implementation/index.ts",
-          "test-fpe": getFpePath()
-        }
-      }
-    ]
+          'customization-api': './customization-api/index.ts',
+          'customization-implementation':
+            './customization-implementation/index.ts',
+          customization: getCustomizationApiPath(),
+        },
+      },
+    ],
   ],
 };

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -31,6 +31,10 @@ import type {
 import {VideoProfile} from '../quality';
 import {ChannelProfile, ClientRole} from '../../../agora-rn-uikit';
 import {role, mode} from './Types';
+import {LOG_ENABLED, GEO_FENCING} from '../../../config.json';
+import {Platform} from 'react-native';
+import isMobileOrTablet from '../../../src/utils/isMobileOrTablet';
+
 interface MediaDeviceInfo {
   readonly deviceId: string;
   readonly label: string;
@@ -127,7 +131,7 @@ export enum RnEncryptionEnum {
    *
    * @since v3.3.1
    */
-  AES256GCM = 6
+  AES256GCM = 6,
 }
 
 export enum VideoStreamType {
@@ -161,11 +165,6 @@ if ($config.LOG_ENABLED) {
   AgoraRTC.disableLogUpload();
 }
 
-interface CustomEvents {
-  ScreenshareStopped: callbackType
-}
-
-
 export default class RtcEngine {
   public appId: string;
   // public AgoraRTC: any;
@@ -214,20 +213,42 @@ export default class RtcEngine {
     this.videoProfile = profile;
   }
 
+  async enableAudio(): Promise<void> {
+    try {
+      let localAudio = await AgoraRTC.createMicrophoneAudioTrack({});
+      this.localStream.audio = localAudio;
+    } catch (e) {
+      let audioError = e;
+      e.status = {audioError};
+      throw e;
+    }
+  }
+
   async enableVideo(): Promise<void> {
+    /**
+     * Issue: Backgrounding the browser or app causes the audio streaming to be cut off.
+     * Impact: All browsers and apps that use WKWebView on iOS 15.x, such as Safari and Chrome.
+     * Solution:
+     *    Upgrade to the Web SDK v4.7.3 or later versions.
+     *    When calling createMicrophoneAudioTrack, set bypassWebAudio as true.
+     *    The Web SDK directly publishes the local audio stream without processing it through WebAudio.
+     */
+
+    const audioConfig =
+      Platform.OS == 'web' && isMobileOrTablet() ? {bypassWebAudio: true} : {};
     try {
       let [localAudio, localVideo] =
-        await AgoraRTC.createMicrophoneAndCameraTracks(
-          {},
-          {encoderConfig: this.videoProfile},
-        );
+        await AgoraRTC.createMicrophoneAndCameraTracks(audioConfig, {
+          encoderConfig: this.videoProfile,
+        });
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
     } catch (e) {
       let audioError = false;
       let videoError = false;
       try {
-        let localAudio = await AgoraRTC.createMicrophoneAudioTrack({});
+        let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
+
         this.localStream.audio = localAudio;
       } catch (error) {
         audioError = error;
@@ -673,6 +694,8 @@ export default class RtcEngine {
           break;
         case RnEncryptionEnum.SM4128ECB:
           mode = 'sm4-128-ecb';
+        default:
+          mode = 'none';
       }
     } else {
       mode = 'none';
@@ -688,7 +711,7 @@ export default class RtcEngine {
     },
   ): Promise<void> {
     let mode: EncryptionMode;
-    mode = this.getEncryptionMode(enabled, config.encryptionMode);
+    mode = this.getEncryptionMode(enabled, config?.encryptionMode);
     try {
       await Promise.all([
         this.client.setEncryptionConfig(mode, config.encryptionKey),
@@ -784,20 +807,22 @@ export default class RtcEngine {
       try {
         console.log('[screenshare]: creating stream');
 
-        let mode: EncryptionMode;
-        mode = this.getEncryptionMode(true, encryption.mode);
-        try {
-          /**
-           * Since version 4.7.0, if client leaves a call
-           * and joins again the encryption needs to be
-           * set again
-           */
-          await this.screenClient.setEncryptionConfig(
-            mode,
-            encryption.screenKey,
-          );
-        } catch (e) {
-          console.log('e: Encryption for screenshare failed', e);
+        if (encryption && encryption.screenKey && encryption.mode) {
+          let mode: EncryptionMode;
+          mode = this.getEncryptionMode(true, encryption?.mode);
+          try {
+            /**
+             * Since version 4.7.0, if client leaves a call
+             * and joins again the encryption needs to be
+             * set again
+             */
+            await this.screenClient.setEncryptionConfig(
+              mode,
+              encryption.screenKey,
+            );
+          } catch (e) {
+            console.log('e: Encryption for screenshare failed', e);
+          }
         }
 
         const screenTracks = await AgoraRTC.createScreenVideoTrack(

package/template/customization-api/action-library.ts

@@ -0,0 +1,22 @@
+//hooks used for create/join meeting
+export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
+export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
+
+//mute local audio state
+export {
+  MUTE_LOCAL_TYPE,
+  default as useMuteToggleLocal,
+} from '../src/utils/useMuteToggleLocal';
+
+//remove remote user from the call
+export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
+
+//mute remote user audio/video
+export {
+  default as useRemoteMute,
+  MUTE_REMOTE_TYPE,
+} from '../src/utils/useRemoteMute';
+
+export {controlMessageEnum} from '../src/components/ChatContext';
+//audio/video toggle state
+export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';

package/template/{fpe-api/context.ts → customization-api/app-state.ts}

@@ -1,21 +1,17 @@
 /**
  * Core contexts
  */
-import {createHook} from 'fpe-implementation';
-import {
-  RtcContext,
-  RenderContext,
-  PropsContext,
-  LocalContext,
-} from '../agora-rn-uikit';
+import {createHook} from 'customization-implementation';
+import {RtcContext, RenderContext} from '../agora-rn-uikit';
+
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
 //import {default as StorageContext} from '../src/components/StorageContext';
 
-export const useRtcContext = createHook(RtcContext);
-export const useRenderContext = createHook(RenderContext);
-export const usePropsContext = createHook(PropsContext);
-export const useLocalContext = createHook(LocalContext);
+export const useRtc = createHook(RtcContext);
+export const useRender = createHook(RenderContext);
+export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
+
 // commented for v1 release
 //export const useDeviceContext = createHook(DeviceContext);
 //export const useStorageContext = createHook(StorageContext);
@@ -40,6 +36,12 @@ export {useRecording} from '../src/subComponents/recording/useRecording';
 export type {RecordingContextInterface} from '../src/subComponents/recording/useRecording';
 export {useMeetingInfo} from '../src/components/meeting-info/useMeetingInfo';
 export type {MeetingInfoContextInterface} from '../src/components/meeting-info/useMeetingInfo';
-// commented for v1 release
-// export {useChatUIControl} from '../src/components/chat-ui/useChatUIControl';
-// export type {ChatUIControlInterface} from '../src/components/chat-ui/useChatUIControl';
+export {useChatUIControl} from '../src/components/chat-ui/useChatUIControl';
+export type {ChatUIControlInterface} from '../src/components/chat-ui/useChatUIControl';
+export {useMessages} from '../src/app-state/useMessages';
+export type {messageInterface} from '../src/app-state/useMessages';
+export {SidePanelType} from '../src/subComponents/SidePanelEnum';
+export {useSidePanel} from '../src/utils/useSidePanel';
+
+//hook used to get/set username
+export {default as useUserName} from '../src/utils/useUserName';

package/template/customization-api/customEvents.ts

@@ -0,0 +1,9 @@
+// 1. Import Events
+import Events from '../src/rtm-events-api/Events';
+import {EventSource} from '../src/rtm-events-api';
+
+// 2. Initialize with source "fpe"
+const customEvents = new Events(EventSource.fpe);
+
+// 3. export
+export {customEvents};

package/template/{fpe-api/install.ts → customization-api/customize.ts}

@@ -9,12 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {FpeApiInterface} from './typeDefinition';
+import {CustomizationApiInterface} from './typeDefinition';
 import ReactIs from 'react-is';
 /**
  *
- * @param config FPE options to override the UI components and customize the application
- * @returns config options
+ * @param config customization options to override the UI components and customize the application
+ * @returns customization options
  */
 
 function isString(data: any) {
@@ -45,18 +45,28 @@ function isComponent(data: any) {
   return false;
 }
 
+//These keys value are not react component. so doing indexOf and checking whether its function or not
+const ignoreTheseKeys = ['customLayout', 'useUserContext'];
+
 function validateComponents(components: any) {
   for (const key in components) {
-    let comp = components[key];
-    if (comp) {
-      if (isComponent(comp) || isObject(comp)) {
-        if (isObject(comp)) {
-          validateComponents(comp);
+    if (ignoreTheseKeys.indexOf(key) === -1) {
+      let comp = components[key];
+      if (comp) {
+        if (isComponent(comp) || isObject(comp)) {
+          if (isObject(comp)) {
+            validateComponents(comp);
+          }
+        } else {
+          console.error(
+            `Customize:Error ${key} should be a react component or object`,
+          );
         }
-      } else {
-        console.error(
-          `InstallFPE:Error ${key} should be a react component or object`,
-        );
+      }
+    } else {
+      let comp = components[key];
+      if (comp && !isFunction(comp)) {
+        console.error(`Customize:Error ${key} should be an function`);
       }
     }
   }
@@ -67,7 +77,7 @@ function validateLifecycle(data: any) {
     const callback = data[key];
     if (callback && !isFunction(callback)) {
       console.error(
-        `InstallFPE:Error ${key} should be a function that return async function`,
+        `Customize:Error ${key} should be a function that return async function`,
       );
     }
   }
@@ -75,20 +85,14 @@ function validateLifecycle(data: any) {
 
 function validateCustomRoutes(routes: any) {
   if (routes && !Array.isArray(routes)) {
-    console.error(`InstallFPE:Error customRoutes should be an array`);
-  }
-}
-
-function validateAppRoot(data: any) {
-  if (data && !isComponent(data)) {
-    console.error(`InstallFPE:Error appRoot should be a react component`);
+    console.error(`Customize:Error customRoutes should be an array`);
   }
 }
 
 function validatei18n(data: any) {
   if (data) {
     if (!Array.isArray(data)) {
-      console.error(`InstallFPE:Error i18n should be an array`);
+      console.error(`Customize:Error i18n should be an array`);
     } else {
       data.map((item) => {
         const langData = item.data;
@@ -97,7 +101,7 @@ function validatei18n(data: any) {
           if (value) {
             if (!(isString(value) || isFunction(value))) {
               console.error(
-                `InstallFPE:Error ${item.locale} ${key} should be a string or function`,
+                `Customize:Error ${item.locale} ${key} should be a string or function`,
               );
             }
           }
@@ -106,7 +110,7 @@ function validatei18n(data: any) {
     }
   }
 }
-export const installFPE = (config: FpeApiInterface) => {
+export const customize = (config: CustomizationApiInterface) => {
   //validating the components
   config?.components && validateComponents(config.components);
 
@@ -114,9 +118,6 @@ export const installFPE = (config: FpeApiInterface) => {
   //commented for v1 release
   //config?.customRoutes && validateCustomRoutes(config.customRoutes);
 
-  //validating the app root
-  config?.appRoot && validateAppRoot(config.appRoot);
-
   //validating the i18n
   config?.i18n && validatei18n(config.i18n);
 

package/template/{fpe-api → customization-api}/index.ts

@@ -9,13 +9,18 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import fpeConfig from 'test-fpe';
 
-export {fpeConfig};
+// TODO: Investigate further
+// Exported like so to prevent error while bundling as react-sdk. Cause: some webpack Edgecase
+import {customize} from './customize';
+import configJSON from '../config.json';
 
-export * from './useFpe';
-export * from './context';
-export * from './components';
+let $config = configJSON as unknown as ConfigInterface;
+
+export {customize, $config};
+export * from './action-library';
+export * from './app-state';
+export * from './customEvents';
+export * from './sub-components';
 export * from './typeDefinition';
 export * from './utils';
-export * from './fpeEvents';

package/template/{fpe-api/components.ts → customization-api/sub-components.ts}

@@ -1,3 +1,8 @@
+//Common components
+export {default as HorizontalRule} from '../src/atoms/HorizontalRule';
+export {default as PrimaryButton} from '../src/atoms/PrimaryButton';
+export {default as SecondaryButton} from '../src/atoms/SecondaryButton';
+export {default as TextInput} from '../src/atoms/TextInput';
 //Icons
 export {default as icons} from '../src/assets/icons';
 
@@ -18,15 +23,21 @@ export {
   ParticipantsView,
   Controls,
   ControlsComponentsArray,
+  Navbar,
+  NavBarComponentsArray,
   ChatBubble,
+  ChatSendButton,
+  ChatTextInput,
+  Chat,
+  SettingsView,
 } from '../src/pages/video-call/index';
 export {default as GridLayout} from '../src/components/GridVideo';
 export {default as PinnedLayout} from '../src/components/PinnedVideo';
 export {default as VideoComponent} from '../src/pages/video-call/VideoComponent';
-export {MaxVideoRenderer as MaxVideoView} from '../src/pages/video-call/VideoRenderer';
+export {default as MaxVideoView} from '../src/pages/video-call/VideoRenderer';
 export {default as RenderComponent} from '../src/pages/video-call/RenderComponent';
-export {NameWithMicStatus} from '../src/pages/video-call/NameWithMicStatus';
-export {NetworkQualityPill} from '../src/subComponents/NetworkQualityPill';
+export {default as NameWithMicIcon} from '../src/pages/video-call/NameWithMicIcon';
+export {default as NetworkQualityPill} from '../src/subComponents/NetworkQualityPill';
 //videocall screen
 export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScreen';
 
@@ -41,3 +52,11 @@ export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScree
 
 //Sidepanel buttons
 export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';
+export {
+  ImageIcon as UiKitImageIcon,
+  MaxVideoView as UiKitMaxVideoView,
+  BtnTemplate as UiKitBtnTemplate,
+  ClientRole as UikitClientRole,
+  ChannelProfile as UikitChannelProfile,
+} from '../agora-rn-uikit';
+export type {BtnTemplateInterface as UikitBtnTemplateInterface} from '../agora-rn-uikit';

package/template/{fpe-api → customization-api}/typeDefinition.ts

@@ -17,8 +17,9 @@ import {
   RenderStateInterface,
   UidType,
 } from '../agora-rn-uikit';
-import {i18nInterface} from '../src/language/i18nTypes';
+import {I18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
+export type {RenderInterface, RenderStateInterface, UidType};
 export type {
   ChatTextInputProps,
   ChatSendButtonProps,
@@ -49,9 +50,8 @@ export interface ChatCmpInterface {
   //commented for v1 release
   //extends BeforeAndAfterInterface
   chatBubble?: React.ComponentType<ChatBubbleProps>;
-  //commented for v1 release
-  //chatInput?: React.ComponentType<ChatTextInputProps>;
-  //chatSentButton?: React.ComponentType<ChatSendButtonProps>;
+  chatInput?: React.ComponentType<ChatTextInputProps>;
+  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
 }
 
 export interface renderComponentInterface {
@@ -63,7 +63,7 @@ export interface renderComponentObjectInterface {
 }
 
 export type layoutComponent = React.ComponentType<{
-  renderData: RenderStateInterface['renderPosition'];
+  renderData: RenderStateInterface['activeUids'];
 }>;
 
 export interface layoutObjectBase {
@@ -84,16 +84,21 @@ export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
 
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
-  //topBar?: React.ComponentType;
+  topBar?: React.ComponentType;
   //settingsPanel?: React.ComponentType;
   participantsPanel?: React.ComponentType;
   bottomBar?: React.ComponentType;
   chat?: ChatCmpInterface;
   customContent?: renderComponentObjectInterface;
   customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
+  useUserContext?: () => void;
 }
 
 export type ComponentsInterface = {
+  /**
+   * Custom context/api provider wrapped in root level
+   */
+  appRoot?: React.ComponentType;
   // commented for v1 release
   //precall?: PreCallInterface | React.ComponentType;
   //create?: React.ComponentType;
@@ -114,7 +119,7 @@ export interface CustomRoutesInterface {
 
 export type CustomHookType = () => () => Promise<void>;
 
-export interface FpeApiInterface {
+export interface CustomizationApiInterface {
   /**
    * components used to replace whole screen or subcomponents
    */
@@ -124,14 +129,10 @@ export interface FpeApiInterface {
    */
   // commented for v1 release
   //customRoutes?: CustomRoutesInterface[];
-  /**
-   * Custom context/api provider wrapped in root level
-   */
-  appRoot?: React.ComponentType;
   /**
    * Internationlization
    */
-  i18n?: i18nInterface[];
+  i18n?: I18nInterface[];
   /**
    * Life cycle events
    */
@@ -140,6 +141,4 @@ export interface FpeApiInterface {
   //   useBeforeJoin?: CustomHookType;
   //   useBeforeCreate?: CustomHookType;
   // };
-  // commented for v1 release
-  //customUserContext?: () => any;
 }

package/template/customization-api/utils.ts

@@ -0,0 +1,30 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+// commented for v1 release
+//export {default as useIsScreenShare} from '../src/utils/useIsScreenShare';
+
+//hooks used to check user type
+export {default as useIsHost} from '../src/utils/useIsHost';
+export {default as useIsAttendee} from '../src/utils/useIsAttendee';
+export {default as useIsPSTN} from '../src/utils/useIsPSTN';
+
+//hook to manage audio/video states
+export {default as useIsAudioEnabled} from '../src/utils/useIsAudioEnabled';
+export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
+
+//hooks used for navigation
+export {useHistory, useParams} from '../src/components/Router';
+
+//export common function
+export {isWeb, isIOS, isAndroid, isDestop} from '../src/utils/common';
+export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
+export {useLocalUid} from '../agora-rn-uikit';

package/template/{fpe-implementation/dummyFpe.ts → customization-implementation/dummyConfig.ts}

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import { installFPE } from "fpe-api/install";
+import {customize} from 'customization-api';
 /**
- * Dummy FPE used to load when project doesn't have the FPE.
+ * Dummy Config used to load when project doesn't have the customization.
  */
-const data = installFPE({});
-export default data;
+const dummyConfig = customize({});
+export default dummyConfig;

package/template/customization-implementation/index.ts

@@ -0,0 +1,4 @@
+export {default as createHook} from './createHook';
+export {CustomizationProvider, useCustomization} from './useCustomization';
+export type {CustomizationProviderProps} from './useCustomization';
+export {default as customizationConfig} from 'customization';

package/template/{fpe-api/useFpe.tsx → customization-implementation/useCustomization.tsx}

@@ -10,26 +10,26 @@
 *********************************************
 */
 import React from 'react';
-import fpeConfig from 'test-fpe';
-import {FpeApiInterface} from './typeDefinition';
-import {createHook} from 'fpe-implementation';
+import {CustomizationApiInterface} from 'customization-api';
+import customizationConfig from 'customization';
+import createHook from './createHook';
 
-const FpeContext: React.Context<FpeApiInterface> =
-  React.createContext(fpeConfig);
+const CustomizationContext: React.Context<CustomizationApiInterface> =
+  React.createContext(customizationConfig);
 
-export interface FpeProviderInterface {
+export interface CustomizationProviderProps {
   children: React.ReactNode;
-  value: FpeApiInterface;
+  value: CustomizationApiInterface;
 }
 
-const FpeProvider = (props: FpeProviderInterface) => {
+const CustomizationProvider = (props: CustomizationProviderProps) => {
   return (
-    <FpeContext.Provider value={props.value}>
+    <CustomizationContext.Provider value={props.value}>
       {props.children}
-    </FpeContext.Provider>
+    </CustomizationContext.Provider>
   );
 };
 
-const useFpe = createHook(FpeContext);
+const useCustomization = createHook(CustomizationContext);
 
-export {useFpe, FpeProvider};
+export {useCustomization, CustomizationProvider};

package/template/{fpe.config.js → customization.config.js}

@@ -11,19 +11,19 @@
 */
 
 /*
-getFpePath - will return test-fpe if exists otherwise it will return the dummy fpe path
+getCustomizationApiPath - will return customization if exists otherwise it will return the dummy customization path
 */
 const fs = require('fs');
-const FpePathTs = './test-fpe/index.ts';
-const FpePathTsx = './test-fpe/index.tsx';
-const FpeDummyPath = './fpe-implementation/dummyFpe.ts';
-const getFpePath = () => {
-  if (fs.existsSync(FpePathTs)) {
-    return FpePathTs;
+const customizationPathTs = './customization/index.ts';
+const customizationPathTsx = './customization/index.tsx';
+const customizationDummyPath = './customization-implementation/dummyConfig.ts';
+const getCustomizationApiPath = () => {
+  if (fs.existsSync(customizationPathTs)) {
+    return customizationPathTs;
   }
-  if (fs.existsSync(FpePathTsx)) {
-    return FpePathTsx;
+  if (fs.existsSync(customizationPathTsx)) {
+    return customizationPathTsx;
   }
-  return FpeDummyPath;
+  return customizationDummyPath;
 };
-module.exports = getFpePath;
+module.exports = getCustomizationApiPath;