agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

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

@@ -0,0 +1,268 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+import {EventSourceEnum} from '../custom-events/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>;
+
+const EventUtils = (function () {
+  'use strict';
+
+  let _events: TEvents = {};
+
+  /**
+   * Checks if the callback passed is valid listener or not
+   * @return {Boolean} true if callback passed is a function
+   * @api private
+   * @example : () => {} (or) {once: false, listener: () => {}}
+   */
+  const _isValidListener = function (
+    listener: TListener | TListenerMetaData,
+  ): boolean {
+    if (typeof listener === 'function') {
+      return true;
+    } else if (listener && typeof listener === 'object') {
+      // If listener is passed with additional meta data (addOnceListener API below), it will be of type object
+      return _isValidListener(listener.listener);
+    } else {
+      return false;
+    }
+  };
+
+  /**
+   * Returns the listener array for the specified event.
+   * Will initialise the event object and listener arrays if required.
+   * Each property in the object response is an array of listener functions.
+   *
+   * @param {String} evt Name of the event to return the listeners from.
+   * @param {String} source Name of the bucket to search events from
+   * @return {Function[]} All listener functions for the event with meta data.
+   * @api private
+   * @example : [] (or) [{once: false, listener: f}, {once: false, listener: f}...so on and so forth]
+   */
+  const _getListeners = function (
+    evt: string,
+    source: EventSourceEnum,
+  ): TListenerMetaData[] | [] {
+    let response: TListenerMetaData[] | [];
+    if (_events.hasOwnProperty(source)) {
+      if (_events[source].get(evt)) {
+        response = _events[source].get(evt);
+      } else {
+        _events[source].set(evt, []);
+        response = _events[source].get(evt);
+      }
+    } else {
+      _events[source] = new Map();
+      _events[source].set(evt, []);
+      response = _events[source].get(evt);
+    }
+    return response;
+  };
+
+  /**
+   * Fetches the requested listeners via getListeners but will always return the results inside an object.
+   * 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
+   * @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,
+  ): object {
+    const listeners = _getListeners(evt, source);
+    let response: any;
+
+    if (listeners instanceof Array) {
+      response = {};
+      response[evt] = listeners;
+    }
+
+    return response || listeners;
+  };
+
+  /**
+   * Finds the index of the listener for the event in its storage array.
+   *
+   * @param {Function[]} listeners Array of listeners to search through.
+   * @param {Function} listener Method to look for.
+   * @return {Number} Index of the specified listener, -1 if not found
+   * @api private
+   */
+  const _indexOfListener = function (listeners: any, listener: any): number {
+    var i = listeners.length;
+    while (i--) {
+      if (listeners[i].listener.toString() === listener.toString()) {
+        return i;
+      }
+    }
+    return -1;
+  };
+
+  return {
+    getEvents(source: EventSourceEnum): TEvents | {} {
+      return _events[source] || (_events[source] = new Map());
+    },
+    /**
+     * Adds a listener function to the specified event.
+     * The listener will not be added if it is a duplicate.
+     * If the listener returns true then it will be removed after it is called.
+     *
+     * @param {String} evt Name of the event to attach the listener to.
+     * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
+     * @param {EventSourceEnum} source Name of the bucket to search events from
+     * @return {Object} Current instance of EventUtils
+     */
+    addListener(evt: string, listener: any, source: EventSourceEnum): object {
+      if (!_isValidListener(listener)) {
+        throw new Error('Listener must be a function');
+      }
+      const listeners = _getListenersAsObject(evt, source);
+      const listenerIsWrapped = typeof listener === 'object';
+
+      for (let key in listeners) {
+        if (
+          listeners.hasOwnProperty(key) &&
+          _indexOfListener(listeners[key], listener) === -1
+        ) {
+          listeners[key].push(
+            listenerIsWrapped
+              ? listener
+              : {
+                  listener: listener,
+                  once: false,
+                },
+          );
+        }
+      }
+      return this;
+    },
+
+    /**
+     * Removes a listener function from the specified event.
+     *
+     * @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
+     * @return {Object} Current instance of EventUtils for chaining.
+     */
+    removeListener(
+      evt: string,
+      listenerToRemove: TListener,
+      source: EventSourceEnum,
+    ): Object {
+      let listeners = _getListenersAsObject(evt, source);
+      for (let key in listeners) {
+        if (listeners.hasOwnProperty(key)) {
+          let index = _indexOfListener(listeners[key], listenerToRemove);
+          if (index !== -1) {
+            listeners[key].splice(index, 1);
+          }
+        }
+      }
+      return this;
+    },
+
+    /**
+     * Removes all listeners from a specified event.
+     * If you do not specify an event then all listeners will be removed.
+     * 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
+     * @return {Object} Current instance of EventUtils
+     */
+    removeAllListeners(evt: string, source: EventSourceEnum): object {
+      let type = typeof evt;
+      let events = this.getEvents(source);
+      if (type === 'string') {
+        if (events.has(evt)) {
+          events.delete(evt);
+        }
+      }
+      return this;
+    },
+
+    /**
+     * Removes all events and resets the state.
+     * That means every event will be emptied.
+     *
+     * @param {source} source source Name of the bucket to search events from
+     * @return {Object} Current instance of EventUtils
+     */
+    removeAll(source: EventSourceEnum): object {
+      _events[source] = new Map();
+      return this;
+    },
+
+    /**
+     * Emits an event of your choice.
+     * When emitted, every listener attached to that event will be executed.
+     * If you pass the optional argument array then those arguments will be passed to every listener upon execution.
+     * Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately.
+     * So they will not arrive within the array on the other side, they will be separate.
+     *
+     * @param {String} evt Name of the event to emit and execute listeners for.
+     * @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,
+      );
+      let listeners: TListenerMetaData[];
+      let listener: TListenerMetaData;
+      for (let key in listenersMap) {
+        if (listenersMap.hasOwnProperty(key)) {
+          listeners = listenersMap[key].slice(0);
+          for (let i = 0; i < listeners.length; i++) {
+            // If the listener returns true then it shall be removed from the event
+            // The function is executed either with a basic call or an apply if there is an args array
+            listener = listeners[i];
+
+            if (listener.once === true) {
+              this.removeListener(evt, args.payload.source, listener.listener);
+            }
+
+            const newargs = [].slice.call(arguments, 1);
+            listener.listener.apply(this, newargs || []);
+          }
+        }
+      }
+      return this;
+    },
+    // 1. To add multiple listeners
+    // addListeners(evt: string, listeners: any) {
+    //   if (Array.isArray(listeners)) {
+    //     let i = listeners.length;
+    //     while (i--) {
+    //       this.addListener.call(this, evt, listeners[i]);
+    //     }
+    //   }
+    // },
+    // 2. To add only once listener
+    // addOnceListener(evt: string, listener: TListener) {
+    //   return this.addListener(evt, {
+    //     listener: listener,
+    //     once: true,
+    //   });
+    // },
+  };
+})();
+
+export default EventUtils;

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

@@ -0,0 +1,38 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+
+interface IQueueEvent {
+  data: any;
+  uid: number | string;
+  ts: number;
+}
+
+const EventsQueue = (function () {
+  'use strict';
+
+  let _eventsQueue: any = [];
+
+  return {
+    enqueue(q: IQueueEvent) {
+      _eventsQueue.push(q);
+    },
+    dequeue() {
+      if (_eventsQueue.length == 0) return;
+      _eventsQueue.shift();
+    },
+    printQueue() {
+      return _eventsQueue;
+    },
+  };
+})();
+
+export default EventsQueue;

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

@@ -0,0 +1,40 @@
+/** ***** EVENTS ACTIONS BEGINS***** */
+//  1. RECORDING
+const RECORDING_STARTED = 'RECORDING_STARTED';
+const RECORDING_STOPPED = 'RECORDING_STOPPED';
+// 2. SCREENSHARE
+const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
+const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
+
+const EventActions = {
+  RECORDING_STARTED,
+  RECORDING_STOPPED,
+  SCREENSHARE_STARTED,
+  SCREENSHARE_STOPPED,
+};
+
+/** ***** EVENTS  ACTIONS ENDS ***** */
+
+/** ***** EVENT NAMES BEGINS ***** */
+// 1. RECORDING
+const RECORDING_ATTRIBUTE = 'recording';
+// 2. SCREENSHARE
+const SCREENSHARE_ATTRIBUTE = 'screenshare';
+// 2. LIVE STREAMING
+const RAISED_ATTRIBUTE = 'raised';
+const ROLE_ATTRIBUTE = 'role';
+// 3. CHAT MESSAGES
+const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
+const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
+
+const EventNames = {
+  RECORDING_ATTRIBUTE,
+  RAISED_ATTRIBUTE,
+  ROLE_ATTRIBUTE,
+  PUBLIC_CHAT_MESSAGE,
+  PRIVATE_CHAT_MESSAGE,
+  SCREENSHARE_ATTRIBUTE,
+};
+/** ***** EVENT NAMES ENDS ***** */
+
+export {EventActions, EventNames};

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

@@ -0,0 +1,8 @@
+import EventUtils from './EventUtils';
+import EventsQueue from './EventsQueue';
+
+export * from './constants';
+
+import {eventMessageType} from './types';
+
+export {EventUtils, EventsQueue, eventMessageType};

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

@@ -0,0 +1,7 @@
+export enum eventMessageType {
+  CONTROL_GROUP = 1,
+  CONTROL_PRIVATE,
+  NORMAL_GROUP,
+  NORMAL_PRIVATE,
+  CUSTOM_EVENT,
+}

package/template/src/subComponents/ChatBubble.tsx

@@ -10,31 +10,38 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {View, Text, StyleSheet, Linking, Platform} from 'react-native';
+import {View, Text, StyleSheet, Linking} from 'react-native';
 import Hyperlink from 'react-native-hyperlink';
-import ChatContext, {channelMessage} from '../components/ChatContext';
+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';
 
-const ChatBubble = (props: channelMessage) => {
-  const {userList} = useContext(ChatContext);
+const ChatBubble = (props: ChatBubbleProps) => {
+  const {renderList} = useUserList();
   const {primaryColor} = useContext(ColorContext);
-  let {isLocal, msg, ts, uid} = props;
+  let {isLocal, message, timestamp, uid} = props;
   let time =
-    new Date(parseInt(ts)).getHours() +
+    new Date(parseInt(timestamp)).getHours() +
     ':' +
-    new Date(parseInt(ts)).getMinutes();
+    new Date(parseInt(timestamp)).getMinutes();
   const handleUrl = (url: string) => {
-    if (Platform.OS === 'web') {
+    if (isWeb) {
       window.open(url, '_blank');
     } else {
       Linking.openURL(url);
     }
   };
+  //commented for v1 release
+  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  const remoteUserDefaultLabel = 'User';
   return (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
         <Text style={isLocal ? style.timestampTextLocal : style.timestampText}>
-          {userList[uid] ? userList[uid].name : 'User'} | {time + ' '}
+          {renderList[uid] ? renderList[uid].name : remoteUserDefaultLabel} |{' '}
+          {time + ' '}
         </Text>
       </View>
       <View
@@ -54,7 +61,7 @@ const ChatBubble = (props: channelMessage) => {
           <Text
             style={isLocal ? style.whiteText : style.blackText}
             selectable={true}>
-            {msg.slice(1) + ' '}
+            {message}
           </Text>
         </Hyperlink>
       </View>
@@ -86,7 +93,7 @@ const style = StyleSheet.create({
     fontWeight: '500',
     fontSize: 12,
     flex: 1,
-    // textAlign: 'right',
+    textAlign: 'left',
   },
   timestampTextLocal: {
     color: $config.PRIMARY_FONT_COLOR + '60',

package/template/src/subComponents/ChatContainer.tsx

@@ -14,16 +14,24 @@ import {
   View,
   ScrollView,
   StyleSheet,
-  TouchableOpacity,
   Platform,
   Text,
   useWindowDimensions,
+  TouchableOpacity,
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
-import ChatContext from '../components/ChatContext';
+import ChatContext, {ChatBubbleProps} from '../components/ChatContext';
+import {BtnTemplate} 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 {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';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -31,14 +39,53 @@ import TextWithTooltip from './TextWithTooltip';
  * and maps it to a ChatBubble
  */
 const ChatContainer = (props: any) => {
-  const {userList} = useContext(ChatContext);
+  const {renderList} = useUserList();
+  const messageStore = useGroupMessages();
+  const getPrivateMessage = usePrivateMessages();
+  const privateMessageStore = getPrivateMessage();
   const {height, width} = useWindowDimensions();
-  const {selectedUserID, privateActive, setPrivateActive, selectedUsername} =
-    props;
-  const {messageStore, localUid, privateMessageStore} = useContext(ChatContext);
-
+  const {selectPrivate} = props;
+  const {
+    privateActive,
+    selectedChatUserId: selectedUserID,
+    setPrivateActive,
+  } = useChatUIControl();
+  const {localUid} = useContext(ChatContext);
+  //commented for v1 release
+  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
+  const {ChatBubbleComponent} = useFpe((data) => {
+    let components: {
+      ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
+    } = {
+      ChatBubbleComponent: ChatBubble,
+    };
+    if (
+      data?.components?.videoCall &&
+      typeof data?.components?.videoCall === 'object'
+    ) {
+      // commented for v1 release
+      // if (
+      //   data?.components?.videoCall?.chat &&
+      //   typeof data?.components?.videoCall?.chat === 'object'
+      // ) {
+      //   if (
+      //     data?.components?.videoCall?.chat?.chatBubble &&
+      //     typeof data?.components?.videoCall?.chat?.chatBubble !== 'object' &&
+      //     isValidReactComponent(data?.components?.videoCall?.chat?.chatBubble)
+      //   ) {
+      //     components.ChatBubbleComponent =
+      //       data?.components?.videoCall?.chat?.chatBubble;
+      //   }
+      // }
+    }
+    return components;
+  });
+  //commented for v1 release
+  //const userOfflineLabel = useString('userOfflineLabel')();
+  const userOfflineLabel = 'User is offline';
   return (
     <View style={style.containerView}>
       {privateActive && (
@@ -57,7 +104,11 @@ const ChatContainer = (props: any) => {
                   fontSize: RFValue(16, height > width ? height : width),
                 },
               ]}
-              value={selectedUsername}
+              value={
+                renderList[selectedUserID]
+                  ? renderList[selectedUserID]?.name + ' '
+                  : remoteUserDefaultLabel + ' '
+              }
             />
           </View>
         </TouchableOpacity>
@@ -68,35 +119,33 @@ const ChatContainer = (props: any) => {
           scrollViewRef.current?.scrollToEnd({animated: true});
         }}>
         {!privateActive ? (
-          messageStore.map((message: any) => {
-            return (
-              <ChatBubble
+          messageStore.map((message: any) => (
+            <>
+              <ChatBubbleComponent
                 isLocal={localUid === message.uid}
-                msg={message.msg}
-                ts={message.ts}
+                message={message.msg}
+                timestamp={message.ts}
                 uid={message.uid}
                 key={message.ts}
               />
-            );
-          })
+            </>
+          ))
         ) : privateMessageStore[selectedUserID] ? (
-          privateMessageStore[selectedUserID].map((message: any) => {
-            return (
-              <ChatBubble
-                isLocal={localUid === message.uid}
-                msg={message.msg}
-                ts={message.ts}
-                uid={message.uid}
-                key={message.ts}
-              />
-            );
-          })
+          privateMessageStore[selectedUserID].map((message: any) => (
+            <ChatBubbleComponent
+              isLocal={localUid === message.uid}
+              message={message.msg}
+              timestamp={message.ts}
+              uid={message.uid}
+              key={message.ts}
+            />
+          ))
         ) : (
           <></>
         )}
-        {userList[selectedUserID]?.offline && (
+        {renderList[selectedUserID]?.offline && (
           <View style={style.infoTextView}>
-            <Text style={style.infoText}>User is offline</Text>
+            <Text style={style.infoText}>{userOfflineLabel}</Text>
           </View>
         )}
       </ScrollView>
@@ -126,7 +175,7 @@ const style = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   name: {
-    fontWeight: Platform.OS === 'web' ? '500' : '700',
+    fontWeight: isWeb ? '500' : '700',
     color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
     marginRight: 10,