BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #12756 from ramonlsouza/banner-new-lm

Browse Source 
add BannerBarContainer and NotificationsBarContainer - new LM
This commit is contained in:
Anton Georgiev 2021-07-12 14:32:41 -04:00 committed by GitHub
commit c5da37eff7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 218 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bigbluebutton-html5/imports/ui/components/app/component.jsx
View File

@ -577,6 +577,8 @@ class App extends Component {
>
{this.renderActivityCheck()}
{this.renderUserInformation()}
<BannerBarContainer />
<NotificationsBarContainer />
<NavBarContainer main="new" />
<SidebarNavigationContainer />
<SidebarContentContainer />

26
bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
View File

@ -1,17 +1,31 @@
import React from 'react';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import NotificationsBar from '/imports/ui/components/notifications-bar/component';
import { styles } from './styles';
import { ACTIONS } from '../layout/enums';
const BannerBar = ({ text, color }) => text && (
<NotificationsBar
color={color}
>
const BannerBar = ({ text, color, hasBanner: propsHasBanner, newLayoutContextDispatch }) => {
useEffect(() => {
const localHasBanner = !!text;
if(localHasBanner !== propsHasBanner){
newLayoutContextDispatch({
type: ACTIONS.SET_HAS_BANNER_BAR,
value: localHasBanner,
});
}
}, [text, propsHasBanner]);
if (!text) return null;
return (
<NotificationsBar color={color}>
<span className={styles.bannerTextColor}>
{text}
</span>
</NotificationsBar>
);
);
}
BannerBar.propTypes = {
text: PropTypes.string.isRequired,

14
bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx
View File

@ -1,8 +1,20 @@
import React, { useContext } from 'react';
import { Session } from 'meteor/session';
import { withTracker } from 'meteor/react-meteor-data';
import BannerComponent from './component';
import { NLayoutContext } from '../layout/context/context';
const BannerContainer = (props) => {
const newLayoutContext = useContext(NLayoutContext);
const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext;
const { input } = newLayoutContextState;
const { bannerBar } = input;
const { hasBanner } = bannerBar;
return <BannerComponent {...{ hasBanner, newLayoutContextDispatch, ...props }} />;
};
export default withTracker(() => ({
color: Session.get('bannerColor') || '#0F70D7',
text: Session.get('bannerText') || '',
}))(BannerComponent);
}))(BannerContainer);

37
bigbluebutton-html5/imports/ui/components/layout/context/context.jsx
View File

