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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.1",
+  "version": "2.3.0-beta.2",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/fpe-api/fpeEvents.ts

@@ -6,4 +6,4 @@ import {EventSourceEnum} from '../src/custom-events';
 const fpeEvents = new CustomEvents(EventSourceEnum.fpe);
 
 // 3. export
-export {fpeEvents};
+export {fpeEvents as CustomEvents};

package/template/src/components/ParticipantsView.tsx

@@ -53,63 +53,43 @@ const ParticipantView = () => {
         <View style={style.lineUnderHeading}>
           <Text style={style.mainHeading}>{participantsLabel}</Text>
         </View>
-        <ScrollView style={[style.bodyContainer, style.padding10]}>
-          {$config.EVENT_MODE ? (
-            <>
-              {
-                /*Live streaming is true            
+      </View>
+      <ScrollView style={[style.bodyContainer, style.padding10]}>
+        {$config.EVENT_MODE ? (
+          <>
+            {
+              /*Live streaming is true            
                 Host and New host view */
-                rtcProps?.role == ClientRole.Broadcaster &&
-                  (isHost ? (
-                    /**
-                     * Original Host
-                     * a) Can view streaming requests
-                     * b) Can view all hosts with remote controls
-                     */
-                    <>
-                      {/* a) Live streaming view */}
-                      <View style={style.participantsection}>
-                        <CurrentLiveStreamRequestsView
-                          p_style={style}
-                          userList={liveStreamData}
-                        />
-                      </View>
-                      {/* b) Host view with remote controls*/}
-                      <View style={style.participantsection}>
-                        <ParticipantSectionTitle
-                          title={hostLabel}
-                          count={hostUids.length}
-                        />
-                        <View style={style.participantContainer}>
-                          <AllHostParticipants
-                            p_style={style}
-                            isHost={isHost}
-                          />
-                        </View>
-                      </View>
-                    </>
-                  ) : (
-                    /** New Host ( earlier was 'audience' and now is host )
-                     *  a) Can view all hosts without remote controls
-                     */
+              rtcProps?.role == ClientRole.Broadcaster &&
+                (isHost ? (
+                  /**
+                   * Original Host
+                   * a) Can view streaming requests
+                   * b) Can view all hosts with remote controls
+                   */
+                  <>
+                    {/* a) Live streaming view */}
+                    <View style={style.participantsection}>
+                      <CurrentLiveStreamRequestsView
+                        p_style={style}
+                        userList={liveStreamData}
+                      />
+                    </View>
+                    {/* b) Host view with remote controls*/}
                     <View style={style.participantsection}>
                       <ParticipantSectionTitle
                         title={hostLabel}
                         count={hostUids.length}
                       />
-                      <AllAudienceParticipants
-                        uids={hostUids}
-                        p_style={style}
-                        isHost={isHost}
-                      />
+                      <View style={style.participantContainer}>
+                        <AllHostParticipants p_style={style} isHost={isHost} />
+                      </View>
                     </View>
-                  ))
-              }
-              {
-                /**
-                 *  Audience views all hosts without remote controls
-                 */
-                rtcProps?.role == ClientRole.Audience && (
+                  </>
+                ) : (
+                  /** New Host ( earlier was 'audience' and now is host )
+                   *  a) Can view all hosts without remote controls
+                   */
                   <View style={style.participantsection}>
                     <ParticipantSectionTitle
                       title={hostLabel}
@@ -121,32 +101,50 @@ const ParticipantView = () => {
                       isHost={isHost}
                     />
                   </View>
-                )
-              }
-              {
-                /* Everyone can see audience */
+                ))
+            }
+            {
+              /**
+               *  Audience views all hosts without remote controls
+               */
+              rtcProps?.role == ClientRole.Audience && (
                 <View style={style.participantsection}>
                   <ParticipantSectionTitle
-                    title={audienceLabel}
-                    count={audienceUids.length}
+                    title={hostLabel}
+                    count={hostUids.length}
                   />
                   <AllAudienceParticipants
-                    uids={audienceUids}
+                    uids={hostUids}
                     p_style={style}
                     isHost={isHost}
                   />
                 </View>
-              }
-            </>
-          ) : (
-            <View style={style.participantsection}>
-              <View style={style.participantContainer}>
-                <AllHostParticipants p_style={style} isHost={isHost} />
+              )
+            }
+            {
+              /* Everyone can see audience */
+              <View style={style.participantsection}>
+                <ParticipantSectionTitle
+                  title={audienceLabel}
+                  count={audienceUids.length}
+                />
+                <AllAudienceParticipants
+                  uids={audienceUids}
+                  p_style={style}
+                  isHost={isHost}
+                />
               </View>
+            }
+          </>
+        ) : (
+          <View style={style.participantsection}>
+            <View style={style.participantContainer}>
+              <AllHostParticipants p_style={style} isHost={isHost} />
             </View>
-          )}
-        </ScrollView>
-      </View>
+          </View>
+        )}
+      </ScrollView>
+
       <View
         style={{
           width: '100%',

package/template/src/components/RTMConfigure.tsx

@@ -22,9 +22,15 @@ import {useString} from '../utils/useString';
 import {isAndroid, isWeb} from '../utils/common';
 import StorageContext from './StorageContext';
 import {useRenderContext} from 'fpe-api';
-import {safeJsonParse, timeNow, hasJsonStructure} from '../rtm/utils';
+import {
+  safeJsonParse,
+  timeNow,
+  hasJsonStructure,
+  getMessageTime,
+  get32BitUid,
+  adjustUID,
+} from '../rtm/utils';
 import {EventUtils, EventsQueue, eventMessageType} from '../rtm-events';
-
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
 
@@ -32,18 +38,6 @@ export enum UserType {
   ScreenShare = 'screenshare',
 }
 
-const adjustUID = (uid: number | string) => {
-  let number: number | string;
-  if (typeof uid === 'string') number = uid;
-  else {
-    number = uid;
-    if (number < 0) {
-      number = 0xffffffff + number + 1;
-    }
-  }
-  return number;
-};
-
 const stringifyPayload = (
   source: messageSourceType,
   type: messageActionType,
@@ -370,12 +364,9 @@ const RtmConfigure = (props: any) => {
       const textObj = parsePayload(text);
       const {type, msg} = textObj;
 
-      let arr = new Int32Array(1);
-      arr[0] = parseInt(peerId);
+      const timestamp = getMessageTime(ts);
 
-      const timestamp = timeNow();
-
-      const sender = isAndroid ? arr[0] : peerId;
+      const sender = isAndroid ? get32BitUid(peerId) : peerId;
 
       if (type === messageActionType.Control) {
         switch (msg) {
@@ -417,11 +408,10 @@ const RtmConfigure = (props: any) => {
       const textObj = parsePayload(text);
       const [err, result] = safeJsonParse(text);
       const {type, msg} = textObj;
-      let arr = new Int32Array(1);
-      arr[0] = parseInt(uid);
 
-      const sender = Platform.OS ? arr[0] : uid;
-      const timestamp = ts ? (parseInt(ts) === 0 ? timeNow() : ts) : timeNow();
+      const timestamp = getMessageTime(ts);
+
+      const sender = Platform.OS ? get32BitUid(uid) : uid;
 
       if (channelId === rtcProps.channel) {
         if (
@@ -534,10 +524,9 @@ const RtmConfigure = (props: any) => {
 
   const sendMessageToUid = async (msg: string, uid: UidType) => {
     if (msg.trim() === '') return;
-    let adjustedUID = uid;
-    if (adjustedUID < 0) {
-      adjustedUID = adjustUID(uid);
-    }
+
+    const adjustedUID = adjustUID(uid);
+
     const text = stringifyPayload(
       messageSourceType.Core,
       messageActionType.Normal,
@@ -563,16 +552,17 @@ const RtmConfigure = (props: any) => {
   };
 
   const sendControlMessageToUid = async (msg: string, uid: UidType) => {
-    if (uid < 0) {
-      uid = adjustUID(uid);
-    }
+    if (msg.trim() === '') return;
+
+    const adjustedUID = adjustUID(uid);
+
     const text = stringifyPayload(
       messageSourceType.Core,
       messageActionType.Control,
       msg,
     );
     await (engine.current as RtmEngine).sendMessageToPeer({
-      peerId: uid.toString(),
+      peerId: adjustedUID.toString(),
       offline: false,
       text,
     });

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -13,16 +13,14 @@ import {createHook} from 'fpe-implementation';
 import React, {useState, useEffect, useRef} from 'react';
 import {useRenderContext} from 'fpe-api';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useLocalUid} from '../../../agora-rn-uikit';
+import {useLocalUid, UidType} from '../../../agora-rn-uikit';
 import CustomEvents from '../../custom-events';
 import {EventNames} from '../../rtm-events';
 import {useChatUIControl} from '../chat-ui/useChatUIControl';
 import {useChatNotification} from '../chat-notification/useChatNotification';
-import {useString} from '../../utils/useString';
 import Toast from '../../../react-native-toast-message';
 import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
-import {UidType} from '../../../agora-rn-uikit';
 
 interface ChatMessagesProviderProps {
   children: React.ReactNode;
@@ -32,13 +30,13 @@ interface messageInterface {
   msg: string;
 }
 interface messageStoreInterface extends messageInterface {
-  uid: string;
+  uid: UidType;
 }
 
 interface ChatMessagesInterface {
   messageStore: messageStoreInterface | any;
   privateMessageStore: any;
-  sendChatMessage: (msg: string, toUid?: number) => void;
+  sendChatMessage: (msg: string, toUid?: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
@@ -94,7 +92,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     };
     CustomEvents.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
       showMessageNotification(data.payload.value, data.sender);
-      addMessageToStore(data.sender, {
+      addMessageToStore(parseInt(data.sender), {
         msg: data.payload.value,
         ts: data.ts,
       });
@@ -111,34 +109,41 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     CustomEvents.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
       showMessageNotification(data.payload.value, data.sender);
       addMessageToPrivateStore(
-        data.sender,
+        parseInt(data.sender),
         {
           msg: data.payload.value,
           ts: data.ts,
         },
         false,
       );
-      if (!(individualActiveRef.current === data.sender)) {
+      /**
+       * if user's private window is active.
+       * then we will not increment the unread count
+       */
+
+      if (!(individualActiveRef.current === parseInt(data.sender))) {
         setUnreadIndividualMessageCount((prevState) => {
           const prevCount =
-            prevState && prevState[data.sender] ? prevState[data.sender] : 0;
+            prevState && prevState[parseInt(data.sender)]
+              ? prevState[parseInt(data.sender)]
+              : 0;
           return {
             ...prevState,
-            [data.sender]: prevCount + 1,
+            [parseInt(data.sender)]: prevCount + 1,
           };
         });
       }
     });
   }, []);
 
-  const addMessageToStore = (uid: string, body: messageInterface) => {
+  const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
       return [...m, {ts: body.ts, uid, msg: body.msg}];
     });
   };
 
   const addMessageToPrivateStore = (
-    uid: string,
+    uid: UidType,
     body: messageInterface,
     local: boolean,
   ) => {
@@ -158,6 +163,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   };
 
   const sendChatMessage = (msg: string, toUid?: UidType) => {
+    if (typeof msg == 'string' && msg.trim() === '') return;
     if (toUid) {
       CustomEvents.send(
         EventNames.PRIVATE_CHAT_MESSAGE,
@@ -167,7 +173,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         toUid,
       );
       addMessageToPrivateStore(
-        toUid.toString(),
+        toUid,
         {
           msg: msg,
           ts: timeNow(),
@@ -178,7 +184,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
         value: msg,
       });
-      addMessageToStore(localUid.toString(), {
+      addMessageToStore(localUid, {
         msg: msg,
         ts: timeNow(),
       });

package/template/src/components/participants/AllHostParticipants.tsx

@@ -19,30 +19,35 @@ export default function AllHostParticipants(props: any) {
 
   return (
     <>
-      {renderPosition.map((uid) =>
-        uid === localUid ? (
-          <MeParticipant
-            name={getParticipantName(uid)}
-            p_style={p_style}
-            key={uid}
-          />
-        ) : renderList[uid]?.type === 'screenshare' ? (
-          <ScreenshareParticipants
-            name={getParticipantName(uid)}
-            p_styles={p_style}
-            key={uid}
-          />
-        ) : (
-          <RemoteParticipants
-            name={getParticipantName(uid)}
-            p_styles={p_style}
-            user={renderList[uid]}
-            showControls={renderList[uid]?.type === 'rtc'}
-            isHost={isHost}
-            key={uid}
-          />
-        ),
+      {/* User should see his name first */}
+      {renderPosition.filter((uid) => uid === localUid).length > 0 && (
+        <MeParticipant
+          name={getParticipantName(localUid)}
+          p_style={p_style}
+          key={localUid}
+        />
       )}
+      {/* Others Users in the call */}
+      {renderPosition
+        .filter((uid) => uid !== localUid)
+        .map((uid) =>
+          renderList[uid]?.type === 'screenshare' ? (
+            <ScreenshareParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              key={uid}
+            />
+          ) : (
+            <RemoteParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              user={renderList[uid]}
+              showControls={renderList[uid]?.type === 'rtc'}
+              isHost={isHost}
+              key={uid}
+            />
+          ),
+        )}
     </>
   );
 }

package/template/src/components/useShareLink.tsx

@@ -45,8 +45,12 @@ interface ShareLinkProvideProps {
 }
 
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
-  const {meetingTitle, meetingPassphrase, isSeparateHostLink} =
-    useMeetingInfo();
+  const {
+    meetingTitle,
+    meetingPassphrase,
+    isSeparateHostLink,
+    isJoinDataFetched,
+  } = useMeetingInfo();
 
   //commmented for v1 release
   // const copiedToClipboardText = useString(
@@ -61,7 +65,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const meetingIdText = 'Meeting ID';
   const PSTNNumberText = 'PSTN Number';
   const PSTNPinText = 'PSTN Pin';
-  const meetingInviteText = ({meetingName, id, url, pstn}) => {
+  const meetingInviteText = ({meetingName, id, url, pstn, isCallActive}) => {
     let inviteContent = '';
     if (url) {
       // if host data is present generate links for both host and attendee
@@ -70,7 +74,13 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       }
       // if host data is not present then generate link for attendee alone
       else {
-        inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.attendee}`;
+        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
@@ -79,7 +89,13 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       }
       // if host data is not present then generate meeting ID for attendee alone
       else {
-        inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.attendee}`;
+        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
@@ -114,6 +130,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
             pin: meetingPassphrase.pstn.pin,
           }
         : undefined,
+      isCallActive: isJoinDataFetched,
     });
     return stringToCopy;
   };

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

@@ -16,10 +16,11 @@ 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 {
-  engine!: RtmEngine;
-  source: EventSourceEnum = EventSourceEnum.core;
+  private engine!: RtmEngine;
+  private source: EventSourceEnum = EventSourceEnum.core;
 
   constructor(source?: EventSourceEnum) {
     this.engine = RTMEngine.getInstance().engine;
@@ -63,6 +64,7 @@ class CustomEvents {
     }
     return true;
   };
+
   private _validateListener = (listener: TEventCallback): boolean => {
     if (typeof listener !== 'function') {
       throw Error(
@@ -73,10 +75,13 @@ class CustomEvents {
   };
 
   /**
-   * Sends the data across to client using transport layer RTM API's
+   * 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 If defined then sent to individual peer in the channle. If not defined then sent to everyone
+   * @param {ToOptions} to uid or uids[] of user
    * @api private
    */
   private _send = async (rtmPayload: any, to?: ToOptions) => {
@@ -87,7 +92,7 @@ class CustomEvents {
     // Case 1: send to channel
     if (
       typeof to === 'undefined' ||
-      (typeof to === 'number' && !to) ||
+      (typeof to === 'number' && to <= 0) ||
       (Array.isArray(to) && to?.length === 0)
     ) {
       console.log('CUSTOM_EVENT_API: case 1 executed');
@@ -100,12 +105,12 @@ class CustomEvents {
       }
     }
     // Case 2: send to indivdual
-    if (typeof to === 'number' && !to) {
+    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: `${to}`,
+          peerId: `${adjustedUID}`,
           offline: false,
           text,
         });
@@ -120,9 +125,9 @@ class CustomEvents {
 
       try {
         for (const uid of to) {
-          // TODO adjust uids
+          const adjustedUID = adjustUID(uid);
           await this.engine.sendMessageToPeer({
-            peerId: `${uid}`,
+            peerId: `${adjustedUID}`,
             offline: false,
             text,
           });
@@ -134,15 +139,35 @@ class CustomEvents {
     }
   };
 
+  /**
+   * 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);
   };
 
-  off = (evt?: string, listener?: TEventCallback) => {
-    if (listener) {
-      if (this._validateListener(listener) && this._validateEvt(evt)) {
-        EventUtils.removeListener(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)) {
@@ -153,6 +178,20 @@ class CustomEvents {
     }
   };
 
+  /**
+   * 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;
@@ -177,21 +216,6 @@ class CustomEvents {
       console.log('CUSTOM_EVENT_API: sendPersist sending failed. ', error);
     }
   };
-
-  printEvents = () => {
-    console.log(
-      'CUSTOM_EVENT_API: EVENTS source',
-      EventUtils.getEvents(EventSourceEnum.core),
-    );
-    console.log(
-      'CUSTOM_EVENT_API: EVENTS fpe',
-      EventUtils.getEvents(EventSourceEnum.fpe),
-    );
-  };
-  // once = (name: string, listener: any) => {
-  //   console.log('CUSTOM_EVENT_API: Event lifecycle: ONCE');
-  //   const response = EventUtils.addOnceListener(name, listener);
-  // };
 }
 
 export default CustomEvents;

package/template/src/rtm/utils.ts

@@ -26,3 +26,19 @@ export const adjustUID = (uid: number): number => {
 };
 
 export const timeNow = () => new Date().getTime();
+
+export const getMessageTime = (ts?: number): number => {
+  if (!ts) return timeNow();
+  try {
+    const timestamp = new Date(ts).getHours();
+    return isNaN(timestamp) ? timeNow() : timestamp;
+  } catch (error) {
+    return timeNow();
+  }
+};
+
+export const get32BitUid = (peerId: string) => {
+  let arr = new Int32Array(1);
+  arr[0] = parseInt(peerId);
+  return arr[0];
+};

package/template/src/rtm-events/EventUtils.ts

@@ -120,10 +120,9 @@ const EventUtils = (function () {
     /**
      * Adds a listener function to the specified event.
      * The listener will not be added if it is a duplicate.
-     * If the listener returns true then it will be removed after it is called.
      *
      * @param {String} evt Name of the event to attach the listener to.
-     * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
+     * @param {Function} listener Method to be called when the event is emitted.
      * @param {EventSourceEnum} source Name of the bucket to search events from
      * @return {Object} Current instance of EventUtils
      */

package/template/src/subComponents/ChatContainer.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useRef} from 'react';
+import React, {useRef} from 'react';
 import {
   View,
   ScrollView,
@@ -21,12 +21,12 @@ import {
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
-import ChatContext, {ChatBubbleProps} from '../components/ChatContext';
-import {BtnTemplate} from '../../agora-rn-uikit';
+import {ChatBubbleProps} from '../components/ChatContext';
+import {useLocalUid} from '../../agora-rn-uikit';
 import {ImageIcon} from '../../agora-rn-uikit';
 import TextWithTooltip from './TextWithTooltip';
 import {useFpe} from 'fpe-api';
-import {isValidReactComponent, isWeb} from '../utils/common';
+import {isWeb} from '../utils/common';
 import {useString} from '../utils/useString';
 import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
 import useUserList from '../utils/useUserList';
@@ -50,7 +50,7 @@ const ChatContainer = (props: any) => {
     selectedChatUserId: selectedUserID,
     setPrivateActive,
   } = useChatUIControl();
-  const {localUid} = useContext(ChatContext);
+  const localUid = useLocalUid();
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';

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

@@ -34,13 +34,15 @@ export interface ScreenshareButtonProps {
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
-  const {isScreenshareActive, startUserScreenshare} = useScreenshare();
+  const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
+    useScreenshare();
   //commented for v1 release
   //const screenShareButton = useString('screenShareButton')();
   const screenShareButton = 'Share';
   const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
   const {buttonTemplateName = defaultTemplateValue} = props;
-  const onPress = () => startUserScreenshare();
+  const onPress = () =>
+    isScreenshareActive ? stopUserScreenShare() : startUserScreenshare();
   let btnTemplateProps: BtnTemplateInterface = {
     name: isScreenshareActive ? 'screenshareOffIcon' : 'screenshareIcon',
     onPress,

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

@@ -40,9 +40,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
 
-  const prevRenderPosition = usePrevious<{renderPosition: UidType[]}>({
-    renderPosition,
-  });
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
 
@@ -60,9 +57,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         value: [screenShareUid],
       });
       setPinnedLayout();
-    }
-    //screenshare is stopped set the layout Grid View
-    else {
+    } else {
+      //screenshare is stopped set the layout Grid View
       changeLayout();
     }
   };
@@ -113,15 +109,17 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   const stopUserScreenShare = () => {
-    if (isScreenshareActive) {
-      startUserScreenshare();
-    }
+    if (!isScreenshareActive) return;
+    userScreenshare(false);
+  };
+  const startUserScreenshare = () => {
+    if (isScreenshareActive) return;
+    userScreenshare(true);
   };
 
-  const startUserScreenshare = async () => {
-    const isScreenActive = isScreenshareActive;
+  const userScreenshare = async (isActive: boolean) => {
     if (isRecordingActive) {
-      executeRecordingQuery(isScreenActive);
+      executeRecordingQuery(isActive);
     }
     try {
       // @ts-ignore
@@ -134,17 +132,19 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         rtc.RtcEngine as unknown as IAgoraRTC,
         encryption as unknown as any,
       );
-      !isScreenActive && setScreenshareActive(true);
+      isActive && setScreenshareActive(true);
     } catch (e) {
       console.error("can't start the screen share", e);
       executeNormalQuery();
     }
-    CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-      value: `${true}`,
-      level: EventLevel.LEVEL2,
-    });
-    //if local user started the screenshare then change layout to pinned
-    triggerChangeLayout(true, screenShareUid);
+    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 (