ref(layout): use css to make video layout containers fit window

Instead of using JS, just use CSS 100% width and height. This
also resolves a jitter that occurs on edge when a modal's
container appends to the body.
pull/2993/head jitsi-meet_3060
Leonard Kim 7 years ago committed by Дамян Минков
parent 9131d2448d
commit 12d7ab9026
  1. 7
      css/_videolayout_default.scss
  2. 8
      modules/UI/videolayout/LargeVideoManager.js
  3. 16
      modules/UI/videolayout/VideoLayout.js

@ -4,6 +4,8 @@
#videospace {
display: block;
height: 100%;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
@ -224,6 +226,11 @@
text-align: center;
}
#largeVideoContainer {
height: 100%;
width: 100%;
}
#largeVideoWrapper {
box-shadow: 0 0 20px -2px #444;
}

@ -399,14 +399,6 @@ export default class LargeVideoManager {
// resize all containers
Object.keys(this.containers)
.forEach(type => this.resizeContainer(type, animate));
this.$container.animate({
width: this.width,
height: this.height
}, {
queue: false,
duration: animate ? 500 : 0
});
}
/**

@ -857,13 +857,10 @@ const VideoLayout = {
* TODO: Remove the "animate" param as it is no longer passed in as true.
*
* @param forceUpdate indicates that hidden thumbnails will be shown
* @param completeFunction a function to be called when the video area is
* resized.
*/
resizeVideoArea(
forceUpdate = false,
animate = false,
completeFunction = null) {
animate = false) {
if (largeVideo) {
largeVideo.updateContainerSize();
largeVideo.resize(animate);
@ -879,17 +876,6 @@ const VideoLayout = {
// Resize the thumbnails first.
this.resizeThumbnails(forceUpdate);
// Resize the video area element.
$('#videospace').animate({
right: window.innerWidth - availableWidth,
width: availableWidth,
height: availableHeight
}, {
queue: false,
duration: animate ? 500 : 1,
complete: completeFunction
});
},
getSmallVideo(id) {

Loading…
Cancel
Save