agora-appbuilder-core 3.0.5 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout release/fpe-1.0.0",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout release/fpe-1.0.1",
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/agora-rn-uikit/src/Contexts/RtcContext.tsx

@@ -12,6 +12,7 @@ export interface RenderObjects {
 export interface RenderStateInterface {
   renderList: RenderObjects;
   activeUids: Array<UidType>;
+  lastJoinedUid?: UidType;
 }
 
 export interface ActionInterface<T extends keyof CallbacksInterface> {

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

@@ -46,28 +46,14 @@ export default function UserJoined(
     stateUpdate = {
       renderList: renderList,
       activeUids: activeUids.reverse(),
-      lastJoinedUser: {
-        ...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,
-      },
+      lastJoinedUid: newUid,
     };
   } else {
     //More than one remote
     stateUpdate = {
       renderList: renderList,
       activeUids: activeUids,
-      lastJoinedUser: {
-        ...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,
-      },
+      lastJoinedUid: newUid,
     };
   }
 

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

@@ -13,7 +13,6 @@ import PropsContext, {
   DualStreamMode,
 } from './Contexts/PropsContext';
 import {RenderProvider} from './Contexts/RenderContext';
-import {LastJoinedUserProvider} from './Contexts/LastJoinedUserContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
@@ -48,6 +47,7 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       },
     },
     activeUids: [localUid],
+    lastJoinedUid: 0,
   };
 
   const [initialState, setInitialState] = React.useState(
@@ -322,11 +322,9 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
               value={{
                 renderList: uidState.renderList,
                 activeUids: uidState.activeUids,
+                lastJoinedUid: uidState.lastJoinedUid,
               }}>
-              <LastJoinedUserProvider
-                value={{lastUserJoined: uidState.lastJoinedUser}}>
-                {props.children}
-              </LastJoinedUserProvider>
+              {props.children}
             </RenderProvider>
           </RtcProvider>
         </Join>

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

@@ -10,11 +10,7 @@ export {
   LocalProvider,
   LocalContext,
 } from './Contexts/LocalUserContext';
-export {
-  default as LastJoinedUserContext,
-  LastJoinedUserConsumer,
-  LastJoinedUserProvider,
-} from './Contexts/LastJoinedUserContext';
+
 export {
   default as RenderContext,
   RenderConsumer,

package/template/customization-api/app-state.ts

@@ -2,11 +2,7 @@
  * Core contexts
  */
 import {createHook} from 'customization-implementation';
-import {
-  RtcContext,
-  RenderContext,
-  LastJoinedUserContext,
-} from '../agora-rn-uikit';
+import {RtcContext, RenderContext} from '../agora-rn-uikit';
 
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
@@ -20,7 +16,6 @@ export const useRtc = createHook(RtcContext);
  */
 export const useRender = createHook(RenderContext);
 
-export const useLastJoinedUser = createHook(LastJoinedUserContext);
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 
 // commented for v1 release

package/template/src/subComponents/screenshare/ScreenshareConfigure.native.tsx

@@ -22,17 +22,13 @@ import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
 import events from '../../rtm-events-api';
 import {EventNames, EventActions} from '../../rtm-events';
-import {
-  useLastJoinedUser,
-  useLayout,
-  useRender,
-  useRtc,
-} from 'customization-api';
+import {useLayout, useRender, useRtc} from 'customization-api';
+import {filterObject} from '../../utils';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {dispatch} = useRtc();
-  const {renderList, activeUids} = useRender();
-  const {lastUserJoined: lastJoinedUser} = useLastJoinedUser();
+  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const isPinned = useRef(0);
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
   // const getScreenShareName = useString('screenshareUserName');
@@ -53,29 +49,52 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     currentLayoutRef.current.currentLayout = currentLayout;
   }, [currentLayout]);
 
+  // useEffect(() => {
+  //   if (
+  //     lastJoinedUid &&
+  //     activeUids &&
+  //     activeUids.indexOf(lastJoinedUid) !== -1 &&
+  //     renderListRef.current.renderList[lastJoinedUid] &&
+  //     renderListRef.current.renderList[lastJoinedUid].type === 'screenshare' &&
+  //     isPinned.current !== lastJoinedUid
+  //   ) {
+  //     //set to pinned layout
+  //     //triggerChangeLayout(true, lastJoinedUid);
+  //   }
+  // }, [lastJoinedUid, activeUids, renderListRef.current.renderList]);
+
   useEffect(() => {
-    if (
-      lastJoinedUser &&
-      lastJoinedUser?.uid &&
-      lastJoinedUser?.type === 'screenshare' &&
-      activeUids &&
-      activeUids.indexOf(lastJoinedUser.uid) !== -1
-    ) {
-      //set to pinned layout
-      triggerChangeLayout(true, lastJoinedUser.uid);
+    const data = filterObject(screenShareData, ([k, v]) => v?.isActive);
+    if (data) {
+      const recentScreenshare = Object.keys(data)
+        .map((i) => parseInt(i))
+        .sort((a, b) => {
+          return data[a].ts - data[b].ts;
+        });
+      if (recentScreenshare?.length) {
+        recentScreenshare.reverse();
+        if (
+          isPinned.current !== recentScreenshare[0] &&
+          activeUids.indexOf(recentScreenshare[0]) !== -1
+        ) {
+          triggerChangeLayout(true, recentScreenshare[0]);
+        }
+      }
     }
-  }, [lastJoinedUser, activeUids]);
+  }, [activeUids, screenShareData]);
 
   const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
     let layout = currentLayoutRef.current.currentLayout;
     //screenshare is started set the layout to Pinned View
     if (pinned && screenShareUid) {
+      isPinned.current = screenShareUid;
       dispatch({
         type: 'SwapVideo',
         value: [screenShareUid],
       });
       layout !== getPinnedLayoutName() && setPinnedLayout();
     } else {
+      isPinned.current = 0;
       //screenshare is stopped set the layout Grid View
       layout !== getGridLayoutName() && changeLayout();
     }

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -26,12 +26,8 @@ import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
 import {timeNow} from '../../rtm/utils';
