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

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

@@ -20,15 +20,7 @@ import useUserList from '../../utils/useUserList';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
 import CustomEvents from '../../custom-events';
-import {EventNames} from '../../rtm-events';
-
-function usePrevious(value: any) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import {EventNames, EventActions} from '../../rtm-events';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const rtc = useContext(RtcContext);
@@ -40,7 +32,6 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   // const userText = useString('remoteUserDefaultLabel')();
   const getScreenShareName = (name: string) => `${name}'s screenshare`;
   const userText = 'User';
-  const prevRenderPosition = usePrevious({renderPosition});
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
 
@@ -58,9 +49,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();
     }
   };
@@ -69,19 +59,38 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (data?.payload?.action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 

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

@@ -1,3 +1,14 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {RtcContext, PropsContext, UidType} from '../../../agora-rn-uikit';
 import {ScreenshareContext} from './useScreenshare';
@@ -9,18 +20,11 @@ import {useRecording} from '../recording/useRecording';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import useUserList from '../../utils/useUserList';
 import CustomEvents, {EventLevel} from '../../custom-events';
-import {EventNames} from '../../rtm-events';
+import {EventActions, EventNames} from '../../rtm-events';
 import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
-
-function usePrevious<T = any>(value: any) {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import {timeNow} from '../../rtm/utils';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
@@ -67,19 +71,38 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (data?.payload?.action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: data.payload.value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 
@@ -90,18 +113,30 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       console.log('STOPPED SHARING');
       executeNormalQuery();
       CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-        value: `${false}`,
+        action: EventActions.SCREENSHARE_STOPPED,
+        value: 0,
         level: EventLevel.LEVEL2,
       });
+      setScreenShareData((prevState) => {
+        return {
+          ...prevState,
+          [screenShareUid]: {
+            ...prevState[screenShareUid],
+            isActive: false,
+            ts: 0,
+          },
+        };
+      });
       //if local user stopped the screenshare then change layout to grid
       triggerChangeLayout(false);
     });
   }, []);
 
   const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (!isScreenActive) {
+    if (isScreenActive) {
+      console.log('screenshare: Executing presenter query');
       // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery();
+      executePresenterQuery(screenShareUid);
     } else {
       // If recording is already going on, stop the recording by executing the graphql query.
       executeNormalQuery();
@@ -121,6 +156,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 +169,32 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
+
+      if (isActive) {
+        // 1. Set local state
+        setScreenShareData((prevState) => {
+          return {
+            ...prevState,
+            [screenShareUid]: {
+              name: renderListRef.current.renderList[screenShareUid]?.name,
+              isActive: true,
+              ts: timeNow(),
+            },
+          };
+        });
+        // 2. Inform everyone in the channel screenshare is actice
+        CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
+          action: EventActions.SCREENSHARE_STARTED,
+          value: timeNow(),
+          level: EventLevel.LEVEL2,
+        });
+        //3 . 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);
       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/SdkEvents.ts

@@ -46,7 +46,7 @@ const SDKEvents: SDKEventsInterface = {
   },
   on: function (eventName, cb) {
     console.log(
-      'DEBUG(aditya)-SDKEvents: event registered:',
+      'SDKEvents: event registered:',
       eventName,
     );
     this.eventsMap[eventName] = cb;
@@ -55,12 +55,12 @@ const SDKEvents: SDKEventsInterface = {
     }
   },
   emit: function (eventName, ...args) {
-    console.log('DEBUG(aditya)-SDKEvents: emit called:', eventName, ...args);
+    console.log('SDKEvents: emit called:', eventName, ...args);
     this.eventsMap[eventName](...args);
     this.eventSubs[eventName] = args;
   },
   off: function (eventName) {
-    console.log('DEBUG(aditya)-SDKEvents: event deregistered:', eventName);
+    console.log('SDKEvents: event deregistered:', eventName);
     this.eventSubs[eventName] = null;
   },
 };

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/getUniqueID.ts

@@ -0,0 +1,5 @@
+import {nanoid} from 'nanoid/non-secure';
+
+export default function getUniqueID() {
+  return nanoid();
+}

