agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -13,6 +13,7 @@ export default function RemoteAudioStateChanged(
   }
 
   const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
     renderList: {
       ...state.renderList,
       [action.value[0]]: {

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

@@ -13,6 +13,7 @@ export default function RemoteVideoStateChanged(
   }
 
   const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
     renderList: {
       ...state.renderList,
       [action.value[0]]: {

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

@@ -36,6 +36,7 @@ export default function UpdateDualStreamMode(
     minUids.forEach(setLowStreamType);
   }
   stateUpdate = {
+    activeSpeaker: state.activeSpeaker,
     renderList: renderList,
     activeUids: [...state.activeUids],
   };

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

@@ -44,6 +44,7 @@ export default function UserJoined(
     }
     //Swap render positions
     stateUpdate = {
+      activeSpeaker: state.activeSpeaker,
       renderList: renderList,
       activeUids: activeUids.reverse(),
       lastJoinedUid: newUid,
@@ -51,6 +52,7 @@ export default function UserJoined(
   } else {
     //More than one remote
     stateUpdate = {
+      activeSpeaker: state.activeSpeaker,
       renderList: renderList,
       activeUids: activeUids,
       lastJoinedUid: newUid,

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

@@ -5,6 +5,7 @@ export default function UserMuteRemoteAudio(
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
   let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
     renderList: {
       ...state.renderList,
       [action.value[0]]: {

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

@@ -5,6 +5,7 @@ export default function UserMuteRemoteVideo(
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
   let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
     renderList: {
       ...state.renderList,
       [action.value[0]]: {

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

@@ -16,6 +16,7 @@ export default function UserOffline(
     (uid) => uid !== action.value[0],
   );
   const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
     renderList: state.renderList,
     activeUids: updatedActiveUids,
   };

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

@@ -0,0 +1,11 @@
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+
+export default function UserPin(
+  state: RenderStateInterface,
+  action: ActionType<'UserPin'>,
+) {
+  return {
+    ...state,
+    pinnedUid: action?.value && action.value?.length ? action.value[0] : '',
+  };
+}

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

@@ -5,5 +5,8 @@ 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 ActiveSpeakerDetected} from './ActiveSpeakerDetected';
+export {default as UserPin} from './UserPin';

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

@@ -12,6 +12,7 @@ import PropsContext, {
   ToggleState,
   ClientRole,
   ChannelProfile,
+  PermissionState,
 } from '../Contexts/PropsContext';
 import quality from '../Utils/quality';
 
@@ -33,16 +34,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 +112,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,6 +172,7 @@ const Create = ({
         } else {
           console.error('No video device', videoError);
         }
+        dispatchPermissionState(audioError, videoError);
       }
       console.error('No devices', e);
     }
@@ -177,6 +228,7 @@ const Create = ({
         } else {
           await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
+        await engine.current.enableAudioVolumeIndication(500, 3, true);
         if (!audioRoom) {
           if (rtcProps.profile) {
             if (Platform.OS === 'web') {
@@ -277,6 +329,42 @@ const Create = ({
             value: args,
           });
         });
+
+        engine.current.addListener('AudioVolumeIndication', (...args) => {
+          // console.log('-- AudioVolumeCallback', args);
+          const [speakers, totalVolume] = args;
+          if (speakers[0]?.uid === 0) {
+            //callback for local user
+            const isLocalUserSpeaking = speakers[0].vad; //1-speaking ,  0-not speaking
+            const localUserVolumeLevel = speakers[0].volume;
+            // vad value is not consistent while speaking so using volume level
+            if (localUserVolumeLevel > 0) {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [rtcProps.uid],
+              });
+            } else {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [undefined],
+              });
+            }
+          } else {
+            // remote users callback, this will be handeled in ActiveSpeaker callback(367)
+            // const highestvolumeObj = speakers.reduce(function (prev, current) {
+            //   return prev.volume > current.volume ? prev : current;
+            // }, null);
+          }
+        });
+
+        engine.current.addListener('ActiveSpeaker', (...args) => {
+          // used as a callback from the web bridge as well remote users
+          dispatch({
+            type: 'ActiveSpeakerDetected',
+            value: args,
+          });
+        });
+
         setReady(true);
       } catch (e) {
         console.error(e);
@@ -293,7 +381,7 @@ const Create = ({
         engine.current!.destroy();
       }
     };
-  }, [rtcProps.appId]);
+  }, [rtcProps.appId, rtcProps.uid]);
 
   useEffect(() => {
     const toggleRole = async () => {

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

@@ -11,13 +11,18 @@ import PropsContext, {
   RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
+  PermissionState,
+  ChannelProfile,
+  ClientRole,
 } from './Contexts/PropsContext';
 import {RenderProvider} from './Contexts/RenderContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
+  ActiveSpeakerDetected,
   LocalMuteAudio,
   LocalMuteVideo,
+  LocalPermissionState,
   RemoteAudioStateChanged,
   RemoteVideoStateChanged,
   UpdateDualStreamMode,
@@ -25,13 +30,14 @@ import {
   UserMuteRemoteAudio,
   UserMuteRemoteVideo,
   UserOffline,
+  UserPin,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
 import useLocalUid from './Utils/useLocalUid';
 
 const RtcConfigure = (props: {children: React.ReactNode}) => {
-  const {callbacks, rtcProps} = useContext(PropsContext);
+  const {callbacks, rtcProps, mode} = useContext(PropsContext);
   let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
   );
@@ -44,9 +50,12 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         video: ToggleState.disabled,
         streamType: 'high',
         type: 'rtc',
+        permissionStatus: PermissionState.NOT_REQUESTED,
       },
     },
     activeUids: [localUid],
+    activeSpeaker: undefined,
+    pinnedUid: undefined,
     lastJoinedUid: 0,
   };
 
@@ -172,6 +181,11 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = LocalMuteVideo(state, action, localUid);
         }
         break;
+      case 'LocalPermissionState':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = LocalPermissionState(state, action, localUid);
+        }
+        break;
       case 'RemoteAudioStateChanged':
         if (actionTypeGuard(action, action.type)) {
           stateUpdate = RemoteAudioStateChanged(state, action);
@@ -182,6 +196,16 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = RemoteVideoStateChanged(state, action);
         }
         break;
+      case 'ActiveSpeakerDetected':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = ActiveSpeakerDetected(state, action);
+        }
+        break;
+      case 'UserPin':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserPin(state, action);
+        }
+        break;
     }
 
     // TODO: remove Handle event listeners
@@ -247,6 +271,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       return {
         activeUids: activeUids,
         renderList: renderList,
+        activeSpeaker: state.activeSpeaker,
       };
     },
     [dualStreamMode],
