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

package/template/tsconfig_fpeApi.json

@@ -1,10 +1,10 @@
 {
   // --------------------------------------------------------
   // Use with webpack loader
-  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files":["./fpe-api/index.ts","./global.d.ts"],
+  "files": ["./customization-api/index.ts", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */
@@ -83,21 +83,20 @@
       "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
       "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
       "react-native": ["react-native-web"],
-      "fpe-api": ["./fpe-api/index.ts"],
-      "fpe-api/install": ["./fpe-api/install.ts"],
-      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "customization-api": ["./customization-api/index.ts"],
+      "customization-implementation": [
+        "./customization-implementation/index.ts"
+      ],
       "./RtcContext": ["agora-rn-uikit/src/index"]
     }
     // --------------------------------------------------------
   },
-  // "references": [{"path": "./fpe-api", "prepend": true}],
+  // "references": [{"path": "./customization-api", "prepend": true}],
   "exclude": [
     //"node_modules",
     "babel.config.js",
     "metro.config.js",
     "jest.config.js"
   ],
-  "include": [
-    "node_modules/agora"
-  ]
+  "include": ["node_modules/agora"]
 }

package/template/tsconfig_rsdk_index.json

@@ -1,10 +1,10 @@
 {
   // --------------------------------------------------------
   // Use with webpack loader
-  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files":["./src/SDKAppWrapper.tsx","./index.rsdk.tsx","./global.d.ts"],
+  "files": ["./src/SDKAppWrapper.tsx", "./index.rsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */
@@ -85,21 +85,20 @@
       "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
       "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
       "react-native": ["react-native-web"],
-      "fpe-api": ["./fpe-api/index.ts"],
-      "fpe-api/install": ["./fpe-api/install.ts"],
-      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "customization-api": ["./customization-api/index.ts"],
+      "customization-implementation": [
+        "./customization-implementation/index.ts"
+      ],
       "./RtcContext": ["agora-rn-uikit/src/index"]
     }
     // --------------------------------------------------------
   },
-  // "references": [{"path": "./fpe-api", "prepend": true}],
+  // "references": [{"path": "./customization-api", "prepend": true}],
   "exclude": [
     //"node_modules",
     "babel.config.js",
     "metro.config.js",
     "jest.config.js"
   ],
-  "include": [
-    "node_modules/agora"
-  ]
+  "include": ["node_modules/agora"]
 }

package/template/tsconfig_wsdk_index.json

@@ -1,10 +1,10 @@
 {
   // --------------------------------------------------------
   // Use with webpack loader
-  // "files":["./fpe-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
+  // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files":["./src/SDKAppWrapper.tsx","./index.wsdk.tsx","./global.d.ts"],
+  "files": ["./src/SDKAppWrapper.tsx", "./index.wsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */
@@ -84,21 +84,20 @@
       "agora-react-native-rtm": ["./bridge/rtm/web/index.ts"],
       "react-native-agora": ["./bridge/rtc/webNg/index.ts"],
       "react-native": ["react-native-web"],
-      "fpe-api": ["./fpe-api/index.ts"],
-      "fpe-api/install": ["./fpe-api/install.ts"],
-      "fpe-implementation": ["./fpe-implementation/index.ts"],
+      "customization-api": ["./customization-api/index.ts"],
+      "customization-implementation": [
+        "./customization-implementation/index.ts"
+      ],
       "./RtcContext": ["agora-rn-uikit/src/index"]
     }
     // --------------------------------------------------------
   },
-  // "references": [{"path": "./fpe-api", "prepend": true}],
+  // "references": [{"path": "./customization-api", "prepend": true}],
   "exclude": [
     //"node_modules",
     "babel.config.js",
     "metro.config.js",
     "jest.config.js"
   ],
-  "include": [
-    "node_modules/agora"
-  ]
+  "include": ["node_modules/agora"]
 }

package/template/webpack.commons.js

@@ -19,7 +19,7 @@ const isDevelopment = process.env.NODE_ENV === 'development';
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const configVars = require('./configTransform');
-const getFpePath = require('./fpe.config');
+const getCustomizationApiPath = require('./customization.config');
 
 const isElectron = ['linux', 'windows', 'mac'].includes(process.env.TARGET);
 const isReactSdk = process.env.TARGET === 'rsdk';
