fix: resolve some issues and improvements to url preview (#6563)

Author: diegolmello

app/containers/message/Components/WidthAwareView.tsx

@@ -5,7 +5,7 @@ export const WidthAwareContext = createContext(0);
 
 const styles = StyleSheet.create({
 	container: {
-		flexDirection: 'row'
+		flex: 1
 	}
 });
 
@@ -17,7 +17,7 @@ export const WidthAwareView = ({ children }: { children: ReactElement }) => {
 			style={styles.container}
 			onLayout={ev => {
 				if (ev.nativeEvent.layout.width) {
-					setWidth(ev.nativeEvent.layout.width);
+					setWidth(Math.floor(ev.nativeEvent.layout.width));
 				}
 			}}>
 			<WidthAwareContext.Provider value={width}>{children}</WidthAwareContext.Provider>

app/containers/message/Message.stories.tsx

@@ -11,6 +11,8 @@ import {
 	FONT_SCALE_LIMIT,
 	ResponsiveLayoutContext
 } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { mockedStore as store } from '../../reducers/mockedStore';
+import { updateSettings } from '../../actions/settings';
 
 const _theme = 'light';
 
@@ -34,6 +36,8 @@ const date = new Date(2017, 10, 10, 10);
 const longText =
 	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
 
+store.dispatch(updateSettings('API_Embed', true));
+
 const responsiveLayoutProviderLargeFontValue = (fontScale: number) => ({
 	fontScale,
 	fontScaleLimited: fontScale,
@@ -1271,7 +1275,7 @@ export const URL = () => (
 			urls={[
 				{
 					url: 'https://rocket.chat',
-					image: 'https://rocket.chat/images/blog/post.jpg',
+					image: 'https://open.rocket.chat/assets/logo.png',
 					title: 'Rocket.Chat - Free, Open Source, Enterprise Team Chat',
 					description:
 						'Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.'
@@ -1315,7 +1319,7 @@ export const URLLargeFont = () => (
 			urls={[
 				{
 					url: 'https://rocket.chat',
-					image: 'https://rocket.chat/images/blog/post.jpg',
+					image: 'https://open.rocket.chat/assets/logo.png',
 					title: 'Rocket.Chat - Free, Open Source, Enterprise Team Chat',
 					description:
 						'Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.'

app/containers/message/Message.tsx

@@ -19,6 +19,7 @@ import CallButton from './CallButton';
 import { IMessage, IMessageInner, IMessageTouchable } from './interfaces';
 import { useTheme } from '../../theme';
 import RightIcons from './Components/RightIcons';
+import { WidthAwareView } from './Components/WidthAwareView';
 import i18n from '../../i18n';
 import { getInfoMessage } from './utils';
 import MessageTime from './Time';
@@ -28,8 +29,9 @@ const MessageInner = React.memo((props: IMessageInner) => {
 	const { isLargeFontScale } = useResponsiveLayout();
 	const showTimeLarge = isLargeFontScale && props.isHeader;
 
+	let content;
 	if (props.isPreview) {
-		return (
+		content = (
 			<>
 				<User {...props} />
 				{showTimeLarge ? <MessageTime {...props} /> : null}
@@ -43,7 +45,7 @@ const MessageInner = React.memo((props: IMessageInner) => {
 	}
 
 	if (props.type === 'discussion-created') {
-		return (
+		content = (
 			<>
 				<User {...props} />
 				{showTimeLarge ? <MessageTime {...props} /> : null}
@@ -53,7 +55,7 @@ const MessageInner = React.memo((props: IMessageInner) => {
 	}
 
 	if (props.type === 'jitsi_call_started') {
-		return (
+		content = (
 			<>
 				<User {...props} />
 				<Content {...props} isInfo />
@@ -64,7 +66,7 @@ const MessageInner = React.memo((props: IMessageInner) => {
 	}
 
 	if (props.blocks && props.blocks.length) {
-		return (
+		content = (
 			<>
 				<User {...props} />
 				<Blocks {...props} />
@@ -75,20 +77,24 @@ const MessageInner = React.memo((props: IMessageInner) => {
 		);
 	}
 
-	return (
-		<>
-			<User {...props} />
-			{showTimeLarge ? <MessageTime {...props} /> : null}
-			<View style={{ gap: 4 }}>
-				<Content {...props} />
-				<Attachments {...props} />
-				<Urls {...props} />
-				<Thread {...props} />
-				<Reactions {...props} />
-				<Broadcast {...props} />
-			</View>
-		</>
-	);
+	if (!content) {
+		content = (
+			<>
+				<User {...props} />
+				{showTimeLarge ? <MessageTime {...props} /> : null}
+				<View style={{ gap: 4 }}>
+					<Content {...props} />
+					<Attachments {...props} />
+					<Urls {...props} />
+					<Thread {...props} />
+					<Reactions {...props} />
+					<Broadcast {...props} />
+				</View>
+			</>
+		);
+	}
+
+	return <WidthAwareView>{content}</WidthAwareView>;
 });
 MessageInner.displayName = 'MessageInner';
 

app/containers/message/Urls.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useEffect, useState } from 'react';
+import React, { ReactElement, useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Image } from 'expo-image';
@@ -15,19 +15,18 @@ import EventEmitter from '../../lib/methods/helpers/events';
 import I18n from '../../i18n';
 import MessageContext from './Context';
 import { IUrl } from '../../definitions';
-import { WidthAwareContext, WidthAwareView } from './Components/WidthAwareView';
+import { WidthAwareContext } from './Components/WidthAwareView';
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		flexDirection: 'column',
-		marginTop: 4,
 		gap: 4
 	},
 	textContainer: {
 		flex: 1,
 		flexDirection: 'column',
-		padding: 15,
+		padding: 12,
 		justifyContent: 'flex-start',
 		alignItems: 'flex-start'
 	},
@@ -40,10 +39,8 @@ const styles = StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	loading: {
-		height: 1,
-		width: 1,
-		borderWidth: 0,
-		marginTop: 0
+		flex: 1,
+		height: 150
 	}
 });
 
@@ -66,69 +63,63 @@ const UrlContent = ({ title, description }: { title: string; description: string
 };
 const UrlImage = ({ image, hasContent }: { image: string; hasContent: boolean }) => {
 	const { colors } = useTheme();
-	const [imageLoadedState, setImageLoadedState] = useState<TImageLoadedState>('loading');
 	const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
 	const maxSize = useContext(WidthAwareContext);
 
-	useEffect(() => {
-		if (image) {
+	useLayoutEffect(() => {
+		if (image && maxSize) {
 			Image.loadAsync(image, {
 				onError: () => {
-					setImageLoadedState('error');
-				}
+					setImageDimensions({ width: -1, height: -1 });
+				},
+				maxWidth: maxSize
 			}).then(image => {
 				setImageDimensions({ width: image.width, height: image.height });
 			});
 		}
-	}, [image]);
+	}, [image, maxSize]);
 
-	let imageStyle = {};
-	let containerStyle: ViewStyle = {};
+	if (!imageDimensions.width || !imageDimensions.height) {
+		return <View style={styles.loading} />;
+	}
+	if (imageDimensions.width === -1) {
+		return null;
+	}
 
-	if (imageLoadedState === 'done') {
-		const width = Math.min(imageDimensions.width, maxSize) || 0;
-		const height = Math.min((imageDimensions.height * ((width * 100) / imageDimensions.width)) / 100, maxSize) || 0;
-		imageStyle = {
-			width,
-			height
-		};
+	const width = Math.min(imageDimensions.width, maxSize) || 0;
+	const height = Math.min((imageDimensions.height * ((width * 100) / imageDimensions.width)) / 100, maxSize) || 0;
+	const imageStyle = {
+		width,
+		height
+	};
+	let containerStyle: ViewStyle = {
+		overflow: 'hidden',
+		alignItems: 'center',
+		justifyContent: 'center',
+		...(imageDimensions.width <= 64 && { width: 64 }),
+		...(imageDimensions.height <= 64 && { height: 64 })
+	};
+	if (!hasContent) {
 		containerStyle = {
-			overflow: 'hidden',
-			alignItems: 'center',
-			justifyContent: 'center',
-			...(imageDimensions.width <= 64 && { width: 64 }),
-			...(imageDimensions.height <= 64 && { height: 64 })
+			...containerStyle,
+			borderColor: colors.strokeLight,
+			borderWidth: 1,
+			borderRadius: 4
 		};
-		if (!hasContent) {
-			containerStyle = {
-				...containerStyle,
-				borderColor: colors.strokeLight,
-				borderWidth: 1,
-				borderRadius: 4
-			};
-		}
 	}
 
 	return (
 		<View style={containerStyle}>
-			<Image
-				source={{ uri: image }}
-				style={[imageStyle, imageLoadedState === 'loading' && styles.loading]}
-				contentFit='contain'
-				onError={() => setImageLoadedState('error')}
-				onLoad={() => setImageLoadedState('done')}
-			/>
+			<Image source={{ uri: image }} style={imageStyle} contentFit='contain' />
 		</View>
 	);
 };
 
-type TImageLoadedState = 'loading' | 'done' | 'error';
-
 const Url = ({ url }: { url: IUrl }) => {
 	const { colors, theme } = useTheme();
 	const { baseUrl, user } = useContext(MessageContext);
 	const API_Embed = useAppSelector(state => state.settings.API_Embed);
-	const [imageUrl, setImageUrl] = useState('');
+	const [imageUrl, setImageUrl] = useState(url.image);
 
 	useEffect(() => {
 		const verifyUrlIsImage = async () => {
@@ -165,7 +156,7 @@ const Url = ({ url }: { url: IUrl }) => {
 
 	const hasContent = !!(url.title || url.description);
 
-	if (!url || url?.ignoreParse || !API_Embed || !hasContent) {
+	if (!url || url?.ignoreParse || !API_Embed) {
 		return null;
 	}
 
@@ -185,11 +176,7 @@ const Url = ({ url }: { url: IUrl }) => {
 			]}
 			background={Touchable.Ripple(colors.surfaceNeutral)}>
 			<>
-				{imageUrl ? (
-					<WidthAwareView>
-						<UrlImage image={imageUrl} hasContent={hasContent} />
-					</WidthAwareView>
-				) : null}
+				{imageUrl ? <UrlImage image={imageUrl} hasContent={hasContent} /> : null}
 				{hasContent ? <UrlContent title={url.title} description={url.description} /> : null}
 			</>
 		</Touchable>