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

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

@@ -9,11 +9,11 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {EventSourceEnum} from '../custom-events/types';
+import {EventSource} from '../rtm-events-api/types';
 type TListener = <T>(t: T) => void;
 type TListenerMetaData = {once: boolean; listener: TListener};
 type TEventList = Map<string, TListenerMetaData[]>;
-type TEvents = Record<EventSourceEnum, TEventList> | Record<string, never>;
+type TEvents = Record<EventSource, TEventList> | Record<string, never>;
 
 const EventUtils = (function () {
   'use strict';
@@ -52,7 +52,7 @@ const EventUtils = (function () {
    */
   const _getListeners = function (
     evt: string,
-    source: EventSourceEnum,
+    source: EventSource,
   ): TListenerMetaData[] | [] {
     let response: TListenerMetaData[] | [];
     if (_events.hasOwnProperty(source)) {
@@ -75,14 +75,14 @@ const EventUtils = (function () {
    * This is mainly for internal use but others may find it useful.
    *
    * @param {String} evt Name of the event to return the listeners from.
-   * @param {EventSourceEnum} source Name of the bucket to search events from
+   * @param {EventSource} source Name of the bucket to search events from
    * @return {Object} All listener functions for an event in an object.
    * @api private
    * @example : {evt-name: [{once: false, listener: f}, {once: false, listener: f}...so on and so forth]
    */
   const _getListenersAsObject = function (
     evt: string,
-    source: EventSourceEnum,
+    source: EventSource,
   ): object {
     const listeners = _getListeners(evt, source);
     let response: any;
@@ -114,7 +114,7 @@ const EventUtils = (function () {
   };
 
   return {
-    getEvents(source: EventSourceEnum): TEvents | {} {
+    getEvents(source: EventSource): TEvents | {} {
       return _events[source] || (_events[source] = new Map());
     },
     /**
@@ -123,10 +123,10 @@ const EventUtils = (function () {
      *
      * @param {String} evt Name of the event to attach the listener to.
      * @param {Function} listener Method to be called when the event is emitted.
-     * @param {EventSourceEnum} source Name of the bucket to search events from
+     * @param {EventSource} source Name of the bucket to search events from
      * @return {Object} Current instance of EventUtils
      */
-    addListener(evt: string, listener: any, source: EventSourceEnum): object {
+    addListener(evt: string, listener: any, source: EventSource): object {
       if (!_isValidListener(listener)) {
         throw new Error('Listener must be a function');
       }
@@ -156,13 +156,13 @@ const EventUtils = (function () {
      *
      * @param {String} evt Name of the event to remove the listener from.
      * @param {Function} listenerToRemove Method to remove from the event.
-     * @param {EventSourceEnum} source Name of the bucket to search events from
+     * @param {EventSource} source Name of the bucket to search events from
      * @return {Object} Current instance of EventUtils for chaining.
      */
     removeListener(
       evt: string,
       listenerToRemove: TListener,
-      source: EventSourceEnum,
+      source: EventSource,
     ): Object {
       let listeners = _getListenersAsObject(evt, source);
       for (let key in listeners) {
@@ -182,10 +182,10 @@ const EventUtils = (function () {
      * That means every event will be emptied.
      *
      * @param {String} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed.
-     * @param {EventSourceEnum} source Name of the bucket to search events from
+     * @param {EventSource} source Name of the bucket to search events from
      * @return {Object} Current instance of EventUtils
      */
-    removeAllListeners(evt: string, source: EventSourceEnum): object {
+    removeAllListeners(evt: string, source: EventSource): object {
       let type = typeof evt;
       let events = this.getEvents(source);
       if (type === 'string') {
@@ -203,7 +203,7 @@ const EventUtils = (function () {
      * @param {source} source source Name of the bucket to search events from
      * @return {Object} Current instance of EventUtils
      */
-    removeAll(source: EventSourceEnum): object {
+    removeAll(source: EventSource): object {
       _events[source] = new Map();
       return this;
     },
@@ -219,11 +219,8 @@ const EventUtils = (function () {
      * @param {Array} [args] Optional array of arguments to be passed to each listener.
      * @return {Object} Current instance of EventUtils
      */
-    emitEvent(evt: string, args: any): object {
-      let listenersMap = _getListenersAsObject(
-        evt,
-        args.payload.source || EventSourceEnum.core,
-      );
+    emitEvent(evt: string, source: EventSource, args: any): object {
+      let listenersMap = _getListenersAsObject(evt, source);
       let listeners: TListenerMetaData[];
       let listener: TListenerMetaData;
       for (let key in listenersMap) {
@@ -235,16 +232,19 @@ const EventUtils = (function () {
             listener = listeners[i];
 
             if (listener.once === true) {
-              this.removeListener(evt, args.payload.source, listener.listener);
+              this.removeListener(evt, source, listener.listener);
             }
 
-            const newargs = [].slice.call(arguments, 1);
+            const newargs = [].slice.call(arguments, 2);
             listener.listener.apply(this, newargs || []);
           }
         }
       }
       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/rtm-events/constants.ts

@@ -28,6 +28,9 @@ const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
 const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
 // 4. NAME ATTRIBUTE
 const NAME_ATTRIBUTE = 'name';
+// 5. VIDEO MEETING ROLE
+const VIDEO_MEETING_HOST = 'VIDEO_MEETING_HOST';
+const VIDEO_MEETING_ATTENDEE = 'VIDEO_MEETING_ATTENDEE';
 const EventNames = {
   RECORDING_ATTRIBUTE,
   RAISED_ATTRIBUTE,
@@ -36,6 +39,8 @@ const EventNames = {
   PRIVATE_CHAT_MESSAGE,
   SCREENSHARE_ATTRIBUTE,
   NAME_ATTRIBUTE,
+  VIDEO_MEETING_HOST,
+  VIDEO_MEETING_ATTENDEE,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

package/template/src/rtm-events/index.tsx

@@ -3,6 +3,4 @@ import EventsQueue from './EventsQueue';
 
 export * from './constants';
 
-import {eventMessageType} from './types';
-
-export {EventUtils, EventsQueue, eventMessageType};
+export {EventUtils, EventsQueue};

package/template/src/rtm-events-api/Events.ts

@@ -0,0 +1,255 @@
+/*
+********************************************
+ Copyright © 2022 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+('use strict');
+import RtmEngine from 'agora-react-native-rtm';
+import RTMEngine from '../rtm/RTMEngine';
+import {EventUtils} from '../rtm-events';
+import {
+  ReceiverUid,
+  EventCallback,
+  EventSource,
+  EventPersistLevel,
+} from './types';
+import {adjustUID} from '../rtm/utils';
+
+class Events {
+  private source: EventSource = EventSource.core;
+
+  constructor(source?: EventSource) {
+    if (source) {
+      this.source = source;
+    }
+  }
+
+  /**
+   * Persists the data in the local attributes of the user
+   *
+   * @param {String} evt  to be stored in rtm Attribute key
+   * @param {String} payload to be stored in rtm Attribute value
+   * @api private
+   */
+  private _persist = async (evt: string, payload: string) => {
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
+    try {
+      const rtmAttribute = {key: evt, value: payload};
+      // Step 1: Call RTM API to update local attributes
+      await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
+    } catch (error) {
+      console.log(
+        'CUSTOM_EVENT_API error occured while updating the value ',
+        error,
+      );
+    }
+  };
+
+  /**
+   * event type validator.
+   *
+   * @api private
+   * @returns {boolean}
+   */
+  private _validateEvt = (evt: string): boolean => {
+    if (typeof evt !== 'string') {
+      throw Error(
+        `CUSTOM_EVENT_API Event name cannot be of type ${typeof evt}`,
+      );
+    }
+    if (evt.trim() == '') {
+      throw Error(`CUSTOM_EVENT_API Name or function cannot be empty`);
+    }
+    return true;
+  };
+
+  /**
+   * event listener validator
+   *
+   * @api private
+   * @returns {boolean}
+   */
+  private _validateListener = (listener: EventCallback): boolean => {
+    if (typeof listener !== 'function') {
+      throw Error(
+        `CUSTOM_EVENT_API Function cannot be of type ${typeof listener}`,
+      );
+    }
+    return true;
+  };
+
+  /**
+   * Sets the local attribute of user if persist level is 2 or 3.
+   * If param 'toUid' is not provided, message is sent in the channel.
+   * If param 'toUid' is provided message is sent to that individual.
+   * If param 'toUid' is an array of uids is provided then message is sent to all the individual uids in loop.
+   *
+   * @param {Object} rtmPayload payload to be sent across
+   * @param {ReceiverUid} toUid uid or uids[] of user
+   * @api private
+   */
+  private _send = async (rtmPayload: any, toUid?: ReceiverUid) => {
+    const to = typeof toUid == 'string' ? parseInt(toUid) : toUid;
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
+
+    const text = JSON.stringify(rtmPayload);
+    // Case 1: send to channel
+    if (
+      typeof to === 'undefined' ||
+      (typeof to === 'number' && to <= 0) ||
+      (Array.isArray(to) && to?.length === 0)
+    ) {
+      console.log('CUSTOM_EVENT_API: case 1 executed');
+      try {
+        const channelId = RTMEngine.getInstance().channelUid;
+        await rtmEngine.sendMessageByChannelId(channelId, text);
+      } catch (error) {
+        console.log('CUSTOM_EVENT_API: send event case 1 error : ', error);
+        throw error;
+      }
+    }
+    // Case 2: send to indivdual
+    if (typeof to === 'number' && to !== 0) {
+      console.log('CUSTOM_EVENT_API: case 2 executed', to);
+      const adjustedUID = adjustUID(to);
+      try {
+        await rtmEngine.sendMessageToPeer({
+          peerId: `${adjustedUID}`,
+          offline: false,
+          text,
+        });
+      } catch (error) {
+        console.log('CUSTOM_EVENT_API: send event case 2 error : ', error);
+        throw error;
+      }
+    }
+    // Case 3: send to multiple individuals
+    if (typeof to === 'object' && Array.isArray(to)) {
+      console.log('CUSTOM_EVENT_API: case 3 executed', to);
+
+      try {
+        for (const uid of to) {
+          const adjustedUID = adjustUID(uid);
+          await rtmEngine.sendMessageToPeer({
+            peerId: `${adjustedUID}`,
+            offline: false,
+            text,
+          });
+        }
+      } catch (error) {
+        console.log('CUSTOM_EVENT_API: send event case 3 error : ', error);
+        throw error;
+      }
+    }
+  };
+
+  /**
+   * Listen on a new event by eventName and listener.
+   * When the specified event happens, the Events API triggers the callback that you pass.
+   * The listener will not be added/listened if it is a duplicate.
+   *
+   * @param {String} eventName Name of the event. It must be a unique string.
+   * @param {Function} listener Method to be called when the event is emitted.
+   * @returns {Function} Returns function, call it and this listener will be removed from event
+   * @api public
+   */
+  on = (eventName: string, listener: EventCallback): Function => {
+    try {
+      if (!this._validateEvt(eventName) || !this._validateListener(listener))
+        return;
+      EventUtils.addListener(eventName, listener, this.source);
+      return () => {
+        EventUtils.removeListener(eventName, listener, this.source);
+      };
+    } catch (error) {
+      console.log('CUSTOM_EVENT_API on error: ', error);
+    }
+  };
+
+  /**
+   * Listen off an event by eventName and listener
+   * or listen off events by eventName, when if only eventName argument is passed.
+   * or listen off all events, when if no arguments are passed.
+   *
+   * @param {String} eventName Name of the event to remove the listener from.
+   * @param {Function} listener Listener to remove from the event.
+   * @api public
+   */
+  off = (eventName?: string, listener?: EventCallback) => {
+    try {
+      if (listener) {
+        if (this._validateListener(listener) && this._validateEvt(eventName)) {
+          // listen off an event by eventName and listener
+          EventUtils.removeListener(eventName, listener, this.source);
+        }
+      } else if (eventName) {
+        // listen off events by name, when if only name is passed.
+        if (this._validateEvt(eventName)) {
+          EventUtils.removeAllListeners(eventName, this.source);
+        }
+      } else {
+        // listen off all events, that means every event will be emptied.
+        EventUtils.removeAll(this.source);
+      }
+    } catch (error) {
+      console.log('CUSTOM_EVENT_API off error: ', error);
+    }
+  };
+
+  /**
+   * This method sends p2p or channel message depending upon the 'receiver' value.
+   *  - If 'receiver' is provided this method sends p2p message.
+   *  - If 'receiver' is empty this method sends channel message.
+   *
+   *
+   * @param {String} eventName  Name of the event to send.
+   * @param {String} payload (optional) Additional data to be sent along with the event.
+   * @param {Enum} persistLevel (optional) set different levels of persistance. Default value is Level 1
+   * @param {ReceiverUid} receiver (optional) uid or uid array. Default mode sends message in channel.
+   * @api public
+   * */
+  send = async (
+    eventName: string = '',
+    payload: string = '',
+    persistLevel: EventPersistLevel = EventPersistLevel.LEVEL1,
+    receiver: ReceiverUid = -1,
+  ) => {
+    if (!this._validateEvt(eventName)) return;
+
+    const persistValue = JSON.stringify({
+      payload,
+      persistLevel,
+      source: this.source,
+    });
+
+    const rtmPayload = {
+      evt: eventName,
+      value: persistValue,
+    };
+
+    if (
+      persistLevel === EventPersistLevel.LEVEL2 ||
+      persistLevel === EventPersistLevel.LEVEL3
+    ) {
+      try {
+        await this._persist(eventName, persistValue);
+      } catch (error) {
+        console.log('CUSTOM_EVENT_API persist error: ', error);
+      }
+    }
+    try {
+      await this._send(rtmPayload, receiver);
+    } catch (error) {
+      console.log('CUSTOM_EVENT_API: sending failed. ', error);
+    }
+  };
+}
+
+export default Events;

package/template/src/rtm-events-api/index.tsx

@@ -0,0 +1,6 @@
+import Events from './Events';
+
+export * from './types';
+
+const events = new Events();
+export default events;

package/template/src/rtm-events-api/types.ts

@@ -0,0 +1,22 @@
+import {UidType} from '../../agora-rn-uikit';
+
+export type ReceiverUid = UidType | UidType[];
+
+export type EventPayload = string | Record<string, never>;
+
+export enum EventSource {
+  core = 'core',
+  fpe = 'fpe',
+}
+export enum EventPersistLevel {
+  'LEVEL1' = 1,
+  'LEVEL2',
+  'LEVEL3',
+}
+interface EventCallbackPayload {
+  payload: string;
+  persistLevel: EventPersistLevel;
+  sender: UidType;
+  ts: number;
+}
+export type EventCallback = (args: EventCallbackPayload) => void;

package/template/src/subComponents/ChatBubble.tsx

@@ -15,19 +15,27 @@ import Hyperlink from 'react-native-hyperlink';
 import {useString} from '../utils/useString';
 import {ChatBubbleProps} from '../components/ChatContext';
 import ColorContext from '../components/ColorContext';
-import {isWeb} from '../utils/common';
-import useUserList from '../utils/useUserList';
+import {isWebInternal} from '../utils/common';
+import {useRender} from 'customization-api';
 
 const ChatBubble = (props: ChatBubbleProps) => {
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   const {primaryColor} = useContext(ColorContext);
-  let {isLocal, message, timestamp, uid} = props;
+  let {
+    isLocal,
+    message,
+    createdTimestamp,
+    uid,
+    isDeleted,
+    msgId,
+    updatedTimestamp,
+  } = props;
   let time =
-    new Date(parseInt(timestamp)).getHours() +
+    new Date(parseInt(createdTimestamp)).getHours() +
     ':' +
-    new Date(parseInt(timestamp)).getMinutes();
+    new Date(parseInt(createdTimestamp)).getMinutes();
   const handleUrl = (url: string) => {
-    if (isWeb) {
+    if (isWebInternal()) {
       window.open(url, '_blank');
     } else {
       Linking.openURL(url);
@@ -37,7 +45,15 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
   return props?.render ? (
-    props.render(isLocal, message, timestamp, uid)
+    props.render(
+      isLocal,
+      message,
+      createdTimestamp,
+      uid,
+      msgId,
+      isDeleted,
+      updatedTimestamp,
+    )
   ) : (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>

package/template/src/subComponents/ChatContainer.tsx

@@ -25,26 +25,24 @@ import {ChatBubbleProps} from '../components/ChatContext';
 import {useLocalUid} from '../../agora-rn-uikit';
 import {ImageIcon} from '../../agora-rn-uikit';
 import TextWithTooltip from './TextWithTooltip';
-import {useFpe} from 'fpe-api';
-import {isValidReactComponent, isWeb} from '../utils/common';
+import {useCustomization} from 'customization-implementation';
+import {isValidReactComponent, isWebInternal} from '../utils/common';
 import {useString} from '../utils/useString';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
-import useUserList from '../utils/useUserList';
-import useGroupMessages from '../utils/useGroupMessages';
-import usePrivateMessages from '../utils/usePrivateMessages';
+import {useRender} from 'customization-api';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
 
 /**
  * Chat container is the component which renders all the chat messages
  * It retrieves all the messages from the appropriate stores (Message store an provate message store)
  * and maps it to a ChatBubble
  */
-const ChatContainer = (props: any) => {
-  const {renderList} = useUserList();
-  const messageStore = useGroupMessages();
-  const getPrivateMessage = usePrivateMessages();
-  const privateMessageStore = getPrivateMessage();
+const ChatContainer = (props?: {
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+}) => {
+  const {renderList} = useRender();
+  const {messageStore, privateMessageStore} = useChatMessages();
   const {height, width} = useWindowDimensions();
-  const {selectPrivate} = props;
   const {
     privateActive,
     selectedChatUserId: selectedUserID,
@@ -56,7 +54,7 @@ const ChatContainer = (props: any) => {
   const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
-  const {ChatBubbleComponent} = useFpe((data) => {
+  const {ChatBubbleComponent} = useCustomization((data) => {
     let components: {
       ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
     } = {
@@ -80,6 +78,10 @@ const ChatContainer = (props: any) => {
             data?.components?.videoCall?.chat?.chatBubble;
         }
       }
+    } else {
+      if (props?.chatBubble && isValidReactComponent(props?.chatBubble)) {
+        components.ChatBubbleComponent = props?.chatBubble;
+      }
     }
     return components;
   });
@@ -124,9 +126,12 @@ const ChatContainer = (props: any) => {
               <ChatBubbleComponent
                 isLocal={localUid === message.uid}
                 message={message.msg}
-                timestamp={message.ts}
+                createdTimestamp={message.createdTimestamp}
+                updatedTimestamp={message.updatedTimestamp}
                 uid={message.uid}
                 key={message.ts}
+                msgId={message.msgId}
+                isDeleted={message.isDeleted}
               />
             </>
           ))
@@ -135,9 +140,12 @@ const ChatContainer = (props: any) => {
             <ChatBubbleComponent
               isLocal={localUid === message.uid}
               message={message.msg}
-              timestamp={message.ts}
+              createdTimestamp={message.createdTimestamp}
+              updatedTimestamp={message.updatedTimestamp}
               uid={message.uid}
               key={message.ts}
+              msgId={message.msgId}
+              isDeleted={message.isDeleted}
             />
           ))
         ) : (
@@ -175,7 +183,7 @@ const style = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   name: {
-    fontWeight: isWeb ? '500' : '700',
+    fontWeight: isWebInternal() ? '500' : '700',
     color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
     marginRight: 10,
@@ -196,4 +204,5 @@ const style = StyleSheet.create({
     textAlign: 'center',
   },
 });
+
 export default ChatContainer;