Browse Source

Fix bug with resizing when using shortcut for switching btw videos

master
Ilya Daynatovich 8 years ago
parent
commit
d703271c96
4 changed files with 17 additions and 9 deletions
  1. 8
    4
      css/_videolayout_default.scss
  2. 1
    0
      index.html
  3. 4
    5
      modules/UI/UI.js
  4. 4
    0
      modules/UI/videolayout/RemoteVideo.js

+ 8
- 4
css/_videolayout_default.scss View File

@@ -43,13 +43,20 @@
43 43
 .videocontainer {
44 44
     position: relative;
45 45
     text-align: center;
46
+
47
+    &__wrapper {
48
+        @include topLeft();
49
+        width: 100%;
50
+        height: 100%;
51
+        background-color: black;
52
+    }
46 53
 }
47 54
 
48 55
 #remoteVideos .videocontainer {
49 56
     display: none;
50 57
     position: relative;
51
-    background-color: black;
52 58
     background-size: contain;
59
+    border: 2px solid transparent;
53 60
     border-radius:1px;
54 61
     margin: 0 $thumbnailVideoMargin;
55 62
 }
@@ -92,9 +99,6 @@
92 99
 #remoteVideos .videocontainer.videoContainerFocused,
93 100
 #remoteVideos .videocontainer:hover {
94 101
     cursor: hand;
95
-    margin-right: $thumbnailVideoMargin - 2;
96
-    margin-left: $thumbnailVideoMargin - 2;
97
-    margin-top: -2px;
98 102
 }
99 103
 /**
100 104
  * Focused video thumbnail.

+ 1
- 0
index.html View File

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

+ 4
- 5
modules/UI/UI.js View File

@@ -819,12 +819,11 @@ UI.emitEvent = function (type, options) {
819 819
 };
820 820
 
821 821
 UI.clickOnVideo = function (videoNumber) {
822
-    let videos = $(".videocontainer:not(#mixedstream)").toArray();
822
+    let videos = $("#remoteVideos .videocontainer:not(#mixedstream)").toArray();
823 823
 
824
-    // Remove large video container if matched and reverse order of
825
-    // remote video containers
826
-    let videosMap = videos.filter(el => el.id !== 'largeVideoContainer')
827
-          .reduce((videoObj, video) => {
824
+    // Separate remotes from local videocontainer and reverse order of
825
+    // remote ones
826
+    let videosMap = videos.reduce((videoObj, video) => {
828 827
               if(video.id === 'localVideoContainer') {
829 828
                   videoObj.local = video;
830 829
               } else {

+ 4
- 0
modules/UI/videolayout/RemoteVideo.js View File

@@ -631,6 +631,10 @@ RemoteVideo.createContainer = function (spanId) {
631 631
     container.id = spanId;
632 632
     container.className = 'videocontainer';
633 633
 
634
+    let wrapper = document.createElement('div');
635
+    wrapper.className = 'videocontainer__wrapper';
636
+    container.appendChild(wrapper);
637
+
634 638
     let indicatorBar = document.createElement('div');
635 639
     indicatorBar.className = "videocontainer__toptoolbar";
636 640
     container.appendChild(indicatorBar);

Loading…
Cancel
Save