agora-appbuilder-core 4.0.0 → 4.0.2

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

@@ -1,25 +1,24 @@
 import React, {useState, useReducer, useContext, useCallback} from 'react';
 import {
   RtcProvider,
-  RenderStateInterface,
-  DispatchType,
+  ContentStateInterface,
   ActionType,
   UidType,
+  CustomContentInferface,
 } from './Contexts/RtcContext';
+import {DispatchType} from './Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
-  RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
   PermissionState,
-  ChannelProfile,
-  ClientRole,
+  ChannelProfileType,
+  ClientRoleType,
 } from './Contexts/PropsContext';
-import {RenderProvider} from './Contexts/RenderContext';
+import {ContentProvider} from './Contexts/ContentContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
-  ActiveSpeakerDetected,
   LocalMuteAudio,
   LocalMuteVideo,
   LocalPermissionState,
@@ -31,19 +30,24 @@ import {
   UserMuteRemoteVideo,
   UserOffline,
   UserPin,
+  UserSecondaryPin,
+  ActiveSpeaker,
 } 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 RtcConfigure = (outerProps: {children: React.ReactNode}) => {
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
   );
   const localUid = useLocalUid();
-  const initialLocalState: RenderStateInterface = {
-    renderList: {
+
+  const initialLocalState: Partial<ContentStateInterface> = {
+    customContent: {},
+    defaultContent: {
       [localUid]: {
         uid: localUid,
         audio: ToggleState.disabled,
@@ -51,11 +55,13 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         streamType: 'high',
         type: 'rtc',
         permissionStatus: PermissionState.NOT_REQUESTED,
+        audioForceDisabled: false,
+        videoForceDisabled: false,
       },
     },
-    activeUids: [localUid],
-    activeSpeaker: undefined,
+    activeUids: rtcProps?.recordingBot ? [] : [localUid],
     pinnedUid: undefined,
+    secondaryPinnedUid: undefined,
     lastJoinedUid: 0,
   };
 
@@ -65,11 +71,12 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   React.useEffect(() => {
     setInitialState(JSON.parse(JSON.stringify(initialLocalState)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
    *
-   * @param state RenderStateInterface
+   * @param state ContentStateInterface
    * @param action ActionType<'UpdateRenderList'>
    * @returns void
    *
@@ -77,15 +84,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],
         },
       },
@@ -95,32 +102,69 @@ 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: ContentStateInterface,
+  //   action: ActionType<'AddCustomContent'>,
+  // ) => {
+  //   const newState = {
+  //     ...state,
+  //     activeUids: [...state.activeUids, action.value[0]],
+  //     defaultContent: {
+  //       ...state.defaultContent,
+  //       [action.value[0]]: {
+  //         ...state.defaultContent[action.value[0]],
+  //         ...action.value[1],
+  //       },
+  //     },
+  //   };
+  //   return newState;
+  // };
+
   const AddCustomContent = (
-    state: RenderStateInterface,
+    state: ContentStateInterface,
     action: ActionType<'AddCustomContent'>,
   ) => {
     const newState = {
       ...state,
-      activeUids: [...state.activeUids, action.value[0]],
-      renderList: {
-        ...state.renderList,
+      activeUids: state.activeUids.filter((i) => i === action.value[0])?.length
+        ? [...state.activeUids]
+        : [...state.activeUids, action.value[0]],
+      customContent: {
+        ...state.customContent,
         [action.value[0]]: {
-          ...state.renderList[action.value[0]],
-          ...action.value[1],
+          uid: action.value[0],
+          component: action.value[1]?.component,
+          props: action.value[1]?.props,
+          onStage: action.value[1]?.onStage,
         },
       },
     };
     return newState;
   };
+  const RemoveCustomContent = (
+    state: ContentStateInterface,
+    action: ActionType<'RemoveCustomContent'>,
+  ) => {
+    const customContent = state.customContent;
+    if (customContent && customContent[action.value[0]]) {
+      delete customContent[action.value[0]];
+    }
+    const newState = {
+      ...state,
+      activeUids: [...state.activeUids.filter((i) => i !== action.value[0])],
+      ...customContent,
+    };
+    return newState;
+  };
 
   const reducer = (
-    state: RenderStateInterface,
+    state: ContentStateInterface,
     action: ActionType<keyof CallbacksInterface>,
   ) => {
     let stateUpdate = {};
@@ -131,6 +175,11 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = AddCustomContent(state, action);
         }
         break;
+      case 'RemoveCustomContent':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = RemoveCustomContent(state, action);
+        }
+        break;
       case 'UpdateRenderList':
         if (actionTypeGuard(action, action.type)) {
           stateUpdate = UpdateRenderList(state, action);
@@ -196,14 +245,19 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = RemoteVideoStateChanged(state, action);
         }
         break;
-      case 'ActiveSpeakerDetected':
+      case 'UserPin':
         if (actionTypeGuard(action, action.type)) {
-          stateUpdate = ActiveSpeakerDetected(state, action);
+          stateUpdate = UserPin(state, action);
         }
         break;
-      case 'UserPin':
+      case 'UserSecondaryPin':
         if (actionTypeGuard(action, action.type)) {
-          stateUpdate = UserPin(state, action);
+          stateUpdate = UserSecondaryPin(state, action);
+        }
+        break;
+      case 'ActiveSpeaker':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = ActiveSpeaker(state, action);
         }
         break;
     }
@@ -227,16 +281,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
@@ -254,8 +308,12 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       }
 
       if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        renderList[currentMaxUid].streamType = 'low';
