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.

VideoQualityLabel.web.js 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. import Tooltip from '@atlaskit/tooltip';
  2. import PropTypes from 'prop-types';
  3. import React, { Component } from 'react';
  4. import { connect } from 'react-redux';
  5. import { translate } from '../../base/i18n';
  6. import { MEDIA_TYPE } from '../../base/media';
  7. import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
  8. /**
  9. * A map of video resolution (number) to translation key.
  10. *
  11. * @type {Object}
  12. */
  13. const RESOLUTION_TO_TRANSLATION_KEY = {
  14. 720: 'videoStatus.hd',
  15. 360: 'videoStatus.sd',
  16. 180: 'videoStatus.ld'
  17. };
  18. /**
  19. * Expected video resolutions placed into an array, sorted from lowest to
  20. * highest resolution.
  21. *
  22. * @type {number[]}
  23. */
  24. const RESOLUTIONS
  25. = Object.keys(RESOLUTION_TO_TRANSLATION_KEY)
  26. .map(resolution => parseInt(resolution, 10))
  27. .sort((a, b) => a - b);
  28. /**
  29. * React {@code Component} responsible for displaying a label that indicates
  30. * the displayed video state of the current conference. {@code AudioOnlyLabel}
  31. * will display when the conference is in audio only mode. {@code HDVideoLabel}
  32. * will display if not in audio only mode and a high-definition large video is
  33. * being displayed.
  34. */
  35. export class VideoQualityLabel extends Component {
  36. /**
  37. * {@code VideoQualityLabel}'s property types.
  38. *
  39. * @static
  40. */
  41. static propTypes = {
  42. /**
  43. * Whether or not the conference is in audio only mode.
  44. */
  45. _audioOnly: PropTypes.bool,
  46. /**
  47. * Whether or not a connection to a conference has been established.
  48. */
  49. _conferenceStarted: PropTypes.bool,
  50. /**
  51. * Whether or not the filmstrip is displayed with remote videos. Used to
  52. * determine display classes to set.
  53. */
  54. _filmstripVisible: PropTypes.bool,
  55. /**
  56. * The current video resolution (height) to display a label for.
  57. */
  58. _resolution: PropTypes.number,
  59. /**
  60. * The redux representation of the JitsiTrack displayed on large video.
  61. */
  62. _videoTrack: PropTypes.object,
  63. /**
  64. * Invoked to obtain translated strings.
  65. */
  66. t: PropTypes.func
  67. };
  68. /**
  69. * Initializes a new {@code VideoQualityLabel} instance.
  70. *
  71. * @param {Object} props - The read-only React Component props with which
  72. * the new instance is to be initialized.
  73. */
  74. constructor(props) {
  75. super(props);
  76. this.state = {
  77. /**
  78. * Whether or not the filmstrip is transitioning from not visible
  79. * to visible. Used to set a transition class for animation.
  80. *
  81. * @type {boolean}
  82. */
  83. togglingToVisible: false
  84. };
  85. }
  86. /**
  87. * Updates the state for whether or not the filmstrip is being toggled to
  88. * display after having being hidden.
  89. *
  90. * @inheritdoc
  91. * @param {Object} nextProps - The read-only props which this Component will
  92. * receive.
  93. * @returns {void}
  94. */
  95. componentWillReceiveProps(nextProps) {
  96. this.setState({
  97. togglingToVisible: nextProps._filmstripVisible
  98. && !this.props._filmstripVisible
  99. });
  100. }
  101. /**
  102. * Implements React's {@link Component#render()}.
  103. *
  104. * @inheritdoc
  105. * @returns {ReactElement}
  106. */
  107. render() {
  108. const {
  109. _audioOnly,
  110. _conferenceStarted,
  111. _filmstripVisible,
  112. _resolution,
  113. _videoTrack,
  114. t
  115. } = this.props;
  116. // FIXME The _conferenceStarted check is used to be defensive against
  117. // toggling audio only mode while there is no conference and hides the
  118. // need for error handling around audio only mode toggling.
  119. if (!_conferenceStarted) {
  120. return null;
  121. }
  122. // Determine which classes should be set on the component. These classes
  123. // will used to help with animations and setting position.
  124. const baseClasses = 'video-state-indicator moveToCorner';
  125. const filmstrip
  126. = _filmstripVisible ? 'with-filmstrip' : 'without-filmstrip';
  127. const opening = this.state.togglingToVisible ? 'opening' : '';
  128. const classNames
  129. = `${baseClasses} ${filmstrip} ${opening}`;
  130. let labelContent;
  131. let tooltipKey;
  132. if (_audioOnly) {
  133. labelContent = <i className = 'icon-visibility-off' />;
  134. tooltipKey = 'videoStatus.labelTooltipAudioOnly';
  135. } else if (!_videoTrack || _videoTrack.muted) {
  136. labelContent = <i className = 'icon-visibility-off' />;
  137. tooltipKey = 'videoStatus.labelTooiltipNoVideo';
  138. } else {
  139. const translationKeys
  140. = this._mapResolutionToTranslationsKeys(_resolution);
  141. labelContent = t(translationKeys.labelKey);
  142. tooltipKey = translationKeys.tooltipKey;
  143. }
  144. return (
  145. <div
  146. className = { classNames }
  147. id = 'videoResolutionLabel'>
  148. <Tooltip
  149. content = { t(tooltipKey) }
  150. position = { 'left' }>
  151. <div className = 'video-quality-label-status'>
  152. { labelContent }
  153. </div>
  154. </Tooltip>
  155. </div>
  156. );
  157. }
  158. /**
  159. * Matches the passed in resolution with a translation keys for describing
  160. * the resolution. The passed in resolution will be matched with a known
  161. * resolution that it is at least greater than or equal to.
  162. *
  163. * @param {number} resolution - The video height to match with a
  164. * translation.
  165. * @private
  166. * @returns {Object}
  167. */
  168. _mapResolutionToTranslationsKeys(resolution) {
  169. // Set the default matching resolution of the lowest just in case a
  170. // match is not found.
  171. let highestMatchingResolution = RESOLUTIONS[0];
  172. for (let i = 0; i < RESOLUTIONS.length; i++) {
  173. const knownResolution = RESOLUTIONS[i];
  174. if (resolution >= knownResolution) {
  175. highestMatchingResolution = knownResolution;
  176. } else {
  177. break;
  178. }
  179. }
  180. const labelKey
  181. = RESOLUTION_TO_TRANSLATION_KEY[highestMatchingResolution];
  182. return {
  183. labelKey,
  184. tooltipKey: `${labelKey}Tooltip`
  185. };
  186. }
  187. }
  188. /**
  189. * Maps (parts of) the Redux state to the associated {@code VideoQualityLabel}'s
  190. * props.
  191. *
  192. * @param {Object} state - The Redux state.
  193. * @private
  194. * @returns {{
  195. * _audioOnly: boolean,
  196. * _conferenceStarted: boolean,
  197. * _filmstripVisible: true,
  198. * _resolution: number,
  199. * _videoTrack: Object
  200. * }}
  201. */
  202. function _mapStateToProps(state) {
  203. const { audioOnly, conference } = state['features/base/conference'];
  204. const { visible } = state['features/filmstrip'];
  205. const { resolution, participantId } = state['features/large-video'];
  206. const videoTrackOnLargeVideo = getTrackByMediaTypeAndParticipant(
  207. state['features/base/tracks'],
  208. MEDIA_TYPE.VIDEO,
  209. participantId
  210. );
  211. return {
  212. _audioOnly: audioOnly,
  213. _conferenceStarted: Boolean(conference),
  214. _filmstripVisible: visible,
  215. _resolution: resolution,
  216. _videoTrack: videoTrackOnLargeVideo
  217. };
  218. }
  219. export default translate(connect(_mapStateToProps)(VideoQualityLabel));