From 30cb948dcf7ac548e8ab0e96a85e8338b2e014db Mon Sep 17 00:00:00 2001
From: paweldomas <pawel.domas@jitsi.org>
Date: Mon, 19 Sep 2016 14:18:52 -0500
Subject: [PATCH] feat(SmallVideo): make thumbnail grey

The video or the avatar on a thumbnail will be displayed in greyscale
when the user is having connectivity issues.
---
 css/_videolayout_default.scss         | 5 +++++
 modules/UI/videolayout/RemoteVideo.js | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 8af855ed1..ee1d49629 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -455,6 +455,11 @@
     filter: blur(10px) grayscale(.5) opacity(0.8);
 }
 
+.videoThumbnailProblemFilter {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
 #videoConnectionMessage {
     display: none;
     position: absolute;
diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js
index 85df94bfe..351326d57 100644
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/modules/UI/videolayout/RemoteVideo.js
@@ -268,6 +268,12 @@ RemoteVideo.prototype.updateConnectionStatusIndicator = function (isActive) {
 
     if(this.connectionIndicator)
         this.connectionIndicator.updateConnectionStatusIndicator(isActive);
+
+    // Toggle thumbnail video problem filter
+    this.selectVideoElement().toggleClass(
+        "videoThumbnailProblemFilter", !isActive);
+    this.$avatar().toggleClass(
+        "videoThumbnailProblemFilter", !isActive);
 };
 
 /**
@@ -300,6 +306,8 @@ RemoteVideo.prototype.waitForPlayback = function (streamElement, stream) {
     var onPlayingHandler = function () {
         self.VideoLayout.videoactive(streamElement, self.id);
         streamElement.onplaying = null;
+        // Refresh to show the video
+        self.updateView();
     };
     streamElement.onplaying = onPlayingHandler;
 };