|
@@ -7,16 +7,6 @@ import {
|
7
|
7
|
getParticipantCount,
|
8
|
8
|
pinParticipant
|
9
|
9
|
} from '../base/participants';
|
10
|
|
-import {
|
11
|
|
- DEFAULT_MAX_COLUMNS,
|
12
|
|
- ABSOLUTE_MAX_COLUMNS,
|
13
|
|
- TILE_PORTRAIT_ASPECT_RATIO
|
14
|
|
-} from '../filmstrip/constants';
|
15
|
|
-import {
|
16
|
|
- getNumberOfPartipantsForTileView,
|
17
|
|
- getThumbnailMinHeight,
|
18
|
|
- getTileDefaultAspectRatio
|
19
|
|
-} from '../filmstrip/functions.web';
|
20
|
10
|
import { isVideoPlaying } from '../shared-video/functions';
|
21
|
11
|
import { VIDEO_QUALITY_LEVELS } from '../video-quality/constants';
|
22
|
12
|
|
|
@@ -56,78 +46,6 @@ export function getCurrentLayout(state: Object) {
|
56
|
46
|
return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
|
57
|
47
|
}
|
58
|
48
|
|
59
|
|
-/**
|
60
|
|
- * Returns how many columns should be displayed in tile view. The number
|
61
|
|
- * returned will be between 1 and 7, inclusive.
|
62
|
|
- *
|
63
|
|
- * @param {Object} state - The redux store state.
|
64
|
|
- * @param {Object} options - Object with custom values used to override the values that we get from redux by default.
|
65
|
|
- * @param {number} options.width - Custom width to be used.
|
66
|
|
- * @param {boolean} options.disableResponsiveTiles - Custom value to be used instead of config.disableResponsiveTiles.
|
67
|
|
- * @param {boolean} options.disableTileEnlargement - Custom value to be used instead of config.disableTileEnlargement.
|
68
|
|
- * @returns {number}
|
69
|
|
- */
|
70
|
|
-export function getMaxColumnCount(state, options = {}) {
|
71
|
|
- if (typeof interfaceConfig === 'undefined') {
|
72
|
|
- return DEFAULT_MAX_COLUMNS;
|
73
|
|
- }
|
74
|
|
-
|
75
|
|
- const {
|
76
|
|
- disableResponsiveTiles: configDisableResponsiveTiles,
|
77
|
|
- disableTileEnlargement: configDisableTileEnlargement
|
78
|
|
- } = state['features/base/config'];
|
79
|
|
- const {
|
80
|
|
- width,
|
81
|
|
- disableResponsiveTiles = configDisableResponsiveTiles,
|
82
|
|
- disableTileEnlargement = configDisableTileEnlargement
|
83
|
|
- } = options;
|
84
|
|
- const { clientWidth } = state['features/base/responsive-ui'];
|
85
|
|
- const widthToUse = width || clientWidth;
|
86
|
|
- const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS;
|
87
|
|
-
|
88
|
|
- if (disableResponsiveTiles) {
|
89
|
|
- return Math.min(Math.max(configuredMax || DEFAULT_MAX_COLUMNS, 1), ABSOLUTE_MAX_COLUMNS);
|
90
|
|
- }
|
91
|
|
-
|
92
|
|
- if (typeof interfaceConfig.TILE_VIEW_MAX_COLUMNS !== 'undefined' && interfaceConfig.TILE_VIEW_MAX_COLUMNS > 0) {
|
93
|
|
- return Math.max(configuredMax, 1);
|
94
|
|
- }
|
95
|
|
-
|
96
|
|
- const aspectRatio = disableTileEnlargement
|
97
|
|
- ? getTileDefaultAspectRatio(true, disableTileEnlargement, widthToUse)
|
98
|
|
- : TILE_PORTRAIT_ASPECT_RATIO;
|
99
|
|
- const minHeight = getThumbnailMinHeight(widthToUse);
|
100
|
|
- const minWidth = aspectRatio * minHeight;
|
101
|
|
-
|
102
|
|
- return Math.floor(widthToUse / minWidth);
|
103
|
|
-}
|
104
|
|
-
|
105
|
|
-/**
|
106
|
|
- * Returns the cell count dimensions for tile view. Tile view tries to uphold
|
107
|
|
- * equal count of tiles for height and width, until maxColumn is reached in
|
108
|
|
- * which rows will be added but no more columns.
|
109
|
|
- *
|
110
|
|
- * @param {Object} state - The redux store state.
|
111
|
|
- * @param {boolean} stageFilmstrip - Whether the dimensions should be calculated for the stage filmstrip.
|
112
|
|
- * @returns {Object} An object is return with the desired number of columns,
|
113
|
|
- * rows, and visible rows (the rest should overflow) for the tile view layout.
|
114
|
|
- */
|
115
|
|
-export function getNotResponsiveTileViewGridDimensions(state: Object, stageFilmstrip: boolean = false) {
|
116
|
|
- const maxColumns = getMaxColumnCount(state);
|
117
|
|
- const { activeParticipants } = state['features/filmstrip'];
|
118
|
|
- const numberOfParticipants = stageFilmstrip ? activeParticipants.length : getNumberOfPartipantsForTileView(state);
|
119
|
|
- const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
|
120
|
|
- const columns = Math.min(columnsToMaintainASquare, maxColumns);
|
121
|
|
- const rows = Math.ceil(numberOfParticipants / columns);
|
122
|
|
- const minVisibleRows = Math.min(maxColumns, rows);
|
123
|
|
-
|
124
|
|
- return {
|
125
|
|
- columns,
|
126
|
|
- minVisibleRows,
|
127
|
|
- rows
|
128
|
|
- };
|
129
|
|
-}
|
130
|
|
-
|
131
|
49
|
/**
|
132
|
50
|
* Selector for determining if the UI layout should be in tile view. Tile view
|
133
|
51
|
* is determined by more than just having the tile view setting enabled, as
|