Merge pull request #51 from janeapp/IMPT-362-Pad-the-video-so-it-can-…

…be-a-max-of-N-pixels

[IMPT-362] Pad the video so it can be a max of N pixels

modules/UI/videolayout/LargeVideoManager.js

@@ -655,18 +655,13 @@ export default class LargeVideoManager {
      * @returns {void}
      */
     _onVideoResolutionUpdate() {
-        const { height, width } = this.videoContainer.getStreamSize();
+        const { height } = this.videoContainer.getStreamSize();
         const { resolution } = APP.store.getState()['features/large-video'];
 
         if (height !== resolution) {
             APP.store.dispatch(updateKnownLargeVideoResolution(height));
         }
 
-        const currentAspectRatio = height === 0 ? 0 : width / height;
-
-        if (this._videoAspectRatio !== currentAspectRatio) {
-            this._videoAspectRatio = currentAspectRatio;
-            this.resize();
-        }
+        this.resize();
     }
 }

modules/UI/videolayout/VideoContainer.js

@@ -8,7 +8,7 @@ import { browser } from '../../../react/features/base/lib-jitsi-meet';
 import { isTestModeEnabled } from '../../../react/features/base/testing';
 import { ORIENTATION, LargeVideoBackground, updateLastLargeVideoMediaEvent } from '../../../react/features/large-video';
 import { LAYOUTS, getCurrentLayout } from '../../../react/features/video-layout';
-/* eslint-enable no-unused-vars */
+import { VIDEO_QUALITY_LEVELS } from '../../../react/features/video-quality/constants';
 import UIUtil from '../util/UIUtil';
 
 import Filmstrip from './Filmstrip';
@@ -18,6 +18,12 @@ import LargeContainer from './LargeContainer';
 export const VIDEO_CONTAINER_TYPE = 'camera';
 
 const FADE_DURATION_MS = 300;
+const SD_VIDEO_CONTAINER_HEIGHT = VIDEO_QUALITY_LEVELS.STANDARD;
+const SD_VIDEO_CONTAINER_PADDING_PERCENTAGE = 0.1;
+const SD_VIDEO_CONTAINER_PADDING_BREAKPOINT = 768;
+
+// minimum top padding + bottom padding
+const SD_VIDEO_CONTAINER_MIN_VERTICAL_PADDING = 248;
 
 /**
  * List of container events that we are going to process, will be added as listener to the
@@ -96,6 +102,7 @@ function computeCameraVideoSize( // eslint-disable-line max-params
         // Avoid NaN values caused by division by 0.
         return [ 0, 0 ];
     }
+    const [ verticalPadding, horizontalPadding ] = getPaddings(videoSpaceHeight, videoSpaceWidth, videoHeight);
 
     const aspectRatio = videoWidth / videoHeight;
     const videoSpaceRatio = videoSpaceWidth / videoSpaceHeight;
@@ -113,8 +120,7 @@ function computeCameraVideoSize( // eslint-disable-line max-params
             videoSpaceHeight,
             videoSpaceRatio < aspectRatio ? 'width' : 'height');
     case 'both': {
-        const maxZoomCoefficient = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT
-            || Infinity;
+        const maxZoomCoefficient = getMaxZoomCoefficient(videoHeight);
 
         if (videoSpaceRatio === aspectRatio) {
             return [ videoSpaceWidth, videoSpaceHeight ];
@@ -130,10 +136,14 @@ function computeCameraVideoSize( // eslint-disable-line max-params
         const maxHeight = videoSpaceHeight * maxZoomCoefficient;
 
         if (width > maxWidth) {
-            width = maxWidth;
+            width = maxWidth < SD_VIDEO_CONTAINER_PADDING_BREAKPOINT ? maxWidth : maxWidth - horizontalPadding;
             height = width / aspectRatio;
+            if (maxZoomCoefficient === 1) {
+                // If the video feed is in SD, fix the height to avoid overlapping with Jane's logo
+                height = maxHeight - verticalPadding;
+            }
         } else if (height > maxHeight) {
-            height = maxHeight;
+            height = maxHeight - verticalPadding;
             width = height * aspectRatio;
         }
 
@@ -144,6 +154,45 @@ function computeCameraVideoSize( // eslint-disable-line max-params
     }
 }
 
+/**
+ * Returns a number of the max zoom coefficient, return 1 if the video stream is
+ * standard definition or low definition
+ *
+ * @param videoHeight the original video height
+ * @return number
+ */
+function getMaxZoomCoefficient(videoHeight) {
+    if (videoHeight <= SD_VIDEO_CONTAINER_HEIGHT) {
+        return 1;
+    }
+
+    return interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity;
+}
+
+/**
+ * Returns an array of the vertical padding & horizonal padding
+ * for SD & LD video stream.
+ *
+ * @param videoSpaceWidth the width of the video space
+ * @param videoSpaceHeight the height of the video space
+ * @param videoHeight the original video height
+ * @return an array with 2 elements, the video width and the video height
+ */
+function getPaddings(videoSpaceHeight, videoSpaceWidth, videoHeight) {
+    if (videoHeight <= SD_VIDEO_CONTAINER_HEIGHT) {
+        let verticalPadding = videoSpaceHeight * SD_VIDEO_CONTAINER_PADDING_PERCENTAGE * 2;
+        const horizontalPadding = videoSpaceWidth * SD_VIDEO_CONTAINER_PADDING_PERCENTAGE * 2;
+
+        if (verticalPadding < SD_VIDEO_CONTAINER_MIN_VERTICAL_PADDING) {
+            verticalPadding = SD_VIDEO_CONTAINER_MIN_VERTICAL_PADDING;
+        }
+
+        return [ verticalPadding, horizontalPadding ];
+    }
+
+    return [ 0, 0 ];
+}
+
 /**
  * Returns an array of the video horizontal and vertical indents,
  * so that if fits its parent.