agora-appbuilder-core 2.3.0-beta.21 → 2.3.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.21",
+  "version": "2.3.0-beta.23",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/Gulpfile.js

@@ -141,7 +141,18 @@ const general = {
     );
   },
   typescriptFix: () => {
-    return src('../Builds/fpe-api.d.ts')
+    return src(['../Builds/fpe-api.d.ts', './global.d.ts'])
+      .pipe(concat('./fpe-api.d.ts'))
+      .pipe(
+        replace(
+          `declare var $config: ConfigInterface;
+declare module 'test-fpe' {
+  const data: {};
+  export default data;
+}`,
+          ' ',
+        ),
+      )
       .pipe(replace('"agora-rn-uikit"', '"agora-rn-uikit/src/index"'))
       .pipe(dest('../Builds/'));
   },

package/template/_package-lock.json

@@ -23,6 +23,7 @@
         "electron-updater": "4.3.9",
         "exponential-backoff": "3.1.0",
         "graphql": "15.5.0",
+        "nanoevents": "7.0.1",
         "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
         "react": "16.13.1",
@@ -21451,6 +21452,14 @@
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
       "optional": true
     },
+    "node_modules/nanoevents": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-7.0.1.tgz",
+      "integrity": "sha512-o6lpKiCxLeijK4hgsqfR6CNToPyRU3keKyyI6uwuHRvpRTbZ0wXw51WRgyldVugZqoJfkGFrjrIenYH3bfEO3Q==",
+      "engines": {
+        "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
@@ -45805,6 +45814,11 @@
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
       "optional": true
     },
+    "nanoevents": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-7.0.1.tgz",
+      "integrity": "sha512-o6lpKiCxLeijK4hgsqfR6CNToPyRU3keKyyI6uwuHRvpRTbZ0wXw51WRgyldVugZqoJfkGFrjrIenYH3bfEO3Q=="
+    },
     "nanoid": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",

package/template/esbuild.rsdk.go

@@ -211,6 +211,7 @@ func rsdk(iopath *ioPaths) api.BuildResult {
 		MinifyWhitespace:  true,
 		MinifyIdentifiers: true,
 		MinifySyntax:      true,
+    Sourcemap:         api.SourceMapExternal,
 
 		// debug options. does not affect bundle size
 		// Metafile: true,

package/template/fpe-api/components.ts

@@ -54,4 +54,8 @@ 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/utils.ts

@@ -66,4 +66,5 @@ export {
   isWeb,
   shouldAuthenticate,
 } from '../src/utils/common';
+export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';

package/template/index.rsdk.tsx

@@ -12,16 +12,27 @@
 /**
  * @format
  */
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
 import React from 'react';
+import * as RN from 'react-native-web';
+import jsonFile from './config.json';
+
 export * from 'fpe-api';
+export * from 'fpe-implementation';
 
 interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
   View: React.FC;
 }
 
 const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
-    ...AppBuilderSdkApi,
-    View: SDKAppWrapper,
-  }
+  ...AppBuilderSdkApi,
+  View: SDKAppWrapper,
+};
+
+let config: ConfigInterface = jsonFile as unknown as ConfigInterface;
+
+export {React, RN, config};
 export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -1,9 +1,16 @@
 import {AppRegistry} from 'react-native';
-import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import SDKAppWrapper, {
+  AppBuilderSdkApi,
+  AppBuilderSdkApiInterface,
+} from './src/SDKAppWrapper';
+import React from 'react';
+import * as RN from 'react-native-web';
+import jsonFile from './config.json';
+
 export * from 'fpe-api';
+export * from 'fpe-implementation';
 
-interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
-}
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {}
 
 const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
 
