feat(toolbar) Make toolbar full width

css/_toolbars.scss

@@ -32,14 +32,6 @@
     pointer-events: none;
     z-index: $toolbarZ + 2;
 
-    &.shift-up {
-        bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
-
-        .toolbox-content {
-            margin-bottom: 46px;
-        }
-    }
-
     &.visible {
         bottom: 0;
     }
@@ -53,7 +45,6 @@
     align-items: center;
     box-sizing: border-box;
     display: flex;
-    margin-bottom: 16px;
     position: relative;
     z-index: $toolbarZ;
     pointer-events: none;
@@ -79,24 +70,11 @@
 }
 
 .toolbox-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    max-width: 100%;
-    pointer-events: all;
-    border-radius: 6px;
-
     .toolbox-content-items {
         @include ltr;
     }
 }
 
-.toolbox-content-wrapper::after {
-    content: '';
-    background: $newToolbarBackgroundColor;
-    padding-bottom: env(safe-area-inset-bottom, 0);
-}
-
 .overflow-menu-hr {
     border-top: 1px solid #4C4D50;
     border-bottom: 0;

css/_variables.scss

@@ -16,7 +16,7 @@ $thumbnailsBorder: 2px;
 $newToolbarBackgroundColor: #131519;
 $newToolbarSize: 48px;
 $newToolbarSizeMobile: 60px;
-$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
+$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 12px);
 
 /**
  * Chat

css/_videolayout_default.scss

@@ -21,6 +21,11 @@
     left: 0px;
     right: 0px;
     overflow: hidden;
+
+    &.with-toolbox {
+        height: calc(100% - #{$newToolbarSizeWithPadding});
+        min-height: calc(100% - #{$newToolbarSizeWithPadding});
+    }
 }
 
 #largeVideoBackgroundContainer,

css/filmstrip/_tile_view.scss

@@ -40,11 +40,6 @@
         width: 100%;
 
         &.collapse {
-            #remoteVideos {
-                height: calc(100% - #{$newToolbarSizeMobile}) !important;
-                margin-bottom: $newToolbarSizeMobile;
-            }
-
             .remote-videos {
                 // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
                 overflow: hidden auto !important;

css/premeeting/_premeeting-screens.scss

@@ -89,6 +89,14 @@
             box-sizing: border-box;
             width: auto;
         }
+
+        .toolbox-content-wrapper {
+            margin: 0 auto;
+            max-width: 100%;
+            background: none;
+            box-shadow: none;
+            padding: 0;
+        }
     }
 
     @media (max-width: 400px) {

modules/UI/etherpad/Etherpad.js

@@ -4,7 +4,6 @@ import $ from 'jquery';
 
 import { setDocumentEditingState } from '../../../react/features/etherpad/actions';
 import { getSharedDocumentUrl } from '../../../react/features/etherpad/functions';
-import { getToolboxHeight } from '../../../react/features/toolbox/functions.web';
 import Filmstrip from '../videolayout/Filmstrip';
 import LargeContainer from '../videolayout/LargeContainer';
 import VideoLayout from '../videolayout/VideoLayout';
@@ -68,7 +67,7 @@ class Etherpad extends LargeContainer {
         let height, width;
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
-            height = containerHeight - getToolboxHeight();
+            height = containerHeight;
             width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();

modules/UI/videolayout/VideoContainer.js

@@ -394,6 +394,7 @@ export class VideoContainer extends LargeContainer {
         const currentLayout = getCurrentLayout(state);
 
         const verticalFilmstripWidth = state['features/filmstrip'].width?.current;
+        const containerHeightWithToolbox = containerHeight - (state['features/toolbox'].visible ? 60 : 0);
 
         if (currentLayout === LAYOUTS.TILE_VIEW || currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW) {
             // We don't need to resize the large video since it won't be displayed and we'll resize when returning back
@@ -403,7 +404,8 @@ export class VideoContainer extends LargeContainer {
 
         this.positionRemoteStatusMessages();
 
-        const [ width, height ] = this._getVideoSize(containerWidth, containerHeight, verticalFilmstripWidth);
+        const [ width, height ] = this._getVideoSize(containerWidth,
+            containerHeightWithToolbox, verticalFilmstripWidth);
 
         if (width === 0 || height === 0) {
             // We don't need to set 0 for width or height since the visibility is controlled by the visibility css prop
@@ -414,7 +416,7 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
-        if ((containerWidth > width) || (containerHeight > height)) {
+        if ((containerWidth > width) || (containerHeightWithToolbox > height)) {
             this._backgroundOrientation = containerWidth > width ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
             this._hideBackground = false;
         } else {
@@ -424,7 +426,7 @@ export class VideoContainer extends LargeContainer {
         this._updateBackground();
 
         const { horizontalIndent, verticalIndent }
-            = this.getVideoPosition(width, height, containerWidth, containerHeight, verticalFilmstripWidth);
+            = this.getVideoPosition(width, height, containerWidth, containerHeightWithToolbox, verticalFilmstripWidth);
 
         APP.store.dispatch(setLargeVideoDimensions(height, width));
 

modules/UI/videolayout/VideoLayout.js

@@ -129,10 +129,10 @@ const VideoLayout = {
     /**
      * Resizes the video area.
      */
