ref: remove connectivity issues indication for remote participants

It's been considered too disruptive and will often misfire especially
if there are issues with the data channels.

css/_videolayout_default.scss

@@ -573,11 +573,6 @@
     filter: grayscale(.5) opacity(0.8);
 }
 
-.remoteVideoProblemFilter {
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
-}
-
 .videoThumbnailProblemFilter {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);

lang/main.json

@@ -80,8 +80,7 @@
         "FETCH_SESSION_ID": "Obtaining session-id...",
         "GET_SESSION_ID_ERROR": "Get session-id error: {{code}}",
         "GOT_SESSION_ID": "Obtaining session-id... Done",
-        "LOW_BANDWIDTH": "Video for {{displayName}} has been turned off to save bandwidth",
+        "LOW_BANDWIDTH": "Video for {{displayName}} has been turned off to save bandwidth"
-        "USER_CONNECTION_INTERRUPTED": "{{displayName}} is having connectivity issues..."
     },
     "connectionindicator": {
         "address": "Address:",

modules/UI/videolayout/LargeVideoManager.js

@@ -237,17 +237,8 @@ export default class LargeVideoManager {
                 this.updateLargeVideoAudioLevel(0);
             }
 
-            const isConnectionInterrupted
+            const messageKey
-                = APP.conference.getParticipantConnectionStatus(id)
+                = connectionStatus === JitsiParticipantConnectionStatus.INACTIVE ? 'connection.LOW_BANDWIDTH' : null;
-                    === JitsiParticipantConnectionStatus.INTERRUPTED;
-            let messageKey = null;
-
-            if (isConnectionInterrupted) {
-                messageKey = 'connection.USER_CONNECTION_INTERRUPTED';
-            } else if (connectionStatus
-                    === JitsiParticipantConnectionStatus.INACTIVE) {
-                messageKey = 'connection.LOW_BANDWIDTH';
-            }
 
             // Do not show connection status message in the audio only mode,
             // because it's based on the video playback status.
@@ -255,7 +246,6 @@ export default class LargeVideoManager {
 
             this.updateParticipantConnStatusIndication(
                     id,
-                    !overrideAndHide && isConnectionInterrupted,
                     !overrideAndHide && messageKey);
 
             // Change the participant id the presence label is listening to.
@@ -281,20 +271,12 @@ export default class LargeVideoManager {
      * shown on the large video area.
      *
      * @param {string} id the id of remote participant(MUC nickname)
-     * @param {boolean} showProblemsIndication
      * @param {string|null} messageKey the i18n key of the message which will be
      * displayed on the large video or <tt>null</tt> to hide it.
      *
      * @private
      */
-    updateParticipantConnStatusIndication(
+    updateParticipantConnStatusIndication(id, messageKey) {
-            id,
-            showProblemsIndication,
-            messageKey) {
-        // Apply grey filter on the large video
-        this.videoContainer.showRemoteConnectionProblemIndicator(
-            showProblemsIndication);
-
         if (messageKey) {
             // Get user's display name
             const displayName

modules/UI/videolayout/VideoContainer.js

@@ -19,15 +19,6 @@ export const VIDEO_CONTAINER_TYPE = 'camera';
 
 const FADE_DURATION_MS = 300;
 
-/**
- * The CSS class used to add a filter effect on the large video when there is
- * a problem with remote video.
- *
- * @private
- * @type {string}
- */
-const REMOTE_PROBLEM_FILTER_CLASS = 'remoteVideoProblemFilter';
-
 /**
  * Returns an array of the video dimensions, so that it keeps it's aspect
  * ratio and fits available area with it's larger dimension. This method
@@ -555,20 +546,6 @@ export class VideoContainer extends LargeContainer {
         APP.API.notifyLargeVideoVisibilityChanged(show);
     }
 
-    /**
-     * Indicates that the remote user who is currently displayed by this video
-     * container is having connectivity issues.
-     *
-     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
-     * the indication.
-     */
-    showRemoteConnectionProblemIndicator(show) {
-        this.$video.toggleClass(REMOTE_PROBLEM_FILTER_CLASS, show);
-        this.$avatar.toggleClass(REMOTE_PROBLEM_FILTER_CLASS, show);
-        this._updateBackground();
-    }
-
-
     /**
      * We are doing fadeOut/fadeIn animations on parent div which wraps
      * largeVideo, because when Temasys plugin is in use it replaces
@@ -665,8 +642,6 @@ export class VideoContainer extends LargeContainer {
                     && this.localFlipX
                 }
                 orientationFit = { this._backgroundOrientation }
-                showRemoteProblemFilter
-                    = { this.$video.hasClass(REMOTE_PROBLEM_FILTER_CLASS) }
                 videoElement = { this.$video && this.$video[0] }
                 videoTrack = { this.stream } />,
             document.getElementById('largeVideoBackgroundContainer')

react/features/base/participants/components/ParticipantView.native.js

@@ -144,9 +144,6 @@ class ParticipantView extends Component<Props> {
         case JitsiParticipantConnectionStatus.INACTIVE:
             messageKey = 'connection.LOW_BANDWIDTH';
             break;
-        case JitsiParticipantConnectionStatus.INTERRUPTED:
-            messageKey = 'connection.USER_CONNECTION_INTERRUPTED';
-            break;
         default:
             return null;
         }

react/features/large-video/components/LargeVideoBackground.web.js

@@ -43,12 +43,6 @@ type Props = {
      */
     orientationFit: string,
 
-    /**
-     * Whether or not to display a filter on the video to visually indicate a
-     * problem with the video being displayed.
-     */
-    showRemoteProblemFilter: boolean,
-
     /**
      * The video stream to display.
      */
@@ -131,12 +125,9 @@ export class LargeVideoBackground extends Component<Props> {
     render() {
         const {
             hidden,
-            mirror,
+            mirror
-            showRemoteProblemFilter
         } = this.props;
-        const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${
+        const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${hidden ? 'invisible' : ''}`;
-            hidden ? 'invisible' : ''} ${
-            showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`;
 
         return (
             <div className = { classNames }>