agora-appbuilder-core 4.0.0 → 4.0.1

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

@@ -4,6 +4,7 @@ import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import {LocalContext} from '../../Contexts/LocalUserContext';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 interface LocalVideoMuteProps {
   btnText?: string;
@@ -16,11 +17,13 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   const {localBtnStyles, remoteBtnStyles} = styleProps || {};
   const {muteLocalVideo} = localBtnStyles || {};
   const {muteRemoteVideo} = remoteBtnStyles || {};
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useContext(LocalContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.video === ToggleState.enabled ? 'videocam' : 'videocamOff'}
       btnText={btnText}
       style={{
@@ -47,7 +50,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
           });
 
           try {
-            await RtcEngine.muteLocalVideoStream(
+            await RtcEngineUnsafe.muteLocalVideoStream(
               localState === ToggleState.enabled ? true : false,
             );
             console.log('muted video', localState);

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

@@ -1,6 +1,5 @@
 import React, {useContext} from 'react';
 import PropsContext from '../../Contexts/PropsContext';
-import RtcContext, {DispatchType} from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 
@@ -8,7 +7,6 @@ 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,28 +1,29 @@
 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 {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = 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={() => {
-        RtcEngine.switchCamera();
+        RtcEngineUnsafe.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 {RenderConsumer} from '../Contexts/RenderContext';
+import {ContentConsumer} from '../Contexts/ContentContext';
 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 ? (
-        <RenderConsumer>
-          {({renderList, activeUids}) => (
+        <ContentConsumer>
+          {({defaultContent, activeUids}) => (
             <View style={{...styles.Controls, top: styles.Controls.top - 100}}>
               <RemoteControls
-                user={renderList[activeUids[0]]}
+                user={defaultContent[activeUids[0]]}
                 showRemoteSwap={false}
               />
             </View>
           )}
-        </RenderConsumer>
+        </ContentConsumer>
       ) : (
         <></>
       )}

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

@@ -4,26 +4,27 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext, {
   ToggleState,
-  RenderInterface,
+  ContentInterface,
 } from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
 
 interface RemoteAudioMuteInterface {
-  user: RenderInterface;
+  user: ContentInterface;
 }
 
 const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = 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={() => {
-        RtcEngine.muteRemoteAudioStream(
+        RtcEngineUnsafe.muteRemoteAudioStream(
           props.user.uid as number,
           props.user.audio === ToggleState.enabled,
         );

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

@@ -4,19 +4,21 @@ 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(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   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,25 +2,26 @@ import React, {useContext} from 'react';
 import useLocalUid from '../../Utils/useLocalUid';
 import PropsContext, {
   ToggleState,
-  RenderInterface,
+  ContentInterface,
 } from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import styles from '../../Style';
 import BtnTemplate from '../BtnTemplate';
 
 interface RemoteVideoMuteInterface {
-  user: RenderInterface;
+  user: ContentInterface;
   rightButton: boolean;
 }
 
 const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
-  const {RtcEngine} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = 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'
       }
@@ -30,7 +31,7 @@ const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
           : {...(muteRemoteVideo as object)}
       }
       onPress={() => {
-        RtcEngine.muteRemoteVideoStream(
+        RtcEngineUnsafe.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, {RenderInterface} from '../Contexts/PropsContext';
+import PropsContext, {ContentInterface} 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: RenderInterface;
+  user: ContentInterface;
 }
 
 const RemoteControls: React.FC<RemoteControlsInterface> = (props) => {

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

@@ -0,0 +1,30 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function ActiveSpeaker(
+  state: ContentStateInterface,
+  action: ActionType<'ActiveSpeaker'>,
+) {
+  let localActiveUids = [...state.activeUids];
+  let pinnedUid = state.pinnedUid;
+  let secondaryPinnedUid = state.secondaryPinnedUid;
+  const activeSpeaker =
+    action?.value && action.value?.length ? action.value[0] : 0;
+  if (activeSpeaker) {
+    const filteredData = localActiveUids?.filter((i) => i !== activeSpeaker);
+    const [first, second, ...remaining] = filteredData;
+    if (pinnedUid && secondaryPinnedUid) {
+      localActiveUids = [first, second, activeSpeaker, ...remaining];
+    } else if (pinnedUid && !secondaryPinnedUid) {
+      localActiveUids = [first, activeSpeaker, second, ...remaining];
+    } else if (!pinnedUid && secondaryPinnedUid) {
+      localActiveUids = [activeSpeaker, second, first, ...remaining];
+    } else {
+      localActiveUids = [activeSpeaker, first, second, ...remaining];
+    }
+    console.log('debugging activeSpeaker ', activeSpeaker, localActiveUids);
+  }
+  return {
+    ...state,
+    activeUids: localActiveUids,
+  };
+}

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

@@ -1,21 +1,22 @@
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteAudio(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'LocalMuteAudio'>,
   localUid: UidType,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    activeSpeaker: state.activeSpeaker,
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
       [localUid]: {
-        ...state.renderList[localUid],
+        ...state.defaultContent[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,21 +1,22 @@
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalMuteVideo(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'LocalMuteVideo'>,
   localUid: UidType,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    activeSpeaker: state.activeSpeaker,
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
       [localUid]: {
-        ...state.renderList[localUid],
+        ...state.defaultContent[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,20 +1,19 @@
 import {
   ActionType,
-  RenderStateInterface,
+  ContentStateInterface,
   UidType,
 } from '../Contexts/RtcContext';
 
 export default function LocalPermissionState(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'LocalPermissionState'>,
   localUid: UidType,
 ) {
-  let stateUpdate: RenderStateInterface = {
-    activeSpeaker: state.activeSpeaker,
-    renderList: {
-      ...state.renderList,
+  let stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
       [localUid]: {
-        ...state.renderList[localUid],
+        ...state.defaultContent[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, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function RemoteAudioStateChanged(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   action: ActionType<'RemoteAudioStateChanged'>,
 ) {
   let audioState: ToggleState;
@@ -12,12 +12,11 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: RenderStateInterface = {
-    activeSpeaker: state.activeSpeaker,
-    renderList: {
-      ...state.renderList,
-      [action.value[0]]: {
-        ...state.renderList[action.value[0]],
+  const stateUpdate: Partial<ContentStateInterface> = {
+    defaultContent: {
+      ...state.defaultContent,
+      [action.value[0] as unknown as number]: {
+        ...state.defaultContent[action.value[0] as unknown as number],
         audio: audioState,
       },
     },

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,28 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
 
 export default function UserPin(
-  state: RenderStateInterface,
+  state: ContentStateInterface,
   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: action?.value && action.value?.length ? action.value[0] : '',
+    pinnedUid,
+    secondaryPinnedUid:
+      pinnedUid === secondaryPinnedUid ? 0 : secondaryPinnedUid,
+    activeUids: localActiveUids,
   };
 }

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

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

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

@@ -8,5 +8,6 @@ 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';