diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 725c2ab968..ae49ec99bd 100644
--- a/css/_videolayout_default.scss
+++ b/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;
diff --git a/css/filmstrip/_tile_view_overrides.scss b/css/filmstrip/_tile_view_overrides.scss
index 942ceaca01..0a75a6d6fe 100644
--- a/css/filmstrip/_tile_view_overrides.scss
+++ b/css/filmstrip/_tile_view_overrides.scss
@@ -22,7 +22,6 @@
display: none;
}
- #localConnectionMessage,
#remoteConnectionMessage,
.watermark {
z-index: $filmstripVideosZ + 1;
diff --git a/lang/main.json b/lang/main.json
index 78d01b0cf8..616f37acaa 100644
--- a/lang/main.json
+++ b/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": {
diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js
index fff3d921db..a9e8236397 100644
--- a/modules/UI/videolayout/LargeVideoManager.js
+++ b/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 true to enable, false 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 */);
}
});
}
diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js
index 808defe262..c47cfdc195 100644
--- a/modules/UI/videolayout/VideoContainer.js
+++ b/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 true if the filter is to be enabled or
- * false 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] }
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index ad21bc03c3..fd7445c2dd 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/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;
}
diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js
index 8431d39e44..ecb3047f07 100644
--- a/react/features/large-video/components/LargeVideo.web.js
+++ b/react/features/large-video/components/LargeVideo.web.js
@@ -68,7 +68,6 @@ class LargeVideo extends Component {
{ interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
|| }
-
);
}
diff --git a/react/features/large-video/components/LargeVideoBackground.web.js b/react/features/large-video/components/LargeVideoBackground.web.js
index bfbb45a6ca..c33b5d4f19 100644
--- a/react/features/large-video/components/LargeVideoBackground.web.js
+++ b/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 {
const {
hidden,
mirror,
- showLocalProblemFilter,
showRemoteProblemFilter
} = this.props;
const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${
hidden ? 'invisible' : ''} ${
- showLocalProblemFilter ? 'videoProblemFilter' : ''} ${
showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`;
return (