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

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/{custom-events/CustomEvents.ts → rtm-events-api/Events.ts}

@@ -13,17 +13,19 @@
 ('use strict');
 import RtmEngine from 'agora-react-native-rtm';
 import RTMEngine from '../rtm/RTMEngine';
-import {ToOptions, EventPayload} from './types';
-import {EventUtils, eventMessageType} from '../rtm-events';
-import {TEventCallback, EventSourceEnum} from './types';
+import {EventUtils} from '../rtm-events';
+import {
+  ReceiverUid,
+  EventCallback,
+  EventSource,
+  EventPersistLevel,
+} from './types';
 import {adjustUID} from '../rtm/utils';
 
-class CustomEvents {
-  private engine!: RtmEngine;
-  private source: EventSourceEnum = EventSourceEnum.core;
+class Events {
+  private source: EventSource = EventSource.core;
 
-  constructor(source?: EventSourceEnum) {
-    this.engine = RTMEngine.getInstance().engine;
+  constructor(source?: EventSource) {
     if (source) {
       this.source = source;
     }
@@ -33,15 +35,15 @@ class CustomEvents {
    * Persists the data in the local attributes of the user
    *
    * @param {string} evt  to be stored in rtm Attribute key
-   * @param {any} payload to be stored in rtm Attribute value
+   * @param {string} payload to be stored in rtm Attribute value
    * @api private
    */
-  private _persist = async (evt: string, payload: any) => {
+  private _persist = async (evt: string, payload: string) => {
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
     try {
-      const localUserId = RTMEngine.getInstance().localUid;
-      const rtmAttribute = {key: evt, value: JSON.stringify(payload)};
+      const rtmAttribute = {key: evt, value: payload};
       // Step 1: Call RTM API to update local attributes
-      await this.engine.addOrUpdateLocalUserAttributes([rtmAttribute]);
+      await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
     } catch (error) {
       console.log(
         'CUSTOM_EVENT_API error occured while updating the value ',
@@ -65,7 +67,7 @@ class CustomEvents {
     return true;
   };
 
-  private _validateListener = (listener: TEventCallback): boolean => {
+  private _validateListener = (listener: EventCallback): boolean => {
     if (typeof listener !== 'function') {
       throw Error(
         `CUSTOM_EVENT_API Function cannot be of type ${typeof listener}`,
@@ -81,16 +83,14 @@ class CustomEvents {
    * If param 'to' is an array of uids is provided then message is sent to all the individual uids in loop.
    *
    * @param {any} rtmPayload payload to be sent across
-   * @param {ToOptions} to uid or uids[] of user
+   * @param {toUid} to uid or uids[] of user
    * @api private
    */
-  private _send = async (rtmPayload: any, toUid?: ToOptions) => {
+  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({
-      type: eventMessageType.CUSTOM_EVENT,
-      msg: rtmPayload,
-    });
+    const text = JSON.stringify(rtmPayload);
     // Case 1: send to channel
     if (
       typeof to === 'undefined' ||
@@ -100,7 +100,7 @@ class CustomEvents {
       console.log('CUSTOM_EVENT_API: case 1 executed');
       try {
         const channelId = RTMEngine.getInstance().channelUid;
-        await this.engine.sendMessageByChannelId(channelId, text);
+        await rtmEngine.sendMessageByChannelId(channelId, text);
       } catch (error) {
         console.log('CUSTOM_EVENT_API: send event case 1 error : ', error);
         throw error;
@@ -111,7 +111,7 @@ class CustomEvents {
       console.log('CUSTOM_EVENT_API: case 2 executed', to);
       const adjustedUID = adjustUID(to);
       try {
-        await this.engine.sendMessageToPeer({
+        await rtmEngine.sendMessageToPeer({
           peerId: `${adjustedUID}`,
           offline: false,
           text,
@@ -128,7 +128,7 @@ class CustomEvents {
       try {
         for (const uid of to) {
           const adjustedUID = adjustUID(uid);
-          await this.engine.sendMessageToPeer({
+          await rtmEngine.sendMessageToPeer({
             peerId: `${adjustedUID}`,
             offline: false,
             text,
@@ -147,41 +147,42 @@ class CustomEvents {
    * When the specified event happens, the Events API triggers the callback that you pass.
    * The listener will not be added if it is a duplicate.
    *
-   * @param {String} evt Name of the event to attach the listener to.
+   * @param {String} eventName Name of the event to attach the listener to.
    * @param {Function} listener Method to be called when the event is emitted.
    * @api public
    */
-  on = (evt: string, listener: TEventCallback) => {
+  on = (eventName: string, listener: EventCallback) => {
     try {
-      if (!this._validateEvt(evt) || !this._validateListener(listener)) return;
-      EventUtils.addListener(evt, listener, this.source);
+      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-events-on error: ', error);
     }
   };
 
   /**
-   * Removes a listener function from the specified event if evt and listener function both are provided.
+   * Removes a listener function from the specified event if eventName and listener function both are provided.
    * Removes all listeners from a specified event if listener function is not provided.
    * If you do not specify an event then all listeners will be removed.
    * That means every event will be emptied.
    *
-   * @param {String} evt Name of the event to remove the listener from.
-   * @param {Function} listenerToRemove Method to remove from the event.
+   * @param {String} eventName Name of the event to remove the listener from.
+   * @param {Function} listener Method to remove from the event.
    * @api public
    */
-  off = (evt?: string, listenerToRemove?: TEventCallback) => {
+  off = (eventName?: string, listener?: EventCallback) => {
     try {
-      if (listenerToRemove) {
-        if (
-          this._validateListener(listenerToRemove) &&
-          this._validateEvt(evt)
-        ) {
-          EventUtils.removeListener(evt, listenerToRemove, this.source);
+      if (listener) {
+        if (this._validateListener(listener) && this._validateEvt(eventName)) {
+          EventUtils.removeListener(eventName, listener, this.source);
         }
-      } else if (evt) {
-        if (this._validateEvt(evt)) {
-          EventUtils.removeAllListeners(evt, this.source);
+      } else if (eventName) {
+        if (this._validateEvt(eventName)) {
+          EventUtils.removeAllListeners(eventName, this.source);
         }
       } else {
         EventUtils.removeAll(this.source);
@@ -197,42 +198,47 @@ class CustomEvents {
    *  - If 'to' is empty this method sends channel message.
    *
    *
-   * @param {String} evt Name of the event to remove the listener from.
-   * @param {EventPayload} payload contains action, level, value metrics.
-   * - action: {string}
-   * - level: 1 | 2 | 3
-   * - value: {string}. NOTICE: value bytelength has MAX_SIZE 32kb limit.
-   * @param {ToOptions} to uid or uid array. The default mode is to send a message in channel.
+   * @param {String} eventName  Name of the event to register on which listeners are added
+   * @param {String} payload . NOTICE: value bytelength has MAX_SIZE 32kb limit.
+   * @param {ReceiverUid} receiver uid or uid array. The default mode is to send a message in channel.
    * @api public
    * */
-  send = async (evt: string, payload: EventPayload, to?: ToOptions) => {
-    if (!this._validateEvt(evt)) return;
-    const {action = '', value = '', level = 1} = payload;
+  send = async (
+    eventName: string = '',
+    payload: string = '',
+    persistLevel: EventPersistLevel,
+    receiver?: ReceiverUid,
+  ) => {
+    if (!this._validateEvt(eventName)) return;
+
+    const persistValue = JSON.stringify({
+      payload,
+      persistLevel,
+      source: this.source,
+    });
 
     const rtmPayload = {
-      evt: evt,
-      payload: {
-        action,
-        value,
-        level,
-        source: this.source,
-      },
+      evt: eventName,
+      value: persistValue,
     };
 
-    if (level === 2 || level === 3) {
-      console.log('CUSTOM_EVENT_API: Event lifecycle: persist', level);
+    if (
+      persistLevel === EventPersistLevel.LEVEL2 ||
+      persistLevel === EventPersistLevel.LEVEL3
+    ) {
+      console.log('CUSTOM_EVENT_API: Event lifecycle: persist', persistLevel);
       try {
-        await this._persist(evt, {...payload, source: this.source});
+        await this._persist(eventName, persistValue);
       } catch (error) {
         console.log('custom-events-persist error: ', error);
       }
     }
     try {
-      await this._send(rtmPayload, to);
+      await this._send(rtmPayload, receiver);
     } catch (error) {
       console.log('CUSTOM_EVENT_API: sending failed. ', error);
     }
   };
 }
 
-export default CustomEvents;
+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;