agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -1,14 +1,14 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteAudio(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         audio: action.value[1],
       },
     },

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

@@ -1,14 +1,14 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteVideo(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
       [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+        ...state.defaultContent[action.value[0]],
         video: action.value[1],
       },
     },

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

@@ -1,11 +1,11 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserOffline(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'UserOffline'>,
 ) {
   // let updatedRenderList = {
-  //   ...state.renderList,
+  //   ...state.defaultContent,
   // };
   // //don't delete user data from renderlist
   // //we will update user data with {offline:true} from RTM user left event
@@ -15,9 +15,18 @@ export default function UserOffline(
   const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
-  const stateUpdate: RenderStateInterface = {
-    renderList: state.renderList,
+  const stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: state.defaultContent,
     activeUids: updatedActiveUids,
+    pinnedUid:
+      state?.pinnedUid && updatedActiveUids?.indexOf(state.pinnedUid) !== -1
+        ? state.pinnedUid
+        : 0,
+    secondaryPinnedUid:
+      state?.secondaryPinnedUid &&
+      updatedActiveUids?.indexOf(state.secondaryPinnedUid) !== -1
+        ? state.secondaryPinnedUid
+        : 0,
   };
 
   return stateUpdate;

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

@@ -0,0 +1,28 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function UserPin(
+  state: ContentStateInterface,
+  action: ActionType<'UserPin'>,
+) {
+  let localActiveUids = [...state.activeUids];
+  let secondaryPinnedUid = state.secondaryPinnedUid;
+  const pinnedUid =
+    action?.value && action.value?.length ? action.value[0] : '';
+  if (pinnedUid) {
+    const filteredData = localActiveUids?.filter(
+      (i) => i !== pinnedUid && i !== secondaryPinnedUid,
+    );
+    if (secondaryPinnedUid && secondaryPinnedUid !== pinnedUid) {
+      filteredData.unshift(secondaryPinnedUid);
+    }
+    filteredData.unshift(pinnedUid);
+    localActiveUids = filteredData;
+  }
+  return {
+    ...state,
+    pinnedUid,
+    secondaryPinnedUid:
+      pinnedUid === secondaryPinnedUid ? 0 : secondaryPinnedUid,
+    activeUids: localActiveUids,
+  };
+}

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

@@ -0,0 +1,23 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function UserSecondaryPin(
+  state: ContentStateInterface,
+  action: ActionType<'UserSecondaryPin'>,
+) {
+  let localActiveUids = [...state.activeUids];
+  const secondaryPinnedUid =
+    action?.value && action.value?.length ? action.value[0] : 0;
+  if (secondaryPinnedUid) {
+    const filteredData: any = localActiveUids?.filter(
+      (i) => i !== secondaryPinnedUid,
+    );
+    const [maxUid, ...minUids] = filteredData;
+    localActiveUids = [maxUid, secondaryPinnedUid, ...minUids];
+  }
+  return {
+    ...state,
+    secondaryPinnedUid,
+    pinnedUid: state?.pinnedUid === secondaryPinnedUid ? 0 : state?.pinnedUid,
+    activeUids: localActiveUids,
+  };
+}

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

@@ -5,5 +5,9 @@ export {default as UserMuteRemoteAudio} from './UserMuteRemoteAudio';
 export {default as UserMuteRemoteVideo} from './UserMuteRemoteVideo';
 export {default as LocalMuteAudio} from './LocalMuteAudio';
 export {default as LocalMuteVideo} from './LocalMuteVideo';
+export {default as LocalPermissionState} from './LocalPermissionState';
 export {default as RemoteAudioStateChanged} from './RemoteAudioStateChanged';
 export {default as RemoteVideoStateChanged} from './RemoteVideoStateChanged';
+export {default as UserPin} from './UserPin';
+export {default as UserSecondaryPin} from './UserSecondaryPin';
+export {default as ActiveSpeaker} from './ActiveSpeaker';

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

@@ -1,31 +1,44 @@
-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/RtcContext';
+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,
   children,
 }: {
   dispatch: DispatchType;
-  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+  children: (
+    engine: React.MutableRefObject<IRtcEngine>,
+    tracksReady: boolean,
+  ) => React.ReactElement;
 }) => {
+  const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
+  const [tracksReady, setTracksReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
-  const {geoFencing = true, audioRoom = false} = rtcProps || {};
-  let engine = useRef<RtcEngine>({} as RtcEngine);
+  const {
+    geoFencing = true,
+    audioRoom = false,
+    activeSpeaker = false,
+  } = rtcProps || {};
+  let engine = useRef<IRtcEngine>({} as IRtcEngine);
   // commented for v1 release
   // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
   //   ? rtcProps.lifecycle.useBeforeCreate()
@@ -33,16 +46,52 @@ const Create = ({
   const isVideoEnabledRef = useRef<boolean>(false);
   const firstUpdate = useRef(true);
 
+  const dispatchPermissionState = (audioError: any, videoError: any) => {
+    if (audioError && videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REJECTED],
+      });
+    } else if (audioError && !videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_CAM_ONLY],
+      });
+    } else if (!audioError && videoError) {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+      });
+    } else {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+      });
+    }
+  };
+
   const enableVideoAndAudioWithDisabledState = async () => {
     try {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REQUESTED],
+      });
       if (audioRoom === true) {
         await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.disabled],
         });
       } else {
         await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.disabled],
