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:
parent
53f937ba4e
commit
b13200ac92
|
@ -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
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue