agora-appbuilder-core 2.3.0-beta.15 → 2.3.0-beta.18

package/package.json

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

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

@@ -258,6 +258,10 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
    */
   const dequeVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
+      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       let renderPosition: RenderStateInterface['renderPosition'] = [
         ...state.renderPosition,
       ];

package/template/fpe-api/components.ts

@@ -46,3 +46,7 @@ export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScree
 
 //Sidepanel buttons
 export {SidePanelButtonsArray} from '../src/subComponents/SidePanelButtons';
+export {
+  ImageIcon as UiKitImageIcon,
+  MaxVideoView as UiKitMaxVideoView,
+} from '../agora-rn-uikit';

package/template/fpe-api/typeDefinition.ts

@@ -19,6 +19,7 @@ import {
 } from '../agora-rn-uikit';
 import {i18nInterface} from '../src/language/i18nTypes';
 import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
+export type {RenderInterface, RenderStateInterface, UidType};
 export type {
   ChatTextInputProps,
   ChatSendButtonProps,

package/template/fpe-api/utils.ts

@@ -57,4 +57,13 @@ export {
 export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
 
 //export common function
-export * from '../src/utils/common';
+export {
+  hasBrandLogo,
+  isAndroid,
+  isArray,
+  isIOS,
+  isValidReactComponent,
+  isWeb,
+  shouldAuthenticate,
+} from '../src/utils/common';
+export {useLocalUid} from '../agora-rn-uikit';

package/template/react-native-toast-message/src/index.js

@@ -353,14 +353,14 @@ class Toast extends Component {
 
     const translateY = animation.interpolate({
       inputRange: [0, 1, 2],
-      outputRange: [0, 1, 0]
+      outputRange
     });
 
     return [
       styles.base,
       styles[position],
       {
-        opacity: translateY
+        transform: [{ translateY }]
       }
     ];
   }
@@ -378,11 +378,7 @@ class Toast extends Component {
       <Animated.View
         testID='animatedView'
         onLayout={this.onLayout}
-        style={[
-          baseStyle,
-          style,
-          { zIndex: 100, display: this.state.isVisible || this.state.inProgress ? 'flex' : 'none' }
-        ]} //added zindex
+        style={[baseStyle, style, { zIndex: 100 }]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}
       </Animated.View>

package/template/react-native-toast-message/src/{index.wsdk.js → index.sdk.tsx}

@@ -381,7 +381,7 @@ class Toast extends Component {
         style={[
           baseStyle,
           style,
-          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none', backgroundColor:'red' }
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none' }
         ]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}

package/template/react-native-toast-message/src/styles.js

@@ -9,7 +9,7 @@ export default StyleSheet.create({
     right: 0
   },
   top: {
-    top: 30
+    top: 0
   },
   bottom: {
     bottom: 0

package/template/react-native-toast-message/src/styles.sdk.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  base: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    right: 0
+  },
+  top: {
+    top: 30
+  },
+  bottom: {
+    bottom: 0
+  }
+});

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -32,14 +32,14 @@ enum ChatMessageActionEnum {
 interface ChatMessagesProviderProps {
   children: React.ReactNode;
 }
-interface messageInterface {
+export interface messageInterface {
   createdTimestamp: number;
   updatedTimestamp?: number;
   msg: string;
   msgId: string;
   isDeleted: boolean;
 }
-interface messageStoreInterface extends messageInterface {
+export interface messageStoreInterface extends messageInterface {
   uid: UidType;
 }
 

package/template/src/components/contexts/ScreenShareContext.tsx

@@ -12,6 +12,7 @@ export interface ScreenShareObjectInterface {
   [key: string | number]: {
     name: string;
     isActive: boolean;
+    ts: number;
   };
 }
 export interface ScreenShareContextInterface {
@@ -33,6 +34,7 @@ const ScreenShareProvider = (props: ScreenShareProviderProps) => {
       [rtcProps?.screenShareUid]: {
         name: '',
         isActive: false,
+        ts: 0,
       },
     });
 

package/template/src/custom-events/types.ts

@@ -15,12 +15,12 @@ interface IEventPayloadBase {
 
 interface IEventPayloadWithoutAttributes extends IEventPayloadBase {
   level?: never;
-  value: string;
+  value: any;
 }
 
 interface IEventPayloadWithAttributes extends IEventPayloadBase {
   level: 2 | 3;
-  value: string;
+  value: any;
 }
 
 export type EventPayload =
@@ -40,7 +40,7 @@ export enum EventLevel {
 interface dataPayload {
   action: string;
   level: 1 | 2 | 3;
-  value: string;
+  value: any;
 }
 interface EvtCbPayload {
   payload: dataPayload;

package/template/src/subComponents/recording/useRecording.tsx

@@ -156,11 +156,17 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 2. set the local recording state to true to update the UI
           setRecordingActive(true);
           // 3. set the presenter mode if screen share is active
-          const activeScreenshareUid = Object.keys(screenShareData).find(
-            (key) => screenShareData[key]?.isActive,
-          );
+          // 3.a Get the most recent screenshare uid
+          const sorted = Object.entries(screenShareData)
+            .filter((el) => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
+            .sort((a, b) => b[1].ts - a[1].ts);
+
+          const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
           if (activeScreenshareUid) {
-            console.log('screenshare: Executing presenter query');
+            console.log(
+              'screenshare: Executing presenter query for screenuid',
+              activeScreenshareUid,
+            );
             executePresenterQuery(parseInt(activeScreenshareUid));
           } else {
             executeNormalQuery();

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -20,7 +20,14 @@ function useRecordingLayoutQuery() {
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
   const {phrase} = useParams<any>();
-
+  /**
+   * @param screenShareUid
+   * Default : Grid
+   * Below query changes the layout to vertical and passed UID is maxed view
+   * This should be called only when screenshare is actively going on
+   * and we want that as the main view
+   * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
+   */
   const executePresenterQuery = (screenShareUid: UidType) => {
     setPresenterQuery({
       variables: {

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

@@ -20,15 +20,7 @@ import useUserList from '../../utils/useUserList';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
 import CustomEvents from '../../custom-events';
-import {EventNames} from '../../rtm-events';
-
-function usePrevious(value: any) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import {EventNames, EventActions} from '../../rtm-events';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const rtc = useContext(RtcContext);
@@ -40,7 +32,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   // const userText = useString('remoteUserDefaultLabel')();
   const getScreenShareName = (name: string) => `${name}'s screenshare`;
   const userText = 'User';
-  const prevRenderPosition = usePrevious({renderPosition});
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
 
@@ -58,9 +49,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         value: [screenShareUid],
       });
       setPinnedLayout();
-    }
-    //screenshare is stopped set the layout Grid View
-    else {
+    } else {
+      //screenshare is stopped set the layout Grid View
       changeLayout();
     }
   };
@@ -69,19 +59,38 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (data?.payload?.action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 

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

@@ -1,3 +1,14 @@
+/*
+********************************************
+ Copyright © 2022 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {RtcContext, PropsContext, UidType} from '../../../agora-rn-uikit';
 import {ScreenshareContext} from './useScreenshare';
@@ -9,18 +20,11 @@ import {useRecording} from '../recording/useRecording';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import useUserList from '../../utils/useUserList';
 import CustomEvents, {EventLevel} from '../../custom-events';
-import {EventNames} from '../../rtm-events';
+import {EventActions, EventNames} from '../../rtm-events';
 import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
-
-function usePrevious<T = any>(value: any) {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import {timeNow} from '../../rtm/utils';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
@@ -67,19 +71,38 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (data?.payload?.action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 
@@ -90,9 +113,20 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       console.log('STOPPED SHARING');
       executeNormalQuery();
       CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-        value: `${false}`,
+        action: EventActions.SCREENSHARE_STOPPED,
+        value: 0,
         level: EventLevel.LEVEL2,
       });
+      setScreenShareData((prevState) => {
+        return {
+          ...prevState,
+          [screenShareUid]: {
+            ...prevState[screenShareUid],
+            isActive: false,
+            ts: 0,
+          },
+        };
+      });
       //if local user stopped the screenshare then change layout to grid
       triggerChangeLayout(false);
     });
@@ -144,12 +178,14 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             [screenShareUid]: {
               name: renderListRef.current.renderList[screenShareUid]?.name,
               isActive: true,
+              ts: timeNow(),
             },
           };
         });
         // 2. Inform everyone in the channel screenshare is actice
         CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-          value: `${true}`,
+          action: EventActions.SCREENSHARE_STARTED,
+          value: timeNow(),
           level: EventLevel.LEVEL2,
         });
         //3 . if local user started the screenshare then change layout to pinned