agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

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

@@ -1,46 +1,43 @@
-import {DualStreamMode, UidInterface} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {DualStreamMode} from '../Contexts/PropsContext';
+import {
+  ActionType,
+  RenderStateInterface,
+  UidType,
+} from '../Contexts/RtcContext';
 
 export default function UpdateDualStreamMode(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UpdateDualStreamMode'>,
 ) {
   const newMode = action.value[0];
-  let stateUpdate: UidStateInterface;
+  let renderList = {...state.renderList};
+  let stateUpdate: RenderStateInterface;
+  const setHighStreamType = (uid: UidType) => {
+    renderList[uid].streamType = 'high';
+  };
+
+  const setLowStreamType = (uid: UidType) => {
+    renderList[uid].streamType = 'low';
+  };
+
   if (newMode === DualStreamMode.HIGH) {
     // Update everybody to high
-    const maxStateUpdate: UidInterface[] = state.max.map((user) => ({
-      ...user,
-      streamType: 'high',
-    }));
-    const minStateUpdate: UidInterface[] = state.min.map((user) => ({
-      ...user,
-      streamType: 'high',
-    }));
-    stateUpdate = {min: minStateUpdate, max: maxStateUpdate};
+    state.renderPosition.forEach(setHighStreamType);
   } else if (newMode === DualStreamMode.LOW) {
     // Update everybody to low
-    const maxStateUpdate: UidInterface[] = state.max.map((user) => ({
-      ...user,
-      streamType: 'low',
-    }));
-    const minStateUpdate: UidInterface[] = state.min.map((user) => ({
-      ...user,
-      streamType: 'low',
-    }));
-    stateUpdate = {min: minStateUpdate, max: maxStateUpdate};
+    state.renderPosition.forEach(setLowStreamType);
   } else {
+    const [maxUid, ...minUids] = state.renderPosition;
     // if (newMode === DualStreamMode.DYNAMIC)
     // Max users are high other are low
-    const maxStateUpdate: UidInterface[] = state.max.map((user) => ({
-      ...user,
-      streamType: 'high',
-    }));
-    const minStateUpdate: UidInterface[] = state.min.map((user) => ({
-      ...user,
-      streamType: 'low',
-    }));
-    stateUpdate = {min: minStateUpdate, max: maxStateUpdate};
+    //setting high for maxuid
+    setHighStreamType(maxUid);
+    //setting low for minuids
+    minUids.forEach(setLowStreamType);
   }
+  stateUpdate = {
+    renderList: renderList,
+    renderPosition: [...state.renderPosition],
+  };
   return stateUpdate;
 }

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