@@ -33,9 +33,7 @@ module.exports = {
     !isSdk &&
       new HtmlWebpackPlugin({
         title: configVars['$config.APP_NAME'],
-        template: isElectron
-          ? 'electron/index.html'
-          : 'web/index.html',
+        template: isElectron ? 'electron/index.html' : 'web/index.html',
       }),
     isDevelopment &&
       !isSdk &&
@@ -55,10 +53,12 @@ module.exports = {
       // Using rtc bridge to translate React Native RTC SDK calls to web SDK calls for web and linux
       // Using rtc bridge to translate React Native RTC SDK calls to electron SDK calls for windows and mac
       'react-native-agora$': path.join(__dirname, 'bridge/rtc/webNg/index.ts'),
-      'fpe-api/install': path.join(__dirname, 'fpe-api/install.ts'),
-      'fpe-api': path.join(__dirname, 'fpe-api/index.ts'),
-      'fpe-implementation': path.join(__dirname, 'fpe-implementation/index.ts'),
-      'test-fpe': path.join(__dirname, getFpePath()),
+      'customization-api': path.join(__dirname, 'customization-api/index.ts'),
+      'customization-implementation': path.join(
+        __dirname,
+        'customization-implementation/index.ts',
+      ),
+      customization: path.join(__dirname, getCustomizationApiPath()),
       'agora-react-native-rtm/lib/typescript/src': path.join(
         __dirname,
         'bridge/rtm/web/index.ts',
@@ -85,7 +85,7 @@ module.exports = {
     ].filter(Boolean),
   },
   // Enable source maps during development
-  // devtool: isDevelopment ? 'eval-cheap-module-source-map' : undefined,
+  devtool: isDevelopment ? 'eval-cheap-module-source-map' : undefined,
   module: {
     rules: [
       {

package/template/webpack.rsdk.config.js

@@ -7,6 +7,7 @@ const isDevelopment = process.env.NODE_ENV === 'development';
 module.exports = merge(commons, {
   // Enable optimizations in production
   mode: isDevelopment ? 'development' : 'production',
+  devtool: isDevelopment ? 'eval-cheap-module-source-map' : 'source-map',
   // externals: [
   //   nodeExternals({allowlist: [/agora.*/, /fpe.*/]}),
   // ],
@@ -16,6 +17,7 @@ module.exports = merge(commons, {
     'react-router': 'react-router',
     'react-router-dom': 'react-router-dom',
     '@apollo/client': '@apollo/client',
+    nanoid: 'nanoid',
   },
   // Main entry point for the web application
   entry: {
@@ -25,9 +27,9 @@ module.exports = merge(commons, {
   output: {
     path: path.resolve(__dirname, `../Builds/react-sdk`),
     filename: 'index.js',
-    library:{
+    library: {
       type: 'commonjs2',
-    } 
+    },
   },
   // watch: isDevelopment
 });

package/template/webpack.ts.config.js

@@ -20,8 +20,8 @@ module.exports = merge(commons, {
   // Enable optimizations in production
   mode: isDevelopment ? 'development' : 'production',
   // Main entry point for the web application
-  module:{
-    rules:[
+  module: {
+    rules: [
       {
         test: /\.tsx?$/,
         loader: 'ts-loader',
@@ -29,9 +29,9 @@ module.exports = merge(commons, {
         exclude: /node_modules|\.d\.ts$/,
         options: {
           configFile: 'tsconfig.json',
-          ignoreDiagnostics: [2339,2554,2539,1005]
+          ignoreDiagnostics: [2339, 2554, 2539, 1005],
           // ignoreDiagnostics: [2554,2539,2339,2551,2769,2305,2614,2322,2362,2369,2698]
-        }
+        },
       },
       {
         // Use babel to transpile all js, ts, jsx and tsx files
@@ -78,10 +78,10 @@ module.exports = merge(commons, {
           },
         ],
       },
-    ]
+    ],
   },
   entry: {
-    main: './fpe-api/index.ts',
+    main: './customization-api/index.ts',
   },
   output: {
     path: path.resolve(__dirname, `../Builds/ts`),

package/template/webpack.wsdk.config.js

@@ -9,6 +9,8 @@ const libraryTargets = ['commonjs2', 'var','umd2'];
 const baseConfig = {
   // Enable optimizations in production
   mode: isDevelopment ? 'development' : 'production',
+  // Angular doesn't support cheap-eval-module-source-maps 
+  devtool:'source-map',
   // Main entry point for the web application
   entry: {
     main: './index.wsdk.tsx',
@@ -20,7 +22,6 @@ const baseConfig = {
       name: 'AgoraAppBuilder',
     },
   },
-  watch: isDevelopment
 };
 
 const mappedConfigs = libraryTargets.map((target, _) => {

package/template/fpe-api/fpeEvents.ts

@@ -1,9 +0,0 @@
-// 1. Import customEvents
-import CustomEvents from '../src/custom-events/CustomEvents';
-import {EventSourceEnum} from '../src/custom-events';
-
-// 2. Initialize with source "fpe"
-const fpeEvents = new CustomEvents(EventSourceEnum.fpe);
-
-// 3. export
-export {fpeEvents as CustomEvents};

package/template/fpe-api/utils.ts

@@ -1,61 +0,0 @@
-/*
-********************************************
- 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/isScreenShareUser';
-export {default as useIsHost} from '../src/utils/isHostUser';
-export {default as useIsAttendee} from '../src/utils/IsAttendeeUser';
-export {default as useIsPSTN} from '../src/utils/isPSTNUser';
-export {default as useUserList} from '../src/utils/useUserList';
-// commented for v1 release
-//export {default as useGroupMessages} from '../src/utils/useGroupMessages';
-//export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
-export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
-export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
-export {default as useSetName} from '../src/utils/useSetName';
-export {default as useGetName} from '../src/utils/useGetName';
-export {useSidePanel} from '../src/utils/useSidePanel';
-// commented for v1 release
-// export {
-//   default as useUnreadMessageCount,
-//   UNREAD_MESSAGE_COUNT_TYPE,
-// } from '../src/utils/useUnreadMessageCount';
-// export {
-//   default as useSetUnreadMessageCount,
-//   SET_UNREAD_MESSAGE_COUNT_TYPE,
-// } from '../src/utils/useSetUnreadMessageCount';
-export {default as useNavigateTo} from '../src/utils/useNavigateTo';
-export {default as useNavParams} from '../src/utils/useNavParams';
-export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
-export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
-// commented for v1 release
-// export {
-//   default as useSendMessage,
-//   MESSAGE_TYPE,
-// } from '../src/utils/useSendMessage';
-// export {controlMessageEnum} from '../src/components/ChatContext';
-// export {
-//   default as useSendControlMessage,
-//   CONTROL_MESSAGE_TYPE,
-// } from '../src/utils/useSendControlMessage';
-export {
-  MUTE_LOCAL_TYPE,
-  default as useMuteToggleLocal,
-} from '../src/utils/useMuteToggleLocal';
-export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
-export {
-  default as useRemoteMute,
-  MUTE_REMOTE_TYPE,
-} from '../src/utils/useRemoteMute';
-export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
-
-//export common function
-export * from '../src/utils/common';

package/template/fpe-implementation/index.ts

@@ -1 +0,0 @@
-export { default as createHook } from './createHook';

package/template/fpe-todo.txt

@@ -1,14 +0,0 @@
-1. test-fpe name should be changed 
-  - template/_gitignore
-  - babel.config.js
-  - webpack.config.js
-  - fpe.config.js
-  - fpe-api index.ts
-  - fpe-api useFPE
-2. What if user called custom context without wrapping provider
-  - useContext will return the default vaule. so we can't identify whether is wrapped with the provider or not.
-3. CustomUserContext 
-4. Add sibling into view without overriding
-5. Translation labels
-  - some of keys
-6.Layout dropdown implementation

package/template/src/components/RTMEvents.tsx

@@ -1,84 +0,0 @@
-/*
-********************************************
- 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 {messageChannelType, messageEventInterface} from './ChatContext';
-
-const RTM_ERROR_TEMPLATE = 'RTMError:';
-
-type eventsMapInterface = {
-  [key in messageChannelType]: Record<string, any>;
-};
-
-type errorObjectInterface = {
-  msg: string;
-  cause: any;
-};
-
-type eventKeyType = keyof eventsMapInterface;
-
-const eventsMap: eventsMapInterface = {
-  [messageChannelType.Private]: new Map<string, any>(),
-  [messageChannelType.Public]: new Map<string, any>(),
-};
-
-export interface rtmEventsInterface {
-  on: (
-    messageChannel: messageChannelType,
-    evtName: string,
-    callback: any,
-  ) => void;
-  emit: (
-    messageChannel: messageChannelType,
-    data: messageEventInterface | any | null,
-    error?: errorObjectInterface | null | undefined,
-  ) => void;
-  off: (messageChannel: messageChannelType, evtName: string) => void;
-  destroyAll: () => void;
-}
-
-const events: rtmEventsInterface = {
-  on: (messageChannel: messageChannelType, evtName: string, callback: any) => {
-    eventsMap[messageChannel].set(evtName, callback);
-  },
-  emit: (
-    messageChannel: messageChannelType,
-    data: messageEventInterface | any | null,
-    error: errorObjectInterface | null | undefined,
-  ) => {
-    // Handle error, if error found return error in callback
-    if (error) {
-      let err = new Error(`${RTM_ERROR_TEMPLATE}: ${error.msg}`);
-      err.stack += '\nCaused by: ' + error.cause;
-
-      for (const [key] of eventsMap[messageChannel].entries()) {
-        eventsMap[messageChannel].get(`${key}`)(null, err);
-      }
-      return;
-    }
-    // Handle success, return data in callback
-    for (const [key] of eventsMap[messageChannel].entries()) {
-      eventsMap[messageChannel].get(`${key}`)(data, null);
-    }
-  },
-  off: (messageChannel: messageChannelType, evtName: string) => {
-    eventsMap[messageChannel].delete(evtName);
-  },
-  destroyAll: () => {
-    for (const key of Object.keys(eventsMap) as Array<eventKeyType>) {
-      eventsMap[key].clear();
-    }
-  },
-};
-
-Object.freeze(events);
-
-export default events;

package/template/src/custom-events/index.tsx

@@ -1,4 +0,0 @@
-import CustomEvents from './CustomEvents';
-
-export * from './types';
-export default new CustomEvents();

package/template/src/custom-events/types.ts

@@ -1,51 +0,0 @@
-import {UidType} from '../../agora-rn-uikit';
-type Simplify<T> = T extends infer S ? {[K in keyof S]: S[K]} : never;
-type NoneOf<T> = Simplify<{[K in keyof T]?: never}>;
-type AtMostOneOf<T> =
-  | NoneOf<T>
-  | {[K in keyof T]: Simplify<Pick<T, K> & NoneOf<Omit<T, K>>>}[keyof T];
-
-// export type TEventOptions = AtMostOneOf<IMessageOptions> & IEventOptions;
-
-export type ToOptions = UidType | UidType[];
-
-interface IEventPayloadBase {
-  action?: any;
-}
-
-interface IEventPayloadWithoutAttributes extends IEventPayloadBase {
-  level?: never;
-  value: string;
-}
-
-interface IEventPayloadWithAttributes extends IEventPayloadBase {
-  level: 2 | 3;
-  value: string;
-}
-
-export type EventPayload =
-  | IEventPayloadWithoutAttributes
-  | IEventPayloadWithAttributes
-  | Record<string, never>;
-
-export enum EventSourceEnum {
-  core = 'core',
-  fpe = 'fpe',
-}
-export enum EventLevel {
-  'LEVEL1' = 1,
-  'LEVEL2',
-  'LEVEL3',
-}
-interface dataPayload {
-  action: string;
-  level: 1 | 2 | 3;
-  value: string;
-}
-interface EvtCbPayload {
-  payload: dataPayload;
-  sender: string;
-  ts: number;
-  source: EventSourceEnum;
-}
-export type TEventCallback = (args: EvtCbPayload) => void;

package/template/src/pages/video-call/CustomLayout.ts

@@ -1,17 +0,0 @@
-import {useFpe} from 'fpe-api';
-import {DefaultLayouts} from './DefaultLayouts';
-
-function useCustomLayout() {
-  const fpeLayouts = useFpe((config) => {
-    if (
-      typeof config?.components?.videoCall === 'object' &&
-      config?.components?.videoCall?.customLayout
-    ) {
-      return config.components.videoCall.customLayout(DefaultLayouts);
-    } else {
-      return DefaultLayouts;
-    }
-  });
-  return fpeLayouts;
-}
-export default useCustomLayout;

package/template/src/rtm-events/types.ts

@@ -1,7 +0,0 @@
-export enum eventMessageType {
-  CONTROL_GROUP = 1,
-  CONTROL_PRIVATE,
-  NORMAL_GROUP,
-  NORMAL_PRIVATE,
-  CUSTOM_EVENT,
-}

package/template/src/utils/getMeetingInvite.ts

@@ -1,53 +0,0 @@
-const GetMeetingInviteURL = (
-  baseUrl: string,
-  isHost: boolean,
-  meetingPassphrase: {
-    host?: string;
-    attendee?: string;
-  },
-  isSeparateHostLink: boolean,
-) => {
-  if (isHost) {
-    if (isSeparateHostLink) {
-      return {
-        host: `${baseUrl}/${meetingPassphrase.host}`,
-        attendee: `${baseUrl}/${meetingPassphrase.attendee}`,
-      };
-    } else {
-      return {
-        host: `${baseUrl}/${meetingPassphrase.host}`,
-      };
-    }
-  } else {
-    return {
-      attendee: `${baseUrl}/${meetingPassphrase.attendee}`,
-    };
-  }
-};
-const GetMeetingInviteID = (
-  isHost: boolean,
-  meetingPassphrase: {
-    host?: string;
-    attendee?: string;
-  },
-  isSeparateHostLink: boolean,
-) => {
-  if (isHost) {
-    if (isSeparateHostLink) {
-      return {
-        host: `${meetingPassphrase.host}`,
-        attendee: `${meetingPassphrase.attendee}`,
-      };
-    } else {
-      return {
-        host: `${meetingPassphrase.host}`,
-      };
-    }
-  } else {
-    return {
-      attendee: `${meetingPassphrase.attendee}`,
-    };
-  }
-};
-
-export {GetMeetingInviteURL, GetMeetingInviteID};

package/template/src/utils/useGroupMessages.ts

@@ -1,24 +0,0 @@
-/*
-********************************************
- 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 {useChatMessages} from '../components/chat-messages/useChatMessages';
-
-/**
- * This hook will fetch the group messages
- * @returns userList
- */
-function useGroupMessages() {
-  const {messageStore} = useChatMessages();
-  return messageStore;
-}
-
-export default useGroupMessages;

package/template/src/utils/useNavParams.ts

@@ -1,6 +0,0 @@
-import {useParams} from '../components/Router';
-
-export default function useNavParams() {
-  const data = useParams();
-  return data;
-}

package/template/src/utils/useNavigateTo.ts

@@ -1,8 +0,0 @@
-import {useHistory} from '../components/Router';
-
-export default function useNavigateTo() {
-  const history = useHistory();
-  return (path: string, params?: any) => {
-    history.push(path, params);
-  };
-}

package/template/src/utils/usePrivateMessages.ts

@@ -1,33 +0,0 @@
-/*
-********************************************
- 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 {useChatMessages} from '../components/chat-messages/useChatMessages';
-import {UidType} from '../../agora-rn-uikit';
-
-/**
- * This hook will return function to find the private message by uid
- * @returns private message
- */
-function usePrivateMessages() {
-  const {privateMessageStore} = useChatMessages();
-  /**
-   *
-   * @param uid - User id
-   * @returns If uid is passed then it will return particular private message data
-   * otherwise it will return whole private message store
-   */
-  const getPrivateMessage = (uid?: UidType) =>
-    uid ? privateMessageStore[uid] : privateMessageStore;
-  return getPrivateMessage;
-}
-
-export default usePrivateMessages;