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:
parent
9131d2448d
commit
12d7ab9026
|
@ -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…
Reference in New Issue