Skip to content

Commit

Permalink
ref(layout): use css to make video layout containers fit window
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
virtuacoplenny authored and damencho committed May 18, 2018
1 parent 9131d24 commit 12d7ab9
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 23 deletions.
7 changes: 7 additions & 0 deletions css/_videolayout_default.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

#videospace {
display: block;
height: 100%;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
Expand Down Expand Up @@ -224,6 +226,11 @@
text-align: center;
}

#largeVideoContainer {
height: 100%;
width: 100%;
}

#largeVideoWrapper {
box-shadow: 0 0 20px -2px #444;
}
Expand Down
8 changes: 0 additions & 8 deletions modules/UI/videolayout/LargeVideoManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
}

/**
Expand Down
16 changes: 1 addition & 15 deletions modules/UI/videolayout/VideoLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand Down

0 comments on commit 12d7ab9

Please sign in to comment.