-        renderList[newMaxUid].streamType = 'high';
+        defaultContent[currentMaxUid]
+          ? (defaultContent[currentMaxUid].streamType = 'low')
+          : null;
+        defaultContent[newMaxUid]
+          ? (defaultContent[newMaxUid].streamType = 'high')
+          : null;
         // No need to modify the streamType if the mode is not dynamic
       }
 
@@ -270,8 +328,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
       return {
         activeUids: activeUids,
-        renderList: renderList,
-        activeSpeaker: state.activeSpeaker,
+        defaultContent: defaultContent,
       };
     },
     [dualStreamMode],
@@ -281,18 +338,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 {};
       }
@@ -305,8 +362,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
       }
 
@@ -317,53 +374,96 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       activeUids = [newMaxUid, currentMaxUid, ...minIds];
 
       return {
-        activeSpeaker: state.activeSpeaker,
         activeUids: activeUids,
-        renderList: renderList,
+        defaultContent: defaultContent,
       };
     },
     [dualStreamMode],
   );
 
-  const [uidState, dispatch]: [RenderStateInterface, DispatchType] = useReducer(
-    reducer,
-    initialState,
-  );
+  const [uidState, dispatch]: [ContentStateInterface, DispatchType] =
+    useReducer(reducer, initialState);
 
