Merge pull request #14114 from KDSBrowne/BBB-open-chat-audio

Play Audio Alerts For Chats While Panel Is Open

bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
+import injectNotify from '/imports/ui/components/toast/inject-notify/component';
 import AudioService from '/imports/ui/components/audio/service';
 import ChatPushAlert from './push-alert/component';
 import Service from '../service';
@@ -45,6 +46,14 @@ const intlMessages = defineMessages({
     id: 'app.chat.clearPublicChatMessage',
     description: 'message of when clear the public chat',
   },
+  publicChatMsg: {
+    id: 'app.toast.chat.public',
+    description: 'public chat toast message title',
+  },
+  privateChatMsg: {
+    id: 'app.toast.chat.private',
+    description: 'private chat toast message title',
+  },
 });
 
 const ALERT_INTERVAL = 5000; // 5 seconds
@@ -59,6 +68,8 @@ const ChatAlert = (props) => {
     unreadMessagesByChat,
     intl,
     layoutContextDispatch,
+    chatsTracker,
+    notify,
   } = props;
 
   const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
@@ -94,6 +105,35 @@ const ChatAlert = (props) => {
     }
   }, [pushAlertEnabled]);
 
+  useEffect(() => {
+    const keys = Object.keys(chatsTracker);
+    keys.forEach((key) => {
+      if (chatsTracker[key]?.shouldNotify) {
+        if (audioAlertEnabled) {
+          AudioService.playAlertSound(`${Meteor.settings.public.app.cdn
+            + Meteor.settings.public.app.basename
+            + Meteor.settings.public.app.instanceId}`
+            + '/resources/sounds/notify.mp3');
+        }
+        if (pushAlertEnabled) {
+          notify(
+            key === 'MAIN-PUBLIC-GROUP-CHAT'
+              ? intl.formatMessage(intlMessages.publicChatMsg)
+              : intl.formatMessage(intlMessages.privateChatMsg),
+            'info',
+            'chat',
+            { autoClose: 3000 },
+            <div>
+              <div style={{ fontWeight: 700 }}>{chatsTracker[key].lastSender}</div>
+              <div>{chatsTracker[key].content}</div>
+            </div>,
+            true,
+          );
+        }
+      }
+    });
+  }, [chatsTracker]);
+
   useEffect(() => {
     if (pushAlertEnabled) {
       const alertsObject = unreadMessagesByChat;
@@ -198,4 +238,4 @@ const ChatAlert = (props) => {
 ChatAlert.propTypes = propTypes;
 ChatAlert.defaultProps = defaultProps;
 
-export default injectIntl(ChatAlert);
+export default injectNotify(injectIntl(ChatAlert));

bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx

@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import logger from '/imports/startup/client/logger';
+import Auth from '/imports/ui/services/auth';
 import ChatAlert from './component';
 import LayoutContext from '../../layout/context';
 import { PANELS } from '../../layout/enums';
@@ -16,6 +18,15 @@ const propTypes = {
   pushAlertEnabled: PropTypes.bool.isRequired,
 };
 
+// custom hook for getting previous value
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 const ChatAlertContainer = (props) => {
   const layoutContext = useContext(LayoutContext);
   const { layoutContextState, layoutContextDispatch } = layoutContext;
@@ -54,9 +65,46 @@ const ChatAlertContainer = (props) => {
     })
     : null;
 
+  const chatsTracker = {};
+
+  if (usingChatContext.chats) {
+    const chatsActive = Object.entries(usingChatContext.chats);
+    chatsActive.forEach((c) => {
+      try {
+        if (c[0] === idChat || (c[0] === 'MAIN-PUBLIC-GROUP-CHAT' && idChat === 'public')) {
+          chatsTracker[c[0]] = {};
+          chatsTracker[c[0]].lastSender = users[Auth.meetingID][c[1]?.lastSender]?.name;
+          if (c[1]?.posJoinMessages || c[1]?.messageGroups) {
+            const m = Object.entries(c[1]?.posJoinMessages || c[1]?.messageGroups);
+            chatsTracker[c[0]].count = m?.length;
+            if (m[m.length - 1]) {
+              chatsTracker[c[0]].content = m[m.length - 1][1]?.message;
+            }
+          }
+        }
+      } catch (e) {
+        logger.error({
+          logCode: 'chat_alert_component_error',
+        }, 'Error : ', e.error);
+      }
+    });
+
+    const prevTracker = usePrevious(chatsTracker);
+
+    if (prevTracker) {
+      const keys = Object.keys(prevTracker);
+      keys.forEach((key) => {
+        if (chatsTracker[key]?.count > prevTracker[key]?.count) {
+          chatsTracker[key].shouldNotify = true;
+        }
+      });
+    }
+  }
+
   return (
     <ChatAlert
       {...props}
+      chatsTracker={chatsTracker}
       layoutContextDispatch={layoutContextDispatch}
       unreadMessagesCountByChat={unreadMessagesCountByChat}
       unreadMessagesByChat={unreadMessagesByChat}