Merge pull request #4624 from Tainan404/toast-breakout-ends

[HTML5] show audio modal and toast notification when breakout room ends

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

@@ -3,6 +3,7 @@ import { createContainer } from 'meteor/react-meteor-data';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import { injectIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
+import Breakouts from '/imports/api/breakouts';
 import Service from './service';
 import Audio from './component';
 import AudioModalContainer from './audio-modal/container';
@@ -59,6 +60,16 @@ export default withModalMounter(injectIntl(createContainer(({ mountModal, intl }
   const APP_CONFIG = Meteor.settings.public.app;
 
   const { autoJoinAudio } = APP_CONFIG;
+  const openAudioModal = mountModal.bind(
+    null,
+    <AudioModalContainer />,
+  );
+
+  Breakouts.find().observeChanges({
+    removed() {
+      setTimeout(() => openAudioModal(), 0);
+    },
+  });
 
   const messages = {
     info: {
@@ -80,7 +91,7 @@ export default withModalMounter(injectIntl(createContainer(({ mountModal, intl }
       Service.init(messages);
       Service.changeOutputDevice(document.querySelector('#remote-media').sinkId);
       if (!autoJoinAudio || didMountAutoJoin) return;
-      mountModal(<AudioModalContainer />);
+      openAudioModal();
       didMountAutoJoin = true;
     },
   };

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

 import React from 'react';
+import Breakouts from '/imports/api/breakouts';
 import { ToastContainer as Toastify } from 'react-toastify';
 import { createContainer } from 'meteor/react-meteor-data';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -11,6 +12,11 @@ import Icon from '../icon/component';
 import styles from './styles';
 
 const intlMessages = defineMessages({
+
+  toastBreakoutRoomEnded: {
+    id: 'app.toast.breakoutRoomEnded',
+    description: 'message when the breakout room is ended',
+  },
   notificationRecordingStart: {
     id: 'app.notification.recordingStart',
     description: 'Notification for when the recording start',
@@ -33,6 +39,12 @@ class ToastContainer extends React.Component {
 }
 
 export default injectIntl(injectNotify(createContainer(({ notify, intl }) => {
+  Breakouts.find().observeChanges({
+    removed() {
+      notify(intl.formatMessage(intlMessages.toastBreakoutRoomEnded), 'info', 'rooms');
+    },
+  });
+
   const meetingId = Auth.meetingID;
 
   Meetings.find({ meetingId }).observeChanges({

bigbluebutton-html5/private/locales/en.json

@@ -270,6 +270,7 @@
     "app.error.403": "Forbidden",
     "app.error.leaveLabel": "Log in again",
     "app.guest.waiting": "Waiting for approval to join",
+    "app.toast.breakoutRoomEnded": "The breakout room ended. Please rejoin in the audio.",
     "app.toast.chat.singular":"you have {0} new message in {1}",
     "app.toast.chat.plural":"you have {0} new messages in {1}",
     "app.notification.recordingStart": "This session is now being recorded",