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

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

@@ -10,15 +10,15 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Image, Platform, StyleProp, ViewStyle} from 'react-native';
+import {Image, Platform, ImageStyle} from 'react-native';
 import icons, {IconsInterface} from './Icons';
 import PropsContext from './../Contexts/PropsContext';
 import useImageDelay from '../hooks/useImageDelay';
 import {Either} from './types';
 
 interface BaseInterface {
-  color?: string;
-  style?: StyleProp<ViewStyle>;
+  tintColor?: string;
+  style?: ImageStyle;
 }
 
 interface BaseInterfaceWithName extends BaseInterface {
@@ -35,7 +35,7 @@ const ImageIcon: React.FC<ImageIconInterface> = (props) => {
   const {theme} = styleProps || {};
   const imageRef = React.useRef(null);
 
-  useImageDelay(imageRef, 10, props?.name || '', props?.color);
+  useImageDelay(imageRef, 10, props?.name || '', props?.tintColor);
 
   return (
     <Image
@@ -44,9 +44,9 @@ const ImageIcon: React.FC<ImageIconInterface> = (props) => {
         {
           width: '100%',
           height: '100%',
-          tintColor: props.color || theme || '#fff',
         },
-        props.style as object,
+        props?.tintColor ? {tintColor: props.tintColor} : {},
+        props?.style,
       ]}
       resizeMode={'contain'}
       source={{

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

@@ -3,22 +3,24 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
-interface EndCallProps{
-  btnText?: string
+interface EndCallProps {
+  btnText?: string;
 }
 
 function EndCall(props?: EndCallProps) {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {endCall} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'callEnd'}
       btnText={props?.btnText || 'Hang Up'}
-      color='#FD0845'
+      color="#FD0845"
       style={{...styles.endCall, ...(endCall as object)}}
       onPress={() =>
         dispatch({

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

@@ -3,14 +3,16 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 function FullScreen() {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {fullScreen} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'fullscreen'}
       style={{...styles.localBtn, ...(fullScreen as object)}}
       onPress={() => {

package/template/agora-rn-uikit/src/Controls/Local/LocalAudioMute.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 LocalAudioMuteProps {
   btnText?: string;
@@ -15,11 +16,13 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   const {localBtnStyles, remoteBtnStyles} = styleProps || {};
   const {muteLocalAudio} = localBtnStyles || {};
   const {muteRemoteAudio} = remoteBtnStyles || {};
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useContext(LocalContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       btnText={btnText}
       style={{
@@ -46,7 +49,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
           });
 
           try {
-            await RtcEngine.muteLocalAudioStream(
+            await RtcEngineUnsafe.muteLocalAudioStream(
               localState === ToggleState.enabled,
             );
             // Enable UI

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,20 +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 = {
-    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,20 +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 = {
-    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

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

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,11 +12,11 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: RenderStateInterface = {
-    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,15 +12,16 @@ export default function RemoteVideoStateChanged(
     videoState = ToggleState.enabled;
   }
 
-  const stateUpdate: RenderStateInterface = {
-    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,7 +36,7 @@ export default function UpdateDualStreamMode(
     minUids.forEach(setLowStreamType);
   }
   stateUpdate = {
-    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,
@@ -15,19 +15,29 @@ export default function UserJoined(
   let stateUpdate = {};
   //default type will be rtc
   let typeData = {
-    type: 'rtc',
+    type: '',
   };
-  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],
+  const isExitingUser =
+    state?.activeUids?.indexOf(newUid as unknown as number) !== -1;
+
+  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,
+      audio: isExitingUser
+        ? state?.defaultContent[newUid as unknown as number]?.audio || 0
+        : ToggleState.disabled,
+      video: isExitingUser
+        ? state?.defaultContent[newUid as unknown as number]?.video || 0
+        : ToggleState.disabled,
       streamType: dualStreamMode === DualStreamMode.HIGH ? 'high' : 'low', // Low if DualStreamMode is LOW or DYNAMIC by default,
       ...typeData,
     },
@@ -40,18 +50,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 = {
-      renderList: renderList,
+      defaultContent: defaultContent,
       activeUids: activeUids.reverse(),
       lastJoinedUid: newUid,
     };
   } else {
     //More than one remote
     stateUpdate = {
-      renderList: renderList,
+      defaultContent: defaultContent,
       activeUids: activeUids,
       lastJoinedUid: newUid,
     };