thumbnail: don't render dominant speaker indicator on 1-1 calls

modules/UI/videolayout/SmallVideo.js

@@ -12,6 +12,7 @@ import { AudioLevelIndicator }
     from '../../../react/features/audio-level-indicator';
 import { Avatar as AvatarDisplay } from '../../../react/features/base/avatar';
 import {
+    getParticipantCount,
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
@@ -836,7 +837,9 @@ SmallVideo.prototype.updateIndicators = function() {
     const iconSize = UIUtil.getIndicatorFontSize();
     const showConnectionIndicator = this.videoIsHovered
         || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
-    const currentLayout = getCurrentLayout(APP.store.getState());
+    const state = APP.store.getState();
+    const currentLayout = getCurrentLayout(state);
+    const participantCount = getParticipantCount(state);
     let statsPopoverPosition, tooltipPosition;
 
     if (currentLayout === LAYOUTS.TILE_VIEW) {
@@ -871,7 +874,7 @@ SmallVideo.prototype.updateIndicators = function() {
                             iconSize = { iconSize }
                             participantId = { this.id }
                             tooltipPosition = { tooltipPosition } />
-                        { this._showDominantSpeaker
+                        { this._showDominantSpeaker && participantCount > 2
                             ? <DominantSpeakerIndicator
                                 iconSize = { iconSize }
                                 tooltipPosition = { tooltipPosition } />

react/features/filmstrip/components/native/Thumbnail.js

@@ -10,6 +10,7 @@ import { MEDIA_TYPE, VIDEO_TYPE, Audio } from '../../../base/media';
 import {
     PARTICIPANT_ROLE,
     ParticipantView,
+    getParticipantCount,
     isEveryoneModerator,
     pinParticipant
 } from '../../../base/participants';
@@ -59,6 +60,11 @@ type Props = {
      */
     _onShowRemoteVideoMenu: ?Function,
 
+    /**
+     * Whether to show the dominant speaker indicator or not.
+     */
+    _showDominantSpeakerIndicator: boolean,
+
     /**
      * The color-schemed stylesheet of the feature.
      */
@@ -121,6 +127,7 @@ class Thumbnail extends Component<Props> {
             _largeVideo: largeVideo,
             _onClick,
             _onShowRemoteVideoMenu,
+            _showDominantSpeakerIndicator: showDominantSpeakerIndicator,
             _styles,
             _videoTrack: videoTrack,
             disableTint,
@@ -182,8 +189,7 @@ class Thumbnail extends Component<Props> {
                         styles.thumbnailTopLeftIndicatorContainer
                     ] }>
                     <RaisedHandIndicator participantId = { participant.id } />
-                    { participant.dominantSpeaker
-                        && <DominantSpeakerIndicator /> }
+                    { showDominantSpeakerIndicator && <DominantSpeakerIndicator /> }
                 </View>
 
                 <View
@@ -255,12 +261,7 @@ function _mapDispatchToProps(dispatch: Function, ownProps): Object {
  *
  * @param {Object} state - Redux state.
  * @param {Props} ownProps - Properties of component.
- * @returns {{
- *      _audioTrack: Track,
- *      _largeVideo: Object,
- *      _styles: StyleType,
- *      _videoTrack: Track
- *  }}
+ * @returns {Object}
  */
 function _mapStateToProps(state, ownProps) {
     // We need read-only access to the state of features/large-video so that the
@@ -273,11 +274,14 @@ function _mapStateToProps(state, ownProps) {
         = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
     const videoTrack
         = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
+    const participantCount = getParticipantCount(state);
+    const showDominantSpeakerIndicator = ownProps.participant.dominantSpeaker && participantCount > 2;
 
     return {
         _audioTrack: audioTrack,
         _isEveryoneModerator: isEveryoneModerator(state),
         _largeVideo: largeVideo,
+        _showDominantSpeakerIndicator: showDominantSpeakerIndicator,
         _styles: ColorSchemeRegistry.get(state, 'Thumbnail'),
         _videoTrack: videoTrack
     };