From 8bb5c114f855509c3474ba9b98eed065fb86316d Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Wed, 2 Mar 2022 16:46:20 +0200 Subject: [PATCH] fix(filmstrip) Fix resizable filmstrip (#11025) Re-calculate tile sizes after config loaded Make local tile always respect the ratio in interface_config Merge calculate size for vertical view functions into one function --- react/features/filmstrip/actions.web.js | 5 +-- .../filmstrip/components/web/Filmstrip.js | 3 +- react/features/filmstrip/constants.js | 5 +++ react/features/filmstrip/functions.web.js | 38 +++++-------------- react/features/filmstrip/subscriber.web.js | 9 +++++ 5 files changed, 27 insertions(+), 33 deletions(-) diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js index 4480ca53a..d4287129a 100644 --- a/react/features/filmstrip/actions.web.js +++ b/react/features/filmstrip/actions.web.js @@ -26,7 +26,6 @@ import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView, calculateThumbnailSizeForVerticalView, - calculateThumbnailSizeForResizableVerticalView, isFilmstripResizable, showGridInVerticalView } from './functions'; @@ -128,9 +127,7 @@ export function setVerticalViewDimensions() { width: widthOfFilmstrip }; } else { - thumbnails = resizableFilmstrip - ? calculateThumbnailSizeForResizableVerticalView(clientWidth, filmstripWidth.current) - : calculateThumbnailSizeForVerticalView(clientWidth); + thumbnails = calculateThumbnailSizeForVerticalView(clientWidth, filmstripWidth.current, resizableFilmstrip); } dispatch({ diff --git a/react/features/filmstrip/components/web/Filmstrip.js b/react/features/filmstrip/components/web/Filmstrip.js index b141e44e6..7a61c9df4 100644 --- a/react/features/filmstrip/components/web/Filmstrip.js +++ b/react/features/filmstrip/components/web/Filmstrip.js @@ -562,6 +562,7 @@ class Filmstrip extends PureComponent { _filmstripHeight, _filmstripWidth, _remoteParticipantsLength, + _resizableFilmstrip, _rows, _thumbnailHeight, _thumbnailWidth, @@ -599,7 +600,7 @@ class Filmstrip extends PureComponent { const props = { itemCount: _remoteParticipantsLength, - className: 'filmstrip__videos remote-videos height-transition', + className: `filmstrip__videos remote-videos ${_resizableFilmstrip ? '' : 'height-transition'}`, height: _filmstripHeight, itemKey: this._listItemKey, itemSize: 0, diff --git a/react/features/filmstrip/constants.js b/react/features/filmstrip/constants.js index fd0efdbc7..3e6a9d773 100644 --- a/react/features/filmstrip/constants.js +++ b/react/features/filmstrip/constants.js @@ -256,6 +256,11 @@ export const INDICATORS_TOOLTIP_POSITION = { */ export const DEFAULT_FILMSTRIP_WIDTH = 120; +/** + * The default aspect ratio for the local tile. + */ +export const DEFAULT_LOCAL_TILE_ASPECT_RATIO = 16 / 9; + /** * The width of the filmstrip at which it no longer goes above the stage view, but it pushes it. */ diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js index a6cf4283f..a5d2d92e0 100644 --- a/react/features/filmstrip/functions.web.js +++ b/react/features/filmstrip/functions.web.js @@ -22,6 +22,7 @@ import { getCurrentLayout, LAYOUTS } from '../video-layout'; import { ASPECT_RATIO_BREAKPOINT, DEFAULT_FILMSTRIP_WIDTH, + DEFAULT_LOCAL_TILE_ASPECT_RATIO, DISPLAY_AVATAR, DISPLAY_VIDEO, FILMSTRIP_GRID_BREAKPOINT, @@ -161,45 +162,26 @@ export function calculateThumbnailSizeForHorizontalView(clientHeight: number = 0 * Calculates the size for thumbnails when in vertical view layout. * * @param {number} clientWidth - The height of the app window. - * @returns {{local: {height, width}, remote: {height, width}}} - */ -export function calculateThumbnailSizeForVerticalView(clientWidth: number = 0) { - const availableWidth = Math.min( - Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0), - interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH); - - return { - local: { - height: Math.floor(availableWidth / interfaceConfig.LOCAL_THUMBNAIL_RATIO), - width: availableWidth - }, - remote: { - height: Math.floor(availableWidth / interfaceConfig.REMOTE_THUMBNAIL_RATIO), - width: availableWidth - } - }; -} - -/** - * Calculates the size for thumbnails when in vertical view layout - * and the filmstrip is resizable. - * - * @param {number} clientWidth - The height of the app window. * @param {number} filmstripWidth - The width of the filmstrip. + * @param {boolean} isResizable - Whether the filmstrip is resizable or not. * @returns {{local: {height, width}, remote: {height, width}}} */ -export function calculateThumbnailSizeForResizableVerticalView(clientWidth: number = 0, filmstripWidth: number = 0) { +export function calculateThumbnailSizeForVerticalView(clientWidth: number = 0, + filmstripWidth: number = 0, isResizable = false) { const availableWidth = Math.min( Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0), - filmstripWidth || DEFAULT_FILMSTRIP_WIDTH); + (isResizable ? filmstripWidth : interfaceConfig.FILM_STRIP_MAX_HEIGHT) || DEFAULT_FILMSTRIP_WIDTH); return { local: { - height: DEFAULT_FILMSTRIP_WIDTH, + height: Math.floor(availableWidth + / (interfaceConfig.LOCAL_THUMBNAIL_RATIO || DEFAULT_LOCAL_TILE_ASPECT_RATIO)), width: availableWidth }, remote: { - height: DEFAULT_FILMSTRIP_WIDTH, + height: isResizable + ? DEFAULT_FILMSTRIP_WIDTH + : Math.floor(availableWidth / interfaceConfig.REMOTE_THUMBNAIL_RATIO), width: availableWidth } }; diff --git a/react/features/filmstrip/subscriber.web.js b/react/features/filmstrip/subscriber.web.js index 1a29d6302..c3c69c538 100644 --- a/react/features/filmstrip/subscriber.web.js +++ b/react/features/filmstrip/subscriber.web.js @@ -184,3 +184,12 @@ StateListenerRegistry.register( /* listener */(_, store) => { store.dispatch(setVerticalViewDimensions()); }); + +/** + * Listens for changes in the filmstrip config to determine the size of the tiles. + */ +StateListenerRegistry.register( + /* selector */ state => state['features/base/config'].filmstrip?.disableResizable, + /* listener */(_, store) => { + store.dispatch(setVerticalViewDimensions()); + });