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

MM-31341 Use first metadata info for inline md images (#5219)

Browse source 
* MM-31341 Use first metadata info for inline md images

* Revert back opening an inline image link
This commit is contained in:
Elias Nahum 2021-03-15 14:28:46 -03:00 committed by GitHub
parent 09386d9fde
commit 89c23f4f91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/components/markdown/markdown.js
View file

@ -288,6 +288,7 @@ export default class Markdown extends PureComponent {
if (!first) {
blockStyle.push(this.props.blockStyles.adjacentParagraph);
}
return (
<View style={blockStyle}>
<Text>

2
app/components/markdown/markdown_image/markdown_image.js
View file

@ -50,7 +50,7 @@ export default class MarkdownImage extends ImageViewPort {
constructor(props) {
super(props);
const metadata = props.imagesMetadata?.[props.source];
const metadata = props.imagesMetadata?.[props.source] || Object.values(props.imagesMetadata || {})[0];
this.fileId = generateId();
this.state = {
originalHeight: metadata?.height || 0,

3
app/components/progressive_image/__snapshots__/progressive_image.test.js.snap
View file

@ -6,6 +6,7 @@ exports[`ProgressiveImage should match snapshot for BackgroundImage 1`] = `
Array [
Object {
"alignItems": "center",
"backgroundColor": "rgba(61,60,64,0.08)",
"justifyContent": "center",
},
Object {},
@ -41,6 +42,7 @@ exports[`ProgressiveImage should match snapshot for Default Image 1`] = `
Array [
Object {
"alignItems": "center",
"backgroundColor": "rgba(61,60,64,0.08)",
"justifyContent": "center",
},
Object {},
@ -76,6 +78,7 @@ exports[`ProgressiveImage should match snapshot for Image 1`] = `
Array [
Object {
"alignItems": "center",
"backgroundColor": "rgba(61,60,64,0.08)",
"justifyContent": "center",
},
Object {},

1
app/components/progressive_image/progressive_image.js
View file

@ -224,6 +224,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
defaultImageContainer: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
},
defaultImageTint: {
flex: 1,

2
app/constants/image.js
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
export const IMAGE_MAX_HEIGHT = 350;
export const IMAGE_MIN_DIMENSION = 50;
export const IMAGE_MIN_DIMENSION = 16;
export const MAX_GIF_SIZE = 100 * 1024 * 1024;
export const VIEWPORT_IMAGE_OFFSET = 70;
export const VIEWPORT_IMAGE_REPLY_OFFSET = 11;

3
app/screens/gallery/gallery_viewer.tsx
View file

@ -8,7 +8,7 @@ import Animated, {abs, add, and, call, clockRunning, cond, divide, eq, floor, gr
import {clamp, snapPoint, timing, useClock, usePanGestureHandler, usePinchGestureHandler, useTapGestureHandler, useValue, vec} from 'react-native-redash/lib/module/v1';
import {isImage, isVideo} from '@utils/file';
import {calculateDimensions} from '@utils/images';
import {makeStyleSheetFromTheme} from '@utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import type {GalleryProps} from 'types/screens/gallery';
@ -147,6 +147,7 @@ const GalleryViewer = (props: GalleryProps) => {
>
<GalleryImage
style={{
backgroundColor: changeOpacity(props.theme.centerChannelColor, 0.08),
transform: [
{translateX: cond(isActive, translate.x, 0)},
{translateY: cond(isActive, translate.y, 0)},

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

@ -28,24 +28,24 @@ describe('Images calculateDimensions', () => {
});
});
it('image smaller than 50x50 should return 50x50', () => {
const {height, width} = calculateDimensions(20, 20, PORTRAIT_VIEWPORT);
it('image smaller than 16x16 should return 16x16', () => {
const {height, width} = calculateDimensions(15, 15, PORTRAIT_VIEWPORT);
expect(height).toEqual(IMAGE_MIN_DIMENSION);
expect(width).toEqual(IMAGE_MIN_DIMENSION);
});
it('images with height below 50 should return height of 50', () => {
const {height} = calculateDimensions(45, 100, PORTRAIT_VIEWPORT);
it('images with height below 16 should return height of 16', () => {
const {height} = calculateDimensions(15, 100, PORTRAIT_VIEWPORT);
expect(height).toEqual(IMAGE_MIN_DIMENSION);
});
it('images with width below 50 should return width of 50', () => {
const {width} = calculateDimensions(100, 45, PORTRAIT_VIEWPORT);
it('images with width below 16 should return width of 16', () => {
const {width} = calculateDimensions(100, 15, PORTRAIT_VIEWPORT);
expect(width).toEqual(IMAGE_MIN_DIMENSION);
});
it('images with that are 50x50 should return the same size', () => {
const {height, width} = calculateDimensions(50, 50, PORTRAIT_VIEWPORT);
it('images with that are 16x16 should return the same size', () => {
const {height, width} = calculateDimensions(16, 16, PORTRAIT_VIEWPORT);
expect(height).toEqual(IMAGE_MIN_DIMENSION);
expect(width).toEqual(IMAGE_MIN_DIMENSION);
});
@ -77,9 +77,9 @@ describe('Images calculateDimensions', () => {
expect(height).toEqual(340);
});
it('images with height below 50 but setting to 50 will make the width exceed the view port width should remain as is', () => {
const {height, width} = calculateDimensions(45, 310, PORTRAIT_VIEWPORT);
expect(height).toEqual(45);
it('images with height below 16 but setting to 50 will make the width exceed the view port width should remain as is', () => {
const {height, width} = calculateDimensions(15, 310, PORTRAIT_VIEWPORT);
expect(height).toEqual(15);
expect(width).toEqual(310);
});