From 622084f4146179ebe321b0be5ca6ed66b28b9e59 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Mon, 17 Jan 2022 05:01:45 +0000 Subject: [PATCH 1/4] add audio alerts for chats while open --- .../ui/components/chat/alert/component.jsx | 15 ++++++++ .../ui/components/chat/alert/container.jsx | 37 +++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx index c3d4b0a73d..35db21a5d0 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx @@ -59,6 +59,7 @@ const ChatAlert = (props) => { unreadMessagesByChat, intl, layoutContextDispatch, + chatsTracker, } = props; const [unreadMessagesCount, setUnreadMessagesCount] = useState(0); @@ -94,6 +95,20 @@ const ChatAlert = (props) => { } }, [pushAlertEnabled]); + useEffect(() => { + if (audioAlertEnabled) { + const keys = Object.keys(chatsTracker); + keys.forEach((key) => { + if (chatsTracker[key]?.shouldNotify) { + AudioService.playAlertSound(`${Meteor.settings.public.app.cdn + + Meteor.settings.public.app.basename + + Meteor.settings.public.app.instanceId}` + + '/resources/sounds/notify.mp3'); + } + }); + } + }, [chatsTracker]); + useEffect(() => { if (pushAlertEnabled) { const alertsObject = unreadMessagesByChat; diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx index a0d3eb990d..5ab1ac0d23 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx @@ -16,6 +16,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 +63,37 @@ const ChatAlertContainer = (props) => { }) : null; + const chatsTracker = {}; + + if (usingChatContext.chats) { + const chatsActive = Object.entries(usingChatContext.chats); + chatsActive.forEach((c) => { + chatsTracker[c[0]] = {}; + 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; + } + } + }); + + 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 ( Date: Mon, 17 Jan 2022 13:51:05 +0000 Subject: [PATCH 2/4] add check to play sound for open chat panel --- .../ui/components/chat/alert/container.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx index 5ab1ac0d23..ba914700f7 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx @@ -68,12 +68,14 @@ const ChatAlertContainer = (props) => { if (usingChatContext.chats) { const chatsActive = Object.entries(usingChatContext.chats); chatsActive.forEach((c) => { - chatsTracker[c[0]] = {}; - 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; + if (c[0] === idChat || (c[0] === 'MAIN-PUBLIC-GROUP-CHAT' && idChat === 'public')) { + chatsTracker[c[0]] = {}; + 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; + } } } }); @@ -83,7 +85,7 @@ const ChatAlertContainer = (props) => { if (prevTracker) { const keys = Object.keys(prevTracker); keys.forEach((key) => { - if (chatsTracker[key].count > prevTracker[key].count) { + if (chatsTracker[key]?.count > prevTracker[key]?.count) { chatsTracker[key].shouldNotify = true; } }); From d58a07d89097339b7eef00074594bb06d0302bbc Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Wed, 19 Jan 2022 23:02:57 +0000 Subject: [PATCH 3/4] add try / catch with error log --- .../ui/components/chat/alert/container.jsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx index ba914700f7..dcfe266038 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx @@ -1,5 +1,6 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; +import logger from '/imports/startup/client/logger'; import ChatAlert from './component'; import LayoutContext from '../../layout/context'; import { PANELS } from '../../layout/enums'; @@ -68,15 +69,21 @@ const ChatAlertContainer = (props) => { if (usingChatContext.chats) { const chatsActive = Object.entries(usingChatContext.chats); chatsActive.forEach((c) => { - if (c[0] === idChat || (c[0] === 'MAIN-PUBLIC-GROUP-CHAT' && idChat === 'public')) { - chatsTracker[c[0]] = {}; - 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; + try { + if (c[0] === idChat || (c[0] === 'MAIN-PUBLIC-GROUP-CHAT' && idChat === 'public')) { + chatsTracker[c[0]] = {}; + 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); } }); From 190d753f7ebc0fde282b25a7b4acff743abf1e8b Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Thu, 20 Jan 2022 00:43:42 +0000 Subject: [PATCH 4/4] add message toast for open chat --- .../ui/components/chat/alert/component.jsx | 39 +++++++++++++++---- .../ui/components/chat/alert/container.jsx | 2 + 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx index 35db21a5d0..88d98097b3 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx +++ b/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 @@ -60,6 +69,7 @@ const ChatAlert = (props) => { intl, layoutContextDispatch, chatsTracker, + notify, } = props; const [unreadMessagesCount, setUnreadMessagesCount] = useState(0); @@ -96,17 +106,32 @@ const ChatAlert = (props) => { }, [pushAlertEnabled]); useEffect(() => { - if (audioAlertEnabled) { - const keys = Object.keys(chatsTracker); - keys.forEach((key) => { - if (chatsTracker[key]?.shouldNotify) { + 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 }, +
+
{chatsTracker[key].lastSender}
+
{chatsTracker[key].content}
+
, + true, + ); + } + } + }); }, [chatsTracker]); useEffect(() => { @@ -213,4 +238,4 @@ const ChatAlert = (props) => { ChatAlert.propTypes = propTypes; ChatAlert.defaultProps = defaultProps; -export default injectIntl(ChatAlert); +export default injectNotify(injectIntl(ChatAlert)); diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx index dcfe266038..550a0d54da 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/alert/container.jsx @@ -1,6 +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'; @@ -72,6 +73,7 @@ const ChatAlertContainer = (props) => { 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;