@ -130,6 +130,43 @@ const reducer = (state, action) => {
};
}
// BANNER BAR
case ACTIONS.SET_HAS_BANNER_BAR: {
const { bannerBar } = state.input;
if (bannerBar.hasBanner === action.value) {
return state;
}
return {
...state,
input: {
...state.input,
bannerBar: {
...bannerBar,
hasBanner: action.value,
},
},
};
}
// NOTIFICATIONS BAR
case ACTIONS.SET_HAS_NOTIFICATIONS_BAR: {
console.log("action trigger")
const { notificationsBar } = state.input;
if (notificationsBar.hasNotification === action.value) {
return state;
}
return {
...state,
input: {
...state.input,
notificationsBar: {
...notificationsBar,
hasNotification: action.value,
},
},
};
}
// NAV BAR
case ACTIONS.SET_NAVBAR_OUTPUT: {
const {

6
bigbluebutton-html5/imports/ui/components/layout/context/initState.js
View File

@ -9,6 +9,12 @@ export const INITIAL_INPUT_STATE = {
width: 0,
height: 0,
},
bannerBar: {
hasBanner: false,
},
notificationsBar: {
hasNotification: false,
},
navBar: {
hasNavBar: true,
height: DEFAULT_VALUES.navBarHeight,

2
bigbluebutton-html5/imports/ui/components/layout/defaultValues.js
View File

@ -18,6 +18,8 @@ const DEFAULT_VALUES = {
presentationTabOrder: 5,
presentationMinHeight: 220,
bannerHeight: 34,
navBarHeight: 85,
navBarTop: 0,
navBarTabOrder: 3,

3
bigbluebutton-html5/imports/ui/components/layout/enums.js
View File

@ -37,6 +37,9 @@ export const ACTIONS = {
SET_BROWSER_SIZE: 'setBrowserSize',
SET_HAS_BANNER_BAR: 'setHasBannerBar',
SET_HAS_NOTIFICATIONS_BAR: 'setHasNotificationsBar',
SET_NAVBAR_OUTPUT: 'setNavBarOutput',
SET_ACTIONBAR_OUTPUT: 'setActionBarOutput',

34
bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
View File

@ -68,6 +68,17 @@ class CustomLayout extends Component {
return wHeight;
}
bannerAreaHeight() {
const { newLayoutContextState } = this.props;
const { input } = newLayoutContextState;
const { bannerBar, notificationsBar } = input;
const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0;
const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0;
return bannerHeight + notificationHeight;
}
calculatesDropAreas(sidebarNavWidth, sidebarContentWidth, cameraDockBounds) {
const mediaAreaHeight = this.mainHeight()
- (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight);
@ -192,7 +203,7 @@ class CustomLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.navBarTop;
else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight();
return {
width: this.mainWidth() - mediaAreaBounds.left,
@ -265,6 +276,7 @@ class CustomLayout extends Component {
} else {
sidebarNavHeight = this.mainHeight();
}
sidebarNavHeight -= this.bannerAreaHeight();
}
return sidebarNavHeight;
}
@ -275,9 +287,11 @@ class CustomLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = DEFAULT_VALUES.sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) {
top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
}
return {
top,
@ -339,6 +353,7 @@ class CustomLayout extends Component {
} else {
sidebarContentHeight = this.mainHeight();
}
sidebarContentHeight -= this.bannerAreaHeight();
}
return sidebarContentHeight;
}
@ -349,9 +364,11 @@ class CustomLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = DEFAULT_VALUES.sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) {
top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
}
return {
top,
@ -365,6 +382,7 @@ class CustomLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input, layoutLoaded } = newLayoutContextState;
const { sidebarContent } = input;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
let left = 0;
let width = 0;
let top = 0;
@ -385,11 +403,11 @@ class CustomLayout extends Component {
}
if (layoutLoaded === 'both') top = this.mainHeight() / 2;
else top = DEFAULT_VALUES.navBarHeight;
else top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
return {
width,
height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight),
height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()),
top,
left,
};
@ -622,7 +640,7 @@ class CustomLayout extends Component {
} else {
mediaBounds.width = mediaAreaWidth;
mediaBounds.height = mediaAreaHeight;
mediaBounds.top = DEFAULT_VALUES.navBarHeight;
mediaBounds.top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
mediaBounds.left = sidebarNavWidth + sidebarContentWidth;
}

44
bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx
View File

