From 01e36e1c569299326bd85e42d5e9a7f753ce8f70 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Wed, 5 Feb 2020 16:43:44 -0600 Subject: [PATCH] ref: remove connectivity issues indication for remote participants It's been considered too disruptive and will often misfire especially if there are issues with the data channels. --- css/_videolayout_default.scss | 5 ---- lang/main.json | 3 +-- modules/UI/videolayout/LargeVideoManager.js | 24 +++--------------- modules/UI/videolayout/VideoContainer.js | 25 ------------------- .../components/ParticipantView.native.js | 3 --- .../components/LargeVideoBackground.web.js | 13 ++-------- 6 files changed, 6 insertions(+), 67 deletions(-) diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index ae49ec99b..54e8fdbd7 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -573,11 +573,6 @@ filter: grayscale(.5) opacity(0.8); } -.remoteVideoProblemFilter { - -webkit-filter: grayscale(100%); - filter: grayscale(100%); -} - .videoThumbnailProblemFilter { -webkit-filter: grayscale(100%); filter: grayscale(100%); diff --git a/lang/main.json b/lang/main.json index 82feb8a49..6448bdabe 100644 --- a/lang/main.json +++ b/lang/main.json @@ -80,8 +80,7 @@ "FETCH_SESSION_ID": "Obtaining session-id...", "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", - "USER_CONNECTION_INTERRUPTED": "{{displayName}} is having connectivity issues..." + "LOW_BANDWIDTH": "Video for {{displayName}} has been turned off to save bandwidth" }, "connectionindicator": { "address": "Address:", diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index a9e823639..2d322b327 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -237,17 +237,8 @@ export default class LargeVideoManager { this.updateLargeVideoAudioLevel(0); } - const isConnectionInterrupted - = APP.conference.getParticipantConnectionStatus(id) - === JitsiParticipantConnectionStatus.INTERRUPTED; - let messageKey = null; - - if (isConnectionInterrupted) { - messageKey = 'connection.USER_CONNECTION_INTERRUPTED'; - } else if (connectionStatus - === JitsiParticipantConnectionStatus.INACTIVE) { - messageKey = 'connection.LOW_BANDWIDTH'; - } + const messageKey + = connectionStatus === JitsiParticipantConnectionStatus.INACTIVE ? 'connection.LOW_BANDWIDTH' : null; // Do not show connection status message in the audio only mode, // because it's based on the video playback status. @@ -255,7 +246,6 @@ export default class LargeVideoManager { this.updateParticipantConnStatusIndication( id, - !overrideAndHide && isConnectionInterrupted, !overrideAndHide && messageKey); // Change the participant id the presence label is listening to. @@ -281,20 +271,12 @@ export default class LargeVideoManager { * shown on the large video area. * * @param {string} id the id of remote participant(MUC nickname) - * @param {boolean} showProblemsIndication * @param {string|null} messageKey the i18n key of the message which will be * displayed on the large video or null to hide it. * * @private */ - updateParticipantConnStatusIndication( - id, - showProblemsIndication, - messageKey) { - // Apply grey filter on the large video - this.videoContainer.showRemoteConnectionProblemIndicator( - showProblemsIndication); - + updateParticipantConnStatusIndication(id, messageKey) { if (messageKey) { // Get user's display name const displayName diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index c47cfdc19..8d58d311b 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 remote video. - * - * @private - * @type {string} - */ -const REMOTE_PROBLEM_FILTER_CLASS = 'remoteVideoProblemFilter'; - /** * Returns an array of the video dimensions, so that it keeps it's aspect * ratio and fits available area with it's larger dimension. This method @@ -555,20 +546,6 @@ export class VideoContainer extends LargeContainer { APP.API.notifyLargeVideoVisibilityChanged(show); } - /** - * Indicates that the remote user who is currently displayed by this video - * container is having connectivity issues. - * - * @param {boolean} show true to show or false to hide - * the indication. - */ - showRemoteConnectionProblemIndicator(show) { - this.$video.toggleClass(REMOTE_PROBLEM_FILTER_CLASS, show); - this.$avatar.toggleClass(REMOTE_PROBLEM_FILTER_CLASS, show); - this._updateBackground(); - } - - /** * We are doing fadeOut/fadeIn animations on parent div which wraps * largeVideo, because when Temasys plugin is in use it replaces @@ -665,8 +642,6 @@ export class VideoContainer extends LargeContainer { && this.localFlipX } orientationFit = { this._backgroundOrientation } - showRemoteProblemFilter - = { this.$video.hasClass(REMOTE_PROBLEM_FILTER_CLASS) } videoElement = { this.$video && this.$video[0] } videoTrack = { this.stream } />, document.getElementById('largeVideoBackgroundContainer') diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js index 667b6e4e0..be4d539bb 100644 --- a/react/features/base/participants/components/ParticipantView.native.js +++ b/react/features/base/participants/components/ParticipantView.native.js @@ -144,9 +144,6 @@ class ParticipantView extends Component { case JitsiParticipantConnectionStatus.INACTIVE: messageKey = 'connection.LOW_BANDWIDTH'; break; - case JitsiParticipantConnectionStatus.INTERRUPTED: - messageKey = 'connection.USER_CONNECTION_INTERRUPTED'; - break; default: return null; } diff --git a/react/features/large-video/components/LargeVideoBackground.web.js b/react/features/large-video/components/LargeVideoBackground.web.js index c33b5d4f1..4cfe510dc 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. - */ - showRemoteProblemFilter: boolean, - /** * The video stream to display. */ @@ -131,12 +125,9 @@ export class LargeVideoBackground extends Component { render() { const { hidden, - mirror, - showRemoteProblemFilter + mirror } = this.props; - const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${ - hidden ? 'invisible' : ''} ${ - showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`; + const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${hidden ? 'invisible' : ''}`; return (