agora-appbuilder-core 2.3.0-beta.2 → 2.3.0-beta.22

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -106,6 +106,7 @@ export interface RtcPropsInterface {
   //   useBeforeCreate?: () => () => Promise<void>;
   // };
   geoFencing?: boolean;
+  audioRoom?: boolean;
 }
 
 export interface CallbacksInterface {
@@ -142,6 +143,7 @@ const initialValue: PropsInterface = {
     appId: '',
     channel: '',
     geoFencing: true,
+    audioRoom: false,
   },
 };
 

package/template/agora-rn-uikit/src/Controls/BtnTemplate.tsx

@@ -62,11 +62,10 @@ const BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
             tintColor: disabled ? 'grey' : props.color || theme || '#fff',
           }}
           resizeMode={'contain'}
-          source={
-            props.name && icons[props.name]
-              ? {uri: icons[props.name]}
-              : props.icon
-          }
+          source={{
+            uri:
+              props.name && icons[props.name] ? icons[props.name] : props.icon,
+          }}
         />
       </View>
       <Text

package/template/agora-rn-uikit/src/Controls/ImageIcon.tsx

@@ -49,7 +49,9 @@ const ImageIcon: React.FC<ImageIconInterface> = (props) => {
         props.style as object,
       ]}
       resizeMode={'contain'}
-      source={props.name && icons[props.name] ? {uri: icons[props.name] } : props.icon}
+      source={{
+        uri: props.name && icons[props.name] ? icons[props.name] : props.icon,
+      }}
     />
   );
 };

package/template/agora-rn-uikit/src/Reducer/UserJoined.ts

@@ -32,7 +32,9 @@ export default function UserJoined(
       ...typeData,
     },
   };