@@ -292,6 +317,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       activeUids = [newMaxUid, currentMaxUid, ...minIds];
 
       return {
+        activeSpeaker: state.activeSpeaker,
         activeUids: activeUids,
         renderList: renderList,
       };
@@ -321,7 +347,18 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
             <RenderProvider
               value={{
                 renderList: uidState.renderList,
-                activeUids: uidState.activeUids,
+                activeUids:
+                  //In livestreaming mode ->audience should not see their local video tile
+                  mode == ChannelProfile.LiveBroadcasting &&
+                  rtcProps?.role == ClientRole.Audience
+                    ? uidState.activeUids.filter((i) => i !== localUid)
+                    : uidState.activeUids,
+                activeSpeaker: uidState.activeSpeaker,
+                pinnedUid:
+                  uidState?.pinnedUid &&
+                  uidState?.activeUids?.indexOf(uidState.pinnedUid) !== -1
+                    ? uidState.pinnedUid
+                    : undefined,
                 lastJoinedUid: uidState.lastJoinedUid,
               }}>
               {props.children}

package/template/agora-rn-uikit/src/Views/MaxVideoView.native.tsx

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
 import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
@@ -11,35 +11,45 @@ const RemoteView = RtcRemoteView.SurfaceView;
 interface MaxViewInterface {
   user: RenderInterface;
   fallback?: React.ComponentType;
+  containerStyle?: ViewStyle;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
+  const {containerStyle = {}} = props;
   const Fallback = props.fallback;
   const localUid = useLocalUid();
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   return uid === localUid ? (
     props.user.video ? (
       <LocalView
-        style={{...styles.fullView, ...(maxViewStyles as object)}}
+        style={{
+          ...styles.fullView,
+          ...(maxViewStyles as object),
+          ...containerStyle,
+        }}
         renderMode={VideoRenderMode.Fit}
       />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={{flex: 1, backgroundColor: '#000'}} />
+      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
     )
   ) : props.user.video ? (
     <RemoteView
-      style={{...styles.fullView, ...(maxViewStyles as object)}}
+      style={{
+        ...styles.fullView,
+        ...(maxViewStyles as object),
+        ...containerStyle,
+      }}
       uid={uid as number}
       renderMode={VideoRenderMode.Fit}
     />
   ) : Fallback ? (
     <Fallback />
   ) : (
-    <View style={{flex: 1, backgroundColor: '#000'}} />
+    <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
   );
 };
 

package/template/agora-rn-uikit/src/Views/MaxVideoView.tsx

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
 import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
