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>

1 files changed, 7 insertions, 4 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;