agora-appbuilder-core 4.0.0-api.7 → 4.0.0-api.9

package/template/agora-rn-uikit/.eslintrc.js

@@ -3,4 +3,9 @@ module.exports = {
   extends: '@react-native-community',
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
+  "rules": {
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"]
+  },
+
 };

package/template/agora-rn-uikit/package.json

@@ -22,24 +22,24 @@
     "url": "https://github.com/AgoraIO-Community/ReactNative-UIKit/issues"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
-    "react-native": "^0.61.5",
-    "react-native-agora": "^3.0.1-rc.4"
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-agora": "4.2.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/runtime": "^7.6.2",
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^1.0.0",
     "@types/jest": "^24.0.24",
-    "@types/react-native": "^0.62.0",
-    "@types/react-test-renderer": "16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.5.1",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.58.0",
-    "react-test-renderer": "16.11.0",
+    "@types/react-native": "0.67.6",
+    "@types/react-test-renderer": "18.0.0",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "react-test-renderer": "18.2.0",
     "prettier": "^2.0.4",
     "typescript": "^3.8.3"
   },

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

@@ -1,26 +1,44 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/typescript/common/RtcEvents';
+import {IRtcEngineEventHandler} from 'react-native-agora';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 import {UidType} from './RtcContext';
 
 /* User role for live streaming mode */
