From f9d545c531054715404ee7bb0b5d9c5c2e174ea3 Mon Sep 17 00:00:00 2001 From: Mihai Uscat Date: Mon, 9 Mar 2020 13:54:54 +0200 Subject: [PATCH] feat(chat): Make chat push content to the side in tile view --- css/_base.scss | 20 ++++++ css/filmstrip/_tile_view.scss | 11 +++- react/features/filmstrip/actions.web.js | 16 ++++- .../filmstrip/components/native/TileView.js | 2 +- .../filmstrip/components/web/Filmstrip.js | 6 +- react/features/filmstrip/middleware.web.js | 17 +++-- react/features/filmstrip/subscriber.web.js | 66 ++++++++++++++++--- 7 files changed, 117 insertions(+), 21 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index a717cca1f..50d9169f2 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -33,6 +33,26 @@ body { } } +/** + * AtlasKit sets a default margin on the rendered modals, so + * when the shift-right class is set when the chat opens, we + * pad the modal container in order for the modals to be centered + * while also taking the chat size into consideration. +*/ +@media (min-width: 480px + $sidebarWidth) { + .shift-right [class^="Modal__FillScreen"] { + padding-left: $sidebarWidth; + } +} + +/** + * Similarly, we offset the notifications when the chat is open by + * padding the container. +*/ +.shift-right [class^="styledFlagGroup-"] { + padding-left: $sidebarWidth; +} + .jitsi-icon svg { fill: white; } diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 0bdf505ee..619b3e232 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -46,7 +46,16 @@ position: fixed; top: 0; width: 100%; - z-index: $filmstripVideosZ + z-index: $filmstripVideosZ; + + &.shift-right { + margin-left: $sidebarWidth; + width: calc(100% - #{$sidebarWidth}); + + #filmstripRemoteVideos { + width: calc(100vw - #{$sidebarWidth}); + } + } } /** diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js index 67df96d9e..53de94268 100644 --- a/react/features/filmstrip/actions.web.js +++ b/react/features/filmstrip/actions.web.js @@ -1,5 +1,7 @@ // @flow +import { CHAT_SIZE } from '../chat/constants'; + import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes'; import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView } from './functions'; @@ -13,15 +15,25 @@ const TILE_VIEW_SIDE_MARGINS = 10 * 2; * * @param {Object} dimensions - Whether the filmstrip is visible. * @param {Object} windowSize - The size of the window. + * @param {boolean} isChatOpen - Whether the chat panel is displayed, in + * order to properly compute the tile view size. * @returns {{ * type: SET_TILE_VIEW_DIMENSIONS, * dimensions: Object * }} */ -export function setTileViewDimensions(dimensions: Object, windowSize: Object) { +export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) { + const { clientWidth, clientHeight } = windowSize; + let widthToUse = clientWidth; + + if (isChatOpen) { + widthToUse -= CHAT_SIZE; + } + const thumbnailSize = calculateThumbnailSizeForTileView({ ...dimensions, - ...windowSize + clientWidth: widthToUse, + clientHeight }); const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width); diff --git a/react/features/filmstrip/components/native/TileView.js b/react/features/filmstrip/components/native/TileView.js index f86279fca..62a03ac83 100644 --- a/react/features/filmstrip/components/native/TileView.js +++ b/react/features/filmstrip/components/native/TileView.js @@ -10,7 +10,7 @@ import type { Dispatch } from 'redux'; import { connect } from '../../../base/redux'; import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants'; -import { setTileViewDimensions } from '../../actions'; +import { setTileViewDimensions } from '../../actions.native'; import Thumbnail from './Thumbnail'; import styles from './styles'; diff --git a/react/features/filmstrip/components/web/Filmstrip.js b/react/features/filmstrip/components/web/Filmstrip.js index 05a008770..7e5a599f3 100644 --- a/react/features/filmstrip/components/web/Filmstrip.js +++ b/react/features/filmstrip/components/web/Filmstrip.js @@ -371,13 +371,15 @@ function _mapStateToProps(state) { const reduceHeight = !isFilmstripOnly && state['features/toolbox'].visible && interfaceConfig.TOOLBAR_BUTTONS.length; const remoteVideosVisible = shouldRemoteVideosBeVisible(state); - const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${reduceHeight ? 'reduce-height' : ''}`.trim(); + const { isOpen: shiftRight } = state['features/chat']; + const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${ + reduceHeight ? 'reduce-height' : '' + } ${shiftRight ? 'shift-right' : ''}`.trim(); const videosClassName = `filmstrip__videos${ isFilmstripOnly ? ' filmstrip__videos-filmstripOnly' : ''}${ visible ? '' : ' hidden'}`; const { gridDimensions = {}, filmstripWidth } = state['features/filmstrip'].tileViewDimensions; - return { _className: className, _columns: gridDimensions.columns, diff --git a/react/features/filmstrip/middleware.web.js b/react/features/filmstrip/middleware.web.js index 8abd7a92c..1c8525e1d 100644 --- a/react/features/filmstrip/middleware.web.js +++ b/react/features/filmstrip/middleware.web.js @@ -10,7 +10,7 @@ import { } from '../video-layout'; import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes'; -import { setHorizontalViewDimensions, setTileViewDimensions } from './actions'; +import { setHorizontalViewDimensions, setTileViewDimensions } from './actions.web'; import './subscriber.web'; @@ -29,11 +29,18 @@ MiddlewareRegistry.register(store => next => action => { case LAYOUTS.TILE_VIEW: { const { gridDimensions } = state['features/filmstrip'].tileViewDimensions; const { clientHeight, clientWidth } = state['features/base/responsive-ui']; + const { isOpen } = state['features/chat']; - store.dispatch(setTileViewDimensions(gridDimensions, { - clientHeight, - clientWidth - })); + store.dispatch( + setTileViewDimensions( + gridDimensions, + { + clientHeight, + clientWidth + }, + isOpen + ) + ); break; } case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: diff --git a/react/features/filmstrip/subscriber.web.js b/react/features/filmstrip/subscriber.web.js index 2f01dfe0b..913a80b03 100644 --- a/react/features/filmstrip/subscriber.web.js +++ b/react/features/filmstrip/subscriber.web.js @@ -5,7 +5,7 @@ import VideoLayout from '../../../modules/UI/videolayout/VideoLayout'; import { StateListenerRegistry, equals } from '../base/redux'; import { getCurrentLayout, getTileViewGridDimensions, shouldDisplayTileView, LAYOUTS } from '../video-layout'; -import { setHorizontalViewDimensions, setTileViewDimensions } from './actions'; +import { setHorizontalViewDimensions, setTileViewDimensions } from './actions.web'; /** * Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles. @@ -19,12 +19,19 @@ StateListenerRegistry.register( const gridDimensions = getTileViewGridDimensions(state); const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions; const { clientHeight, clientWidth } = state['features/base/responsive-ui']; + const { isOpen } = state['features/chat']; if (!equals(gridDimensions, oldGridDimensions)) { - store.dispatch(setTileViewDimensions(gridDimensions, { - clientHeight, - clientWidth - })); + store.dispatch( + setTileViewDimensions( + gridDimensions, + { + clientHeight, + clientWidth + }, + isOpen + ) + ); } } }); @@ -40,12 +47,18 @@ StateListenerRegistry.register( switch (layout) { case LAYOUTS.TILE_VIEW: { const { clientHeight, clientWidth } = state['features/base/responsive-ui']; + const { isOpen } = state['features/chat']; - store.dispatch(setTileViewDimensions( - getTileViewGridDimensions(state), { - clientHeight, - clientWidth - })); + store.dispatch( + setTileViewDimensions( + getTileViewGridDimensions(state), + { + clientHeight, + clientWidth + }, + isOpen + ) + ); break; } case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: @@ -76,3 +89,36 @@ StateListenerRegistry.register( } } ); + +/** + * Listens for changes in the chat state to calculate the dimensions of the tile view grid and the tiles. + */ +StateListenerRegistry.register( + /* selector */ state => state['features/chat'].isOpen, + /* listener */ (isChatOpen, store) => { + const state = store.getState(); + + if (isChatOpen) { + // $FlowFixMe + document.body.classList.add('shift-right'); + } else { + // $FlowFixMe + document.body.classList.remove('shift-right'); + } + + if (shouldDisplayTileView(state)) { + const gridDimensions = getTileViewGridDimensions(state); + const { clientHeight, clientWidth } = state['features/base/responsive-ui']; + + store.dispatch( + setTileViewDimensions( + gridDimensions, + { + clientHeight, + clientWidth + }, + isChatOpen + ) + ); + } + });