agora-appbuilder-core 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

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

@@ -0,0 +1,10 @@
+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;

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

@@ -46,12 +46,28 @@ 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,
+      },
     };
   } 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,
+      },
     };
   }
 

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

@@ -13,6 +13,7 @@ import PropsContext, {
   DualStreamMode,
 } from './Contexts/PropsContext';
 import {RenderProvider} from './Contexts/RenderContext';
+import {LastJoinedUserProvider} from './Contexts/LastJoinedUserContext';
 import {actionTypeGuard} from './Utils/actionTypeGuard';
 
 import {
@@ -322,7 +323,10 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
                 renderList: uidState.renderList,
                 activeUids: uidState.activeUids,
               }}>
-              {props.children}
+              <LastJoinedUserProvider
+                value={{lastUserJoined: uidState.lastJoinedUser}}>
+                {props.children}
+              </LastJoinedUserProvider>
             </RenderProvider>
           </RtcProvider>
         </Join>

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

@@ -10,6 +10,11 @@ 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,7 +2,11 @@
  * Core contexts
  */
 import {createHook} from 'customization-implementation';
-import {RtcContext, RenderContext} from '../agora-rn-uikit';
+import {
+  RtcContext,
+  RenderContext,
+  LastJoinedUserContext,
+} from '../agora-rn-uikit';
 
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
@@ -15,6 +19,8 @@ export const useRtc = createHook(RtcContext);
  * The Render app state governs the information necessary to render each user content view displayed in the videocall screen.
  */
 export const useRender = createHook(RenderContext);
+
+export const useLastJoinedUser = createHook(LastJoinedUserContext);
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 
 // commented for v1 release

package/template/src/pages/VideoCall.tsx

@@ -205,24 +205,24 @@ const VideoCall: React.FC = () => {
                 <DeviceConfigure>
                   <ChatUIControlProvider>
                     <ChatNotificationProvider>
-                      <SidePanelProvider
+                      <LayoutProvider
                         value={{
-                          sidePanel,
-                          setSidePanel,
+                          currentLayout,
+                          setLayout,
                         }}>
-                        <ChatMessagesProvider>
-                          <ScreenShareProvider>
-                            <RtmConfigure
-                              setRecordingActive={setRecordingActive}
-                              callActive={callActive}>
-                              <UserPreferenceProvider>
-                                <EventsConfigure>
-                                  <WhiteboardProvider>
-                                    <LayoutProvider
-                                      value={{
-                                        currentLayout,
-                                        setLayout,
-                                      }}>
+                        <SidePanelProvider
+                          value={{
+                            sidePanel,
+                            setSidePanel,
+                          }}>
+                          <ChatMessagesProvider>
+                            <ScreenShareProvider>
+                              <RtmConfigure
+                                setRecordingActive={setRecordingActive}
+                                callActive={callActive}>
+                                <UserPreferenceProvider>
+                                  <EventsConfigure>
+                                    <WhiteboardProvider>
                                       <RecordingProvider
                                         value={{
                                           setRecordingActive,
@@ -262,14 +262,14 @@ const VideoCall: React.FC = () => {
                                           </LiveStreamContextProvider>
                                         </ScreenshareConfigure>
                                       </RecordingProvider>
-                                    </LayoutProvider>
-                                  </WhiteboardProvider>
-                                </EventsConfigure>
-                              </UserPreferenceProvider>
-                            </RtmConfigure>
-                          </ScreenShareProvider>
-                        </ChatMessagesProvider>
-                      </SidePanelProvider>
+                                    </WhiteboardProvider>
+                                  </EventsConfigure>
+                                </UserPreferenceProvider>
+                              </RtmConfigure>
+                            </ScreenShareProvider>
+                          </ChatMessagesProvider>
+                        </SidePanelProvider>
+                      </LayoutProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
                 </DeviceConfigure>

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

@@ -13,6 +13,8 @@ import React, {useEffect, useRef} from 'react';
 import KeepAwake from 'react-native-keep-awake';
 import {UidType} from '../../../agora-rn-uikit';
 import {
+  getGridLayoutName,
+  getPinnedLayoutName,
   useChangeDefaultLayout,
   useSetPinnedLayout,
 } from '../../pages/video-call/DefaultLayouts';
@@ -20,11 +22,17 @@ import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
 import events from '../../rtm-events-api';
 import {EventNames, EventActions} from '../../rtm-events';
-import {useRender, useRtc} from 'customization-api';
+import {
+  useLastJoinedUser,
+  useLayout,
+  useRender,
+  useRtc,
+} from 'customization-api';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {dispatch} = useRtc();
   const {renderList, activeUids} = useRender();
+  const {lastUserJoined: lastJoinedUser} = useLastJoinedUser();
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
   // const getScreenShareName = useString('screenshareUserName');
@@ -33,24 +41,43 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const userText = 'User';
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
-
+  const {currentLayout} = useLayout();
   const renderListRef = useRef({renderList: renderList});
+  const currentLayoutRef = useRef({currentLayout: currentLayout});
 
   useEffect(() => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
 
+  useEffect(() => {
+    currentLayoutRef.current.currentLayout = currentLayout;
+  }, [currentLayout]);
+
+  useEffect(() => {
+    if (
+      lastJoinedUser &&
+      lastJoinedUser?.uid &&
+      lastJoinedUser?.type === 'screenshare' &&
+      activeUids &&
+      activeUids.indexOf(lastJoinedUser.uid) !== -1
+    ) {
+      //set to pinned layout
+      triggerChangeLayout(true, lastJoinedUser.uid);
+    }
+  }, [lastJoinedUser, activeUids]);
+
   const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
+    let layout = currentLayoutRef.current.currentLayout;
     //screenshare is started set the layout to Pinned View
     if (pinned && screenShareUid) {
       dispatch({
         type: 'SwapVideo',
         value: [screenShareUid],
       });
-      setPinnedLayout();
+      layout !== getPinnedLayoutName() && setPinnedLayout();
     } else {
       //screenshare is stopped set the layout Grid View
-      changeLayout();
+      layout !== getGridLayoutName() && changeLayout();
     }
   };
 
@@ -74,8 +101,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
               },
             };
           });