+  const setCustomContent = (
+    uid: CustomContentInferface['uid'],
+    component: CustomContentInferface['component'],
+    props?: CustomContentInferface['props'],
+    onStage?: CustomContentInferface['onStage'],
+  ) => {
+    if (!uid) {
+      console.log('debugging UID is not given');
+      return;
+    } else {
+      if (!component) {
+        dispatch({
+          type: 'RemoveCustomContent',
+          value: [uid],
+        });
+      } else {
+        dispatch({
+          type: 'AddCustomContent',
+          value: [
+            uid,
+            {component, props, onStage: onStage === undefined ? true : onStage},
+          ],
+        });
+      }
+    }
+  };
   return (
     <Create dispatch={dispatch}>
-      {(engineRef) => (
+      {(engineRef, tracksReady) => (
         <Join
-          precall={!rtcProps.callActive}
+          precall={!rtcProps?.callActive}
+          preventJoin={rtcProps?.preventJoin}
           engineRef={engineRef}
           uidState={uidState}
-          dispatch={dispatch}>
-          <RtcProvider
-            value={{
-              RtcEngine: engineRef.current,
-              dispatch,
-              setDualStreamMode,
-            }}>
-            <RenderProvider
+          dispatch={dispatch}
+          tracksReady={tracksReady}>
+          <DispatchProvider value={{dispatch}}>
+            <RtcProvider
               value={{
-                renderList: uidState.renderList,
-                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,
+                RtcEngineUnsafe: engineRef.current,
+                setDualStreamMode,
               }}>
-              {props.children}
-            </RenderProvider>
-          </RtcProvider>
+              <ContentProvider
+                value={{
+                  customContent: uidState.customContent,
+                  setCustomContent: setCustomContent,
+                  defaultContent: uidState.defaultContent,
+                  activeUids:
+                    //In livestreaming mode ->audience should not see their local video tile
+                    mode ===
+                      ChannelProfileType.ChannelProfileLiveBroadcasting &&
+                    rtcProps?.role === ClientRoleType.ClientRoleAudience
+                      ? [
+                          ...new Set(
+                            uidState.activeUids.filter((i) => i !== localUid),
+                          ),
+                        ]
+                      : [
+                          ...new Set(
+                            uidState.activeUids.filter((i) => i !== undefined),
+                          ),
+                        ],
+                  pinnedUid:
+                    uidState?.pinnedUid &&
+                    uidState?.activeUids?.indexOf(uidState.pinnedUid) !== -1
+                      ? uidState.pinnedUid
+                      : undefined,
+                  secondaryPinnedUid:
+                    uidState?.secondaryPinnedUid &&
+                    uidState?.activeUids?.indexOf(
+                      uidState.secondaryPinnedUid,
+                    ) !== -1
+                      ? uidState.secondaryPinnedUid
+                      : undefined,
+                  lastJoinedUid: uidState.lastJoinedUid,
+                }}>
+                {outerProps.children}
+              </ContentProvider>
+            </RtcProvider>
+          </DispatchProvider>
         </Join>
       )}
     </Create>

package/template/agora-rn-uikit/src/Utils/isBotUser.ts

@@ -0,0 +1,15 @@
+export function isBotUser(args: [uid: number, elapsed: number]): boolean {
+  // STT bot
+  if (args[0] === 111111) {
+    return true;
+  }
+  // Web Recording bot (userUid)
+  if (args[0] === 100000) {
+    return true;
+  }
+  // Web Recording bot (screenUid)
+  if (args[0] === 100001) {
+    return true;
+  }
+  return false;
+}

package/template/agora-rn-uikit/src/Utils/quality.tsx

@@ -239,6 +239,14 @@ const quality = {
     frameRate: 30,
     bitRate: 1380,
   },
+  '720p_7': {
+    dimensions: {
+      width: 1280,
+      height: 720,
+    },
+    frameRate: 30,
+    bitRate: 3000,
+  },
 };
 
 export default quality;

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

@@ -1,25 +1,57 @@
 import React, {useContext} from 'react';
-import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
+import {
+  RenderModeType,
+  RtcSurfaceView,
+  RtcTextureView,
+} from 'react-native-agora';
 import styles from '../Style';
-import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
-import {View, ViewStyle} from 'react-native';
+import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
+import {View, ViewStyle, Platform, ViewProps, StyleSheet} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
-const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
+const LocalView = RtcSurfaceView;
+let RemoteView = RtcSurfaceView;
 
 interface MaxViewInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   fallback?: React.ComponentType;
   containerStyle?: ViewStyle;
+  landscapeMode?: boolean;
+  isFullView?: boolean;
 }
 
+/* 
+RenderModeType :
+Fill: Stretches or zooms to fill the screen, might distort.
+Fit: Fits the entire video without distortion, might have black bars.
+Hidden: Fills the screen, might cut off parts of the video.
+*/
+
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
-  const {containerStyle = {}} = props;
+  const {
+    containerStyle = {},
+    landscapeMode = false,
+    isFullView = false,
+  } = props;
+  let landscapeModeStyle: ViewProps['style'] = {};
+  if (landscapeMode) {
+    //SurfaceView does not support transform
+    //TextureView only applicable to android
+    if (Platform.OS === 'android') {
+      RemoteView = RtcTextureView;
+    }
+    landscapeModeStyle = {
+      flex: 1,
+      alignSelf: 'center',
+      alignItems: 'center',
+      transform: [{rotate: '90deg'}],
+    };
+  }
   const Fallback = props.fallback;
   const localUid = useLocalUid();
+  //@ts-ignore
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   return uid === localUid ? (
     props.user.video ? (
@@ -29,12 +61,17 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           ...(maxViewStyles as object),
           ...containerStyle,
         }}
-        renderMode={VideoRenderMode.Fit}
+        canvas={{
+          renderMode: isFullView
+            ? RenderModeType.RenderModeAdaptive
+            : RenderModeType.RenderModeFit,
+          uid: 0,
+        }}
       />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+      <View style={[style.containerStyle, containerStyle]} />
     )
   ) : props.user.video ? (
     <RemoteView
@@ -42,15 +79,22 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
         ...styles.fullView,
         ...(maxViewStyles as object),
         ...containerStyle,
+        ...landscapeModeStyle,
+      }}
+      canvas={{
+        renderMode: RenderModeType.RenderModeFit,
+        uid: uid as number,
       }}
