From 8c0c1d7dc0c3d25c88ae1c54e56f4b9c0800dd37 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 7 Jun 2023 17:14:31 -0300 Subject: [PATCH] message/Image refactored, change the component to show the image from FastImage to Image --- app/containers/ImageViewer/ImageComponent.ts | 13 +- app/containers/ImageViewer/ImageViewer.tsx | 2 +- app/containers/message/Attachments.tsx | 1 - app/containers/message/Image.tsx | 161 ++++++++----------- 4 files changed, 81 insertions(+), 96 deletions(-) diff --git a/app/containers/ImageViewer/ImageComponent.ts b/app/containers/ImageViewer/ImageComponent.ts index cdc0559c4..b9f3831ad 100644 --- a/app/containers/ImageViewer/ImageComponent.ts +++ b/app/containers/ImageViewer/ImageComponent.ts @@ -3,10 +3,17 @@ import { Image } from 'react-native'; import { FastImageProps } from 'react-native-fast-image'; import { types } from './types'; +import { LOCAL_DOCUMENT_PATH } from '../../lib/methods/handleMediaDownload'; -export const ImageComponent = (type?: string): React.ComponentType | FastImageProps> => { +export function ImageComponent({ + type, + uri +}: { + type?: string; + uri: string; +}): React.ComponentType | FastImageProps> { let Component; - if (type === types.REACT_NATIVE_IMAGE) { + if (type === types.REACT_NATIVE_IMAGE || uri.startsWith(LOCAL_DOCUMENT_PATH)) { const { Image } = require('react-native'); Component = Image; } else { @@ -14,4 +21,4 @@ export const ImageComponent = (type?: string): React.ComponentType = React.memo( style={style} isReply={isReply} author={author} - messageId={id} /> ); } diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx index 8868620a8..42babc283 100644 --- a/app/containers/message/Image.tsx +++ b/app/containers/message/Image.tsx @@ -2,27 +2,18 @@ import React, { useContext, useLayoutEffect, useRef, useState } from 'react'; import { StyleProp, TextStyle, View } from 'react-native'; import FastImage from 'react-native-fast-image'; import { dequal } from 'dequal'; -import { createImageProgress } from 'react-native-image-progress'; -import * as Progress from 'react-native-progress'; import { BlurView } from '@react-native-community/blur'; import Touchable from './Touchable'; import Markdown from '../markdown'; import styles from './styles'; -import { themes } from '../../lib/constants'; import MessageContext from './Context'; import { TGetCustomEmoji } from '../../definitions/IEmoji'; import { IAttachment, IUserMessage } from '../../definitions'; -import { TSupportedThemes, useTheme } from '../../theme'; +import { useTheme } from '../../theme'; import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl'; -import { - MediaTypes, - cancelDownload, - downloadMediaFile, - isDownloadActive, - searchMediaFileAsync -} from '../../lib/methods/handleMediaDownload'; -import { isAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference'; +import { cancelDownload, downloadMediaFile, isDownloadActive, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload'; +import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference'; import RCActivityIndicator from '../ActivityIndicator'; import { CustomIcon } from '../CustomIcon'; @@ -30,7 +21,6 @@ interface IMessageButton { children: React.ReactElement; disabled?: boolean; onPress: () => void; - theme: TSupportedThemes; } interface IMessageImage { @@ -41,25 +31,24 @@ interface IMessageImage { isReply?: boolean; getCustomEmoji?: TGetCustomEmoji; author?: IUserMessage; - messageId: string; } -const ImageProgress = createImageProgress(FastImage); - -const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButton) => ( - - {children} - -)); +const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => { + const { colors } = useTheme(); + return ( + + {children} + + ); +}); const BlurComponent = ({ loading = false }: { loading: boolean }) => { const { theme, colors } = useTheme(); - return ( <> { ); }; -export const MessageImage = React.memo( - ({ imgUri, toDownload, loading }: { imgUri: string; toDownload: boolean; loading: boolean }) => { - const { colors } = useTheme(); - - return ( - <> - - {toDownload ? : null} - - ); - } -); +export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: string; cached: boolean; loading: boolean }) => { + const { colors } = useTheme(); + return ( + <> + + {!cached ? : null} + + ); +}); const ImageContainer = React.memo( - ({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => { - const [newFile, setNewFile] = useState(file); - const [toDownload, setToDownload] = useState(true); + ({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author }: IMessageImage) => { + const [imageCached, setImageCached] = useState(file); + const [cached, setCached] = useState(false); const [loading, setLoading] = useState(false); const { theme } = useTheme(); const { baseUrl, user } = useContext(MessageContext); - const img = imageUrl || formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl); const filePath = useRef(''); + const getUrl = (link?: string) => imageUrl || formatAttachmentUrl(link, user.id, user.token, baseUrl); + const img = getUrl(file.image_url); + // The param file.title_link is the one that point to image with best quality, however we still need to test the imageUrl + // And we cannot be certain whether the file.title_link actually exists. + const imgUrlToCache = getUrl(imageCached.title_link || imageCached.image_url); useLayoutEffect(() => { - const handleAutoDownload = async () => { + const handleImageSearchAndDownload = async () => { if (img) { const searchImageCached = await searchMediaFileAsync({ - type: MediaTypes.image, - mimeType: newFile.image_type, - messageId + type: 'image', + mimeType: imageCached.image_type, + urlToCache: imgUrlToCache }); filePath.current = searchImageCached.filePath; if (searchImageCached.file?.exists) { - setNewFile(prev => ({ + setImageCached(prev => ({ ...prev, title_link: searchImageCached.file?.uri })); - return setToDownload(false); + return setCached(true); } - - if (isDownloadActive(MediaTypes.image, messageId)) { + if (isDownloadActive('image', imgUrlToCache)) { return setLoading(true); } - - const autoDownload = await isAutoDownloadEnabled('imagesPreferenceDownload', { user, author }); - if (autoDownload) { - await handleDownload(); - } + await handleAutoDownload(); } }; - handleAutoDownload(); + handleImageSearchAndDownload(); }, []); if (!img) { return null; } + const handleAutoDownload = async () => { + const isCurrentUserAuthor = author?._id === user.id; + const autoDownload = fetchAutoDownloadEnabled('imagesPreferenceDownload'); + if (autoDownload || isCurrentUserAuthor) { + await handleDownload(); + } + }; + const handleDownload = async () => { setLoading(true); try { - // The param file.title_link is the one that point to image with best quality, however we still need to test the imageUrl - // And we don't have sure that ever exists the file.title_link - const imgUrl = imageUrl || formatAttachmentUrl(newFile.title_link || newFile.image_url, user.id, user.token, baseUrl); const imageUri = await downloadMediaFile({ - downloadUrl: imgUrl, - mediaType: MediaTypes.image, - messageId, + downloadUrl: imgUrlToCache, + mediaType: 'image', path: filePath.current }); - - setNewFile(prev => ({ + setImageCached(prev => ({ ...prev, title_link: imageUri })); - setToDownload(false); + setCached(true); setLoading(false); } catch (e) { setLoading(false); - return setToDownload(true); + return setCached(false); } }; const onPress = () => { - if (loading && isDownloadActive(MediaTypes.image, messageId)) { - cancelDownload(MediaTypes.image, messageId); + if (loading && isDownloadActive('image', imgUrlToCache)) { + cancelDownload('image', imgUrlToCache); setLoading(false); - return setToDownload(true); + return setCached(false); } - - if (toDownload && !loading) { + if (!cached && !loading) { return handleDownload(); } - if (!showAttachment) { return; } - - return showAttachment(newFile); + return showAttachment(imageCached); }; - if (newFile.description) { + if (imageCached.description) { return ( - ); } return ( - ); },