Commit f57ec623 authored by Sudheer's avatar Sudheer Committed by sudheer
Browse files

MM-13166 Fix image dimentions for singleImage attachment (#2083)

parent ee4c80e4
......@@ -6,6 +6,7 @@ import React from 'react';
import {getFilePreviewUrl, getFileUrl} from 'mattermost-redux/utils/file_utils';
import {getFileDimensionsForDisplay} from 'utils/file_utils';
import {FileTypes} from 'utils/constants.jsx';
import {
getFileType,
......@@ -109,28 +110,6 @@ export default class SingleImageView extends React.PureComponent {
this.imageLoaded = node;
}
computeImageDimensions = () => {
const {fileInfo} = this.props;
const viewPortWidth = this.state.viewPortWidth;
let previewWidth = fileInfo.width;
let previewHeight = fileInfo.height;
if (viewPortWidth && previewWidth > viewPortWidth) {
const origRatio = fileInfo.height / fileInfo.width;
previewWidth = Math.min(PREVIEW_IMAGE_MAX_WIDTH, fileInfo.width, viewPortWidth);
previewHeight = previewWidth * origRatio;
}
if (previewHeight > PREVIEW_IMAGE_MAX_HEIGHT) {
const heightRatio = PREVIEW_IMAGE_MAX_HEIGHT / previewHeight;
previewHeight = PREVIEW_IMAGE_MAX_HEIGHT;
previewWidth *= heightRatio;
}
return {previewWidth, previewHeight};
}
toggleEmbedVisibility = () => {
this.props.actions.toggleEmbedVisibility(this.props.postId);
}
......@@ -142,7 +121,12 @@ export default class SingleImageView extends React.PureComponent {
viewPortWidth,
} = this.state;
const {previewHeight, previewWidth} = this.computeImageDimensions();
const maxWidth = viewPortWidth !== 0 && viewPortWidth < PREVIEW_IMAGE_MAX_WIDTH ? viewPortWidth : PREVIEW_IMAGE_MAX_WIDTH;
const dimensions = getFileDimensionsForDisplay(fileInfo, {maxHeight: PREVIEW_IMAGE_MAX_HEIGHT, maxWidth});
const previewHeight = dimensions.height;
const previewWidth = dimensions.width;
let minPreviewClass = '';
if (
previewWidth < PREVIEW_IMAGE_MIN_DIMENSION ||
......
......@@ -100,35 +100,6 @@ describe('components/SingleImageView', () => {
expect(wrapper.state('showPreviewModal')).toEqual(false);
});
test('should match dimensions on computeImageDimensions', () => {
const fileInfo = {
id: 'file_info_id',
post_id: 'post_id',
name: 'name',
extension: 'jpg',
has_preview_image: true,
width: 350,
height: 200,
};
const props = {...baseProps, fileInfo};
const wrapper = shallow(
<SingleImageView {...props}/>
);
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 200, previewWidth: 350});
wrapper.setState({viewPortWidth: 100});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 57.14285714285714, previewWidth: 100});
wrapper.setState({viewPortWidth: 500});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 200, previewWidth: 350});
fileInfo.height = 600;
wrapper.setProps({fileInfo});
wrapper.setState({viewPortWidth: 500});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 350, previewWidth: 204.16666666666669});
});
test('should call toggleEmbedVisibility with post id', () => {
const props = {
...baseProps,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment