您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

functions.js 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. // @flow
  2. import { LAYOUTS } from './constants';
  3. import { getPinnedParticipant } from '../base/participants';
  4. import { TILE_ASPECT_RATIO } from '../filmstrip/constants';
  5. declare var interfaceConfig: Object;
  6. /**
  7. * Returns the {@code LAYOUTS} constant associated with the layout
  8. * the application should currently be in.
  9. *
  10. * @param {Object} state - The redux state.
  11. * @returns {string}
  12. */
  13. export function getCurrentLayout(state: Object) {
  14. if (shouldDisplayTileView(state)) {
  15. return LAYOUTS.TILE_VIEW;
  16. } else if (interfaceConfig.VERTICAL_FILMSTRIP) {
  17. return LAYOUTS.VERTICAL_FILMSTRIP_VIEW;
  18. }
  19. return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
  20. }
  21. /**
  22. * Returns how many columns should be displayed in tile view. The number
  23. * returned will be between 1 and 5, inclusive.
  24. *
  25. * @returns {number}
  26. */
  27. export function getMaxColumnCount() {
  28. const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || 5;
  29. return Math.min(Math.max(configuredMax, 1), 5);
  30. }
  31. /**
  32. * Returns the cell count dimensions for tile view. Tile view tries to fill
  33. * the available space optimally.
  34. *
  35. * @param {Object} state - The redux store state.
  36. * @returns {Object} An object is return with the desired number of columns,
  37. * rows, and visible rows (the rest should overflow) for the tile view layout.
  38. */
  39. export function getTileViewGridDimensions_setpill(state: Object) {
  40. // When in tile view mode, we must discount ourselves (the local participant) because our
  41. // tile is not visible.
  42. const { iAmRecorder } = state['features/base/config'];
  43. var numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
  44. if (window.glob_dev_fns && window.glob_dev_fns.getTileViewGridDimensions_set_num){
  45. const numberOfParticipants_dev = window.glob_dev_fns.getTileViewGridDimensions_set_num(state)
  46. if (typeof(numberOfParticipants_dev)=="number"){numberOfParticipants = numberOfParticipants_dev}
  47. }
  48. const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
  49. // const aspectRatio = state['features/filmstrip'].TILE_ASPECT_RATIO;
  50. const aspectRatio = 16/9;
  51. let bestColumns = 0;
  52. let bestRows = 1;
  53. let bestTileWidth = 0;
  54. let bestFound = false;
  55. while (!bestFound) {
  56. const columns = bestColumns + 1;
  57. const straightTileWidth = Math.floor(clientWidth / columns);
  58. const rows = Math.ceil(numberOfParticipants / columns);
  59. const straightTileHeight = Math.floor(clientHeight / rows);
  60. const constrainedTileWidth = Math.ceil(straightTileHeight * aspectRatio);
  61. const tileWidth = Math.min(straightTileWidth, constrainedTileWidth);
  62. if (tileWidth > bestTileWidth) {
  63. bestColumns = columns;
  64. bestRows = rows;
  65. bestTileWidth = tileWidth;
  66. } else {
  67. bestFound = true;
  68. }
  69. }
  70. console.log("pull_req setpill",{aspectRatio,numberOfParticipants,bestColumns,bestRows})
  71. return {
  72. columns: bestColumns,
  73. visibleRows: bestRows
  74. };
  75. }
  76. /**
  77. * Returns the cell count dimensions for tile view. Tile view tries to
  78. * maximize the size of the tiles, until maxColumn is reached in
  79. * which rows will be added but no more columns.
  80. *
  81. * @param {Object} state - The redux store state.
  82. * @param {number} maxColumns - The maximum number of columns that can be
  83. * displayed.
  84. * @returns {Object} An object is return with the desired number of columns,
  85. * rows, and visible rows (the rest might overflow) for the tile view layout.
  86. */
  87. export function getTileViewGridDimensions(state: Object, maxColumns: number = getMaxColumnCount()) {
  88. // When in tile view mode, we must discount ourselves (the local participant) because our
  89. // tile is not visible.
  90. const { iAmRecorder } = state['features/base/config'];
  91. var numberOfParticipants0 = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
  92. var numberOfParticipants = state['features/base/participants'].length - (iAmRecorder ? 1 : 0);
  93. if (window.glob_dev_fns && window.glob_dev_fns.getTileViewGridDimensions_set_num){
  94. const numberOfParticipants_dev = window.glob_dev_fns.getTileViewGridDimensions_set_num(state)
  95. if (typeof(numberOfParticipants_dev)=="number"){numberOfParticipants = numberOfParticipants_dev}
  96. }
  97. const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
  98. // calculate available width and height for tile view.
  99. // copied from calculateThumbnailSizeForTileView (one variable was dropped)
  100. const topBottomPadding = 200;
  101. const sideMargins = 30 * 2;
  102. const viewWidth = clientWidth - sideMargins;
  103. const viewHeight = clientHeight - topBottomPadding;
  104. const viewAspectRatio = viewWidth / viewHeight;
  105. const ratioOfRatios = TILE_ASPECT_RATIO / viewAspectRatio;
  106. const tileGrid = calcTileGrid(ratioOfRatios, numberOfParticipants);
  107. let { columns } = tileGrid;
  108. const { rows, availableTiles } = tileGrid;
  109. // maybe remove a column, for aesthetics.
  110. if (rows <= availableTiles - numberOfParticipants) {
  111. columns -= 1;
  112. }
  113. const columnsOverflowed = columns > maxColumns;
  114. columns = Math.min(columns, maxColumns);
  115. let visibleRows = Math.ceil(numberOfParticipants / columns);
  116. if (columnsOverflowed) {
  117. visibleRows = Math.min(visibleRows, maxColumns);
  118. }
  119. console.log("pull_req jfinn",{TILE_ASPECT_RATIO,tileGrid,numberOfParticipants0,numberOfParticipants,columns,visibleRows})
  120. return {
  121. columns,
  122. visibleRows
  123. };
  124. }
  125. /**
  126. * Returns an efficient grid for tiling rectangles of the same size and aspect ratio in a rectangular container.
  127. *
  128. * @param {number} ratio - Ratio of the tile's aspect-ratio / the container's aspect-ratio
  129. * @param {number} tilesParam - the number of tiles to calculate the grid for
  130. * @returns {Object} An object containing the number of rows, columns, rows * columns , and tiles
  131. */
  132. export function calcTileGrid(ratio: number, tilesParam: number) {
  133. let rows = 1;
  134. let columns = 1;
  135. let availableTiles = 1;
  136. let tiles = tilesParam;
  137. // Someone could give you ratio = 0 and/or tiles = Infinity
  138. if (tiles > 65536) {
  139. tiles = 1;
  140. }
  141. while (availableTiles < tiles) {
  142. if ((columns + 1) * ratio < rows + 1) {
  143. columns++;
  144. } else {
  145. rows++;
  146. }
  147. availableTiles = rows * columns;
  148. }
  149. return {
  150. rows,
  151. columns,
  152. availableTiles,
  153. tiles
  154. };
  155. }
  156. /**
  157. * Selector for determining if the UI layout should be in tile view. Tile view
  158. * is determined by more than just having the tile view setting enabled, as
  159. * one-on-one calls should not be in tile view, as well as etherpad editing.
  160. *
  161. * @param {Object} state - The redux state.
  162. * @returns {boolean} True if tile view should be displayed.
  163. */
  164. export function shouldDisplayTileView(state: Object = {}) {
  165. return Boolean(
  166. state['features/video-layout']
  167. && state['features/video-layout'].tileViewEnabled
  168. && (!state['features/etherpad']
  169. || !state['features/etherpad'].editing)
  170. // Truthy check is needed for interfaceConfig to prevent errors on
  171. // mobile which does not have interfaceConfig. On web, tile view
  172. // should never be enabled for filmstrip only mode.
  173. && (typeof interfaceConfig === 'undefined'
  174. || !interfaceConfig.filmStripOnly)
  175. && !getPinnedParticipant(state)
  176. );
  177. }