Merge branch 'jit/master' into task/video-thumbnail-menu-should-appear-on-hover

css/_videolayout_default.scss

@@ -43,13 +43,20 @@
 .videocontainer {
     position: relative;
     text-align: center;
+
+    &__background {
+        @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.

index.html

@@ -169,6 +169,7 @@
 
             <div id="remoteVideos">
                 <span id="localVideoContainer" class="videocontainer videocontainer_small">
+                    <div class="videocontainer__background"></div>
                     <span id="localVideoWrapper">
                         <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
                     </span>

modules/UI/UI.js

@@ -819,10 +819,14 @@ UI.emitEvent = function (type, options) {
 };
 
 UI.clickOnVideo = function (videoNumber) {
-    var remoteVideos = $(".videocontainer:not(#mixedstream)");
-    if (remoteVideos.length > videoNumber) {
-        remoteVideos[videoNumber].click();
+    let videos = $("#remoteVideos .videocontainer:not(#mixedstream)");
+    let videosLength = videos.length;
+
+    if(videosLength <= videoNumber) {
+        return;
     }
+    let videoIndex = videoNumber === 0 ? 0 : videosLength - videoNumber;
+    videos[videoIndex].click();
 };
 
 //Used by torture

modules/UI/videolayout/RemoteVideo.js

@@ -631,6 +631,10 @@ RemoteVideo.createContainer = function (spanId) {
     container.id = spanId;
     container.className = 'videocontainer videocontainer_remote';
 
+    let wrapper = document.createElement('div');
+    wrapper.className = 'videocontainer__background';
+    container.appendChild(wrapper);
+
     let indicatorBar = document.createElement('div');
     indicatorBar.className = "videocontainer__toptoolbar";
     container.appendChild(indicatorBar);

modules/keyboardshortcut/keyboardshortcut.js

@@ -83,7 +83,7 @@ var KeyboardShortcut = {
                     _shortcuts[key].function(e);
                 }
                 else if (!isNaN(num) && num >= 0 && num <= 9) {
-                    APP.UI.clickOnVideo(num + 1);
+                    APP.UI.clickOnVideo(num);
                 }
             //esc while the smileys are visible hides them
             } else if (key === "ESCAPE" &&