agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/RTMConfigure.tsx

@@ -11,15 +11,19 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import RtmEngine from 'agora-react-native-rtm';
-import {PropsContext, useLocalUid} from '../../agora-rn-uikit';
+import RtmEngine, {RtmChannelAttribute} from 'agora-react-native-rtm';
+import {
+  ContentInterface,
+  DispatchContext,
+  PropsContext,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import ChatContext from './ChatContext';
-import {RtcContext} from '../../agora-rn-uikit';
 import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
-import {isAndroid, isWebInternal} from '../utils/common';
-import {useRender, useRtc} from 'customization-api';
+import {isAndroid, isIOS, isWeb, isWebInternal} from '../utils/common';
+import {useContent, useIsAttendee, useUserName} from 'customization-api';
 import {
   safeJsonParse,
   timeNow,
@@ -27,24 +31,55 @@ import {
   getMessageTime,
   get32BitUid,
 } from '../rtm/utils';
-import {EventUtils, EventsQueue} from '../rtm-events';
-import {EventPersistLevel} from '../rtm-events-api';
+import {EventUtils, EventsQueue, EventNames} from '../rtm-events';
+import events, {PersistanceLevel} from '../rtm-events-api';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
+import SDKEvents from '../utils/SdkEvents';
+import isSDK from '../utils/isSDK';
+import {useAsyncEffect} from '../utils/useAsyncEffect';
+import {
+  WaitingRoomStatus,
+  useRoomInfo,
+} from '../components/room-info/useRoomInfo';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+import {PSTNUserLabel} from '../language/default-labels/videoCallScreenLabels';
+import {controlMessageEnum} from '../components/ChatContext';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {RECORDING_BOT_UID} from '../utils/constants';
 
 export enum UserType {
   ScreenShare = 'screenshare',
 }
 
 const RtmConfigure = (props: any) => {
+  const rtmInitTimstamp = new Date().getTime();
   const localUid = useLocalUid();
   const {callActive} = props;
   const {rtcProps} = useContext(PropsContext);
-  const {RtcEngine, dispatch} = useRtc();
-  const {renderList, activeUids} = useRender();
-  const renderListRef = useRef({renderList: renderList});
+  const {dispatch} = useContext(DispatchContext);
+  const {defaultContent, activeUids} = useContent();
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const activeUidsRef = useRef({activeUids: activeUids});
 
+  const {
+    waitingRoomStatus,
+    data: {isHost},
+  } = useRoomInfo();
+  const waitingRoomStatusRef = useRef({waitingRoomStatus: waitingRoomStatus});
+
+  const isHostRef = useRef({isHost: isHost});
+
+  useEffect(() => {
+    isHostRef.current.isHost = isHost;
+  }, [isHost]);
+
+  useEffect(() => {
+    waitingRoomStatusRef.current.waitingRoomStatus = waitingRoomStatus;
+  }, [waitingRoomStatus]);
+
   /**
    * inside event callback state won't have latest value.
    * so creating ref to access the state
@@ -54,55 +89,70 @@ const RtmConfigure = (props: any) => {
   }, [activeUids]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
-
-  const [login, setLogin] = useState<boolean>(false);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
   const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
 
-  //commented for v1 release
-  // const userText = useString('remoteUserDefaultLabel')();
-  const userText = 'User';
-  const pstnUserLabel = useString('pstnUserLabel')();
-  //commented for v1 release
-  //const getScreenShareName = useString('screenshareUserName');
-  const getScreenShareName = (name: string) => `${name}'s screenshare`;
-
   let engine = useRef<RtmEngine>(null!);
   const timerValueRef: any = useRef(5);
 
   React.useEffect(() => {
     setTotalOnlineUsers(
       Object.keys(
-        filterObject(renderList, ([k, v]) => v?.type === 'rtc' && !v.offline),
+        filterObject(
+          defaultContent,
+          ([k, v]) =>
+            v?.type === 'rtc' &&
+            !v.offline &&
+            activeUids.indexOf(v?.uid) !== -1,
+        ),
       ).length,
     );
-  }, [renderList]);
+  }, [defaultContent]);
 
   React.useEffect(() => {
-    const handBrowserClose = () => {
+    const handBrowserClose = ev => {
+      ev.preventDefault();
+      return (ev.returnValue = 'Are you sure you want to exit?');
+    };
+    const logoutRtm = () => {
       engine.current.leaveChannel(rtcProps.channel);
     };
 
     if (!isWebInternal()) return;
-    window.addEventListener('beforeunload', handBrowserClose);
+    window.addEventListener(
+      'beforeunload',
+      isWeb() && !isSDK() ? handBrowserClose : () => {},
+    );
+
+    window.addEventListener('pagehide', logoutRtm);
     // cleanup this component
     return () => {
-      window.removeEventListener('beforeunload', handBrowserClose);
+      window.removeEventListener(
+        'beforeunload',
+        isWeb() && !isSDK() ? handBrowserClose : () => {},
+      );
+      window.removeEventListener('pagehide', logoutRtm);
     };
   }, []);
 
   const doLoginAndSetupRTM = async () => {
     try {
+      logger.log(LogSource.AgoraSDK, 'API', 'RTM login starts');
       await engine.current.login({
         uid: localUid.toString(),
         token: rtcProps.rtm,
       });
+      logger.log(LogSource.AgoraSDK, 'API', 'RTM login done');
+      RTMEngine.getInstance().setLocalUID(localUid.toString());
+      logger.log(LogSource.AgoraSDK, 'API', 'RTM local Uid set');
       timerValueRef.current = 5;
-      setAttribute();
+      await setAttribute();
+      logger.log(LogSource.AgoraSDK, 'Log', 'RTM setting attribute done');
     } catch (error) {
+      logger.error(LogSource.AgoraSDK, 'Log', 'RTM login failed..Trying again');
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         doLoginAndSetupRTM();
@@ -116,11 +166,35 @@ const RtmConfigure = (props: any) => {
     ];
     try {
       await engine.current.setLocalUserAttributes(rtmAttributes);
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        'RTM setting local user attributes',
+        {
+          attr: rtmAttributes,
+        },
+      );
       timerValueRef.current = 5;
       await joinChannel();
+      logger.log(LogSource.AgoraSDK, 'Log', 'RTM join channel done', {
+        data: rtmAttributes,
+      });
       setHasUserJoinedRTM(true);
       await runQueuedEvents();
+      logger.log(
+        LogSource.AgoraSDK,
+        'Log',
+        'RTM queued events finished running',
+        {
+          attr: rtmAttributes,
+        },
+      );
     } catch (error) {
+      logger.error(
+        LogSource.AgoraSDK,
+        'Log',
+        'RTM setAttribute failed..Trying again',
+      );
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         setAttribute();
@@ -130,10 +204,43 @@ const RtmConfigure = (props: any) => {
 
   const joinChannel = async () => {
     try {
-      await engine.current.joinChannel(rtcProps.channel);
+      if (RTMEngine.getInstance().channelUid !== rtcProps.channel) {
+        await engine.current.joinChannel(rtcProps.channel);
+        logger.log(LogSource.AgoraSDK, 'API', 'RTM joinChannel', {
+          data: rtcProps.channel,
+        });
+        RTMEngine.getInstance().setChannelId(rtcProps.channel);
+        logger.log(
+          LogSource.AgoraSDK,
+          'API',
+          'RTM setChannelId',
+          rtcProps.channel,
+        );
+        logger.debug(
+          LogSource.SDK,
+          'Event',
+          'Emitting rtm joined',
+          rtcProps.channel,
+        );
+        SDKEvents.emit('_rtm-joined', rtcProps.channel);
+      } else {
+        logger.debug(
+          LogSource.AgoraSDK,
+          'Log',
+          'RTM already joined channel skipping',
+          rtcProps.channel,
+        );
+      }
       timerValueRef.current = 5;
       await getMembers();
+      await readAllChannelAttributes();
+      logger.log(LogSource.AgoraSDK, 'Log', 'RTM getMembers done');
     } catch (error) {
+      logger.error(
+        LogSource.AgoraSDK,
+        'Log',
+        'RTM joinChannel failed..Trying again',
+      );
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         joinChannel();
@@ -143,26 +250,55 @@ const RtmConfigure = (props: any) => {
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
 
   const getMembers = async () => {
     try {
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        'RTM getChannelMembersByID(getMembers) start',
+      );
       await engine.current
         .getChannelMembersBychannelId(rtcProps.channel)
-        .then(async (data) => {
+        .then(async data => {
+          logger.log(
+            LogSource.AgoraSDK,
+            'API',
+            'RTM getChannelMembersByID data received',
+            data,
+          );
           await Promise.all(
             data.members.map(async (member: any) => {
               const backoffAttributes = backOff(
                 async () => {
+                  logger.log(
+                    LogSource.AgoraSDK,
+                    'API',
+                    `RTM fetching getUserAttributesByUid for member ${member.uid}`,
+                  );
                   const attr = await engine.current.getUserAttributesByUid(
                     member.uid,
                   );
                   if (!attr || !attr.attributes) {
+                    logger.log(
+                      LogSource.AgoraSDK,
+                      'API',
+                      'RTM attributes for member not found',
+                    );
                     throw attr;
                   }
+                  logger.log(
+                    LogSource.AgoraSDK,
+                    'API',
+                    `RTM getUserAttributesByUid for member ${member.uid} received`,
+                    {
+                      attr,
+                    },
+                  );
                   for (const key in attr.attributes) {
                     if (
                       attr.attributes.hasOwnProperty(key) &&
@@ -176,7 +312,9 @@ const RtmConfigure = (props: any) => {
                 },
                 {
                   retry: (e, idx) => {
-                    console.log(
+                    logger.debug(
+                      LogSource.AgoraSDK,
+                      'Log',
                       `[retrying] Attempt ${idx}. Fetching ${member.uid}'s name`,
                       e,
                     );
@@ -195,7 +333,10 @@ const RtmConfigure = (props: any) => {
                 const userData = {
                   screenUid: screenUid,
                   //below thing for livestreaming
-                  type: 'rtc',
+                  type: uid === parseInt(RECORDING_BOT_UID) ? 'bot' : 'rtc',
+                  uid,
+                  offline: false,
+                  lastMessageTimeStamp: 0,
                 };
                 updateRenderListState(uid, userData);
                 //end- updating user data in rtc
@@ -203,6 +344,7 @@ const RtmConfigure = (props: any) => {
                 //start - updating screenshare data in rtc
                 const screenShareUser = {
                   type: UserType.ScreenShare,
+                  parentUid: uid,
                 };
                 updateRenderListState(screenUid, screenShareUser);
                 //end - updating screenshare data in rtc
@@ -224,12 +366,20 @@ const RtmConfigure = (props: any) => {
                   }
                 }
               } catch (e) {
-                console.error(`Could not retrieve name of ${member.uid}`, e);
+                logger.error(
+                  LogSource.AgoraSDK,
+                  'Log',
+                  `Could not retrieve name of ${member.uid}`,
+                  e,
+                );
               }
             }),
           );
-          setLogin(true);
-          console.log('RTM init done');
+          logger.debug(
+            LogSource.AgoraSDK,
+            'Log',
+            'RTM fetched all data and user attr...RTM init done',
+          );
         });
       timerValueRef.current = 5;
     } catch (error) {
@@ -240,9 +390,47 @@ const RtmConfigure = (props: any) => {
     }
   };
 
+  const readAllChannelAttributes = async () => {
+    try {
+      await engine.current
+        .getChannelAttributes(rtcProps.channel)
+        .then(async data => {
+          for (const [key, value] of Object.entries(data?.attributes)) {
+            const {lastUpdateTs, lastUpdateUserId, value: payloadValue} = value;
+            if (hasJsonStructure(payloadValue as string)) {
+              const data = {
+                evt: key,
+                value: payloadValue,
+              };
+              // TODOSUP: Add the data to queue, dont add same mulitple events, use set so as to not repeat events
+              EventsQueue.enqueue({
+                data: data,
+                uid: lastUpdateUserId,
+                ts: lastUpdateTs,
+              });
+            }
+          }
+          logger.log(
+            LogSource.AgoraSDK,
+            'API',
+            'RTM getChannelAttributes data received',
+            data,
+          );
+        });
+      timerValueRef.current = 5;
+    } catch (error) {
+      setTimeout(async () => {
+        timerValueRef.current = timerValueRef.current + timerValueRef.current;
+        await readAllChannelAttributes();
+      }, timerValueRef.current * 1000);
+    }
+  };
+
   const init = async () => {
+    logger.log(LogSource.AgoraSDK, 'Log', 'RTM creating engine...');
     engine.current = RTMEngine.getInstance().engine;
-    RTMEngine.getInstance().setLoginInfo(localUid.toString(), rtcProps.channel);
+    RTMEngine.getInstance();
+    logger.log(LogSource.AgoraSDK, 'Log', 'RTM engine creation done');
 
     engine.current.on('connectionStateChanged', (evt: any) => {
       //console.log(evt);
@@ -251,12 +439,31 @@ const RtmConfigure = (props: any) => {
       // console.log(evt);
     });
     engine.current.on('channelMemberJoined', (data: any) => {
+      logger.log(LogSource.AgoraSDK, 'Event', 'channelMemberJoined', data);
       const backoffAttributes = backOff(
         async () => {
+          logger.log(
+            LogSource.AgoraSDK,
+            'API',
+            `RTM fetching getUserAttributesByUid for member ${data.uid}`,
+          );
           const attr = await engine.current.getUserAttributesByUid(data.uid);
           if (!attr || !attr.attributes) {
+            logger.log(
+              LogSource.AgoraSDK,
+              'API',
+              'RTM attributes for member not found',
+            );
             throw attr;
           }
+          logger.log(
+            LogSource.AgoraSDK,
+            'API',
+            `RTM getUserAttributesByUid for member ${data.uid} received`,
+            {
+              attr,
+            },
+          );
           for (const key in attr.attributes) {
             if (attr.attributes.hasOwnProperty(key) && attr.attributes[key]) {
               return attr;
@@ -267,7 +474,9 @@ const RtmConfigure = (props: any) => {
         },
         {
           retry: (e, idx) => {
-            console.log(
+            logger.debug(
+              LogSource.AgoraSDK,
+              'Log',
               `[retrying] Attempt ${idx}. Fetching ${data.uid}'s name`,
               e,
             );
@@ -285,7 +494,10 @@ const RtmConfigure = (props: any) => {
           const userData = {
             screenUid: screenUid,
             //below thing for livestreaming
-            type: 'rtc',
+            type: uid === parseInt(RECORDING_BOT_UID) ? 'bot' : 'rtc',
+            uid,
+            offline: false,
+            lastMessageTimeStamp: 0,
           };
           updateRenderListState(uid, userData);
           //end- updating user data in rtc
@@ -293,18 +505,24 @@ const RtmConfigure = (props: any) => {
           //start - updating screenshare data in rtc
           const screenShareUser = {
             type: UserType.ScreenShare,
+            parentUid: uid,
           };
           updateRenderListState(screenUid, screenShareUser);
           //end - updating screenshare data in rtc
         } catch (e) {
-          console.error(`Could not retrieve name of ${data.uid}`, e);
+          logger.error(
+            LogSource.AgoraSDK,
+            'Event',
+            `Failed to retrive name of ${data.uid}`,
+            e,
+          );
         }
       }
       getname();
     });
 
     engine.current.on('channelMemberLeft', (data: any) => {
-      console.log('user left', data);
+      logger.debug(LogSource.AgoraSDK, 'Event', 'channelMemberLeft', data);
       // Chat of left user becomes undefined. So don't cleanup
       const uid = data?.uid ? parseInt(data?.uid) : undefined;
       if (!uid) return;
@@ -315,12 +533,15 @@ const RtmConfigure = (props: any) => {
     });
 
     engine.current.on('messageReceived', (evt: any) => {
-      console.log('CUSTOM_EVENT_API messageReceived: ', evt);
+      logger.debug(LogSource.Events, 'CUSTOM_EVENTS', 'messageReceived', evt);
       const {peerId, ts, text} = evt;
       const [err, msg] = safeJsonParse(text);
       if (err) {
-        console.log(
-          'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'JSON payload incorrect, Error while parsing the payload',
+          err,
         );
       }
 
@@ -331,34 +552,103 @@ const RtmConfigure = (props: any) => {
       try {
         eventDispatcher(msg, sender, timestamp);
       } catch (error) {
-        console.log('error while dispacthing', error);
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'error while dispatching through eventDispatcher',
+          err,
+        );
       }
     });
 
-    engine.current.on('channelMessageReceived', (evt) => {
-      console.log('CUSTOM_EVENT_API channelMessageReceived: ', evt);
+    engine.current.on('channelMessageReceived', evt => {
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'channelMessageReceived',
+        evt,
+      );
 
       const {uid, channelId, text, ts} = evt;
-      const [err, msg] = safeJsonParse(text);
-      if (err) {
-        console.log(
-          'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
-        );
-      }
+      //whiteboard upload
+      if (uid == 1010101) {
+        const [err, res] = safeJsonParse(text);
+        if (err) {
+          logger.error(
+            LogSource.Events,
+            'CUSTOM_EVENTS',
+            'JSON payload incorrect, Error while parsing the payload',
+            err,
+          );
+        }
 
-      const timestamp = getMessageTime(ts);
+        if (res?.data?.data?.images) {
+          LocalEventEmitter.emit(
+            LocalEventsEnum.WHITEBOARD_FILE_UPLOAD,
+            res?.data?.data?.images,
+          );
+        }
+      } else {
+        const [err, msg] = safeJsonParse(text);
+        if (err) {
+          logger.error(
+            LogSource.Events,
+            'CUSTOM_EVENTS',
+            'JSON payload incorrect, Error while parsing the payload',
+            err,
+          );
+        }
 
-      const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
+        const timestamp = getMessageTime(ts);
 
-      if (channelId === rtcProps.channel) {
-        try {
-          eventDispatcher(msg, sender, timestamp);
-        } catch (error) {
-          console.log('error while dispacthing', error);
+        const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
+
+        if (channelId === rtcProps.channel) {
+          try {
+            eventDispatcher(msg, sender, timestamp);
+          } catch (error) {
+            logger.error(
+              LogSource.Events,
+              'CUSTOM_EVENTS',
+              'error while dispatching through eventDispatcher',
+              error,
+            );
+          }
         }
       }
     });
-    doLoginAndSetupRTM();
+
+    engine.current.on(
+      'channelAttributesUpdated',
+      (attributeList: RtmChannelAttribute[]) => {
+        console.log('channel attributes updated', attributeList);
+        try {
+          attributeList.map((attribute: RtmChannelAttribute) => {
+            const {key, value, lastUpdateTs, lastUpdateUserId} = attribute;
+            const timestamp = getMessageTime(lastUpdateTs);
+            const sender = Platform.OS
+              ? get32BitUid(lastUpdateUserId)
+              : parseInt(lastUpdateUserId);
+            eventDispatcher(
+              {
+                evt: key,
+                value,
+              },
+              sender,
+              timestamp,
+            );
+          });
+        } catch (error) {
+          logger.error(
+            LogSource.Events,
+            'CUSTOM_EVENTS',
+            'error while dispatching through eventDispatcher',
+            error,
+          );
+        }
+      },
+    );
+    await doLoginAndSetupRTM();
   };
 
   const runQueuedEvents = async () => {
@@ -368,7 +658,12 @@ const RtmConfigure = (props: any) => {
         await eventDispatcher(currEvt.data, currEvt.uid, currEvt.ts);
       }
     } catch (error) {
-      console.log('CUSTOM_EVENT_API:  error while running queue events', error);
+      logger.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'error while running queue events',
+        error,
+      );
     }
   };
 
@@ -380,37 +675,135 @@ const RtmConfigure = (props: any) => {
     sender: string,
     ts: number,
   ) => {
-    console.log('CUSTOM_EVENT_API: inside eventDispatcher ', data);
-    const {evt, value} = data;
-    // Step 1: Set local attributes
-    if (value?.persistLevel === EventPersistLevel.LEVEL3) {
-      const rtmAttribute = {key: evt, value: value};
-      await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
+    console.debug(
+      LogSource.Events,
+      'CUSTOM_EVENTS',
+      'inside eventDispatcher ',
+      data,
+    );
+
+    let evt = '',
+      value = {};
+
+    if (data.feat === 'WAITING_ROOM') {
+      if (data.etyp === 'REQUEST') {
+        const outputData = {
+          evt: `${data.feat}_${data.etyp}`,
+          payload: JSON.stringify({
+            attendee_uid: data.data.data.attendee_uid,
+            attendee_screenshare_uid: data.data.data.attendee_screenshare_uid,
+          }),
+          persistLevel: 1,
+          source: 'core',
+        };
+        const formattedData = JSON.stringify(outputData);
+        evt = data.feat + '_' + data.etyp; //rename if client side RTM meessage is to be sent for approval
+        value = formattedData;
+      }
+      if (data.etyp === 'RESPONSE') {
+        const outputData = {
+          evt: `${data.feat}_${data.etyp}`,
+          payload: JSON.stringify({
+            approved: data.data.data.approved,
+            channelName: data.data.data.channel_name,
+            mainUser: data.data.data.mainUser,
+            screenShare: data.data.data.screenShare,
+            whiteboard: data.data.data.whiteboard,
+            chat: data.data.data?.chat,
+          }),
+          persistLevel: 1,
+          source: 'core',
+        };
+        const formattedData = JSON.stringify(outputData);
+        evt = data.feat + '_' + data.etyp;
+        value = formattedData;
+      }
+    } else {
+      if (
+        $config.ENABLE_WAITING_ROOM &&
+        !isHostRef.current?.isHost &&
+        waitingRoomStatusRef.current?.waitingRoomStatus !==
+          WaitingRoomStatus.APPROVED
+      ) {
+        if (
+          data.evt === controlMessageEnum.muteAudio ||
+          data.evt === controlMessageEnum.muteVideo
+        ) {
+          return;
+        } else {
+          evt = data.evt;
+          value = data.value;
+        }
+      } else {
+        evt = data.evt;
+        value = data.value;
+      }
     }
-    // Step 2: Emit the event
+
     try {
       const {payload, persistLevel, source} = JSON.parse(value);
-      console.log('CUSTOM_EVENT_API:  emiting event..: ');
+      // Step 1: Set local attributes
+      if (persistLevel === PersistanceLevel.Session) {
+        const rtmAttribute = {key: evt, value: value};
+        await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
+      }
+      // Step 2: Emit the event
+      console.debug(LogSource.Events, 'CUSTOM_EVENTS', 'emiting event..: ');
       EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
+      // Because async gets evaluated in a different order when in an sdk
+      if (evt === 'name') {
+        setTimeout(() => {
+          EventUtils.emitEvent(evt, source, {
+            payload,
+            persistLevel,
+            sender,
+            ts,
+          });
+        }, 200);
+      }
     } catch (error) {
-      console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
+      console.error(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'error while emiting event:',
+        error,
+      );
     }
   };
 
   const end = async () => {
-    callActive
-      ? (RTMEngine.getInstance().destroy(),
-        EventUtils.clear(),
-        setHasUserJoinedRTM(false),
-        // setLogin(false),
-        console.log('RTM cleanup done'))
-      : {};
+    if (!callActive) {
+      return;
+    }
+    await RTMEngine.getInstance().destroy();
+    logger.log(LogSource.AgoraSDK, 'API', 'RTM destroy done');
+    if (isIOS() || isAndroid()) {
+      EventUtils.clear();
+    }
+    setHasUserJoinedRTM(false);
+    logger.debug(LogSource.AgoraSDK, 'Log', 'RTM cleanup done');
   };
 
-  useEffect(() => {
-    callActive ? init() : (console.log('waiting to init RTM'), setLogin(true));
-    return () => {
-      end();
+  useAsyncEffect(async () => {
+    //waiting room attendee -> rtm login will happen on page load
+    if ($config.ENABLE_WAITING_ROOM) {
+      //attendee
+      if (!isHost && !callActive) {
+        await init();
+      }
+      //host
+      if (isHost && callActive) {
+        await init();
+      }
+    }
+    if (!$config.ENABLE_WAITING_ROOM) {
+      //host and attendee
+      if (callActive) {
+        await init();
+      }
+    }
+    return async () => {
+      await end();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rtcProps.channel, rtcProps.appId, callActive]);
@@ -418,12 +811,13 @@ const RtmConfigure = (props: any) => {
   return (
     <ChatContext.Provider
       value={{
+        rtmInitTimstamp,
         hasUserJoinedRTM,
         engine: engine.current,
         localUid: localUid,
         onlineUsersCount,
       }}>
-      {login ? props.children : <></>}
+      {props.children}
     </ChatContext.Provider>
   );
 };