From 97e8a6c3f3ffa99beca5e931ec66e4cdd6f69555 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Domas?= Date: Tue, 4 Feb 2020 01:25:13 -0600 Subject: [PATCH] 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 | 23 ----- css/filmstrip/_tile_view_overrides.scss | 1 - lang/main.json | 1 - modules/UI/videolayout/LargeVideoManager.js | 90 +------------------ modules/UI/videolayout/VideoContainer.js | 23 ----- modules/UI/videolayout/VideoLayout.js | 15 +--- .../large-video/components/LargeVideo.web.js | 1 - .../components/LargeVideoBackground.web.js | 8 -- 8 files changed, 4 insertions(+), 158 deletions(-) diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 725c2ab96..ae49ec99b 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 942ceaca0..0a75a6d6f 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 78d01b0cf..616f37aca 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 fff3d921d..a9e823639 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 808defe26..c47cfdc19 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 ad21bc03c..fd7445c2d 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 8431d39e4..ecb3047f0 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 bfbb45a6c..c33b5d4f1 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 (