@@ -1,47 +1,60 @@
 import {DualStreamMode, ToggleState} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {
+  ActionType,
+  RenderStateInterface,
+  UidType,
+} from '../Contexts/RtcContext';
 
 export default function UserJoined(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserJoined'>,
   dualStreamMode: DualStreamMode,
-  uids: (string | number)[],
+  localUid: UidType,
 ) {
+  const newUid = action.value[0];
   let stateUpdate = {};
-  if (uids.indexOf(action.value[0]) === -1) {
-    //If new user has joined
-    //By default add to minimized
-    let minUpdate = [
-      ...state.min,
-      {
-        uid: action.value[0],
-        audio: ToggleState.disabled,
-        video: ToggleState.disabled,
-        streamType: dualStreamMode === DualStreamMode.HIGH ? 'high' : 'low', // Low if DualStreamMode is LOW or DYNAMIC by default
-      },
-    ];
+  //default type will be rtc
+  let typeData = {
+    type: 'rtc',
+  };
+  if (state.renderList[newUid] && 'type' in state.renderList[newUid]) {
+    typeData.type = state.renderList[newUid].type;
+  }
 
-    if (minUpdate.length === 1 && state.max[0].uid === 'local') {
-      //Only one remote and local is maximized
-      //Change stream type to high if dualStreaMode is DYNAMIC
-      if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        minUpdate[0].streamType = 'high';
-      }
-      //Swap max and min
-      stateUpdate = {
-        max: minUpdate,
-        min: state.max,
-      };
-    } else {
-      //More than one remote
-      stateUpdate = {
-        min: minUpdate,
-      };
+  let renderList: RenderStateInterface['renderList'] = {
+    ...state.renderList,
+    [newUid]: {
+      ...state.renderList[newUid],
+      uid: newUid,
+      audio: ToggleState.disabled,
+      video: ToggleState.disabled,
+      streamType: dualStreamMode === DualStreamMode.HIGH ? 'high' : 'low', // Low if DualStreamMode is LOW or DYNAMIC by default,
+      ...typeData,
+    },
+  };
+  let renderPosition = [...state.renderPosition, newUid];
+  const [maxUid] = renderPosition;
+  if (renderPosition.length === 2 && maxUid === localUid) {
+    //Only one remote and local is maximized
+    //Change stream type to high if dualStreaMode is DYNAMIC
+    if (dualStreamMode === DualStreamMode.DYNAMIC) {
+      renderList[newUid].streamType = 'high';
     }
-
-    console.log('new user joined!\n', state, stateUpdate, {
-      dualStreamMode,
-    });
+    //Swap render positions
+    stateUpdate = {
+      renderList: renderList,
+      renderPosition: renderPosition.reverse(),
+    };
+  } else {
+    //More than one remote
+    stateUpdate = {
+      renderList: renderList,
+      renderPosition: renderPosition,
+    };
   }
+
+  console.log('new user joined!\n', state, stateUpdate, {
+    dualStreamMode,
+  });
   return stateUpdate;
 }

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

@@ -1,20 +1,18 @@
-import {UidInterface} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteAudio(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate = {};
-  const audioMute = (user: UidInterface) => {
-    if (user.uid === action.value[0].uid) {
-      user.audio = action.value[1];
-    }
-    return user;
-  };
-  stateUpdate = {
-    min: state.min.map(audioMute),
-    max: state.max.map(audioMute),
+  let stateUpdate: RenderStateInterface = {
+    renderList: {
+      ...state.renderList,
+      [action.value[0]]: {
+        ...state.renderList[action.value[0]],
+        audio: action.value[1],
+      },
+    },
+    renderPosition: [...state.renderPosition],
   };
   return stateUpdate;
 }

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

@@ -1,20 +1,18 @@
-import {UidInterface} from '../Contexts/PropsContext';
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserMuteRemoteVideo(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate = {};
-  const videoMute = (user: UidInterface) => {
-    if (user.uid === action.value[0].uid) {
-      user.video = action.value[1];
-    }
-    return user;
-  };
-  stateUpdate = {
-    min: state.min.map(videoMute),
-    max: state.max.map(videoMute),
+  let stateUpdate: RenderStateInterface = {
+    renderList: {
+      ...state.renderList,
+      [action.value[0]]: {
+        ...state.renderList[action.value[0]],
+        video: action.value[1],
+      },
+    },
+    renderPosition: [...state.renderPosition],
   };
   return stateUpdate;
 }

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

@@ -1,21 +1,24 @@
-import {ActionType, UidStateInterface} from '../Contexts/RtcContext';
+import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
 
 export default function UserOffline(
-  state: UidStateInterface,
+  state: RenderStateInterface,
   action: ActionType<'UserOffline'>,
 ) {
-  let stateUpdate = {};
-  if (state.max[0].uid === action.value[0]) {
-    //If max has the remote video
-    let minUpdate = [...state.min];
-    stateUpdate = {
-      max: [minUpdate.pop()],
-      min: minUpdate,
-    };
-  } else {
-    stateUpdate = {
-      min: state.min.filter((user) => user.uid !== action.value[0]),
-    };
-  }
+  // let updatedRenderList = {
+  //   ...state.renderList,
+  // };
+  // //don't delete user data from renderlist
+  // //we will update user data with {offline:true} from RTM user left event
+  // if (updatedRenderList[action.value[0]]) {
+  //   delete updatedRenderList[action.value[0]];
+  // }
+  const updatedRenderPosition = [...state.renderPosition].filter(
+    (uid) => uid !== action.value[0],
+  );
+  const stateUpdate: RenderStateInterface = {
+    renderList: state.renderList,
+    renderPosition: updatedRenderPosition,
+  };
+
   return stateUpdate;
 }

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

@@ -24,6 +24,10 @@ const Create = ({
   const {callbacks, rtcProps, mode} = useContext(PropsContext);
   const {geoFencing = true} = rtcProps || {};
   let engine = useRef<RtcEngine>({} as RtcEngine);
+  // commented for v1 release
+  // const beforeCreate = rtcProps?.lifecycle?.useBeforeCreate
+  //   ? rtcProps.lifecycle.useBeforeCreate()
+  //   : null;
   const isVideoEnabledRef = useRef<boolean>(false);
   const firstUpdate = useRef(true);
 
@@ -39,7 +43,7 @@ const Create = ({
         value: [ToggleState.disabled],
       });
     } catch (error) {
-      const {status} = e as any;
+      const {status} = error as any;
       // App Builder web only
       if (status) {
         const {audioError, videoError} = status;
@@ -62,7 +66,7 @@ const Create = ({
           console.error('No video device', videoError);
         }
       }
-      console.error('No devices', e);
+      console.error('No devices', error);
     }
   };
   const enableVideoAndAudioWithEnabledState = async () => {
@@ -121,6 +125,14 @@ const Create = ({
         //Request required permissions from Android
         await requestCameraAndAudioPermission();
       }
+      // commented for v1 release
+      // try {
+      //   if (beforeCreate) {
+      //     await beforeCreate();
+      //   }
+      // } catch (error) {
+      //   console.error('FPE:Error on executing useBeforeCreate', error);
+      // }
       try {
         if (
           geoFencing === true &&
@@ -235,7 +247,14 @@ const Create = ({
     }
     init();
     return () => {
-      engine.current!.destroy();
+      /**
+       * if condition add for websdk issue
+       * For some reason even if engine.current is defined somehow destroy gets undefined and
+       * causes a crash so thats why this check is needed before we call the method
+       */
+      if (engine.current.destroy) {
+        engine.current!.destroy();
+      }
     };
   }, [rtcProps.appId]);
 

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

@@ -1,17 +1,22 @@
 import React, {useEffect, useContext, useRef} from 'react';
 import RtcEngine from 'react-native-agora';
-import {UidStateInterface, DispatchType} from '../Contexts/RtcContext';
+import {RenderStateInterface, DispatchType} from '../Contexts/RtcContext';
 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: UidStateInterface;
+  uidState: RenderStateInterface;
   dispatch: DispatchType;
 }> = ({children, precall, engineRef, uidState, dispatch}) => {
   let joinState = useRef(false);
   const {rtcProps} = useContext(PropsContext);
+  //commented for v1 release
+  // const beforeJoin = rtcProps?.lifecycle?.useBeforeJoin
+  //   ? rtcProps.lifecycle.useBeforeJoin()
+  //   : null;
 
   useEffect(() => {
     const engine = engineRef.current;
@@ -24,7 +29,9 @@ const Join: React.FC<{
         console.error('Cannot leave the channel:', err);
       }
     }
-    const videoState = uidState.max[0].video;
+    const {renderList, renderPosition} = uidState;
+    const [maxUid] = renderPosition;
+    const videoState = renderList[maxUid].video;
     async function join() {
       if (
         rtcProps.encryption &&
@@ -48,6 +55,15 @@ const Join: React.FC<{
           value: [ToggleState.disabled],
         });
       }
+      //commented for v1 release
+      // try {
+      //   if (beforeJoin) {
+      //     await beforeJoin();
+      //   }
+      // } catch (error) {
+      //   console.error('FPE:Error on executing useBeforeJoin', error);
+      // }
+
       await engine.joinChannel(
         rtcProps.token || null,
         rtcProps.channel,