@@ -11,30 +11,34 @@ const RemoteView = RtcRemoteView.SurfaceView;
 interface MaxViewInterface {
   user: RenderInterface;
   fallback?: React.ComponentType;
+  containerStyle?: ViewStyle;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
   const Fallback = props.fallback;
+  const {containerStyle = {}} = props;
   const localUid = useLocalUid();
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   return uid === localUid ? (
     props.user.video ? (
-      <LocalView
-        style={{...styles.fullView, ...(maxViewStyles as object)}}
-        renderMode={VideoRenderMode.Fit}
-      />
+      <LocalView style={containerStyle} renderMode={VideoRenderMode.Fit} />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={{flex: 1, backgroundColor: '#000'}} />
+      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
     )
   ) : (
     <>
-      <div style={{flex: 1, display: props.user.video ? 'flex' : 'none'}}>
+      <div
+        style={{
+          flex: 1,
+          overflow: 'hidden',
+          display: props.user.video ? 'flex' : 'none',
+        }}>
         <RemoteView
-          style={{...styles.fullView, ...(maxViewStyles as object)}}
+          style={containerStyle}
           uid={uid as number}
           renderMode={VideoRenderMode.Fit}
         />
@@ -46,7 +50,9 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           {Fallback ? (
             <Fallback />
           ) : (
-            <View style={{flex: 1, backgroundColor: '#000'}} />
+            <View
+              style={[{flex: 1, backgroundColor: '#000'}, containerStyle]}
+            />
           )}
         </>
       )}

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

@@ -25,7 +25,7 @@ export {
 
 export {DualStreamMode} from './Contexts/PropsContext';
 
-export {ToggleState} from './Contexts/PropsContext';
+export {ToggleState, PermissionState} from './Contexts/PropsContext';
 
 export type {
   DefaultRenderInterface,
@@ -67,4 +67,6 @@ export {default as RemoteVideoMute} from './Controls/Remote/RemoteVideoMute';
 export {default as RemoteControls} from './Controls/RemoteControls';
 
 export {default as ImageIcon} from './Controls/ImageIcon';
+export {default as Icons} from './Controls/Icons';
+export type {IconsInterface} from './Controls/Icons';
 export {default as useLocalUid} from './Utils/useLocalUid';

package/template/android/app/build.gradle

@@ -178,6 +178,7 @@ android {
 
         }
     }
+
 }
 
 dependencies {

package/template/android/app/src/main/AndroidManifest.xml

@@ -1,27 +1,34 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+<manifest
+	xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.helloworld">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+	<uses-permission android:name="android.permission.WAKE_LOCK" />
+	<application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
-      <activity
+		<activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
+        android:windowSoftInputMode="adjustResize"
+        android:screenOrientation="portrait"
+        android:exported="true">
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_name" android:value="AppBuilder"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_description" android:value="AppBuilder is running"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_color" android:resource="@color/blue"/>
+		<service android:name="com.supersami.foregroundservice.ForegroundService" />
+		<service android:name="com.supersami.foregroundservice.ForegroundServiceTask" />
+	</application>
 </manifest>

package/template/android/app/src/main/java/com/helloworld/MainActivity.java

@@ -2,8 +2,58 @@ package com.helloworld;
 
 import com.facebook.react.ReactActivity;
 
+// for bg audio 
+import android.content.Intent;
+import android.util.Log;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
 public class MainActivity extends ReactActivity {
 
+   // Added for bg audio till end of main activity
+  public boolean isOnNewIntent = false;
+
+  @Override
+  public void onNewIntent(Intent intent) {
+    super.onNewIntent(intent);
+    isOnNewIntent = true;
+    ForegroundEmitter();
+  }
+
+  @Override
+  protected void onStart() {
+    super.onStart();
+    if(isOnNewIntent == true){}else {
+        ForegroundEmitter();
+    }
+  }
+
+  public  void  ForegroundEmitter(){
+    // this method is to send back data from java to javascript so one can easily
+    // know which button from notification or the notification button is clicked
+    String  main = getIntent().getStringExtra("mainOnPress");
+    String  btn = getIntent().getStringExtra("buttonOnPress");
+    String  btn2 = getIntent().getStringExtra("button2OnPress");
+    WritableMap  map = Arguments.createMap();
+    if (main != null) {
+        map.putString("main", main);
+    }
+    if (btn != null) {
+        map.putString("button", btn);
+    }
+    if (btn2 != null) {
+        map.putString("button", btn);
+    }
+    try {
+        getReactInstanceManager().getCurrentReactContext()
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+        .emit("notificationClickHandle", map);
+    } catch (Exception  e) {
+    Log.e("SuperLog", "Caught Exception: " + e.getMessage());
+    }
+  }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

package/template/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<resources>
+    <item  name="blue"  type="color">#099DFD
+    </item>
+    <integer-array  name="androidcolors">
+    <item>@color/blue</item>
+    </integer-array>
+</resources>

package/template/android/build.gradle

@@ -4,15 +4,15 @@ buildscript {
     ext {
         buildToolsVersion = "29.0.2"
         minSdkVersion = 21
-        compileSdkVersion = 29
-        targetSdkVersion = 29
+        compileSdkVersion = 34
+        targetSdkVersion = 34
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath("com.android.tools.build:gradle:4.1.2")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

package/template/babel.config.js

@@ -29,5 +29,6 @@ module.exports = {
         },
       },
     ],
+    'react-native-reanimated/plugin'
   ],
 };