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.
This commit is contained in:
Saúl Ibarra Corretgé 2020-03-06 12:43:00 +01:00 committed by Saúl Ibarra Corretgé
parent 53f937ba4e
commit b13200ac92
2 changed files with 9 additions and 4 deletions

View File

@ -15,7 +15,7 @@ StateListenerRegistry.register(
const state = store.getState(); const state = store.getState();
if (shouldDisplayTileView(state)) { if (shouldDisplayTileView(state)) {
const gridDimensions = getTileViewGridDimensions(state['features/base/participants'].length); const gridDimensions = getTileViewGridDimensions(state);
const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions; const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions;
const { clientHeight, clientWidth } = state['features/base/responsive-ui']; const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
@ -41,7 +41,7 @@ StateListenerRegistry.register(
const { clientHeight, clientWidth } = state['features/base/responsive-ui']; const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
store.dispatch(setTileViewDimensions( store.dispatch(setTileViewDimensions(
getTileViewGridDimensions(state['features/base/participants'].length), { getTileViewGridDimensions(state), {
clientHeight, clientHeight,
clientWidth clientWidth
})); }));

View File

@ -39,13 +39,18 @@ export function getMaxColumnCount() {
* equal count of tiles for height and width, until maxColumn is reached in * equal count of tiles for height and width, until maxColumn is reached in
* which rows will be added but no more columns. * 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 * @param {number} maxColumns - The maximum number of columns that can be
* displayed. * displayed.
* @returns {Object} An object is return with the desired number of columns, * @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. * 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 columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
const columns = Math.min(columnsToMaintainASquare, maxColumns); const columns = Math.min(columnsToMaintainASquare, maxColumns);
const rows = Math.ceil(numberOfParticipants / columns); const rows = Math.ceil(numberOfParticipants / columns);