From 4990406010e86de0a82bd0499dc2bd8666fdeff1 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Wed, 6 Apr 2016 15:36:41 -0500
Subject: [PATCH] Fix black stripe on the right of the screen

---
 css/main.css                                |  2 +-
 modules/UI/side_pannels/SidePanelToggler.js | 23 +++++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/css/main.css b/css/main.css
index 190c0565b..c49148a8b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -20,7 +20,7 @@ html, body{
     top: 0px;
     bottom: 0px;
     right: 0px;
-    width: 20%;
+    width: 0px;
     max-width: 200px;
     overflow: hidden;
     /* background-color:#dfebf1;*/
diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js
index 8d4d6f47b..d5e37fed1 100644
--- a/modules/UI/side_pannels/SidePanelToggler.js
+++ b/modules/UI/side_pannels/SidePanelToggler.js
@@ -38,13 +38,18 @@ function toggle (object, selector, onOpenComplete,
             queue: false,
             duration: 500
         });
+
         $(selector).hide("slide", {
             direction: "right",
             queue: false,
-            duration: 500
+            duration: 500,
+            // Set the size to 0 at the end of the animation to ensure that
+            // the is(":visible") function on this selector will return {false}
+            // when the element is hidden.
+            complete: function() {$(selector).css("width", "0");}
         });
 
-        resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
+        resizeVideoArea(false, onVideoResizeComplete);
 
         if(typeof onClose === "function") {
             onClose();
@@ -52,7 +57,7 @@ function toggle (object, selector, onOpenComplete,
 
         currentlyOpen = null;
     } else {
-        resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
+        resizeVideoArea(true, onVideoResizeComplete);
 
         // Undock the toolbar when the chat is shown and if we're in a
         // video mode.
@@ -76,6 +81,12 @@ function toggle (object, selector, onOpenComplete,
             queue: false,
             duration: 500
         });
+        // Set the size dynamically (not in the css), so that we're sure that
+        // when is(":visible") is called on this selector the result is {false}
+        // before it's actually visible.
+        // (Chrome seems to return {true} for an element which is in the DOM and
+        // has non-null size set).
+        $(selector).css("width", "20%");
         $(selector).show("slide", {
             direction: "right",
             queue: false,
@@ -91,9 +102,9 @@ function toggle (object, selector, onOpenComplete,
 }
 
 function resizeVideoArea(isSidePanelVisible, completeFunction) {
-    VideoLayout.resizeVideoArea(!isSidePanelVisible,
-        false,
-        false,
+    VideoLayout.resizeVideoArea(isSidePanelVisible,
+        false,//don't force thumbnail count update
+        true, //animate
         completeFunction);
 }