From b4a9b8af6e9ec70b032a297aacfb15d433ad0e8f Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 7 Jun 2023 18:15:37 -0300 Subject: [PATCH] refactor video --- app/containers/message/Attachments.tsx | 1 - app/containers/message/Image.tsx | 4 +- app/containers/message/Video.tsx | 52 +++++++++++++------------- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx index d08566e9c..53326633d 100644 --- a/app/containers/message/Attachments.tsx +++ b/app/containers/message/Attachments.tsx @@ -99,7 +99,6 @@ const Attachments: React.FC = React.memo( getCustomEmoji={getCustomEmoji} style={style} isReply={isReply} - messageId={id} /> ); } diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx index 42babc283..ee8ce6ca2 100644 --- a/app/containers/message/Image.tsx +++ b/app/containers/message/Image.tsx @@ -123,8 +123,8 @@ const ImageContainer = React.memo( const handleAutoDownload = async () => { const isCurrentUserAuthor = author?._id === user.id; - const autoDownload = fetchAutoDownloadEnabled('imagesPreferenceDownload'); - if (autoDownload || isCurrentUserAuthor) { + const isAutoDownloadEnabled = fetchAutoDownloadEnabled('imagesPreferenceDownload'); + if (isAutoDownloadEnabled || isCurrentUserAuthor) { await handleDownload(); } }; diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx index f3b829c12..721d9b974 100644 --- a/app/containers/message/Video.tsx +++ b/app/containers/message/Video.tsx @@ -19,13 +19,12 @@ import { useTheme } from '../../theme'; import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl'; import { LOCAL_DOCUMENT_PATH, - MediaTypes, cancelDownload, downloadMediaFile, isDownloadActive, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload'; -import { isAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference'; +import { fetchAutoDownloadEnabled } from '../../lib/methods/autoDownloadPreference'; import sharedStyles from '../../views/Styles'; const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])]; @@ -57,12 +56,10 @@ interface IMessageVideo { getCustomEmoji: TGetCustomEmoji; style?: StyleProp[]; isReply?: boolean; - messageId: string; } const DownloadIndicator = ({ handleCancelDownload }: { handleCancelDownload(): void }) => { const { colors } = useTheme(); - return ( <> @@ -76,8 +73,8 @@ const DownloadIndicator = ({ handleCancelDownload }: { handleCancelDownload(): v }; const Video = React.memo( - ({ file, showAttachment, getCustomEmoji, style, isReply, messageId }: IMessageVideo) => { - const [newFile, setNewFile] = useState(file); + ({ file, showAttachment, getCustomEmoji, style, isReply }: IMessageVideo) => { + const [videoCached, setVideoCached] = useState(file); const [loading, setLoading] = useState(false); const { baseUrl, user } = useContext(MessageContext); const { theme } = useTheme(); @@ -85,51 +82,52 @@ const Video = React.memo( const video = formatAttachmentUrl(file.video_url, user.id, user.token, baseUrl); useEffect(() => { - const handleAutoDownload = async () => { + const handleVideoSearchAndDownload = async () => { if (video) { const searchVideoCached = await searchMediaFileAsync({ - type: MediaTypes.video, + type: 'video', mimeType: file.video_type, - messageId + urlToCache: video }); filePath.current = searchVideoCached.filePath; - const downloadActive = isDownloadActive(MediaTypes.video, messageId); + const downloadActive = isDownloadActive('video', video); if (searchVideoCached.file?.exists) { - setNewFile(prev => ({ + setVideoCached(prev => ({ ...prev, video_url: searchVideoCached.file?.uri })); if (downloadActive) { - cancelDownload(MediaTypes.video, messageId); + cancelDownload('video', video); } return; } - if (downloadActive) return setLoading(true); - - const autoDownload = await isAutoDownloadEnabled('imagesPreferenceDownload'); - if (autoDownload) { - await handleDownload(); - } + await handleAutoDownload(); } }; - handleAutoDownload(); + handleVideoSearchAndDownload(); }, []); if (!baseUrl) { return null; } + const handleAutoDownload = async () => { + const isAutoDownloadEnabled = fetchAutoDownloadEnabled('imagesPreferenceDownload'); + if (isAutoDownloadEnabled) { + await handleDownload(); + } + }; + const handleDownload = async () => { setLoading(true); try { const videoUri = await downloadMediaFile({ downloadUrl: video, - mediaType: MediaTypes.video, - messageId, + mediaType: 'video', path: filePath.current }); - setNewFile(prev => ({ + setVideoCached(prev => ({ ...prev, video_url: videoUri })); @@ -140,13 +138,12 @@ const Video = React.memo( const onPress = async () => { if (file.video_type && isTypeSupported(file.video_type) && showAttachment) { - if (!newFile.video_url?.startsWith(LOCAL_DOCUMENT_PATH) && !loading) { + if (!videoCached.video_url?.startsWith(LOCAL_DOCUMENT_PATH) && !loading) { // Keep the video downloading while showing the video buffering handleDownload(); } - return showAttachment(newFile); + return showAttachment(videoCached); } - if (!isIOS && file.video_url) { await downloadVideoToGallery(video); return; @@ -156,7 +153,7 @@ const Video = React.memo( const handleCancelDownload = () => { if (loading) { - cancelDownload(MediaTypes.video, messageId); + cancelDownload('video', video); return setLoading(false); } }; @@ -186,7 +183,8 @@ const Video = React.memo( disabled={isReply} onPress={onPress} style={[styles.button, { backgroundColor: themes[theme].videoBackground }]} - background={Touchable.Ripple(themes[theme].bannerBackground)}> + background={Touchable.Ripple(themes[theme].bannerBackground)} + > {loading ? ( ) : (