diff --git a/bigbluebutton-html5/imports/ui/components/toast/container.jsx b/bigbluebutton-html5/imports/ui/components/toast/container.jsx index 67a38c4c0e5da30c0d7f1c300aa9aafbbc796acd..8ef28f81691361b71be7ba8f59bb2e32b9bad25d 100755 --- a/bigbluebutton-html5/imports/ui/components/toast/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/toast/container.jsx @@ -1,21 +1,62 @@ import React from 'react'; +import { ToastContainer as Toastify } from 'react-toastify'; +import { createContainer } from 'meteor/react-meteor-data'; +import { defineMessages, injectIntl } from 'react-intl'; +import { withToast } from '/imports/ui/components/toast/service'; -import { ToastContainer } from 'react-toastify'; +import Auth from '/imports/ui/services/auth'; +import Meetings from '/imports/api/meetings'; import Icon from '../icon/component'; import styles from './styles'; -export default () => ( - <ToastContainer - closeButton={<Icon className={styles.close} iconName="close" />} - autoClose={5000} - className={styles.container} - toastClassName={styles.toast} - bodyClassName={styles.body} - progressClassName={styles.progress} - newestOnTop={false} - hideProgressBar={false} - closeOnClick - pauseOnHover - /> -); +const intlMessages = defineMessages({ + notificationRecordingStart: { + id: 'app.notification.recordingStart', + description: 'Notification for when the recording start', + }, + notificationRecordingStop: { + id: 'app.notification.recordingStop', + description: 'Notification for when the recording stpop', + }, +}); + +class ToastContainer extends React.Component { + // we never want this component to update since will break Toastify + shouldComponentUpdate() { + return false; + } + + render() { + return <Toastify {...this.props} />; + } +} + +export default injectIntl(withToast(createContainer(({ toastNotify, intl }) => { + const meetingId = Auth.meetingID; + + Meetings.find({ meetingId }).observeChanges({ + changed: (id, fields) => { + if (fields.recordProp.record === true) { + toastNotify(intl.formatMessage(intlMessages.notificationRecordingStart), 'success', 'record'); + } + + if (fields.recordProp.record === false) { + toastNotify(intl.formatMessage(intlMessages.notificationRecordingStop), 'error', 'record'); + } + }, + }); + + return { + closeButton: (<Icon className={styles.close} iconName="close" />), + autoClose: 5000, + className: styles.container, + toastClassName: styles.toast, + bodyClassName: styles.body, + progressClassName: styles.progress, + newestOnTop: false, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + }; +}, ToastContainer))); diff --git a/bigbluebutton-html5/imports/ui/components/toast/service.jsx b/bigbluebutton-html5/imports/ui/components/toast/service.jsx index 10dbaa4e0aedd5d0e04ca3e83b260bf699053e47..c725494102a29f0d5e03bc46f8b78bbd250e32b7 100755 --- a/bigbluebutton-html5/imports/ui/components/toast/service.jsx +++ b/bigbluebutton-html5/imports/ui/components/toast/service.jsx @@ -1,17 +1,29 @@ import React from 'react'; +import _ from 'lodash'; import { toast } from 'react-toastify'; import Toast from './component'; -let lastToastId = null; +let lastToast = { + id: null, + message: null, + type: null, + icon: null, +}; + const notify = (message, type = 'default', icon, options) => { const settings = { type, ...options, }; - if (!toast.isActive(lastToastId)) { - lastToastId = toast(<Toast {...{ type, icon, message }} />, settings); + const { id: lastToastId, ...lastToastProps } = lastToast; + const toastProps = { message, type, icon }; + + if (!toast.isActive(lastToast.id) || _.isEqual(lastToastProps, toastProps)) { + const id = toast(<Toast {...toastProps} />, settings); + + lastToast = { id, ...toastProps }; } }; diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json index b9cb309f14c38d7b0ea8918d702a5845769032a6..67c053ab7d9129f42afe01572b8b9c201ef84cef 100644 --- a/bigbluebutton-html5/private/locales/en.json +++ b/bigbluebutton-html5/private/locales/en.json @@ -220,7 +220,9 @@ "app.error.500": "Ops, something went wrong", "app.error.404": "Not found", "app.error.401": "Unauthorized", - "app.error.403": "Forbidden", - "app.error.leaveLabel": "Log in again", - "app.guest.waiting": "Waiting for approval to join" + "app.error.403": "Forbidden", + "app.error.leaveLabel": "Log in again", + "app.guest.waiting": "Waiting for approval to join", + "app.notification.recordingStart": "This session is now being recorded", + "app.notification.recordingStop": "This session is not being recorded anymore" }