fix(videolayout): Resize calculations
This commit is contained in:
parent
0aee5e5b48
commit
c250da59d5
|
@ -12,18 +12,14 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video_blurred {
|
.video_blurred_container {
|
||||||
|
height: 100%;
|
||||||
|
filter: blur(40px);
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&_container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
filter: blur(40px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.videocontainer {
|
.videocontainer {
|
||||||
|
|
|
@ -94,5 +94,11 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
MOBILE_APP_PROMO: true,
|
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
|
MAXIMUM_ZOOMING_COEFFICIENT: 1.3
|
||||||
};
|
};
|
||||||
|
|
|
@ -78,44 +78,44 @@ function computeDesktopVideoSize(videoWidth,
|
||||||
function computeCameraVideoSize(videoWidth,
|
function computeCameraVideoSize(videoWidth,
|
||||||
videoHeight,
|
videoHeight,
|
||||||
videoSpaceWidth,
|
videoSpaceWidth,
|
||||||
videoSpaceHeight) {
|
videoSpaceHeight,
|
||||||
|
videoLayoutFit) {
|
||||||
const aspectRatio = videoWidth / videoHeight;
|
const aspectRatio = videoWidth / videoHeight;
|
||||||
let availableWidth = videoWidth;
|
switch (videoLayoutFit) {
|
||||||
let availableHeight = videoHeight;
|
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') {
|
if (videoSpaceRatio === aspectRatio) {
|
||||||
availableHeight = videoSpaceHeight;
|
return [videoSpaceWidth, 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 (aspectRatio <= 1) {
|
let [ width, height] = computeCameraVideoSize(
|
||||||
const zoomRateHeight = videoSpaceHeight / videoHeight;
|
videoWidth,
|
||||||
const zoomRateWidth = videoSpaceWidth / videoWidth;
|
videoHeight,
|
||||||
const zoomRate = Math.min(
|
videoSpaceWidth,
|
||||||
zoomRateWidth,
|
videoSpaceHeight,
|
||||||
zoomRateHeight,
|
videoSpaceRatio < aspectRatio ? 'height' : 'width');
|
||||||
interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
|
const maxWidth = videoSpaceWidth * maxZoomCoefficient;
|
||||||
|
const maxHeight = videoSpaceHeight * maxZoomCoefficient;
|
||||||
|
|
||||||
availableWidth = videoWidth * zoomRate;
|
if (width > maxWidth) {
|
||||||
availableHeight = videoHeight * zoomRate;
|
width = maxWidth;
|
||||||
} else if (availableHeight * aspectRatio < videoSpaceWidth) {
|
height = width / aspectRatio;
|
||||||
availableWidth = videoSpaceWidth;
|
} else if (height > maxHeight) {
|
||||||
availableHeight = availableWidth / aspectRatio;
|
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,
|
return computeCameraVideoSize(width,
|
||||||
height,
|
height,
|
||||||
containerWidth,
|
containerWidth,
|
||||||
containerHeight);
|
containerHeight,
|
||||||
|
interfaceConfig.VIDEO_LAYOUT_FIT);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -355,8 +356,11 @@ export class VideoContainer extends LargeContainer {
|
||||||
let [ width, height ]
|
let [ width, height ]
|
||||||
= this.getVideoSize(containerWidth, containerHeight);
|
= this.getVideoSize(containerWidth, containerHeight);
|
||||||
|
|
||||||
if (containerWidth > width) {
|
if ((containerWidth > width) || (containerHeight > height)) {
|
||||||
this._showVideoBackground();
|
this._showVideoBackground();
|
||||||
|
const css = containerWidth > width
|
||||||
|
? {width: '100%', height: 'auto'} : {width: 'auto', height: '100%'};
|
||||||
|
this.$videoBackground.css(css);
|
||||||
}
|
}
|
||||||
|
|
||||||
let { horizontalIndent, verticalIndent }
|
let { horizontalIndent, verticalIndent }
|
||||||
|
|
|
@ -40,7 +40,6 @@ export default class LargeVideo extends Component {
|
||||||
<div className = 'video_blurred_container'>
|
<div className = 'video_blurred_container'>
|
||||||
<video
|
<video
|
||||||
autoPlay = { true }
|
autoPlay = { true }
|
||||||
className = 'video_blurred'
|
|
||||||
id = 'largeVideoBackground'
|
id = 'largeVideoBackground'
|
||||||
muted = 'true' />
|
muted = 'true' />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue