agora-appbuilder-core 4.0.0-api.4 → 4.0.0-api.6

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

@@ -21,10 +21,14 @@ const Create = ({
   children,
 }: {
   dispatch: DispatchType;
-  children: (engine: React.MutableRefObject<RtcEngine>) => JSX.Element;
+  children: (
+    engine: React.MutableRefObject<RtcEngine>,
+    tracksReady: boolean,
+  ) => JSX.Element;
 }) => {
   const mutexLock = useRef(false);
   const [ready, setReady] = useState(false);
+  const [tracksReady, setTracksReady] = useState(false);
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   const {
     geoFencing = true,
@@ -213,13 +217,19 @@ const Create = ({
           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) {
+            //@ts-ignore
+            engine.current = await RtcEngine.createWithAreaCode(
+              rtcProps?.appId,
+              // eslint-disable-next-line no-bitwise
+              //@ts-ignore
+              AreaCode.GLOB ^ AreaCode.CN,
+            );
+          }
         } else {
-          engine.current = await RtcEngine.create(rtcProps.appId);
+          if (rtcProps?.appId) {
+            engine.current = await RtcEngine.create(rtcProps.appId);
+          }
         }
         /* Live Streaming */
         if (mode == ChannelProfile.LiveBroadcasting) {
@@ -235,27 +245,31 @@ const Create = ({
           await engine.current.setChannelProfile(ChannelProfile.Communication);
         }
         if (activeSpeaker) {
-          await engine.current.enableAudioVolumeIndication(500, 3, true);
+          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);
             } 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,
+                });
+              }
             }
           }
         } 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,
@@ -265,6 +279,7 @@ const Create = ({
             //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) {
+              //@ts-ignore
               await engine.current.setEnableSpeakerphone(true);
             }
           }
