feat: Adds reaction counts to the speakers table.

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;
+    }
 }

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 (
+            <div>
+                {count}
+            </div>
+        );
+    }
+}
+
+export default Count;
+

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<*, *> {
             <SpeakerStatsItem
                 displayName = { displayName }
                 dominantSpeakerTime = { dominantSpeakerTime }
+                poopCount = { poopCount }
+                heartCount = { heartCount }
                 hasLeft = { hasLeft }
                 isDominantSpeaker = { isDominantSpeaker }
                 key = { userId } />

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 {
                     <TimeElapsed
                         time = { this.props.dominantSpeakerTime } />
                 </div>
+                <div className = 'speaker-stats-item__poop'>
+                    <Count
+                        count = { this.props.poopCount } />
+                </div>
+                <div className = 'speaker-stats-item__heart'>
+                    <Count
+                        count = { this.props.heartCount } />
+                </div>
             </div>
         );
     }

react/features/speaker-stats/components/SpeakerStatsLabels.js

@@ -39,6 +39,12 @@ class SpeakerStatsLabels extends Component {
                 <div className = 'speaker-stats-item__time'>
                     { t('speakerStats.speakerTime') }
                 </div>
+                <div className = 'speaker-stats-item__poop'>
+                    { "💩"}
+                </div>
+                <div className = 'speaker-stats-item__heart'>
+                    { "💖"}
+                </div>
             </div>
         );
     }