-      uid={uid as number}
-      renderMode={VideoRenderMode.Fit}
     />
   ) : Fallback ? (
     <Fallback />
   ) : (
-    <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+    <View style={[style.containerStyle, containerStyle]} />
   );
 };
 
 export default MaxVideoView;
+
+const style = StyleSheet.create({
+  containerStyle: {flex: 1, backgroundColor: '#000'},
+});

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

@@ -1,46 +1,74 @@
 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, ViewStyle} from 'react-native';
+
+import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
+
+import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
+import {View, ViewStyle, StyleSheet} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
-const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
+const LocalView = RtcSurfaceView;
+const RemoteView = RtcSurfaceView;
 
 interface MaxViewInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   fallback?: React.ComponentType;
   containerStyle?: ViewStyle;
+  landscapeMode?: boolean;
+  isFullView?: boolean;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
-  const {styleProps, rtcProps} = useContext(PropsContext);
-  const {maxViewStyles} = styleProps || {};
+  const {rtcProps} = useContext(PropsContext);
+
   const Fallback = props.fallback;
-  const {containerStyle = {}} = props;
+  const {
+    containerStyle = {},
+    landscapeMode = false,
+    isFullView = false,
+  } = props;
   const localUid = useLocalUid();
+  //@ts-ignore
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
+  let landscapeModeStyle = {};
+  if (landscapeMode) {
+    landscapeModeStyle = {
+      transform: 'rotate(90deg)',
+      alignSelf: 'center',
+      alignItems: 'center',
+    };
+  }
   return uid === localUid ? (
     props.user.video ? (
-      <LocalView style={containerStyle} renderMode={VideoRenderMode.Fit} />
+      <LocalView
+        style={containerStyle}
+        canvas={{
+          renderMode: isFullView
+            ? RenderModeType.RenderModeAdaptive
+            : RenderModeType.RenderModeFit,
+          uid: 0,
+        }}
+      />
     ) : Fallback ? (
       <Fallback />
     ) : (
-      <View style={[{flex: 1, backgroundColor: '#000'}, containerStyle]} />
+      <View style={[style.containerStyle, containerStyle]} />
     )
   ) : (
     <>
       <div
+        // eslint-disable-next-line react-native/no-inline-styles
         style={{
           flex: 1,
           overflow: 'hidden',
           display: props.user.video ? 'flex' : 'none',
+          ...landscapeModeStyle,
         }}>
         <RemoteView
           style={containerStyle}
-          uid={uid as number}
-          renderMode={VideoRenderMode.Fit}
+          canvas={{
+            renderMode: RenderModeType.RenderModeFit,
+            uid: uid as number,
+          }}
         />
       </div>
       {props.user.video ? (
@@ -50,9 +78,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           {Fallback ? (
             <Fallback />
           ) : (
-            <View
-              style={[{flex: 1, backgroundColor: '#000'}, containerStyle]}
-            />
+            <View style={[style.containerStyle, containerStyle]} />
           )}
         </>
       )}
@@ -61,3 +87,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
 };
 
 export default MaxVideoView;
+
+const style = StyleSheet.create({
+  containerStyle: {flex: 1, backgroundColor: '#000'},
+});