From fc33c02a2ac2107911486956ca329a1f043427a8 Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Mon, 12 Jul 2021 10:22:26 -0300 Subject: [PATCH 1/2] add banner-bar to new layout manager --- .../imports/ui/components/app/component.jsx | 1 + .../ui/components/banner-bar/component.jsx | 34 +++++++++++++------ .../ui/components/banner-bar/container.jsx | 14 +++++++- .../ui/components/layout/context/context.jsx | 18 ++++++++++ .../ui/components/layout/context/initState.js | 3 ++ .../ui/components/layout/defaultValues.js | 2 ++ .../layout/layout-manager/customLayout.jsx | 24 ++++++++----- .../presentationFocusLayout.jsx | 24 ++++++++----- .../layout/layout-manager/smartLayout.jsx | 22 ++++++++---- .../layout-manager/videoFocusLayout.jsx | 28 +++++++++------ 10 files changed, 126 insertions(+), 44 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index c351d253f1..dbee778116 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -575,6 +575,7 @@ class App extends Component { height: layoutManagerLoaded !== 'both' ? '100%' : '50%', }} > + 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..5077e5178d 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -130,6 +130,24 @@ 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, + }, + }, + }; + } + // 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..6829acbac5 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js @@ -9,6 +9,9 @@ export const INITIAL_INPUT_STATE = { width: 0, height: 0, }, + bannerBar: { + hasBanner: 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/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 200ec29e03..179c84bb06 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,14 @@ class CustomLayout extends Component { return wHeight; } + bannerHeight() { + const { newLayoutContextState } = this.props; + const { input } = newLayoutContextState; + const { bannerBar } = input; + + return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + } + calculatesDropAreas(sidebarNavWidth, sidebarContentWidth, cameraDockBounds) { const mediaAreaHeight = this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight); @@ -192,7 +200,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.bannerHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -263,7 +271,7 @@ class CustomLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarNavHeight; @@ -275,7 +283,7 @@ class CustomLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -335,9 +343,9 @@ class CustomLayout extends Component { sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else if (input.cameraDock.numCameras > 0 && input.cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM) { - sidebarContentHeight = this.mainHeight() - cameraDockHeight; + sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerHeight(); } else { - sidebarContentHeight = this.mainHeight(); + sidebarContentHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarContentHeight; @@ -349,7 +357,7 @@ class CustomLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -385,11 +393,11 @@ class CustomLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight; + else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight), + height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), top, left, }; 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..7cacb851a6 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,14 @@ class PresentationFocusLayout extends Component { return wHeight; } + bannerHeight() { + const { newLayoutContextState } = this.props; + const { input } = newLayoutContextState; + const { bannerBar } = input; + + return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + } + init() { const { newLayoutContextState, newLayoutContextDispatch } = this.props; const { deviceType, input } = newLayoutContextState; @@ -134,7 +142,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.bannerHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -202,7 +210,7 @@ class PresentationFocusLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarNavHeight; @@ -214,7 +222,7 @@ class PresentationFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -268,9 +276,9 @@ class PresentationFocusLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else if (input.cameraDock.numCameras > 0) { - sidebarContentHeight = this.mainHeight() - cameraDockHeight; + sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerHeight(); } else { - sidebarContentHeight = this.mainHeight(); + sidebarContentHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarContentHeight; @@ -282,7 +290,7 @@ class PresentationFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -318,11 +326,11 @@ class PresentationFocusLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight; + else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight), + height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), top, left, }; 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..f300748649 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,14 @@ class SmartLayout extends Component { return wHeight; } + bannerHeight() { + const { newLayoutContextState } = this.props; + const { input } = newLayoutContextState; + const { bannerBar } = input; + + return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + } + init() { const { newLayoutContextState, newLayoutContextDispatch } = this.props; const { deviceType, input } = newLayoutContextState; @@ -135,7 +143,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.bannerHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -203,7 +211,7 @@ class SmartLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarNavHeight; @@ -215,7 +223,7 @@ class SmartLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -269,7 +277,7 @@ class SmartLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarContentHeight = this.mainHeight(); + sidebarContentHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarContentHeight; @@ -281,7 +289,7 @@ class SmartLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -317,11 +325,11 @@ class SmartLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight; + else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight), + height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), 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..7c1362a93e 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,14 @@ class VideoFocusLayout extends Component { return wHeight; } + bannerHeight() { + const { newLayoutContextState } = this.props; + const { input } = newLayoutContextState; + const { bannerBar } = input; + + return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + } + init() { const { newLayoutContextState, newLayoutContextDispatch } = this.props; const { input } = newLayoutContextState; @@ -141,7 +149,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.bannerHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -209,7 +217,7 @@ class VideoFocusLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = this.mainHeight() - this.bannerHeight(); } } return sidebarNavHeight; @@ -221,7 +229,7 @@ class VideoFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -284,13 +292,13 @@ class VideoFocusLayout extends Component { } else { if (input.cameraDock.numCameras > 0) { if (inputContent.height > 0 && inputContent.height < this.mainHeight()) { - height = inputContent.height; - maxHeight = this.mainHeight(); + height = inputContent.height - this.bannerHeight(); + maxHeight = this.mainHeight() - this.bannerHeight(); } else { const { size: slideSize } = input.presentation.currentSlide; const calculatedHeight = slideSize.height * outputContent.width / slideSize.width; - height = this.mainHeight() - calculatedHeight; - maxHeight = height; + height = this.mainHeight() - calculatedHeight - this.bannerHeight(); + maxHeight = height - this.bannerHeight(); } } else { height = this.mainHeight(); @@ -312,7 +320,7 @@ class VideoFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop; + else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); if (deviceType === DEVICE_TYPE.MOBILE) top = DEFAULT_VALUES.navBarHeight; @@ -348,11 +356,11 @@ class VideoFocusLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight; + else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight), + height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), top, left, }; From 3634586dd150bb987d921d763da07bf9a79e71f0 Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Mon, 12 Jul 2021 13:24:53 -0300 Subject: [PATCH 2/2] add notifications bar to new layout manager --- .../imports/ui/components/app/component.jsx | 1 + .../ui/components/layout/context/context.jsx | 19 +++++++ .../ui/components/layout/context/initState.js | 3 ++ .../imports/ui/components/layout/enums.js | 3 ++ .../layout/layout-manager/customLayout.jsx | 38 ++++++++------ .../presentationFocusLayout.jsx | 42 +++++++++------- .../layout/layout-manager/smartLayout.jsx | 34 ++++++++----- .../layout-manager/videoFocusLayout.jsx | 49 +++++++++++-------- .../notifications-bar/container.jsx | 21 +++++++- 9 files changed, 144 insertions(+), 66 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index dbee778116..0618c8140e 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -576,6 +576,7 @@ class App extends Component { }} > + diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx index 5077e5178d..3a91b46dd1 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -148,6 +148,25 @@ const reducer = (state, action) => { }; } + // 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 6829acbac5..ead7a9e5aa 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js @@ -12,6 +12,9 @@ export const INITIAL_INPUT_STATE = { bannerBar: { hasBanner: false, }, + notificationsBar: { + hasNotification: false, + }, navBar: { hasNavBar: true, height: DEFAULT_VALUES.navBarHeight, 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 179c84bb06..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,12 +68,15 @@ class CustomLayout extends Component { return wHeight; } - bannerHeight() { + bannerAreaHeight() { const { newLayoutContextState } = this.props; const { input } = newLayoutContextState; - const { bannerBar } = input; + const { bannerBar, notificationsBar } = input; - return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0; + + return bannerHeight + notificationHeight; } calculatesDropAreas(sidebarNavWidth, sidebarContentWidth, cameraDockBounds) { @@ -200,7 +203,7 @@ class CustomLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.navBarTop + this.bannerHeight(); + else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -271,8 +274,9 @@ class CustomLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight() - this.bannerHeight(); + sidebarNavHeight = this.mainHeight(); } + sidebarNavHeight -= this.bannerAreaHeight(); } return sidebarNavHeight; } @@ -283,9 +287,11 @@ class CustomLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); + 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, @@ -343,10 +349,11 @@ class CustomLayout extends Component { sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else if (input.cameraDock.numCameras > 0 && input.cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM) { - sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerHeight(); + sidebarContentHeight = this.mainHeight() - cameraDockHeight; } else { - sidebarContentHeight = this.mainHeight() - this.bannerHeight(); + sidebarContentHeight = this.mainHeight(); } + sidebarContentHeight -= this.bannerAreaHeight(); } return sidebarContentHeight; } @@ -357,9 +364,11 @@ class CustomLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.sidebarNavTop + this.bannerHeight(); + 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, @@ -373,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; @@ -393,11 +403,11 @@ class CustomLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); + else top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), + height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top, left, }; @@ -630,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 7cacb851a6..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,12 +66,15 @@ class PresentationFocusLayout extends Component { return wHeight; } - bannerHeight() { + bannerAreaHeight() { const { newLayoutContextState } = this.props; const { input } = newLayoutContextState; - const { bannerBar } = input; + const { bannerBar, notificationsBar } = input; - return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0; + + return bannerHeight + notificationHeight; } init() { @@ -142,7 +145,7 @@ class PresentationFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.navBarTop + this.bannerHeight(); + else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -205,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() - this.bannerHeight(); + sidebarNavHeight = this.mainHeight() - this.bannerAreaHeight(); } } return sidebarNavHeight; @@ -219,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 + this.bannerHeight(); + 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,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 - this.bannerHeight(); + sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerAreaHeight(); } else { - sidebarContentHeight = this.mainHeight() - this.bannerHeight(); + sidebarContentHeight = this.mainHeight() - this.bannerAreaHeight(); } } return sidebarContentHeight; @@ -287,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 + this.bannerHeight(); + 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, @@ -306,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; @@ -326,11 +334,11 @@ class PresentationFocusLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); + else top = navBarHeight + this.bannerAreaHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), + height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top, left, }; @@ -419,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 f300748649..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,12 +67,15 @@ class SmartLayout extends Component { return wHeight; } - bannerHeight() { + bannerAreaHeight() { const { newLayoutContextState } = this.props; const { input } = newLayoutContextState; - const { bannerBar } = input; + const { bannerBar, notificationsBar } = input; - return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0; + + return bannerHeight + notificationHeight; } init() { @@ -143,7 +146,7 @@ class SmartLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.navBarTop + this.bannerHeight(); + else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -211,8 +214,9 @@ class SmartLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight() - this.bannerHeight(); + sidebarNavHeight = this.mainHeight(); } + sidebarNavHeight -= this.bannerAreaHeight(); } return sidebarNavHeight; } @@ -220,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 + this.bannerHeight(); + 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, }; } @@ -277,8 +282,9 @@ class SmartLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarContentHeight = this.mainHeight() - this.bannerHeight(); + sidebarContentHeight = this.mainHeight(); } + sidebarContentHeight -= this.bannerAreaHeight(); } return sidebarContentHeight; } @@ -286,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 + this.bannerHeight(); + 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, @@ -305,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; @@ -325,11 +333,11 @@ class SmartLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); + else top = navBarHeight + this.bannerAreaHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), + 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 7c1362a93e..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,12 +66,15 @@ class VideoFocusLayout extends Component { return wHeight; } - bannerHeight() { + bannerAreaHeight() { const { newLayoutContextState } = this.props; const { input } = newLayoutContextState; - const { bannerBar } = input; + const { bannerBar, notificationsBar } = input; - return bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0; + + return bannerHeight + notificationHeight; } init() { @@ -149,7 +152,7 @@ class VideoFocusLayout extends Component { let top = 0; if (layoutLoaded === 'both') top = this.mainHeight(); - else top = DEFAULT_VALUES.navBarTop + this.bannerHeight(); + else top = DEFAULT_VALUES.navBarTop + this.bannerAreaHeight(); return { width: this.mainWidth() - mediaAreaBounds.left, @@ -217,8 +220,9 @@ class VideoFocusLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight() - this.bannerHeight(); + sidebarNavHeight = this.mainHeight(); } + sidebarNavHeight -= this.bannerAreaHeight(); } return sidebarNavHeight; } @@ -226,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 + this.bannerHeight(); + 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, }; } @@ -286,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 - this.bannerHeight(); - maxHeight = this.mainHeight() - this.bannerHeight(); + 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 - this.bannerHeight(); - maxHeight = height - this.bannerHeight(); + height = this.mainHeight() - calculatedHeight - this.bannerAreaHeight(); + maxHeight = height; } } else { - height = this.mainHeight(); + height = this.mainHeight() - this.bannerAreaHeight(); maxHeight = height; } minHeight = sidebarContentMinHeight; @@ -317,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 + this.bannerHeight(); + 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, @@ -336,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; @@ -356,11 +363,11 @@ class VideoFocusLayout extends Component { } if (layoutLoaded === 'both') top = this.mainHeight() / 2; - else top = DEFAULT_VALUES.navBarHeight + this.bannerHeight(); + else top = navBarHeight + this.bannerAreaHeight(); return { width, - height: this.mainHeight() - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight + this.bannerHeight()), + height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top, left, }; @@ -450,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; }