From 12d7ab90265b699b9ee85519421208a04f22f8ac Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Fri, 11 May 2018 11:34:03 -0700
Subject: [PATCH] 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.
---
 css/_videolayout_default.scss               |  7 +++++++
 modules/UI/videolayout/LargeVideoManager.js |  8 --------
 modules/UI/videolayout/VideoLayout.js       | 16 +---------------
 3 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 4c6435497..dcf2de500 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -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;
 }
diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js
index 6d7ef3d62..62ca70dce 100644
--- a/modules/UI/videolayout/LargeVideoManager.js
+++ b/modules/UI/videolayout/LargeVideoManager.js
@@ -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
-        });
     }
 
     /**
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 448c0a7bd..ec20ed600 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -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) {