agora-appbuilder-core 2.3.0-beta.9 → 3.0.0

package/template/src/components/RTMConfigure.tsx

@@ -11,69 +11,47 @@
 */
 // @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 ChatContext from './ChatContext';
 import {RtcContext} from '../../agora-rn-uikit';
-import {messageSourceType, messageActionType} from './ChatContext';
 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 {isAndroid, isWebInternal} from '../utils/common';
+import {useRender, useRtc} from 'customization-api';
 import {
   safeJsonParse,
   timeNow,
   hasJsonStructure,
   getMessageTime,
   get32BitUid,
-  adjustUID,
 } from '../rtm/utils';
-import {EventUtils, EventsQueue, eventMessageType} from '../rtm-events';
+import {EventUtils, EventsQueue} from '../rtm-events';
+import {EventPersistLevel} from '../rtm-events-api';
 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 {
   ScreenShare = 'screenshare',
 }
 
-const stringifyPayload = (
-  source: messageSourceType,
-  type: messageActionType,
-  msg: string,
-) => {
-  return JSON.stringify({
-    source,
-    type,
-    msg,
-  });
-};
-
-const parsePayload = (data: string) => {
-  return JSON.parse(data);
-};
-
 const RtmConfigure = (props: any) => {
   const localUid = useLocalUid();
-  const screenShareUid = useLocalScreenShareUid();
   const {callActive} = props;
   const {rtcProps} = useContext(PropsContext);
-  const {RtcEngine, dispatch} = useContext(RtcContext);
-  const {renderList, renderPosition} = useRenderContext();
+  const {RtcEngine, dispatch} = useRtc();
+  const {renderList, activeUids} = useRender();
   const renderListRef = useRef({renderList: renderList});
-  const renderPositionRef = useRef({renderPosition: renderPosition});
+  const activeUidsRef = useRef({activeUids: activeUids});
 
   /**
    * inside event callback state won't have latest value.
    * so creating ref to access the state
    */
   useEffect(() => {
-    renderPositionRef.current.renderPosition = renderPosition;
-  }, [renderPosition]);
+    activeUidsRef.current.activeUids = activeUids;
+  }, [activeUids]);
 
   useEffect(() => {
     renderListRef.current.renderList = renderList;
@@ -108,7 +86,7 @@ const RtmConfigure = (props: any) => {
       engine.current.leaveChannel(rtcProps.channel);
     };
 
-    if (!isWeb) return;
+    if (!isWebInternal()) return;
     window.addEventListener('beforeunload', handBrowserClose);
     // cleanup this component
     return () => {
@@ -139,7 +117,9 @@ const RtmConfigure = (props: any) => {
     try {
       await engine.current.setLocalUserAttributes(rtmAttributes);
       timerValueRef.current = 5;
-      joinChannel();
+      await joinChannel();
+      setHasUserJoinedRTM(true);
+      await runQueuedEvents();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -153,8 +133,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;
@@ -233,18 +211,11 @@ const RtmConfigure = (props: any) => {
                 // isActive to identify all active screenshare users in the call
                 for (const [key, value] of Object.entries(attr?.attributes)) {
                   if (hasJsonStructure(value as string)) {
-                    const [err, result] = safeJsonParse(value as string);
-                    const payloadValue = result?.value || '';
-                    const payloadAction = result?.action || '';
                     const data = {
                       evt: key,
-                      payload: {
-                        ...result,
-                        value: payloadValue,
-                        action: payloadAction,
-                      },
+                      value: value,
                     };
-                    // Todo:EVENTSUP Add the data to queue, dont add same mulitple events, use set so as to not repeat events
+                    // TODOSUP: Add the data to queue, dont add same mulitple events, use set so as to not repeat events
                     EventsQueue.enqueue({
                       data: data,
                       uid: member.uid,
@@ -337,225 +308,100 @@ const RtmConfigure = (props: any) => {
       // Chat of left user becomes undefined. So don't cleanup
       const uid = data?.uid ? parseInt(data?.uid) : undefined;
       if (!uid) return;
-      //updating the rtc data
+      // updating the rtc data
       updateRenderListState(uid, {
         offline: true,
       });
     });
 
     engine.current.on('messageReceived', (evt: any) => {
+      console.log('CUSTOM_EVENT_API messageReceived: ', evt);
       const {peerId, ts, text} = evt;
-      const textObj = parsePayload(text);
-      const {type, msg} = textObj;
+      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 sender = isAndroid ? get32BitUid(peerId) : peerId;
-
-      if (type === messageActionType.Control) {
-        switch (msg) {
-          case controlMessageEnum.muteVideo:
-            RtcEngine.muteLocalVideoStream(true);
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0],
-            });
-            break;
-          case controlMessageEnum.muteAudio:
-            RtcEngine.muteLocalAudioStream(true);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [0],
-            });
-            break;
-          case controlMessageEnum.kickUser:
-            dispatch({
-              type: 'EndCall',
-              value: [],
-            });
-            break;
-          default:
-            break;
-        }
-      } else if (type === eventMessageType.CUSTOM_EVENT) {
-        console.log('CUSTOM_EVENT_API: inside custom event type ', evt);
-        try {
-          customEventDispatcher(msg, sender, timestamp);
-        } catch (error) {
-          console.log('error while dispacthing', error);
-        }
+      const sender = isAndroid() ? get32BitUid(peerId) : parseInt(peerId);
+
+      try {
+        eventDispatcher(msg, sender, timestamp);
+      } catch (error) {
+        console.log('error while dispacthing', error);
       }
     });
 
     engine.current.on('channelMessageReceived', (evt) => {
+      console.log('CUSTOM_EVENT_API channelMessageReceived: ', evt);
+
       const {uid, channelId, text, ts} = evt;
-      const textObj = parsePayload(text);
-      const [err, result] = safeJsonParse(text);
-      const {type, msg} = textObj;
+      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 sender = Platform.OS ? get32BitUid(uid) : uid;
+      const sender = Platform.OS ? get32BitUid(uid) : parseInt(uid);
 
       if (channelId === rtcProps.channel) {
-        if (
-          type === eventMessageType.CONTROL_GROUP ||
-          type === messageActionType.Control
-        ) {
-          let actionMsg = '';
-          if (hasJsonStructure(msg)) {
-            const [err, result] = safeJsonParse(msg);
-            if (!err) {
-              const {action} = result;
-              actionMsg = action;
-            }
-          } else {
-            actionMsg = msg;
-          }
-          switch (actionMsg) {
-            case controlMessageEnum.muteVideo:
-              RtcEngine.muteLocalVideoStream(true);
-              dispatch({
-                type: 'LocalMuteVideo',
-                value: [0],
-              });
-              break;
-            case controlMessageEnum.muteAudio:
-              RtcEngine.muteLocalAudioStream(true);
-              dispatch({
-                type: 'LocalMuteAudio',
-                value: [0],
-              });
-              break;
-            default:
-              break;
-            //   throw new Error('Unsupported message type');
-          }
-        } else if (type === eventMessageType.CUSTOM_EVENT) {
-          console.log('CUSTOM_EVENT_API: inside custom event type ', evt);
-          try {
-            customEventDispatcher(msg, sender, timestamp);
-          } catch (error) {
-            console.log('error while dispacthing', error);
-          }
+        try {
+          eventDispatcher(msg, sender, timestamp);
+        } catch (error) {
+          console.log('error while dispacthing', error);
         }
       }
     });
     doLoginAndSetupRTM();
   };
 
-  const runQueuedCustomEvents = async () => {
+  const runQueuedEvents = 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 eventDispatcher(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);
     }
   };
 
-  const customEventDispatcher = async (
+  const eventDispatcher = async (
     data: {
       evt: string;
-      payload: {
-        level: 1 | 2 | 3;
-        action: string;
-        value: string;
-      };
+      value: string;
     },
     sender: string,
     ts: number,
   ) => {
-    console.log('CUSTOM_EVENT_API: inside customEventDispatcher ', data);
-    const {evt, payload} = data;
+    console.log('CUSTOM_EVENT_API: inside eventDispatcher ', data);
+    const {evt, value} = data;
     // Step 1: Set local attributes
-    if (payload?.level === 3) {
-      const rtmAttribute = {key: evt, value: JSON.stringify(data.payload)};
+    if (value?.persistLevel === EventPersistLevel.LEVEL3) {
+      const rtmAttribute = {key: evt, value: value};
       await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
     }
     // Step 2: Emit the event
     try {
-      console.log('CUSTOM_EVENT_API:  emiting event: ');
-      EventUtils.emitEvent(evt, {payload, sender, ts});
+      const {payload, persistLevel, source} = JSON.parse(value);
+      console.log('CUSTOM_EVENT_API:  emiting event..: ');
+      EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
     } catch (error) {
       console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
     }
   };
 
-  const sendMessage = async (msg: string) => {
-    if (msg.trim() === '') return;
-    const text = stringifyPayload(
-      messageSourceType.Core,
-      messageActionType.Normal,
-      msg,
-    );
-    await (engine.current as RtmEngine).sendMessageByChannelId(
-      rtcProps.channel,
-      text,
-    );
-  };
-
-  const sendMessageToUid = async (msg: string, uid: UidType) => {
-    if (msg.trim() === '') return;
-
-    const adjustedUID = adjustUID(uid);
-
-    const text = stringifyPayload(
-      messageSourceType.Core,
-      messageActionType.Normal,
-      msg,
-    );
-    await (engine.current as RtmEngine).sendMessageToPeer({
-      peerId: adjustedUID.toString(),
-      offline: false,
-      text,
-    });
-  };
-
-  const sendControlMessage = async (msg: string) => {
-    const text = stringifyPayload(
-      messageSourceType.Core,
-      messageActionType.Control,
-      msg,
-    );
-    await (engine.current as RtmEngine).sendMessageByChannelId(
-      rtcProps.channel,
-      text,
-    );
-  };
-
-  const sendControlMessageToUid = async (msg: string, uid: UidType) => {
-    if (msg.trim() === '') return;
-
-    const adjustedUID = adjustUID(uid);
-
-    const text = stringifyPayload(
-      messageSourceType.Core,
-      messageActionType.Control,
-      msg,
-    );
-    await (engine.current as RtmEngine).sendMessageToPeer({
-      peerId: adjustedUID.toString(),
-      offline: false,
-      text,
-    });
-  };
-
   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'))
       : {};
@@ -573,10 +419,6 @@ const RtmConfigure = (props: any) => {
     <ChatContext.Provider
       value={{
         hasUserJoinedRTM,
-        sendControlMessage,
-        sendControlMessageToUid,
-        sendMessage,
-        sendMessageToUid,
         engine: engine.current,
         localUid: localUid,
         onlineUsersCount,

package/template/src/components/SettingsView.tsx

@@ -15,17 +15,20 @@ import SelectDevice from '../subComponents/SelectDevice';
 import HostControlView from './HostControlView';
 import {useString} from '../utils/useString';
 import LanguageSelector from '../subComponents/LanguageSelector';
-import {isWeb} from '../utils/common';
+import {isWebInternal} from '../utils/common';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 
 const SettingsView = () => {
-  const {isHost} = useMeetingInfo();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
   //commented for v1 release
   //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
   const selectInputDeviceLabel = 'Select Input Device';
 
   return (
-    <View style={isWeb ? style.settingsView : style.settingsViewNative}>
+    <View
+      style={isWebInternal() ? style.settingsView : style.settingsViewNative}>
       <View style={style.main}>
         <View>
           <Text style={style.heading}>{selectInputDeviceLabel}</Text>

package/template/src/components/Share.tsx

@@ -21,12 +21,12 @@ import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
 import Logo from '../components/common/Logo';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
-import useNavigateTo from '../utils/useNavigateTo';
-import {useFpe} from 'fpe-api';
+import {useHistory} from '../components/Router';
+import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../utils/common';
 
 const Share = () => {
-  const {FpeShareComponent} = useFpe((data) => {
+  const {FpeShareComponent} = useCustomization((data) => {
     let components: {
       FpeShareComponent?: React.ElementType;
     } = {};
@@ -45,7 +45,9 @@ const Share = () => {
     return components;
   });
   const {copyShareLinkToClipboard, getShareLink} = useShareLink();
-  const {meetingPassphrase, isSeparateHostLink} = useMeetingInfo();
+  const {
+    data: {roomId, pstn, isSeparateHostLink},
+  } = useMeetingInfo();
   //commented for v1 release
   // const meetingUrlText = useString('meetingUrlLabel')();
   // const meetingIdText = useString('meetingIdLabel')();
@@ -71,10 +73,10 @@ const Share = () => {
   const pinLabel = 'Pin';
   const enterMeetingAfterCreateButton = 'Start Meeting (as host)';
   const copyInviteButton = 'Copy invite to clipboard';
-  const navigateTo = useNavigateTo();
+  const history = useHistory();
   const enterMeeting = () => {
-    if (meetingPassphrase?.host) {
-      navigateTo(meetingPassphrase.host);
+    if (roomId?.host) {
+      history.push(roomId.host);
     }
   };
 
@@ -87,18 +89,20 @@ const Share = () => {
     setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
   };
   const isSDK = isSDKCheck();
-  const isWeb = $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+  const isWebCheck =
+    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () => (isWeb ? attendeeUrlLabel : attendeeIdLabel);
+  const getAttendeeLabel = () =>
+    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
 
   const getHostLabel = () => {
     if (isSeparateHostLink) {
-      if (isWeb) {
+      if (isWebCheck) {
         return hostUrlLabel;
       }
       return hostIdText;
     } else {
-      if (isWeb) {
+      if (isWebCheck) {
         return meetingUrlText;
       }
       return meetingIdText;
@@ -118,7 +122,7 @@ const Share = () => {
               <View style={{width: '80%'}}>
                 <Text style={style.urlTitle}>{getAttendeeLabel()}</Text>
                 <View style={style.urlHolder}>
-                  <Text style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
+                  <Text style={[style.url, isWebCheck ? urlWeb : {opacity: 1}]}>
                     {getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
                   </Text>
                 </View>
@@ -156,7 +160,7 @@ const Share = () => {
             <View style={{width: '80%'}}>
               <Text style={style.urlTitle}>{getHostLabel()}</Text>
               <View style={style.urlHolder}>
-                <Text style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
+                <Text style={[style.url, isWebCheck ? urlWeb : {opacity: 1}]}>
                   {getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
                 </Text>
               </View>
@@ -187,21 +191,23 @@ const Share = () => {
               </View>
             </View>
           </View>
-          {meetingPassphrase?.pstn ? (
+          {pstn ? (
             <View style={style.urlContainer}>
               <View style={{width: '80%'}}>
                 <Text style={style.urlTitle}>{pstnLabel}</Text>
                 <View>
                   <View style={style.pstnHolder}>
                     <Text style={style.urlTitle}>{pstnNumberLabel}: </Text>
-                    <Text style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
-                      {meetingPassphrase?.pstn?.number}
+                    <Text
+                      style={[style.url, isWebCheck ? urlWeb : {opacity: 1}]}>
+                      {pstn?.number}
                     </Text>
                   </View>
                   <View style={style.pstnHolder}>
                     <Text style={style.urlTitle}>{pinLabel}: </Text>
-                    <Text style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
-                      {meetingPassphrase?.pstn?.pin}
+                    <Text
+                      style={[style.url, isWebCheck ? urlWeb : {opacity: 1}]}>
+                      {pstn?.pin}
                     </Text>
                   </View>
                 </View>