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

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

@@ -21,39 +21,66 @@ import {useChatNotification} from '../chat-notification/useChatNotification';
 import Toast from '../../../react-native-toast-message';
 import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
+import getUniqueID from '../../utils/getUniqueID';
+
+enum ChatMessageActionEnum {
+  Create = 'Create_Chat_Message',
+  Update = 'Update_Chat_Message',
+  Delete = 'Delete_Chat_Message',
+}
 
 interface ChatMessagesProviderProps {
   children: React.ReactNode;
 }
-interface messageInterface {
-  ts: number;
+export interface messageInterface {
+  createdTimestamp: number;
+  updatedTimestamp?: number;
   msg: string;
+  msgId: string;
+  isDeleted: boolean;
 }
-interface messageStoreInterface extends messageInterface {
+export interface messageStoreInterface extends messageInterface {
   uid: UidType;
 }
 
 interface ChatMessagesInterface {
-  messageStore: messageStoreInterface | any;
-  privateMessageStore: any;
+  messageStore: messageStoreInterface[];
+  privateMessageStore: {[key: string]: messageStoreInterface[]};
   sendChatMessage: (msg: string, toUid?: UidType) => void;
+  editChatMessage: (msgId: string, msg: string, toUid?: UidType) => void;
+  deleteChatMessage: (msgId: string, toUid?: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
   messageStore: [],
   privateMessageStore: {},
   sendChatMessage: () => {},
+  editChatMessage: () => {},
+  deleteChatMessage: () => {},
 });
 
 const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const {renderList} = useRenderContext();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
-  const {groupActive, selectedChatUserId, setGroupActive} = useChatUIControl();
-  const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
-    useChatNotification();
+  const {
+    groupActive,
+    selectedChatUserId,
+    setGroupActive,
+    setPrivateActive,
+    setSelectedChatUserId,
+  } = useChatUIControl();
+  const {
+    setUnreadGroupMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadPrivateMessageCount,
+    unreadIndividualMessageCount,
+    setUnreadPrivateMessageCount,
+  } = useChatNotification();
   const [messageStore, setMessageStore] = useState<messageStoreInterface[]>([]);
-  const [privateMessageStore, setPrivateMessageStore] = useState({});
+  const [privateMessageStore, setPrivateMessageStore] = useState<{
+    [key: string]: messageStoreInterface[];
+  }>({});
 
   const renderListRef = useRef({renderList: renderList});
   const groupActiveRef = useRef<boolean>();
@@ -75,70 +102,207 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   }, [selectedChatUserId]);
 
   React.useEffect(() => {
-    const showMessageNotification = (msg: string, uid: string) => {
+    const showMessageNotification = (
+      msg: string,
+      uid: string,
+      isPrivateMessage: boolean = false,
+    ) => {
+      const uidAsNumber = parseInt(uid);
       Toast.show({
         type: 'success',
         text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[parseInt(uid)]?.name
-          ? fromText(renderListRef.current.renderList[parseInt(uid)]?.name)
+        text2: renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
           : '',
         visibilityTime: 1000,
         onPress: () => {
+          if (isPrivateMessage) {
+            setUnreadPrivateMessageCount(
+              unreadPrivateMessageCount -
+                (unreadIndividualMessageCount[uidAsNumber] || 0),
+            );
+            setUnreadIndividualMessageCount((prevState) => {
+              return {
+                ...prevState,
+                [uidAsNumber]: 0,
+              };
+            });
+            setGroupActive(false);
+            setSelectedChatUserId(uidAsNumber);
+            setPrivateActive(true);
+          } else {
+            setUnreadGroupMessageCount(0);
+            setPrivateActive(false);
+            setSelectedChatUserId(0);
+            setGroupActive(true);
+          }
           setSidePanel(SidePanelType.Chat);
-          setUnreadGroupMessageCount(0);
-          setGroupActive(true);
         },
       });
     };
     CustomEvents.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToStore(parseInt(data.sender), {
-        msg: data.payload.value,
-        ts: data.ts,
-      });
-      /**
-       * if chat group window is not active.
-       * then we will increment the unread count
-       */
-      if (!groupActiveRef.current) {
-        setUnreadGroupMessageCount((prevState) => {
-          return prevState + 1;
-        });
+      const messageData = JSON.parse(data.payload.value);
+      switch (data?.payload?.action) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, data.sender);
+          addMessageToStore(parseInt(data.sender), {
+            msg: messageData.msg,
+            createdTimestamp: messageData.createdTimestamp,
+            isDeleted: messageData.isDeleted,
+            msgId: messageData.msgId,
+          });
+          /**
+           * if chat group window is not active.
+           * then we will increment the unread count
+           */
+          if (!groupActiveRef.current) {
+            setUnreadGroupMessageCount((prevState) => {
+              return prevState + 1;
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
     CustomEvents.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToPrivateStore(
-        parseInt(data.sender),
-        {
-          msg: data.payload.value,
-          ts: data.ts,
-        },
-        false,
-      );
-      /**
-       * 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[parseInt(data.sender)]
-              ? prevState[parseInt(data.sender)]
-              : 0;
-          return {
-            ...prevState,
-            [parseInt(data.sender)]: prevCount + 1,
-          };
-        });
+      const messageData = JSON.parse(data.payload.value);
+
+      switch (data?.payload?.action) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, data.sender, true);
+          addMessageToPrivateStore(
+            parseInt(data.sender),
+            {
+              msg: messageData.msg,
+              createdTimestamp: messageData.createdTimestamp,
+              msgId: messageData.msgId,
+              isDeleted: messageData.isDeleted,
+            },
+            false,
+          );
+          /**
+           * 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[parseInt(data.sender)]
+                  ? prevState[parseInt(data.sender)]
+                  : 0;
+              return {
+                ...prevState,
+                [parseInt(data.sender)]: prevCount + 1,
+              };
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[parseInt(data.sender)];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [parseInt(data.sender)]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[parseInt(data.sender)];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [parseInt(data.sender)]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
   }, []);
 
   const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
-      return [...m, {ts: body.ts, uid, msg: body.msg}];
+      return [
+        ...m,
+        {
+          createdTimestamp: body.createdTimestamp,
+          uid,
+          msg: body.msg,
+          msgId: body.msgId,
+          isDeleted: body.isDeleted,
+        },
+      ];
     });
   };
 
@@ -147,16 +311,30 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     body: messageInterface,
     local: boolean,
   ) => {
-    setPrivateMessageStore((state: any) => {
+    setPrivateMessageStore((state) => {
       let newState = {...state};
       newState[uid] !== undefined
         ? (newState[uid] = [
             ...newState[uid],
-            {ts: body.ts, uid: local ? localUid : uid, msg: body.msg},
+            {
+              createdTimestamp: body.createdTimestamp,
+              uid: local ? localUid : uid,
+              msg: body.msg,
+              msgId: body.msgId,
+              isDeleted: body.isDeleted,
+            },
           ])
         : (newState = {
             ...newState,
-            [uid]: [{ts: body.ts, uid: local ? localUid : uid, msg: body.msg}],
+            [uid]: [
+              {
+                createdTimestamp: body.createdTimestamp,
+                uid: local ? localUid : uid,
+                msg: body.msg,
+                msgId: body.msgId,
+                isDeleted: body.isDeleted,
+              },
+            ],
           });
       return {...newState};
     });
@@ -165,29 +343,148 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const sendChatMessage = (msg: string, toUid?: UidType) => {
     if (typeof msg == 'string' && msg.trim() === '') return;
     if (toUid) {
+      const messageData = {
+        msg,
+        createdTimestamp: timeNow(),
+        msgId: getUniqueID(),
+        isDeleted: false,
+      };
       CustomEvents.send(
         EventNames.PRIVATE_CHAT_MESSAGE,
         {
-          value: msg,
+          value: JSON.stringify(messageData),
+          action: ChatMessageActionEnum.Create,
         },
         toUid,
       );
-      addMessageToPrivateStore(
-        toUid,
-        {
-          msg: msg,
-          ts: timeNow(),
-        },
-        true,
-      );
+      addMessageToPrivateStore(toUid, messageData, true);
     } else {
+      const messageData = {
+        msg,
+        msgId: getUniqueID(),
+        isDeleted: false,
+        createdTimestamp: timeNow(),
+      };
       CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
-        value: msg,
-      });
-      addMessageToStore(localUid, {
-        msg: msg,
-        ts: timeNow(),
+        value: JSON.stringify(messageData),
+        action: ChatMessageActionEnum.Create,
       });
+      addMessageToStore(localUid, messageData);
+    }
+  };
+
+  const editChatMessage = (msgId: string, msg: string, toUid?: UidType) => {
+    if (typeof msg == 'string' && msg.trim() === '') return;
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        CustomEvents.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          {
+            value: JSON.stringify({msgId, ...editMsgData}),
+            action: ChatMessageActionEnum.Update,
+          },
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
+    } else {
+      //check if user has permission to edit
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
+          value: JSON.stringify({msgId, ...editMsgData}),
+          action: ChatMessageActionEnum.Update,
+        });
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
+    }
+  };
+
+  const deleteChatMessage = (msgId: string, toUid?: UidType) => {
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        CustomEvents.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          {
+            value: JSON.stringify({msgId, ...deleteMsgData}),
+            action: ChatMessageActionEnum.Delete,
+          },
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
+    } else {
+      //check if user has permission to delete
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
+          value: JSON.stringify({msgId, ...deleteMsgData}),
+          action: ChatMessageActionEnum.Delete,
+        });
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
     }
   };
 
@@ -197,6 +494,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         messageStore,
         privateMessageStore,
         sendChatMessage,
+        editChatMessage,
+        deleteChatMessage,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

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/contexts/ScreenShareContext.tsx

@@ -12,6 +12,7 @@ export interface ScreenShareObjectInterface {
   [key: string | number]: {
     name: string;
     isActive: boolean;
+    ts: number;
   };
 }
 export interface ScreenShareContextInterface {
@@ -33,6 +34,7 @@ const ScreenShareProvider = (props: ScreenShareProviderProps) => {
       [rtcProps?.screenShareUid]: {
         name: '',
         isActive: false,
+        ts: 0,
       },
     });
 

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/participants/MeParticipant.tsx

@@ -26,9 +26,11 @@ const MeParticipant = (props: any) => {
         <View style={[p_style.actionBtnIcon, {marginRight: 10}]}>
           <LocalAudioMute buttonTemplateName={ButtonTemplateName.topBar} />
         </View>
-        <View style={p_style.actionBtnIcon}>
-          <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
-        </View>
+        {!$config.AUDIO_ROOM && (
+          <View style={p_style.actionBtnIcon}>
+            <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
+          </View>
+        )}
       </View>
     </View>
   );

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

@@ -49,13 +49,15 @@ const RemoteParticipants = (props: remoteParticipantsInterface) => {
               isHost={isHost}
             />
           </View>
-          <View style={[p_styles.actionBtnIcon]}>
-            <RemoteVideoMute
-              uid={user.uid}
-              video={user.video}
-              isHost={isHost}
-            />
-          </View>
+          {!$config.AUDIO_ROOM && (
+            <View style={[p_styles.actionBtnIcon]}>
+              <RemoteVideoMute
+                uid={user.uid}
+                video={user.video}
+                isHost={isHost}
+              />
+            </View>
+          )}
         </View>
       ) : (
         <></>