fix(video-layout): functions imports.
This commit is contained in:
parent
2e0ae75774
commit
2a5be074d0
|
@ -7,16 +7,6 @@ import {
|
||||||
getParticipantCount,
|
getParticipantCount,
|
||||||
pinParticipant
|
pinParticipant
|
||||||
} from '../base/participants';
|
} from '../base/participants';
|
||||||
import {
|
|
||||||
DEFAULT_MAX_COLUMNS,
|
|
||||||
ABSOLUTE_MAX_COLUMNS,
|
|
||||||
TILE_PORTRAIT_ASPECT_RATIO
|
|
||||||
} from '../filmstrip/constants';
|
|
||||||
import {
|
|
||||||
getNumberOfPartipantsForTileView,
|
|
||||||
getThumbnailMinHeight,
|
|
||||||
getTileDefaultAspectRatio
|
|
||||||
} from '../filmstrip/functions.web';
|
|
||||||
import { isVideoPlaying } from '../shared-video/functions';
|
import { isVideoPlaying } from '../shared-video/functions';
|
||||||
import { VIDEO_QUALITY_LEVELS } from '../video-quality/constants';
|
import { VIDEO_QUALITY_LEVELS } from '../video-quality/constants';
|
||||||
|
|
||||||
|
@ -56,78 +46,6 @@ export function getCurrentLayout(state: Object) {
|
||||||
return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
|
return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns how many columns should be displayed in tile view. The number
|
|
||||||
* returned will be between 1 and 7, inclusive.
|
|
||||||
*
|
|
||||||
* @param {Object} state - The redux store state.
|
|
||||||
* @param {Object} options - Object with custom values used to override the values that we get from redux by default.
|
|
||||||
* @param {number} options.width - Custom width to be used.
|
|
||||||
* @param {boolean} options.disableResponsiveTiles - Custom value to be used instead of config.disableResponsiveTiles.
|
|
||||||
* @param {boolean} options.disableTileEnlargement - Custom value to be used instead of config.disableTileEnlargement.
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
export function getMaxColumnCount(state, options = {}) {
|
|
||||||
if (typeof interfaceConfig === 'undefined') {
|
|
||||||
return DEFAULT_MAX_COLUMNS;
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
disableResponsiveTiles: configDisableResponsiveTiles,
|
|
||||||
disableTileEnlargement: configDisableTileEnlargement
|
|
||||||
} = state['features/base/config'];
|
|
||||||
const {
|
|
||||||
width,
|
|
||||||
disableResponsiveTiles = configDisableResponsiveTiles,
|
|
||||||
disableTileEnlargement = configDisableTileEnlargement
|
|
||||||
} = options;
|
|
||||||
const { clientWidth } = state['features/base/responsive-ui'];
|
|
||||||
const widthToUse = width || clientWidth;
|
|
||||||
const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS;
|
|
||||||
|
|
||||||
if (disableResponsiveTiles) {
|
|
||||||
return Math.min(Math.max(configuredMax || DEFAULT_MAX_COLUMNS, 1), ABSOLUTE_MAX_COLUMNS);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof interfaceConfig.TILE_VIEW_MAX_COLUMNS !== 'undefined' && interfaceConfig.TILE_VIEW_MAX_COLUMNS > 0) {
|
|
||||||
return Math.max(configuredMax, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const aspectRatio = disableTileEnlargement
|
|
||||||
? getTileDefaultAspectRatio(true, disableTileEnlargement, widthToUse)
|
|
||||||
: TILE_PORTRAIT_ASPECT_RATIO;
|
|
||||||
const minHeight = getThumbnailMinHeight(widthToUse);
|
|
||||||
const minWidth = aspectRatio * minHeight;
|
|
||||||
|
|
||||||
return Math.floor(widthToUse / minWidth);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the cell count dimensions for tile view. Tile view tries to uphold
|
|
||||||
* equal count of tiles for height and width, until maxColumn is reached in
|
|
||||||
* which rows will be added but no more columns.
|
|
||||||
*
|
|
||||||
* @param {Object} state - The redux store state.
|
|
||||||
* @param {boolean} stageFilmstrip - Whether the dimensions should be calculated for the stage filmstrip.
|
|
||||||
* @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 getNotResponsiveTileViewGridDimensions(state: Object, stageFilmstrip: boolean = false) {
|
|
||||||
const maxColumns = getMaxColumnCount(state);
|
|
||||||
const { activeParticipants } = state['features/filmstrip'];
|
|
||||||
const numberOfParticipants = stageFilmstrip ? activeParticipants.length : getNumberOfPartipantsForTileView(state);
|
|
||||||
const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
|
|
||||||
const columns = Math.min(columnsToMaintainASquare, maxColumns);
|
|
||||||
const rows = Math.ceil(numberOfParticipants / columns);
|
|
||||||
const minVisibleRows = Math.min(maxColumns, rows);
|
|
||||||
|
|
||||||
return {
|
|
||||||
columns,
|
|
||||||
minVisibleRows,
|
|
||||||
rows
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Selector for determining if the UI layout should be in tile view. Tile view
|
* Selector for determining if the UI layout should be in tile view. Tile view
|
||||||
* is determined by more than just having the tile view setting enabled, as
|
* is determined by more than just having the tile view setting enabled, as
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './functions.any';
|
|
@ -0,0 +1,86 @@
|
||||||
|
import {
|
||||||
|
DEFAULT_MAX_COLUMNS,
|
||||||
|
ABSOLUTE_MAX_COLUMNS,
|
||||||
|
TILE_PORTRAIT_ASPECT_RATIO
|
||||||
|
} from '../filmstrip/constants';
|
||||||
|
import {
|
||||||
|
getNumberOfPartipantsForTileView,
|
||||||
|
getThumbnailMinHeight,
|
||||||
|
getTileDefaultAspectRatio
|
||||||
|
} from '../filmstrip/functions';
|
||||||
|
|
||||||
|
export * from './functions.any';
|
||||||
|
|
||||||
|
declare var interfaceConfig: Object;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns how many columns should be displayed in tile view. The number
|
||||||
|
* returned will be between 1 and 7, inclusive.
|
||||||
|
*
|
||||||
|
* @param {Object} state - The redux store state.
|
||||||
|
* @param {Object} options - Object with custom values used to override the values that we get from redux by default.
|
||||||
|
* @param {number} options.width - Custom width to be used.
|
||||||
|
* @param {boolean} options.disableResponsiveTiles - Custom value to be used instead of config.disableResponsiveTiles.
|
||||||
|
* @param {boolean} options.disableTileEnlargement - Custom value to be used instead of config.disableTileEnlargement.
|
||||||
|
* @returns {number}
|
||||||
|
*/
|
||||||
|
export function getMaxColumnCount(state, options = {}) {
|
||||||
|
if (typeof interfaceConfig === 'undefined') {
|
||||||
|
return DEFAULT_MAX_COLUMNS;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
disableResponsiveTiles: configDisableResponsiveTiles,
|
||||||
|
disableTileEnlargement: configDisableTileEnlargement
|
||||||
|
} = state['features/base/config'];
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
disableResponsiveTiles = configDisableResponsiveTiles,
|
||||||
|
disableTileEnlargement = configDisableTileEnlargement
|
||||||
|
} = options;
|
||||||
|
const { clientWidth } = state['features/base/responsive-ui'];
|
||||||
|
const widthToUse = width || clientWidth;
|
||||||
|
const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS;
|
||||||
|
|
||||||
|
if (disableResponsiveTiles) {
|
||||||
|
return Math.min(Math.max(configuredMax || DEFAULT_MAX_COLUMNS, 1), ABSOLUTE_MAX_COLUMNS);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof interfaceConfig.TILE_VIEW_MAX_COLUMNS !== 'undefined' && interfaceConfig.TILE_VIEW_MAX_COLUMNS > 0) {
|
||||||
|
return Math.max(configuredMax, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const aspectRatio = disableTileEnlargement
|
||||||
|
? getTileDefaultAspectRatio(true, disableTileEnlargement, widthToUse)
|
||||||
|
: TILE_PORTRAIT_ASPECT_RATIO;
|
||||||
|
const minHeight = getThumbnailMinHeight(widthToUse);
|
||||||
|
const minWidth = aspectRatio * minHeight;
|
||||||
|
|
||||||
|
return Math.floor(widthToUse / minWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the cell count dimensions for tile view. Tile view tries to uphold
|
||||||
|
* equal count of tiles for height and width, until maxColumn is reached in
|
||||||
|
* which rows will be added but no more columns.
|
||||||
|
*
|
||||||
|
* @param {Object} state - The redux store state.
|
||||||
|
* @param {boolean} stageFilmstrip - Whether the dimensions should be calculated for the stage filmstrip.
|
||||||
|
* @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 getNotResponsiveTileViewGridDimensions(state: Object, stageFilmstrip: boolean = false) {
|
||||||
|
const maxColumns = getMaxColumnCount(state);
|
||||||
|
const { activeParticipants } = state['features/filmstrip'];
|
||||||
|
const numberOfParticipants = stageFilmstrip ? activeParticipants.length : getNumberOfPartipantsForTileView(state);
|
||||||
|
const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
|
||||||
|
const columns = Math.min(columnsToMaintainASquare, maxColumns);
|
||||||
|
const rows = Math.ceil(numberOfParticipants / columns);
|
||||||
|
const minVisibleRows = Math.min(maxColumns, rows);
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
minVisibleRows,
|
||||||
|
rows
|
||||||
|
};
|
||||||
|
}
|
Loading…
Reference in New Issue