agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

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

@@ -17,8 +17,8 @@ const AgoraUIKit: React.FC<PropsInterface> = (props) => {
       <View style={{backgroundColor: '#000', flex: 1}}>
         <RtcConfigure>
           <RenderConsumer>
-            {({renderList, renderPosition}) => {
-              const [maxUid, ...minUids] = renderPosition;
+            {({renderList, activeUids}) => {
+              const [maxUid, ...minUids] = activeUids;
               return (
                 <>
                   <MaxVideoView user={renderList[maxUid]} key={maxUid} />

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/Contexts/RtcContext.tsx

@@ -5,13 +5,13 @@ import type {DualStreamMode, RenderInterface} from './PropsContext';
 
 export type UidType = number;
 
-export interface RenderObjectInterface {
+export interface RenderObjects {
   [key: number]: RenderInterface;
 }
 
 export interface RenderStateInterface {
-  renderList: RenderObjectInterface;
-  renderPosition: Array<UidType>;
+  renderList: RenderObjects;
+  activeUids: Array<UidType>;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

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/Controls/LocalControls.tsx

@@ -30,10 +30,10 @@ function Controls(props: ControlsPropsInterface) {
       </View>
       {showButton ? (
         <RenderConsumer>
-          {({renderList, renderPosition}) => (
+          {({renderList, activeUids}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
               <RemoteControls
-                user={renderList[renderPosition[0]]}
+                user={renderList[activeUids[0]]}
                 showRemoteSwap={false}
               />
             </View>

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

@@ -17,7 +17,7 @@ export default function LocalMuteAudio(
         audio: action.value[0],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -17,7 +17,7 @@ export default function LocalMuteVideo(
         video: action.value[0],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -20,7 +20,7 @@ export default function RemoteAudioStateChanged(
         audio: audioState,
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -23,7 +23,7 @@ export default function RemoteVideoStateChanged(
             : state.renderList[action.value[0]].video,
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -22,12 +22,12 @@ export default function UpdateDualStreamMode(
 
   if (newMode === DualStreamMode.HIGH) {
     // Update everybody to high
-    state.renderPosition.forEach(setHighStreamType);
+    state.activeUids.forEach(setHighStreamType);
   } else if (newMode === DualStreamMode.LOW) {
     // Update everybody to low
-    state.renderPosition.forEach(setLowStreamType);
+    state.activeUids.forEach(setLowStreamType);
   } else {
-    const [maxUid, ...minUids] = state.renderPosition;
+    const [maxUid, ...minUids] = state.activeUids;
     // if (newMode === DualStreamMode.DYNAMIC)
     // Max users are high other are low
     //setting high for maxuid
@@ -37,7 +37,7 @@ export default function UpdateDualStreamMode(
   }
   stateUpdate = {
     renderList: renderList,
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -32,9 +32,11 @@ export default function UserJoined(
       ...typeData,
     },
   };
-  let renderPosition = [...state.renderPosition, newUid];
-  const [maxUid] = renderPosition;
-  if (renderPosition.length === 2 && maxUid === localUid) {
+  let activeUids = state.activeUids.filter((i) => i === newUid).length
+    ? [...state.activeUids]
+    : [...state.activeUids, newUid];
+  const [maxUid] = activeUids;
+  if (activeUids.length === 2 && maxUid === localUid) {
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
@@ -43,13 +45,13 @@ export default function UserJoined(
     //Swap render positions
     stateUpdate = {
       renderList: renderList,
-      renderPosition: renderPosition.reverse(),
+      activeUids: activeUids.reverse(),
     };
   } else {
     //More than one remote
     stateUpdate = {
       renderList: renderList,
-      renderPosition: renderPosition,
+      activeUids: activeUids,
     };
   }
 

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

@@ -12,7 +12,7 @@ export default function UserMuteRemoteAudio(
         audio: action.value[1],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -12,7 +12,7 @@ export default function UserMuteRemoteVideo(
         video: action.value[1],
       },
     },
-    renderPosition: [...state.renderPosition],
+    activeUids: [...state.activeUids],
   };
   return stateUpdate;
 }

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

@@ -12,12 +12,12 @@ export default function UserOffline(
   // if (updatedRenderList[action.value[0]]) {
   //   delete updatedRenderList[action.value[0]];
   // }
-  const updatedRenderPosition = [...state.renderPosition].filter(
+  const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
   const stateUpdate: RenderStateInterface = {
     renderList: state.renderList,
-    renderPosition: updatedRenderPosition,
+    activeUids: updatedActiveUids,
   };
 
   return stateUpdate;

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

@@ -2,6 +2,8 @@ import React, {useState, useEffect, useContext, useRef, FC} from 'react';
 import RtcEngine, {
   VideoEncoderConfiguration,
   AreaCode,
+  AudioProfile,
+  AudioScenario,
 } from 'react-native-agora';
 import {Platform} from 'react-native';
 import requestCameraAndAudioPermission from '../Utils/permission';
@@ -22,7 +24,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 +35,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 +67,7 @@ const Create = ({
           console.error('No audio device', audioError);
         }
 
-        if (!videoError) {
+        if (!videoError && !audioRoom) {
           dispatch({
             type: 'LocalMuteVideo',
             value: [ToggleState.disabled],
@@ -71,15 +81,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 +114,7 @@ const Create = ({
           console.error('No audio device', audioError);
         }
 
-        if (!videoError) {
+        if (!videoError && !audioRoom) {
           dispatch({
             type: 'LocalMuteVideo',
             value: [ToggleState.enabled],
@@ -123,7 +141,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 {
@@ -159,17 +177,36 @@ const Create = ({
         } else {
           await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
-        if (rtcProps.profile) {
-          if (Platform.OS === 'web') {
-            // move this to bridge?
-            // @ts-ignore
-            await engine.current.setVideoProfile(rtcProps.profile);
-          } else {
-            const config: VideoEncoderConfiguration = quality[rtcProps.profile];
-            await engine.current.setVideoEncoderConfiguration({
-              ...config,
-              bitrate: 0,
-            });
+        if (!audioRoom) {
+          if (rtcProps.profile) {
+            if (Platform.OS === 'web') {
+              // move this to bridge?
+              // @ts-ignore
+              await engine.current.setVideoProfile(rtcProps.profile);
+            } else {
+              const config: VideoEncoderConfiguration =
+                quality[rtcProps.profile];
+              await engine.current.setVideoEncoderConfiguration({
+                ...config,
+                bitrate: 0,
+              });
+            }
+          }
+        } 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') {
+            await engine.current.setAudioProfile(
+              AudioProfile.Default,
+              AudioScenario.Default,
+            );
+            //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) {
+              await engine.current.setEnableSpeakerphone(true);
+            }
           }
         }
 
@@ -271,16 +308,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) {
@@ -289,15 +330,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()
@@ -29,8 +30,8 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const {renderList, renderPosition} = uidState;
-    const [maxUid] = renderPosition;
+    const {renderList, activeUids} = uidState;
+    const [maxUid] = activeUids;
     const videoState = renderList[maxUid].video;
     async function join() {
       if (
@@ -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

@@ -46,7 +46,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         type: 'rtc',
       },
     },
-    renderPosition: [localUid],
+    activeUids: [localUid],
   };
 
   const [initialState, setInitialState] = React.useState(
@@ -97,7 +97,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   ) => {
     const newState = {
       ...state,
-      renderPosition: [...state.renderPosition, action.value[0]],
+      activeUids: [...state.activeUids, action.value[0]],
       renderList: {
         ...state.renderList,
         [action.value[0]]: {
@@ -203,16 +203,28 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   const swapVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
-      let renderPosition: RenderStateInterface['renderPosition'] = [
-        ...state.renderPosition,
+      if (state?.activeUids?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
+      let activeUids: RenderStateInterface['activeUids'] = [
+        ...state.activeUids,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+
       // Element which is currently maximized
-      const [currentMaxUid] = renderPosition;
+      const [currentMaxUid] = activeUids;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
+        return {};
+      }
+
+      const newMaxUidOldPosition = activeUids.findIndex((i) => i === newMaxUid);
+
+      if (!newMaxUidOldPosition) {
         return {};
       }
 
@@ -228,15 +240,11 @@ 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;
+      activeUids[0] = newMaxUid;
+      activeUids[newMaxUidOldPosition] = currentMaxUid;
 
       return {
-        renderPosition: renderPosition,
+        activeUids: activeUids,
         renderList: renderList,
       };
     },
@@ -248,16 +256,25 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    */
   const dequeVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
-      let renderPosition: RenderStateInterface['renderPosition'] = [
-        ...state.renderPosition,
+      if (state?.activeUids?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
+      let activeUids: RenderStateInterface['activeUids'] = [
+        ...state.activeUids,
       ];
       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;
+      const [currentMaxUid] = activeUids;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
         return {};
       }
 
@@ -267,14 +284,14 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         // No need to modify the streamType if the mode is not dynamic
       }
 
-      const minIds = renderPosition.filter(
+      const minIds = activeUids.filter(
         (uid) => uid !== newMaxUid && uid !== currentMaxUid,
       );
 
-      renderPosition = [newMaxUid, currentMaxUid, ...minIds];
+      activeUids = [newMaxUid, currentMaxUid, ...minIds];
 
       return {
-        renderPosition: renderPosition,
+        activeUids: activeUids,
         renderList: renderList,
       };
     },
@@ -303,7 +320,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
             <RenderProvider
               value={{
                 renderList: uidState.renderList,
-                renderPosition: uidState.renderPosition,
+                activeUids: uidState.activeUids,
               }}>
               {props.children}
             </RenderProvider>

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');
     }