package/template/src/utils/useDeleteMessage.ts

@@ -0,0 +1,36 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {MESSAGE_TYPE} from './useSendMessage';
+
+function useDeleteMessage() {
+  const {deleteChatMessage} = useChatMessages();
+  return (type: MESSAGE_TYPE, msgId: string, uid?: UidType) => {
+    switch (type) {
+      case MESSAGE_TYPE.group:
+        deleteChatMessage(msgId);
+        break;
+      case MESSAGE_TYPE.private:
+        if (uid) {
+          deleteChatMessage(msgId, uid);
+        } else {
+          console.error('To delete the private message, UID should be passed');
+        }
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+export default useDeleteMessage;

package/template/src/utils/useEditMessage.ts

@@ -0,0 +1,41 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {MESSAGE_TYPE} from './useSendMessage';
+
+function useEditMessage() {
+  const {editChatMessage} = useChatMessages();
+  return (
+    type: MESSAGE_TYPE,
+    msgId: string,
+    message: string,
+    uid?: UidType,
+  ) => {
+    switch (type) {
+      case MESSAGE_TYPE.group:
+        editChatMessage(msgId, message);
+        break;
+      case MESSAGE_TYPE.private:
+        if (uid) {
+          editChatMessage(msgId, message, uid);
+        } else {
+          console.error('To edit the private message, UID should be passed');
+        }
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+export default useEditMessage;

package/template/src/utils/useGetName.ts

@@ -9,11 +9,10 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
+import {useUserPreference} from '../components/useUserPreference';
 
 function useGetName() {
-  const {displayName} = useContext(ChatContext);
+  const {displayName} = useUserPreference();
   return displayName;
 }
 

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

package/template/src/utils/useLocalShareScreenUid.ts

@@ -0,0 +1,19 @@
+/*
+********************************************
+ 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 {useContext} from 'react';
+import {PropsContext} from '../../agora-rn-uikit';
+
+const useLocalScreenShareUid = () => {
+  const {rtcProps} = useContext(PropsContext);
+  return rtcProps?.screenShareUid || 0;
+};
+export default useLocalScreenShareUid;

package/template/src/utils/useSendMessage.ts

@@ -9,24 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
 import {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
 
 export enum MESSAGE_TYPE {
   group,
   private,
 }
 function useSendMessage() {
-  const {sendMessage, sendMessageToUid} = useContext(ChatContext);
+  const {sendChatMessage} = useChatMessages();
   return (type: MESSAGE_TYPE, message: string, uid?: UidType) => {
     switch (type) {
       case MESSAGE_TYPE.group:
-        sendMessage(message);
+        sendChatMessage(message);
         break;
       case MESSAGE_TYPE.private:
         if (uid) {
-          sendMessageToUid(message, uid);
+          sendChatMessage(message, uid);
         } else {
           console.error('To send the private message, UID should be passed');
         }

package/template/src/utils/useSetName.ts

@@ -9,11 +9,9 @@
  information visit https://appbuilder.agora.io.
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
-
+import {useUserPreference} from '../components/useUserPreference';
 function useSetName() {
-  const {setDisplayName} = useContext(ChatContext);
+  const {setDisplayName} = useUserPreference();
   return setDisplayName;
 }
 

package/template/webpack.rsdk.config.js

@@ -16,6 +16,7 @@ module.exports = merge(commons, {
     'react-router': 'react-router',
     'react-router-dom': 'react-router-dom',
     '@apollo/client': '@apollo/client',
+    nanoid: 'nanoid',
   },
   // Main entry point for the web application
   entry: {
@@ -25,9 +26,9 @@ module.exports = merge(commons, {
   output: {
     path: path.resolve(__dirname, `../Builds/react-sdk`),
     filename: 'index.js',
-    library:{
+    library: {
       type: 'commonjs2',
-    } 
+    },
   },
   // watch: isDevelopment
 });

package/template/webpack.wsdk.config.js

@@ -20,7 +20,6 @@ const baseConfig = {
       name: 'AgoraAppBuilder',
     },
   },
-  watch: isDevelopment
 };
 
 const mappedConfigs = libraryTargets.map((target, _) => {