Merge pull request #7045 from Tainan404/issue-6919

Add banner bar for custom parameters

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}>

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;

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);

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);
+}

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();
 

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>

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));