Remove UI for local connectivity issues

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 (