toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-13368 Do not truncate tall images in preview screen (#2438)

Browse source 
* MM-13368 Do not truncate tall images in preview screen

* Add unit test for viewport max height

* Fix typo
This commit is contained in:
Elias Nahum 2018-12-10 09:02:56 -03:00
parent a85a3bf5d9
commit 27247a4982
No known key found for this signature in database
GPG key ID: E038DB71E0B61702
3 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/screens/image_preview/image_preview.js
View file

@ -338,10 +338,12 @@ export default class ImagePreview extends PureComponent {
renderImageComponent = (imageProps, imageDimensions) => {
if (imageDimensions) {
const {deviceHeight, deviceWidth} = this.props;
const {height, width} = imageDimensions;
const {style, ...otherProps} = imageProps;
const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20;
const flattenStyle = StyleSheet.flatten(style);
const calculatedDimensions = calculateDimensions(height, width, flattenStyle.width, flattenStyle.height);
const calculatedDimensions = calculateDimensions(height, width, deviceWidth, deviceHeight - statusBar);
const imageStyle = {...flattenStyle, ...calculatedDimensions};
return (
@ -376,12 +378,13 @@ export default class ImagePreview extends PureComponent {
renderVideoPreview = (file) => {
const {deviceHeight, deviceWidth, theme} = this.props;
const statusBar = DeviceTypes.IS_IPHONE_X ? 0 : 20;
return (
<VideoPreview
file={file}
onFullScreen={this.setHeaderAndFooterVisible}
deviceHeight={deviceHeight}
deviceHeight={deviceHeight - statusBar}
deviceWidth={deviceWidth}
theme={theme}
/>

3
app/utils/images.js
View file

@ -34,6 +34,9 @@ export const calculateDimensions = (height, width, viewPortWidth = 0, viewPortHe
) {
imageHeight = IMAGE_MIN_DIMENSION;
imageWidth = imageHeight * heightRatio;
} else if (viewPortHeight && imageHeight > viewPortHeight) {
imageHeight = viewPortHeight;
imageWidth = imageHeight * heightRatio;
}
return {

5
app/utils/images.test.js
View file

@ -62,4 +62,9 @@ describe('Images calculateDimensions', () => {
expect(height).toEqual(45);
expect(width).toEqual(310);
});
it('Set the viewPort height defined should return the image capped to the viewport', () => {
const {height} = calculateDimensions(1334, 750, PORTRAIT_VIEWPORT, 500);
expect(height).toEqual(500);
});
});