Merge pull request #15956 from JoVictorNunes/25-issue-15865

fix: poll chat message popup notification

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -46,6 +46,7 @@ import LayoutService from '/imports/ui/components/layout/service';
 import { registerTitleView } from '/imports/utils/dom-utils';
 import GlobalStyles from '/imports/ui/stylesheets/styled-components/globalStyles';
 import MediaService from '/imports/ui/components/media/service';
+import { toast } from 'react-toastify';
 
 const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
 const APP_CONFIG = Meteor.settings.public.app;
@@ -128,6 +129,8 @@ const defaultProps = {
 
 const isLayeredView = window.matchMedia(`(max-width: ${SMALL_VIEWPORT_BREAKPOINT}px)`);
 
+let publishedPollToast = null;
+
 class App extends Component {
   static renderWebcamsContainer() {
     return <NewWebcamContainer />;
@@ -252,6 +255,7 @@ class App extends Component {
       pushLayoutToEveryone, // is layout pushed
       layoutContextDispatch,
       mountRandomUserModal,
+      ignorePollNotifications,
     } = this.props;
 
     if (meetingLayout !== prevProps.meetingLayout) {
@@ -313,10 +317,11 @@ class App extends Component {
         intl.formatMessage(intlMessages.meetingMuteOff), 'info', 'unmute',
       );
     }
-    if (!prevProps.hasPublishedPoll && hasPublishedPoll) {
-      notify(
+    if (!prevProps.hasPublishedPoll && hasPublishedPoll && !ignorePollNotifications) {
+      const id = notify(
         intl.formatMessage(intlMessages.pollPublishedLabel), 'info', 'polling',
       );
+      if (id) publishedPollToast = id;
     }
     if (prevProps.currentUserRole === VIEWER && currentUserRole === MODERATOR) {
       notify(
@@ -330,6 +335,8 @@ class App extends Component {
     }
 
     if (deviceType === null || prevProps.deviceType !== deviceType) this.throttledDeviceType();
+
+    if (ignorePollNotifications && publishedPollToast) toast.dismiss(publishedPollToast);
   }
 
   componentWillUnmount() {

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -250,6 +250,7 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     autoSwapLayout: getFromUserSettings('bbb_auto_swap_layout', LAYOUT_CONFIG.autoSwapLayout),
     hideActionsBar: getFromUserSettings('bbb_hide_actions_bar', false),
     isModalOpen: !!getModal(),
+    ignorePollNotifications: Session.get('ignorePollNotifications'),
   };
 })(AppContainer)));
 

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

@@ -10,10 +10,12 @@ import { stripTags, unescapeHtml } from '/imports/utils/string-utils';
 import Service from '../service';
 import Styled from './styles';
 import { usePreviousValue } from '/imports/ui/components/utils/hooks';
+import { Session } from 'meteor/session';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PUBLIC_CHAT_CLEAR = CHAT_CONFIG.chat_clear;
 const PUBLIC_CHAT_ID = CHAT_CONFIG.public_id;
+const POLL_RESULT_KEY = CHAT_CONFIG.system_messages_keys.chat_poll_result;
 
 const propTypes = {
   pushAlertEnabled: PropTypes.bool.isRequired,
@@ -56,6 +58,14 @@ const intlMessages = defineMessages({
     id: 'app.toast.chat.private',
     description: 'private chat toast message title',
   },
+  pollResults: {
+    id: 'app.toast.chat.poll',
+    description: 'chat toast message for polls',
+  },
+  pollResultsClick: {
+    id: 'app.toast.chat.pollClick',
+    description: 'chat toast click message for polls',
+  },
 });
 
 const ALERT_INTERVAL = 5000; // 5 seconds
@@ -168,6 +178,13 @@ const ChatAlert = (props) => {
     </Styled.PushMessageContent>
   );
 
+  const createPollMessage = () => (
+    <Styled.PushMessageContent>
+      <Styled.UserNameMessage>{intl.formatMessage(intlMessages.pollResults)}</Styled.UserNameMessage>
+      <Styled.ContentMessagePoll>{intl.formatMessage(intlMessages.pollResultsClick)}</Styled.ContentMessagePoll>
+    </Styled.PushMessageContent>
+  );
+
   if (_.isEqual(prevUnreadMessages, unreadMessages)) {
     return null;
   }
@@ -175,9 +192,17 @@ const ChatAlert = (props) => {
   return pushAlertEnabled
     ? unreadMessages.map((timeWindow) => {
       const mappedMessage = Service.mapGroupMessage(timeWindow);
-      const content = mappedMessage
-        ? createMessage(mappedMessage.sender.name, mappedMessage.content.slice(-5))
-        : null;
+
+      let content = null;
+      let isPollResult = false;
+      if (mappedMessage) {
+        if (mappedMessage.id.includes(POLL_RESULT_KEY)) {
+          content = createPollMessage();
+          isPollResult = true;
+        } else {
+          content = createMessage(mappedMessage.sender.name, mappedMessage.content.slice(-5));
+        }
+      }
 
       const messageChatId = mappedMessage.chatId === 'MAIN-PUBLIC-GROUP-CHAT' ? PUBLIC_CHAT_ID : mappedMessage.chatId;
 
@@ -196,10 +221,22 @@ const ChatAlert = (props) => {
                 : <span>{intl.formatMessage(intlMessages.appToastChatPrivate)}</span>
             }
             onOpen={
-              () => setUnreadMessages(newUnreadMessages)
+              () => {
+                if (isPollResult) {
+                  Session.set('ignorePollNotifications', true);
+                }
+
+                setUnreadMessages(newUnreadMessages);
+              }
             }
             onClose={
-              () => setUnreadMessages(newUnreadMessages)
+              () => {
+                if (isPollResult) {
+                  Session.set('ignorePollNotifications', false);
+                }
+
+                setUnreadMessages(newUnreadMessages);
+              }
             }
             alertDuration={timeWindow.durationDiff}
             layoutContextDispatch={layoutContextDispatch}

bigbluebutton-html5/imports/ui/components/chat/alert/styles.js

@@ -38,8 +38,13 @@ const ContentMessage = styled.div`
   max-height: calc(${fontSizeSmall} * 10);
 `;
 
+const ContentMessagePoll = styled(ContentMessage)`
+  margin-top: ${fontSizeSmall};
+`;
+
 export default {
   PushMessageContent,
   UserNameMessage,
   ContentMessage,
+  ContentMessagePoll,
 };

bigbluebutton-html5/public/locales/en.json

@@ -653,6 +653,8 @@
     "app.toast.chat.public": "New Public Chat message",
     "app.toast.chat.private": "New Private Chat message",
     "app.toast.chat.system": "System",
+    "app.toast.chat.poll": "Poll Results",
+    "app.toast.chat.pollClick": "Poll results were published. Click here to see.",
     "app.toast.clearedEmoji.label": "Emoji status cleared",
     "app.toast.setEmoji.label": "Emoji status set to {0}",
     "app.toast.meetingMuteOn.label": "All users have been muted",