diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 5d8649a2b7919363157d7a5856064ca212e8bc80..e0ab16339300d06d1d9057eb77348fc6b47e5be2 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -13,7 +13,9 @@ import ModalContainer from '../modal/container';
import NotificationsBarContainer from '../notifications-bar/container';
import AudioContainer from '../audio/container';
import ChatAlertContainer from '../chat/alert/container';
+import BannerBarContainer from '/imports/ui/components/banner-bar/container';
import WaitingNotifierContainer from '/imports/ui/components/waiting-users/alert/container';
+
import { styles } from './styles';
const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
@@ -214,6 +216,7 @@ class App extends Component {
return (
<main className={styles.main}>
{this.renderActivityCheck()}
+ <BannerBarContainer />
<NotificationsBarContainer />
<section className={styles.wrapper}>
<div className={openPanel ? styles.content : styles.noPanelContent}>
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..eee30910d8b7bd93eb5e90fde66d97cd5db04c3c
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NotificationsBar from '/imports/ui/components/notifications-bar/component';
+import { styles } from './styles';
+
+const BannerBar = ({ text, color }) => text && (
+ <NotificationsBar
+ color={color}
+ >
+ <span className={styles.bannerTextColor}>
+ {text}
+ </span>
+ </NotificationsBar>
+);
+
+BannerBar.propTypes = {
+ text: PropTypes.string.isRequired,
+ color: PropTypes.string.isRequired,
+};
+
+export default BannerBar;
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..df1ba9f41f50b1c04118a79580c6716b6caeeab0
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx
@@ -0,0 +1,8 @@
+import { Session } from 'meteor/session';
+import { withTracker } from 'meteor/react-meteor-data';
+import BannerComponent from './component';
+
+export default withTracker(() => ({
+ color: Session.get('bannerColor') || '#0F70D7',
+ text: Session.get('bannerText') || '',
+}))(BannerComponent);
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3421702e34bdd94b808e774631f708263a370ad8
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss
@@ -0,0 +1,6 @@
+@import "/imports/ui/stylesheets/variables/_all";
+
+.bannerTextColor {
+ @extend %text-elipsis;
+ color: var(--color-white);
+}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx b/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
index 9c140bdc89b0eaa9c740e2bfcb6d877897a2dbb4..5153b6c8198c355fbfa5df27080dbbf491de0ed0 100644
--- a/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
@@ -111,6 +111,12 @@ class JoinHandler extends Component {
resolve(true);
});
};
+
+ const setBannerProps = (resp) => {
+ Session.set('bannerText', resp.bannerText);
+ Session.set('bannerColor', resp.bannerColor);
+ };
+
// use enter api to get params for the client
const url = `/bigbluebutton/api/enter?sessionToken=${sessionToken}`;
const fetchContent = await fetch(url, { credentials: 'same-origin' });
@@ -122,6 +128,8 @@ class JoinHandler extends Component {
if (response.returncode !== 'FAILED') {
await setAuth(response);
await setCustomData(response);
+
+ setBannerProps(response);
setLogoURL(response);
logUserInfo();
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index 57d08d3e7051955731114121939356abde3e2d85..74551cded1d015e0514548ce091debe43398bdfc 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -176,7 +176,7 @@ class NavBar extends PureComponent {
if (!userOnMeeting) return;
- if ((!didSendBreakoutInvite && !isBreakoutRoom) ) {
+ if ((!didSendBreakoutInvite && !isBreakoutRoom)) {
this.inviteUserToBreakout(breakout);
}
});
diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/component.jsx
index 04a9e71c6c9dfeed626c6c3d092ec40f527755cc..2d80bdfab256c150860635cae4a8f4b3e9cdda3f 100644
--- a/bigbluebutton-html5/imports/ui/components/notifications-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/component.jsx
@@ -9,7 +9,7 @@ const COLORS = [
];
const propTypes = {
- color: PropTypes.oneOf(COLORS),
+ color: PropTypes.string,
};
const defaultProps = {
@@ -17,13 +17,24 @@ const defaultProps = {
};
const NotificationsBar = (props) => {
- const { color, children } = props;
+ const {
+ color,
+ children,
+ alert,
+ } = props;
+
+ const hasColor = COLORS.includes(color);
return (
<div
- role="alert"
+ role={alert ? 'alert' : ''}
aria-live="off"
- className={cx(styles.notificationsBar, styles[color])}
+ style={
+ !hasColor ? {
+ backgroundColor: `${color}`,
+ } : {}
+ }
+ className={cx(styles.notificationsBar, hasColor ? styles[color] : null)}
>
{children}
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
index 2a4e285883c6a607d4ffa4b57219806095f9b5c5..655b53243d91f7d5c858e69c938d82b62fcc1374 100644
--- a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
@@ -63,11 +63,11 @@ const intlMessages = defineMessages({
});
const NotificationsBarContainer = (props) => {
- if (_.isEmpty(props.message)) {
+ const { message, color } = props;
+ if (_.isEmpty(message)) {
return null;
}
- const { message, color } = props;
return (
<NotificationsBar color={color}>
@@ -144,7 +144,9 @@ export default injectIntl(withTracker(({ intl }) => {
breakoutRoom={currentBreakout}
messageDuration={intlMessages.breakoutTimeRemaining}
timeEndedMessage={intlMessages.breakoutWillClose}
- alertMessageUnderOneMinute={intl.formatMessage(intlMessages.alertBreakoutEndsUnderOneMinute)}
+ alertMessageUnderOneMinute={
+ intl.formatMessage(intlMessages.alertBreakoutEndsUnderOneMinute)
+ }
/>
);
}
@@ -164,13 +166,15 @@ export default injectIntl(withTracker(({ intl }) => {
breakoutRoom={Meeting.durationProps}
messageDuration={intlMessages.meetingTimeRemaining}
timeEndedMessage={intlMessages.meetingWillClose}
- alertMessageUnderOneMinute={intl.formatMessage(intlMessages.alertMeetingEndsUnderOneMinute)}
+ alertMessageUnderOneMinute={
+ intl.formatMessage(intlMessages.alertMeetingEndsUnderOneMinute)
+ }
/>
);
}
}
-
+ data.alert = true;
data.color = 'primary';
return data;
})(NotificationsBarContainer));