agora-appbuilder-core 2.3.0-beta.3 → 2.3.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.3",
+  "version": "2.3.0-beta.6",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -13,7 +13,7 @@
     "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "copy-vercel": "cp vercel.json Builds/web",
+    "copy-vercel": "cp -r Builds/web template/dist && cp vercel.json template/dist",
     "pre-release": "cd template && cp package-lock.json _package-lock.json"
   },
   "author": {

package/template/Gulpfile.js

@@ -322,7 +322,7 @@ module.exports.webSdk = series(
 module.exports.androidUnix = series(
   general.clean,
   general.createBuildDirectory,
-  // android.gradleBuildUnix,
+  android.gradleBuildUnix,
   android.copyBuild,
 );
 

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -247,7 +247,14 @@ const Create = ({
     }
     init();
     return () => {
-      engine.current!.destroy();
+      /**
+       * if condition add for websdk issue
+       * For some reason even if engine.current is defined somehow destroy gets undefined and
+       * causes a crash so thats why this check is needed before we call the method
+       */
+      if (engine.current.destroy) {
+        engine.current!.destroy();
+      }
     };
   }, [rtcProps.appId]);
 

package/template/src/components/Chat.tsx

@@ -59,6 +59,15 @@ const Chat = () => {
 
   const {primaryColor} = useContext(ColorContext);
 
+  React.useEffect(() => {
+    return () => {
+      // reset both the active tabs
+      setGroupActive(false);
+      setPrivateActive(false);
+      setSelectedUser(0);
+    };
+  }, []);
+
   const selectGroup = () => {
     setPrivateActive(false);
     setGroupActive(true);

package/template/src/components/RTMConfigure.tsx

@@ -194,6 +194,9 @@ const RtmConfigure = (props: any) => {
                   const attr = await engine.current.getUserAttributesByUid(
                     member.uid,
                   );
+                  if (!attr || !attr.attributes) {
+                    throw attr;
+                  }
                   for (const key in attr.attributes) {
                     if (
                       attr.attributes.hasOwnProperty(key) &&
@@ -297,6 +300,9 @@ const RtmConfigure = (props: any) => {
       const backoffAttributes = backOff(
         async () => {
           const attr = await engine.current.getUserAttributesByUid(data.uid);
+          if (!attr || !attr.attributes) {
+            throw attr;
+          }
           for (const key in attr.attributes) {
             if (attr.attributes.hasOwnProperty(key) && attr.attributes[key]) {
               return attr;
@@ -470,7 +476,7 @@ const RtmConfigure = (props: any) => {
             queuedEvents.uid,
             queuedEvents.ts,
           );
-          EventsQueue.dequeue();
+          // EventsQueue.dequeue();
         }
       }
     } catch (error) {

package/template/src/components/contexts/LiveStreamDataContext.tsx

@@ -30,7 +30,6 @@ interface ScreenShareProviderProps {
   children: React.ReactNode;
 }
 const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
-  const localUid = useLocalUid();
   const {renderList} = useUserList();
   const {raiseHandList} = useContext(LiveStreamContext);
   const [hostUids, setHostUids] = useState<UidType[]>([]);
@@ -41,13 +40,14 @@ const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
       const hostList = filterObject(
         renderList,
         ([k, v]) =>
-          (v?.type === 'rtc' || v?.type === 'live') &&
+          (v?.type === 'rtc' ||
+            v?.type === 'live' ||
+            (v?.type === 'screenshare' && v?.video == 1)) &&
           (raiseHandList[k]
             ? raiseHandList[k]?.role == ClientRole.Broadcaster
             : true) &&
           !v?.offline,
       );
-
       const audienceList = filterObject(
         renderList,
         ([k, v]) =>

package/template/src/components/livestream/LiveStreamContext.tsx

@@ -26,6 +26,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   props,
 ) => {
   const screenshareContextInstance = useScreenshare();
+  const screenshareContextInstanceRef = useRef<any>();
+  screenshareContextInstanceRef.current = screenshareContextInstance;
 
   const {renderList} = useUserList();
   const renderListRef = useRef<any>();
@@ -187,7 +189,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
             ...prevState[data.sender],
             role:
               data.payload.value in ClientRole
-                ? ClientRole[data.payload.value]
+                ? parseInt(data.payload.value)
                 : ClientRole.Audience,
           },
         };
@@ -317,7 +319,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
         ) {
           /** 2.b */
           showToast(LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL);
-          screenshareContextInstance?.stopUserScreenShare(); // This will not exist on ios
+          screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
+
           // Demote user's privileges to audience
           changeClientRoleTo(ClientRole.Audience);
         }
@@ -403,7 +406,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
       raiseHandList[localUidRef.current]?.role == ClientRole.Broadcaster &&
       raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE
     ) {
-      screenshareContextInstance?.stopUserScreenShare(); // This will not exist on ios
+      screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
       // Change role
       changeClientRoleTo(ClientRole.Audience);
     }

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;
   };

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

@@ -152,8 +152,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);
+    }
   };
 
   /**
@@ -167,16 +171,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);
     }
   };
 
@@ -210,12 +221,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/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,8 @@ 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';
 
 const Create = () => {
   const {CreateComponent} = useFpe((data) => {
@@ -58,6 +60,7 @@ const Create = () => {
   const [hostControlCheckbox, setHostControlCheckbox] = useState(true);
   const [roomCreated, setRoomCreated] = useState(false);
   const createRoomFun = useCreateMeeting();
+  const {setMeetingInfo} = useSetMeetingInfo();
   const {
     meetingPassphrase: {attendee, host, pstn},
   } = useMeetingInfo();
@@ -74,7 +77,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',
   )();
@@ -115,6 +118,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) => {

package/template/src/pages/VideoCall.tsx

@@ -128,11 +128,11 @@ const VideoCall: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    try {
-      useJoin(phrase);
-    } catch (error) {
-      setGlobalErrorMessage(error);
-    }
+    useJoin(phrase)
+      .then(() => {})
+      .catch((error) => {
+        setGlobalErrorMessage(error);
+      });
   }, []);
 
   const data = useMeetingInfo();

package/template/src/rtm/utils.ts

@@ -30,7 +30,7 @@ export const timeNow = () => new Date().getTime();
 export const getMessageTime = (ts?: number): number => {
   if (!ts) return timeNow();
   try {
-    const timestamp = new Date(ts).getHours();
+    const timestamp = new Date(ts).getTime();
     return isNaN(timestamp) ? timeNow() : timestamp;
   } catch (error) {
     return timeNow();

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

@@ -121,6 +121,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     if (isRecordingActive) {
       executeRecordingQuery(isActive);
     }
+    console.log('supriya screenshare query executed');
     try {
       // @ts-ignore
       await rtc.RtcEngine.startScreenshare(
@@ -133,18 +134,18 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
+      if (isActive) {
+        CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
+          value: `${true}`,
+          level: EventLevel.LEVEL2,
+        });
+        //if local user started the screenshare then change layout to pinned
+        triggerChangeLayout(true, screenShareUid);
+      }
     } catch (e) {
-      console.error("can't start the screen share", e);
+      console.error("supriya an't start the screen share", e);
       executeNormalQuery();
     }
-    if (isActive) {
-      CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-        value: `${true}`,
-        level: EventLevel.LEVEL2,
-      });
-      //if local user started the screenshare then change layout to pinned
-      triggerChangeLayout(true, screenShareUid);
-    }
   };
 
   return (

package/template/src/utils/getMeetingInvite.ts

@@ -1,28 +1,51 @@
 const GetMeetingInviteURL = (
   baseUrl: string,
-  attendee: string,
-  host?: string,
+  isHost: boolean,
+  meetingPassphrase: {
+    host?: string;
+    attendee?: string;
+  },
+  isSeparateHostLink: boolean,
 ) => {
-  if (host) {
-    return {
-      host: `${baseUrl}/${host}`,
-      attendee: `${baseUrl}/${attendee}`,
-    };
+  if (isHost) {
+    if (isSeparateHostLink) {
+      return {
+        host: `${baseUrl}/${meetingPassphrase.host}`,
+        attendee: `${baseUrl}/${meetingPassphrase.attendee}`,
+      };
+    } else {
+      return {
+        host: `${baseUrl}/${meetingPassphrase.host}`,
+      };
+    }
   } else {
     return {
-      attendee: `${baseUrl}/${attendee}`,
+      attendee: `${baseUrl}/${meetingPassphrase.attendee}`,
     };
   }
 };
-const GetMeetingInviteID = (attendee: string, host?: string) => {
-  if (host) {
-    return {
-      host: `${host}`,
-      attendee: `${attendee}`,
-    };
+const GetMeetingInviteID = (
+  isHost: boolean,
+  meetingPassphrase: {
+    host?: string;
+    attendee?: string;
+  },
+  isSeparateHostLink: boolean,
+) => {
+  if (isHost) {
+    if (isSeparateHostLink) {
+      return {
+        host: `${meetingPassphrase.host}`,
+        attendee: `${meetingPassphrase.attendee}`,
+      };
+    } else {
+      return {
+        host: `${meetingPassphrase.host}`,
+      };
+    }
   } else {
     return {
-      attendee: `${attendee}`,
+      attendee: `${meetingPassphrase.attendee}`,
     };
   }
 };

package/template/src/utils/useJoinMeeting.ts

@@ -56,19 +56,25 @@ export default function useJoinMeeting() {
   const {setMeetingInfo} = useSetMeetingInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
-    const response = await client.query({
-      query:
-        store.token === null
-          ? JOIN_CHANNEL_PHRASE
-          : JOIN_CHANNEL_PHRASE_AND_GET_USER,
-      variables: {
-        passphrase: phrase,
-      },
+    setMeetingInfo((prevState) => {
+      return {
+        ...prevState,
+        isJoinDataFetched: false,
+      };
     });
-    if (response.error) {
-      throw response.error;
-    } else {
-      try {
+    try {
+      const response = await client.query({
+        query:
+          store.token === null
+            ? JOIN_CHANNEL_PHRASE
+            : JOIN_CHANNEL_PHRASE_AND_GET_USER,
+        variables: {
+          passphrase: phrase,
+        },
+      });
+      if (response.error) {
+        throw response.error;
+      } else {
         if (response && response.data) {
           let data = response.data;
           let meetingInfo: Partial<MeetingInfoContextInterface> = {
@@ -111,10 +117,12 @@ export default function useJoinMeeting() {
               ...meetingInfo,
             };
           });
+        } else {
+          throw new Error('An error occurred in parsing the channel data.');
         }
-      } catch (error) {
-        throw new Error('An error occurred in parsing the channel data.');
       }
+    } catch (error) {
+      throw error;
     }
   };
 }