agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/components/RTMConfigure.tsx

@@ -22,8 +22,8 @@ import ChatContext from './ChatContext';
 import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
-import {isAndroid, isWeb, isWebInternal} from '../utils/common';
-import {useContent} from 'customization-api';
+import {isAndroid, isIOS, isWeb, isWebInternal} from '../utils/common';
+import {useContent, useIsAttendee, useUserName} from 'customization-api';
 import {
   safeJsonParse,
   timeNow,
@@ -31,11 +31,22 @@ import {
   getMessageTime,
   get32BitUid,
 } from '../rtm/utils';
-import {EventUtils, EventsQueue} from '../rtm-events';
-import {PersistanceLevel} 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';
 export enum UserType {
   ScreenShare = 'screenshare',
 }
@@ -50,6 +61,22 @@ const RtmConfigure = (props: any) => {
   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
@@ -62,19 +89,9 @@ const RtmConfigure = (props: any) => {
     defaultContentRef.current.defaultContent = defaultContent;
   }, [defaultContent]);
 
-  const [login, setLogin] = useState<boolean>(false);
-
   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);
 
@@ -83,14 +100,17 @@ const RtmConfigure = (props: any) => {
       Object.keys(
         filterObject(
           defaultContent,
-          ([k, v]) => v?.type === 'rtc' && !v.offline,
+          ([k, v]) =>
+            v?.type === 'rtc' &&
+            !v.offline &&
+            activeUids.indexOf(v?.uid) !== -1,
         ),
       ).length,
     );
   }, [defaultContent]);
 
   React.useEffect(() => {
-    const handBrowserClose = (ev) => {
+    const handBrowserClose = ev => {
       ev.preventDefault();
       return (ev.returnValue = 'Are you sure you want to exit?');
     };
@@ -101,7 +121,7 @@ const RtmConfigure = (props: any) => {
     if (!isWebInternal()) return;
     window.addEventListener(
       'beforeunload',
-      isWeb() ? handBrowserClose : () => {},
+      isWeb() && !isSDK() ? handBrowserClose : () => {},
     );
 
     window.addEventListener('pagehide', logoutRtm);
@@ -109,7 +129,7 @@ const RtmConfigure = (props: any) => {
     return () => {
       window.removeEventListener(
         'beforeunload',
-        isWeb() ? handBrowserClose : () => {},
+        isWeb() && !isSDK() ? handBrowserClose : () => {},
       );
       window.removeEventListener('pagehide', logoutRtm);
     };
@@ -123,7 +143,7 @@ const RtmConfigure = (props: any) => {
       });
       RTMEngine.getInstance().setLocalUID(localUid.toString());
       timerValueRef.current = 5;
-      setAttribute();
+      await setAttribute();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -155,6 +175,8 @@ const RtmConfigure = (props: any) => {
       if (RTMEngine.getInstance().channelUid !== rtcProps.channel) {
         await engine.current.joinChannel(rtcProps.channel);
         RTMEngine.getInstance().setChannelId(rtcProps.channel);
+        console.log('Emitting rtm joined');
+        SDKEvents.emit('_rtm-joined', rtcProps.channel);
       } else {
         console.log('RTM already joined channel skipping');
       }
@@ -179,7 +201,7 @@ const RtmConfigure = (props: any) => {
     try {
       await engine.current
         .getChannelMembersBychannelId(rtcProps.channel)
-        .then(async (data) => {
+        .then(async data => {
           await Promise.all(
             data.members.map(async (member: any) => {
               const backoffAttributes = backOff(
@@ -259,7 +281,7 @@ const RtmConfigure = (props: any) => {
               }
             }),
           );
-          setLogin(true);
+
           console.log('RTM init done');
         });
       timerValueRef.current = 5;
@@ -370,30 +392,46 @@ const RtmConfigure = (props: any) => {
       }
     });
 
-    engine.current.on('channelMessageReceived', (evt) => {
+    engine.current.on('channelMessageReceived', evt => {
       console.log('CUSTOM_EVENT_API 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) {
+          console.log(
+            'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
+          );
+        }
+        if (res?.data?.data?.images) {
+          LocalEventEmitter.emit(
+            LocalEventsEnum.WHITEBOARD_FILE_UPLOAD,
+            res?.data?.data?.images,
+          );
+        }
+      } else {
+        const [err, msg] = safeJsonParse(text);
+        if (err) {
+          console.log(
+            'CUSTOM_EVENT_API: JSON payload incorrect, Error while parsing the payload',
+          );
+        }
 
-      const timestamp = getMessageTime(ts);
+        const timestamp = getMessageTime(ts);
 
-      const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
+        const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
 
-      if (channelId === rtcProps.channel) {
-        try {
-          eventDispatcher(msg, sender, timestamp);
-        } catch (error) {
-          console.log('error while dispacthing', error);
+        if (channelId === rtcProps.channel) {
+          try {
+            eventDispatcher(msg, sender, timestamp);
+          } catch (error) {
+            console.log('error while dispacthing', error);
+          }
         }
       }
     });
-    doLoginAndSetupRTM();
+    await doLoginAndSetupRTM();
   };
 
   const runQueuedEvents = async () => {
@@ -416,15 +454,71 @@ const RtmConfigure = (props: any) => {
     ts: number,
   ) => {
     console.log('CUSTOM_EVENT_API: inside eventDispatcher ', data);
-    const {evt, value} = data;
-    // Step 1: Set local attributes
-    if (value?.persistLevel === PersistanceLevel.Session) {
-      const rtmAttribute = {key: evt, value: value};
-      await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
+    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,
+          }),
+          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);
+      // 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.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
       // Because async gets evaluated in a different order when in an sdk
@@ -444,19 +538,37 @@ const RtmConfigure = (props: any) => {
   };
 
   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();
+    if (isIOS() || isAndroid()) {
+      EventUtils.clear();
+    }
+    setHasUserJoinedRTM(false);
+    console.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]);
@@ -470,7 +582,7 @@ const RtmConfigure = (props: any) => {
         localUid: localUid,
         onlineUsersCount,
       }}>
-      {login ? props.children : <></>}
+      {props.children}
     </ChatContext.Provider>
   );
 };

package/template/src/components/Rightbar.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
 import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {CustomToolbarSort} from '../utils/common';
 
 const defaultStartItems: ToolbarCustomItem[] = [];
 const defaultCenterItems: ToolbarCustomItem[] = [];
@@ -32,17 +33,17 @@ const Rightbar = (props: RightbarProps) => {
   const customStartItems = customItems
     ?.filter((i) => i?.align === 'start' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customCenterItems = customItems
     ?.filter((i) => i?.align === 'center' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customEndItems = customItems
     ?.filter((i) => i?.align === 'end' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const renderContent = (
     items: ToolbarCustomItem[],

package/template/src/components/Router.electron.ts

@@ -17,5 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
   Prompt,
 } from 'react-router-dom';

package/template/src/components/Router.native.ts

@@ -18,5 +18,6 @@ export {
   useHistory,
   useParams,
   BackButton,
+  useLocation,
   Prompt,
 } from 'react-router-native';

package/template/src/components/Router.sdk.ts

@@ -17,5 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
   Prompt,
 } from 'react-router-dom';

package/template/src/components/Router.ts

@@ -17,5 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
   Prompt,
 } from 'react-router-dom';