@@ -24,4 +31,7 @@ class AppBuilder extends HTMLElement {
 
 customElements.define('app-builder', AppBuilder);
 
+let config: ConfigInterface = jsonFile as unknown as ConfigInterface;
+
+export {React, RN, config};
 export default AppBuilderWebSdkApi;

package/template/package.json

@@ -18,6 +18,7 @@
     "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
     "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
     "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
+    "react-sdk:esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
     "electron:start": "cross-env NODE_ENV=development gulp electron_development",
     "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
@@ -62,6 +63,7 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
+    "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
     "react": "16.13.1",

package/template/src/SDKAppWrapper.tsx

@@ -9,7 +9,10 @@ export interface userEventsMapInterface {
   create: (
     hostPhrase: string,
     attendeePhrase?: string,
-    pstnNumer?: string,
+    pstnNumer?: {
+      number: string;
+      pin: string;
+    },
   ) => void;
   preJoin: (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
   join: (
@@ -27,7 +30,6 @@ export interface AppBuilderSdkApiInterface {
     userEventName: T,
     callBack: userEventsMapInterface[T],
   ) => void;
-  off: (userEventName: keyof userEventsMapInterface) => void;
 }
 
 export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
@@ -40,9 +42,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
   createFPE,
   on: (userEventName, cb) => {
     SDKEvents.on(userEventName, cb);
-  },
-  off: (userEventName) => {
-    SDKEvents.off(userEventName);
+    console.log('SDKEvents: Event Registered', userEventName);
   },
 };
 
@@ -50,7 +50,7 @@ const SDKAppWrapper = () => {
   const [fpe, setFpe] = useState(fpeConfig);
   useEffect(() => {
     SDKEvents.on('addFpe', (sdkFpeConfig) => {
-      console.log('DEBUG(aditya)-SDKEvents: addFpe event called');
+      console.log('SDKEvents: addFpe event called');
       setFpe(sdkFpeConfig);
     });
     // Join event consumed in Create.tsx

package/template/src/pages/Create.tsx

@@ -30,6 +30,7 @@ import useJoinMeeting from '../utils/useJoinMeeting';
 import SDKEvents from '../utils/SdkEvents';
 import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import useNavigateTo from '../utils/useNavigateTo';
 
 const Create = () => {
   const {CreateComponent} = useFpe((data) => {
@@ -64,6 +65,7 @@ const Create = () => {
   const {
     meetingPassphrase: {attendee, host, pstn},
   } = useMeetingInfo();
+  const navigateTo = useNavigateTo();
   //commented for v1 release
   // const createdText = useString('meetingCreatedNotificationLabel')();
   // const hostControlsToggle = useString<boolean>('hostControlsToggle');
@@ -89,14 +91,15 @@ const Create = () => {
     if (isWeb) {
       document.title = $config.APP_NAME;
     }
-    SDKEvents.on('joinMeetingWithPhrase', (phrase) => {
+    const unbind = SDKEvents.on('joinMeetingWithPhrase', (phrase) => {
       console.log(
-        'DEBUG(aditya)-SDKEvents: joinMeetingWithPhrase event called',
+        'SDKEvents: joinMeetingWithPhrase event called', phrase
       );
-      useJoin(phrase);
+      setMeetingInfo(MeetingInfoDefaultValue);
+      navigateTo(phrase)
     });
     return () => {
-      SDKEvents.off('joinMeetingWithPhrase');
+      unbind();
     };
   }, []);
 
@@ -104,12 +107,6 @@ const Create = () => {
     setRoomCreated(true);
   };
 
-  useEffect(() => {
-    if (attendee) {
-      SDKEvents.emit('create', host, attendee, pstn);
-    }
-  }, [attendee]);
-
   const createRoomAndNavigateToShare = async (
     roomTitle: string,
     enablePSTN: boolean,

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -128,16 +128,20 @@ const VideoCallScreen = () => {
 
   useEffect(() => {
     /**
-     * Commenting this code as getDevices API is web only
+     * OLD: Commenting this code as getDevices API is web only
      * The below code fails on native app
+     * RESPONSE: Added isWeb check to restrict execution only on web.
      */
-    // new Promise((res) =>
-    //   rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-    //     res(devices);
-    //   }),
-    // ).then((devices: MediaDeviceInfo[]) => {
-    //   SDKEvents.emit('join', meetingTitle, devices, isHost);
-    // });
+    if (isWeb) {
+      new Promise((res) =>
+        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
+          res(devices);
+        }),
+      ).then((devices: MediaDeviceInfo[]) => {
+        SDKEvents.emit('join', meetingTitle, devices, isHost);
+        console.log('SDKEvents: Event Called join')
+      });
+    }
   }, []);
 
   return VideocallComponent ? (

package/template/src/utils/SdkEvents.ts

@@ -14,55 +14,13 @@
  */
 type callBackType = (...args: any[]) => void;
 import {userEventsMapInterface} from '../SDKAppWrapper';
+import {createNanoEvents} from 'nanoevents';
 
 interface eventsMapInterface extends userEventsMapInterface {
-  addFpe: callBackType;
-  joinMeetingWithPhrase: (phrase: string) => void;
-}
-interface SDKEventsInterface {
-  eventsMap: eventsMapInterface;
-  eventSubs: {[key in keyof eventsMapInterface]: any};
-  emit: (eventName: keyof eventsMapInterface, ...args: any) => void;
-  on: (eventName: keyof eventsMapInterface, cb: callBackType) => void;
-  off: (eventName: keyof eventsMapInterface) => void;
+  addFpe?: callBackType;
+  joinMeetingWithPhrase?: (phrase: string) => void;
 }
 
-const SDKEvents: SDKEventsInterface = {
-  eventsMap: {
-    addFpe: () => {},
-    joinMeetingWithPhrase: (p) => {},
-    leave: () => {},
-    create: () => {},
-    preJoin: () => {},
-    join: () => {},
-  },
-  eventSubs: {
-    addFpe: null,
-    joinMeetingWithPhrase: null,
-    leave: null,
-    create: null,
-    preJoin: null,
-    join: null,
-  },
-  on: function (eventName, cb) {
-    console.log(
-      'DEBUG(aditya)-SDKEvents: event registered:',
-      eventName,
-    );
-    this.eventsMap[eventName] = cb;
-    if (this.eventSubs[eventName]) {
-      cb(...this.eventSubs[eventName]);
-    }
-  },
-  emit: function (eventName, ...args) {
-    console.log('DEBUG(aditya)-SDKEvents: emit called:', eventName, ...args);
-    this.eventsMap[eventName](...args);
-    this.eventSubs[eventName] = args;
-  },
-  off: function (eventName) {
-    console.log('DEBUG(aditya)-SDKEvents: event deregistered:', eventName);
-    this.eventSubs[eventName] = null;
-  },
-};
+const SDKEvents = createNanoEvents<eventsMapInterface>();
 
 export default SDKEvents;

package/template/src/utils/useCreateMeeting.ts

@@ -1,6 +1,7 @@
 import {gql, useMutation} from '@apollo/client';
 import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import SDKEvents from '../utils/SdkEvents';
 
 const CREATE_CHANNEL = gql`
   mutation CreateChannel(
@@ -67,6 +68,12 @@ export default function useCreateMeeting() {
         meetingTitle: roomTitle,
         meetingPassphrase: meetingInfoPassPhrase,
       });
+      SDKEvents.emit(
+        'create',
+        meetingInfoPassPhrase.host,
+        meetingInfoPassPhrase.attendee,
+        meetingInfoPassPhrase.pstn,
+      );
     } else {
       throw new Error(`An error occurred in parsing the channel data.`);
     }

package/template/webpack.commons.js

@@ -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

@@ -16,6 +16,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 +26,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.wsdk.config.js

@@ -20,7 +20,6 @@ const baseConfig = {
       name: 'AgoraAppBuilder',
     },
   },
-  watch: isDevelopment
 };
 
 const mappedConfigs = libraryTargets.map((target, _) => {