Merge pull request #1262 from jitsi/ui-fixes

Ui fixes

css/_filmstrip.scss

@@ -70,7 +70,7 @@
             display: none;
             position: relative;
             background-size: contain;
-            border: $thumbnailVideoBorder solid $thumbnailBorderColor;
+            border: $thumbnailVideoBorder solid transparent;
             border-radius: $borderRadius;
             margin: 0 $thumbnailVideoMargin;
 

css/_videolayout_default.scss

@@ -474,6 +474,7 @@
 #localConnectionMessage {
     display: none;
     position: absolute;
+    left: 0;
     width: 100%;
     top:50%;
     z-index: 2;

css/themes/_light.scss

@@ -85,9 +85,6 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 // Toolbar
 $splitterColor: #ccc;
 
-// Thumbnail
-$thumbnailBorderColor: rgba(71, 71, 71, .7);
-
 /**
  * Forms
  */

modules/UI/videolayout/VideoContainer.js

@@ -361,6 +361,9 @@ export class VideoContainer extends LargeContainer {
         this.$video.css({
             transform: flipX ? 'scaleX(-1)' : 'none'
         });
+
+        // Reset the large video background depending on the stream.
+        this.setLargeVideoBackground(this.avatarDisplayed);
     }
 
     /**
@@ -395,8 +398,7 @@ export class VideoContainer extends LargeContainer {
         // default background set.
         // In order to fix this code we need to introduce video background or
         // find a workaround for the video flickering.
-        $("#largeVideoContainer").css("background",
-            (show) ? interfaceConfig.DEFAULT_BACKGROUND : "#000");
+        this.setLargeVideoBackground(show);
 
         this.$avatar.css("visibility", show ? "visible" : "hidden");
         this.avatarDisplayed = show;
@@ -465,4 +467,19 @@ export class VideoContainer extends LargeContainer {
     stayOnStage () {
         return false;
     }
+
+    /**
+     * Sets the large video container background depending on the container
+     * type and the parameter indicating if an avatar is currently shown on
+     * large.
+     *
+     * @param {boolean} isAvatar - Indicates if the avatar is currently shown
+     * on the large video.
+     * @returns {void}
+     */
+    setLargeVideoBackground (isAvatar) {
+        $("#largeVideoContainer").css("background",
+            (this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar)
+                ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
+    }
 }