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

package/template/src/components/precall/LocalMute.native.tsx

@@ -68,14 +68,18 @@ const PreCallLocalMute: React.FC = () => {
       <View style={style.width50}>
         <AudioMute />
       </View>
-      <View style={style.width50} />
-      <View style={style.width50}>
-        <VideoMute />
-      </View>
-      <View style={style.width50} />
-      <View style={style.width50}>
-        <LocalSwitchCamera />
-      </View>
+      {!$config.AUDIO_ROOM && (
+        <>
+          <View style={style.width50} />
+          <View style={style.width50}>
+            <VideoMute />
+          </View>
+          <View style={style.width50} />
+          <View style={style.width50}>
+            <LocalSwitchCamera />
+          </View>
+        </>
+      )}
     </>
   );
 };

package/template/src/components/precall/LocalMute.tsx

@@ -65,9 +65,11 @@ const PreCallLocalMute: React.FC = () => {
       <View style={{alignSelf: 'center'}}>
         <AudioMute />
       </View>
-      <View style={{alignSelf: 'center'}}>
-        <VideoMute />
-      </View>
+      {!$config.AUDIO_ROOM && (
+        <View style={{alignSelf: 'center'}}>
+          <VideoMute />
+        </View>
+      )}
     </View>
   );
 };

package/template/src/components/precall/textInput.tsx

@@ -30,7 +30,7 @@ const PreCallTextInput: React.FC = () => {
   return (
     <TextInput
       value={username}
-      onChangeText={(text) => setUsername(text ? text.trim() : '')}
+      onChangeText={(text) => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
       placeholder={
         isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder

package/template/src/components/useShareLink.tsx

@@ -25,7 +25,7 @@ import {MeetingInviteInterface} from '../language/default-labels/videoCallScreen
 import Clipboard from '../subComponents/Clipboard';
 
 export enum SHARE_LINK_CONTENT_TYPE {
-  ATTENDEE,
+  ATTENDEE = 1,
   HOST,
   PSTN,
   MEETING_INVITE,
@@ -45,12 +45,8 @@ interface ShareLinkProvideProps {
 }
 
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
-  const {
-    meetingTitle,
-    meetingPassphrase,
-    isSeparateHostLink,
-    isJoinDataFetched,
-  } = useMeetingInfo();
+  const {meetingTitle, meetingPassphrase, isSeparateHostLink, isHost} =
+    useMeetingInfo();
 
   //commmented for v1 release
   // const copiedToClipboardText = useString(
@@ -65,37 +61,40 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const meetingIdText = 'Meeting ID';
   const PSTNNumberText = 'PSTN Number';
   const PSTNPinText = 'PSTN Pin';
-  const meetingInviteText = ({meetingName, id, url, pstn, isCallActive}) => {
+  const meetingInviteText = ({
+    meetingName,
+    id,
+    url,
+    pstn,
+    isHost,
+    isSeparateHostLink,
+  }: MeetingInviteInterface) => {
     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}`;
+      //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 {
-          //copy this label on share link screen
-          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.attendee}`;
+          //single link for everyone
+          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.host}`;
         }
       }
-    } 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
+      //for attendee
       else {
-        if (isCallActive) {
-          //copy this label on videocall screen
-          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
+        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 {
-          //copy this label on share link screen
-          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.attendee}`;
+          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
@@ -114,15 +113,13 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       url: baseURL
         ? GetMeetingInviteURL(
             baseURL,
-            meetingPassphrase.attendee,
-            isSeparateHostLink ? meetingPassphrase.host : undefined,
+            isHost,
+            meetingPassphrase,
+            isSeparateHostLink,
           )
         : undefined,
       id: !baseURL
-        ? GetMeetingInviteID(
-            meetingPassphrase.attendee,
-            isSeparateHostLink ? meetingPassphrase.host : undefined,
-          )
+        ? GetMeetingInviteID(isHost, meetingPassphrase, isSeparateHostLink)
         : undefined,
       pstn: meetingPassphrase?.pstn
         ? {
@@ -130,7 +127,8 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
             pin: meetingPassphrase.pstn.pin,
           }
         : undefined,
-      isCallActive: isJoinDataFetched,
+      isHost,
+      isSeparateHostLink,
     });
     return stringToCopy;
   };
@@ -150,7 +148,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (baseURL) {
         stringToCopy += `${baseURL}/${meetingPassphrase.attendee}`;
       } else {
-        stringToCopy += `${meetingIdText}: ${meetingPassphrase.attendee}`;
+        stringToCopy += `${meetingPassphrase.attendee}`;
       }
     }
     return stringToCopy;
@@ -163,7 +161,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (baseURL) {
         stringToCopy += `${baseURL}/${meetingPassphrase.host}`;
       } else {
-        stringToCopy += `${meetingIdText}: ${meetingPassphrase.host}`;
+        stringToCopy += `${meetingPassphrase.host}`;
       }
     }
     return stringToCopy;

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/custom-events/CustomEvents.ts

