haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Paweł Domas 2020-02-04 01:25:13 -06:00 committed by GitHub
parent 523926d598
commit 97e8a6c3f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 4 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/_videolayout_default.scss
View File

@ -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;

1
css/filmstrip/_tile_view_overrides.scss
View File

@ -22,7 +22,6 @@
display: none;
}
#localConnectionMessage,
#remoteConnectionMessage,
.watermark {
z-index: $filmstripVideosZ + 1;

1
lang/main.json
View File

@ -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": {

90
modules/UI/videolayout/LargeVideoManager.js
View File

@ -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 */);
}
});
}

23
modules/UI/videolayout/VideoContainer.js
View File

@ -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] }

15
modules/UI/videolayout/VideoLayout.js
View File

@ -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;
}

1
react/features/large-video/components/LargeVideo.web.js
View File

@ -68,7 +68,6 @@ class LargeVideo extends Component<Props> {
</div>
{ interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
|| <Captions /> }
<span id = 'localConnectionMessage' />
</div>
);
}

8
react/features/large-video/components/LargeVideoBackground.web.js
View File

@ -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 (