Remove UI for local connectivity issues (#5016)

* ref(web): removes video blur when ICE is disconnected.

Removes the blur effect from the large video and stops showing
the network connectivity issues message when ICE disconnects.

The feature has been considered too disruptive and there's a plan to
have it replaced with a more subtle indication.

* remove RECONNECTING key from main.json

css/_videolayout_default.scss

     filter: grayscale(100%);
 }
 
-.videoProblemFilter {
-    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
-    filter: blur(10px) grayscale(.5) opacity(0.8);
-}
-
 .videoThumbnailProblemFilter {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     display: none;
 }
 
-#localConnectionMessage {
-    display: none;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    top:50%;
-    z-index: $zindex2;
-    font-weight: 600;
-    font-size: 14px;
-    text-align: center;
-    color: #FFF;
-    opacity: .80;
-    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
-                    0px 1px 1px rgba(0,0,0,0.3),
-                    1px 0px 1px rgba(0,0,0,0.3),
-                    0px 0px 1px rgba(0,0,0,0.3);
-}
-
 .display-avatar-with-name {
     .avatar-container {
         visibility: visible;

css/filmstrip/_tile_view_overrides.scss

         display: none;
     }
 
-    #localConnectionMessage,
     #remoteConnectionMessage,
     .watermark {
         z-index: $filmstripVideosZ + 1;

lang/main.json

         "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",
-        "RECONNECTING": "A network problem occurred. Reconnecting...",
         "USER_CONNECTION_INTERRUPTED": "{{displayName}} is having connectivity issues..."
     },
     "connectionindicator": {

modules/UI/videolayout/LargeVideoManager.js

         container.onHoverOut(e);
     }
 
-    /**
-     * Called when the media connection has been interrupted.
-     */
-    onVideoInterrupted() {
-        this.enableLocalConnectionProblemFilter(true);
-        this._setLocalConnectionMessage('connection.RECONNECTING');
-
-        // Show the message only if the video is currently being displayed
-        this.showLocalConnectionMessage(
-            LargeVideoManager.isVideoContainer(this.state));
-    }
-
-    /**
-     * Called when the media connection has been restored.
-     */
-    onVideoRestored() {
-        this.enableLocalConnectionProblemFilter(false);
-        this.showLocalConnectionMessage(false);
-    }
-
     /**
      *
      */
                 messageKey = 'connection.LOW_BANDWIDTH';
             }
 
-            // Make sure no notification about remote failure is shown as
-            // its UI conflicts with the one for local connection interrupted.
-            // For the purposes of UI indicators, audio only is considered as
-            // an "active" connection.
-            const overrideAndHide
-                = APP.conference.isAudioOnly()
-                    || APP.conference.isConnectionInterrupted();
+            // Do not show connection status message in the audio only mode,
+            // because it's based on the video playback status.
+            const overrideAndHide = APP.conference.isAudioOnly();
 
             this.updateParticipantConnStatusIndication(
                     id,
             .forEach(type => this.resizeContainer(type, animate));
     }
 
-    /**
-     * Enables/disables the filter indicating a video problem to the user caused
-     * by the problems with local media connection.
-     *
-     * @param enable <tt>true</tt> to enable, <tt>false</tt> to disable
-     */
-    enableLocalConnectionProblemFilter(enable) {
-        this.videoContainer.enableLocalConnectionProblemFilter(enable);
-    }
-
     /**
      * Updates the src of the dominant speaker avatar
      */
         $('.watermark').css('visibility', show ? 'visible' : 'hidden');
     }
 
