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.
This commit is contained in:
Leonard Kim 2018-05-11 11:34:03 -07:00 committed by Дамян Минков
parent 9131d2448d
commit 12d7ab9026
3 changed files with 8 additions and 23 deletions

View File

@ -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;
}

View File

@ -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
});
}
/**

View File

@ -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) {