agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useContext, useRef} from 'react';
 import RtcEngine from 'react-native-agora';
-import {RenderStateInterface, DispatchType} from '../Contexts/RtcContext';
+import {ContentStateInterface} from '../Contexts/RtcContext';
+import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {ToggleState} from '../Contexts/PropsContext';
 import {Platform} from 'react-native';
 
@@ -8,7 +9,7 @@ const Join: React.FC<{
   children: React.ReactNode;
   precall: boolean;
   engineRef: React.MutableRefObject<RtcEngine>;
-  uidState: RenderStateInterface;
+  uidState: ContentStateInterface;
   dispatch: DispatchType;
 }> = ({children, precall, engineRef, uidState, dispatch}) => {
   let joinState = useRef(false);
@@ -30,9 +31,9 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const {renderList, activeUids} = uidState;
+    const {defaultContent, activeUids} = uidState;
     const [maxUid] = activeUids;
-    const videoState = renderList[maxUid].video;
+    const videoState = defaultContent[maxUid].video;
     async function join() {
       if (
         rtcProps.encryption &&

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

@@ -1,23 +1,27 @@
 import React, {useState, useReducer, useContext, useCallback} from 'react';
 import {
   RtcProvider,
-  RenderStateInterface,
-  DispatchType,
+  ContentStateInterface,
   ActionType,
   UidType,
 } from './Contexts/RtcContext';
+import {DispatchType} from './Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
   RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
+  PermissionState,
+  ChannelProfile,
+  ClientRole,
 } from './Contexts/PropsContext';
-import {RenderProvider} from './Contexts/RenderContext';
+import {ContentProvider} from './Contexts/ContentContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
   LocalMuteAudio,
   LocalMuteVideo,
+  LocalPermissionState,
   RemoteAudioStateChanged,
   RemoteVideoStateChanged,
   UpdateDualStreamMode,
@@ -25,28 +29,32 @@ import {
   UserMuteRemoteAudio,
   UserMuteRemoteVideo,
   UserOffline,
+  UserPin,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
 import useLocalUid from './Utils/useLocalUid';
+import {DispatchProvider} from './Contexts/DispatchContext';
 
 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,
   );
   const localUid = useLocalUid();
-  const initialLocalState: RenderStateInterface = {
-    renderList: {
+  const initialLocalState: ContentStateInterface = {
+    defaultContent: {
       [localUid]: {
         uid: localUid,
         audio: ToggleState.disabled,
         video: ToggleState.disabled,
         streamType: 'high',
         type: 'rtc',
+        permissionStatus: PermissionState.NOT_REQUESTED,
       },
     },
     activeUids: [localUid],
+    pinnedUid: undefined,
     lastJoinedUid: 0,
   };
 
@@ -60,7 +68,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   /**
    *
-   * @param state RenderStateInterface
+   * @param state ContentStateInterface
    * @param action ActionType<'UpdateRenderList'>
    * @returns void
    *
@@ -68,15 +76,15 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    *
    */
   const UpdateRenderList = (
-    state: RenderStateInterface,
+    state: ContentStateInterface,
     action: ActionType<'UpdateRenderList'>,
   ) => {
     const newState = {
       ...state,
-      renderList: {
-        ...state.renderList,
+      defaultContent: {
+        ...state.defaultContent,
         [action.value[0]]: {
-          ...state.renderList[action.value[0]],
+          ...state.defaultContent[action.value[0]],
           ...action.value[1],
         },
       },
@@ -86,23 +94,23 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   /**
    *
-   * @param state RenderStateInterface
+   * @param state ContentStateInterface
    * @param action ActionType<'AddCustomContent'>
    * @returns void
    *
    * AddCustomContent use to add new data into render position and render list
    */
   const AddCustomContent = (
-    state: RenderStateInterface,
+    state: ContentStateInterface,
     action: ActionType<'AddCustomContent'>,
   ) => {
     const newState = {
       ...state,
       activeUids: [...state.activeUids, action.value[0]],
-      renderList: {
-        ...state.renderList,
+      defaultContent: {
+        ...state.defaultContent,
         [action.value[0]]: {
-          ...state.renderList[action.value[0]],
+          ...state.defaultContent[action.value[0]],
           ...action.value[1],
         },
       },
@@ -111,7 +119,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   };
 
   const reducer = (
-    state: RenderStateInterface,
+    state: ContentStateInterface,
     action: ActionType<keyof CallbacksInterface>,
   ) => {
     let stateUpdate = {};
@@ -172,6 +180,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 +195,11 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = RemoteVideoStateChanged(state, action);
         }
         break;
+      case 'UserPin':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserPin(state, action);
+        }
+        break;
     }
 
     // TODO: remove Handle event listeners
@@ -203,16 +221,16 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   };
 
   const swapVideo = useCallback(
-    (state: RenderStateInterface, newMaxUid: UidType) => {
+    (state: ContentStateInterface, newMaxUid: UidType) => {
       if (state?.activeUids?.indexOf(newMaxUid) === -1) {
         //skip the update if new max uid is not joined yet.
         return {};
       }
-      let activeUids: RenderStateInterface['activeUids'] = [
+      let activeUids: ContentStateInterface['activeUids'] = [
         ...state.activeUids,
       ];
-      let renderList: RenderStateInterface['renderList'] = {
-        ...state.renderList,
+      let defaultContent: ContentStateInterface['defaultContent'] = {
+        ...state.defaultContent,
       };
 
       // Element which is currently maximized
@@ -230,8 +248,8 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       }
 
       if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        renderList[currentMaxUid].streamType = 'low';
-        renderList[newMaxUid].streamType = 'high';
+        defaultContent[currentMaxUid].streamType = 'low';
+        defaultContent[newMaxUid].streamType = 'high';
         // No need to modify the streamType if the mode is not dynamic
       }
 
@@ -246,7 +264,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
       return {
         activeUids: activeUids,
-        renderList: renderList,
+        defaultContent: defaultContent,
       };
     },
     [dualStreamMode],
@@ -256,18 +274,18 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    * deque will
    */
   const dequeVideo = useCallback(
-    (state: RenderStateInterface, newMaxUid: UidType) => {
+    (state: ContentStateInterface, newMaxUid: UidType) => {
       if (state?.activeUids?.indexOf(newMaxUid) === -1) {
         //skip the update if new max uid is not joined yet.
         return {};
       }
-      let activeUids: RenderStateInterface['activeUids'] = [
+      let activeUids: ContentStateInterface['activeUids'] = [
         ...state.activeUids,
       ];
-      let renderList: RenderStateInterface['renderList'] = {
-        ...state.renderList,
+      let defaultContent: ContentStateInterface['defaultContent'] = {
+        ...state.defaultContent,
       };
-      if (!(newMaxUid in renderList)) {
+      if (!(newMaxUid in defaultContent)) {
         //skip the update if new max uid is not joined yet.
         return {};
       }
@@ -280,8 +298,8 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       }
 
       if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        renderList[currentMaxUid].streamType = 'low';
-        renderList[newMaxUid].streamType = 'high';
+        defaultContent[currentMaxUid].streamType = 'low';
+        defaultContent[newMaxUid].streamType = 'high';
         // No need to modify the streamType if the mode is not dynamic
       }
 
@@ -293,16 +311,14 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
       return {
         activeUids: activeUids,
-        renderList: renderList,
+        defaultContent: defaultContent,
       };
     },
     [dualStreamMode],
   );
 
-  const [uidState, dispatch]: [RenderStateInterface, DispatchType] = useReducer(
-    reducer,
-    initialState,
-  );
+  const [uidState, dispatch]: [ContentStateInterface, DispatchType] =
+    useReducer(reducer, initialState);
 
   return (
     <Create dispatch={dispatch}>
@@ -312,21 +328,32 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           engineRef={engineRef}
           uidState={uidState}
           dispatch={dispatch}>
-          <RtcProvider
-            value={{
-              RtcEngine: engineRef.current,
-              dispatch,
-              setDualStreamMode,
-            }}>
-            <RenderProvider
+          <DispatchProvider value={{dispatch}}>
+            <RtcProvider
               value={{
-                renderList: uidState.renderList,
-                activeUids: uidState.activeUids,
-                lastJoinedUid: uidState.lastJoinedUid,
+                RtcEngineUnsafe: engineRef.current,
+                setDualStreamMode,
               }}>
-              {props.children}
-            </RenderProvider>
-          </RtcProvider>
+              <ContentProvider
+                value={{
+                  defaultContent: uidState.defaultContent,
+                  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,
+                  pinnedUid:
+                    uidState?.pinnedUid &&
+                    uidState?.activeUids?.indexOf(uidState.pinnedUid) !== -1
+                      ? uidState.pinnedUid
+                      : undefined,
+                  lastJoinedUid: uidState.lastJoinedUid,
+                }}>
+                {props.children}
+              </ContentProvider>
+            </RtcProvider>
+          </DispatchProvider>
         </Join>
       )}
     </Create>

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

@@ -1,45 +1,55 @@
 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 PropsContext, {ContentInterface} from '../Contexts/PropsContext';
+import {View, ViewStyle} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MaxViewInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   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

@@ -1,40 +1,44 @@
 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 PropsContext, {ContentInterface} from '../Contexts/PropsContext';
+import {View, ViewStyle} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MaxViewInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   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/Views/MinVideoView.tsx

@@ -4,14 +4,14 @@ import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
 import icons from '../Controls/Icons';
 import RemoteControls from '../Controls/RemoteControls';
-import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
+import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MinViewInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   color?: string;
   showOverlay?: boolean;
 }

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

@@ -12,10 +12,16 @@ export {
 } from './Contexts/LocalUserContext';
 
 export {
-  default as RenderContext,
-  RenderConsumer,
-  RenderProvider,
-} from './Contexts/RenderContext';
+  default as ContentContext,
+  ContentConsumer,
+  ContentProvider,
+} from './Contexts/ContentContext';
+
+export {
+  default as DispatchContext,
+  DispatchConsumer,
+  DispatchProvider,
+} from './Contexts/DispatchContext';
 
 export {
   default as PropsContext,
@@ -25,11 +31,11 @@ export {
 
 export {DualStreamMode} from './Contexts/PropsContext';
 
-export {ToggleState} from './Contexts/PropsContext';
+export {ToggleState, PermissionState} from './Contexts/PropsContext';
 
 export type {
-  DefaultRenderInterface,
-  RenderInterface,
+  DefaultContentInterface,
+  ContentInterface,
   RtcPropsInterface,
   CallbacksInterface,
   CustomCallbacksInterface,
@@ -46,11 +52,11 @@ export {
 export type {
   UidType,
   RtcContextInterface,
-  DispatchType,
-  RenderStateInterface,
+  ContentStateInterface,
   ActionInterface,
   ActionType,
 } from './Contexts/RtcContext';
+export type {DispatchType} from './Contexts/DispatchContext';
 
 export {default as BtnTemplate} from './Controls/BtnTemplate';
 export type {BtnTemplateInterface} from './Controls/BtnTemplate';
@@ -67,4 +73,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>