agora-appbuilder-core 2.3.0-beta.13 → 2.3.0-beta.16

package/package.json

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

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

@@ -32,7 +32,9 @@ export default function UserJoined(
       ...typeData,
     },
   };
-  let renderPosition = [...state.renderPosition, newUid];
+  let renderPosition = state.renderPosition.filter((i) => i === newUid).length
+    ? [...state.renderPosition]
+    : [...state.renderPosition, newUid];
   const [maxUid] = renderPosition;
   if (renderPosition.length === 2 && maxUid === localUid) {
     //Only one remote and local is maximized

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

@@ -203,16 +203,30 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   const swapVideo = 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,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
+        return {};
+      }
+
+      const newMaxUidOldPosition = renderPosition.findIndex(
+        (i) => i === newMaxUid,
+      );
+
+      if (!newMaxUidOldPosition) {
         return {};
       }
 
@@ -228,10 +242,6 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
        * else push newMaxUid at last position
        */
 
-      const newMaxUidOldPosition = renderPosition.findIndex(
-        (i) => i === newMaxUid,
-      );
-
       renderPosition[0] = newMaxUid;
       renderPosition[newMaxUidOldPosition] = currentMaxUid;
 
@@ -248,16 +258,25 @@ 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,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+      if (!(newMaxUid in renderList)) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
         return {};
       }
 

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/RTMConfigure.tsx

@@ -11,7 +11,7 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import RtmEngine, {RtmAttribute} from 'agora-react-native-rtm';
+import RtmEngine from 'agora-react-native-rtm';
 import {PropsContext, useLocalUid} from '../../agora-rn-uikit';
 import ChatContext, {controlMessageEnum} from './ChatContext';
 import {RtcContext} from '../../agora-rn-uikit';
@@ -20,7 +20,6 @@ import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
 import {isAndroid, isWeb} from '../utils/common';
