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.

TimeElapsed.js 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import React, { Component } from 'react';
  2. import { translate } from '../../base/i18n';
  3. import {
  4. getHoursCount,
  5. getMinutesCount,
  6. getSecondsCount
  7. } from '../../base/util/timeUtils';
  8. /**
  9. * React component for displaying total time elapsed. Converts a total count of
  10. * milliseconds into a more humanized form: "# hours, # minutes, # seconds".
  11. * With a time of 0, "0s" will be displayed.
  12. *
  13. * @extends Component
  14. */
  15. class TimeElapsed extends Component {
  16. /**
  17. * TimeElapsed component's property types.
  18. *
  19. * @static
  20. */
  21. static propTypes = {
  22. /**
  23. * The function to translate human-readable text.
  24. */
  25. t: React.PropTypes.func,
  26. /**
  27. * The milliseconds to be converted into a humanized format.
  28. */
  29. time: React.PropTypes.number
  30. }
  31. /**
  32. * Implements React's {@link Component#render()}.
  33. *
  34. * @inheritdoc
  35. * @returns {ReactElement}
  36. */
  37. render() {
  38. const hours = getHoursCount(this.props.time);
  39. const minutes = getMinutesCount(this.props.time);
  40. const seconds = getSecondsCount(this.props.time);
  41. const timeElapsed = [];
  42. if (hours) {
  43. const hourPassed = this._createTimeDisplay(hours,
  44. 'speakerStats.hours', 'hours');
  45. timeElapsed.push(hourPassed);
  46. }
  47. if (hours || minutes) {
  48. const minutesPassed = this._createTimeDisplay(minutes,
  49. 'speakerStats.minutes', 'minutes');
  50. timeElapsed.push(minutesPassed);
  51. }
  52. const secondsPassed = this._createTimeDisplay(seconds,
  53. 'speakerStats.seconds', 'seconds');
  54. timeElapsed.push(secondsPassed);
  55. return (
  56. <div>
  57. { timeElapsed }
  58. </div>
  59. );
  60. }
  61. /**
  62. * Returns a ReactElement to display the passed in count and a count noun.
  63. *
  64. * @private
  65. * @param {number} count - The number used for display and to check for
  66. * count noun plurality.
  67. * @param {string} countNounKey - Translation key for the time's count noun.
  68. * @param {string} countType - What is being counted. Used as the element's
  69. * key for react to iterate upon.
  70. * @returns {ReactElement}
  71. */
  72. _createTimeDisplay(count, countNounKey, countType) {
  73. const { t } = this.props;
  74. return (
  75. <span key = { countType } > { t(countNounKey, { count }) } </span>
  76. );
  77. }
  78. }
  79. export default translate(TimeElapsed);