fix(videolayout): Resize calculations

css/_videolayout_default.scss

@@ -12,18 +12,14 @@
     overflow: hidden;
 }
 
-.video_blurred {
-    width: 100%;
-
-    &_container {
-        width: 100%;
+.video_blurred_container {
     height: 100%;
-        position: absolute;
-        top: 0;
+    filter: blur(40px);
     left: 0;
     overflow: hidden;
-        filter: blur(40px);
-    }
+    position: absolute;
+    top: 0;
+    width: 100%;
 }
 
 .videocontainer {

interface_config.js

@@ -94,5 +94,11 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      * @type {boolean}
      */
     MOBILE_APP_PROMO: true,
+    /**
+     * Maximum coeficient of the ratio of the large video to the visible area
+     * after the large video is scaled to fit the window.
+     *
+     * @type {number}
+     */
     MAXIMUM_ZOOMING_COEFFICIENT: 1.3
 };

modules/UI/videolayout/VideoContainer.js

@@ -78,44 +78,44 @@ function computeDesktopVideoSize(videoWidth,
 function computeCameraVideoSize(videoWidth,
                             videoHeight,
                             videoSpaceWidth,
-                            videoSpaceHeight) {
-
+                            videoSpaceHeight,
+                            videoLayoutFit) {
     const aspectRatio = videoWidth / videoHeight;
-    let availableWidth = videoWidth;
-    let availableHeight = videoHeight;
+    switch (videoLayoutFit) {
+    case 'height':
+        return [ videoSpaceHeight * aspectRatio, videoSpaceHeight ];
+    case 'width':
+        return [ videoSpaceWidth, videoSpaceWidth / aspectRatio ];
+    case 'both': {
+        const videoSpaceRatio = videoSpaceWidth / videoSpaceHeight;
+        const maxZoomCoefficient = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT
+            || Infinity;
 
-    if (interfaceConfig.VIDEO_LAYOUT_FIT === 'height') {
-        availableHeight = videoSpaceHeight;
-        availableWidth = availableHeight * aspectRatio;
-    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'width') {
-        availableWidth = videoSpaceWidth;
-        availableHeight = availableWidth / aspectRatio;
-    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'both') {
-        availableWidth = Math.max(videoWidth, videoSpaceWidth);
-        availableHeight = Math.max(videoHeight, videoSpaceHeight);
-
-        if (availableWidth / aspectRatio < videoSpaceHeight) {
-            availableHeight = videoSpaceHeight;
-            availableWidth = availableHeight * aspectRatio;
+        if (videoSpaceRatio === aspectRatio) {
+            return [videoSpaceWidth, videoSpaceHeight];
         }
 
-        if (aspectRatio <= 1) {
-            const zoomRateHeight = videoSpaceHeight / videoHeight;
-            const zoomRateWidth = videoSpaceWidth / videoWidth;
-            const zoomRate = Math.min(
-                zoomRateWidth,
-                zoomRateHeight,
-                interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
+        let [ width, height] = computeCameraVideoSize(
+            videoWidth,
+            videoHeight,
+            videoSpaceWidth,
+            videoSpaceHeight,
+            videoSpaceRatio < aspectRatio ? 'height' : 'width');
+        const maxWidth = videoSpaceWidth * maxZoomCoefficient;
+        const maxHeight = videoSpaceHeight * maxZoomCoefficient;
 
-            availableWidth = videoWidth * zoomRate;
-            availableHeight = videoHeight * zoomRate;
-        } else if (availableHeight * aspectRatio < videoSpaceWidth) {
-            availableWidth = videoSpaceWidth;
-            availableHeight = availableWidth / aspectRatio;
+        if (width > maxWidth) {
+            width = maxWidth;
+            height = width / aspectRatio;
+        } else if (height > maxHeight) {
+            height = maxHeight;
+            width = height * aspectRatio;
         }
+        return [width, height];
+    }
+    default:
+        return [ videoWidth, videoHeight ];
     }
-
-    return [ availableWidth, availableHeight ];
 }
 
 /**
@@ -293,7 +293,8 @@ export class VideoContainer extends LargeContainer {
         return computeCameraVideoSize(width,
             height,
             containerWidth,
-            containerHeight);
+            containerHeight,
+            interfaceConfig.VIDEO_LAYOUT_FIT);
     }
 
     /**
@@ -355,8 +356,11 @@ export class VideoContainer extends LargeContainer {
         let [ width, height ]
             = this.getVideoSize(containerWidth, containerHeight);
 
-        if (containerWidth > width) {
+        if ((containerWidth > width) || (containerHeight > height)) {
             this._showVideoBackground();
+            const css = containerWidth > width
+                ? {width: '100%', height: 'auto'} : {width: 'auto', height: '100%'};
+            this.$videoBackground.css(css);
         }
 
         let { horizontalIndent, verticalIndent }

react/features/large-video/components/LargeVideo.web.js

@@ -40,7 +40,6 @@ export default class LargeVideo extends Component {
                 <div className = 'video_blurred_container'>
                     <video
                         autoPlay = { true }
-                        className = 'video_blurred'
                         id = 'largeVideoBackground'
                         muted = 'true' />
                 </div>