-    resizeVideoArea() {
+    resizeVideoArea(animate = false) {
         if (largeVideo) {
             largeVideo.updateContainerSize();
-            largeVideo.resize(false);
+            largeVideo.resize(animate);
         }
     },
 
@@ -306,8 +306,8 @@ const VideoLayout = {
     /**
      * Handles window resizes.
      */
-    onResize() {
-        VideoLayout.resizeVideoArea();
+    onResize(animate = false) {
+        VideoLayout.resizeVideoArea(animate);
     }
 };
 

react/features/base/responsive-ui/actions.ts

@@ -2,7 +2,9 @@ import { batch } from 'react-redux';
 
 import { IStore } from '../../app/types';
 import { CHAT_SIZE } from '../../chat/constants';
+import { TOOLBAR_HEIGHT } from '../../filmstrip/constants';
 import { getParticipantsPaneOpen } from '../../participants-pane/functions';
+import { isToolboxVisible } from '../../toolbox/functions';
 import theme from '../components/themes/participantsPaneTheme.json';
 
 import {
@@ -36,11 +38,17 @@ const REDUCED_UI_THRESHOLD = 300;
 export function clientResized(clientWidth: number, clientHeight: number) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         let availableWidth = clientWidth;
+        let availableHeight = clientHeight;
 
         if (navigator.product !== 'ReactNative') {
             const state = getState();
             const { isOpen: isChatOpen } = state['features/chat'];
             const isParticipantsPaneOpen = getParticipantsPaneOpen(state);
+            const toolboxVisible = isToolboxVisible(state);
+
+            if (toolboxVisible) {
+                availableHeight -= TOOLBAR_HEIGHT;
+            }
 
             if (isChatOpen) {
                 availableWidth -= CHAT_SIZE;
@@ -54,7 +62,7 @@ export function clientResized(clientWidth: number, clientHeight: number) {
         batch(() => {
             dispatch({
                 type: CLIENT_RESIZED,
-                clientHeight,
+                clientHeight: availableHeight,
                 clientWidth: availableWidth
             });
             dispatch(setAspectRatio(clientWidth, clientHeight));

react/features/base/ui/constants.web.ts

@@ -253,15 +253,21 @@ export const commonStyles = (theme: Theme) => {
             textAlign: 'center' as const
         },
 
-        '.toolbox-content-items': {
+        '.toolbox-content-wrapper': {
             background: theme.palette.ui01,
-            borderRadius: 6,
-            margin: '0 auto',
-            padding: 6,
+            padding: theme.spacing(2),
+            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
+            display: 'flex',
+            flexDirection: 'row' as const,
+            justifyContent: 'center',
+            width: '100%',
+            pointerEvents: 'all' as const
+        },
+
+        '.toolbox-content-items': {
             textAlign: 'center' as const,
             pointerEvents: 'all' as const,
             display: 'flex',
-            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
 
             '& > div': {
                 marginRight: theme.spacing(2),

react/features/conference/components/web/Conference.tsx

@@ -27,6 +27,7 @@ import { toggleToolboxVisible } from '../../../toolbox/actions.any';
 import { fullScreenChanged, showToolbox } from '../../../toolbox/actions.web';
 import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
 import Toolbox from '../../../toolbox/components/web/Toolbox';
+import { isToolboxVisible } from '../../../toolbox/functions.web';
 import { LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
 import { getCurrentLayout } from '../../../video-layout/functions.any';
 import { init } from '../../actions.web';
@@ -68,6 +69,11 @@ interface IProps extends AbstractProps, WithTranslation {
      */
     _isAnyOverlayVisible: boolean;
 
+    /**
+     * Whether or not the toolbox is visible.
+     */
+    _isToolboxVisible: boolean;
+
     /**
      * The CSS class to apply to the root of {@link Conference} to modify the
      * application layout.
@@ -200,6 +206,7 @@ class Conference extends AbstractConference<IProps, any> {
     render() {
         const {
             _isAnyOverlayVisible,
+            _isToolboxVisible,
             _layoutClassName,
             _notificationsVisible,
             _overflowDrawer,
@@ -223,6 +230,7 @@ class Conference extends AbstractConference<IProps, any> {
                     <ConferenceInfo />
                     <Notice />
                     <div
+                        className = { _isToolboxVisible ? 'with-toolbox' : '' }
                         id = 'videospace'
                         onTouchStart = { this._onVidespaceTouchStart }>
                         <LargeVideo />
@@ -397,6 +405,7 @@ function _mapStateToProps(state: IReduxState) {
         ...abstractMapStateToProps(state),
         _backgroundAlpha: backgroundAlpha,
         _isAnyOverlayVisible: Boolean(getOverlayToRender(state)),
+        _isToolboxVisible: isToolboxVisible(state),
         _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state) ?? ''],
         _mouseMoveCallbackInterval: mouseMoveCallbackInterval,
         _overflowDrawer: overflowDrawer,

react/features/display-name/components/web/StageParticipantNameLabel.tsx

@@ -11,7 +11,6 @@ import {
 } from '../../../base/participants/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
-import { isToolboxVisible } from '../../../toolbox/functions.web';
 import { isLayoutTileView } from '../../../video-layout/functions.web';
 
 import DisplayNameBadge from './DisplayNameBadge';
@@ -23,17 +22,14 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             display: 'inline-flex',
             justifyContent: 'center',
-            marginBottom: theme.spacing(7),
+            marginBottom: theme.spacing(3),
             transition: 'margin-bottom 0.3s',
             pointerEvents: 'none',
             position: 'absolute',
             bottom: 0,
             left: 0,
             width: '100%',
             zIndex: 1
-        },
-        containerElevated: {
-            marginBottom: theme.spacing(12)
         }
     };
 });
@@ -53,7 +49,6 @@ const StageParticipantNameLabel = () => {
     const localId = localParticipant?.id;
 
     const isTileView = useSelector(isLayoutTileView);
-    const toolboxVisible: boolean = useSelector(isToolboxVisible);
     const showDisplayName = useSelector(isDisplayNameVisible);
 
     if (showDisplayName
@@ -66,8 +61,7 @@ const StageParticipantNameLabel = () => {
             <div
                 className = { cx(
                     'stage-participant-label',
-                    classes.badgeContainer,
-                    toolboxVisible && classes.containerElevated
+                    classes.badgeContainer
                 ) }>
                 <DisplayNameBadge name = { nameToDisplay } />
             </div>

react/features/filmstrip/actions.web.ts

@@ -213,7 +213,8 @@ export function setVerticalViewDimensions() {
             remoteVideosContainerWidth
                 = thumbnails?.local?.width + TILE_VERTICAL_CONTAINER_HORIZONTAL_MARGIN + SCROLL_SIZE;
             remoteVideosContainerHeight
-                = clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height) - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
+                = clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height)
+                    - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
 
             // Account for the height of the local screen share thumbnail when calculating the height of the remote
             // videos container.

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -36,6 +36,7 @@ import {
     MIN_STAGE_VIEW_WIDTH,
     TILE_HORIZONTAL_MARGIN,
     TILE_VERTICAL_MARGIN,
+    TOOLBAR_HEIGHT,
     TOP_FILMSTRIP_HEIGHT
 } from '../../constants';
 import {
@@ -341,6 +342,7 @@ class Filmstrip extends PureComponent <IProps, IState> {
             _disableSelfView,
             _filmstripDisabled,
             _localScreenShareId,
+            _isToolboxVisible,
             _mainFilmstripVisible,
             _resizableFilmstrip,
             _topPanelFilmstrip,
@@ -380,6 +382,8 @@ class Filmstrip extends PureComponent <IProps, IState> {
         } else if (_currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW
             || (_currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW && filmstripType === FILMSTRIP_TYPE.MAIN)) {
             filmstripStyle.maxWidth = _verticalViewMaxWidth;
+            filmstripStyle.maxHeight = `calc(100% - ${_isToolboxVisible ? TOOLBAR_HEIGHT : 0}px)`;
+            filmstripStyle.transition = 'max-height .3s ease-in';
             if (!_mainFilmstripVisible) {
                 filmstripStyle.right = `-${filmstripStyle.maxWidth}px`;
             }