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

package/template/src/components/useShareLink.tsx

@@ -0,0 +1,239 @@
+/*
+********************************************
+ 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,
+  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,
+    isJoinDataFetched,
+  } = 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, isCallActive}) => {
+    let inviteContent = '';
+    if (url) {
+      // if host data is present generate links for both host and attendee
+      if (url?.host) {
+        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
+      }
+      // if host data is not present then generate link for attendee alone
+      else {
+        if (isCallActive) {
+          //copy this label on videocall screen
+          inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
+        } else {
+          //copy this label on share link screen
+          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.attendee}`;
+        }
+      }
+    } else {
+      // if host data is present generate meeting ID for both host and attendee
+      if (id?.host) {
+        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
+      }
+      // if host data is not present then generate meeting ID for attendee alone
+      else {
+        if (isCallActive) {
+          //copy this label on videocall screen
+          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
+        } else {
+          //copy this label on share link screen
+          inviteContent += `Meeting - ${meetingName}\nMeeting 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,
+            meetingPassphrase.attendee,
+            isSeparateHostLink ? meetingPassphrase.host : undefined,
+          )
+        : undefined,
+      id: !baseURL
+        ? GetMeetingInviteID(
+            meetingPassphrase.attendee,
+            isSeparateHostLink ? meetingPassphrase.host : undefined,
+          )
+        : undefined,
+      pstn: meetingPassphrase?.pstn
+        ? {
+            number: meetingPassphrase.pstn.number,
+            pin: meetingPassphrase.pstn.pin,
+          }
+        : undefined,
+      isCallActive: isJoinDataFetched,
+    });
+    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 += `${meetingIdText}: ${meetingPassphrase.attendee}`;
+      }
+    }
+    return stringToCopy;
+  };
+
+  const getHostUrlOrId = () => {
+    let stringToCopy = '';
+    if (meetingPassphrase?.host) {
+      let baseURL = getBaseURL();
+      if (baseURL) {
+        stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
+      } else {
+        stringToCopy += `${meetingIdText}: ${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/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,221 @@
+/*
+********************************************
+ 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, to?: ToOptions) => {
+    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) => {
+    if (!this._validateEvt(evt) || !this._validateListener(listener)) return;
+    EventUtils.addListener(evt, listener, this.source);
+  };
+
+  /**
+   * 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) => {
+    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);
+    }
+  };
+
+  /**
+   * 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);
+      await this._persist(evt, {...payload, source: this.source});
+    }
+    try {
+      await this._send(rtmPayload, to);
+    } catch (error) {
+      console.log('CUSTOM_EVENT_API: sendPersist 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',
+};

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

@@ -0,0 +1,22 @@
+import {I18nBaseType, I18nConditionalType} from '../i18nTypes';
+
+export interface I18nCreateScreenLabelsInterface {
+  meetingNameInputPlaceholder?: I18nBaseType; //
+  //commented for v1 release
+  // createMeetingButton?: I18nBaseType; //
+  // haveMeetingID?: I18nBaseType;
+  // pstnToggle?: I18nConditionalType; //
+  // hostControlsToggle?: I18nConditionalType; //
+}
+
+export const CreateScreenLabels: I18nCreateScreenLabelsInterface = {
+  meetingNameInputPlaceholder: 'Name your Meeting',
+  //commented for v1 release
+  // createMeetingButton: 'Create Meeting',
+  // haveMeetingID: 'Have a Meeting ID?',
+  // pstnToggle: 'Use PSTN (Join by dialing a number)',
+  // hostControlsToggle: (toggle) =>
+  //   toggle
+  //     ? 'Restrict Host Controls (Separate host link)'
+  //     : 'Restrict Host Controls (Everyone is a Host)',
+};

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

@@ -0,0 +1,38 @@
+import {CommonLabels, I18nCommonLabelsInterface} from './commonLabels';
+import {
+  CreateScreenLabels,
+  I18nCreateScreenLabelsInterface,
+} from './createScreenLabels';
+import {
+  JoinScreenLabels,
+  I18nJoinScreenLabelsInterface,
+} from './joinScreenLabels';
+import {
+  ShareLinkScreenLabels,
+  I18nShareLinkScreenLabelsInterface,
+} from './shareLinkScreenLabels';
+import {
+  VideoCallScreenLabels,
+  I18nVideoCallScreenLabelsInterface,
+} from './videoCallScreenLabels';
+import {
+  PrecallScreenLabels,
+  I18nPrecallScreenLabelsInterface,
+} from './precallScreenLabels';
+
+export interface TextDataInterface
+  extends I18nCommonLabelsInterface,
+    I18nCreateScreenLabelsInterface,
+    I18nJoinScreenLabelsInterface,
+    I18nShareLinkScreenLabelsInterface,
+    I18nVideoCallScreenLabelsInterface,
+    I18nPrecallScreenLabelsInterface {}
+
+export const DEFAULT_LABELS: TextDataInterface = {
+  ...CommonLabels,
+  ...CreateScreenLabels,
+  ...JoinScreenLabels,
+  ...ShareLinkScreenLabels,
+  ...PrecallScreenLabels,
+  ...VideoCallScreenLabels,
+};

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

@@ -0,0 +1,13 @@
+import {I18nBaseType} from '../i18nTypes';
+
+export interface I18nJoinScreenLabelsInterface {
+  //commented for v1 release
+  // meetingIdInputPlaceholder?: I18nBaseType; //
+  // enterMeetingButton?: I18nBaseType; //
+}
+
+export const JoinScreenLabels: I18nJoinScreenLabelsInterface = {
+  //commented for v1 release
+  // meetingIdInputPlaceholder: 'Enter Meeting ID',
+  // enterMeetingButton: 'Enter Meeting',
+};

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

@@ -0,0 +1,33 @@
+import {ClientRole} from '../../../agora-rn-uikit';
+import {I18nBaseType} from '../i18nTypes';
+
+export interface JoinRoomButtonTextInterface {
+  ready: boolean;
+  role?: ClientRole;
+}
+export interface I18nPrecallScreenLabelsInterface {
+  //commented for v1 release
+  // precallLabel?: I18nBaseType; //
+  // selectInputDeviceLabel?: I18nBaseType; //
+  // userNamePlaceholder?: I18nBaseType; //
+  // fetchingNamePlaceholder?: I18nBaseType; //
+  // loadingWithDots?: I18nBaseType;
+  joinRoomButton?: I18nBaseType<JoinRoomButtonTextInterface>; // need to check
+}
+
+export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
+  //commented for v1 release
+  // precallLabel: 'Precall',
+  // selectInputDeviceLabel: 'Select Input Device',
+  // userNamePlaceholder: 'Display name*',
+  // fetchingNamePlaceholder: 'Getting name...',
+  // loadingWithDots: 'Loading...',
+  joinRoomButton: ({ready, role}) =>
+    ready
+      ? !role
+        ? 'Join Room'
+        : `Join Room as ${
+            role === ClientRole.Broadcaster ? 'Host' : 'Audience'
+          }`
+      : `Loading...`,
+};