From cdad2884b9fd219afd53bc1c7bf6720c59fb4f44 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 15 May 2023 15:10:43 -0300 Subject: [PATCH] image download and autoDownload, algo fix the formatAttachmentUrl to show the image from local --- app/containers/message/Attachments.tsx | 1 + app/containers/message/Image.tsx | 114 ++++++++++++++---- app/containers/message/styles.ts | 6 +- .../methods/helpers/formatAttachmentUrl.ts | 5 + 4 files changed, 102 insertions(+), 24 deletions(-) diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx index 479d3b1a7..5f51afc26 100644 --- a/app/containers/message/Attachments.tsx +++ b/app/containers/message/Attachments.tsx @@ -72,6 +72,7 @@ const Attachments: React.FC = 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 8437a9b9d..d428b7519 100644 --- a/app/containers/message/Image.tsx +++ b/app/containers/message/Image.tsx @@ -1,9 +1,10 @@ -import React, { useContext } from 'react'; +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'; @@ -14,6 +15,9 @@ import { TGetCustomEmoji } from '../../definitions/IEmoji'; import { IAttachment, IUserMessage } from '../../definitions'; import { TSupportedThemes, useTheme } from '../../theme'; import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl'; +import { CustomIcon } from '../CustomIcon'; +import RCActivityIndicator from '../ActivityIndicator'; +import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload'; import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference'; interface IMessageButton { @@ -31,6 +35,7 @@ interface IMessageImage { isReply?: boolean; getCustomEmoji?: TGetCustomEmoji; author?: IUserMessage; + messageId: string; } const ImageProgress = createImageProgress(FastImage); @@ -46,37 +51,100 @@ const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButto )); -export const MessageImage = React.memo(({ imgUri, theme }: { imgUri: string; theme: TSupportedThemes }) => ( - -)); +export const MessageImage = React.memo( + ({ imgUri, toDownload, loading }: { imgUri: string; toDownload: boolean; loading: boolean }) => { + const { colors } = useTheme(); + + return ( + <> + + {toDownload ? : null} + + ); + } +); + +const BlurComponent = ({ loading = false }: { loading: boolean }) => { + const { theme, colors } = useTheme(); + + return ( + <> + + + {loading ? : } + + + ); +}; const ImageContainer = React.memo( - ({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author }: IMessageImage) => { + ({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => { + const [toDownload, setToDownload] = useState(true); + 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(''); + + useLayoutEffect(() => { + const handleAutoDownload = async () => { + if (img) { + const searchImageBestQuality = await searchMediaFileAsync({ + type: MediaTypes.image, + mimeType: file.image_type, + messageId + }); + filePath.current = searchImageBestQuality.filePath; + if (searchImageBestQuality.file?.exists) { + file.title_link = searchImageBestQuality.file.uri; + return setToDownload(false); + } + + const autoDownload = await isAutoDownloadEnabled('imagesPreferenceDownload', { user, author }); + if (autoDownload) { + await handleDownload(); + } + } + }; + handleAutoDownload(); + }, []); if (!img) { return null; } - isAutoDownloadEnabled('imagesPreferenceDownload', { user, author }).then(result => { - if (result && file.title_link) { - // Since https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/3370 the title_link is considered the full image - const imgBestQualityPreload = formatAttachmentUrl(file.title_link, user.id, user.token, baseUrl); - FastImage.preload([{ uri: imgBestQualityPreload }]); - } - }); + const handleDownload = async () => { + setLoading(true); + const imgUrl = imageUrl || formatAttachmentUrl(file.title_link || file.image_url, user.id, user.token, baseUrl); + const imageUri = await downloadMediaFile({ url: imgUrl, filePath: filePath.current }); + file.title_link = imageUri; + setToDownload(false); + setLoading(false); + }; const onPress = () => { + if (loading) { + // Cancelar o download + return; + } + + if (toDownload && !loading) { + return handleDownload(); + } + if (!showAttachment) { return; } @@ -95,7 +163,7 @@ const ImageContainer = React.memo( getCustomEmoji={getCustomEmoji} theme={theme} /> - + ); @@ -103,7 +171,9 @@ const ImageContainer = React.memo( return ( ); }, diff --git a/app/containers/message/styles.ts b/app/containers/message/styles.ts index 71e1ae724..8987ca2f1 100644 --- a/app/containers/message/styles.ts +++ b/app/containers/message/styles.ts @@ -1,7 +1,7 @@ import { StyleSheet } from 'react-native'; import sharedStyles from '../../views/Styles'; -import { isTablet } from '../../lib/methods/helpers'; +import { isAndroid, isTablet } from '../../lib/methods/helpers'; export default StyleSheet.create({ root: { @@ -96,7 +96,9 @@ export default StyleSheet.create({ }, imageContainer: { flexDirection: 'column', - borderRadius: 4 + borderRadius: 4, + // https://github.com/Kureev/react-native-blur/issues/520#issuecomment-1378339192 Fix BlurView + overflow: isAndroid ? 'hidden' : 'visible' }, image: { width: '100%', diff --git a/app/lib/methods/helpers/formatAttachmentUrl.ts b/app/lib/methods/helpers/formatAttachmentUrl.ts index 6c42244c6..e67ef7869 100644 --- a/app/lib/methods/helpers/formatAttachmentUrl.ts +++ b/app/lib/methods/helpers/formatAttachmentUrl.ts @@ -1,4 +1,9 @@ +import * as FileSystem from 'expo-file-system'; + export const formatAttachmentUrl = (attachmentUrl: string | undefined, userId: string, token: string, server: string): string => { + if (attachmentUrl?.startsWith(`${FileSystem.documentDirectory}`)) { + return attachmentUrl; + } if (attachmentUrl && attachmentUrl.startsWith('http')) { if (attachmentUrl.includes('rc_token')) { return encodeURI(attachmentUrl);