@@ -75,20 +124,33 @@ const Create = ({
         } else {
           console.error('No video device', videoError);
         }
+        dispatchPermissionState(audioError, videoError);
       }
       console.error('No devices', error);
     }
   };
   const enableVideoAndAudioWithEnabledState = async () => {
     try {
+      dispatch({
+        type: 'LocalPermissionState',
+        value: [PermissionState.REQUESTED],
+      });
       if (audioRoom === true) {
         await engine.current.enableAudio();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_MIC_ONLY],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.enabled],
         });
       } else {
         await engine.current.enableVideo();
+        dispatch({
+          type: 'LocalPermissionState',
+          value: [PermissionState.GRANTED_FOR_CAM_AND_MIC],
+        });
         dispatch({
           type: 'LocalMuteAudio',
           value: [ToggleState.enabled],
@@ -122,23 +184,25 @@ const Create = ({
         } else {
           console.error('No video device', videoError);
         }
+        dispatchPermissionState(audioError, videoError);
       }
       console.error('No devices', e);
     }
   };
   const enableVideoAndAudioWithInitialStates = async () => {
     if (
-      mode == ChannelProfile.LiveBroadcasting &&
-      rtcProps?.role == ClientRole.Audience
+      mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+      rtcProps?.role === ClientRoleType.ClientRoleAudience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 
   useEffect(() => {
     async function init() {
+      mutexLock.current = true;
       if (Platform.OS === 'android') {
         //Request required permissions from Android
         await requestCameraAndAudioPermission(audioRoom);
@@ -152,59 +216,79 @@ const Create = ({
       //   console.error('FPE:Error on executing useBeforeCreate', error);
       // }
       try {
+        engine.current = createAgoraRtcEngine();
         if (
           geoFencing === true &&
           (Platform.OS === 'android' || Platform.OS === 'ios')
         ) {
-          engine.current = await RtcEngine.createWithAreaCode(
-            rtcProps.appId,
-            // eslint-disable-next-line no-bitwise
-            AreaCode.GLOB ^ AreaCode.CN,
-          );
+          if (rtcProps?.appId) {
+            engine.current.initialize({
+              appId: rtcProps.appId,
+              // eslint-disable-next-line no-bitwise
+              areaCode: AreaCode.AreaCodeGlob ^ AreaCode.AreaCodeCn,
+            });
+          }
         } else {
-          engine.current = await RtcEngine.create(rtcProps.appId);
+          if (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);
         }
         if (!audioRoom) {
-          if (rtcProps.profile) {
+          if (rtcProps && rtcProps.profile) {
             if (Platform.OS === 'web') {
               // move this to bridge?
               // @ts-ignore
               await engine.current.setVideoProfile(rtcProps.profile);
+              // @ts-ignore
+              await engine.current.setScreenShareProfile(
+                rtcProps.screenShareProfile,
+              );
             } else {
-              const config: VideoEncoderConfiguration =
-                quality[rtcProps.profile];
-              await engine.current.setVideoEncoderConfiguration({
-                ...config,
-                bitrate: 0,
-              });
+              if (rtcProps && rtcProps?.profile) {
+                const config: VideoEncoderConfiguration =
+                  quality[rtcProps.profile];
+                //@ts-ignore
+                await engine.current.setVideoEncoderConfiguration({
+                  ...config,
+                  bitrate: 0,
+                });
+                //TODO set for native
+              }
             }
           }
         } else {
           //web will work even without audio profile
           //but native need to set audio profile otherwise user will experience low audio issue
           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);
             }
           }
@@ -220,86 +304,130 @@ 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
           )
         ) {
-          await enableVideoAndAudioWithInitialStates();
-          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) {
+            console.log('UIkit enabling dual stream', rtcProps?.dual);
+            if (rtcProps?.dual) {
               console.log('UIkit enabled dual stream');
               await engine.current!.enableDualStreamMode(rtcProps.dual);
               // await engine.current.setRemoteSubscribeFallbackOption(1);
             }
             callbacks?.JoinChannelSuccess &&
-              callbacks.JoinChannelSuccess(channel, uid, elapsed);
+              callbacks.JoinChannelSuccess(connection, elapsed);
           },
         );
 
-        engine.current.addListener('UserJoined', (...args) => {
+        engine.current.addListener('onUserJoined', async (...args) => {
+          // exluding the connection obj being passed by native sdk
+          const [, ...remainingArgs] = args;
+          //@ts-ignore
+          // preventing bots(ex: STT, recording) in renderlist
+          if (isBotUser(remainingArgs)) {
+            return;
+          }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('UserOffline', (...args) => {
+        engine.current.addListener('onUserOffline', (...args) => {
+          const [, ...remainingArgs] = args;
           //If user leaves
           dispatch({
             type: 'UserOffline',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
 
-        engine.current.addListener('RemoteAudioStateChanged', (...args) => {
+        engine.current.addListener('onRemoteAudioStateChanged', (...args) => {
+          const [, ...remainingArgs] = args;
           dispatch({
             type: 'RemoteAudioStateChanged',
-            value: args,
+            //@ts-ignore
+            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',
-            value: args,
+            //@ts-ignore
+            value: remainingArgs,
           });
         });
+
         setReady(true);
       } catch (e) {
         console.error(e);
       }
+      mutexLock.current = false;
+    }
+    if (!mutexLock.current) {
+      init();
     }
-    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]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.appId, rtcProps?.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {
-      if (mode == ChannelProfile.LiveBroadcasting) {
-        if (rtcProps.role == ClientRole.Broadcaster) {
-          await engine.current?.setClientRole(ClientRole.Broadcaster);
+      if (
+        mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
+        engine.current.setClientRole // Check if engine initialized
+      ) {
+        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();
@@ -324,7 +452,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.
@@ -343,7 +471,9 @@ const Create = ({
               value: [ToggleState.disabled],
             });
           }
-          await engine.current?.setClientRole(ClientRole.Audience);
+          await engine.current?.setClientRole(
+            ClientRoleType.ClientRoleAudience,
+          );
         }
       }
     };
@@ -353,13 +483,14 @@ const Create = ({
       return;
     }
     toggleRole();
-  }, [rtcProps.role]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rtcProps?.role]);
 
   return (
     <>
       {
         // Render children once RTCEngine has been initialized
-        ready && engine ? children(engine) : <></>
+        ready && engine ? children(engine, tracksReady) : <></>
       }
     </>
   );