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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.2",
+  "version": "2.3.0-beta.5",
   "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/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>();
@@ -91,7 +93,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     payload: Partial<raiseHandItemInterface>,
   ) => {
     if (userUID && !isEmptyObject(payload)) {
-      const userId = userUID.toString();
+      const userId = `${userUID}`;
       setRaiseHandList((oldRaisedHandList) => ({
         ...oldRaisedHandList,
         [userId]: {
@@ -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);
         }
@@ -342,7 +345,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
    */
 
   const hostApprovesRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(uid.toString(), {
+    addOrUpdateLiveStreamRequest(`${uid}`, {
       raised: RaiseHandValue.TRUE,
       ts: new Date().getTime(),
     });
@@ -354,7 +357,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   };
 
   const hostRejectsRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(uid.toString(), {
+    addOrUpdateLiveStreamRequest(`${uid}`, {
       raised: RaiseHandValue.FALSE,
       ts: new Date().getTime(),
     });
@@ -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

@@ -84,7 +84,9 @@ 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 text = JSON.stringify({
       type: eventMessageType.CUSTOM_EVENT,
       msg: rtmPayload,
@@ -105,7 +107,7 @@ class CustomEvents {
       }
     }
     // 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 {
@@ -150,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);
+    }
   };
 
   /**
@@ -165,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);
     }
   };
 
@@ -208,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/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}`,
     };
   }
 };