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 (