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

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

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