feat: Display base64 image preview (RocketChat#5965)

Co-authored-by: Diego Mello <diegolmello@gmail.com>
Co-authored-by: OtavioStasiak <otaviostasiakmusic@outlook.com>

Author: 3 people

app/containers/message/Components/Attachments/Attachments.tsx

@@ -33,6 +33,8 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 						isReply={isReply}
 						author={author}
 						msg={msg}
+						imagePreview={file.image_preview}
+						imageType={file.image_type}
 					/>
 				);
 			}

app/containers/message/Components/Attachments/Image/Container.tsx

@@ -16,15 +16,17 @@ const ImageContainer = ({
 	style,
 	isReply,
 	author,
-	msg
+	msg,
+	imagePreview,
+	imageType
 }: IImageContainer): React.ReactElement | null => {
 	const { user } = useContext(MessageContext);
 	const { status, onPress, url, isEncrypted } = useMediaAutoDownload({ file, author, showAttachment });
 
 	const image = (
 		<Button onPress={onPress}>
 			<WidthAwareView>
-				<MessageImage uri={url} status={status} encrypted={isEncrypted} />
+				<MessageImage uri={url} status={status} encrypted={isEncrypted} imagePreview={imagePreview} imageType={imageType} />
 			</WidthAwareView>
 		</Button>
 	);

app/containers/message/Components/Attachments/Image/Image.tsx

@@ -9,7 +9,7 @@ import OverlayComponent from '../../OverlayComponent';
 import { IMessageImage } from './definitions';
 import { WidthAwareContext } from '../../WidthAwareView';
 
-export const MessageImage = React.memo(({ uri, status, encrypted = false }: IMessageImage) => {
+export const MessageImage = React.memo(({ uri, status, encrypted = false, imagePreview, imageType }: IMessageImage) => {
 	const { colors } = useTheme();
 	const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
 	const maxSize = useContext(WidthAwareContext);
@@ -48,7 +48,7 @@ export const MessageImage = React.memo(({ uri, status, encrypted = false }: IMes
 		return (
 			<>
 				<View style={styles.image} />
-				<OverlayComponent loading={false} style={styles.image} iconName='encrypted' />
+				<OverlayComponent loading={false} style={styles.image} iconName='encrypted' showBackground={true} />
 			</>
 		);
 	}
@@ -59,15 +59,21 @@ export const MessageImage = React.memo(({ uri, status, encrypted = false }: IMes
 				<View style={[containerStyle, borderStyle]}>
 					<ExpoImage style={imageStyle} source={{ uri: encodeURI(uri) }} contentFit='cover' />
 				</View>
-			) : (
-				<View style={[styles.image, borderStyle]} />
-			)}
+			) : null}
 			{['loading', 'to-download'].includes(status) || (status === 'downloaded' && !showImage) ? (
-				<OverlayComponent
-					loading={['loading', 'downloaded'].includes(status)}
-					style={[styles.image, borderStyle]}
-					iconName='arrow-down-circle'
-				/>
+				<>
+					{imagePreview && imageType && !encrypted ? (
+						<ExpoImage style={styles.image} source={{ uri: `data:${imageType};base64,${imagePreview}` }} contentFit='cover' />
+					) : (
+						<View style={[styles.image, borderStyle]} />
+					)}
+					<OverlayComponent
+						loading={['loading', 'downloaded'].includes(status)}
+						style={[styles.image, borderStyle]}
+						iconName={status === 'to-download' ? 'arrow-down-circle' : 'loading'}
+						showBackground={!imagePreview || !imageType}
+					/>
+				</>
 			) : null}
 		</>
 	);

app/containers/message/Components/Attachments/Image/definitions.ts

@@ -12,10 +12,14 @@ export interface IImageContainer {
 	getCustomEmoji?: TGetCustomEmoji;
 	author?: IUserMessage;
 	msg?: string;
+	imagePreview?: string;
+	imageType?: string;
 }
 
 export interface IMessageImage {
 	uri: string;
 	status: TDownloadState;
 	encrypted: boolean;
+	imagePreview?: string;
+	imageType?: string;
 }

app/containers/message/Components/OverlayComponent/index.tsx

@@ -9,17 +9,19 @@ import { CustomIcon, TIconsName } from '../../../CustomIcon';
 const OverlayComponent = ({
 	loading = false,
 	style = {},
-	iconName
+	iconName,
+	showBackground = true
 }: {
 	loading: boolean;
 	style: StyleProp<ViewStyle>;
 	iconName: TIconsName;
+	showBackground?: boolean;
 }) => {
 	const { colors } = useTheme();
 
 	return (
 		<>
-			<View style={[style, styles.blurView, { backgroundColor: colors.surfaceNeutral }]} />
+			{showBackground ? <View style={[style, styles.blurView, { backgroundColor: colors.surfaceNeutral }]} /> : null}
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
 			</View>