From c6c701330a3312481468ff9c7497ffeb4ce6916e Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Tue, 1 Nov 2016 12:30:43 +0200 Subject: [PATCH 1/3] Change order of remote videos when clicking on shortcut --- modules/UI/UI.js | 20 +++++++++++++++++--- modules/keyboardshortcut/keyboardshortcut.js | 2 +- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 021a41862..3bccf41f2 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -819,9 +819,23 @@ UI.emitEvent = function (type, options) { }; UI.clickOnVideo = function (videoNumber) { - var remoteVideos = $(".videocontainer:not(#mixedstream)"); - if (remoteVideos.length > videoNumber) { - remoteVideos[videoNumber].click(); + let videos = $(".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) => { + if(video.id === 'localVideoContainer') { + videoObj.local = video; + } else { + videoObj.remote.unshift(video); + } + return videoObj; + }, { local: null, remote: [] }); + + let sortedVideos = [videosMap.local, ...videosMap.remote]; + if (sortedVideos.length > videoNumber) { + $(sortedVideos[videoNumber]).click(); } }; 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" && From d703271c96a366868316c09982914c28e9afd6da Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Tue, 1 Nov 2016 15:17:44 +0200 Subject: [PATCH 2/3] 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 52cb02a2c..05336a87f 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 57c55e5a7..5d73bf2be 100644 --- a/index.html +++ b/index.html @@ -169,6 +169,7 @@
+
diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 3bccf41f2..5614d2ab7 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 43ea0bbc3..b75d68006 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); From 30e717bd20c9e9136c26f5fb763ac6b0ef51410f Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 3 Nov 2016 12:13:03 +0200 Subject: [PATCH 3/3] Rename classname; Refactor click on video method --- css/_videolayout_default.scss | 2 +- index.html | 2 +- modules/UI/UI.js | 21 ++++++--------------- modules/UI/videolayout/RemoteVideo.js | 2 +- 4 files changed, 9 insertions(+), 18 deletions(-) diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 05336a87f..a42551db3 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -44,7 +44,7 @@ position: relative; text-align: center; - &__wrapper { + &__background { @include topLeft(); width: 100%; height: 100%; diff --git a/index.html b/index.html index 5d73bf2be..c29a4087e 100644 --- a/index.html +++ b/index.html @@ -169,7 +169,7 @@
-
+
diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 5614d2ab7..925be0de5 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -819,23 +819,14 @@ UI.emitEvent = function (type, options) { }; UI.clickOnVideo = function (videoNumber) { - let videos = $("#remoteVideos .videocontainer:not(#mixedstream)").toArray(); + let videos = $("#remoteVideos .videocontainer:not(#mixedstream)"); + let videosLength = videos.length; - // 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 { - videoObj.remote.unshift(video); - } - return videoObj; - }, { local: null, remote: [] }); - - let sortedVideos = [videosMap.local, ...videosMap.remote]; - if (sortedVideos.length > videoNumber) { - $(sortedVideos[videoNumber]).click(); + 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 b75d68006..7c823c397 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -632,7 +632,7 @@ RemoteVideo.createContainer = function (spanId) { container.className = 'videocontainer'; let wrapper = document.createElement('div'); - wrapper.className = 'videocontainer__wrapper'; + wrapper.className = 'videocontainer__background'; container.appendChild(wrapper); let indicatorBar = document.createElement('div');