@ -66,6 +66,17 @@ class PresentationFocusLayout extends Component {
return wHeight;
}
bannerAreaHeight() {
const { newLayoutContextState } = this.props;
const { input } = newLayoutContextState;
const { bannerBar, notificationsBar } = input;
const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0;
const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0;
return bannerHeight + notificationHeight;
}
init() {
const { newLayoutContextState, newLayoutContextDispatch } = this.props;
const { deviceType, input } = newLayoutContextState;
@ -134,7 +145,7 @@ class PresentationFocusLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.navBarTop;
else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight();
return {
width: this.mainWidth() - mediaAreaBounds.left,
@ -197,12 +208,13 @@ class PresentationFocusLayout extends Component {
calculatesSidebarNavHeight() {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const { navBarHeight } = DEFAULT_VALUES;
let sidebarNavHeight = 0;
if (input.sidebarNavigation.isOpen) {
if (deviceType === DEVICE_TYPE.MOBILE) {
sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight;
sidebarNavHeight = this.mainHeight() - navBarHeight - this.bannerAreaHeight();
} else {
sidebarNavHeight = this.mainHeight();
sidebarNavHeight = this.mainHeight() - this.bannerAreaHeight();
}
}
return sidebarNavHeight;
@ -211,16 +223,17 @@ class PresentationFocusLayout extends Component {
calculatesSidebarNavBounds() {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { sidebarNavTop, navBarHeight, sidebarNavLeft } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
left: DEFAULT_VALUES.sidebarNavLeft,
left: sidebarNavLeft,
zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1,
};
}
@ -263,14 +276,15 @@ class PresentationFocusLayout extends Component {
calculatesSidebarContentHeight(cameraDockHeight) {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const { navBarHeight } = DEFAULT_VALUES;
let sidebarContentHeight = 0;
if (input.sidebarContent.isOpen) {
if (deviceType === DEVICE_TYPE.MOBILE) {
sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight;
sidebarContentHeight = this.mainHeight() - navBarHeight - this.bannerAreaHeight();
} else if (input.cameraDock.numCameras > 0) {
sidebarContentHeight = this.mainHeight() - cameraDockHeight;
sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerAreaHeight();
} else {
sidebarContentHeight = this.mainHeight();
sidebarContentHeight = this.mainHeight() - this.bannerAreaHeight();
}
}
return sidebarContentHeight;
@ -279,12 +293,13 @@ class PresentationFocusLayout extends Component {
calculatesSidebarContentBounds(sidebarNavWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { navBarHeight, sidebarNavTop } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
@ -298,6 +313,7 @@ class PresentationFocusLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input, layoutLoaded } = newLayoutContextState;
const { sidebarContent } = input;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
let left = 0;
let width = 0;
let top = 0;
@ -318,11 +334,11 @@ class PresentationFocusLayout extends Component {
}
if (layoutLoaded === 'both') top = this.mainHeight() / 2;
else top = DEFAULT_VALUES.navBarHeight;
else top = navBarHeight + this.bannerAreaHeight();
return {
width,
height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight),
height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()),
top,
left,
};
@ -411,7 +427,7 @@ class PresentationFocusLayout extends Component {
mediaBounds.height = mediaAreaBounds.height;
}
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.top = DEFAULT_VALUES.navBarHeight;
mediaBounds.top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
mediaBounds.left = mediaAreaBounds.left;
mediaBounds.zIndex = 1;

32
bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx
View File

@ -67,6 +67,17 @@ class SmartLayout extends Component {
return wHeight;
}
bannerAreaHeight() {
const { newLayoutContextState } = this.props;
const { input } = newLayoutContextState;
const { bannerBar, notificationsBar } = input;
const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0;
const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0;
return bannerHeight + notificationHeight;
}
init() {
const { newLayoutContextState, newLayoutContextDispatch } = this.props;
const { deviceType, input } = newLayoutContextState;
@ -135,7 +146,7 @@ class SmartLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.navBarTop;
else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight();
return {
width: this.mainWidth() - mediaAreaBounds.left,
@ -205,6 +216,7 @@ class SmartLayout extends Component {
} else {
sidebarNavHeight = this.mainHeight();
}
sidebarNavHeight -= this.bannerAreaHeight();
}
return sidebarNavHeight;
}
@ -212,16 +224,17 @@ class SmartLayout extends Component {
calculatesSidebarNavBounds() {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { sidebarNavTop, navBarHeight, sidebarNavLeft } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
left: DEFAULT_VALUES.sidebarNavLeft,
left: sidebarNavLeft,
zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1,
};
}
@ -271,6 +284,7 @@ class SmartLayout extends Component {
} else {
sidebarContentHeight = this.mainHeight();
}
sidebarContentHeight -= this.bannerAreaHeight();
}
return sidebarContentHeight;
}
@ -278,12 +292,13 @@ class SmartLayout extends Component {
calculatesSidebarContentBounds(sidebarNavWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { sidebarNavTop, navBarHeight } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
@ -297,6 +312,7 @@ class SmartLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input, layoutLoaded } = newLayoutContextState;
const { sidebarContent } = input;
const { actionBarHeight, navBarHeight } = DEFAULT_VALUES;
let left = 0;
let width = 0;
let top = 0;
@ -317,11 +333,11 @@ class SmartLayout extends Component {
}
if (layoutLoaded === 'both') top = this.mainHeight() / 2;
else top = DEFAULT_VALUES.navBarHeight;
else top = navBarHeight + this.bannerAreaHeight();
return {
width,
height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight),
height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()),
top,
left,
};

47
bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx
View File

@ -66,6 +66,17 @@ class VideoFocusLayout extends Component {
return wHeight;
}
bannerAreaHeight() {
const { newLayoutContextState } = this.props;
const { input } = newLayoutContextState;
const { bannerBar, notificationsBar } = input;
const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0;
const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0;
return bannerHeight + notificationHeight;
}
init() {
const { newLayoutContextState, newLayoutContextDispatch } = this.props;
const { input } = newLayoutContextState;
@ -141,7 +152,7 @@ class VideoFocusLayout extends Component {
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.navBarTop;
else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight();
return {
width: this.mainWidth() - mediaAreaBounds.left,
@ -211,6 +222,7 @@ class VideoFocusLayout extends Component {
} else {
sidebarNavHeight = this.mainHeight();
}
sidebarNavHeight -= this.bannerAreaHeight();
}
return sidebarNavHeight;
}
@ -218,16 +230,17 @@ class VideoFocusLayout extends Component {
calculatesSidebarNavBounds() {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { sidebarNavTop, navBarHeight, sidebarNavLeft } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
left: DEFAULT_VALUES.sidebarNavLeft,
left: sidebarNavLeft,
zIndex: deviceType === DEVICE_TYPE.MOBILE ? 10 : 2,
};
}
@ -278,22 +291,22 @@ class VideoFocusLayout extends Component {
let maxHeight = 0;
if (inputContent.isOpen) {
if (deviceType === DEVICE_TYPE.MOBILE) {
height = this.mainHeight() - DEFAULT_VALUES.navBarHeight;
minHeight = this.mainHeight();
maxHeight = this.mainHeight();
height = this.mainHeight() - DEFAULT_VALUES.navBarHeight - this.bannerAreaHeight();
minHeight = this.mainHeight() - this.bannerAreaHeight();
maxHeight = this.mainHeight() - this.bannerAreaHeight();
} else {
if (input.cameraDock.numCameras > 0) {
if (inputContent.height > 0 && inputContent.height < this.mainHeight()) {
height = inputContent.height;
maxHeight = this.mainHeight();
height = inputContent.height - this.bannerAreaHeight();
maxHeight = this.mainHeight() - this.bannerAreaHeight();
} else {
const { size: slideSize } = input.presentation.currentSlide;
const calculatedHeight = slideSize.height * outputContent.width / slideSize.width;
height = this.mainHeight() - calculatedHeight;
height = this.mainHeight() - calculatedHeight - this.bannerAreaHeight();
maxHeight = height;
}
} else {
height = this.mainHeight();
height = this.mainHeight() - this.bannerAreaHeight();
maxHeight = height;
}
minHeight = sidebarContentMinHeight;
@ -309,12 +322,13 @@ class VideoFocusLayout extends Component {
calculatesSidebarContentBounds(sidebarNavWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { sidebarNavTop, navBarHeight } = DEFAULT_VALUES;
let top = 0;
if (layoutLoaded === 'both') top = this.mainHeight();
else top = DEFAULT_VALUES.sidebarNavTop;
else top = sidebarNavTop + this.bannerAreaHeight();
if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight;
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
return {
top,
@ -328,6 +342,7 @@ class VideoFocusLayout extends Component {
const { newLayoutContextState } = this.props;
const { deviceType, input, layoutLoaded } = newLayoutContextState;
const { sidebarContent } = input;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
let left = 0;
let width = 0;
let top = 0;
@ -348,11 +363,11 @@ class VideoFocusLayout extends Component {
}
if (layoutLoaded === 'both') top = this.mainHeight() / 2;
else top = DEFAULT_VALUES.navBarHeight;
else top = navBarHeight + this.bannerAreaHeight();
return {
width,
height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight),
height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()),
top,
left,
};
@ -442,7 +457,7 @@ class VideoFocusLayout extends Component {
} else {
mediaBounds.height = mediaAreaBounds.height;
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.top = DEFAULT_VALUES.navBarHeight;
mediaBounds.top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight();
mediaBounds.left = mediaAreaBounds.left;
mediaBounds.zIndex = 1;
}

21
bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
View File

@ -1,12 +1,14 @@
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import React, { Fragment } from 'react';
import React, { Fragment, useContext, useEffect } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import _ from 'lodash';
import Auth from '/imports/ui/services/auth';
import Meetings, { MeetingTimeRemaining } from '/imports/api/meetings';
import BreakoutRemainingTime from '/imports/ui/components/breakout-room/breakout-remaining-time/container';
import { styles } from './styles.scss';
import { NLayoutContext } from '../layout/context/context';
import { ACTIONS } from '../layout/enums';
import breakoutService from '/imports/ui/components/breakout-room/service';
import NotificationsBar from './component';
@ -74,6 +76,23 @@ const intlMessages = defineMessages({
const NotificationsBarContainer = (props) => {
const { message, color } = props;
const newLayoutContext = useContext(NLayoutContext);
const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext;
const { input } = newLayoutContextState;
const { notificationsBar } = input;
const { hasNotification } = notificationsBar;
useEffect(() => {
const localHasNotification = !!message;
if(localHasNotification !== hasNotification){
newLayoutContextDispatch({
type: ACTIONS.SET_HAS_NOTIFICATIONS_BAR,
value: localHasNotification,
});
}
}, [message, hasNotification]);
if (_.isEmpty(message)) {
return null;
}