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

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 &&

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,

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -1,21 +1,18 @@
 import React, {useState, useReducer, useContext, useCallback} from 'react';
 import {
   RtcProvider,
-  UidStateInterface,
+  RenderStateInterface,
   DispatchType,
   ActionType,
+  UidType,
 } from './Contexts/RtcContext';
 import PropsContext, {
   ToggleState,
-  UidInterface,
   RtcPropsInterface,
   CallbacksInterface,
   DualStreamMode,
-  ClientRole,
-  ChannelProfile,
 } from './Contexts/PropsContext';
-import {MinUidProvider} from './Contexts/MinUidContext';
-import {MaxUidProvider} from './Contexts/MaxUidContext';
+import {RenderProvider} from './Contexts/RenderContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
@@ -31,23 +28,25 @@ import {
 } from './Reducer';
 import Create from './Rtc/Create';
 import Join from './Rtc/Join';
+import useLocalUid from './Utils/useLocalUid';
 
-const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
-  const {callbacks, rtcProps, mode} = useContext(PropsContext);
+const RtcConfigure = (props: {children: React.ReactNode}) => {
+  const {callbacks, rtcProps} = useContext(PropsContext);
   let [dualStreamMode, setDualStreamMode] = useState<DualStreamMode>(
     rtcProps?.initialDualStreamMode || DualStreamMode.DYNAMIC,
   );
-
-  const initialLocalState: UidStateInterface = {
-    min: [],
-    max: [
-      {
-        uid: 'local',
+  const localUid = useLocalUid();
+  const initialLocalState: RenderStateInterface = {
+    renderList: {
+      [localUid]: {
+        uid: localUid,
         audio: ToggleState.disabled,
         video: ToggleState.disabled,
         streamType: 'high',
+        type: 'rtc',
       },
-    ],
+    },
+    renderPosition: [localUid],
   };
 
   const [initialState, setInitialState] = React.useState(
@@ -58,14 +57,75 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
     setInitialState(JSON.parse(JSON.stringify(initialLocalState)));
   }, []);
 
+  /**
+   *
+   * @param state RenderStateInterface
+   * @param action ActionType<'UpdateRenderList'>
+   * @returns void
+   *
+   * UpdateRenderList will update the renderlist for given uid
+   *
+   */
+  const UpdateRenderList = (
+    state: RenderStateInterface,
+    action: ActionType<'UpdateRenderList'>,
+  ) => {
+    const newState = {
+      ...state,
+      renderList: {
+        ...state.renderList,
+        [action.value[0]]: {
+          ...state.renderList[action.value[0]],
+          ...action.value[1],
+        },
+      },
+    };
+    return newState;
+  };
+
+  /**
+   *
+   * @param state RenderStateInterface
+   * @param action ActionType<'AddCustomContent'>
+   * @returns void
+   *
+   * AddCustomContent use to add new data into render position and render list
+   */
+  const AddCustomContent = (
+    state: RenderStateInterface,
+    action: ActionType<'AddCustomContent'>,
+  ) => {
+    const newState = {
+      ...state,
+      renderPosition: [...state.renderPosition, action.value[0]],
+      renderList: {
+        ...state.renderList,
+        [action.value[0]]: {
+          ...state.renderList[action.value[0]],
+          ...action.value[1],
+        },
+      },
+    };
+    return newState;
+  };
+
   const reducer = (
-    state: UidStateInterface,
+    state: RenderStateInterface,
     action: ActionType<keyof CallbacksInterface>,
   ) => {
-    let stateUpdate = {},
-      uids = [...state.max, ...state.min].map((u: UidInterface) => u.uid);
+    let stateUpdate = {};
 
     switch (action.type) {
+      case 'AddCustomContent':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = AddCustomContent(state, action);
+        }
+        break;
+      case 'UpdateRenderList':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = UpdateRenderList(state, action);
+        }
+        break;
       case 'UpdateDualStreamMode':
         if (actionTypeGuard(action, action.type)) {
           stateUpdate = UpdateDualStreamMode(state, action);
@@ -73,7 +133,7 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
         break;
       case 'UserJoined':
         if (actionTypeGuard(action, action.type)) {
-          stateUpdate = UserJoined(state, action, dualStreamMode, uids);
+          stateUpdate = UserJoined(state, action, dualStreamMode, localUid);
         }
         break;
       case 'UserOffline':
@@ -86,6 +146,11 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
           stateUpdate = swapVideo(state, action.value[0]);
         }
         break;
+      case 'DequeVideo':
+        if (actionTypeGuard(action, action.type)) {
+          stateUpdate = dequeVideo(state, action.value[0]);
+        }
+        break;
       case 'UserMuteRemoteAudio':
         if (actionTypeGuard(action, action.type)) {
           stateUpdate = UserMuteRemoteAudio(state, action);
@@ -98,12 +163,12 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
         break;
       case 'LocalMuteAudio':
         if (actionTypeGuard(action, action.type)) {
-          stateUpdate = LocalMuteAudio(state, action);
+          stateUpdate = LocalMuteAudio(state, action, localUid);
         }
         break;
       case 'LocalMuteVideo':
         if (actionTypeGuard(action, action.type)) {
-          stateUpdate = LocalMuteVideo(state, action);
+          stateUpdate = LocalMuteVideo(state, action, localUid);
         }
         break;
       case 'RemoteAudioStateChanged':
@@ -137,36 +202,86 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
   };
 
   const swapVideo = useCallback(
-    (state: UidStateInterface, ele: UidInterface) => {
-      let newState: UidStateInterface = {
-        min: [],
-        max: [],
+    (state: RenderStateInterface, newMaxUid: UidType) => {
+      let renderPosition: RenderStateInterface['renderPosition'] = [
+        ...state.renderPosition,
+      ];
+      let renderList: RenderStateInterface['renderList'] = {
+        ...state.renderList,
       };
-      // Remove the minimized element which is being swapped out
-      newState.min = state.min.filter((e) => e !== ele);
+      // Element which is currently maximized
+      const [currentMaxUid] = renderPosition;
 
-      let maxEle = state.max[0]; // Element which is currently maximized
-      let minEle = ele;
+      if (currentMaxUid === newMaxUid) {
+        return {};
+      }
 
       if (dualStreamMode === DualStreamMode.DYNAMIC) {
-        maxEle.streamType = 'low'; // set stream quality to low
-        minEle.streamType = 'high'; // set stream quality to high
-
+        renderList[currentMaxUid].streamType = 'low';
+        renderList[newMaxUid].streamType = 'high';
         // No need to modify the streamType if the mode is not dynamic
       }
 
-      if (maxEle.uid === 'local') {
-        newState.min.unshift(maxEle);
-      } else {
-        newState.min.push(maxEle);
+      /**
+       * old logic for swap
+       * if currentMaxUid === localUid then push newMaxId at first position
+       * else push newMaxUid at last position
+       */
+
+      const newMaxUidOldPosition = renderPosition.findIndex(
+        (i) => i === newMaxUid,
+      );
+
+      renderPosition[0] = newMaxUid;
+      renderPosition[newMaxUidOldPosition] = currentMaxUid;
+
+      return {
+        renderPosition: renderPosition,
+        renderList: renderList,
+      };
+    },
+    [dualStreamMode],
+  );
+
+  /**
+   * deque will
+   */
+  const dequeVideo = useCallback(
+    (state: RenderStateInterface, newMaxUid: UidType) => {
+      let renderPosition: RenderStateInterface['renderPosition'] = [
+        ...state.renderPosition,
+      ];
+      let renderList: RenderStateInterface['renderList'] = {
+        ...state.renderList,
+      };
+      // Element which is currently maximized
+      const [currentMaxUid] = renderPosition;
+
+      if (currentMaxUid === newMaxUid) {
+        return {};
+      }
+
+      if (dualStreamMode === DualStreamMode.DYNAMIC) {
+        renderList[currentMaxUid].streamType = 'low';
+        renderList[newMaxUid].streamType = 'high';
+        // No need to modify the streamType if the mode is not dynamic
       }
-      newState.max = [minEle];
 
-      return newState;
+      const minIds = renderPosition.filter(
+        (uid) => uid !== newMaxUid && uid !== currentMaxUid,
+      );
+
+      renderPosition = [newMaxUid, currentMaxUid, ...minIds];
+
+      return {
+        renderPosition: renderPosition,
+        renderList: renderList,
+      };
     },
     [dualStreamMode],
   );
-  const [uidState, dispatch]: [UidStateInterface, DispatchType] = useReducer(
+
+  const [uidState, dispatch]: [RenderStateInterface, DispatchType] = useReducer(
     reducer,
     initialState,
   );
@@ -185,11 +300,13 @@ const RtcConfigure: React.FC<Partial<RtcPropsInterface>> = (props) => {
               dispatch,
               setDualStreamMode,
             }}>
-            <MaxUidProvider value={uidState.max}>
-              <MinUidProvider value={uidState.min}>
-                {props.children}
-              </MinUidProvider>
-            </MaxUidProvider>
+            <RenderProvider
+              value={{
+                renderList: uidState.renderList,
+                renderPosition: uidState.renderPosition,
+              }}>
+              {props.children}
+            </RenderProvider>
           </RtcProvider>
         </Join>
       )}

package/template/agora-rn-uikit/src/Utils/useLocalUid.ts

@@ -0,0 +1,8 @@
+import {useContext} from 'react';
+import PropsContext from '../Contexts/PropsContext';
+
+const useLocalUid = () => {
+  const {rtcProps} = useContext(PropsContext);
+  return rtcProps?.uid || 0;
+};
+export default useLocalUid;