@@ -285,16 +300,18 @@ const Create = ({
             Platform.OS === 'web'
           )
         ) {
-          await enableVideoAndAudioWithInitialStates();
-          isVideoEnabledRef.current = true;
+          enableVideoAndAudioWithInitialStates().then(() => {
+            setTracksReady(true);
+            isVideoEnabledRef.current = true;
+          });
         }
 
         engine.current.addListener(
           'JoinChannelSuccess',
           async (channel, uid, 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);
@@ -304,10 +321,16 @@ const Create = ({
           },
         );
 
-        engine.current.addListener('UserJoined', (...args) => {
+        engine.current.addListener('UserJoined', async (...args) => {
+          // preventing STT pusher bot in renderlist
+          //@ts-ignore
+          if (args[0] === 111111) {
+            return;
+          }
           //Get current peer IDs
           dispatch({
             type: 'UserJoined',
+            //@ts-ignore
             value: args,
           });
         });
@@ -316,6 +339,7 @@ const Create = ({
           //If user leaves
           dispatch({
             type: 'UserOffline',
+            //@ts-ignore
             value: args,
           });
         });
@@ -323,6 +347,7 @@ const Create = ({
         engine.current.addListener('RemoteAudioStateChanged', (...args) => {
           dispatch({
             type: 'RemoteAudioStateChanged',
+            //@ts-ignore
             value: args,
           });
         });
@@ -334,6 +359,7 @@ const Create = ({
         engine.current.addListener('RemoteVideoStateChanged', (...args) => {
           dispatch({
             type: 'RemoteVideoStateChanged',
+            //@ts-ignore
             value: args,
           });
         });
@@ -426,7 +452,7 @@ const Create = ({
     <>
       {
         // Render children once RTCEngine has been initialized
-        ready && engine ? children(engine) : <></>
+        ready && engine ? children(engine, tracksReady) : <></>
       }
     </>
   );

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

@@ -11,7 +11,9 @@ const Join: React.FC<{
   engineRef: React.MutableRefObject<RtcEngine>;
   uidState: ContentStateInterface;
   dispatch: DispatchType;
-}> = ({children, precall, engineRef, uidState, dispatch}) => {
+  tracksReady: boolean;
+  preventJoin?: boolean;
+}> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
   const {audioRoom = false} = rtcProps;
@@ -21,6 +23,16 @@ const Join: React.FC<{
   //   : null;
 
   useEffect(() => {
+    if (joinState.current && tracksReady && Platform.OS === 'web') {
+      //@ts-ignore
+      engineRef.current.publish();
+    }
+  }, [tracksReady]);
+
+  useEffect(() => {
+    if (rtcProps?.preventJoin) {
+      return;
+    }
     const engine = engineRef.current;
     async function leave() {
       try {
@@ -36,15 +48,21 @@ const Join: React.FC<{
     const videoState = defaultContent[maxUid].video;
     async function join() {
       if (
-        rtcProps.encryption &&
+        rtcProps?.encryption &&
         rtcProps.encryption.key &&
-        rtcProps.encryption.mode
+        rtcProps.encryption.mode &&
+        rtcProps.encryption.salt
       ) {
-        console.log('using channel encryption', rtcProps.encryption);
-        await engine.enableEncryption(true, {
-          encryptionKey: rtcProps.encryption.key,
-          encryptionMode: rtcProps.encryption.mode,
-        });
+        console.log('using channel encryption', rtcProps?.encryption);
+        try {
+          await engine.enableEncryption(true, {
+            encryptionKey: rtcProps?.encryption.key,
+            encryptionMode: rtcProps?.encryption.mode,
+            encryptionKdfSalt: rtcProps?.encryption.salt,
+          });
+        } catch (error) {
+          console.warn('encryption error', error);
+        }
       }
       if (
         !audioRoom &&
@@ -69,13 +87,16 @@ const Join: React.FC<{
       // } catch (error) {
       //   console.error('FPE:Error on executing useBeforeJoin', error);
       // }
-
-      await engine.joinChannel(
-        rtcProps.token || null,
-        rtcProps.channel,
-        null,
-        rtcProps.uid || 0,
-      );
+      try {
+        await engine.joinChannel(
+          rtcProps.token || null,
+          rtcProps.channel,
+          null,
+          rtcProps.uid || 0,
+        );
+      } catch (error) {
+        console.error('RTC joinChannel error', error);
+      }
       if (
         !audioRoom &&
         videoState === ToggleState.enabled &&
@@ -118,6 +139,7 @@ const Join: React.FC<{
     rtcProps.token,
     precall,
     rtcProps.encryption,
+    rtcProps.preventJoin,
   ]);
 
   return <>{children}</>;

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

@@ -4,6 +4,8 @@ import {
   ContentStateInterface,
   ActionType,
   UidType,
+  CustomContentObjects,
+  CustomContentInferface,
 } from './Contexts/RtcContext';
 import {DispatchType} from './Contexts/DispatchContext';
 import PropsContext, {
@@ -30,6 +32,8 @@ import {
   UserMuteRemoteVideo,
   UserOffline,
   UserPin,
+  UserSecondaryPin,
+  ActiveSpeaker,
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
@@ -42,7 +46,9 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
   );
   const localUid = useLocalUid();
-  const initialLocalState: ContentStateInterface = {
+
+  const initialLocalState: Partial<ContentStateInterface> = {
+    customContent: {},
     defaultContent: {
       [localUid]: {
         uid: localUid,
@@ -51,10 +57,13 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
         streamType: 'high',
         type: 'rtc',
         permissionStatus: PermissionState.NOT_REQUESTED,
+        audioForceDisabled: false,
+        videoForceDisabled: false,
       },
     },
     activeUids: [localUid],
     pinnedUid: undefined,
+    secondaryPinnedUid: undefined,
     lastJoinedUid: 0,
   };
 
@@ -100,23 +109,60 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    *
    * 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: ContentStateInterface,
     action: ActionType<'AddCustomContent'>,
   ) => {
     const newState = {
       ...state,
-      activeUids: [...state.activeUids, action.value[0]],
-      defaultContent: {
-        ...state.defaultContent,
+      activeUids: state.activeUids.filter((i) => i === action.value[0])?.length
+        ? [...state.activeUids]
+        : [...state.activeUids, action.value[0]],
+      customContent: {
+        ...state.customContent,
         [action.value[0]]: {
-          ...state.defaultContent[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: ContentStateInterface,
@@ -130,6 +176,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);
@@ -200,6 +251,16 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = UserPin(state, action);
         }
         break;
+      case 'UserSecondaryPin':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UserSecondaryPin(state, action);
+        }
+        break;
+      case 'ActiveSpeaker':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = ActiveSpeaker(state, action);
+        }
+        break;
     }
 
     // TODO: remove Handle event listeners
@@ -248,8 +309,12 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       }
 
       if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        defaultContent[currentMaxUid].streamType = 'low';
-        defaultContent[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
       }
 
@@ -320,14 +385,42 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
   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}
+          preventJoin={rtcProps?.preventJoin}
           engineRef={engineRef}
           uidState={uidState}
-          dispatch={dispatch}>
+          dispatch={dispatch}
+          tracksReady={tracksReady}>
           <DispatchProvider value={{dispatch}}>
             <RtcProvider
               value={{
@@ -336,18 +429,35 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
               }}>
               <ContentProvider
                 value={{
+                  customContent: uidState.customContent,
+                  setCustomContent: setCustomContent,
                   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,
+                      ? [
+                          ...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,
                 }}>
                 {props.children}

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

@@ -2,24 +2,51 @@ import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
 import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
-import {View, ViewStyle} from 'react-native';
+import {
+  View,
+  ViewStyle,
+  useWindowDimensions,
+  Platform,
+  ViewProps,
+} from 'react-native';
 import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
-const RemoteView = RtcRemoteView.SurfaceView;
+let RemoteView = RtcRemoteView.SurfaceView;
 
 interface MaxViewInterface {
   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 {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 = RtcRemoteView.TextureView;
+    }
+    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,7 +56,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           ...(maxViewStyles as object),
           ...containerStyle,
         }}
-        renderMode={VideoRenderMode.Fit}
+        renderMode={isFullView ? VideoRenderMode.FILL : VideoRenderMode.Fit}
       />
     ) : Fallback ? (
       <Fallback />
@@ -42,6 +69,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
         ...styles.fullView,
         ...(maxViewStyles as object),
         ...containerStyle,
+        ...landscapeModeStyle,
       }}
       uid={uid as number}
       renderMode={VideoRenderMode.Fit}

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

@@ -12,18 +12,36 @@ interface MaxViewInterface {
   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 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}
+        renderMode={isFullView ? VideoRenderMode.FILL : VideoRenderMode.Fit}
+      />
     ) : Fallback ? (
       <Fallback />
     ) : (
@@ -36,6 +54,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
           flex: 1,
           overflow: 'hidden',
           display: props.user.video ? 'flex' : 'none',
+          ...landscapeModeStyle,
         }}>
         <RemoteView
           style={containerStyle}

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

@@ -23,6 +23,7 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
   const {minCloseBtnStyles} = remoteBtnStyles || {};
   const {showOverlay} = props || {};
   const localUid = useLocalUid();
+  //@ts-ignore
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   return (
     <View style={{margin: 5}}>
@@ -80,6 +81,7 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
                 height: 25,
                 tintColor: theme || props.color || '#fff',
               }}
+              //@ts-ignore
               source={{uri: icons.close}}
             />
           </TouchableOpacity>