fix: link preview without embed image (#4723)

* [FIX] Link preview with embed image

* refactor the location

* refactor and added test

* minor tweak

* image test

* fix the MessageURl showing when there isn't hasContent or imageUrl

* refactor how to test if it's an image

* update tests

* keep the same behavior for android and ios

* refactor

* update storyshot

* minor tweak, pass hasContent and imageLoadedState instead of style

* remove react memo from urlImage

* merge urlimage inside url

* minor tweak useTheme

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/containers/message/Message.stories.tsx

@@ -634,6 +634,28 @@ export const URL = () => (
 	</>
 );
 
+export const URLImagePreview = () => (
+	<>
+		<Message
+			urls={[
+				{
+					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif',
+					title: 'Google',
+					description:
+						"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for."
+				}
+			]}
+		/>
+		<Message
+			urls={[
+				{
+					url: 'https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-law.gif'
+				}
+			]}
+		/>
+	</>
+);
+
 export const CustomFields = () => (
 	<>
 		<Message

app/containers/message/Urls.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import FastImage from 'react-native-fast-image';
@@ -48,38 +48,34 @@ const styles = StyleSheet.create({
 		height: 150,
 		borderTopLeftRadius: 4,
 		borderTopRightRadius: 4
+	},
+	imageWithoutContent: {
+		borderRadius: 4
+	},
+	loading: {
+		height: 0,
+		borderWidth: 0
 	}
 });
 
-const UrlImage = React.memo(
-	({ image }: { image: string }) => {
-		const { baseUrl, user } = useContext(MessageContext);
-
-		if (!image) {
-			return null;
-		}
-
-		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 UrlContent = React.memo(
-	({ title, description, theme }: { title: string; description: string; theme: TSupportedThemes }) => (
+	({ title, description }: { title: string; description: string }) => {
-		<View style={styles.textContainer}>
+		const { colors } = useTheme();
-			{title ? (
+		return (
-				<Text style={[styles.title, { color: themes[theme].tintColor }]} numberOfLines={2}>
+			<View style={styles.textContainer}>
-					{title}
+				{title ? (
-				</Text>
+					<Text style={[styles.title, { color: colors.tintColor }]} numberOfLines={2}>
-			) : null}
+						{title}
-			{description ? (
+					</Text>
-				<Text style={[styles.description, { color: themes[theme].auxiliaryText }]} numberOfLines={2}>
+				) : null}
-					{description}
+				{description ? (
-				</Text>
+					<Text style={[styles.description, { color: colors.auxiliaryText }]} numberOfLines={2}>
-			) : null}
+						{description}
-		</View>
+					</Text>
-	),
+				) : null}
+			</View>
+		);
+	},
 	(prevProps, nextProps) => {
 		if (prevProps.title !== nextProps.title) {
 			return false;
@@ -87,16 +83,18 @@ const UrlContent = React.memo(
 		if (prevProps.description !== nextProps.description) {
 			return false;
 		}
-		if (prevProps.theme !== nextProps.theme) {
-			return false;
-		}
 		return true;
 	}
 );
 
+type TImageLoadedState = 'loading' | 'done' | 'error';
+
 const Url = React.memo(
 	({ url, index, theme }: { url: IUrl; index: number; theme: TSupportedThemes }) => {
-		if (!url || url?.ignoreParse) {
+		const [imageLoadedState, setImageLoadedState] = useState<TImageLoadedState>('loading');
+		const { baseUrl, user } = useContext(MessageContext);
+
+		if (!url || url?.ignoreParse || imageLoadedState === 'error') {
 			return null;
 		}
 
@@ -107,6 +105,13 @@ const Url = React.memo(
 			EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
 		};
 
+		const hasContent = url.title || url.description;
+
+		let image = url.image || url.url;
+		if (image) {
+			image = image.includes('http') ? image : `${baseUrl}/${image}?rc_uid=${user.id}&rc_token=${user.token}`;
+		}
+
 		return (
 			<Touchable
 				onPress={onPress}
@@ -118,13 +123,22 @@ const Url = React.memo(
 					{
 						backgroundColor: themes[theme].chatComponentBackground,
 						borderColor: themes[theme].borderColor
-					}
+					},
+					imageLoadedState === 'loading' && styles.loading
 				]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<>
-					<UrlImage image={url.image} />
+					{image ? (
-					<UrlContent title={url.title} description={url.description} theme={theme} />
+						<FastImage
+							source={{ uri: image }}
+							style={[styles.image, !hasContent && styles.imageWithoutContent, imageLoadedState === 'loading' && styles.loading]}
+							resizeMode={FastImage.resizeMode.cover}
+							onError={() => setImageLoadedState('error')}
+							onLoad={() => setImageLoadedState('done')}
+						/>
+					) : null}
+					{hasContent ? <UrlContent title={url.title} description={url.description} /> : null}
 				</>
 			</Touchable>
 		);
@@ -146,7 +160,6 @@ const Urls = React.memo(
 	(oldProps, newProps) => dequal(oldProps.urls, newProps.urls)
 );
 
-UrlImage.displayName = 'MessageUrlImage';
 UrlContent.displayName = 'MessageUrlContent';
 Url.displayName = 'MessageUrl';
 Urls.displayName = 'MessageUrls';