-    /**
-     * Shows/hides the message indicating problems with local media connection.
-     * @param {boolean|null} show(optional) tells whether the message is to be
-     * displayed or not. If missing the condition will be based on the value
-     * obtained from {@link APP.conference.isConnectionInterrupted}.
-     */
-    showLocalConnectionMessage(show) {
-        if (typeof show !== 'boolean') {
-            // eslint-disable-next-line no-param-reassign
-            show = APP.conference.isConnectionInterrupted();
-        }
-
-        const element = document.getElementById('localConnectionMessage');
-
-        if (element) {
-            if (show) {
-                element.classList.add('show');
-            } else {
-                element.classList.remove('show');
-            }
-        }
-
-        if (show) {
-            // Avatar message conflicts with 'videoConnectionMessage',
-            // so it must be hidden
-            this.showRemoteConnectionMessage(false);
-        }
-    }
-
     /**
      * Shows hides the "avatar" message which is to be displayed either in
      * the middle of the screen or below the avatar image.
 
         if (show) {
             $('#remoteConnectionMessage').css({ display: 'block' });
-
-            // 'videoConnectionMessage' message conflicts with 'avatarMessage',
-            // so it must be hidden
-            this.showLocalConnectionMessage(false);
         } else {
             $('#remoteConnectionMessage').hide();
         }
         }
     }
 
-    /**
-     * Updated the text which is to be shown on the top of large video, when
-     * local media connection is interrupted.
-     *
-     * @param {string} msgKey the translation key which will be used to get
-     * the message text to be displayed on the large video.
-     *
-     * @private
-     */
-    _setLocalConnectionMessage(msgKey) {
-        $('#localConnectionMessage')
-            .attr('data-i18n', msgKey);
-        APP.translation.translateElement($('#localConnectionMessage'));
-    }
-
     /**
      * Add container of specified type.
      * @param {string} type container type
 
         if (LargeVideoManager.isVideoContainer(this.state)) {
             this.showWatermark(false);
-            this.showLocalConnectionMessage(false);
             this.showRemoteConnectionMessage(false);
         }
         oldContainer.hide();
                 // at the same time, but the latter is of higher priority and it
                 // will hide the avatar one if will be displayed.
                 this.showRemoteConnectionMessage(/* fetch the current state */);
-                this.showLocalConnectionMessage(/* fetch the current state */);
             }
         });
     }

modules/UI/videolayout/VideoContainer.js

 
 const FADE_DURATION_MS = 300;
 
-/**
- * The CSS class used to add a filter effect on the large video when there is
- * a problem with local video.
- *
- * @private
- * @type {string}
- */
-const LOCAL_PROBLEM_FILTER_CLASS = 'videoProblemFilter';
-
 /**
  * The CSS class used to add a filter effect on the large video when there is
  * a problem with remote video.
         this._resizeListeners.add(callback);
     }
 
-    /**
-     * Enables a filter on the video which indicates that there are some
-     * problems with the local media connection.
-     *
-     * @param {boolean} enable <tt>true</tt> if the filter is to be enabled or
-     * <tt>false</tt> otherwise.
-     */
-    enableLocalConnectionProblemFilter(enable) {
-        this.$video.toggleClass(LOCAL_PROBLEM_FILTER_CLASS, enable);
-        this._updateBackground();
-    }
-
     /**
      * Obtains media stream ID of the underlying {@link JitsiTrack}.
      * @return {string|null}
                     && this.localFlipX
                 }
                 orientationFit = { this._backgroundOrientation }
-                showLocalProblemFilter
-                    = { this.$video.hasClass(LOCAL_PROBLEM_FILTER_CLASS) }
                 showRemoteProblemFilter
                     = { this.$video.hasClass(REMOTE_PROBLEM_FILTER_CLASS) }
                 videoElement = { this.$video && this.$video[0] }

modules/UI/videolayout/VideoLayout.js

 /* global APP, $, interfaceConfig  */
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
-import {
-    JitsiParticipantConnectionStatus
-} from '../../../react/features/base/lib-jitsi-meet';
 import { VIDEO_TYPE } from '../../../react/features/base/media';
 import {
     getLocalParticipant as getLocalParticipantFromStore,
      * Shows/hides warning about a user's connectivity issues.
      *
      * @param {string} id - The ID of the remote participant(MUC nickname).
-     * @param {status} status - The new connection status.
      * @returns {void}
      */
-    onParticipantConnectionStatusChanged(id, status) {
+    onParticipantConnectionStatusChanged(id) {
         if (APP.conference.isLocalId(id)) {
-            // Maintain old logic of passing in either interrupted or active
-            // to updateConnectionStatus.
-            localVideoThumbnail.updateConnectionStatus(status);
-
-            if (status === JitsiParticipantConnectionStatus.INTERRUPTED) {
-                largeVideo && largeVideo.onVideoInterrupted();
-            } else {
-                largeVideo && largeVideo.onVideoRestored();
-            }
 
             return;
         }

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

                 </div>
                 { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
                     || <Captions /> }
-                <span id = 'localConnectionMessage' />
             </div>
         );
     }

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

      */
     orientationFit: string,
 
-    /**
-     * Whether or not to display a filter on the video to visually indicate a
-     * problem with the video being displayed.
-     */
-    showLocalProblemFilter: boolean,
-
     /**
      * Whether or not to display a filter on the video to visually indicate a
      * problem with the video being displayed.
         const {
             hidden,
             mirror,
-            showLocalProblemFilter,
             showRemoteProblemFilter
         } = this.props;
         const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${
             hidden ? 'invisible' : ''} ${
-            showLocalProblemFilter ? 'videoProblemFilter' : ''} ${
             showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`;
 
         return (