fix(videolayout): Resize calculations
This commit is contained in:
parent
0aee5e5b48
commit
c250da59d5
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue