From aefd13ab1b9a1ad04e16ba09021aa58e430531b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Thu, 17 Dec 2020 14:38:14 +0100 Subject: [PATCH] fix(tile-view) reduce margins, take 2 Due to how the filmstrip size if computed I don't think there is a good way to animate the change in size, so just ignore the toolbar, it will be hidden soon enough. --- css/filmstrip/_tile_view.scss | 10 ------ react/features/filmstrip/actions.web.js | 14 +++----- react/features/filmstrip/functions.web.js | 13 ++++---- react/features/filmstrip/middleware.web.js | 4 +-- react/features/filmstrip/subscriber.web.js | 39 ++-------------------- 5 files changed, 14 insertions(+), 66 deletions(-) diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index b48fa60c6..c6453e057 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -109,14 +109,4 @@ .has-overflow .videocontainer { align-self: baseline; } - - /** - * Firefox flex acts a little differently. To make sure the bottom row of - * thumbnails is not overlapped by the horizontal toolbar, margin is added - * to the local thumbnail to keep it from the bottom of the screen. It is - * assumed the local thumbnail will always be on the bottom row. - */ - .has-overflow #localVideoContainer { - margin-bottom: 100px !important; - } } diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js index 3e188487f..3318e93df 100644 --- a/react/features/filmstrip/actions.web.js +++ b/react/features/filmstrip/actions.web.js @@ -6,9 +6,9 @@ import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './acti import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView } from './functions'; /** - * The size of the side margins for each tile as set in CSS. + * The size of the side margins for the entire tile view area. */ -const TILE_VIEW_SIDE_MARGINS = 10 * 2; +const TILE_VIEW_SIDE_MARGINS = 20; /** * Sets the dimensions of the tile view grid. @@ -24,21 +24,15 @@ const TILE_VIEW_SIDE_MARGINS = 10 * 2; * dimensions: Object * }} */ -export function setTileViewDimensions( - dimensions: Object, windowSize: Object, isChatOpen: boolean, isToolboxVisible: boolean) { +export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) { const { clientWidth, clientHeight } = windowSize; - let heightToUse = clientHeight; + const heightToUse = clientHeight; let widthToUse = clientWidth; if (isChatOpen) { widthToUse -= CHAT_SIZE; } - if (isToolboxVisible) { - // The distance from the top and bottom of the screen, to avoid overlapping UI elements. - heightToUse -= 150; - } - const thumbnailSize = calculateThumbnailSizeForTileView({ ...dimensions, clientWidth: widthToUse, diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js index af52dd08c..819e0d552 100644 --- a/react/features/filmstrip/functions.web.js +++ b/react/features/filmstrip/functions.web.js @@ -10,6 +10,10 @@ import { TILE_ASPECT_RATIO } from './constants'; declare var interfaceConfig: Object; +// Minimum space to keep between the sides of the tiles and the sides +// of the window. +const TILE_VIEW_SIDE_MARGINS = 20; + /** * Returns true if the filmstrip on mobile is visible, false otherwise. * @@ -94,13 +98,8 @@ export function calculateThumbnailSizeForTileView({ clientWidth, clientHeight }: Object) { - // Minimum space to keep between the sides of the tiles and the sides - // of the window. - const sideMargins = 30 * 2; - - const verticalMargins = visibleRows * 10; - const viewWidth = clientWidth - sideMargins; - const viewHeight = clientHeight - verticalMargins; + const viewWidth = clientWidth - TILE_VIEW_SIDE_MARGINS; + const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS; const initialWidth = viewWidth / columns; const aspectRatioHeight = initialWidth / TILE_ASPECT_RATIO; const height = Math.floor(Math.min(aspectRatioHeight, viewHeight / visibleRows)); diff --git a/react/features/filmstrip/middleware.web.js b/react/features/filmstrip/middleware.web.js index c8be50df1..1c8525e1d 100644 --- a/react/features/filmstrip/middleware.web.js +++ b/react/features/filmstrip/middleware.web.js @@ -30,7 +30,6 @@ MiddlewareRegistry.register(store => next => action => { const { gridDimensions } = state['features/filmstrip'].tileViewDimensions; const { clientHeight, clientWidth } = state['features/base/responsive-ui']; const { isOpen } = state['features/chat']; - const { visible } = state['features/toolbox']; store.dispatch( setTileViewDimensions( @@ -39,8 +38,7 @@ MiddlewareRegistry.register(store => next => action => { clientHeight, clientWidth }, - isOpen, - visible + isOpen ) ); break; diff --git a/react/features/filmstrip/subscriber.web.js b/react/features/filmstrip/subscriber.web.js index 469b721dc..eaebbd3f1 100644 --- a/react/features/filmstrip/subscriber.web.js +++ b/react/features/filmstrip/subscriber.web.js @@ -22,7 +22,6 @@ StateListenerRegistry.register( if (!equals(gridDimensions, oldGridDimensions)) { const { clientHeight, clientWidth } = state['features/base/responsive-ui']; const { isOpen } = state['features/chat']; - const { visible } = state['features/toolbox']; store.dispatch( setTileViewDimensions( @@ -31,8 +30,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isOpen, - visible + isOpen ) ); } @@ -51,7 +49,6 @@ StateListenerRegistry.register( case LAYOUTS.TILE_VIEW: { const { clientHeight, clientWidth } = state['features/base/responsive-ui']; const { isOpen } = state['features/chat']; - const { visible } = state['features/toolbox']; store.dispatch( setTileViewDimensions( @@ -60,8 +57,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isOpen, - visible + isOpen ) ); break; @@ -114,7 +110,6 @@ StateListenerRegistry.register( if (shouldDisplayTileView(state)) { const gridDimensions = getTileViewGridDimensions(state); const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { visible } = state['features/toolbox']; store.dispatch( setTileViewDimensions( @@ -123,35 +118,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isChatOpen, - visible - ) - ); - } - }); - -/** - * 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/toolbox'].visible, - /* listener */ (visible, store) => { - const state = store.getState(); - - if (shouldDisplayTileView(state)) { - const gridDimensions = getTileViewGridDimensions(state); - const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { isOpen } = state['features/chat']; - - store.dispatch( - setTileViewDimensions( - gridDimensions, - { - clientHeight, - clientWidth - }, - isOpen, - visible + isChatOpen ) ); }