From b13200ac929db28ead5268e624e43117e421dc6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 6 Mar 2020 12:43:00 +0100 Subject: [PATCH] video-layout: fix calculating tile size for recorder When the reccorder joins, they have a local participant, which is not rendered, so don't count it towards the partcipant count used for computing the tile sizes. --- react/features/filmstrip/subscriber.web.js | 4 ++-- react/features/video-layout/functions.js | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/react/features/filmstrip/subscriber.web.js b/react/features/filmstrip/subscriber.web.js index e1f198a2e..9addc0365 100644 --- a/react/features/filmstrip/subscriber.web.js +++ b/react/features/filmstrip/subscriber.web.js @@ -15,7 +15,7 @@ StateListenerRegistry.register( const state = store.getState(); if (shouldDisplayTileView(state)) { - const gridDimensions = getTileViewGridDimensions(state['features/base/participants'].length); + const gridDimensions = getTileViewGridDimensions(state); const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions; const { clientHeight, clientWidth } = state['features/base/responsive-ui']; @@ -41,7 +41,7 @@ StateListenerRegistry.register( const { clientHeight, clientWidth } = state['features/base/responsive-ui']; store.dispatch(setTileViewDimensions( - getTileViewGridDimensions(state['features/base/participants'].length), { + getTileViewGridDimensions(state), { clientHeight, clientWidth })); diff --git a/react/features/video-layout/functions.js b/react/features/video-layout/functions.js index e9cf7040f..ab8ec3625 100644 --- a/react/features/video-layout/functions.js +++ b/react/features/video-layout/functions.js @@ -39,13 +39,18 @@ export function getMaxColumnCount() { * equal count of tiles for height and width, until maxColumn is reached in * which rows will be added but no more columns. * - * @param {number} numberOfParticipants - The number of participants including the fake participants. + * @param {Object} state - The redux store state. * @param {number} maxColumns - The maximum number of columns that can be * displayed. * @returns {Object} An object is return with the desired number of columns, * rows, and visible rows (the rest should overflow) for the tile view layout. */ -export function getTileViewGridDimensions(numberOfParticipants: number, maxColumns: number = getMaxColumnCount()) { +export function getTileViewGridDimensions(state: Object, maxColumns: number = getMaxColumnCount()) { + // When in tile view mode, we must discount ourselves (the local participant) because our + // tile is not visible. + const { iAmRecorder } = state['features/base/config']; + const numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0); + const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants)); const columns = Math.min(columnsToMaintainASquare, maxColumns); const rows = Math.ceil(numberOfParticipants / columns);