From 4aab1b21d852b71c9a7a819fa7510c07e2193c8a Mon Sep 17 00:00:00 2001 From: "Arthur B. Grossi" <32987232+Arthurk12@users.noreply.github.com> Date: Wed, 23 Oct 2024 09:06:44 -0300 Subject: [PATCH] feat(layout): add userdata `bbb_hide_controls` (#21410) * feat(layout): add `hideTopRow` to nav bar context Adds the `hideTopRow` property to the navbar in the layout context, allowing the top row of the navigation bar to be hidden. Only the row with the talking indicators and timer indicator will remain visible when this option is used. * feat(layout): add userdata `bbb_hide_controls` Introduces the userdata join parameter `bbb_hide_controls`, which hides the action bar and the top row of the navigation bar (including the close sidebar button, room title, connectivity indicator, and leave meeting button) while keeping the row with the talking indicator and timer indicator visible. * fix(layout): has actions bar boolean expression --- .../imports/ui/components/app/container.jsx | 3 +- .../imports/ui/components/layout/context.jsx | 17 +++ .../imports/ui/components/layout/enums.js | 1 + .../imports/ui/components/layout/initState.js | 1 + .../layout/layout-manager/layoutEngine.jsx | 7 +- .../ui/components/layout/layoutTypes.ts | 1 + .../imports/ui/components/layout/observer.tsx | 8 +- .../ui/components/nav-bar/component.jsx | 105 +++++++++--------- .../ui/components/nav-bar/container.jsx | 3 +- 9 files changed, 90 insertions(+), 56 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx index 2a6f4d64a6..ceabf5cd19 100755 --- a/bigbluebutton-html5/imports/ui/components/app/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx @@ -95,7 +95,8 @@ const AppContainer = (props) => { ? ( { }; } + case ACTIONS.SET_HIDE_NAVBAR_TOP_ROW: { + const { navBar } = state.output; + if (navBar.hideTopRow === action.value) { + return state; + } + return { + ...state, + output: { + ...state.output, + navBar: { + ...navBar, + hideTopRow: action.value, + }, + }, + }; + } + case ACTIONS.SET_NAVBAR_OUTPUT: { const { display, width, height, top, left, tabOrder, zIndex, diff --git a/bigbluebutton-html5/imports/ui/components/layout/enums.js b/bigbluebutton-html5/imports/ui/components/layout/enums.js index 12a74f1ac3..15ca758c91 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/enums.js +++ b/bigbluebutton-html5/imports/ui/components/layout/enums.js @@ -56,6 +56,7 @@ export const ACTIONS = { SET_HIDE_NOTIFICATION_TOASTS: 'setHideNotificationToasts', SET_HAS_NAVBAR: 'setHasNavBar', + SET_HIDE_NAVBAR_TOP_ROW: 'setHideNavBarTopRow', SET_NAVBAR_OUTPUT: 'setNavBarOutput', SET_HAS_ACTIONBAR: 'setHasActionBar', diff --git a/bigbluebutton-html5/imports/ui/components/layout/initState.js b/bigbluebutton-html5/imports/ui/components/layout/initState.js index aeb6fecada..9b3dc49999 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/initState.js @@ -115,6 +115,7 @@ export const INITIAL_INPUT_STATE = { export const INITIAL_OUTPUT_STATE = { navBar: { display: false, + hideTopRow: false, width: 0, height: 0, top: 0, diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx index 304fdf2431..76db1657c7 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { layoutSelect, layoutSelectInput } from '/imports/ui/components/layout/context'; +import { layoutSelect, layoutSelectInput, layoutSelectOutput } from '/imports/ui/components/layout/context'; import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues'; import { LAYOUT_TYPE, DEVICE_TYPE } from '/imports/ui/components/layout/enums'; @@ -22,6 +22,7 @@ const LayoutEngine = () => { const presentationInput = layoutSelectInput((i) => i.presentation); const actionbarInput = layoutSelectInput((i) => i.actionBar); const navBarInput = layoutSelectInput((i) => i.navBar); + const navBarOutput = layoutSelectOutput((i) => i.navBar); const sidebarNavigationInput = layoutSelectInput((i) => i.sidebarNavigation); const sidebarContentInput = layoutSelectInput((i) => i.sidebarContent); const externalVideoInput = layoutSelectInput((i) => i.externalVideo); @@ -106,7 +107,9 @@ const LayoutEngine = () => { const calculatesNavbarHeight = () => { const { navBarHeight } = DEFAULT_VALUES; - return navBarInput.hasNavBar ? navBarHeight : 0; + const finalHeight = navBarOutput.hideTopRow ? navBarHeight / 2 : navBarHeight; + + return navBarInput.hasNavBar ? finalHeight : 0; }; const calculatesNavbarBounds = (mediaAreaBounds) => { diff --git a/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts b/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts index 868d9b9683..c06325b332 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts +++ b/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts @@ -97,6 +97,7 @@ export interface GenericContentMainArea { } interface NavBar { hasNavBar?: boolean; + hideTopRow: boolean; height: number; display?: boolean; left?: number; diff --git a/bigbluebutton-html5/imports/ui/components/layout/observer.tsx b/bigbluebutton-html5/imports/ui/components/layout/observer.tsx index a36da541d5..235456cf9e 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/observer.tsx +++ b/bigbluebutton-html5/imports/ui/components/layout/observer.tsx @@ -101,7 +101,13 @@ const LayoutObserver: React.FC = () => { layoutContextDispatch({ type: ACTIONS.SET_HAS_ACTIONBAR, - value: !getFromUserSettings('bbb_hide_actions_bar', false), + value: !(getFromUserSettings('bbb_hide_actions_bar', false) + || getFromUserSettings('bbb_hide_controls', false)), + }); + + layoutContextDispatch({ + type: ACTIONS.SET_HIDE_NAVBAR_TOP_ROW, + value: getFromUserSettings('bbb_hide_controls', false), }); layoutContextDispatch({ diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx index 2b4ff891df..eb097701a1 100755 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx @@ -272,6 +272,7 @@ class NavBar extends Component { currentUserId, isDirectLeaveButtonEnabled, isMeteorConnected, + hideTopRow, } = this.props; const hasNotification = hasUnreadMessages || (hasUnreadNotes && !isPinned); @@ -312,58 +313,60 @@ class NavBar extends Component { } } > - - - {shouldShowNavBarToggleButton && isExpanded && document.dir === 'ltr' - && } - {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'rtl' - && } - {shouldShowNavBarToggleButton && ( - + + {shouldShowNavBarToggleButton && isExpanded && document.dir === 'ltr' + && } + {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'rtl' + && } + {shouldShowNavBarToggleButton && ( + + )} + {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'ltr' + && } + {shouldShowNavBarToggleButton && isExpanded && document.dir === 'rtl' + && } + {renderPluginItems(leftPluginItems)} + + + + {presentationTitle} + + - )} - {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'ltr' - && } - {shouldShowNavBarToggleButton && isExpanded && document.dir === 'rtl' - && } - {renderPluginItems(leftPluginItems)} - - - - {presentationTitle} - - - {renderPluginItems(centerPluginItems)} - - - {renderPluginItems(rightPluginItems)} - {ConnectionStatusService.isEnabled() ? : null} - {ConnectionStatusService.isEnabled() ? : null} - {isDirectLeaveButtonEnabled && isMeteorConnected - ? : null} - - - + {renderPluginItems(centerPluginItems)} + + + {renderPluginItems(rightPluginItems)} + {ConnectionStatusService.isEnabled() ? : null} + {ConnectionStatusService.isEnabled() ? : null} + {isDirectLeaveButtonEnabled && isMeteorConnected + ? : null} + + + + )} {enableTalkingIndicator ? : null} diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx index 2c743e776d..ad0919da89 100755 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx @@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl'; import Auth from '/imports/ui/services/auth'; import getFromUserSettings from '/imports/ui/services/users-settings'; import NavBar from './component'; -import { layoutSelectInput, layoutSelectOutput, layoutDispatch } from '../layout/context'; +import { layoutSelectInput, layoutDispatch, layoutSelectOutput } from '../layout/context'; import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context'; import { PANELS } from '/imports/ui/components/layout/enums'; import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser'; @@ -121,6 +121,7 @@ const NavBarContainer = ({ children, ...props }) => { isDirectLeaveButtonEnabled: IS_DIRECT_LEAVE_BUTTON_ENABLED, // TODO: Remove/Replace isMeteorConnected: true, + hideTopRow: navBar.hideTopRow, ...props, }} style={{ ...navBar }}