diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 55b90dd57f..da6632ebe9 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -12,18 +12,14 @@ overflow: hidden; } -.video_blurred { +.video_blurred_container { + height: 100%; + filter: blur(40px); + left: 0; + overflow: hidden; + position: absolute; + top: 0; width: 100%; - - &_container { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - overflow: hidden; - filter: blur(40px); - } } .videocontainer { diff --git a/interface_config.js b/interface_config.js index bd586baeed..6ec4accc3d 100644 --- a/interface_config.js +++ b/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 }; diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index 0c3fc5a42f..d331545826 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/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; - - 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; + 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 (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); - - availableWidth = videoWidth * zoomRate; - availableHeight = videoHeight * zoomRate; - } else if (availableHeight * aspectRatio < videoSpaceWidth) { - availableWidth = videoSpaceWidth; - availableHeight = availableWidth / aspectRatio; + let [ width, height] = computeCameraVideoSize( + videoWidth, + videoHeight, + videoSpaceWidth, + videoSpaceHeight, + videoSpaceRatio < aspectRatio ? 'height' : 'width'); + const maxWidth = videoSpaceWidth * maxZoomCoefficient; + const maxHeight = videoSpaceHeight * maxZoomCoefficient; + + 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 } diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index 05d017992b..b4f46c75d8 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -40,7 +40,6 @@ export default class LargeVideo extends Component {