agora-appbuilder-core 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/app-state.ts

@@ -7,8 +7,13 @@ import {RtcContext, RenderContext} from '../agora-rn-uikit';
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
 //import {default as StorageContext} from '../src/components/StorageContext';
-
+/**
+ * The RTC app state exposes the internal RtcEngine object as well as dispatch interface to perform various actions.
+ */
 export const useRtc = createHook(RtcContext);
+/**
+ * The Render app state governs the information necessary to render each user content view displayed in the videocall screen.
+ */
 export const useRender = createHook(RenderContext);
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 

package/template/customization-api/utils.ts

@@ -25,6 +25,6 @@ export {default as useIsVideoEnabled} from '../src/utils/useIsVideoEnabled';
 export {useHistory, useParams} from '../src/components/Router';
 
 //export common function
-export {isWeb, isIOS, isAndroid, isDestop} from '../src/utils/common';
+export {isWeb, isIOS, isAndroid, isDesktop} from '../src/utils/common';
 export {default as isMobileOrTablet} from '../src/utils/isMobileOrTablet';
 export {useLocalUid} from '../agora-rn-uikit';

package/template/src/app-state/useLocalUserInfo.ts

@@ -1,6 +1,9 @@
 import {useLocalUid} from '../../agora-rn-uikit';
 import {useRender} from 'customization-api';
 
+/**
+ * The LocalUserInfo app state contains the local user information like uid, audio and video mute states etc.
+ */
 export const useLocalUserInfo = () => {
   const localUid = useLocalUid();
   const {renderList} = useRender();

package/template/src/app-state/useMessages.ts

@@ -23,6 +23,9 @@ export interface messageInterface {
   >;
 }
 
+/**
+ * The Messages app state governs the chat messages.
+ */
 export const useMessages: () => messageInterface = () => {
   const {
     deleteChatMessage: deleteMessage,

package/template/src/components/chat-ui/useChatUIControl.tsx

@@ -61,6 +61,9 @@ const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
   );
 };
 
+/**
+ * The ChatUIControl app state governs the chat ui.
+ */
 const useChatUIControl = createHook(ChatUIControlContext);
 
 export {ChatUIControlProvider, useChatUIControl};

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -62,6 +62,9 @@ const MeetingInfoProvider = (props: MeetingInfoProviderProps) => {
     </MeetingInfoContext.Provider>
   );
 };
+/**
+ * The MeetingInfo app state contains information about the active meeting.
+ */
 const useMeetingInfo = createHook(MeetingInfoContext);
 
 export {MeetingInfoProvider, useMeetingInfo};

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

