12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import React, { Component } from 'react';
-
- import { translate } from '../../base/i18n';
- import {
- getHoursCount,
- getMinutesCount,
- getSecondsCount
- } from '../../base/util/timeUtils';
-
- /**
- * React component for displaying total time elapsed. Converts a total count of
- * milliseconds into a more humanized form: "# hours, # minutes, # seconds".
- * With a time of 0, "0s" will be displayed.
- *
- * @extends Component
- */
- class TimeElapsed extends Component {
- /**
- * TimeElapsed component's property types.
- *
- * @static
- */
- static propTypes = {
- /**
- * The function to translate human-readable text.
- */
- t: React.PropTypes.func,
-
- /**
- * The milliseconds to be converted into a humanized format.
- */
- time: React.PropTypes.number
- }
-
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- const hours = getHoursCount(this.props.time);
- const minutes = getMinutesCount(this.props.time);
- const seconds = getSecondsCount(this.props.time);
- const timeElapsed = [];
-
- if (hours) {
- const hourPassed = this._createTimeDisplay(hours,
- 'speakerStats.hours', 'hours');
-
- timeElapsed.push(hourPassed);
- }
-
- if (hours || minutes) {
- const minutesPassed = this._createTimeDisplay(minutes,
- 'speakerStats.minutes', 'minutes');
-
- timeElapsed.push(minutesPassed);
- }
-
- const secondsPassed = this._createTimeDisplay(seconds,
- 'speakerStats.seconds', 'seconds');
-
- timeElapsed.push(secondsPassed);
-
- return (
- <div>
- { timeElapsed }
- </div>
- );
- }
-
- /**
- * Returns a ReactElement to display the passed in count and a count noun.
- *
- * @private
- * @param {number} count - The number used for display and to check for
- * count noun plurality.
- * @param {string} countNounKey - Translation key for the time's count noun.
- * @param {string} countType - What is being counted. Used as the element's
- * key for react to iterate upon.
- * @returns {ReactElement}
- */
- _createTimeDisplay(count, countNounKey, countType) {
- const { t } = this.props;
-
- return (
- <span key = { countType } > { t(countNounKey, { count }) } </span>
- );
- }
-
- }
-
- export default translate(TimeElapsed);
|