agora-appbuilder-core 4.0.24 → 4.0.25-beta-2

package/template/agora-rn-uikit/src/Controls/Local/Recording.tsx

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react';
 import PropsContext from '../../Contexts/PropsContext';
+import RtcContext, {DispatchType} from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
@@ -7,6 +8,7 @@ function Recording() {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {recording} = localBtnStyles || {};
+  const {dispatch} = useContext(RtcContext);
 
   return (
     <BtnTemplate

package/template/agora-rn-uikit/src/Controls/Local/SwitchCamera.tsx

@@ -1,29 +1,28 @@
 import React, {useContext} from 'react';
-import PropsContext, {ToggleState} from '../../Contexts/PropsContext';
+import PropsContext,{ToggleState} from '../../Contexts/PropsContext';
 import {LocalContext} from '../../Contexts/LocalUserContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
-interface Props {
-  btnText?: string;
+interface Props{
+  btnText?: string
 }
 
 function SwitchCamera(props?: Props) {
   const {styleProps, callbacks} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {switchCamera} = localBtnStyles || {};
-  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {RtcEngine} = useContext(RtcContext);
   const local = useContext(LocalContext);
   return (
     <BtnTemplate
-      //@ts-ignore
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
-      btnText={props?.btnText || 'Switch'}
+      btnText={props?.btnText ||'Switch'}
       disabled={local.video === ToggleState.enabled ? false : true}
       onPress={() => {
-        RtcEngineUnsafe.switchCamera();
+        RtcEngine.switchCamera();
         callbacks?.SwitchCamera && callbacks.SwitchCamera();
       }}
     />

package/template/agora-rn-uikit/src/Controls/LocalControls.tsx

@@ -6,7 +6,7 @@ import LocalAudioMute from './Local/LocalAudioMute';
 import LocalVideoMute from './Local/LocalVideoMute';
 import SwitchCamera from './Local/SwitchCamera';
 import RemoteControls from './RemoteControls';
-import {ContentConsumer} from '../Contexts/ContentContext';
+import {RenderConsumer} from '../Contexts/RenderContext';
 import PropsContext from '../Contexts/PropsContext';
 import LocalUserContextComponent from '../Contexts/LocalUserContext';
 import useLocalUid from '../Utils/useLocalUid';
@@ -29,16 +29,16 @@ function Controls(props: ControlsPropsInterface) {
         <EndCall />
       </View>
       {showButton ? (
-        <ContentConsumer>
-          {({defaultContent, activeUids}) => (
+        <RenderConsumer>
+          {({renderList, activeUids}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
               <RemoteControls
-                user={defaultContent[activeUids[0]]}
+                user={renderList[activeUids[0]]}
                 showRemoteSwap={false}
               />
             </View>
           )}
-        </ContentConsumer>
+        </RenderConsumer>
       ) : (
         <></>
       )}

package/template/agora-rn-uikit/src/Controls/Remote/RemoteAudioMute.tsx

@@ -4,27 +4,26 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext, {
   ToggleState,
-  ContentInterface,
+  RenderInterface,
 } from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
 
 interface RemoteAudioMuteInterface {
-  user: ContentInterface;
+  user: RenderInterface;
 }
 
 const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
-  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {RtcEngine} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteAudio} = remoteBtnStyles || {};
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
-      //@ts-ignore
       name={props.user.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       style={{...styles.leftRemoteBtn, ...(muteRemoteAudio as object)}}
       onPress={() => {
-        RtcEngineUnsafe.muteRemoteAudioStream(
+        RtcEngine.muteRemoteAudioStream(
           props.user.uid as number,
           props.user.audio === ToggleState.enabled,
         );

package/template/agora-rn-uikit/src/Controls/Remote/RemoteSwap.tsx

@@ -4,21 +4,19 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
-import DispatchContext from '../../Contexts/DispatchContext';
 
 interface RemoteSwapInterface {
   uid: UidType;
 }
 
 const RemoteSwap: React.FC<RemoteSwapInterface> = (props) => {
-  const {dispatch} = useContext(DispatchContext);
+  const {dispatch} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {remoteSwap} = remoteBtnStyles || {};
   const localUid = useLocalUid();
   return (
     <BtnTemplate
-      //@ts-ignore
       name={'remoteSwap'}
       style={
         props.uid !== localUid

package/template/agora-rn-uikit/src/Controls/Remote/RemoteVideoMute.tsx

@@ -2,26 +2,25 @@ import React, {useContext} from 'react';
 import useLocalUid from '../../Utils/useLocalUid';
 import PropsContext, {
   ToggleState,
-  ContentInterface,
+  RenderInterface,
 } from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import styles from '../../Style';
 import BtnTemplate from '../BtnTemplate';
 
 interface RemoteVideoMuteInterface {
-  user: ContentInterface;
+  user: RenderInterface;
   rightButton: boolean;
 }
 
 const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
-  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {RtcEngine} = useContext(RtcContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {muteRemoteVideo} = remoteBtnStyles || {};
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
-      //@ts-ignore
       name={
         props.user.video === ToggleState.enabled ? 'videocam' : 'videocamOff'
       }
@@ -31,7 +30,7 @@ const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
           : {...(muteRemoteVideo as object)}
       }
       onPress={() => {
-        RtcEngineUnsafe.muteRemoteVideoStream(
+        RtcEngine.muteRemoteVideoStream(
           props.user.uid as number,
           props.user.video === ToggleState.enabled, //If enabled, disable or vice-versa
         );

package/template/agora-rn-uikit/src/Controls/RemoteControls.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import PropsContext, {ContentInterface} from '../Contexts/PropsContext';
+import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
 import styles from '../Style';
 import RemoteAudioMute from './Remote/RemoteAudioMute';
 import RemoteSwap from './Remote/RemoteSwap';
@@ -10,7 +10,7 @@ interface RemoteControlsInterface {
   showMuteRemoteVideo?: boolean;
   showMuteRemoteAudio?: boolean;
   showRemoteSwap?: boolean;
-  user: ContentInterface;
+  user: RenderInterface;
 }
 
 const RemoteControls: React.FC<RemoteControlsInterface> = (props) => {

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

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

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

@@ -1,22 +1,21 @@
 import {
   ActionType,
-  ContentStateInterface,
+  RenderStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteAudio(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'LocalMuteAudio'>,
   localUid: UidType,
 ) {
-  let stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
+  let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
       [localUid]: {
-        ...state.defaultContent[localUid],
+        ...state.renderList[localUid],
         audio: action.value[0],
-        audioForceDisabled:
-          action?.value?.length === 2 ? action.value[1] : false,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -1,22 +1,21 @@
 import {
   ActionType,
-  ContentStateInterface,
+  RenderStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteVideo(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'LocalMuteVideo'>,
   localUid: UidType,
 ) {
-  let stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
+  let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
       [localUid]: {
-        ...state.defaultContent[localUid],
+        ...state.renderList[localUid],
         video: action.value[0],
-        videoForceDisabled:
-          action?.value?.length === 2 ? action.value[1] : false,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -1,19 +1,20 @@
 import {
   ActionType,
-  ContentStateInterface,
+  RenderStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalPermissionState(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'LocalPermissionState'>,
   localUid: UidType,
 ) {
-  let stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
+  let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
       [localUid]: {
-        ...state.defaultContent[localUid],
+        ...state.renderList[localUid],
         permissionStatus: action.value[0],
       },
     },

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

@@ -1,8 +1,8 @@
 import {ToggleState} from '../Contexts/PropsContext';
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function RemoteAudioStateChanged(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'RemoteAudioStateChanged'>,
 ) {
   let audioState: ToggleState;
@@ -12,11 +12,12 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
-      [action.value[0] as unknown as number]: {
-        ...state.defaultContent[action.value[0] as unknown as number],
+  const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
+      [action.value[0]]: {
+        ...state.renderList[action.value[0]],
         audio: audioState,
       },
     },

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

@@ -1,8 +1,8 @@
 import {ToggleState} from '../Contexts/PropsContext';
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function RemoteVideoStateChanged(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'RemoteVideoStateChanged'>,
 ) {
   let videoState: ToggleState;
@@ -12,16 +12,16 @@ export default function RemoteVideoStateChanged(
     videoState = ToggleState.enabled;
   }
 
-  const stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
-      [action.value[0] as unknown as number]: {
-        ...state.defaultContent[action.value[0] as unknown as number],
+  const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
+      [action.value[0]]: {
+        ...state.renderList[action.value[0]],
         video:
-          //@ts-ignore
           videoState !== undefined
             ? videoState
-            : state.defaultContent[action.value[0] as unknown as number].video,
+            : state.renderList[action.value[0]].video,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -1,23 +1,23 @@
 import {DualStreamMode} from '../Contexts/PropsContext';
 import {
   ActionType,
-  ContentStateInterface,
+  RenderStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function UpdateDualStreamMode(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UpdateDualStreamMode'>,
 ) {
   const newMode = action.value[0];
-  let defaultContent = {...state.defaultContent};
-  let stateUpdate: Partial<ContentStateInterface>;
+  let renderList = {...state.renderList};
+  let stateUpdate: RenderStateInterface;
   const setHighStreamType = (uid: UidType) => {
-    defaultContent[uid].streamType = 'high';
+    renderList[uid].streamType = 'high';
   };
 
   const setLowStreamType = (uid: UidType) => {
-    defaultContent[uid].streamType = 'low';
+    renderList[uid].streamType = 'low';
   };
 
   if (newMode === DualStreamMode.HIGH) {
@@ -36,7 +36,8 @@ export default function UpdateDualStreamMode(
     minUids.forEach(setLowStreamType);
   }
   stateUpdate = {
-    defaultContent: defaultContent,
+    activeSpeaker: state.activeSpeaker,
+    renderList: renderList,
     activeUids: [...state.activeUids],
   };
   return stateUpdate;

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

@@ -1,12 +1,12 @@
 import {DualStreamMode, ToggleState} from '../Contexts/PropsContext';
 import {
   ActionType,
-  ContentStateInterface,
+  RenderStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function UserJoined(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserJoined'>,
   dualStreamMode: DualStreamMode,
   localUid: UidType,
@@ -17,17 +17,14 @@ export default function UserJoined(
   let typeData = {
     type: 'rtc',
   };
-  if (
-    state.defaultContent[newUid as unknown as number] &&
-    'type' in state.defaultContent[newUid as unknown as number]
-  ) {
-    typeData.type = state.defaultContent[newUid as unknown as number].type;
+  if (state.renderList[newUid] && 'type' in state.renderList[newUid]) {
+    typeData.type = state.renderList[newUid].type;
   }
 
-  let defaultContent: ContentStateInterface['defaultContent'] = {
-    ...state.defaultContent,
-    [newUid as unknown as number]: {
-      ...state.defaultContent[newUid as unknown as number],
+  let renderList: RenderStateInterface['renderList'] = {
+    ...state.renderList,
+    [newUid]: {
+      ...state.renderList[newUid],
       uid: newUid,
       audio: ToggleState.disabled,
       video: ToggleState.disabled,
@@ -43,18 +40,20 @@ export default function UserJoined(
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
-      defaultContent[newUid as unknown as number].streamType = 'high';
+      renderList[newUid].streamType = 'high';
     }
     //Swap render positions
     stateUpdate = {
-      defaultContent: defaultContent,
+      activeSpeaker: state.activeSpeaker,
+      renderList: renderList,
       activeUids: activeUids.reverse(),
       lastJoinedUid: newUid,
     };
   } else {
     //More than one remote
     stateUpdate = {
-      defaultContent: defaultContent,
+      activeSpeaker: state.activeSpeaker,
+      renderList: renderList,
       activeUids: activeUids,
       lastJoinedUid: newUid,
     };

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

@@ -1,14 +1,15 @@
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteAudio(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
+  let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
       [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+        ...state.renderList[action.value[0]],
         audio: action.value[1],
       },
     },

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

@@ -1,14 +1,15 @@
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteVideo(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: {
-      ...state.defaultContent,
+  let stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: {
+      ...state.renderList,
       [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+        ...state.renderList[action.value[0]],
         video: action.value[1],
       },
     },

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

@@ -1,11 +1,11 @@
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserOffline(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserOffline'>,
 ) {
   // let updatedRenderList = {
-  //   ...state.defaultContent,
+  //   ...state.renderList,
   // };
   // //don't delete user data from renderlist
   // //we will update user data with {offline:true} from RTM user left event
@@ -15,8 +15,9 @@ export default function UserOffline(
   const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
-  const stateUpdate: Partial<ContentStateInterface> = {
-    defaultContent: state.defaultContent,
+  const stateUpdate: RenderStateInterface = {
+    activeSpeaker: state.activeSpeaker,
+    renderList: state.renderList,
     activeUids: updatedActiveUids,
   };
 

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

@@ -1,28 +1,11 @@
-import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserPin(
-  state: ContentStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserPin'>,
 ) {
-  let localActiveUids = [...state.activeUids];
-  let secondaryPinnedUid = state.secondaryPinnedUid;
-  const pinnedUid =
-    action?.value && action.value?.length ? action.value[0] : '';
-  if (pinnedUid) {
-    const filteredData = localActiveUids?.filter(
-      (i) => i !== pinnedUid && i !== secondaryPinnedUid,
-    );
-    if (secondaryPinnedUid && secondaryPinnedUid !== pinnedUid) {
-      filteredData.unshift(secondaryPinnedUid);
-    }
-    filteredData.unshift(pinnedUid);
-    localActiveUids = filteredData;
-  }
   return {
     ...state,
-    pinnedUid,
-    secondaryPinnedUid:
-      pinnedUid === secondaryPinnedUid ? 0 : secondaryPinnedUid,
-    activeUids: localActiveUids,
+    pinnedUid: action?.value && action.value?.length ? action.value[0] : '',
   };
 }

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

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