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

package/template/src/utils/useRemoteMute.ts

@@ -10,47 +10,72 @@
 *********************************************
 */
 import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
-import {UidType} from '../../agora-rn-uikit';
 import {controlMessageEnum} from '../components/ChatContext';
-import useIsPSTN from './isPSTNUser';
+import useIsPSTN from './useIsPSTN';
 import useMutePSTN from './useMutePSTN';
-import useSendControlMessage, {
-  CONTROL_MESSAGE_TYPE,
-} from '../utils/useSendControlMessage';
+import {UidType} from '../../agora-rn-uikit';
+import events, {EventPersistLevel} from '../rtm-events-api';
 
 export enum MUTE_REMOTE_TYPE {
   audio,
   video,
 }
+/**
+ * Returns an asynchronous function to toggle muted state of the given track type for a remote user with the given uid or if no uid provided, mutes everyone else in the meeting.
+ */
 function useRemoteMute() {
-  const sendCtrlMsgToUid = useSendControlMessage();
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
-  return async (type: MUTE_REMOTE_TYPE, uid: UidType) => {
+
+  return async (type: MUTE_REMOTE_TYPE, uid?: UidType) => {
     if (isHost) {
       switch (type) {
         case MUTE_REMOTE_TYPE.audio:
-          if (isPSTN(uid)) {
-            try {
-              mutePSTN(uid);
-            } catch (error) {
-              console.error('An error occurred while muting the PSTN user.');
+          // To individual
+          if (uid) {
+            if (isPSTN(uid)) {
+              try {
+                mutePSTN(uid);
+              } catch (error) {
+                console.error('An error occurred while muting the PSTN user.');
+              }
+            } else {
+              events.send(
+                controlMessageEnum.muteAudio,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
             }
           } else {
-            sendCtrlMsgToUid(
-              CONTROL_MESSAGE_TYPE.controlMessageToUid,
+            // To everyone
+            events.send(
               controlMessageEnum.muteAudio,
-              uid,
+              '',
+              EventPersistLevel.LEVEL1,
             );
           }
           break;
         case MUTE_REMOTE_TYPE.video:
-          if (!isPSTN(uid)) {
-            sendCtrlMsgToUid(
-              CONTROL_MESSAGE_TYPE.controlMessageToUid,
+          if (uid) {
+            // To individual
+            if (!isPSTN(uid)) {
+              events.send(
+                controlMessageEnum.muteVideo,
+                '',
+                EventPersistLevel.LEVEL1,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
               controlMessageEnum.muteVideo,
-              uid,
+              '',
+              EventPersistLevel.LEVEL1,
             );
           }
           break;

package/template/src/utils/useSidePanel.tsx

@@ -12,7 +12,7 @@
 
 import React, {SetStateAction} from 'react';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface SidePanelContextInterface {
   sidePanel: SidePanelType;
@@ -36,6 +36,9 @@ const SidePanelProvider = (props: SidePanelProviderProps) => {
   );
 };
 
+/**
+ * The Side panel app state governs the side panel.
+ */
 const useSidePanel = createHook(SidePanelContext);
 
 export {SidePanelProvider, useSidePanel};

package/template/src/utils/useString.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useFpe} from 'fpe-api';
+import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
@@ -17,7 +17,7 @@ import {TextDataInterface} from '../language/default-labels/index';
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
 ) {
-  const languageData = useFpe((data) => data?.i18n);
+  const languageData = useCustomization((data) => data?.i18n);
   if (
     !selectedLanguageCode ||
     !languageData ||

package/template/src/utils/useUserName.ts

@@ -0,0 +1,14 @@
+import useSetName from './useSetName';
+import useGetName from './useGetName';
+
+/**
+ * The UserName app state governs the local user's display name.
+ */
+export default function useUserName(): [
+  string,
+  React.Dispatch<React.SetStateAction<string>>,
+] {
+  const setName = useSetName();
+  const name = useGetName();
+  return [name, setName];
+}

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;