From e2755060b34fc963b039a0474f2a24482f7552d0 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Tue, 27 Jun 2023 12:40:21 +0300 Subject: [PATCH 1/4] feat(toolbar) Make toolbar full width Change behaviour so that things above the toolbar get resized (no more overlap between toolbar and content) --- css/_toolbars.scss | 22 ---- css/_variables.scss | 2 +- css/_videolayout_default.scss | 6 + css/filmstrip/_tile_view.scss | 9 +- css/premeeting/_premeeting-screens.scss | 8 ++ modules/UI/etherpad/Etherpad.js | 3 +- modules/UI/videolayout/VideoContainer.js | 8 +- modules/UI/videolayout/VideoLayout.js | 8 +- react/features/base/responsive-ui/actions.ts | 10 +- react/features/base/ui/constants.web.ts | 16 ++- .../conference/components/web/Conference.tsx | 9 ++ .../web/StageParticipantNameLabel.tsx | 10 +- react/features/filmstrip/actions.web.ts | 3 +- .../filmstrip/components/web/Filmstrip.tsx | 4 + .../components/web/MainFilmstrip.tsx | 25 +---- .../web/ThumbnailBottomIndicators.tsx | 4 +- react/features/filmstrip/constants.ts | 2 +- .../components/web/SharedVideo.tsx | 3 +- react/features/toolbox/actionTypes.ts | 9 -- react/features/toolbox/actions.any.ts | 14 --- .../components/web/OverflowMenuButton.tsx | 2 +- .../toolbox/components/web/Toolbox.tsx | 11 +- react/features/toolbox/functions.web.ts | 11 -- react/features/toolbox/middleware.web.ts | 21 +++- react/features/toolbox/reducer.ts | 13 --- react/features/toolbox/subscriber.web.ts | 104 ++++-------------- .../whiteboard/components/web/Whiteboard.tsx | 3 +- 27 files changed, 118 insertions(+), 222 deletions(-) diff --git a/css/_toolbars.scss b/css/_toolbars.scss index d607e582cdf7..2ce9d66bcdd1 100644 --- a/css/_toolbars.scss +++ b/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; diff --git a/css/_variables.scss b/css/_variables.scss index 4115044bf860..f8915949d300 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -16,7 +16,7 @@ $thumbnailsBorder: 2px; $newToolbarBackgroundColor: #131519; $newToolbarSize: 48px; $newToolbarSizeMobile: 60px; -$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px); +$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 12px); /** * Chat diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 17f56b997f44..f954ef251351 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -21,6 +21,12 @@ left: 0px; right: 0px; overflow: hidden; + transition: height .3s ease-in, min-height .3s ease-in; + + &.with-toolbox { + height: calc(100% - #{$newToolbarSizeWithPadding}); + min-height: calc(100% - #{$newToolbarSizeWithPadding}); + } } #largeVideoBackgroundContainer, diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 083b4c083bc8..f44824debf76 100644 --- a/css/filmstrip/_tile_view.scss +++ b/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; @@ -103,3 +98,7 @@ } } } + +.tile-transition { + transition: height .3s ease-in, width .3s ease-in; +} diff --git a/css/premeeting/_premeeting-screens.scss b/css/premeeting/_premeeting-screens.scss index 466180d0a2ef..b88251f238e5 100644 --- a/css/premeeting/_premeeting-screens.scss +++ b/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) { diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js index a11014d5362c..bc5765fade23 100644 --- a/modules/UI/etherpad/Etherpad.js +++ b/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(); diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index 15919aadb463..74d3dcc9cff1 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/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)); diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index a54b2404d371..b253284707a2 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/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); } }; diff --git a/react/features/base/responsive-ui/actions.ts b/react/features/base/responsive-ui/actions.ts index 7b89a751687a..d131e36eb7b8 100644 --- a/react/features/base/responsive-ui/actions.ts +++ b/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)); diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index 6d3709b8c95a..d14179e4957e 100644 --- a/react/features/base/ui/constants.web.ts +++ b/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), diff --git a/react/features/conference/components/web/Conference.tsx b/react/features/conference/components/web/Conference.tsx index 0aff233520a9..d41ef302870a 100644 --- a/react/features/conference/components/web/Conference.tsx +++ b/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 { render() { const { _isAnyOverlayVisible, + _isToolboxVisible, _layoutClassName, _notificationsVisible, _overflowDrawer, @@ -223,6 +230,7 @@ class Conference extends AbstractConference {
@@ -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, diff --git a/react/features/display-name/components/web/StageParticipantNameLabel.tsx b/react/features/display-name/components/web/StageParticipantNameLabel.tsx index f8b12f5df8e7..71377fe096d9 100644 --- a/react/features/display-name/components/web/StageParticipantNameLabel.tsx +++ b/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,7 +22,7 @@ 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', @@ -31,9 +30,6 @@ const useStyles = makeStyles()(theme => { 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 = () => {
diff --git a/react/features/filmstrip/actions.web.ts b/react/features/filmstrip/actions.web.ts index 15f59311cb3e..6c14127f0d94 100644 --- a/react/features/filmstrip/actions.web.ts +++ b/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. diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx index 7cfb38e41905..23a80acd1ee6 100644 --- a/react/features/filmstrip/components/web/Filmstrip.tsx +++ b/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 { _disableSelfView, _filmstripDisabled, _localScreenShareId, + _isToolboxVisible, _mainFilmstripVisible, _resizableFilmstrip, _topPanelFilmstrip, @@ -380,6 +382,8 @@ class Filmstrip extends PureComponent { } 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`; } diff --git a/react/features/filmstrip/components/web/MainFilmstrip.tsx b/react/features/filmstrip/components/web/MainFilmstrip.tsx index ce79ac8b90ab..6c87ed9a9a76 100644 --- a/react/features/filmstrip/components/web/MainFilmstrip.tsx +++ b/react/features/filmstrip/components/web/MainFilmstrip.tsx @@ -7,12 +7,10 @@ import { isMobileBrowser } from '../../../base/environment/utils'; import { LAYOUTS } from '../../../video-layout/constants'; import { getCurrentLayout } from '../../../video-layout/functions.web'; import { - ASPECT_RATIO_BREAKPOINT, FILMSTRIP_BREAKPOINT, FILMSTRIP_BREAKPOINT_OFFSET, FILMSTRIP_TYPE, - TOOLBAR_HEIGHT, - TOOLBAR_HEIGHT_MOBILE } from '../../constants'; + TOOLBAR_HEIGHT } from '../../constants'; import { isFilmstripResizable, showGridInVerticalView } from '../../functions.web'; import Filmstrip from './Filmstrip'; @@ -124,24 +122,6 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) { let gridDimensions = dimensions; let _hasScroll = false; - const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const availableSpace = clientHeight - Number(filmstripHeight); - let filmstripPadding = 0; - - if (availableSpace > 0) { - const paddingValue = TOOLBAR_HEIGHT_MOBILE - availableSpace; - - if (paddingValue > 0) { - filmstripPadding = paddingValue; - } - } else { - filmstripPadding = TOOLBAR_HEIGHT_MOBILE; - } - - const collapseTileView = reduceHeight - && isMobileBrowser() - && clientWidth <= ASPECT_RATIO_BREAKPOINT; - const shouldReduceHeight = reduceHeight && ( isMobileBrowser() || (_currentLayout !== LAYOUTS.VERTICAL_FILMSTRIP_VIEW && _currentLayout !== LAYOUTS.STAGE_FILMSTRIP_VIEW)); @@ -152,8 +132,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) { case LAYOUTS.TILE_VIEW: _hasScroll = Boolean(tileViewHasScroll); _thumbnailSize = tileViewThumbnailSize; - remoteFilmstripHeight = Number(filmstripHeight) - ( - collapseTileView && filmstripPadding > 0 ? filmstripPadding : 0); + remoteFilmstripHeight = Number(filmstripHeight); remoteFilmstripWidth = filmstripWidth; break; case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx index 289ca8dc3923..2dcded8faa14 100644 --- a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx +++ b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx @@ -61,7 +61,7 @@ const ThumbnailBottomIndicators = ({ showStatusIndicators = true, thumbnailType }: IProps) => { - const { classes: styles, cx } = useStyles(); + const { classes: styles } = useStyles(); const _allowEditing = !useSelector(isNameReadOnly); const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME; const _showDisplayName = useSelector(isDisplayNameVisible); @@ -69,7 +69,7 @@ const ThumbnailBottomIndicators = ({ (state: IReduxState) => isScreenShareParticipantById(state, participantId) ); - return (
+ return (
{ showStatusIndicators && { } else { width = `${clientWidth}px`; } - height = `${clientHeight - getToolboxHeight()}px`; + height = clientHeight; } else { if (filmstripVisible) { height = `${clientHeight - Filmstrip.getFilmstripHeight()}px`; diff --git a/react/features/toolbox/actionTypes.ts b/react/features/toolbox/actionTypes.ts index e1321ecbbcef..659ce37f0ea4 100644 --- a/react/features/toolbox/actionTypes.ts +++ b/react/features/toolbox/actionTypes.ts @@ -105,12 +105,3 @@ export const SET_TOOLBOX_VISIBLE = 'SET_TOOLBOX_VISIBLE'; * } */ export const TOGGLE_TOOLBOX_VISIBLE = 'TOGGLE_TOOLBOX_VISIBLE'; - -/** - * The type of the redux action which sets whether the toolbox should be shifted up or not. - * - * { - * type: SET_TOOLBOX_SHIFT_UP - * } - */ -export const SET_TOOLBOX_SHIFT_UP = 'SET_TOOLBOX_SHIFT_UP'; diff --git a/react/features/toolbox/actions.any.ts b/react/features/toolbox/actions.any.ts index 972fd386fa02..43882b08e7df 100644 --- a/react/features/toolbox/actions.any.ts +++ b/react/features/toolbox/actions.any.ts @@ -9,7 +9,6 @@ import { VIDEO_MUTISM_AUTHORITY } from '../base/media/constants'; import { SET_TOOLBOX_ENABLED, - SET_TOOLBOX_SHIFT_UP, SET_TOOLBOX_VISIBLE, TOGGLE_TOOLBOX_VISIBLE } from './actionTypes'; @@ -107,16 +106,3 @@ export function handleToggleVideoMuted(muted: boolean, showUI: boolean, ensureTr }; } - -/** - * Sets whether the toolbox should be shifted up or not. - * - * @param {boolean} shiftUp - Whether the toolbox should shift up or not. - * @returns {Object} - */ -export function setShiftUp(shiftUp: boolean) { - return { - type: SET_TOOLBOX_SHIFT_UP, - shiftUp - }; -} diff --git a/react/features/toolbox/components/web/OverflowMenuButton.tsx b/react/features/toolbox/components/web/OverflowMenuButton.tsx index 415ae195e927..2c30dc905835 100644 --- a/react/features/toolbox/components/web/OverflowMenuButton.tsx +++ b/react/features/toolbox/components/web/OverflowMenuButton.tsx @@ -234,7 +234,7 @@ const OverflowMenuButton = ({ headingId = 'overflow-context-menu' onPopoverClose = { onCloseDialog } onPopoverOpen = { onOpenDialog } - position = 'top' + position = 'top-start' trigger = 'click' visible = { isOpen }> { - const { classes, cx } = useStyles(); + const { classes } = useStyles(); const _toolboxRef = useRef(null); useKeyboardShortcuts(toolbarButtons); @@ -469,7 +463,7 @@ const Toolbox = ({ return (
{renderToolboxContent()}
@@ -524,7 +518,6 @@ function _mapStateToProps(state: IReduxState, ownProps: any) { _overflowDrawer: overflowDrawer, _reactionsButtonEnabled: isReactionsButtonEnabled(state), _reactionsEnabled, - _shiftUp: state['features/toolbox'].shiftUp, _toolbarButtons: toolbarButtons, _visible: isToolboxVisible(state) }; diff --git a/react/features/toolbox/functions.web.ts b/react/features/toolbox/functions.web.ts index 4e65f96b6cca..2340f35a34c9 100644 --- a/react/features/toolbox/functions.web.ts +++ b/react/features/toolbox/functions.web.ts @@ -44,17 +44,6 @@ import { IToolboxButton } from './types'; export * from './functions.any'; -/** - * Helper for getting the height of the toolbox. - * - * @returns {number} The height of the toolbox. - */ -export function getToolboxHeight() { - const toolbox = document.getElementById('new-toolbox'); - - return toolbox?.clientHeight || 0; -} - /** * Indicates if a toolbar button is enabled. * diff --git a/react/features/toolbox/middleware.web.ts b/react/features/toolbox/middleware.web.ts index 604a2fda4777..2949120f0122 100644 --- a/react/features/toolbox/middleware.web.ts +++ b/react/features/toolbox/middleware.web.ts @@ -1,11 +1,14 @@ import { AnyAction } from 'redux'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; +import { LAYOUTS } from '../video-layout/constants'; +import { getCurrentLayout } from '../video-layout/functions.any'; import { CLEAR_TOOLBOX_TIMEOUT, SET_FULL_SCREEN, - SET_TOOLBOX_TIMEOUT + SET_TOOLBOX_TIMEOUT, + SET_TOOLBOX_VISIBLE } from './actionTypes'; import './subscriber.web'; @@ -26,6 +29,22 @@ MiddlewareRegistry.register(store => next => action => { break; } + case SET_TOOLBOX_VISIBLE: { + if (getCurrentLayout(store.getState()) === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) { + document.getElementsByClassName('remote-videos')?.[0]?.classList.add('height-transition'); + } + if (getCurrentLayout(store.getState()) === LAYOUTS.TILE_VIEW) { + document.querySelectorAll('span.videocontainer').forEach(span => span.classList.add('tile-transition')); + const container = document.getElementsByClassName('remote-videos'); + + if (container.length > 0) { + // eslint-disable-next-line no-extra-parens + (container[0] as HTMLElement).style.overflow = 'hidden'; + } + } + break; + } + case SET_FULL_SCREEN: return _setFullScreen(next, action); diff --git a/react/features/toolbox/reducer.ts b/react/features/toolbox/reducer.ts index 2b106458e4ce..ed85409b9521 100644 --- a/react/features/toolbox/reducer.ts +++ b/react/features/toolbox/reducer.ts @@ -9,7 +9,6 @@ import { SET_OVERFLOW_MENU_VISIBLE, SET_TOOLBAR_HOVERED, SET_TOOLBOX_ENABLED, - SET_TOOLBOX_SHIFT_UP, SET_TOOLBOX_TIMEOUT, SET_TOOLBOX_VISIBLE, TOGGLE_TOOLBOX_VISIBLE @@ -56,11 +55,6 @@ const INITIAL_STATE = { */ overflowMenuVisible: false, - /** - * Whether to shift the toolbar up (in case it overlaps the tiles names). - */ - shiftUp: false, - /** * A number, non-zero value which identifies the timer created by a call * to setTimeout(). @@ -85,7 +79,6 @@ export interface IToolboxState { hovered: boolean; overflowDrawer: boolean; overflowMenuVisible: boolean; - shiftUp: boolean; timeoutID?: number | null; visible: boolean; } @@ -142,12 +135,6 @@ ReducerRegistry.register( timeoutID: action.timeoutID }; - case SET_TOOLBOX_SHIFT_UP: - return { - ...state, - shiftUp: action.shiftUp - }; - case SET_TOOLBOX_VISIBLE: return set(state, 'visible', action.visible); diff --git a/react/features/toolbox/subscriber.web.ts b/react/features/toolbox/subscriber.web.ts index ce59a68d6d36..64036635a83c 100644 --- a/react/features/toolbox/subscriber.web.ts +++ b/react/features/toolbox/subscriber.web.ts @@ -1,13 +1,11 @@ -import { throttle } from 'lodash'; - +// @ts-expect-error +import VideoLayout from '../../../modules/UI/videolayout/VideoLayout'; import { IReduxState, IStore } from '../app/types'; -import { getParticipantCount } from '../base/participants/functions'; import StateListenerRegistry from '../base/redux/StateListenerRegistry'; -import { DEFAULT_MAX_COLUMNS } from '../filmstrip/constants'; -import { isLayoutTileView } from '../video-layout/functions.any'; +import { clientResized } from '../base/responsive-ui/actions'; -import { setShiftUp } from './actions.any'; import { isAudioMuteButtonDisabled } from './functions.any'; +import { isToolboxVisible } from './functions.web'; /** * Notifies when audio availability changes. @@ -21,83 +19,25 @@ StateListenerRegistry.register( } ); - -const checkToolboxOverlap = (clientHeight: number, store: IStore) => { - let toolboxRect = document.querySelector('.toolbox-content-items')?.getBoundingClientRect(); - - if (!toolboxRect) { - return; - } - const tiles = document.querySelectorAll('span.videocontainer'); - - if (!tiles.length) { - return; - } - - const toolboxHeight = 48 + 12; // height + padding - const bottomMargin = 16; - - // Set top and bottom manually to avoid wrong coordinates - // caused by the hiding/ showing of the toolbox. - toolboxRect = { - ...toolboxRect, - top: clientHeight - toolboxHeight - bottomMargin, - bottom: clientHeight - bottomMargin, - left: toolboxRect.left, - right: toolboxRect.right - }; - let isIntersecting = false; - - const rows = store.getState()['features/filmstrip'].tileViewDimensions?.gridDimensions?.rows; - const noOfTilesToCheck = rows === 1 ? tiles.length : DEFAULT_MAX_COLUMNS - 1; - - for (let i = 1; i < Math.max(noOfTilesToCheck, tiles.length); i++) { - const tile = tiles[tiles.length - i]; - const indicatorsRect = tile?.querySelector('.bottom-indicators')?.getBoundingClientRect(); - - if (!indicatorsRect) { - // eslint-disable-next-line no-continue - continue; - } - - if (indicatorsRect.top <= toolboxRect.bottom - && indicatorsRect.right >= toolboxRect.left - && indicatorsRect.bottom >= toolboxRect.top - && indicatorsRect.left <= toolboxRect.right - ) { - isIntersecting = true; - break; - } - } - - store.dispatch(setShiftUp(isIntersecting)); -}; - -const throttledCheckOverlap = throttle(checkToolboxOverlap, 100, { - leading: false, - trailing: true -}); - /** - * Listens for changes in the selected layout to calculate the dimensions of the tile view grid and horizontal view. + * Listens for changes in toolbox visibility to calculate the + * dimensions of the tile view grid and the tiles. */ StateListenerRegistry.register( - /* selector */ state => { - const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - - return { - participantCount: getParticipantCount(state), - clientHeight, - clientWidth, - isTileView: isLayoutTileView(state) - }; - }, - /* listener */({ clientHeight, isTileView }, store) => { - if (!isTileView) { - return; - } - throttledCheckOverlap(clientHeight, store); - - }, { - deepEquals: true + /* selector */ isToolboxVisible, + /* listener */(isVisible, store) => { + const { innerWidth, innerHeight } = window; + + store.dispatch(clientResized(innerWidth, innerHeight)); + VideoLayout.onResize(true); + setTimeout(() => { + const container = document.getElementsByClassName('remote-videos')?.[0]; + + if (container) { + container.classList.remove('height-transition'); + // eslint-disable-next-line no-extra-parens + (container as HTMLElement).style.overflow = 'auto'; + } + document.querySelectorAll('span.videocontainer').forEach(span => span.classList.remove('tile-transition')); + }, 300); }); diff --git a/react/features/whiteboard/components/web/Whiteboard.tsx b/react/features/whiteboard/components/web/Whiteboard.tsx index 6498b8638781..e4c85e04c05f 100644 --- a/react/features/whiteboard/components/web/Whiteboard.tsx +++ b/react/features/whiteboard/components/web/Whiteboard.tsx @@ -10,7 +10,6 @@ import { IReduxState } from '../../../app/types'; import { translate } from '../../../base/i18n/functions'; import { getLocalParticipant } from '../../../base/participants/functions'; import { getVerticalViewMaxWidth } from '../../../filmstrip/functions.web'; -import { getToolboxHeight } from '../../../toolbox/functions.web'; import { shouldDisplayTileView } from '../../../video-layout/functions.any'; import { WHITEBOARD_UI_OPTIONS } from '../../constants'; import { @@ -78,7 +77,7 @@ const Whiteboard = (props: WithTranslation): JSX.Element => { } else { width = clientWidth; } - height = clientHeight - getToolboxHeight(); + height = clientHeight; } else { if (filmstripVisible) { height = clientHeight - Filmstrip.getFilmstripHeight(); From ead8ffe787abfbdcbf5a3b34df8749b1bcfb1579 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Tue, 12 Sep 2023 13:27:04 +0300 Subject: [PATCH 2/4] remove tile transition --- css/filmstrip/_tile_view.scss | 4 ---- react/features/toolbox/middleware.web.ts | 9 --------- react/features/toolbox/subscriber.web.ts | 8 ++++++-- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index f44824debf76..87f15f2749fb 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -98,7 +98,3 @@ } } } - -.tile-transition { - transition: height .3s ease-in, width .3s ease-in; -} diff --git a/react/features/toolbox/middleware.web.ts b/react/features/toolbox/middleware.web.ts index 2949120f0122..6e8bb28e8d96 100644 --- a/react/features/toolbox/middleware.web.ts +++ b/react/features/toolbox/middleware.web.ts @@ -33,15 +33,6 @@ MiddlewareRegistry.register(store => next => action => { if (getCurrentLayout(store.getState()) === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) { document.getElementsByClassName('remote-videos')?.[0]?.classList.add('height-transition'); } - if (getCurrentLayout(store.getState()) === LAYOUTS.TILE_VIEW) { - document.querySelectorAll('span.videocontainer').forEach(span => span.classList.add('tile-transition')); - const container = document.getElementsByClassName('remote-videos'); - - if (container.length > 0) { - // eslint-disable-next-line no-extra-parens - (container[0] as HTMLElement).style.overflow = 'hidden'; - } - } break; } diff --git a/react/features/toolbox/subscriber.web.ts b/react/features/toolbox/subscriber.web.ts index 64036635a83c..7036231ad670 100644 --- a/react/features/toolbox/subscriber.web.ts +++ b/react/features/toolbox/subscriber.web.ts @@ -28,7 +28,9 @@ StateListenerRegistry.register( /* listener */(isVisible, store) => { const { innerWidth, innerHeight } = window; - store.dispatch(clientResized(innerWidth, innerHeight)); + if (isVisible) { + store.dispatch(clientResized(innerWidth, innerHeight)); + } VideoLayout.onResize(true); setTimeout(() => { const container = document.getElementsByClassName('remote-videos')?.[0]; @@ -38,6 +40,8 @@ StateListenerRegistry.register( // eslint-disable-next-line no-extra-parens (container as HTMLElement).style.overflow = 'auto'; } - document.querySelectorAll('span.videocontainer').forEach(span => span.classList.remove('tile-transition')); + if (!isVisible) { + store.dispatch(clientResized(innerWidth, innerHeight)); + } }, 300); }); From 4d30472aa64f79c146e2cb17ef58ca3fc109b24e Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Wed, 13 Sep 2023 14:22:13 +0300 Subject: [PATCH 3/4] remove height transition --- react/features/toolbox/middleware.web.ts | 12 +----------- react/features/toolbox/subscriber.web.ts | 16 +--------------- 2 files changed, 2 insertions(+), 26 deletions(-) diff --git a/react/features/toolbox/middleware.web.ts b/react/features/toolbox/middleware.web.ts index 6e8bb28e8d96..604a2fda4777 100644 --- a/react/features/toolbox/middleware.web.ts +++ b/react/features/toolbox/middleware.web.ts @@ -1,14 +1,11 @@ import { AnyAction } from 'redux'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; -import { LAYOUTS } from '../video-layout/constants'; -import { getCurrentLayout } from '../video-layout/functions.any'; import { CLEAR_TOOLBOX_TIMEOUT, SET_FULL_SCREEN, - SET_TOOLBOX_TIMEOUT, - SET_TOOLBOX_VISIBLE + SET_TOOLBOX_TIMEOUT } from './actionTypes'; import './subscriber.web'; @@ -29,13 +26,6 @@ MiddlewareRegistry.register(store => next => action => { break; } - case SET_TOOLBOX_VISIBLE: { - if (getCurrentLayout(store.getState()) === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) { - document.getElementsByClassName('remote-videos')?.[0]?.classList.add('height-transition'); - } - break; - } - case SET_FULL_SCREEN: return _setFullScreen(next, action); diff --git a/react/features/toolbox/subscriber.web.ts b/react/features/toolbox/subscriber.web.ts index 7036231ad670..aa6bb815b407 100644 --- a/react/features/toolbox/subscriber.web.ts +++ b/react/features/toolbox/subscriber.web.ts @@ -28,20 +28,6 @@ StateListenerRegistry.register( /* listener */(isVisible, store) => { const { innerWidth, innerHeight } = window; - if (isVisible) { - store.dispatch(clientResized(innerWidth, innerHeight)); - } + store.dispatch(clientResized(innerWidth, innerHeight)); VideoLayout.onResize(true); - setTimeout(() => { - const container = document.getElementsByClassName('remote-videos')?.[0]; - - if (container) { - container.classList.remove('height-transition'); - // eslint-disable-next-line no-extra-parens - (container as HTMLElement).style.overflow = 'auto'; - } - if (!isVisible) { - store.dispatch(clientResized(innerWidth, innerHeight)); - } - }, 300); }); From 4a4d75c0112a86d0beded1169f583d7eaa74ed80 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 14 Sep 2023 11:39:55 +0300 Subject: [PATCH 4/4] remove height transition 2 --- css/_videolayout_default.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index f954ef251351..d257fc5b5d4f 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -21,7 +21,6 @@ left: 0px; right: 0px; overflow: hidden; - transition: height .3s ease-in, min-height .3s ease-in; &.with-toolbox { height: calc(100% - #{$newToolbarSizeWithPadding});