-import StorageContext from './StorageContext';
 import {useRenderContext} from 'fpe-api';
 import {
   safeJsonParse,
@@ -33,8 +32,6 @@ import {
 import {EventUtils, EventsQueue, eventMessageType} from '../rtm-events';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
-import CustomEvents, {EventLevel} from '../custom-events';
-import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 
 export enum UserType {
@@ -139,7 +136,9 @@ const RtmConfigure = (props: any) => {
     try {
       await engine.current.setLocalUserAttributes(rtmAttributes);
       timerValueRef.current = 5;
-      joinChannel();
+      await joinChannel();
+      setHasUserJoinedRTM(true);
+      await runQueuedCustomEvents();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -153,8 +152,6 @@ const RtmConfigure = (props: any) => {
       await engine.current.joinChannel(rtcProps.channel);
       timerValueRef.current = 5;
       await getMembers();
-      setHasUserJoinedRTM(true);
-      await runQueuedCustomEvents();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -446,22 +443,12 @@ const RtmConfigure = (props: any) => {
 
   const runQueuedCustomEvents = async () => {
     try {
-      const eventsInQueue = EventsQueue.printQueue();
-      if (eventsInQueue.length !== 0) {
-        for (const queuedEvents of eventsInQueue) {
-          await customEventDispatcher(
-            queuedEvents.data,
-            queuedEvents.uid,
-            queuedEvents.ts,
-          );
-          // EventsQueue.dequeue();
-        }
+      while (!EventsQueue.isEmpty()) {
+        const currEvt = EventsQueue.dequeue();
+        await customEventDispatcher(currEvt.data, currEvt.uid, currEvt.ts);
       }
     } catch (error) {
-      throw Error(
-        'CUSTOM_EVENTS_API: error while running queued events ',
-        error,
-      );
+      console.log('CUSTOM_EVENT_API:  error while running queue events', error);
     }
   };
 
@@ -486,7 +473,7 @@ const RtmConfigure = (props: any) => {
     }
     // Step 2: Emit the event
     try {
-      console.log('CUSTOM_EVENT_API:  emiting event: ');
+      console.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, {payload, sender, ts});
     } catch (error) {
       console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
@@ -554,8 +541,9 @@ const RtmConfigure = (props: any) => {
 
   const end = async () => {
     callActive
-      ? (await (engine.current as RtmEngine).logout(),
-        await (engine.current as RtmEngine).destroyClient(),
+      ? (RTMEngine.getInstance().destroy(),
+        EventUtils.clear(),
+        setHasUserJoinedRTM(false),
         // setLogin(false),
         console.log('RTM cleanup done'))
       : {};

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;
 }
 
@@ -63,9 +63,20 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const {renderList} = useRenderContext();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
-  const {groupActive, selectedChatUserId, setGroupActive} = useChatUIControl();
-  const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
-    useChatNotification();
+  const {
+    groupActive,
+    selectedChatUserId,
+    setGroupActive,
+    setPrivateActive,
+    setSelectedChatUserId,
+  } = useChatUIControl();
+  const {
+    setUnreadGroupMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadPrivateMessageCount,
+    unreadIndividualMessageCount,
+    setUnreadPrivateMessageCount,
+  } = useChatNotification();
   const [messageStore, setMessageStore] = useState<messageStoreInterface[]>([]);
   const [privateMessageStore, setPrivateMessageStore] = useState<{
     [key: string]: messageStoreInterface[];
@@ -91,18 +102,41 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   }, [selectedChatUserId]);
 
   React.useEffect(() => {
-    const showMessageNotification = (msg: string, uid: string) => {
+    const showMessageNotification = (
+      msg: string,
+      uid: string,
+      isPrivateMessage: boolean = false,
+    ) => {
+      const uidAsNumber = parseInt(uid);
       Toast.show({
         type: 'success',
         text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[parseInt(uid)]?.name
-          ? fromText(renderListRef.current.renderList[parseInt(uid)]?.name)
+        text2: renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
           : '',
         visibilityTime: 1000,
         onPress: () => {
+          if (isPrivateMessage) {
+            setUnreadPrivateMessageCount(
+              unreadPrivateMessageCount -
+                (unreadIndividualMessageCount[uidAsNumber] || 0),
+            );
+            setUnreadIndividualMessageCount((prevState) => {
+              return {
+                ...prevState,
+                [uidAsNumber]: 0,
+              };
+            });
+            setGroupActive(false);
+            setSelectedChatUserId(uidAsNumber);
+            setPrivateActive(true);
+          } else {
+            setUnreadGroupMessageCount(0);
+            setPrivateActive(false);
+            setSelectedChatUserId(0);
+            setGroupActive(true);
+          }
           setSidePanel(SidePanelType.Chat);
-          setUnreadGroupMessageCount(0);
-          setGroupActive(true);
         },
       });
     };
@@ -174,7 +208,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
 
       switch (data?.payload?.action) {
         case ChatMessageActionEnum.Create:
-          showMessageNotification(messageData.msg, data.sender);
+          showMessageNotification(messageData.msg, data.sender, true);
           addMessageToPrivateStore(
             parseInt(data.sender),
             {

package/template/src/pages/VideoCall.tsx

@@ -201,12 +201,12 @@ const VideoCall: React.FC = () => {
                 <DeviceConfigure>
                   <ChatUIControlProvider>
                     <ChatNotificationProvider>
-                      <ChatMessagesProvider>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
+                      <SidePanelProvider
+                        value={{
+                          sidePanel,
+                          setSidePanel,
+                        }}>
+                        <ChatMessagesProvider>
                           <ScreenShareProvider>
                             <RtmConfigure
                               setRecordingActive={setRecordingActive}
@@ -260,8 +260,8 @@ const VideoCall: React.FC = () => {
                               </UserPreferenceProvider>
                             </RtmConfigure>
                           </ScreenShareProvider>
-                        </SidePanelProvider>
-                      </ChatMessagesProvider>
+                        </ChatMessagesProvider>
+                      </SidePanelProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
                 </DeviceConfigure>

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -95,14 +95,13 @@ const VideoCallScreen = () => {
         components.BottombarComponent = data?.components?.videoCall.bottomBar;
       }
 
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall.topBar &&
-      //   typeof data?.components?.videoCall.topBar !== 'object' &&
-      //   isValidReactComponent(data?.components?.videoCall.topBar)
-      // ) {
-      //   components.TopbarComponent = data?.components?.videoCall.topBar;
-      // }
+      if (
+        data?.components?.videoCall.topBar &&
+        typeof data?.components?.videoCall.topBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topBar;
+      }
 
       if (
         data?.components?.videoCall.participantsPanel &&

package/template/src/rtm/RTMEngine.ts

@@ -30,6 +30,11 @@ class RTMEngine {
     await this.engine.createClient($config.APP_ID);
   }
 
+  private async destroyClientInstance() {
+    await this.engine.logout();
+    await this.engine.destroyClient();
+  }
+
   private constructor() {
     if (RTMEngine._instance) {
       return RTMEngine._instance;
@@ -53,6 +58,14 @@ class RTMEngine {
   get channelUid() {
     return this.channelId;
   }
+  destroy() {
+    try {
+      this.destroyClientInstance();
+      RTMEngine._instance = null;
+    } catch (error) {
+      console.log('Error destroying instance error: ', error);
+    }
+  }
 }
 
 export default RTMEngine;

package/template/src/rtm-events/EventUtils.ts

@@ -245,6 +245,9 @@ const EventUtils = (function () {
       }
       return this;
     },
+    clear() {
+      _events = {};
+    },
     // 1. To add multiple listeners
     // addListeners(evt: string, listeners: any) {
     //   if (Array.isArray(listeners)) {

package/template/src/rtm-events/EventsQueue.ts

@@ -27,10 +27,16 @@ const EventsQueue = (function () {
     },
     dequeue() {
       if (_eventsQueue.length == 0) return;
-      _eventsQueue.shift();
+      return _eventsQueue.pop();
     },
-    printQueue() {
-      return _eventsQueue;
+    isEmpty() {
+      return _eventsQueue.length === 0;
+    },
+    size() {
+      return _eventsQueue.length;
+    },
+    clear() {
+      _eventsQueue = [];
     },
   };
 })();

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

@@ -91,7 +91,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
   //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
   const recordingStartedText = (active: boolean) =>
     active ? 'Recording Started' : 'Recording Stopped';
-  const {executePresenterQuery} = useRecordingLayoutQuery();
+  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
   const {screenShareData} = useScreenContext();
 
@@ -156,9 +156,14 @@ 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
-          if (Object.values(screenShareData).some((item) => item.isActive)) {
-            console.log('Executing presenter query');
-            executePresenterQuery();
+          const activeScreenshareUid = Object.keys(screenShareData).find(
+            (key) => screenShareData[key]?.isActive,
+          );
+          if (activeScreenshareUid) {
+            console.log('screenshare: Executing presenter query');
+            executePresenterQuery(parseInt(activeScreenshareUid));
+          } else {
+            executeNormalQuery();
           }
         }
       })

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

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
-import {PropsContext} from '../../../agora-rn-uikit';
+import {UidType} from '../../../agora-rn-uikit';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -19,10 +19,9 @@ const SET_NORMAL = gql`
 function useRecordingLayoutQuery() {
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
-  const {screenShareUid} = useContext(PropsContext).rtcProps;
   const {phrase} = useParams<any>();
 
-  const executePresenterQuery = () => {
+  const executePresenterQuery = (screenShareUid: UidType) => {
     setPresenterQuery({
       variables: {
         uid: screenShareUid,

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

@@ -99,9 +99,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   }, []);
 
   const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (!isScreenActive) {
+    if (isScreenActive) {
+      console.log('screenshare: Executing presenter query');
       // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery();
+      executePresenterQuery(screenShareUid);
     } else {
       // If recording is already going on, stop the recording by executing the graphql query.
       executeNormalQuery();
@@ -134,16 +135,28 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
+
       if (isActive) {
+        // 1. Set local state
+        setScreenShareData((prevState) => {
+          return {
+            ...prevState,
+            [screenShareUid]: {
+              name: renderListRef.current.renderList[screenShareUid]?.name,
+              isActive: true,
+            },
+          };
+        });
+        // 2. Inform everyone in the channel screenshare is actice
         CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
           value: `${true}`,
           level: EventLevel.LEVEL2,
         });
-        //if local user started the screenshare then change layout to pinned
+        //3 . if local user started the screenshare then change layout to pinned
         triggerChangeLayout(true, screenShareUid);
       }
     } catch (e) {
-      console.error("supriya an't start the screen share", e);
+      console.error("can't start the screen share", e);
       executeNormalQuery();
     }
   };