haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bug with resizing when using shortcut for switching btw videos

This commit is contained in:
Ilya Daynatovich 2016-11-01 15:17:44 +02:00
parent c6c701330a
commit d703271c96
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/_videolayout_default.scss
View File

@ -43,13 +43,20 @@
.videocontainer { .videocontainer {
position: relative; position: relative;
text-align: center; text-align: center;
&__wrapper {
@include topLeft();
width: 100%;
height: 100%;
background-color: black;
}
} }
#remoteVideos .videocontainer { #remoteVideos .videocontainer {
display: none; display: none;
position: relative; position: relative;
background-color: black;
background-size: contain; background-size: contain;
border: 2px solid transparent;
border-radius:1px; border-radius:1px;
margin: 0 $thumbnailVideoMargin; margin: 0 $thumbnailVideoMargin;
} }
@ -92,9 +99,6 @@
#remoteVideos .videocontainer.videoContainerFocused, #remoteVideos .videocontainer.videoContainerFocused,
#remoteVideos .videocontainer:hover { #remoteVideos .videocontainer:hover {
cursor: hand; cursor: hand;
margin-right: $thumbnailVideoMargin - 2;
margin-left: $thumbnailVideoMargin - 2;
margin-top: -2px;
} }
/** /**
* Focused video thumbnail. * Focused video thumbnail.

1
index.html
View File

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

9
modules/UI/UI.js
View File

@ -819,12 +819,11 @@ UI.emitEvent = function (type, options) {
}; };
UI.clickOnVideo = function (videoNumber) { 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 // Separate remotes from local videocontainer and reverse order of
// remote video containers // remote ones
let videosMap = videos.filter(el => el.id !== 'largeVideoContainer') let videosMap = videos.reduce((videoObj, video) => {
.reduce((videoObj, video) => {
if(video.id === 'localVideoContainer') { if(video.id === 'localVideoContainer') {
videoObj.local = video; videoObj.local = video;
} else { } else {

4
modules/UI/videolayout/RemoteVideo.js
View File

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