agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

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

@@ -9,6 +9,7 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
+// @ts-nocheck
 import AgoraRTC, {
   IAgoraRTCClient,
   ILocalAudioTrack,
@@ -30,7 +31,6 @@ 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';
 interface MediaDeviceInfo {
   readonly deviceId: string;
   readonly label: string;
@@ -116,6 +116,18 @@ export enum RnEncryptionEnum {
    * @since v3.1.2.
    */
   SM4128ECB = 4,
+  /**
+   * 5: 128-bit AES encryption, GCM mode.
+   *
+   * @since v3.3.1
+   */
+  AES128GCM = 5,
+  /**
+   * 6: 256-bit AES encryption, GCM mode.
+   *
+   * @since v3.3.1
+   */
+  AES256GCM = 6
 }
 
 export enum VideoStreamType {
@@ -135,20 +147,25 @@ interface RemoteStream {
   audio?: IRemoteAudioTrack;
   video?: IRemoteVideoTrack;
 }
-if (GEO_FENCING) {
+if ($config.GEO_FENCING) {
   AgoraRTC.setArea({
     areaCode: AREAS.GLOBAL,
     excludedArea: AREAS.CHINA,
   });
 }
 
-if (LOG_ENABLED) {
+if ($config.LOG_ENABLED) {
   AgoraRTC.setLogLevel(0);
   AgoraRTC.enableLogUpload();
 } else {
   AgoraRTC.disableLogUpload();
 }
 
+interface CustomEvents {
+  ScreenshareStopped: callbackType
+}
+
+
 export default class RtcEngine {
   public appId: string;
   // public AgoraRTC: any;
@@ -182,8 +199,6 @@ export default class RtcEngine {
 
   // Create channel profile and set it here
 
-  // Create channel profile and set it here
-
   constructor(appId: string) {
     this.appId = appId;
     // this.AgoraRTC = AgoraRTC;
@@ -280,20 +295,15 @@ export default class RtcEngine {
   ): Promise<void> {
     // TODO create agora client here
     this.client.on('user-joined', (user) => {
-      const uid = this.inScreenshare
-        ? user.uid !== this.screenClient.uid
-          ? user.uid
-          : 1
-        : user.uid;
-      (this.eventsMap.get('UserJoined') as callbackType)(uid);
+      (this.eventsMap.get('UserJoined') as callbackType)(user.uid);
       (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
-        uid,
+        user.uid,
         0,
         0,
         0,
       );
       (this.eventsMap.get('RemoteAudioStateChanged') as callbackType)(
-        uid,
+        user.uid,
         0,
         0,
         0,
@@ -301,17 +311,7 @@ export default class RtcEngine {
     });
 
     this.client.on('user-left', (user) => {
-      const uid = this.inScreenshare
-        ? user.uid !== this.screenClient.uid
-          ? user.uid
-          : 1
-        : user.uid;
-      // if (uid ===1) {
-      //   this.screenStream.audio?.close();
-      //   this.screenStream.video?.close();
-      //   this.screenStream = {}
-      // }
-      // else
+      const uid = user.uid;
       if (this.remoteStreams.has(uid)) {
         this.remoteStreams.delete(uid);
       }
@@ -322,7 +322,7 @@ export default class RtcEngine {
       // Initiate the subscription
       if (this.inScreenshare && user.uid === this.screenClient.uid) {
         (this.eventsMap.get('RemoteVideoStateChanged') as callbackType)(
-          1,
+          user.uid,
           2,
           0,
           0,
@@ -721,7 +721,9 @@ export default class RtcEngine {
 
   async destroy(): Promise<void> {
     if (this.inScreenshare) {
-      (this.eventsMap.get('UserOffline') as callbackType)(1);
+      (this.eventsMap.get('UserOffline') as callbackType)(
+        this.screenClient.uid,
+      );
       this.screenClient.leave();
       (this.eventsMap.get('ScreenshareStopped') as callbackType)();
     }
@@ -828,7 +830,9 @@ export default class RtcEngine {
       );
 
       this.screenStream.video.on('track-ended', () => {
-        (this.eventsMap.get('UserOffline') as callbackType)(1);
+        (this.eventsMap.get('UserOffline') as callbackType)(
+          this.screenClient.uid,
+        );
 
         this.screenClient.leave();
 
@@ -840,7 +844,9 @@ export default class RtcEngine {
         this.inScreenshare = false;
       });
     } else {
-      (this.eventsMap.get('UserOffline') as callbackType)(1);
+      (this.eventsMap.get('UserOffline') as callbackType)(
+        this.screenClient.uid,
+      );
       this.screenClient.leave();
       (this.eventsMap.get('ScreenshareStopped') as callbackType)();
       try {

package/template/bridge/rtc/webNg/SurfaceView.tsx

@@ -9,6 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+
 import {ILocalVideoTrack, IRemoteVideoTrack} from 'agora-rtc-sdk-ng';
 import React, {useEffect} from 'react';
 import {StyleProp, StyleSheet, ViewProps, ViewStyle} from 'react-native';
@@ -17,9 +18,9 @@ import {VideoMirrorMode, VideoRenderMode} from 'react-native-agora';
 export interface RtcSurfaceViewProps extends ViewProps {
   zOrderMediaOverlay?: boolean;
   zOrderOnTop?: boolean;
-  renderMode?: VideoRenderMode;
+  renderMode?: any;
   channelId?: string;
-  mirrorMode?: VideoMirrorMode;
+  mirrorMode?: any;
 }
 export interface RtcUidProps {
   uid: number;

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

@@ -14,6 +14,20 @@ export enum VideoRenderMode {
   Fit,
   Adaptive,
 }
+export enum VideoMirrorMode {
+  /**
+   * 0: (Default) The SDK determines the mirror mode.
+   */
+  Auto = 0,
+  /**
+   * 1: Enables mirror mode.
+   */
+  Enabled = 1,
+  /**
+   * 2: Disables mirror mode.
+   */
+  Disabled = 2
+}
 /**
  *
  * The latency level of an audience member in a live interactive streaming. Takes effect only when the user role is `"audience"`.

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

@@ -20,10 +20,13 @@ export const RtcLocalView = {
 };
 
 export const RtcRemoteView = {
-  SurfaceView: SurfaceView,
-  TextureView: SurfaceView,
+  SurfaceView: SurfaceView as any,
+  TextureView: SurfaceView as any,
 };
 
 export const VideoRenderMode = {...Types.VideoRenderMode};
+export const VideoMirrorMode = {...Types.VideoRenderMode};
 
+export {RnEncryptionEnum as EncryptionMode} from './RtcEngine';
+export {AREAS as AreaCode} from './RtcEngine'
 export default RtcEngine;

package/template/bridge/rtm/web/index.ts

@@ -1,22 +1,28 @@
 /*
 ********************************************
  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. 
+ 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.
 *********************************************
 */
+// @ts-nocheck
 import {
   ChannelAttributeOptions,
   RtmAttribute,
   RtmChannelAttribute,
   Subscription,
-} from 'agora-react-native-rtm';
+} from 'agora-react-native-rtm/lib/typescript/src';
 import {RtmClientEvents} from 'agora-react-native-rtm/lib/typescript/src/RtmEngine';
 import AgoraRTM, {VERSION} from 'agora-rtm-sdk';
+// export {RtmAttribute}
+//
+interface RtmAttributePlaceholder {
+};
+export {RtmAttributePlaceholder as RtmAttribute};
 
 type callbackType = (args?: any) => void;
 

package/template/electron-builder.js

@@ -10,12 +10,13 @@
 *********************************************
 */
 const {PRODUCT_ID} = require('./config.json');
+
 module.exports = {
   appId: `com.${PRODUCT_ID.toLowerCase()}`,
   productName: PRODUCT_ID,
   directories: {
-    output: './out',
-    app: './.electron',
+    output: `../Builds/${process.env.TARGET}`,
+    app: '../Builds/.electron',
   },
   linux: {
     target: ['AppImage'],

package/template/esbuild.rsdk.go

@@ -0,0 +1,226 @@
+package main
+
+import (
+	"log"
+	"os"
+	"path/filepath"
+
+	"github.com/davecgh/go-spew/spew"
+	"github.com/evanw/esbuild/pkg/api"
+)
+
+func commonAliasResolver() api.Plugin {
+	aliasResolvers := api.Plugin{
+		Name: "importAliases",
+		Setup: func(pb api.PluginBuild) {
+			pb.OnResolve(api.OnResolveOptions{Filter: "react-native$"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./node_modules/react-native-web/dist/cjs/index.js")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			// Using rtm bridge to translate React Native RTM SDK calls to web SDK calls
+			pb.OnResolve(api.OnResolveOptions{Filter: "agora-react-native-rtm$"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./bridge/rtm/web/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			// 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
+			pb.OnResolve(api.OnResolveOptions{Filter: "react-native-agora$"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./bridge/rtc/webNg/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-api/install"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./fpe-api/install.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-api"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./fpe-api/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			pb.OnResolve(api.OnResolveOptions{Filter: "fpe-implementation"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./fpe-implementation/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+
+			pb.OnResolve(api.OnResolveOptions{Filter: "test-fpe"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					fpePath, err := filepath.Abs("./test-fpe/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					fpeDummyPath, err := filepath.Abs("./fpe-implementation/dummyFpe.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+
+					_, err = os.Stat(fpePath)
+					if err != nil {
+						return api.OnResolveResult{Path: fpeDummyPath}, nil
+					}
+
+					return api.OnResolveResult{Path: fpePath}, nil
+				},
+			)
+
+			pb.OnResolve(api.OnResolveOptions{Filter: "agora-react-native-rtm/lib/typescript/src"},
+				func(args api.OnResolveArgs) (api.OnResolveResult, error) {
+					path, err := filepath.Abs("./bridge/rtm/web/index.ts")
+					if err != nil {
+						log.Fatalln(err)
+					}
+					return api.OnResolveResult{Path: path}, nil
+				},
+			)
+		},
+	}
+
+	return aliasResolvers
+}
+
+func commonResolveExtensions() []string {
+	// Adds platform specific extensions and OS specific extensions
+	// .web.tsx works for web specific code
+	resolveExtensions := []string{
+		".rsdk.tsx",
+		".rsdk.ts",
+		".sdk.ts",
+		".sdk.tsx",
+		".web.ts",
+		".web.tsx",
+		".tsx",
+		".ts",
+		".jsx",
+		".js",
+		".node",
+	}
+
+	return resolveExtensions
+}
+
+func commonLoader() map[string]api.Loader {
+	loader := map[string]api.Loader{
+		// since esbuild targets latest js by default we dont need plugins that
+		// convert optional chaining and class properties (node 16.11.0+ has both features)
+
+		// use sx loaders for js|ts files as well
+		".js":  api.LoaderTSX,
+		".jsx": api.LoaderTSX,
+		".ts":  api.LoaderTSX,
+		".tsx": api.LoaderTSX,
+
+		// todo: might need to deal with non-lowercase extensions for these media files
+		".png":  api.LoaderDataURL,
+		".jpg":  api.LoaderDataURL,
+		".jpeg": api.LoaderDataURL,
+		".gif":  api.LoaderDataURL,
+	}
+
+	return loader
+}
+
+func common() api.BuildOptions {
+	commonBuildOpts := api.BuildOptions{
+		// we can safely ignore (webpack) plugins for now because they seem to be used only for not reactsdk
+
+		Plugins:           []api.Plugin{commonAliasResolver()},
+		ResolveExtensions: commonResolveExtensions(),
+		Loader:            commonLoader(),
+
+		// embed config variables values into the code
+		Define: map[string]string{
+			"$config": "config",
+		},
+		Inject: []string{"./esbuildConfigTransform.js"},
+	}
+
+	return commonBuildOpts
+}
+
+func rsdk() api.BuildResult {
+	commonBuildOpts := common()
+	rsdkBuildOpts := api.BuildOptions{
+		// build options common to rsdk and other components
+		Plugins:           commonBuildOpts.Plugins,
+		ResolveExtensions: commonBuildOpts.ResolveExtensions,
+		Loader:            commonBuildOpts.Loader,
+
+		// rsdk specific build options
+		EntryPoints: []string{"./index.rsdk.tsx"},
+		External: []string{
+			"react",
+			"react-dom",
+			"react-router",
+			"react-router-dom",
+			"@apollo/client",
+		},
+		Define: commonBuildOpts.Define,
+		Inject: commonBuildOpts.Inject,
+
+		// target es6 because other host applications typically do not transpile node_modules
+		// i.e. they will not transpile agora-app-builder-sdk
+		Target: api.Target(api.ES2015),
+
+		// bundle in cjs format because this index.js is meant to be used by other host applications
+		// like webpack which runs on node
+		Format:  api.FormatCommonJS,
+		Outfile: "../Builds/react-sdk/index.js",
+
+		// other esbuild options
+		Write:             true,
+		Bundle:            true,
+		MinifyWhitespace:  true,
+		MinifyIdentifiers: true,
+		MinifySyntax:      true,
+
+		// debug options. does not affect bundle size
+		// Metafile: true,
+	}
+
+	rsdk := api.Build(rsdkBuildOpts)
+	return rsdk
+}
+
+func main() {
+	rsdkRes := rsdk()
+	if len(rsdkRes.Errors) > 0 {
+		spew.Dump(rsdkRes)
+		log.Fatalln("build failed")
+	}
+
+	// text := api.AnalyzeMetafile(rsdkRes.Metafile, api.AnalyzeMetafileOptions{Verbose: false})
+	// log.Printf("%s", text)
+}

package/template/{src/subComponents/LayoutEnum.tsx → esbuildConfigTransform.js}

@@ -9,8 +9,4 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-enum Layout {
-  Grid,
-  Pinned,
-}
-export default Layout;
+export let config = require('./config.json');

package/template/fpe-api/components.ts

@@ -0,0 +1,42 @@
+//Icons
+export {default as icons} from '../src/assets/icons';
+
+// commented for v1 release
+//create screen
+//export {default as Create} from '../src/pages/Create';
+
+// commented for v1 release
+//share screen
+//export {default as Share} from '../src/components/Share';
+
+// commented for v1 release
+//Precall components
+//export * from '../src/components/precall/index';
+
+//video call components
+export {
+  ParticipantsView,
+  Controls,
+  ControlsComponentsArray,
+} 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 RenderComponent} from '../src/pages/video-call/RenderComponent';
+export {NameWithMicStatus} from '../src/pages/video-call/NameWithMicStatus';
+export {NetworkQualityPill} from '../src/subComponents/NetworkQualityPill';
+//videocall screen
+export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScreen';
+
+// commented for v1 release
+//Settings screen
+//export {default as HostControlView} from '../src/components/HostControlView';
+// export {
+//   default as SelectDevice,
+//   SelectDeviceComponentsArray,
+// } from '../src/subComponents/SelectDevice';
+//export {default as LanguageSelector} from '../src/subComponents/LanguageSelector';
+
+//Sidepanel buttons
+export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';

package/template/fpe-api/context.ts

@@ -0,0 +1,45 @@
+/**
+ * Core contexts
+ */
+import {createHook} from 'fpe-implementation';
+import {
+  RtcContext,
+  RenderContext,
+  PropsContext,
+  LocalContext,
+} 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);
+// commented for v1 release
+//export const useDeviceContext = createHook(DeviceContext);
+//export const useStorageContext = createHook(StorageContext);
+
+/**
+ * UI contexts
+ */
+// commented for v1 release
+//export {usePreCall} from '../src/components/precall/usePreCall';
+//export type {PreCallContextInterface} from '../src/components/precall/usePreCall';
+export {useLayout} from '../src/utils/useLayout';
+export type {LayoutContextInterface} from '../src/utils/useLayout';
+// commented for v1 release
+// export {
+//   useShareLink,
+//   SHARE_LINK_CONTENT_TYPE,
+// } from '../src/components/useShareLink';
+//export type {ShareLinkContextInterface} from '../src/components/useShareLink';
+// export {useScreenshare} from '../src/subComponents/screenshare/useScreenshare';
+// export type {ScreenshareContextInterface} from '../src/subComponents/screenshare/useScreenshare';
+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';

package/template/fpe-api/fpeEvents.ts

@@ -0,0 +1,9 @@
+// 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};

package/template/fpe-api/index.ts

@@ -0,0 +1,21 @@
+/*
+********************************************
+ 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 fpeConfig from 'test-fpe';
+
+export {fpeConfig};
+
+export * from './useFpe';
+export * from './context';
+export * from './components';
+export * from './typeDefinition';
+export * from './utils';
+export * from './fpeEvents';