-import {
-  useLastJoinedUser,
-  useLayout,
-  useRender,
-  useRtc,
-} from 'customization-api';
+import {useLayout, useRender, useRtc} from 'customization-api';
+import {filterObject} from '../../utils';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
@@ -39,9 +35,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const [isScreenshareActive, setScreenshareActive] = useState(false);
   const rtc = useRtc();
   const {dispatch} = rtc;
-  const {renderList, activeUids} = useRender();
-  const {lastUserJoined: lastJoinedUser} = useLastJoinedUser();
-
+  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const isPinned = useRef(0);
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
   const {setScreenShareData, screenShareData} = useScreenContext();
@@ -71,31 +66,56 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   /**
    * Event api callback trigger even before screenshare data available in the RTC layer.
    * so instead of calling triggerChangeLayout from the event api call back
-   * listening for rtc layout lastJoinedUser data and if its screenshare then call triggerChangeLayout
+   * listening for rtc layout lastJoinedUid data and if its screenshare then call triggerChangeLayout
+   * lastJoinedUid will be coming from the user joined event
+   * cross check lastJoinedUid data with renderlist
    */
+  // useEffect(() => {
+  //   if (
+  //     lastJoinedUid &&
+  //     activeUids &&
+  //     activeUids.indexOf(lastJoinedUid) !== -1 &&
+  //     renderListRef.current.renderList[lastJoinedUid] &&
+  //     renderListRef.current.renderList[lastJoinedUid].type === 'screenshare' &&
+  //     isPinned.current !== lastJoinedUid
+  //   ) {
+  //     //set to pinned layout
+  //     // triggerChangeLayout(true, lastJoinedUid);
+  //   }
+  // }, [lastJoinedUid, activeUids, renderListRef.current.renderList]);
+
   useEffect(() => {
-    if (
-      lastJoinedUser &&
-      lastJoinedUser?.uid &&
-      lastJoinedUser?.type === 'screenshare' &&
-      activeUids &&
-      activeUids.indexOf(lastJoinedUser.uid) !== -1
-    ) {
-      //set to pinned layout
-      triggerChangeLayout(true, lastJoinedUser.uid);
+    const data = filterObject(screenShareData, ([k, v]) => v?.isActive);
+    if (data) {
+      const recentScreenshare = Object.keys(data)
+        .map((i) => parseInt(i))
+        .sort((a, b) => {
+          return data[a].ts - data[b].ts;
+        });
+      if (recentScreenshare?.length) {
+        recentScreenshare.reverse();
+        if (
+          isPinned.current !== recentScreenshare[0] &&
+          activeUids.indexOf(recentScreenshare[0]) !== -1
+        ) {
+          triggerChangeLayout(true, recentScreenshare[0]);
+        }
+      }
     }
-  }, [lastJoinedUser, activeUids]);
+  }, [activeUids, screenShareData]);
 
   const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
     let layout = currentLayoutRef.current.currentLayout;
     //screenshare is started set the layout to Pinned View
     if (pinned && screenShareUid) {
+      isPinned.current = screenShareUid;
       dispatch({
         type: 'SwapVideo',
         value: [screenShareUid],
       });
       layout !== getPinnedLayoutName() && setPinnedLayout();
     } else {
+      isPinned.current = 0;
       //screenshare is stopped set the layout Grid View
       layout !== getGridLayoutName() && changeLayout();
     }

package/template/agora-rn-uikit/src/Contexts/LastJoinedUserContext.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import {RenderInterface} from './PropsContext';
-
-const LastJoinedUserContext = React.createContext<{
-  lastUserJoined?: RenderInterface;
-}>({});
-
-export const LastJoinedUserProvider = LastJoinedUserContext.Provider;
-export const LastJoinedUserConsumer = LastJoinedUserContext.Consumer;
-export default LastJoinedUserContext;