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

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;

package/template/agora-rn-uikit/src/Views/MaxVideoView.native.tsx

@@ -1,23 +1,25 @@
 import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
-import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
 import {View} from 'react-native';
+import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MaxViewInterface {
-  user: UidInterface;
+  user: RenderInterface;
   fallback?: React.ComponentType;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
-  const {styleProps} = useContext(PropsContext);
+  const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
   const Fallback = props.fallback;
-
-  return props.user.uid === 'local' ? (
+  const localUid = useLocalUid();
+  const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
+  return uid === localUid ? (
     props.user.video ? (
       <LocalView
         style={{...styles.fullView, ...(maxViewStyles as object)}}
@@ -31,7 +33,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   ) : props.user.video ? (
     <RemoteView
       style={{...styles.fullView, ...(maxViewStyles as object)}}
-      uid={props.user.uid as number}
+      uid={uid as number}
       renderMode={VideoRenderMode.Fit}
     />
   ) : Fallback ? (

package/template/agora-rn-uikit/src/Views/MaxVideoView.tsx

@@ -1,23 +1,25 @@
 import React, {useContext} from 'react';
 import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
-import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
 import {View} from 'react-native';
+import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MaxViewInterface {
-  user: UidInterface;
+  user: RenderInterface;
   fallback?: React.ComponentType;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
-  const {styleProps} = useContext(PropsContext);
+  const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
   const Fallback = props.fallback;
-
-  return props.user.uid === 'local' ? (
+  const localUid = useLocalUid();
+  const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
+  return uid === localUid ? (
     props.user.video ? (
       <LocalView
         style={{...styles.fullView, ...(maxViewStyles as object)}}
@@ -33,7 +35,7 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
       <div style={{flex: 1, display: props.user.video ? 'flex' : 'none'}}>
         <RemoteView
           style={{...styles.fullView, ...(maxViewStyles as object)}}
-          uid={props.user.uid as number}
+          uid={uid as number}
           renderMode={VideoRenderMode.Fit}
         />
       </div>

package/template/agora-rn-uikit/src/Views/MinVideoView.tsx

@@ -4,29 +4,31 @@ import {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora';
 import styles from '../Style';
 import icons from '../Controls/Icons';
 import RemoteControls from '../Controls/RemoteControls';
-import PropsContext, {UidInterface} from '../Contexts/PropsContext';
+import PropsContext, {RenderInterface} from '../Contexts/PropsContext';
+import useLocalUid from '../Utils/useLocalUid';
 
 const LocalView = RtcLocalView.SurfaceView;
 const RemoteView = RtcRemoteView.SurfaceView;
 
 interface MinViewInterface {
-  user: UidInterface;
+  user: RenderInterface;
   color?: string;
   showOverlay?: boolean;
 }
 
 const MinVideoView: React.FC<MinViewInterface> = (props) => {
   const [overlay, setOverlay] = useState(false);
-  const {styleProps} = useContext(PropsContext);
+  const {styleProps, rtcProps} = useContext(PropsContext);
   const {minViewStyles, theme, remoteBtnStyles} = styleProps || {};
   const {minCloseBtnStyles} = remoteBtnStyles || {};
   const {showOverlay} = props || {};
-
+  const localUid = useLocalUid();
+  const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   return (
     <View style={{margin: 5}}>
       {showOverlay ? (
         <TouchableOpacity onPress={() => setOverlay(true)}>
-          {props.user.uid === 'local' ? (
+          {uid === localUid ? (
             props.user.video ? (
               <LocalView
                 style={{...styles.minView, ...(minViewStyles as object)}}
@@ -34,18 +36,25 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
                 zOrderMediaOverlay={true}
               />
             ) : (
-              <View style={{flex: 1, backgroundColor: '#f0f', ...styles.minView, ...(minViewStyles as object)}} />
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: '#f0f',
+                  ...styles.minView,
+                  ...(minViewStyles as object),
+                }}
+              />
             )
           ) : (
             <RemoteView
               style={{...styles.minView, ...(minViewStyles as object)}}
-              uid={props.user.uid as number}
+              uid={uid as number}
               renderMode={VideoRenderMode.Hidden}
               zOrderMediaOverlay={true}
             />
           )}
         </TouchableOpacity>
-      ) : props.user.uid === 'local' ? (
+      ) : uid === localUid ? (
         <LocalView
           style={{...styles.minView, ...(minViewStyles as object)}}
           renderMode={VideoRenderMode.Hidden}
@@ -54,7 +63,7 @@ const MinVideoView: React.FC<MinViewInterface> = (props) => {
       ) : (
         <RemoteView
           style={{...styles.minView, ...(minViewStyles as object)}}
-          uid={props.user.uid as number}
+          uid={uid as number}
           renderMode={VideoRenderMode.Hidden}
           zOrderMediaOverlay={true}
         />

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

@@ -11,15 +11,10 @@ export {
   LocalContext,
 } from './Contexts/LocalUserContext';
 export {
-  default as MaxUidContext,
-  MaxUidConsumer,
-  MaxUidProvider,
-} from './Contexts/MaxUidContext';
-export {
-  default as MinUidContext,
-  MinUidConsumer,
-  MinUidProvider,
-} from './Contexts/MinUidContext';
+  default as RenderContext,
+  RenderConsumer,
+  RenderProvider,
+} from './Contexts/RenderContext';
 
 export {
   default as PropsContext,
@@ -29,9 +24,11 @@ export {
 
 export {DualStreamMode} from './Contexts/PropsContext';
 
+export {ToggleState} from './Contexts/PropsContext';
+
 export type {
-  UidInterface,
-  ToggleState,
+  DefaultRenderInterface,
+  RenderInterface,
   RtcPropsInterface,
   CallbacksInterface,
   CustomCallbacksInterface,
@@ -46,14 +43,16 @@ export {
   RtcProvider,
 } from './Contexts/RtcContext';
 export type {
+  UidType,
   RtcContextInterface,
   DispatchType,
-  UidStateInterface,
+  RenderStateInterface,
   ActionInterface,
   ActionType,
 } from './Contexts/RtcContext';
 
 export {default as BtnTemplate} from './Controls/BtnTemplate';
+export type {BtnTemplateInterface} from './Controls/BtnTemplate';
 export {default as Endcall} from './Controls/Local/EndCall';
 export {default as FullScreen} from './Controls/Local/FullScreen';
 export {default as LocalAudioMute} from './Controls/Local/LocalAudioMute';
@@ -67,3 +66,4 @@ export {default as RemoteVideoMute} from './Controls/Remote/RemoteVideoMute';
 export {default as RemoteControls} from './Controls/RemoteControls';
 
 export {default as ImageIcon} from './Controls/ImageIcon';
+export {default as useLocalUid} from './Utils/useLocalUid';

package/template/babel.config.js

@@ -10,8 +10,24 @@
 *********************************************
 */
 const configVars = require('./configTransform');
+const getFpePath = require('./fpe.config');
+
 // This file is read only by react native for IOS & Android. Doesn't apply to electron, Web targets
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: [['transform-define', configVars]],
+  plugins: [
+    ['transform-define', configVars],
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ["./"],
+        alias: {
+          "fpe-api/install": "./fpe-api/install.ts",
+          "fpe-api": "./fpe-api/index.ts",
+          "fpe-implementation": "./fpe-implementation/index.ts",
+          "test-fpe": getFpePath()
+        }
+      }
+    ]
+  ],
 };