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

package/template/src/components/useShareLink.tsx

@@ -0,0 +1,237 @@
+/*
+********************************************
+ Copyright © 2021 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 {createHook} from 'fpe-implementation';
+import React from 'react';
+import {useString} from '../utils/useString';
+import isSDKCheck from '../utils/isSDK';
+import Toast from '../../react-native-toast-message';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import platform from '../subComponents/Platform';
+import {
+  GetMeetingInviteID,
+  GetMeetingInviteURL,
+} from '../utils/getMeetingInvite';
+import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
+import Clipboard from '../subComponents/Clipboard';
+
+export enum SHARE_LINK_CONTENT_TYPE {
+  ATTENDEE = 1,
+  HOST,
+  PSTN,
+  MEETING_INVITE,
+}
+
+export interface ShareLinkContextInterface {
+  copyShareLinkToClipboard: (type: SHARE_LINK_CONTENT_TYPE) => void;
+  getShareLink: (type: SHARE_LINK_CONTENT_TYPE) => string;
+}
+const ShareLinkContext = React.createContext<ShareLinkContextInterface>({
+  copyShareLinkToClipboard: () => {},
+  getShareLink: () => '',
+});
+
+interface ShareLinkProvideProps {
+  children: React.ReactNode;
+}
+
+const ShareLinkProvider = (props: ShareLinkProvideProps) => {
+  const {meetingTitle, meetingPassphrase, isSeparateHostLink, isHost} =
+    useMeetingInfo();
+
+  //commmented for v1 release
+  // const copiedToClipboardText = useString(
+  //   'copiedToClipboardNotificationLabel',
+  // )();
+  // const meetingIdText = useString('meetingIdLabel')();
+  // const PSTNNumberText = useString('PSTNNumber')();
+  // const PSTNPinText = useString('PSTNPin')();
+  // const meetingInviteText =
+  //   useString<MeetingInviteInterface>('meetingInviteText');
+  const copiedToClipboardText = 'Copied to Clipboard';
+  const meetingIdText = 'Meeting ID';
+  const PSTNNumberText = 'PSTN Number';
+  const PSTNPinText = 'PSTN Pin';
+  const meetingInviteText = ({
+    meetingName,
+    id,
+    url,
+    pstn,
+    isHost,
+    isSeparateHostLink,
+  }: MeetingInviteInterface) => {
+    let inviteContent = '';
+    if (url) {
+      //for host
+      if (isHost) {
+        if (isSeparateHostLink) {
+          //seperate link for host and attendee
+          inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
+        } else {
+          //single link for everyone
+          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.host}`;
+        }
+      }
+      //for attendee
+      else {
+        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
+      }
+    } else {
+      if (isHost) {
+        if (isSeparateHostLink) {
+          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
+        } else {
+          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.host}`;
+        }
+      } else {
+        //copy this label on videocall screen
+        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
+      }
+    }
+    // Adding pstn data into meeting data if present
+    if (pstn?.number && pstn?.pin) {
+      inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
+    }
+    return inviteContent;
+  };
+
+  const isSDK = isSDKCheck();
+
+  const getMeetingInvite = () => {
+    let baseURL = getBaseURL();
+    let stringToCopy = meetingInviteText({
+      meetingName: meetingTitle,
+      url: baseURL
+        ? GetMeetingInviteURL(
+            baseURL,
+            isHost,
+            meetingPassphrase,
+            isSeparateHostLink,
+          )
+        : undefined,
+      id: !baseURL
+        ? GetMeetingInviteID(isHost, meetingPassphrase, isSeparateHostLink)
+        : undefined,
+      pstn: meetingPassphrase?.pstn
+        ? {
+            number: meetingPassphrase.pstn.number,
+            pin: meetingPassphrase.pstn.pin,
+          }
+        : undefined,
+      isHost,
+      isSeparateHostLink,
+    });
+    return stringToCopy;
+  };
+
+  const getBaseURL = () => {
+    let baseURL =
+      platform === 'web' && !isSDK
+        ? $config.FRONTEND_ENDPOINT || window.location.origin
+        : undefined;
+    return baseURL;
+  };
+
+  const getAttendeeURLOrId = () => {
+    let stringToCopy = '';
+    let baseURL = getBaseURL();
+    if (meetingPassphrase?.attendee) {
+      if (baseURL) {
+        stringToCopy += `${baseURL}/${meetingPassphrase.attendee}`;
+      } else {
+        stringToCopy += `${meetingPassphrase.attendee}`;
+      }
+    }
+    return stringToCopy;
+  };
+
+  const getHostUrlOrId = () => {
+    let stringToCopy = '';
+    if (meetingPassphrase?.host) {
+      let baseURL = getBaseURL();
+      if (baseURL) {
+        stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
+      } else {
+        stringToCopy += `${meetingPassphrase.host}`;
+      }
+    }
+    return stringToCopy;
+  };
+
+  const getPstn = () => {
+    let stringToCopy = '';
+    if (
+      meetingPassphrase?.pstn &&
+      meetingPassphrase.pstn?.number &&
+      meetingPassphrase.pstn?.pin
+    ) {
+      stringToCopy += `${PSTNNumberText}: ${meetingPassphrase.pstn.number} ${PSTNPinText}: ${meetingPassphrase.pstn.pin}`;
+    }
+
+    return stringToCopy;
+  };
+
+  const getShareLink = (input: SHARE_LINK_CONTENT_TYPE) => {
+    let stringToCopy = '';
+    switch (input) {
+      case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
+        stringToCopy = getMeetingInvite();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.ATTENDEE:
+        stringToCopy = getAttendeeURLOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.HOST:
+        stringToCopy = getHostUrlOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.PSTN:
+        stringToCopy = getPstn();
+      default:
+        break;
+    }
+    return stringToCopy;
+  };
+
+  const copyShareLinkToClipboard = (input: SHARE_LINK_CONTENT_TYPE) => {
+    let stringToCopy = '';
+    switch (input) {
+      case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
+        stringToCopy = getMeetingInvite();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.ATTENDEE:
+        stringToCopy = getAttendeeURLOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.HOST:
+        stringToCopy = getHostUrlOrId();
+        break;
+      case SHARE_LINK_CONTENT_TYPE.PSTN:
+        stringToCopy = getPstn();
+      default:
+        break;
+    }
+    Clipboard.setString(stringToCopy);
+    Toast.show({
+      type: 'success',
+      text1: copiedToClipboardText,
+      visibilityTime: 1000,
+    });
+  };
+
+  return (
+    <ShareLinkContext.Provider value={{copyShareLinkToClipboard, getShareLink}}>
+      {props.children}
+    </ShareLinkContext.Provider>
+  );
+};
+
+const useShareLink = createHook(ShareLinkContext);
+
+export {ShareLinkProvider, ShareLinkContext, useShareLink};

package/template/src/components/useUserPreference.tsx

@@ -0,0 +1,125 @@
+/*
+********************************************
+ Copyright © 2021 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 React, {useState, useContext, useEffect} from 'react';
+import {RenderInterface, useLocalUid} from '../../agora-rn-uikit';
+import {RtcContext} from '../../agora-rn-uikit';
+import {useString} from '../utils/useString';
+import StorageContext from './StorageContext';
+import CustomEvents, {EventLevel} from '../custom-events';
+import {EventNames} from '../rtm-events';
+import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
+import {createHook} from 'fpe-implementation';
+import ChatContext from './ChatContext';
+
+interface UserPreferenceContextInterface {
+  displayName: string;
+  setDisplayName: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserPreferenceContext =
+  React.createContext<UserPreferenceContextInterface>({
+    displayName: '',
+    setDisplayName: () => {},
+  });
+
+const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
+  const localUid = useLocalUid();
+  const screenShareUid = useLocalScreenShareUid();
+  const {dispatch} = useContext(RtcContext);
+
+  const {store, setStore} = useContext(StorageContext);
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const getInitialUsername = () =>
+    store?.displayName ? store.displayName : '';
+  const [displayName, setDisplayName] = useState(getInitialUsername());
+
+  //commented for v1 release
+  // const userText = useString('remoteUserDefaultLabel')();
+  const userText = 'User';
+  const pstnUserLabel = useString('pstnUserLabel')();
+  //commented for v1 release
+  //const getScreenShareName = useString('screenshareUserName');
+  const getScreenShareName = (name: string) => `${name}'s screenshare`;
+
+  useEffect(() => {
+    CustomEvents.on(EventNames.NAME_ATTRIBUTE, (data) => {
+      const value = JSON.parse(data?.payload?.value);
+      if (value) {
+        if (value?.uid) {
+          updateRenderListState(value?.uid, {
+            name:
+              String(value?.uid)[0] === '1'
+                ? pstnUserLabel
+                : value?.name || userText,
+          });
+        }
+        if (value?.screenShareUid) {
+          updateRenderListState(value?.screenShareUid, {
+            name: getScreenShareName(value?.name || userText),
+          });
+        }
+      }
+    });
+    return () => {
+      CustomEvents.off(EventNames.NAME_ATTRIBUTE);
+    };
+  }, []);
+
+  useEffect(() => {
+    //Update the store displayName value if the state is changed
+    setStore((prevState) => {
+      return {
+        ...prevState,
+        displayName,
+      };
+    });
+
+    //update local state for user and screenshare
+    updateRenderListState(localUid, {name: displayName || userText});
+    updateRenderListState(screenShareUid, {
+      name: getScreenShareName(displayName || userText),
+    });
+
+    if (hasUserJoinedRTM) {
+      //update remote state for user and screenshare
+      CustomEvents.send(EventNames.NAME_ATTRIBUTE, {
+        value: JSON.stringify({
+          uid: localUid,
+          screenShareUid: screenShareUid,
+          name: displayName || userText,
+        }),
+        level: EventLevel.LEVEL2,
+      });
+    }
+  }, [displayName, hasUserJoinedRTM]);
+
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<RenderInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
+
+  return (
+    <UserPreferenceContext.Provider
+      value={{
+        setDisplayName,
+        displayName,
+      }}>
+      {props.children}
+    </UserPreferenceContext.Provider>
+  );
+};
+
+const useUserPreference = createHook(UserPreferenceContext);
+
+export {useUserPreference, UserPreferenceProvider};

package/template/src/components/useWakeLock.tsx

@@ -1,10 +1,10 @@
 import NoSleep from 'nosleep.js';
 import React from 'react';
-import {Platform} from 'react-native';
-import mobileAndTabletCheck from '../utils/mobileWebTest';
+import mobileAndTabletCheck from '../utils/isMobileOrTablet';
+import {isWeb} from '../utils/common';
 
 const useWakeLock = () => {
-  if (mobileAndTabletCheck() && Platform.OS == 'web') {
+  if (mobileAndTabletCheck() && isWeb) {
     const noSleep = React.useMemo(() => new NoSleep(), []);
     const [awake, set] = React.useState(noSleep.isEnabled);
 

package/template/src/custom-events/CustomEvents.ts

@@ -0,0 +1,238 @@
+/*
+********************************************
+ 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 {ToOptions, EventPayload} from './types';
+import {EventUtils, eventMessageType} from '../rtm-events';
+import {TEventCallback, EventSourceEnum} from './types';
+import {adjustUID} from '../rtm/utils';
+
+class CustomEvents {
+  private engine!: RtmEngine;
+  private source: EventSourceEnum = EventSourceEnum.core;
+
+  constructor(source?: EventSourceEnum) {
+    this.engine = RTMEngine.getInstance().engine;
+    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 {any} payload to be stored in rtm Attribute value
+   * @api private
+   */
+  private _persist = async (evt: string, payload: any) => {
+    try {
+      const localUserId = RTMEngine.getInstance().localUid;
+      const rtmAttribute = {key: evt, value: JSON.stringify(payload)};
+      // Step 1: Call RTM API to update local attributes
+      await this.engine.addOrUpdateLocalUserAttributes([rtmAttribute]);
+    } catch (error) {
+      console.log(
+        'CUSTOM_EVENT_API error occured while updating the value ',
+        error,
+      );
+    }
+  };
+
+  /**
+   *
+   */
+  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;
+  };
+
+  private _validateListener = (listener: TEventCallback): 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 '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.
+   *
+   * @param {any} rtmPayload payload to be sent across
+   * @param {ToOptions} to uid or uids[] of user
+   * @api private
+   */
+  private _send = async (rtmPayload: any, toUid?: ToOptions) => {
+    const to = typeof toUid == 'string' ? parseInt(toUid) : toUid;
+
+    const text = JSON.stringify({
+      type: eventMessageType.CUSTOM_EVENT,
+      msg: 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 this.engine.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 this.engine.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 this.engine.sendMessageToPeer({
+            peerId: `${adjustedUID}`,
+            offline: false,
+            text,
+          });
+        }
+      } catch (error) {
+        console.log('CUSTOM_EVENT_API: send event case 3 error : ', error);
+        throw error;
+      }
+    }
+  };
+
+  /**
+   * Listens for a specified event.
+   * Adds a listener function to the specified event.
+   * 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 {Function} listener Method to be called when the event is emitted.
+   * @api public
+   */
+  on = (evt: string, listener: TEventCallback) => {
+    try {
+      if (!this._validateEvt(evt) || !this._validateListener(listener)) return;
+      EventUtils.addListener(evt, 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 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.
+   * @api public
+   */
+  off = (evt?: string, listenerToRemove?: TEventCallback) => {
+    try {
+      if (listenerToRemove) {
+        if (
+          this._validateListener(listenerToRemove) &&
+          this._validateEvt(evt)
+        ) {
+          EventUtils.removeListener(evt, listenerToRemove, this.source);
+        }
+      } else if (evt) {
+        if (this._validateEvt(evt)) {
+          EventUtils.removeAllListeners(evt, this.source);
+        }
+      } else {
+        EventUtils.removeAll(this.source);
+      }
+    } catch (error) {
+      console.log('custom-events-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.
+   *
+   *
+   * @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.
+   * @api public
+   * */
+  send = async (evt: string, payload: EventPayload, to?: ToOptions) => {
+    if (!this._validateEvt(evt)) return;
+    const {action = '', value = '', level = 1} = payload;
+
+    const rtmPayload = {
+      evt: evt,
+      payload: {
+        action,
+        value,
+        level,
+        source: this.source,
+      },
+    };
+
+    if (level === 2 || level === 3) {
+      console.log('CUSTOM_EVENT_API: Event lifecycle: persist', level);
+      try {
+        await this._persist(evt, {...payload, source: this.source});
+      } catch (error) {
+        console.log('custom-events-persist error: ', error);
+      }
+    }
+    try {
+      await this._send(rtmPayload, to);
+    } catch (error) {
+      console.log('CUSTOM_EVENT_API: sending failed. ', error);
+    }
+  };
+}
+
+export default CustomEvents;

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

@@ -0,0 +1,4 @@
+import CustomEvents from './CustomEvents';
+
+export * from './types';
+export default new CustomEvents();

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

@@ -0,0 +1,51 @@
+import {UidType} from '../../agora-rn-uikit';
+type Simplify<T> = T extends infer S ? {[K in keyof S]: S[K]} : never;
+type NoneOf<T> = Simplify<{[K in keyof T]?: never}>;
+type AtMostOneOf<T> =
+  | NoneOf<T>
+  | {[K in keyof T]: Simplify<Pick<T, K> & NoneOf<Omit<T, K>>>}[keyof T];
+
+// export type TEventOptions = AtMostOneOf<IMessageOptions> & IEventOptions;
+
+export type ToOptions = UidType | UidType[];
+
+interface IEventPayloadBase {
+  action?: any;
+}
+
+interface IEventPayloadWithoutAttributes extends IEventPayloadBase {
+  level?: never;
+  value: string;
+}
+
+interface IEventPayloadWithAttributes extends IEventPayloadBase {
+  level: 2 | 3;
+  value: string;
+}
+
+export type EventPayload =
+  | IEventPayloadWithoutAttributes
+  | IEventPayloadWithAttributes
+  | Record<string, never>;
+
+export enum EventSourceEnum {
+  core = 'core',
+  fpe = 'fpe',
+}
+export enum EventLevel {
+  'LEVEL1' = 1,
+  'LEVEL2',
+  'LEVEL3',
+}
+interface dataPayload {
+  action: string;
+  level: 1 | 2 | 3;
+  value: string;
+}
+interface EvtCbPayload {
+  payload: dataPayload;
+  sender: string;
+  ts: number;
+  source: EventSourceEnum;
+}
+export type TEventCallback = (args: EvtCbPayload) => void;

package/template/src/language/default-labels/commonLabels.ts

@@ -0,0 +1,21 @@
+import {I18nBaseType} from '../i18nTypes';
+
+export interface I18nCommonLabelsInterface {
+  //commented for v1 release
+  // goBackButton?: I18nBaseType; //
+  // logoutButton?: I18nBaseType; //
+  // googleAuthButton?: I18nBaseType; //
+  // microsoftAuthButton?: I18nBaseType; //
+  // slackAuthButton?: I18nBaseType; //
+  // appleAuthButton?: I18nBaseType; //
+}
+
+export const CommonLabels: I18nCommonLabelsInterface = {
+  //commented for v1 release
+  // goBackButton: 'Go back',
+  // logoutButton: 'Logout',
+  // googleAuthButton: 'Google',
+  // microsoftAuthButton: 'Microsoft',
+  // slackAuthButton: 'Slack',
+  // appleAuthButton: 'Apple',
+};