diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index a639caf6d..6715a98b5 100644 --- a/css/_videolayout_default.scss +++ b/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. diff --git a/index.html b/index.html index 57c55e5a7..c29a4087e 100644 --- a/index.html +++ b/index.html @@ -169,6 +169,7 @@
+
diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 021a41862..925be0de5 100644 --- a/modules/UI/UI.js +++ b/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 diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 45bdb171d..f7607cf7e 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 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); diff --git a/modules/keyboardshortcut/keyboardshortcut.js b/modules/keyboardshortcut/keyboardshortcut.js index 027378c8d..53497347a 100644 --- a/modules/keyboardshortcut/keyboardshortcut.js +++ b/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" &&