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

package/package.json

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

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

@@ -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/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();
     }
   };