From 07ff66726c3b1ef771de73d3d74f9988673cfbf9 Mon Sep 17 00:00:00 2001
From: Saturnino Abril <saturnino.abril@gmail.com>
Date: Mon, 1 Oct 2018 09:34:30 +0800
Subject: [PATCH] add border to image of link preview and not allow such image
 width to exceed the view port width (#2189)

---
 .../post_attachment_opengraph.test.js.snap      | 17 +++++++++++------
 .../post_attachment_opengraph.js                |  8 ++++++--
 .../post_attachment_opengraph.test.js           |  6 +++---
 app/utils/images.js                             |  5 ++++-
 app/utils/images.test.js                        |  6 ++++++
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
index 6b6646c4b..73cdfd228 100644
--- a/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
+++ b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
@@ -6,7 +6,8 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
 <Component
   style={
     Object {
-      "borderColor": "rgba(170,170,170,0.2)",
+      "borderColor": "rgba(61,60,64,0.2)",
+      "borderRadius": 3,
       "borderWidth": 1,
       "flex": 1,
       "marginTop": 10,
@@ -26,7 +27,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
       numberOfLines={1}
       style={
         Object {
-          "color": "rgba(170,170,170,0.5)",
+          "color": "rgba(61,60,64,0.5)",
           "fontSize": 12,
           "marginBottom": 10,
         }
@@ -58,7 +59,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
         style={
           Array [
             Object {
-              "color": undefined,
+              "color": "#2389d7",
               "fontSize": 14,
               "marginBottom": 10,
             },
@@ -90,7 +91,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescr
     numberOfLines={5}
     style={
       Object {
-        "color": "rgba(170,170,170,0.7)",
+        "color": "rgba(61,60,64,0.7)",
         "fontSize": 13,
         "marginBottom": 10,
       }
@@ -108,6 +109,10 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
   style={
     Object {
       "alignItems": "center",
+      "borderColor": "rgba(61,60,64,0.2)",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "marginTop": 5,
     }
   }
 >
@@ -116,7 +121,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
     style={
       Object {
         "height": 150,
-        "width": 312,
+        "width": 307,
       }
     }
   >
@@ -129,7 +134,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
           },
           Object {
             "height": 150,
-            "width": 312,
+            "width": 307,
           },
         ]
       }
diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
index 859f34594..eb0411666 100644
--- a/app/components/post_attachment_opengraph/post_attachment_opengraph.js
+++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.js
@@ -19,7 +19,7 @@ import {getNearestPoint} from 'app/utils/opengraph';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 const MAX_IMAGE_HEIGHT = 150;
-const VIEWPORT_IMAGE_OFFSET = 88;
+const VIEWPORT_IMAGE_OFFSET = 93;
 const VIEWPORT_IMAGE_REPLY_OFFSET = 13;
 
 export default class PostAttachmentOpenGraph extends PureComponent {
@@ -216,7 +216,6 @@ export default class PostAttachmentOpenGraph extends PureComponent {
                     style={{width, height}}
                 >
                     <Image
-                        ref='image'
                         style={[style.image, {width, height}]}
                         source={source}
                         resizeMode='contain'
@@ -273,6 +272,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flex: 1,
             borderColor: changeOpacity(theme.centerChannelColor, 0.2),
             borderWidth: 1,
+            borderRadius: 3,
             marginTop: 10,
             padding: 10,
         },
@@ -300,6 +300,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         imageContainer: {
             alignItems: 'center',
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2),
+            borderWidth: 1,
+            borderRadius: 3,
+            marginTop: 5,
         },
         image: {
             borderRadius: 3,
diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
index 4acb18392..3a02a0467 100644
--- a/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
+++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
@@ -9,6 +9,8 @@ import {
     TouchableOpacity,
 } from 'react-native';
 
+import Preferences from 'mattermost-redux/constants/preferences';
+
 import PostAttachmentOpenGraph from './post_attachment_opengraph';
 
 describe('PostAttachmentOpenGraph', () => {
@@ -26,9 +28,7 @@ describe('PostAttachmentOpenGraph', () => {
         isReplyPost: false,
         link: 'https://mattermost.com/',
         navigator: {},
-        theme: {
-            centerChannelColor: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
     };
 
     test('should match snapshot, without image and description', () => {
diff --git a/app/utils/images.js b/app/utils/images.js
index 1b7f0419d..bc284a208 100644
--- a/app/utils/images.js
+++ b/app/utils/images.js
@@ -28,7 +28,10 @@ export const calculateDimensions = (height, width, viewPortWidth = 0, viewPortHe
     ) {
         imageHeight = viewPortHeight || IMAGE_MAX_HEIGHT;
         imageWidth = imageHeight * heightRatio;
-    } else if (imageHeight < IMAGE_MIN_DIMENSION) {
+    } else if (
+        imageHeight < IMAGE_MIN_DIMENSION &&
+        IMAGE_MIN_DIMENSION * heightRatio <= viewPortWidth
+    ) {
         imageHeight = IMAGE_MIN_DIMENSION;
         imageWidth = imageHeight * heightRatio;
     }
diff --git a/app/utils/images.test.js b/app/utils/images.test.js
index 9f1a57f6c..d32b75a05 100644
--- a/app/utils/images.test.js
+++ b/app/utils/images.test.js
@@ -56,4 +56,10 @@ describe('Images calculateDimensions', () => {
         const {height} = calculateDimensions(1920, 1080, PORTRAIT_VIEWPORT, 340);
         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);
+        expect(width).toEqual(310);
+    });
 });