-export enum ClientRole {
-  /* 1: A host can both send and receive streams. */
-  Broadcaster = 1,
-  /* 2: The default role. An audience can only receive streams. */
-  Audience = 2,
+export enum ClientRoleType {
+  /**
+   * 1: Host. A host can both send and receive streams.
+   */
+  ClientRoleBroadcaster = 1,
+  /**
+   * 2: (Default) Audience. An audience member can only receive streams.
+   */
+  ClientRoleAudience = 2,
 }
 
 /* Mode for RTC (Live or Broadcast) */
-export enum ChannelProfile {
-  /** 0: (Default) The Communication profile.
-   *  Use this profile in one-on-one calls or group calls, where all users can talk freely. */
-  Communication = 0,
-  /**  1: The Live-Broadcast profile.
-   *   Users in a live-broadcast channel have a role as either host or audience. A host can both send and receive streams; an audience can only receive streams. */
-  LiveBroadcasting = 1,
+export enum ChannelProfileType {
+  /**
+   * 0: Communication. Use this profile when there are only two users in the channel.
+   */
+  ChannelProfileCommunication = 0,
+  /**
+   * 1: Live streaming. Live streaming. Use this profile when there are more than two users in the channel.
+   */
+  ChannelProfileLiveBroadcasting = 1,
+  /**
+   * 2: Gaming. This profile is deprecated.
+   */
+  ChannelProfileGame = 2,
+  /**
+   * Cloud gaming. The scenario is optimized for latency. Use this profile if the use case requires frequent interactions between users.
+   */
+  ChannelProfileCloudGaming = 3,
+  /**
+   * @ignore
+   */
+  ChannelProfileCommunication1v1 = 4,
 }
 
 // disabled is intentionally kept as the 1st item in the enum.
@@ -118,11 +136,11 @@ export interface RtcPropsInterface {
   dual?: boolean | null;
   profile?: VideoProfile;
   initialDualStreamMode?: DualStreamMode;
-  role?: ClientRole /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
+  role?: ClientRoleType /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode: EncryptionMode.AES128GCM2 | EncryptionMode.AES128GCM2;
+    mode: EncryptionMode.Aes128Gcm2 | EncryptionMode.Aes256Gcm2;
     salt: number[];
   };
   // commented for v1 release
@@ -138,16 +156,17 @@ export interface RtcPropsInterface {
   //core only
   screenShareUid?: number;
   screenShareToken?: string;
+  recordingBot?: false;
   //core only
 }
 
 export interface CallbacksInterface {
-  EndCall(isHost: boolean, isTriggeredByHost: boolean): void; //?
+  EndCall(): void; //?
   FullScreen(): void; //?
   SwitchCamera(): void; //Not in reducer
   UpdateDualStreamMode(mode: DualStreamMode): void;
-  UserJoined: RtcEngineEvents['UserJoined'];
-  UserOffline: RtcEngineEvents['UserOffline'];
+  UserJoined: IRtcEngineEventHandler['onUserJoined'];
+  UserOffline: IRtcEngineEventHandler['onUserOffline'];
   SwapVideo(uid: UidType): void;
   DequeVideo(uid: UidType): void;
   UserMuteRemoteAudio(uid: UidType, muted: ContentInterface['audio']): void;
@@ -157,9 +176,9 @@ export interface CallbacksInterface {
   LocalPermissionState(
     permissionState: ContentInterface['permissionStatus'],
   ): void;
-  RemoteAudioStateChanged: RtcEngineEvents['RemoteAudioStateChanged'];
-  RemoteVideoStateChanged: RtcEngineEvents['RemoteVideoStateChanged'];
-  JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
+  RemoteAudioStateChanged: IRtcEngineEventHandler['onRemoteAudioStateChanged'];
+  RemoteVideoStateChanged: IRtcEngineEventHandler['onRemoteVideoStateChanged'];
+  JoinChannelSuccess: IRtcEngineEventHandler['onJoinChannelSuccess'];
   UpdateRenderList(uid: UidType, user: Partial<ContentInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
   RemoveCustomContent(uid: UidType): void;
@@ -174,7 +193,7 @@ export interface PropsInterface {
   rtcProps: RtcPropsInterface;
   styleProps?: Partial<StylePropInterface>;
   callbacks?: Partial<CallbacksInterface>;
-  mode?: ChannelProfile;
+  mode?: ChannelProfileType;
 }
 
 const initialValue: Partial<PropsInterface> = {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {CallbacksInterface} from './PropsContext';
-import RtcEngine from 'react-native-agora';
+import {IRtcEngine} from 'react-native-agora';
 import type {DualStreamMode, ContentInterface} from './PropsContext';
 
 export type UidType = number;
@@ -43,7 +43,7 @@ export interface ActionInterface<T extends keyof CallbacksInterface> {
 export type ActionType<T extends keyof CallbacksInterface> = ActionInterface<T>;
 
 export interface RtcContextInterface {
-  RtcEngineUnsafe: RtcEngine;
+  RtcEngineUnsafe: IRtcEngine;
   setDualStreamMode: React.Dispatch<React.SetStateAction<DualStreamMode>>;
 }
 

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

@@ -1,20 +1,23 @@
-import React, {useState, useEffect, useContext, useRef, FC} from 'react';
-import RtcEngine, {
+import React, {useState, useEffect, useContext, useRef} from 'react';
+import {
+  createAgoraRtcEngine,
   VideoEncoderConfiguration,
   AreaCode,
-  AudioProfile,
-  AudioScenario,
+  IRtcEngine,
+  AudioProfileType,
+  AudioScenarioType,
 } from 'react-native-agora';
 import {Platform} from 'react-native';
 import requestCameraAndAudioPermission from '../Utils/permission';
 import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
-  ClientRole,
-  ChannelProfile,
+  ClientRoleType,
+  ChannelProfileType,
   PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
+import {isBotUser} from '../Utils/isBotUser';
 
 const Create = ({
   dispatch,
@@ -22,9 +25,9 @@ const Create = ({
 }: {
   dispatch: DispatchType;
   children: (
-    engine: React.MutableRefObject<RtcEngine>,
+    engine: React.MutableRefObject<IRtcEngine>,
     tracksReady: boolean,
-  ) => JSX.Element;
+  ) => React.ReactElement;
 }) => {
   const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
@@ -35,7 +38,7 @@ const Create = ({
     audioRoom = false,
     activeSpeaker = false,
   } = rtcProps || {};
-  let engine = useRef<RtcEngine>({} as RtcEngine);
+  let engine = useRef<IRtcEngine>({} as IRtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
   //   ? rtcProps.lifecycle.useBeforeCreate()
@@ -188,8 +191,8 @@ const Create = ({
   };
   const enableVideoAndAudioWithInitialStates = async () => {
     if (
-      mode == ChannelProfile.LiveBroadcasting &&
-      rtcProps?.role == ClientRole.Audience
+      mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+      rtcProps?.role === ClientRoleType.ClientRoleAudience
     ) {
       enableVideoAndAudioWithDisabledState();
     } else {
@@ -213,36 +216,37 @@ const Create = ({
       //   console.error('FPE:Error on executing useBeforeCreate', error);
       // }
       try {
+        engine.current = createAgoraRtcEngine();
         if (
           geoFencing === true &&
           (Platform.OS === 'android' || Platform.OS === 'ios')
         ) {
           if (rtcProps?.appId) {
-            //@ts-ignore
-            engine.current = await RtcEngine.createWithAreaCode(
-              rtcProps?.appId,
+            engine.current.initialize({
+              appId: rtcProps.appId,
               // eslint-disable-next-line no-bitwise
-              //@ts-ignore
-              AreaCode.GLOB ^ AreaCode.CN,
-            );
+              areaCode: AreaCode.AreaCodeGlob ^ AreaCode.AreaCodeCn,
+            });
           }
         } else {
           if (rtcProps?.appId) {
-            engine.current = await RtcEngine.create(rtcProps.appId);
+            engine.current.initialize({appId: rtcProps.appId});
           }
         }
         /* Live Streaming */
-        if (mode == ChannelProfile.LiveBroadcasting) {
+        if (mode === ChannelProfileType.ChannelProfileLiveBroadcasting) {
           await engine.current.setChannelProfile(
-            ChannelProfile.LiveBroadcasting,
+            ChannelProfileType.ChannelProfileLiveBroadcasting,
           );
           await engine.current.setClientRole(
-            rtcProps.role === ClientRole.Audience
-              ? ClientRole.Audience
-              : ClientRole.Broadcaster,
+            rtcProps?.role === ClientRoleType.ClientRoleAudience
+              ? ClientRoleType.ClientRoleAudience
+              : ClientRoleType.ClientRoleBroadcaster,
           );
         } else {
-          await engine.current.setChannelProfile(ChannelProfile.Communication);
+          await engine.current.setChannelProfile(
+            ChannelProfileType.ChannelProfileCommunication,
+          );
         }
         if (activeSpeaker) {
           await engine.current.enableAudioVolumeIndication(100, 3, true);
@@ -271,14 +275,14 @@ const Create = ({
           if (Platform.OS === 'android' || Platform.OS === 'ios') {
             //@ts-ignore
             await engine.current.setAudioProfile(
-              AudioProfile.Default,
-              AudioScenario.Default,
+              AudioProfileType.AudioProfileDefault,
+              AudioScenarioType.AudioScenarioDefault,
             );
             //also audio route for voice-chat will work through earpiece not phonespeaker
             //for audiolivecast it will work through phone speaker
             //ref - https://docs.agora.io/en/help/integration-issues/profile_difference/#audio-route
             //so setting into phone speaker manually as requested
-            if (mode == ChannelProfile.Communication) {
+            if (mode === ChannelProfileType.ChannelProfileCommunication) {
               //@ts-ignore
               await engine.current.setEnableSpeakerphone(true);
             }
@@ -295,20 +299,27 @@ const Create = ({
          */
         if (
           !(
-            mode === ChannelProfile.LiveBroadcasting &&
-            rtcProps.role == ClientRole.Audience &&
-            Platform.OS === 'web'
+            mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+            rtcProps?.role === ClientRoleType.ClientRoleAudience &&
+            Platform.OS === 'web' &&
+            rtcProps?.recordingBot
           )
         ) {
-          enableVideoAndAudioWithInitialStates().then(() => {
-            setTracksReady(true);
-            isVideoEnabledRef.current = true;
-          });
+          if (rtcProps?.recordingBot) {
+            console.log(
+              'recording-bot, hence not asking audio/video permission',
+            );
+          } else {
+            enableVideoAndAudioWithInitialStates().then(() => {
+              setTracksReady(true);
+              isVideoEnabledRef.current = true;
+            });
+          }
         }
 
         engine.current.addListener(
-          'JoinChannelSuccess',
-          async (channel, uid, elapsed) => {
+          'onJoinChannelSuccess',
+          async (connection, elapsed) => {
             //Invoke the callback
             console.log('UIkit enabling dual stream', rtcProps?.dual);
             if (rtcProps?.dual) {
@@ -317,50 +328,55 @@ const Create = ({
               // await engine.current.setRemoteSubscribeFallbackOption(1);
             }
             callbacks?.JoinChannelSuccess &&
-              callbacks.JoinChannelSuccess(channel, uid, elapsed);
+              callbacks.JoinChannelSuccess(connection, elapsed);
           },
         );
 
-        engine.current.addListener('UserJoined', async (...args) => {
-          // preventing STT pusher bot in renderlist
+        engine.current.addListener('onUserJoined', async (...args) => {
+          // exluding the connection obj being passed by native sdk
+          const [, ...remainingArgs] = args;
           //@ts-ignore
-          if (args[0] === 111111) {
+          // preventing bots(ex: STT, recording) in renderlist
+          if (isBotUser(remainingArgs)) {
             return;
           }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
             //@ts-ignore
-            value: args,
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('UserOffline', (...args) => {
+        engine.current.addListener('onUserOffline', (...args) => {
+          const [, ...remainingArgs] = args;
           //If user leaves
           dispatch({
             type: 'UserOffline',
             //@ts-ignore
-            value: args,
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('RemoteAudioStateChanged', (...args) => {
+        engine.current.addListener('onRemoteAudioStateChanged', (...args) => {
+          const [, ...remainingArgs] = args;
           dispatch({
             type: 'RemoteAudioStateChanged',
             //@ts-ignore
-            value: args,
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('Error', (e) => {
+        engine.current.addListener('onError', (e) => {
           console.log('Error: ', e);
         });
 
-        engine.current.addListener('RemoteVideoStateChanged', (...args) => {
+        engine.current.addListener('onRemoteVideoStateChanged', (...args) => {
+          const [, ...remainingArgs] = args;
           dispatch({
             type: 'RemoteVideoStateChanged',
             //@ts-ignore
-            value: args,
+            value: remainingArgs,
           });
         });
 
@@ -374,25 +390,39 @@ const Create = ({
       init();
     }
     return () => {
+      if (Platform.OS !== 'web') {
+        // for web, events are cleared in release method
+        engine.current.removeAllListeners('onJoinChannelSuccess');
+        engine.current.removeAllListeners('onLeaveChannel');
+        engine.current.removeAllListeners('onUserJoined');
+        engine.current.removeAllListeners('onUserOffline');
+        engine.current.removeAllListeners('onRemoteVideoStateChanged');
+        engine.current.removeAllListeners('onRemoteAudioStateChanged');
+        engine.current.removeAllListeners('onError');
+      }
+
       /**
        * 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();
+      if (tracksReady || Platform.OS === 'web') {
+        engine.current.release();
       }
     };
-  }, [rtcProps.appId, rtcProps.uid]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.appId, rtcProps?.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {
       if (
-        mode == ChannelProfile.LiveBroadcasting &&
+        mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
         engine.current.setClientRole // Check if engine initialized
       ) {
-        if (rtcProps.role == ClientRole.Broadcaster) {
-          await engine.current?.setClientRole(ClientRole.Broadcaster);
+        if (rtcProps?.role === ClientRoleType.ClientRoleBroadcaster) {
+          await engine.current?.setClientRole(
+            ClientRoleType.ClientRoleBroadcaster,
+          );
           // isVideoEnabledRef checks if the permission is already taken once
           if (!isVideoEnabledRef.current) {
             await enableVideoAndAudioWithDisabledState();
@@ -417,7 +447,7 @@ const Create = ({
             }
           }
         }
-        if (rtcProps.role == ClientRole.Audience) {
+        if (rtcProps?.role === ClientRoleType.ClientRoleAudience) {
           /**
            * To switch the user role back to "audience", call unpublish first
            * Otherwise the setClientRole method call fails and throws an exception.
@@ -436,7 +466,9 @@ const Create = ({
               value: [ToggleState.disabled],
             });
           }
-          await engine.current?.setClientRole(ClientRole.Audience);
+          await engine.current?.setClientRole(
+            ClientRoleType.ClientRoleAudience,
+          );
         }
       }
     };
@@ -446,7 +478,8 @@ const Create = ({
       return;
     }
     toggleRole();
-  }, [rtcProps.role]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.role]);
 
   return (
     <>

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

@@ -1,5 +1,5 @@
 import React, {useEffect, useContext, useRef} from 'react';
-import RtcEngine from 'react-native-agora';
+import {IRtcEngine} from 'react-native-agora';
 import {ContentStateInterface} from '../Contexts/RtcContext';
 import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {ToggleState} from '../Contexts/PropsContext';
@@ -8,7 +8,7 @@ import {Platform} from 'react-native';
 const Join: React.FC<{
   children: React.ReactNode;
   precall: boolean;
-  engineRef: React.MutableRefObject<RtcEngine>;
+  engineRef: React.MutableRefObject<IRtcEngine>;
   uidState: ContentStateInterface;
   dispatch: DispatchType;
   tracksReady: boolean;
@@ -16,7 +16,8 @@ const Join: React.FC<{
 }> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
-  const {audioRoom = false} = rtcProps;
+
+  const audioRoom = rtcProps?.audioRoom || false;
   //commented for v1 release
   // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
   //   ? rtcProps.lifecycle.useBeforeJoin()
@@ -27,12 +28,14 @@ const Join: React.FC<{
       //@ts-ignore
       engineRef.current.publish();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tracksReady]);
 
   useEffect(() => {
     if (rtcProps?.preventJoin) {
       return;
     }
+
     const engine = engineRef.current;
     async function leave() {
       try {
@@ -45,20 +48,20 @@ const Join: React.FC<{
     }
     const {defaultContent, activeUids} = uidState;
     const [maxUid] = activeUids;
-    const videoState = defaultContent[maxUid].video;
+    const videoState = defaultContent[maxUid]?.video;
     async function join() {
       if (
         rtcProps?.encryption &&
-        rtcProps.encryption.key &&
+        rtcProps?.encryption.key &&
         rtcProps.encryption.mode &&
         rtcProps.encryption.salt
       ) {
-        console.log('using channel encryption', rtcProps?.encryption);
         try {
           await engine.enableEncryption(true, {
             encryptionKey: rtcProps?.encryption.key,
             encryptionMode: rtcProps?.encryption.mode,
             encryptionKdfSalt: rtcProps?.encryption.salt,
+            datastreamEncryptionEnabled: true,
           });
         } catch (error) {
           console.warn('encryption error', error);
@@ -89,10 +92,10 @@ const Join: React.FC<{
       // }
       try {
         await engine.joinChannel(
-          rtcProps.token || null,
-          rtcProps.channel,
-          null,
-          rtcProps.uid || 0,
+          rtcProps?.token || '',
+          rtcProps?.channel || '',
+          rtcProps?.uid || 0,
+          {},
         );
       } catch (error) {
         console.error('RTC joinChannel error', error);
@@ -122,7 +125,7 @@ const Join: React.FC<{
           await leave();
           await join();
         }
-        console.log('Attempted join: ', rtcProps.channel);
+        console.log('Attempted join: ', rtcProps?.channel);
       } else {
         console.log('In precall - waiting to join');
       }
@@ -133,13 +136,14 @@ const Join: React.FC<{
         leave();
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    rtcProps.channel,
-    rtcProps.uid,
-    rtcProps.token,
+    rtcProps?.channel,
+    rtcProps?.uid,
+    rtcProps?.token,
     precall,
-    rtcProps.encryption,
-    rtcProps.preventJoin,
+    rtcProps?.encryption,
+    rtcProps?.preventJoin,
   ]);
 
   return <>{children}</>;