diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 7ca31a8e25..cc2370dfc2 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -577,6 +577,8 @@ class App extends Component { > {this.renderActivityCheck()} {this.renderUserInformation()} + + diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx index eee30910d8..4df6d05270 100644 --- a/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx @@ -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 && ( - - - {text} - - -); +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 ( + + + {text} + + + ); +} BannerBar.propTypes = { text: PropTypes.string.isRequired, diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx index df1ba9f41f..fc475594c7 100644 --- a/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/banner-bar/container.jsx @@ -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 ; +}; export default withTracker(() => ({ color: Session.get('bannerColor') || '#0F70D7', text: Session.get('bannerText') || '', -}))(BannerComponent); +}))(BannerContainer); diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx index 038b12522f..3a91b46dd1 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -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 { diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js index 0b53e7ed65..ead7a9e5aa 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js @@ -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, diff --git a/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js b/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js index e21e1d9b0b..1d8d1be5d2 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js +++ b/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js @@ -18,6 +18,8 @@ const DEFAULT_VALUES = { presentationTabOrder: 5, presentationMinHeight: 220, + bannerHeight: 34, + navBarHeight: 85, navBarTop: 0, navBarTabOrder: 3, diff --git a/bigbluebutton-html5/imports/ui/components/layout/enums.js b/bigbluebutton-html5/imports/ui/components/layout/enums.js index 7449af2a8a..a1e11e60b5 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/enums.js +++ b/bigbluebutton-html5/imports/ui/components/layout/enums.js @@ -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', diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 200ec29e03..4e76436cd8 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -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; } diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 5a0b3f0d56..1fff6353e2 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -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; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index 7e5ebfa0f0..2434a12579 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -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, }; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index 753d2ef0ff..2bb4e876b6 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -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; } diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx index f18171a9b4..5f1a43f2cc 100644 --- a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx @@ -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; }