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

@@ -578,11 +578,6 @@
     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%);
@@ -618,24 +613,6 @@
     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

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

lang/main.json

@@ -81,7 +81,6 @@
         "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

@@ -140,26 +140,6 @@ export default class LargeVideoManager {
         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);
-    }
-
     /**
      *
      */
@@ -269,13 +249,9 @@ export default class LargeVideoManager {
                 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,
@@ -390,16 +366,6 @@ export default class LargeVideoManager {
             .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
      */
@@ -478,35 +444,6 @@ export default class LargeVideoManager {
         $('.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.
@@ -531,10 +468,6 @@ export default class LargeVideoManager {
 
         if (show) {
             $('#remoteConnectionMessage').css({ display: 'block' });
-
-            // 'videoConnectionMessage' message conflicts with 'avatarMessage',
-            // so it must be hidden
-            this.showLocalConnectionMessage(false);
         } else {
             $('#remoteConnectionMessage').hide();
         }
@@ -560,21 +493,6 @@ export default class LargeVideoManager {
         }
     }
 
-    /**
-     * 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
@@ -655,7 +573,6 @@ export default class LargeVideoManager {
 
         if (LargeVideoManager.isVideoContainer(this.state)) {
             this.showWatermark(false);
-            this.showLocalConnectionMessage(false);
             this.showRemoteConnectionMessage(false);
         }
         oldContainer.hide();
@@ -675,7 +592,6 @@ export default class LargeVideoManager {
                 // 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

@@ -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 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.
@@ -289,18 +280,6 @@ export class VideoContainer extends LargeContainer {
         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}
@@ -686,8 +665,6 @@ export class VideoContainer extends LargeContainer {
                     && 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

@@ -1,9 +1,6 @@
 /* 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,
@@ -427,20 +424,10 @@ const VideoLayout = {
      * 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

@@ -68,7 +68,6 @@ class LargeVideo extends Component<Props> {
                 </div>
                 { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
                     || <Captions /> }
-                <span id = 'localConnectionMessage' />
             </div>
         );
     }

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.
-     */
-    showLocalProblemFilter: boolean,
-
     /**
      * Whether or not to display a filter on the video to visually indicate a
      * problem with the video being displayed.
@@ -138,12 +132,10 @@ export class LargeVideoBackground extends Component<Props> {
         const {
             hidden,
             mirror,
-            showLocalProblemFilter,
             showRemoteProblemFilter
         } = this.props;
         const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${
             hidden ? 'invisible' : ''} ${
-            showLocalProblemFilter ? 'videoProblemFilter' : ''} ${
             showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`;
 
         return (