From d703271c96a366868316c09982914c28e9afd6da Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Tue, 1 Nov 2016 15:17:44 +0200
Subject: [PATCH] Fix bug with resizing when using shortcut for switching btw
 videos

---
 css/_videolayout_default.scss         | 12 ++++++++----
 index.html                            |  1 +
 modules/UI/UI.js                      |  9 ++++-----
 modules/UI/videolayout/RemoteVideo.js |  4 ++++
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 52cb02a2ce..05336a87f2 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -43,13 +43,20 @@
 .videocontainer {
     position: relative;
     text-align: center;
+
+    &__wrapper {
+        @include topLeft();
+        width: 100%;
+        height: 100%;
+        background-color: black;
+    }
 }
 
 #remoteVideos .videocontainer {
     display: none;
     position: relative;
-    background-color: black;
     background-size: contain;
+    border: 2px solid transparent;
     border-radius:1px;
     margin: 0 $thumbnailVideoMargin;
 }
@@ -92,9 +99,6 @@
 #remoteVideos .videocontainer.videoContainerFocused,
 #remoteVideos .videocontainer:hover {
     cursor: hand;
-    margin-right: $thumbnailVideoMargin - 2;
-    margin-left: $thumbnailVideoMargin - 2;
-    margin-top: -2px;
 }
 /**
  * Focused video thumbnail.
diff --git a/index.html b/index.html
index 57c55e5a78..5d73bf2be2 100644
--- a/index.html
+++ b/index.html
@@ -169,6 +169,7 @@
 
             <div id="remoteVideos">
                 <span id="localVideoContainer" class="videocontainer videocontainer_small">
+                    <div class="videocontainer__wrapper"></div>
                     <span id="localVideoWrapper">
                         <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
                     </span>
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 3bccf41f2f..5614d2ab7a 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -819,12 +819,11 @@ UI.emitEvent = function (type, options) {
 };
 
 UI.clickOnVideo = function (videoNumber) {
-    let videos = $(".videocontainer:not(#mixedstream)").toArray();
+    let videos = $("#remoteVideos .videocontainer:not(#mixedstream)").toArray();
 
-    // Remove large video container if matched and reverse order of
-    // remote video containers
-    let videosMap = videos.filter(el => el.id !== 'largeVideoContainer')
-          .reduce((videoObj, video) => {
+    // Separate remotes from local videocontainer and reverse order of
+    // remote ones
+    let videosMap = videos.reduce((videoObj, video) => {
               if(video.id === 'localVideoContainer') {
                   videoObj.local = video;
               } else {
diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js
index 43ea0bbc3b..b75d680064 100644
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/modules/UI/videolayout/RemoteVideo.js
@@ -631,6 +631,10 @@ RemoteVideo.createContainer = function (spanId) {
     container.id = spanId;
     container.className = 'videocontainer';
 
+    let wrapper = document.createElement('div');
+    wrapper.className = 'videocontainer__wrapper';
+    container.appendChild(wrapper);
+
     let indicatorBar = document.createElement('div');
     indicatorBar.className = "videocontainer__toptoolbar";
     container.appendChild(indicatorBar);