agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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

@@ -1,49 +1,71 @@
-import React, {useEffect, useContext, useRef} from 'react';
-import RtcEngine from 'react-native-agora';
-import {RenderStateInterface, DispatchType} from '../Contexts/RtcContext';
+import React, {useEffect, useContext, useRef, useState} from 'react';
+import {IRtcEngine} from 'react-native-agora';
+import {ContentStateInterface} from '../Contexts/RtcContext';
+import {DispatchType} from '../Contexts/DispatchContext';
 import PropsContext, {ToggleState} from '../Contexts/PropsContext';
 import {Platform} from 'react-native';
 
 const Join: React.FC<{
   children: React.ReactNode;
   precall: boolean;
-  engineRef: React.MutableRefObject<RtcEngine>;
-  uidState: RenderStateInterface;
+  engineRef: React.MutableRefObject<IRtcEngine>;
+  uidState: ContentStateInterface;
   dispatch: DispatchType;
-}> = ({children, precall, engineRef, uidState, dispatch}) => {
-  let joinState = useRef(false);
+  tracksReady: boolean;
+  preventJoin?: boolean;
+}> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
+  const [joinState, setJoinState] = useState(false);
   const {rtcProps} = useContext(PropsContext);
-  const {audioRoom = false} = rtcProps;
+
+  const audioRoom = rtcProps?.audioRoom || false;
   //commented for v1 release
   // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
   //   ? rtcProps.lifecycle.useBeforeJoin()
   //   : null;
 
   useEffect(() => {
+    if (joinState && tracksReady && Platform.OS === 'web') {
+      //@ts-ignore
+      engineRef.current.publish();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tracksReady, joinState]);
+
+  useEffect(() => {
+    if (rtcProps?.preventJoin) {
+      return;
+    }
+
     const engine = engineRef.current;
     async function leave() {
       try {
         console.log('Leaving channel');
         engine.leaveChannel();
-        joinState.current = false;
+        setJoinState(false);
       } catch (err) {
         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 &&
-        rtcProps.encryption.key &&
-        rtcProps.encryption.mode
+        rtcProps?.encryption &&
+        rtcProps?.encryption.key &&
+        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,
-        });
+        try {
+          await engine.enableEncryption(true, {
+            encryptionKey: rtcProps?.encryption.key,
+            encryptionMode: rtcProps?.encryption.mode,
+            encryptionKdfSalt: rtcProps?.encryption.salt,
+            datastreamEncryptionEnabled: true,
+          });
+        } catch (error) {
+          console.warn('encryption error', error);
+        }
       }
       if (
         !audioRoom &&
@@ -68,13 +90,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 || '',
+          rtcProps?.channel || '',
+          rtcProps?.uid || 0,
+          {},
+        );
+      } catch (error) {
+        console.error('RTC joinChannel error', error);
+      }
       if (
         !audioRoom &&
         videoState === ToggleState.enabled &&
@@ -93,14 +118,14 @@ const Join: React.FC<{
     }
     async function init() {
       if (!precall) {
-        if (!joinState.current) {
+        if (!joinState) {
           await join();
-          joinState.current = true;
+          setJoinState(true);
         } else {
           await leave();
           await join();
         }
-        console.log('Attempted join: ', rtcProps.channel);
+        console.log('Attempted join: ', rtcProps?.channel);
       } else {
         console.log('In precall - waiting to join');
       }
@@ -111,12 +136,14 @@ const Join: React.FC<{
         leave();
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    rtcProps.channel,
-    rtcProps.uid,
-    rtcProps.token,
+    rtcProps?.channel,
+    rtcProps?.uid,
+    rtcProps?.token,
     precall,
-    rtcProps.encryption,
+    rtcProps?.encryption,
+    rtcProps?.preventJoin,
   ]);
 
   return <>{children}</>;

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,
+  CustomContentInferface,
 } from './Contexts/RtcContext';
+import {DispatchType} from './Contexts/DispatchContext';
 import PropsContext, {
   ToggleState,
-  RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
+  PermissionState,
+  ChannelProfileType,
+  ClientRoleType,
 } 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,39 @@ import {
   UserMuteRemoteAudio,
   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 {callbacks, rtcProps} = useContext(PropsContext);
+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,
         video: ToggleState.disabled,
         streamType: 'high',
         type: 'rtc',
+        permissionStatus: PermissionState.NOT_REQUESTED,
+        audioForceDisabled: false,
+        videoForceDisabled: false,
       },
     },
-    activeUids: [localUid],
+    activeUids: rtcProps?.recordingBot ? [] : [localUid],
+    pinnedUid: undefined,
+    secondaryPinnedUid: undefined,
     lastJoinedUid: 0,
   };
 
@@ -56,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
    *
@@ -68,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],
         },
       },
@@ -86,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 = {};
@@ -122,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);
@@ -172,6 +230,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 +245,21 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
           stateUpdate = RemoteVideoStateChanged(state, action);
         }
         break;
+      case 'UserPin':
+        if (actionTypeGuard(action, action.type)) {
+          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
@@ -203,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
@@ -230,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
       }
 
@@ -246,7 +328,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
       return {
         activeUids: activeUids,
-        renderList: renderList,
+        defaultContent: defaultContent,
       };
     },
     [dualStreamMode],
@@ -256,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 {};
       }
@@ -280,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
       }
 
@@ -293,40 +375,95 @@ 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);
 
+  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: uidState.activeUids,
-                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;