diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-07-09 13:48:47 +0300 |
---|---|---|
committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-07-09 14:29:31 +0300 |
commit | ac7c311efe4e69494ee46b6e7dda7a3be2b9bced (patch) | |
tree | 01c64f9f9e55f6b7674ed8c31b7a7af14abd1a92 | |
parent | ec8570e355dc719852e4a9c46f9c07d5b4a93ae0 (diff) |
Reduce opacity of videos for peers that are not connected
Until now only the opacity of the avatar was reduced when the peer was
not connected. However, if the video was being shown the avatar was
hidden, so if there was an issue with the connection to the other peer
it was not reflected in the VideoView.
Note that the loading icon should be shown too in the video for long
disconnections or failures, but ":after" CSS pseudo classes (which are
used by the loading icon) do not work with video elements, so for now
only the opacity is reduced.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
-rw-r--r-- | css/video.scss | 11 | ||||
-rw-r--r-- | js/views/videoview.js | 8 |
2 files changed, 12 insertions, 7 deletions
diff --git a/css/video.scss b/css/video.scss index 1559d8ec3..8a0d909a4 100644 --- a/css/video.scss +++ b/css/video.scss @@ -60,6 +60,13 @@ video { filter: none; } +#videos .videoContainer.not-connected { + video, + .avatar { + opacity: 0.5; + } +} + #videos .videoContainer:not(.promoted) video { max-height: 200px; max-width: 100%; @@ -72,10 +79,6 @@ video { box-shadow: 0 0 15px $color-box-shadow; } -#videos .videoContainer .avatar.not-connected { - opacity: 0.5; -} - .participants-1 #videos .videoContainer video, .participants-2 #videos .videoContainer video { padding: 0; diff --git a/js/views/videoview.js b/js/views/videoview.js index 43b516e2a..b378acb26 100644 --- a/js/views/videoview.js +++ b/js/views/videoview.js @@ -80,8 +80,9 @@ this.render(); + this.$el.addClass('not-connected'); + this.getUI('avatar').addClass('icon-loading'); - this.getUI('avatar').addClass('not-connected'); this.getUI('hideRemoteVideoButton').attr('data-original-title', t('spreed', 'Disable video')); this.getUI('hideRemoteVideoButton').addClass('hidden'); @@ -145,8 +146,9 @@ setConnectionStatus: function(connectionStatus) { this._connectionStatus = connectionStatus; + this.$el.addClass('not-connected'); + this.getUI('avatar').removeClass('icon-loading'); - this.getUI('avatar').addClass('not-connected'); this.getUI('iceFailedIndicator').addClass('not-failed'); if (connectionStatus === ConnectionStatus.CHECKING || @@ -159,7 +161,7 @@ if (connectionStatus === ConnectionStatus.CONNECTED || connectionStatus === ConnectionStatus.COMPLETED) { - this.getUI('avatar').removeClass('not-connected'); + this.$el.removeClass('not-connected'); return; } |