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.

functions.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. // @flow
  2. import { findIndex } from 'lodash';
  3. import { CONNECTION_TYPE } from './constants';
  4. declare var interfaceConfig: Object;
  5. const LOSS_AUDIO_THRESHOLDS = [ 0.33, 0.05 ];
  6. const LOSS_VIDEO_THRESHOLDS = [ 0.33, 0.1, 0.05 ];
  7. const THROUGHPUT_AUDIO_THRESHOLDS = [ 8, 20 ];
  8. const THROUGHPUT_VIDEO_THRESHOLDS = [ 60, 750 ];
  9. /**
  10. * The avatar size to container size ration.
  11. */
  12. const ratio = 1 / 3;
  13. /**
  14. * The max avatar size.
  15. */
  16. const maxSize = 190;
  17. /**
  18. * The window limit height over which the avatar should have the default dimension.
  19. */
  20. const upperHeightLimit = 760;
  21. /**
  22. * The window limit height under which the avatar should not be resized anymore.
  23. */
  24. const lowerHeightLimit = 460;
  25. /**
  26. * The default top margin of the avatar.
  27. */
  28. const defaultMarginTop = '10%';
  29. /**
  30. * The top margin of the avatar when its dimension is small.
  31. */
  32. const smallMarginTop = '5%';
  33. /**
  34. * Calculates avatar dimensions based on window height and position.
  35. *
  36. * @param {number} height - The window height.
  37. * @returns {{
  38. * marginTop: string,
  39. * size: number
  40. * }}
  41. */
  42. export function calculateAvatarDimensions(height: number) {
  43. if (height > upperHeightLimit) {
  44. return {
  45. size: maxSize,
  46. marginTop: defaultMarginTop
  47. };
  48. }
  49. if (height > lowerHeightLimit) {
  50. const diff = height - lowerHeightLimit;
  51. const percent = diff * ratio;
  52. const size = Math.floor(maxSize * percent / 100);
  53. let marginTop = defaultMarginTop;
  54. if (height < 600) {
  55. marginTop = smallMarginTop;
  56. }
  57. return {
  58. size,
  59. marginTop
  60. };
  61. }
  62. return {
  63. size: 0,
  64. marginTop: '0'
  65. };
  66. }
  67. /**
  68. * Returns the level based on a list of thresholds.
  69. *
  70. * @param {number[]} thresholds - The thresholds array.
  71. * @param {number} value - The value against which the level is calculated.
  72. * @param {boolean} descending - The order based on which the level is calculated.
  73. *
  74. * @returns {number}
  75. */
  76. function _getLevel(thresholds, value, descending = true) {
  77. let predicate;
  78. if (descending) {
  79. predicate = function(threshold) {
  80. return value > threshold;
  81. };
  82. } else {
  83. predicate = function(threshold) {
  84. return value < threshold;
  85. };
  86. }
  87. const i = findIndex(thresholds, predicate);
  88. if (i === -1) {
  89. return thresholds.length;
  90. }
  91. return i;
  92. }
  93. /**
  94. * Returns the connection details from the test results.
  95. *
  96. * @param {{
  97. * fractionalLoss: number,
  98. * throughput: number
  99. * }} testResults - The state of the app.
  100. *
  101. * @returns {{
  102. * connectionType: string,
  103. * connectionDetails: string[]
  104. * }}
  105. */
  106. function _getConnectionDataFromTestResults({ fractionalLoss: l, throughput: t }) {
  107. const loss = {
  108. audioQuality: _getLevel(LOSS_AUDIO_THRESHOLDS, l),
  109. videoQuality: _getLevel(LOSS_VIDEO_THRESHOLDS, l)
  110. };
  111. const throughput = {
  112. audioQuality: _getLevel(THROUGHPUT_AUDIO_THRESHOLDS, t, false),
  113. videoQuality: _getLevel(THROUGHPUT_VIDEO_THRESHOLDS, t, false)
  114. };
  115. let connectionType = CONNECTION_TYPE.NONE;
  116. const connectionDetails = [];
  117. if (throughput.audioQuality === 0 || loss.audioQuality === 0) {
  118. // Calls are impossible.
  119. connectionType = CONNECTION_TYPE.POOR;
  120. connectionDetails.push('prejoin.connectionDetails.veryPoorConnection');
  121. } else if (
  122. throughput.audioQuality === 2
  123. && throughput.videoQuality === 2
  124. && loss.audioQuality === 2
  125. && loss.videoQuality === 3
  126. ) {
  127. // Ideal conditions for both audio and video. Show only one message.
  128. connectionType = CONNECTION_TYPE.GOOD;
  129. connectionDetails.push('prejoin.connectionDetails.goodQuality');
  130. } else {
  131. connectionType = CONNECTION_TYPE.NON_OPTIMAL;
  132. if (throughput.audioQuality === 1) {
  133. // Minimum requirements for a call are met.
  134. connectionDetails.push('prejoin.connectionDetails.audioLowNoVideo');
  135. } else {
  136. // There are two paragraphs: one saying something about audio and the other about video.
  137. if (loss.audioQuality === 1) {
  138. connectionDetails.push('prejoin.connectionDetails.audioClipping');
  139. } else {
  140. connectionDetails.push('prejoin.connectionDetails.audioHighQuality');
  141. }
  142. if (throughput.videoQuality === 0 || loss.videoQuality === 0) {
  143. connectionDetails.push('prejoin.connectionDetails.noVideo');
  144. } else if (throughput.videoQuality === 1) {
  145. connectionDetails.push('prejoin.connectionDetails.videoLowQuality');
  146. } else if (loss.videoQuality === 1) {
  147. connectionDetails.push('prejoin.connectionDetails.videoFreezing');
  148. } else if (loss.videoQuality === 2) {
  149. connectionDetails.push('prejoin.connectionDetails.videoTearing');
  150. } else {
  151. connectionDetails.push('prejoin.connectionDetails.videoHighQuality');
  152. }
  153. }
  154. connectionDetails.push('prejoin.connectionDetails.undetectable');
  155. }
  156. return {
  157. connectionType,
  158. connectionDetails
  159. };
  160. }
  161. /**
  162. * Selector for determining the connection type & details.
  163. *
  164. * @param {Object} state - The state of the app.
  165. * @returns {{
  166. * connectionType: string,
  167. * connectionDetails: string[]
  168. * }}
  169. */
  170. export function getConnectionData(state: Object) {
  171. const { precallTestResults } = state['features/prejoin'];
  172. if (precallTestResults) {
  173. if (precallTestResults.mediaConnectivity) {
  174. return _getConnectionDataFromTestResults(precallTestResults);
  175. }
  176. return {
  177. connectionType: CONNECTION_TYPE.POOR,
  178. connectionDetails: [ 'prejoin.connectionDetails.noMediaConnectivity' ]
  179. };
  180. }
  181. return {
  182. connectionType: CONNECTION_TYPE.NONE,
  183. connectionDetails: []
  184. };
  185. }
  186. /**
  187. * Returns if url sharing is enabled in interface configuration.
  188. *
  189. * @returns {boolean}
  190. */
  191. export function allowUrlSharing() {
  192. return typeof interfaceConfig === 'undefined'
  193. || typeof interfaceConfig.SHARING_FEATURES === 'undefined'
  194. || (interfaceConfig.SHARING_FEATURES.length && interfaceConfig.SHARING_FEATURES.indexOf('url') > -1);
  195. }