-  let renderPosition = [...state.renderPosition, newUid];
+  let renderPosition = state.renderPosition.filter((i) => i === newUid).length
+    ? [...state.renderPosition]
+    : [...state.renderPosition, newUid];
   const [maxUid] = renderPosition;
   if (renderPosition.length === 2 && maxUid === localUid) {
     //Only one remote and local is maximized

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -22,7 +22,7 @@ const Create = ({
 }) => {
   const [ready, setReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
-  const {geoFencing = true} = rtcProps || {};
+  const {geoFencing = true, audioRoom = false} = rtcProps || {};
   let engine = useRef<RtcEngine>({} as RtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
@@ -33,15 +33,23 @@ const Create = ({
 
   const enableVideoAndAudioWithDisabledState = async () => {
     try {
-      await engine.current.enableVideo();
-      dispatch({
-        type: 'LocalMuteAudio',
-        value: [ToggleState.disabled],
-      });
-      dispatch({
-        type: 'LocalMuteVideo',
-        value: [ToggleState.disabled],
-      });
+      if (audioRoom === true) {
+        await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalMuteAudio',
+          value: [ToggleState.disabled],
+        });
+      } else {
+        await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalMuteAudio',
+          value: [ToggleState.disabled],
+        });
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.disabled],
+        });
+      }
     } catch (error) {
       const {status} = error as any;
       // App Builder web only
@@ -57,7 +65,7 @@ const Create = ({
           console.error('No audio device', audioError);
         }
 
-        if (!videoError) {
+        if (!videoError && !audioRoom) {
           dispatch({
             type: 'LocalMuteVideo',
             value: [ToggleState.disabled],
@@ -71,15 +79,23 @@ const Create = ({
   };
   const enableVideoAndAudioWithEnabledState = async () => {
     try {
-      await engine.current.enableVideo();
-      dispatch({
-        type: 'LocalMuteAudio',
-        value: [ToggleState.enabled],
-      });
-      dispatch({
-        type: 'LocalMuteVideo',
-        value: [ToggleState.enabled],
-      });
+      if (audioRoom === true) {
+        await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalMuteAudio',
+          value: [ToggleState.enabled],
+        });
+      } else {
+        await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalMuteAudio',
+          value: [ToggleState.enabled],
+        });
+        dispatch({
+          type: 'LocalMuteVideo',
+          value: [ToggleState.enabled],
+        });
+      }
     } catch (e) {
       const {status} = e as any;
 
@@ -96,7 +112,7 @@ const Create = ({
           console.error('No audio device', audioError);
         }
 
-        if (!videoError) {
+        if (!videoError && !audioRoom) {
           dispatch({
             type: 'LocalMuteVideo',
             value: [ToggleState.enabled],
@@ -123,7 +139,7 @@ const Create = ({
     async function init() {
       if (Platform.OS === 'android') {
         //Request required permissions from Android
-        await requestCameraAndAudioPermission();
+        await requestCameraAndAudioPermission(audioRoom);
       }
       // commented for v1 release
       // try {
@@ -247,7 +263,14 @@ const Create = ({
     }
     init();
     return () => {
-      engine.current!.destroy();
+      /**
+       * if condition add for websdk issue
+       * For some reason even if engine.current is defined somehow destroy gets undefined and
+       * causes a crash so thats why this check is needed before we call the method
+       */
+      if (engine.current.destroy) {
+        engine.current!.destroy();
+      }
     };
   }, [rtcProps.appId]);
 
@@ -264,16 +287,20 @@ const Create = ({
           if (isVideoEnabledRef.current) {
             // This unpublishes the current track
             await engine.current?.muteLocalAudioStream(true);
-            await engine.current?.muteLocalVideoStream(true);
+            if (!audioRoom) {
+              await engine.current?.muteLocalVideoStream(true);
+            }
             // This updates the uid interface
             dispatch({
               type: 'LocalMuteAudio',
               value: [ToggleState.disabled],
             });
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [ToggleState.disabled],
-            });
+            if (!audioRoom) {
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [ToggleState.disabled],
+              });
+            }
           }
         }
         if (rtcProps.role == ClientRole.Audience) {
@@ -282,15 +309,19 @@ const Create = ({
            * Otherwise the setClientRole method call fails and throws an exception.
            */
           await engine.current?.muteLocalAudioStream(true);
-          await engine.current?.muteLocalVideoStream(true);
+          if (!audioRoom) {
+            await engine.current?.muteLocalVideoStream(true);
+          }
           dispatch({
             type: 'LocalMuteAudio',
             value: [ToggleState.disabled],
           });
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [ToggleState.disabled],
-          });
+          if (!audioRoom) {
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [ToggleState.disabled],
+            });
+          }
           await engine.current?.setClientRole(ClientRole.Audience);
         }
       }

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -13,6 +13,7 @@ const Join: React.FC<{
 }> = ({children, precall, engineRef, uidState, dispatch}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
+  const {audioRoom = false} = rtcProps;
   //commented for v1 release
   // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
   //   ? rtcProps.lifecycle.useBeforeJoin()
@@ -44,7 +45,11 @@ const Join: React.FC<{
           encryptionMode: rtcProps.encryption.mode,
         });
       }
-      if (videoState === ToggleState.enabled && Platform.OS === 'ios') {
+      if (
+        !audioRoom &&
+        videoState === ToggleState.enabled &&
+        Platform.OS === 'ios'
+      ) {
         dispatch({
           type: 'LocalMuteVideo',
           value: [ToggleState.disabling],
@@ -70,7 +75,11 @@ const Join: React.FC<{
         null,
         rtcProps.uid || 0,
       );
-      if (videoState === ToggleState.enabled && Platform.OS === 'ios') {
+      if (
+        !audioRoom &&
+        videoState === ToggleState.enabled &&
+        Platform.OS === 'ios'
+      ) {
         dispatch({
           type: 'LocalMuteVideo',
           value: [ToggleState.enabling],

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -203,16 +203,30 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   const swapVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
+      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       let renderPosition: RenderStateInterface['renderPosition'] = [
         ...state.renderPosition,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
+        return {};
+      }
+
+      const newMaxUidOldPosition = renderPosition.findIndex(
+        (i) => i === newMaxUid,
+      );
+
+      if (!newMaxUidOldPosition) {
         return {};
       }
 
@@ -228,10 +242,6 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
        * else push newMaxUid at last position
        */
 
-      const newMaxUidOldPosition = renderPosition.findIndex(
-        (i) => i === newMaxUid,
-      );
-
       renderPosition[0] = newMaxUid;
       renderPosition[newMaxUidOldPosition] = currentMaxUid;
 
@@ -248,16 +258,25 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    */
   const dequeVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
+      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       let renderPosition: RenderStateInterface['renderPosition'] = [
         ...state.renderPosition,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+      if (!(newMaxUid in renderList)) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
         return {};
       }
 

package/template/agora-rn-uikit/src/Utils/permission.ts

@@ -1,14 +1,20 @@
-import {PermissionsAndroid} from 'react-native';
+import {Permission, PermissionsAndroid} from 'react-native';
 /**
  * @name requestCameraAndAudioPermission
  * @description Function to request permission for Audio and Camera
  */
-export default async function requestCameraAndAudioPermission() {
+export default async function requestCameraAndAudioPermission(
+  audioRoom: boolean,
+) {
   try {
-    const granted = await PermissionsAndroid.requestMultiple([
-      PermissionsAndroid.PERMISSIONS.CAMERA,
-      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
-    ]);
+    const permissionsToRequest: Permission[] = [];
+    permissionsToRequest.push(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+    if (!audioRoom) {
+      permissionsToRequest.push(PermissionsAndroid.PERMISSIONS.CAMERA);
+    }
+    const granted = await PermissionsAndroid.requestMultiple(
+      permissionsToRequest,
+    );
     if (
       granted['android.permission.RECORD_AUDIO'] ===
         PermissionsAndroid.RESULTS.GRANTED &&
@@ -16,6 +22,11 @@ export default async function requestCameraAndAudioPermission() {
         PermissionsAndroid.RESULTS.GRANTED
     ) {
       console.log('You can use the cameras & mic');
+    } else if (
+      granted['android.permission.RECORD_AUDIO'] ===
+      PermissionsAndroid.RESULTS.GRANTED
+    ) {
+      console.log('You can use mic');
     } else {
       console.log('Permission denied');
     }

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/esbuild.rsdk.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"flag"
 	"log"
 	"os"
 	"path/filepath"
@@ -9,6 +10,11 @@ import (
 	"github.com/evanw/esbuild/pkg/api"
 )
 
+type ioPaths struct {
+	outPath               string
+	configTransformerPath string
+}
+
 func commonAliasResolver() api.Plugin {
 	aliasResolvers := api.Plugin{
 		Name: "importAliases",
@@ -152,7 +158,7 @@ func commonLoader() map[string]api.Loader {
 	return loader
 }
 
-func common() api.BuildOptions {
+func common(iopath *ioPaths) api.BuildOptions {
 	commonBuildOpts := api.BuildOptions{
 		// we can safely ignore (webpack) plugins for now because they seem to be used only for not reactsdk
 
@@ -164,14 +170,14 @@ func common() api.BuildOptions {
 		Define: map[string]string{
 			"$config": "config",
 		},
-		Inject: []string{"./esbuildConfigTransform.js"},
+		Inject: []string{iopath.configTransformerPath},
 	}
 
 	return commonBuildOpts
 }
 
-func rsdk() api.BuildResult {
-	commonBuildOpts := common()
+func rsdk(iopath *ioPaths) api.BuildResult {
+	commonBuildOpts := common(iopath)
 	rsdkBuildOpts := api.BuildOptions{
 		// build options common to rsdk and other components
 		Plugins:           commonBuildOpts.Plugins,
@@ -197,7 +203,7 @@ func rsdk() api.BuildResult {
 		// 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",
+		Outfile: iopath.outPath,
 
 		// other esbuild options
 		Write:             true,
@@ -215,7 +221,15 @@ func rsdk() api.BuildResult {
 }
 
 func main() {
-	rsdkRes := rsdk()
+	outPath := flag.String("outpath", "../Builds/react-sdk/index.js", "path to write bundled js file")
+	configTransformerPath := flag.String("configtransformerpath", "./esbuildConfigTransform.js", "path to inject file")
+	flag.Parse()
+	iopath := &ioPaths{
+		outPath:               *outPath,
+		configTransformerPath: *configTransformerPath,
+	}
+	log.Println("esbuild args = ", iopath)
+	rsdkRes := rsdk(iopath)
 	if len(rsdkRes.Errors) > 0 {
 		spew.Dump(rsdkRes)
 		log.Fatalln("build failed")

package/template/fpe-api/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,6 +23,12 @@ export {
   ParticipantsView,
   Controls,
   ControlsComponentsArray,
+  Navbar,
+  NavBarComponentsArray,
+  ChatBubble,
+  ChatSendButton,
+  ChatTextInput,
+  Chat,
 } from '../src/pages/video-call/index';
 export {default as GridLayout} from '../src/components/GridVideo';
 export {default as PinnedLayout} from '../src/components/PinnedVideo';
@@ -40,3 +51,7 @@ 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,
+} from '../agora-rn-uikit';

package/template/fpe-api/context.ts

@@ -40,6 +40,5 @@ 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';

package/template/fpe-api/install.ts

@@ -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(
+            `InstallFPE: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(`InstallFPE:Error ${key} should be an function`);
       }
     }
   }