From 89c23f4f91b6b1d454398ecf6fa6d36e2bbbce8c Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Mon, 15 Mar 2021 14:28:46 -0300 Subject: [PATCH] MM-31341 Use first metadata info for inline md images (#5219) * MM-31341 Use first metadata info for inline md images * Revert back opening an inline image link --- app/components/markdown/markdown.js | 1 + .../markdown/markdown_image/markdown_image.js | 2 +- .../progressive_image.test.js.snap | 3 +++ .../progressive_image/progressive_image.js | 1 + app/constants/image.js | 2 +- app/screens/gallery/gallery_viewer.tsx | 3 ++- app/utils/images.test.js | 22 +++++++++---------- 7 files changed, 20 insertions(+), 14 deletions(-) diff --git a/app/components/markdown/markdown.js b/app/components/markdown/markdown.js index b5315d98f..6b4785a5f 100644 --- a/app/components/markdown/markdown.js +++ b/app/components/markdown/markdown.js @@ -288,6 +288,7 @@ export default class Markdown extends PureComponent { if (!first) { blockStyle.push(this.props.blockStyles.adjacentParagraph); } + return ( diff --git a/app/components/markdown/markdown_image/markdown_image.js b/app/components/markdown/markdown_image/markdown_image.js index 35cb93196..2bbc585bf 100644 --- a/app/components/markdown/markdown_image/markdown_image.js +++ b/app/components/markdown/markdown_image/markdown_image.js @@ -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, diff --git a/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap b/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap index f8c2b340b..b926c8bfc 100644 --- a/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap +++ b/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap @@ -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 {}, diff --git a/app/components/progressive_image/progressive_image.js b/app/components/progressive_image/progressive_image.js index bcba39af7..59d5dc229 100644 --- a/app/components/progressive_image/progressive_image.js +++ b/app/components/progressive_image/progressive_image.js @@ -224,6 +224,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { defaultImageContainer: { alignItems: 'center', justifyContent: 'center', + backgroundColor: changeOpacity(theme.centerChannelColor, 0.08), }, defaultImageTint: { flex: 1, diff --git a/app/constants/image.js b/app/constants/image.js index 448a80912..4b6ab6d2e 100644 --- a/app/constants/image.js +++ b/app/constants/image.js @@ -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; diff --git a/app/screens/gallery/gallery_viewer.tsx b/app/screens/gallery/gallery_viewer.tsx index 59d0bafd4..bdc24a062 100644 --- a/app/screens/gallery/gallery_viewer.tsx +++ b/app/screens/gallery/gallery_viewer.tsx @@ -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) => { > { }); }); - 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); });