You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

actions.native.js 1.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // @flow
  2. import { getParticipantCountWithFake } from '../base/participants';
  3. import { SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
  4. import { SQUARE_TILE_ASPECT_RATIO, TILE_MARGIN } from './constants';
  5. import { getColumnCount } from './functions.native';
  6. export * from './actions.any';
  7. /**
  8. * Sets the dimensions of the tile view grid. The action is only partially implemented on native as not all
  9. * of the values are currently used. Check the description of {@link SET_TILE_VIEW_DIMENSIONS} for the full set
  10. * of properties.
  11. *
  12. * @returns {Function}
  13. */
  14. export function setTileViewDimensions() {
  15. return (dispatch: Function, getState: Function) => {
  16. const state = getState();
  17. const participantCount = getParticipantCountWithFake(state);
  18. const { clientHeight: height, clientWidth: width } = state['features/base/responsive-ui'];
  19. const columns = getColumnCount(state);
  20. const heightToUse = height - (TILE_MARGIN * 2);
  21. const widthToUse = width - (TILE_MARGIN * 2);
  22. let tileWidth;
  23. // If there is going to be at least two rows, ensure that at least two
  24. // rows display fully on screen.
  25. if (participantCount / columns > 1) {
  26. tileWidth = Math.min(widthToUse / columns, heightToUse / 2);
  27. } else {
  28. tileWidth = Math.min(widthToUse / columns, heightToUse);
  29. }
  30. const tileHeight = Math.floor(tileWidth / SQUARE_TILE_ASPECT_RATIO);
  31. tileWidth = Math.floor(tileWidth);
  32. dispatch({
  33. type: SET_TILE_VIEW_DIMENSIONS,
  34. dimensions: {
  35. columns,
  36. thumbnailSize: {
  37. height: tileHeight,
  38. width: tileWidth
  39. }
  40. }
  41. });
  42. };
  43. }