fix: Media autodownload not working properly (#5807)

RocketChat · Jul 30, 2024 · 1b7ab31 · 1b7ab31
1 parent 80b9c35
commit 1b7ab31
Show file tree

Hide file tree

Showing 19 changed files with 433 additions and 580 deletions.
diff --git a/app/containers/UIKit/Image.tsx b/app/containers/UIKit/Image.tsx
@@ -30,8 +30,7 @@ export const Thumb = ({ element, size = 88 }: IThumb) => (
 export const Media = ({ element }: IImage) => {
 	const showAttachment = (attachment: IAttachment) => Navigation.navigate('AttachmentView', { attachment });
 	const imageUrl = element?.imageUrl ?? '';
-
-	return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} />;
+	return <ImageContainer file={{ image_url: imageUrl }} showAttachment={showAttachment} />;
 };
 
 const genericImage = (element: IElement, context?: number) => {

diff --git a/app/containers/message/Components/Attachments/Audio.tsx b/app/containers/message/Components/Attachments/Audio.tsx
@@ -1,16 +1,12 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
-import { emitter } from '../../../../lib/methods/helpers';
-import Markdown from '../../../markdown';
-import MessageContext from '../../Context';
-import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../../../definitions';
-import { TDownloadState, downloadMediaFile, getMediaCache, isDownloadActive } from '../../../../lib/methods/handleMediaDownload';
-import { fetchAutoDownloadEnabled } from '../../../../lib/methods/autoDownloadPreference';
+import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
 import AudioPlayer from '../../../AudioPlayer';
-import { useAudioUrl } from '../../hooks/useAudioUrl';
-import { getAudioUrlToCache } from '../../../../lib/methods/getAudioUrl';
+import Markdown from '../../../markdown';
+import MessageContext from '../../Context';
+import { useMediaAutoDownload } from '../../hooks/useMediaAutoDownload';
 
 interface IMessageAudioProps {
 	file: IAttachment;
@@ -19,113 +15,16 @@ interface IMessageAudioProps {
 	getCustomEmoji: TGetCustomEmoji;
 	author?: IUserMessage;
 	msg?: string;
-	cdnPrefix?: string;
 }
 
 const MessageAudio = ({ file, getCustomEmoji, author, isReply, style, msg }: IMessageAudioProps) => {
-	const [downloadState, setDownloadState] = useState<TDownloadState>('loading');
-	const [fileUri, setFileUri] = useState('');
-	const { baseUrl, user, id, rid } = useContext(MessageContext);
-	const audioUrl = useAudioUrl({ audioUrl: file.audio_url });
-
-	const onPlayButtonPress = async () => {
-		if (downloadState === 'to-download') {
-			const isAudioCached = await handleGetMediaCache();
-			if (isAudioCached) {
-				return;
-			}
-			handleDownload();
-		}
-	};
-
-	const handleDownload = async () => {
-		setDownloadState('loading');
-		try {
-			if (audioUrl) {
-				const audioUri = await downloadMediaFile({
-					messageId: id,
-					downloadUrl: getAudioUrlToCache({ token: user.token, userId: user.id, url: audioUrl }),
-					type: 'audio',
-					mimeType: file.audio_type,
-					encryption: file.encryption,
-					originalChecksum: file.hashes?.sha256
-				});
-				setFileUri(audioUri);
-				setDownloadState('downloaded');
-			}
-		} catch {
-			setDownloadState('to-download');
-		}
-	};
-
-	const handleAutoDownload = async () => {
-		try {
-			if (audioUrl) {
-				const isCurrentUserAuthor = author?._id === user.id;
-				const isAutoDownloadEnabled = fetchAutoDownloadEnabled('audioPreferenceDownload');
-				if (isAutoDownloadEnabled || isCurrentUserAuthor) {
-					await handleDownload();
-					return;
-				}
-				setDownloadState('to-download');
-			}
-		} catch {
-			// Do nothing
-		}
-	};
-
-	const handleGetMediaCache = async () => {
-		const cachedAudioResult = await getMediaCache({
-			type: 'audio',
-			mimeType: file.audio_type,
-			urlToCache: audioUrl
-		});
-		const result = cachedAudioResult?.exists && file.e2e !== 'pending';
-		if (result) {
-			setFileUri(cachedAudioResult.uri);
-			setDownloadState('downloaded');
-		}
-		return result;
-	};
-
-	const handleResumeDownload = () => {
-		emitter.on(`downloadMedia${id}`, downloadMediaListener);
-	};
-
-	useEffect(() => {
-		const handleCache = async () => {
-			const isAudioCached = await handleGetMediaCache();
-			if (isAudioCached) {
-				return;
-			}
-			if (audioUrl && isDownloadActive(audioUrl)) {
-				handleResumeDownload();
-				return;
-			}
-			await handleAutoDownload();
-		};
-		if (audioUrl) {
-			handleCache();
-		}
-	}, [audioUrl]);
-
-	const downloadMediaListener = useCallback((uri: string) => {
-		setFileUri(uri);
-		setDownloadState('downloaded');
-	}, []);
-
-	useEffect(() => () => {
-		emitter.off(`downloadMedia${id}`, downloadMediaListener);
-	});
-
-	if (!baseUrl) {
-		return null;
-	}
+	const { user, id, rid } = useContext(MessageContext);
+	const { status, onPress, url } = useMediaAutoDownload({ file, author });
 
 	return (
 		<>
 			<Markdown msg={msg} style={[isReply && style]} username={user.username} getCustomEmoji={getCustomEmoji} />
-			<AudioPlayer msgId={id} fileUri={fileUri} downloadState={downloadState} onPlayButtonPress={onPlayButtonPress} rid={rid} />
+			<AudioPlayer msgId={id} fileUri={url} downloadState={status} onPlayButtonPress={onPress} rid={rid} />
 		</>
 	);
 };