From 0d528bd9ae665891ceed92803be5b0d2046f916c Mon Sep 17 00:00:00 2001
From: Sumukha Hegde <SUMUKHA214@GMAIL.COM>
Date: Fri, 27 Aug 2021 19:37:16 +0530
Subject: [PATCH] [FIX] Show thumbnails in message view (#2975)

* [FIX] Show thumbnails in message view

fixes: #2853

* Add stories for thumbnails and update test

* [Test] Update tests

* added stories

Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
Co-authored-by: Levy Costa <levycosta471@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../__snapshots__/Storyshots.test.js.snap     | 446 ++++++++++++++++++
 app/containers/message/Reply.js               |  33 +-
 storybook/stories/Message.js                  |  13 +
 3 files changed, 489 insertions(+), 3 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 84457cec0..6f0df6b98 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -20361,6 +20361,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
                     }
                   }
                 >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                   <View
                     style={
                       Object {
@@ -20562,6 +20571,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
                     }
                   }
                 >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                   <View
                     style={
                       Object {
@@ -20763,6 +20781,15 @@ exports[`Storyshots Message Colored attachments 1`] = `
                     }
                   }
                 >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                   <View
                     style={
                       Object {
@@ -43340,6 +43367,407 @@ exports[`Storyshots Message Temp 1`] = `
 </RCTScrollView>
 `;
 
+exports[`Storyshots Message Thumbnail from server 1`] = `
+<RCTScrollView
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+    }
+  }
+>
+  <View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": null,
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 4,
+                    "height": 36,
+                    "width": 36,
+                  },
+                  Object {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=36",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  }
+                }
+              >
+                <View
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "flexShrink": 1,
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "500",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "#0d0e12",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 12,
+                        "fontWeight": "400",
+                        "marginLeft": 8,
+                        "textAlign": "left",
+                      },
+                      Object {
+                        "color": "#9ca2a8",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
+              </View>
+              <View>
+                <Text
+                  numberOfLines={0}
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      Object {
+                        "color": "#2f343d",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessibilityLabel="this is a thumbnail"
+                    numberOfLines={0}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        Array [
+                          Object {},
+                          Object {
+                            "alignItems": "flex-start",
+                            "flexDirection": "row",
+                            "flexWrap": "wrap",
+                            "justifyContent": "flex-start",
+                            "marginBottom": 0,
+                            "marginTop": 0,
+                          },
+                        ],
+                      ]
+                    }
+                  >
+                    this is a thumbnail
+                  </Text>
+                </Text>
+              </View>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "#f3f4f5",
+                    "borderColor": "#e1e5e8",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 6,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "flex": 1,
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "500",
+                            "marginBottom": 3,
+                            "textAlign": "left",
+                          },
+                          Object {
+                            "color": "#2f343d",
+                          },
+                        ]
+                      }
+                    >
+                      Joker
+                    </Text>
+                  </View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "overflow": "hidden",
+                        },
+                        Object {
+                          "borderTopLeftRadius": 4,
+                          "borderTopRightRadius": 4,
+                          "flex": 1,
+                          "height": 200,
+                          "marginBottom": 1,
+                          "width": null,
+                        },
+                      ]
+                    }
+                  >
+                    <FastImageView
+                      resizeMode="cover"
+                      source={
+                        Object {
+                          "uri": "https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg",
+                        }
+                      }
+                      style={
+                        Object {
+                          "bottom": 0,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    />
+                  </View>
+                  <Text
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        undefined,
+                        Object {
+                          "color": "#2f343d",
+                        },
+                      ]
+                    }
+                  >
+                    <Text
+                      accessibilityLabel="Some crazy texts"
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "fontFamily": "System",
+                            "fontSize": 16,
+                            "fontWeight": "400",
+                            "textAlign": "left",
+                          },
+                          Array [
+                            Object {},
+                            Object {
+                              "alignItems": "flex-start",
+                              "flexDirection": "row",
+                              "flexWrap": "wrap",
+                              "justifyContent": "flex-start",
+                              "marginBottom": 0,
+                              "marginTop": 0,
+                            },
+                          ],
+                        ]
+                      }
+                    >
+                      Some crazy texts
+                    </Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`Storyshots Message Time format 1`] = `
 <RCTScrollView
   style={
@@ -47162,6 +47590,15 @@ exports[`Storyshots Message With file 1`] = `
                     }
                   }
                 >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                   <Text
                     style={
                       Array [
@@ -47380,6 +47817,15 @@ exports[`Storyshots Message With file 1`] = `
                     }
                   }
                 >
+                  <View
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                      }
+                    }
+                  />
                   <Text
                     style={
                       Array [
diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js
index 5dcf0447f..6faaf5109 100644
--- a/app/containers/message/Reply.js
+++ b/app/containers/message/Reply.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { transparentize } from 'color2k';
 import { dequal } from 'dequal';
+import FastImage from '@rocket.chat/react-native-fast-image';
 
 import Touchable from './Touchable';
 import Markdown from '../markdown';
@@ -66,17 +67,29 @@ const styles = StyleSheet.create({
 	},
 	marginBottom: {
 		marginBottom: 4
+	},
+	image: {
+		width: null,
+		height: 200,
+		flex: 1,
+		borderTopLeftRadius: 4,
+		borderTopRightRadius: 4,
+		marginBottom: 1
+	},
+	title: {
+		flex: 1,
+		fontSize: 16,
+		marginBottom: 3,
+		...sharedStyles.textMedium
 	}
 });
 
 const Title = React.memo(({ attachment, timeFormat, theme }) => {
-	if (!attachment.author_name) {
-		return null;
-	}
 	const time = attachment.message_link && attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
 	return (
 		<View style={styles.authorContainer}>
 			{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].bodyText }]}>{attachment.author_name}</Text> : null}
+			{attachment.title ? <Text style={[styles.title, { color: themes[theme].bodyText }]}>{attachment.title}</Text> : null}
 			{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{ time }</Text> : null}
 		</View>
 	);
@@ -112,6 +125,15 @@ const Description = React.memo(({
 	return true;
 });
 
+const UrlImage = React.memo(({ image }) => {
+	if (!image) {
+		return null;
+	}
+	const { baseUrl, user } = useContext(MessageContext);
+	image = image.includes('http') ? image : `${ baseUrl }/${ image }?rc_uid=${ user.id }&rc_token=${ user.token }`;
+	return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
+}, (prevProps, nextProps) => prevProps.image === nextProps.image);
+
 const Fields = React.memo(({ attachment, theme, getCustomEmoji }) => {
 	if (!attachment.fields) {
 		return null;
@@ -191,6 +213,7 @@ const Reply = React.memo(({
 						timeFormat={timeFormat}
 						theme={theme}
 					/>
+					<UrlImage image={attachment.thumb_url} />
 					<Description
 						attachment={attachment}
 						getCustomEmoji={getCustomEmoji}
@@ -223,6 +246,10 @@ Reply.propTypes = {
 };
 Reply.displayName = 'MessageReply';
 
+UrlImage.propTypes = {
+	image: PropTypes.string
+};
+
 Title.propTypes = {
 	attachment: PropTypes.object,
 	timeFormat: PropTypes.string,
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 6d6d2b4f1..015ab6f20 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -854,3 +854,16 @@ stories.add('Ignored', () => (
 stories.add('Custom style', () => (
 	<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
 ));
+
+stories.add('Thumbnail from server', () => (
+	<Message
+		msg='this is a thumbnail'
+		attachments={[{
+			text: 'Some crazy texts',
+			thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
+			title: 'Joker',
+			title_link: 'https://www.imdb.com/title/tt7286456/'
+		}]}
+	/>
+));
+