-          //if remote user started/stopped the screenshare then change the layout to pinned/grid
-          triggerChangeLayout(true, screenUidOfUser);
           break;
         case EventActions.SCREENSHARE_STOPPED:
           setScreenShareData((prevState) => {

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

@@ -13,6 +13,8 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {PropsContext, UidType} from '../../../agora-rn-uikit';
 import {ScreenshareContext} from './useScreenshare';
 import {
+  getGridLayoutName,
+  getPinnedLayoutName,
   useChangeDefaultLayout,
   useSetPinnedLayout,
 } from '../../pages/video-call/DefaultLayouts';
@@ -24,7 +26,12 @@ import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
 import {timeNow} from '../../rtm/utils';
-import {useRender, useRtc} from 'customization-api';
+import {
+  useLastJoinedUser,
+  useLayout,
+  useRender,
+  useRtc,
+} from 'customization-api';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
@@ -33,6 +40,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const rtc = useRtc();
   const {dispatch} = rtc;
   const {renderList, activeUids} = useRender();
+  const {lastUserJoined: lastJoinedUser} = useLastJoinedUser();
+
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
   const {setScreenShareData, screenShareData} = useScreenContext();
@@ -43,6 +52,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const userText = 'User';
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
+  const {currentLayout} = useLayout();
+  const currentLayoutRef = useRef({currentLayout: currentLayout});
 
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
@@ -53,17 +64,40 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
 
+  useEffect(() => {
+    currentLayoutRef.current.currentLayout = currentLayout;
+  }, [currentLayout]);
+
+  /**
+   * 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
+   */
+  useEffect(() => {
+    if (
+      lastJoinedUser &&
+      lastJoinedUser?.uid &&
+      lastJoinedUser?.type === 'screenshare' &&
+      activeUids &&
+      activeUids.indexOf(lastJoinedUser.uid) !== -1
+    ) {
+      //set to pinned layout
+      triggerChangeLayout(true, lastJoinedUser.uid);
+    }
+  }, [lastJoinedUser, activeUids]);
+
   const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
+    let layout = currentLayoutRef.current.currentLayout;
     //screenshare is started set the layout to Pinned View
     if (pinned && screenShareUid) {
       dispatch({
         type: 'SwapVideo',
         value: [screenShareUid],
       });
-      setPinnedLayout();
+      layout !== getPinnedLayoutName() && setPinnedLayout();
     } else {
       //screenshare is stopped set the layout Grid View
-      changeLayout();
+      layout !== getGridLayoutName() && changeLayout();
     }
   };
 
@@ -87,8 +121,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
               },
             };
           });
-          //if remote user started/stopped the screenshare then change the layout to pinned/grid
-          triggerChangeLayout(true, screenUidOfUser);
           break;
         case EventActions.SCREENSHARE_STOPPED:
           setScreenShareData((prevState) => {
@@ -198,8 +230,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           }),
           EventPersistLevel.LEVEL2,
         );
-        //3 . if local user started the screenshare then change layout to pinned
-        triggerChangeLayout(true, screenShareUid);
       }
     } catch (e) {
       console.error("can't start the screen share", e);