diff --git a/css/modals/speaker_stats/_speaker_stats.scss b/css/modals/speaker_stats/_speaker_stats.scss index ab493b832..4d0e6baeb 100644 --- a/css/modals/speaker_stats/_speaker_stats.scss +++ b/css/modals/speaker_stats/_speaker_stats.scss @@ -32,14 +32,30 @@ margin: 5px 0; vertical-align: middle; } + .speaker-stats-item__poop { + display: inline-block; + margin: 5px 0; + vertical-align: middle; + } + .speaker-stats-item__heart { + display: inline-block; + margin: 5px 0; + vertical-align: middle; + } .speaker-stats-item__status { width: 5%; } .speaker-stats-item__name { - width: 40%; + width: 30%; } .speaker-stats-item__time { - width: 55%; + width: 35%; + } + .speaker-stats-item__poop { + width: 15%; + } + .speaker-stats-item__heart { + width: 15%; } .speaker-stats-item:nth-child(even) { @@ -52,4 +68,14 @@ text-overflow: ellipsis; white-space: nowrap; } + .speaker-stats-item__poop { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .speaker-stats-item__heart { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } diff --git a/react/features/speaker-stats/components/Count.js b/react/features/speaker-stats/components/Count.js new file mode 100644 index 000000000..19e4a6b62 --- /dev/null +++ b/react/features/speaker-stats/components/Count.js @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + + +/** + * React component for displaying a count. For example a number of poops. + * + * @extends Component + */ +class Count extends Component { + /** + * TimeElapsed component's property types. + * + * @static + */ + static propTypes = { + /** + * Count + */ + count: PropTypes.number + }; + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const {count} = this.props; + + return ( +
+ {count} +
+ ); + } +} + +export default Count; + diff --git a/react/features/speaker-stats/components/SpeakerStats.js b/react/features/speaker-stats/components/SpeakerStats.js index 30e82f21b..a9fdae61a 100644 --- a/react/features/speaker-stats/components/SpeakerStats.js +++ b/react/features/speaker-stats/components/SpeakerStats.js @@ -13,6 +13,7 @@ import SpeakerStatsLabels from './SpeakerStatsLabels'; declare var interfaceConfig: Object; /** + * * React component for displaying a list of speaker stats. * * @extends Component @@ -122,6 +123,8 @@ class SpeakerStats extends Component<*, *> { const isDominantSpeaker = statsModel.isDominantSpeaker(); const dominantSpeakerTime = statsModel.getTotalDominantSpeakerTime(); + const poopCount = statsModel.getPoopCount(); + const heartCount = statsModel.getHeartCount(); const hasLeft = statsModel.hasLeft(); let displayName; @@ -143,6 +146,8 @@ class SpeakerStats extends Component<*, *> { diff --git a/react/features/speaker-stats/components/SpeakerStatsItem.js b/react/features/speaker-stats/components/SpeakerStatsItem.js index 5f94ab87f..becb88fba 100644 --- a/react/features/speaker-stats/components/SpeakerStatsItem.js +++ b/react/features/speaker-stats/components/SpeakerStatsItem.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import TimeElapsed from './TimeElapsed'; +import Count from './Count'; /** * React component for display an individual user's speaker stats. @@ -25,6 +26,9 @@ class SpeakerStatsItem extends Component { */ dominantSpeakerTime: PropTypes.number, + poopCount: PropTypes.number, + heartCount: PropTypes.number, + /** * True if the participant is no longer in the meeting. */ @@ -62,6 +66,14 @@ class SpeakerStatsItem extends Component { +
+ +
+
+ +
); } diff --git a/react/features/speaker-stats/components/SpeakerStatsLabels.js b/react/features/speaker-stats/components/SpeakerStatsLabels.js index b63b123c5..170a6d70a 100644 --- a/react/features/speaker-stats/components/SpeakerStatsLabels.js +++ b/react/features/speaker-stats/components/SpeakerStatsLabels.js @@ -39,6 +39,12 @@ class SpeakerStatsLabels extends Component {
{ t('speakerStats.speakerTime') }
+
+ { "💩"} +
+
+ { "💖"} +
); }