fix(connection-indicator) Fix detecting local/remote participant

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -92,11 +92,6 @@ type Props = AbstractProps & {
      */
     iconSize: number,
 
-    /**
-     * Whether or not the displays stats are for local video.
-     */
-    isLocalVideo: boolean,
-
     /**
      * Relative to the icon from where the popover for more connection details
      * should display.
@@ -149,7 +144,9 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, AbstractSta
         return (
             <Popover
                 className = { rootClassNames }
-                content = { <ConnectionIndicatorContent participantId = { this.props.participantId } /> }
+                content = { <ConnectionIndicatorContent
+                    inheritedStats = { this.state.stats }
+                    participantId = { this.props.participantId } /> }
                 disablePopover = { !this.props.enableStatsDisplay }
                 position = { this.props.statsPopoverPosition }>
                 <div className = 'popover-trigger'>

react/features/connection-indicator/components/web/ConnectionIndicatorContent.js

@@ -58,6 +58,11 @@ const QUALITY_TO_WIDTH: Array<Object> = [
  */
 type Props = AbstractProps & {
 
+    /**
+     * The audio SSRC of this client.
+     */
+     _audioSsrc: number,
+
     /**
      * The current condition of the user's connection, matching one of the
      * enumerated values in the library.
@@ -65,51 +70,51 @@ type Props = AbstractProps & {
     _connectionStatus: string,
 
     /**
-     * The audio SSRC of this client.
+     * Whether or not should display the "Show More" link in the local video
+     * stats table.
      */
-    audioSsrc: number,
+    _disableShowMoreStats: boolean,
 
     /**
-     * Css class to apply on container
+     * Whether or not should display the "Save Logs" link in the local video
+     * stats table.
      */
-    className: string,
+    _enableSaveLogs: boolean,
 
     /**
-     * The Redux dispatch function.
+     * Whether or not the displays stats are for local video.
      */
-    dispatch: Dispatch<any>,
+    _isLocalVideo: boolean,
 
     /**
-     * Whether or not should display the "Show More" link in the local video
-     * stats table.
+     * Invoked to save the conference logs.
      */
-    disableShowMoreStats: boolean,
+    _onSaveLogs: Function,
 
     /**
-     * Whether or not should display the "Save Logs" link in the local video
-     * stats table.
+     * The video SSRC of this client.
      */
-    enableSaveLogs: boolean,
+    _videoSsrc: number,
 
     /**
-     * Whether or not the displays stats are for local video.
+     * Css class to apply on container
      */
-    isLocalVideo: boolean,
+    className: string,
 
     /**
-     * Invoked to obtain translated strings.
+     * The Redux dispatch function.
      */
-    t: Function,
+    dispatch: Dispatch<any>,
 
     /**
-     * The video SSRC of this client.
+     * Optional param for passing existing connection stats on component instantiation
      */
-    videoSsrc: number,
+    inheritedStats: Object,
 
     /**
-     * Invoked to save the conference logs.
+     * Invoked to obtain translated strings.
      */
-    _onSaveLogs: Function
+    t: Function
 };
 
 /**
@@ -143,7 +148,7 @@ class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, Stat
             autoHideTimeout: undefined,
             showIndicator: false,
             showMoreStats: false,
-            stats: {}
+            stats: props.inheritedStats || {}
         };
 
         // Bind event handlers so they are only bound once for every instance.
@@ -174,17 +179,17 @@ class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, Stat
 
         return (
             <ConnectionStatsTable
-                audioSsrc = { this.props.audioSsrc }
+                audioSsrc = { this.props._audioSsrc }
                 bandwidth = { bandwidth }
                 bitrate = { bitrate }
                 bridgeCount = { bridgeCount }
                 codec = { codec }
                 connectionSummary = { this._getConnectionStatusTip() }
-                disableShowMoreStats = { this.props.disableShowMoreStats }
+                disableShowMoreStats = { this.props._disableShowMoreStats }
                 e2eRtt = { e2eRtt }
-                enableSaveLogs = { this.props.enableSaveLogs }
+                enableSaveLogs = { this.props._enableSaveLogs }
                 framerate = { framerate }
-                isLocalVideo = { this.props.isLocalVideo }
+                isLocalVideo = { this.props._isLocalVideo }
                 maxEnabledResolution = { maxEnabledResolution }
                 onSaveLogs = { this.props._onSaveLogs }
                 onShowMore = { this._onToggleShowMore }
@@ -195,7 +200,7 @@ class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, Stat
                 serverRegion = { serverRegion }
                 shouldShowMore = { this.state.showMoreStats }
                 transport = { transport }
-                videoSsrc = { this.props.videoSsrc } />
+                videoSsrc = { this.props._videoSsrc } />
         );
     }
 
@@ -303,8 +308,9 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
         = participantId ? getParticipantById(state, participantId) : getLocalParticipant(state);
     const props = {
         _connectionStatus: participant?.connectionStatus,
-        enableSaveLogs: state['features/base/config'].enableSaveLogs,
-        disableShowMoreStats: state['features/base/config'].disableShowMoreStats
+        _enableSaveLogs: state['features/base/config'].enableSaveLogs,
+        _disableShowMoreStats: state['features/base/config'].disableShowMoreStats,
+        _isLocalVideo: participant?.local
     };
 
     if (conference) {
@@ -315,8 +321,8 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
 
         return {
             ...props,
-            audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
-            videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
+            _audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
+            _videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
         };
     }
 

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

@@ -652,7 +652,7 @@ class Thumbnail extends Component<Props, State> {
         } = this.props;
         const { isHovered } = this.state;
         const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;
-        const { id, local = false, dominantSpeaker = false } = _participant;
+        const { id, dominantSpeaker = false } = _participant;
         const showDominantSpeaker = !_isDominantSpeakerDisabled && dominantSpeaker;
         let statsPopoverPosition, tooltipPosition;
 
@@ -677,7 +677,6 @@ class Thumbnail extends Component<Props, State> {
                         alwaysVisible = { showConnectionIndicator }
                         enableStatsDisplay = { true }
                         iconSize = { iconSize }
-                        isLocalVideo = { local }
                         participantId = { id }
                         statsPopoverPosition = { statsPopoverPosition } />
                 }