@@ -34,8 +34,8 @@ class Events {
   /**
    * 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
+   * @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) => {
@@ -53,7 +53,10 @@ class Events {
   };
 
   /**
+   * event type validator.
    *
+   * @api private
+   * @returns {boolean}
    */
   private _validateEvt = (evt: string): boolean => {
     if (typeof evt !== 'string') {
@@ -67,6 +70,12 @@ class Events {
     return true;
   };
 
+  /**
+   * event listener validator
+   *
+   * @api private
+   * @returns {boolean}
+   */
   private _validateListener = (listener: EventCallback): boolean => {
     if (typeof listener !== 'function') {
       throw Error(
@@ -77,13 +86,13 @@ class Events {
   };
 
   /**
-   * Sets the local attribute of user if  persist level is 2 or 3.
-   * If param 'to' is not provided, message is sent in the channel.
-   * If param 'to' is provided message is sent to that individual.
-   * If param 'to' is an array of uids is provided then message is sent to all the individual uids in loop.
+   * 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 {any} rtmPayload payload to be sent across
-   * @param {toUid} to uid or uids[] of user
+   * @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) => {
@@ -142,16 +151,16 @@ class Events {
   };
 
   /**
-   * Listens for a specified event.
-   * Adds a listener function to the specified event.
+   * 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 if it is a duplicate.
+   * The listener will not be added/listened if it is a duplicate.
    *
-   * @param {String} eventName Name of the event to attach the listener to.
+   * @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) => {
+  on = (eventName: string, listener: EventCallback): Function => {
     try {
       if (!this._validateEvt(eventName) || !this._validateListener(listener))
         return;
@@ -160,54 +169,57 @@ class Events {
         EventUtils.removeListener(eventName, listener, this.source);
       };
     } catch (error) {
-      console.log('custom-events-on error: ', error);
+      console.log('CUSTOM_EVENT_API on error: ', error);
     }
   };
 
   /**
-   * 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.
+   * 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 Method to remove from the event.
+   * @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-events-off error: ', error);
+      console.log('CUSTOM_EVENT_API off error: ', error);
     }
   };
 
   /**
-   * This method sends p2p or channel message depending upon the 'to' value.
-   *  - If 'to' is provided this method sends p2p message.
-   *  - If 'to' is empty this method sends channel message.
+   * 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 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.
+   * @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,
-    receiver?: ReceiverUid,
+    persistLevel: EventPersistLevel = EventPersistLevel.LEVEL1,
+    receiver: ReceiverUid = -1,
   ) => {
     if (!this._validateEvt(eventName)) return;
 
@@ -226,11 +238,10 @@ class Events {
       persistLevel === EventPersistLevel.LEVEL2 ||
       persistLevel === EventPersistLevel.LEVEL3
     ) {
-      console.log('CUSTOM_EVENT_API: Event lifecycle: persist', persistLevel);
       try {
         await this._persist(eventName, persistValue);
       } catch (error) {
-        console.log('custom-events-persist error: ', error);
+        console.log('CUSTOM_EVENT_API persist error: ', error);
       }
     }
     try {

package/template/src/subComponents/SelectDevice.tsx

@@ -111,8 +111,9 @@ const SelectDevice = () => {
   const [isPickerDisabled] = useSelectDevice();
   //commented for v1 release
   // const settingScreenInfoMessage = useString('settingScreenInfoMessage')();
-  const settingScreenInfoMessage =
-    'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.';
+  const settingScreenInfoMessage = $config.AUDIO_ROOM
+    ? 'Audio sharing is disabled for attendees. Raise hand to request permission to share.'
+    : 'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.';
   return (
     <View>
       <View style={{marginTop: 15}}></View>

package/template/src/subComponents/recording/useRecording.tsx

@@ -224,7 +224,9 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     </RecordingContext.Provider>
   );
 };
-
+/**
+ * The Recording app state governs the App Builder cloud recording functionality.
+ */
 const useRecording = createHook(RecordingContext);
 
 export {RecordingProvider, useRecording};

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -163,7 +163,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     if (isRecordingActive) {
       executeRecordingQuery(isActive);
     }
-    console.log('supriya screenshare query executed');
+    console.log('screenshare query executed');
     try {
       // @ts-ignore
       await rtc.RtcEngine.startScreenshare(

package/template/src/utils/common.tsx

@@ -29,17 +29,33 @@ const shouldAuthenticate: boolean =
 //for our internal usage don't check Platform - electron and web will same kind ui checks. thats why we have isWeb for external usage
 const isWebInternal = () => ReactNativePlatform.OS === 'web';
 
+/**
+ * Checks whether the application is running as a web app and returns true/false.
+ * @returns function
+ */
 const isWeb = () => Platform === 'web' && ReactNativePlatform.OS === 'web';
 
+/**
+ * Checks whether the application is running as an android app and returns true/false.
+ * @returns function
+ */
 const isAndroid = () =>
   //@ts-ignore
   Platform === 'native' && ReactNativePlatform.OS === 'android';
 
+/**
+ * Checks whether the application is running as an iOS app and returns true/false.
+ * @returns function
+ */
 //@ts-ignore
 const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
 
+/**
+ * Checks whether the application is running as an electron desktop app and returns true/false.
+ * @returns function
+ */
 //@ts-ignore
-const isDestop = () => Platform === 'electron';
+const isDesktop = () => Platform === 'electron';
 
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
@@ -49,7 +65,7 @@ export {
   isIOS,
   isWebInternal,
   isWeb,
-  isDestop,
+  isDesktop,
   shouldAuthenticate,
   isArray,
   isValidReactComponent,

package/template/src/utils/isMobileOrTablet.native.ts

@@ -1,3 +1,7 @@
+/**
+ * Checks whether the application is running as a web application on a mobile or tablet device and returns true/false.
+ * @returns function
+ */
 const isMobileOrTablet = () => {
   return true;
 };

package/template/src/utils/isMobileOrTablet.ts

@@ -4,6 +4,10 @@ declare global {
   }
 }
 
+/**
+ * Checks whether the application is running as a web application on a mobile or tablet device and returns true/false.
+ * @returns function
+ */
 const isMobileOrTablet = () => {
   let check = false;
   (function (a) {

package/template/src/utils/useCreateMeeting.ts

@@ -27,6 +27,9 @@ const CREATE_CHANNEL = gql`
     }
   }
 `;
+/**
+ * Returns an asynchronous function to create a meeting with the given options.
+ */
 export default function useCreateMeeting() {
   const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
   const {setMeetingInfo} = useSetMeetingInfo();

package/template/src/utils/useIsAttendee.ts

@@ -9,28 +9,22 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
 import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
 import {UidType} from '../../agora-rn-uikit';
+import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
 
+/**
+ * Returns a function that checks whether the given uid is an attendee and returns true/false
+ * @returns function
+ */
 function useIsAttendee() {
-  if ($config.EVENT_MODE) {
-    const {audienceUids} = useLiveStreamDataContext();
-    const isAttendee = (uid: UidType) => {
-      return audienceUids.filter((audienceUid) => audienceUid === uid).length
-        ? true
-        : false;
-    };
-    return isAttendee;
-  } else {
-    const {
-      data: {isHost},
-    } = useMeetingInfo();
-    const isAttendee = (uid: UidType) => {
-      return !isHost ? true : false;
-    };
-    return isAttendee;
-  }
+  const {audienceUids: lsAudienceUids} = useLiveStreamDataContext();
+  const {attendeeUids: vmAudienceUids} = useVideoMeetingData();
+  const isAttendee = (uid: UidType) => {
+    const attUidsData = $config.EVENT_MODE ? lsAudienceUids : vmAudienceUids;
+    return attUidsData.filter((attId) => attId === uid).length ? true : false;
+  };
+  return isAttendee;
 }
 
 export default useIsAttendee;

package/template/src/utils/useIsAudioEnabled.ts

@@ -13,6 +13,10 @@ import {useRender} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 
+/**
+ * Returns a function that checks the audio state for a given uid and returns true/false
+ * @returns function
+ */
 function useIsAudioEnabled() {
   const {renderList} = useRender();
   /**

package/template/src/utils/useIsHost.ts

@@ -13,6 +13,10 @@ import {UidType} from '../../agora-rn-uikit';
 import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
 import {useVideoMeetingData} from '../components/contexts/VideoMeetingDataContext';
 
+/**
+ * Returns a function that checks whether the given uid is a host and returns true/false
+ * @returns function
+ */
 function useIsHost() {
   const {hostUids: liveStreamHostUids} = useLiveStreamDataContext();
   const {hostUids: videoMeetingHostUids} = useVideoMeetingData();

package/template/src/utils/useIsPSTN.ts

@@ -11,8 +11,9 @@
 */
 import {useRender} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
+
 /**
- * This hook will return the function to check whether the current user is a PSTN user or not
+ * Returns a function that checks whether the given uid is a PSTN user and returns true/false
  * @returns function
  */
 function useIsPSTN() {

package/template/src/utils/useIsScreenShare.ts

@@ -13,7 +13,7 @@ import {UidType} from '../../agora-rn-uikit';
 import {useScreenContext} from '../components/contexts/ScreenShareContext';
 
 /**
- * This hook will return the function to check whether the screen is shared or not
+ * This hook will return the function which take UID and return true if screensharing active on the UID
  * @returns function
  */
 function useIsScreenShare() {

package/template/src/utils/useIsVideoEnabled.ts

@@ -12,6 +12,10 @@
 import {useRender} from 'customization-api';
 import {UidType, ToggleState} from '../../agora-rn-uikit';
 
+/**
+ * Returns a function that checks the video state for a given uid and returns true/false
+ * @returns function
+ */
 function useIsVideoEnabled() {
   const {renderList} = useRender();
 

package/template/src/utils/useJoinMeeting.ts

@@ -50,7 +50,9 @@ const JOIN_CHANNEL_PHRASE = gql`
     }
   }
 `;
-
+/**
+ * Returns an asynchronous function to join a meeting with the given phrase.
+ */
 export default function useJoinMeeting() {
   const {store} = useContext(StorageContext);
   const {setMeetingInfo} = useSetMeetingInfo();

package/template/src/utils/useLayout.tsx

@@ -34,7 +34,9 @@ const LayoutProvider = (props: LayoutProviderProps) => {
     </LayoutContext.Provider>
   );
 };
-
+/**
+ * The Layout app state governs the video call screen content display layout.
+ */
 const useLayout = createHook(LayoutContext);
 
 export {LayoutProvider, useLayout};

package/template/src/utils/useMuteToggleLocal.ts

@@ -16,6 +16,9 @@ export enum MUTE_LOCAL_TYPE {
   audio,
   video,
 }
+/**
+ * Returns an asynchronous function to toggle muted state of the given track type for the local user.
+ */
 function useMuteToggleLocal() {
   const {RtcEngine, dispatch} = useRtc();
   const local = useLocalUserInfo();

package/template/src/utils/useRemoteEndCall.ts

@@ -4,6 +4,9 @@ import useIsPSTN from './useIsPSTN';
 import {UidType} from '../../agora-rn-uikit';
 import events, {EventPersistLevel} from '../rtm-events-api';
 
+/**
+ * Returns a function to end the call for a remote user with the given uid.
+ */
 const useRemoteEndCall = () => {
   const {
     data: {isHost},

package/template/src/utils/useRemoteMute.ts

@@ -20,6 +20,9 @@ export enum MUTE_REMOTE_TYPE {
   audio,
   video,
 }
+/**
+ * Returns an asynchronous function to toggle muted state of the given track type for a remote user with the given uid or if no uid provided, mutes everyone else in the meeting.
+ */
 function useRemoteMute() {
   const {
     data: {isHost},

package/template/src/utils/useSidePanel.tsx

@@ -36,6 +36,9 @@ const SidePanelProvider = (props: SidePanelProviderProps) => {
   );
 };
 
+/**
+ * The Side panel app state governs the side panel.
+ */
 const useSidePanel = createHook(SidePanelContext);
 
 export {SidePanelProvider, useSidePanel};

package/template/src/utils/useUserName.ts

@@ -1,6 +1,9 @@
 import useSetName from './useSetName';
 import useGetName from './useGetName';
 
+/**
+ * The UserName app state governs the local user's display name.
+ */
 export default function useUserName(): [
   string,
   React.Dispatch<React.SetStateAction<string>>,