@@ -19,11 +19,9 @@ 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;
     }
@@ -37,11 +35,11 @@ class CustomEvents {
    * @api private
    */
   private _persist = async (evt: string, payload: any) => {
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
     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]);
+      await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
     } catch (error) {
       console.log(
         'CUSTOM_EVENT_API error occured while updating the value ',
@@ -84,7 +82,10 @@ class CustomEvents {
    * @param {ToOptions} to uid or uids[] of user
    * @api private
    */
-  private _send = async (rtmPayload: any, to?: ToOptions) => {
+  private _send = async (rtmPayload: any, toUid?: ToOptions) => {
+    const to = typeof toUid == 'string' ? parseInt(toUid) : toUid;
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
+
     const text = JSON.stringify({
       type: eventMessageType.CUSTOM_EVENT,
       msg: rtmPayload,
@@ -98,18 +99,18 @@ 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;
       }
     }
     // Case 2: send to indivdual
-    if (typeof to === 'number' && to > 0) {
+    if (typeof to === 'number' && to !== 0) {
       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,
@@ -126,7 +127,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,
@@ -150,8 +151,12 @@ class CustomEvents {
    * @api public
    */
   on = (evt: string, listener: TEventCallback) => {
-    if (!this._validateEvt(evt) || !this._validateListener(listener)) return;
-    EventUtils.addListener(evt, listener, this.source);
+    try {
+      if (!this._validateEvt(evt) || !this._validateListener(listener)) return;
+      EventUtils.addListener(evt, listener, this.source);
+    } catch (error) {
+      console.log('custom-events-on error: ', error);
+    }
   };
 
   /**
@@ -165,16 +170,23 @@ class CustomEvents {
    * @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);
+    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);
       }
-    } else {
-      EventUtils.removeAll(this.source);
+    } catch (error) {
+      console.log('custom-events-off error: ', error);
     }
   };
 
@@ -184,7 +196,7 @@ class CustomEvents {
    *  - If 'to' is empty this method sends channel message.
    *
    *
-   * @param {String} evt Name of the event to remove the listener from.
+   * @param {String} evt  Name of the event to register on which listeners are added
    * @param {EventPayload} payload contains action, level, value metrics.
    * - action: {string}
    * - level: 1 | 2 | 3
@@ -208,12 +220,16 @@ class CustomEvents {
 
     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._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: sendPersist sending failed. ', error);
+      console.log('CUSTOM_EVENT_API: sending failed. ', error);
     }
   };
 }

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

@@ -15,12 +15,12 @@ interface IEventPayloadBase {
 
 interface IEventPayloadWithoutAttributes extends IEventPayloadBase {
   level?: never;
-  value: string;
+  value: any;
 }
 
 interface IEventPayloadWithAttributes extends IEventPayloadBase {
   level: 2 | 3;
-  value: string;
+  value: any;
 }
 
 export type EventPayload =
@@ -40,7 +40,7 @@ export enum EventLevel {
 interface dataPayload {
   action: string;
   level: 1 | 2 | 3;
-  value: string;
+  value: any;
 }
 interface EvtCbPayload {
   payload: dataPayload;

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

@@ -10,6 +10,8 @@ interface NetworkQualityStatusInterface {
 }
 export type NetworkQualities = keyof NetworkQualityStatusInterface;
 export interface MeetingInviteInterface {
+  isHost: boolean;
+  isSeparateHostLink: boolean;
   meetingName?: string;
   pstn?: {
     number: string;
@@ -17,11 +19,11 @@ export interface MeetingInviteInterface {
   };
   url?: {
     host?: string;
-    attendee: string;
+    attendee?: string;
   };
   id?: {
     host?: string;
-    attendee: string;
+    attendee?: string;
   };
 }
 export interface I18nVideoCallScreenLabelsInterface {

package/template/src/pages/Create.tsx

@@ -28,6 +28,9 @@ import useCreateMeeting from '../utils/useCreateMeeting';
 import {CreateProvider} from './create/useCreate';
 import useJoinMeeting from '../utils/useJoinMeeting';
 import SDKEvents from '../utils/SdkEvents';
+import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import useNavigateTo from '../utils/useNavigateTo';
 
 const Create = () => {
   const {CreateComponent} = useFpe((data) => {
@@ -58,9 +61,11 @@ const Create = () => {
   const [hostControlCheckbox, setHostControlCheckbox] = useState(true);
   const [roomCreated, setRoomCreated] = useState(false);
   const createRoomFun = useCreateMeeting();
+  const {setMeetingInfo} = useSetMeetingInfo();
   const {
     meetingPassphrase: {attendee, host, pstn},
   } = useMeetingInfo();
+  const navigateTo = useNavigateTo();
   //commented for v1 release
   // const createdText = useString('meetingCreatedNotificationLabel')();
   // const hostControlsToggle = useString<boolean>('hostControlsToggle');
@@ -74,7 +79,7 @@ const Create = () => {
     toggle
       ? 'Restrict Host Controls (Separate host link)'
       : 'Restrict Host Controls (Everyone is a Host)';
-  const pstnToggle = () => 'Use PSTN (Join by dialing a number)';
+  const pstnToggle = (value: boolean) => 'Use PSTN (Join by dialing a number)';
   const meetingNameInputPlaceholder = useString(
     'meetingNameInputPlaceholder',
   )();
@@ -88,9 +93,10 @@ const Create = () => {
     }
     SDKEvents.on('joinMeetingWithPhrase', (phrase) => {
       console.log(
-        'DEBUG(aditya)-SDKEvents: joinMeetingWithPhrase event called',
+        'SDKEvents: joinMeetingWithPhrase event called', phrase
       );
-      useJoin(phrase);
+      setMeetingInfo(MeetingInfoDefaultValue);
+      navigateTo(phrase)
     });
     return () => {
       SDKEvents.off('joinMeetingWithPhrase');
@@ -115,6 +121,7 @@ const Create = () => {
     if (roomTitle !== '') {
       setLoading(true);
       try {
+        setMeetingInfo(MeetingInfoDefaultValue);
         await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
         setLoading(false);
         Toast.show({

package/template/src/pages/Join.tsx

@@ -28,6 +28,8 @@ import Error from '../subComponents/Error';
 import {useString} from '../utils/useString';
 import useNavigateTo from '../utils/useNavigateTo';
 import {useFpe} from 'fpe-api';
+import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
 
 const Join = () => {
   //commented for v1 release
@@ -43,12 +45,13 @@ const Join = () => {
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
-
+  const {setMeetingInfo} = useSetMeetingInfo();
   const createMeeting = () => {
     history.push('/create');
   };
 
   const startCall = async () => {
+    setMeetingInfo(MeetingInfoDefaultValue);
     navigateTo(phrase);
   };
   const {JoinComponent} = useFpe((data) => {