verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

done for image and audio

This commit is contained in:
Reinaldo Neto 2023-05-19 02:42:21 -03:00
parent aa2c2886a0
commit 02ba6e9961
3 changed files with 102 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/containers/message/Audio.tsx
View File

@ -124,11 +124,12 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
static contextType = MessageContext;
private sound: Sound;
private filePath?: string;
constructor(props: IMessageAudioProps) {
super(props);
this.state = {
loading: false,
loading: true,
currentTime: 0,
duration: 0,
paused: true,
@ -145,7 +146,29 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
};
async componentDidMount() {
this.setState({ loading: true });
const { messageId, file } = this.props;
const fileSearch = await searchMediaFileAsync({
type: MediaTypes.audio,
mimeType: file.audio_type,
messageId
});
this.filePath = fileSearch.filePath;
if (fileSearch?.file?.exists) {
console.log(
'🚀 ~ file: Audio.tsx:157 ~ MessageAudio ~ componentDidMount ~ fileSearch?.file?.exists:',
fileSearch?.file?.exists
);
console.log('🚀 ~ file: Audio.tsx:163 ~ MessageAudio ~ componentDidMount ~ fileSearch.file.uri:', fileSearch.file.uri);
await this.sound
.loadAsync({ uri: fileSearch.file.uri })
.then(value => {
console.log('🚀 ~ file: Audio.tsx:162 ~ MessageAudio ~ awaitthis.sound.loadAsync ~ value:', value);
})
.catch(er => {
console.log('🚀 ~ file: Audio.tsx:158 ~ MessageAudio ~ awaitthis.sound.loadAsync ~ er:', er);
});
return this.setState({ loading: false });
}
await this.handleAutoDownload();
}
@ -161,24 +184,14 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
};
handleAutoDownload = async () => {
const { messageId, author, file } = this.props;
const { author } = this.props;
const { user } = this.context;
const url = this.getUrl();
try {
if (url) {
const fileSearch = await searchMediaFileAsync({
type: MediaTypes.audio,
mimeType: file.audio_type,
messageId
});
if (fileSearch?.file?.exists) {
await this.sound.loadAsync({ uri: fileSearch.file.uri });
return this.setState({ loading: false });
}
const autoDownload = await isAutoDownloadEnabled('audioPreferenceDownload', { author, user });
if (autoDownload) {
await this.startDownload();
return await this.startDownload();
}
// MediaDownloadOption.NEVER or MediaDownloadOption.WIFI and the mobile is using mobile data
@ -190,7 +203,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
};
shouldComponentUpdate(nextProps: IMessageAudioProps, nextState: IMessageAudioState) {
const { currentTime, duration, paused, loading } = this.state;
const { currentTime, duration, paused, loading, toDownload } = this.state;
const { file, theme } = this.props;
if (nextProps.theme !== theme) {
return true;
@ -210,6 +223,9 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
if (nextState.loading !== loading) {
return true;
}
if (nextState.toDownload !== toDownload) {
return true;
}
return false;
}
@ -281,23 +297,21 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
};
startDownload = async () => {
const { messageId, file } = this.props;
const { messageId } = this.props;
const { user } = this.context;
this.setState({ loading: true });
const url = this.getUrl();
if (url) {
const fileSearch = await searchMediaFileAsync({
type: MediaTypes.audio,
mimeType: file.audio_type,
messageId
});
if (url && this.filePath) {
const audio = await downloadMediaFile({
url: `${url}?rc_uid=${user.id}&rc_token=${user.token}`,
filePath: fileSearch.filePath
downloadUrl: `${url}?rc_uid=${user.id}&rc_token=${user.token}`,
mediaType: MediaTypes.audio,
messageId,
path: this.filePath
});
await this.sound.loadAsync({ uri: audio });
if (!audio) {
return this.setState({ loading: false, toDownload: true });
}
await this.sound.loadAsync({ uri: this.filePath });
return this.setState({ loading: false, toDownload: false });
}
};

59
app/containers/message/Image.tsx
View File

@ -4,7 +4,6 @@ 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 * as FileSystem from 'expo-file-system';
import { BlurView } from '@react-native-community/blur';
import Touchable from './Touchable';
@ -16,7 +15,13 @@ import { TGetCustomEmoji } from '../../definitions/IEmoji';
import { IAttachment, IUserMessage } from '../../definitions';
import { TSupportedThemes, useTheme } from '../../theme';
import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
import { MediaTypes, downloadMediaFile, searchMediaFileAsync } from '../../lib/methods/handleMediaDownload';
import {
MediaTypes,
cancelDownload,
downloadMediaFile,
isDownloadActive,
searchMediaFileAsync
} from '../../lib/methods/handleMediaDownload';
import { isAutoDownloadEnabled } from './helpers/mediaDownload/autoDownloadPreference';
import RCActivityIndicator from '../ActivityIndicator';
import { CustomIcon } from '../CustomIcon';
@ -93,28 +98,35 @@ export const MessageImage = React.memo(
const ImageContainer = React.memo(
({ file, imageUrl, showAttachment, getCustomEmoji, style, isReply, author, messageId }: IMessageImage) => {
const [newFile, setNewFile] = useState(file);
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 img = imageUrl || formatAttachmentUrl(newFile.image_url, user.id, user.token, baseUrl);
const filePath = useRef('');
const downloadResumable = useRef<FileSystem.DownloadResumable | null>(null);
useLayoutEffect(() => {
const handleAutoDownload = async () => {
if (img) {
const searchImageBestQuality = await searchMediaFileAsync({
const searchImageCached = await searchMediaFileAsync({
type: MediaTypes.image,
mimeType: file.image_type,
mimeType: newFile.image_type,
messageId
});
filePath.current = searchImageBestQuality.filePath;
if (searchImageBestQuality.file?.exists) {
file.title_link = searchImageBestQuality.file.uri;
filePath.current = searchImageCached.filePath;
if (searchImageCached.file?.exists) {
setNewFile(prev => ({
...prev,
title_link: searchImageCached.file?.uri
}));
return setToDownload(false);
}
if (isDownloadActive(MediaTypes.image, messageId)) {
return setLoading(true);
}
const autoDownload = await isAutoDownloadEnabled('imagesPreferenceDownload', { user, author });
if (autoDownload) {
await handleDownload();
@ -130,25 +142,32 @@ const ImageContainer = React.memo(
const handleDownload = async () => {
setLoading(true);
const imgUrl = imageUrl || formatAttachmentUrl(file.title_link || file.image_url, user.id, user.token, baseUrl);
downloadResumable.current = FileSystem.createDownloadResumable(imgUrl, filePath.current);
// 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 exists the file.title_link
const imgUrl = imageUrl || formatAttachmentUrl(newFile.title_link || newFile.image_url, user.id, user.token, baseUrl);
const imageUri = await downloadMediaFile({
url: imgUrl,
filePath: filePath.current,
downloadResumable: downloadResumable.current
downloadUrl: imgUrl,
mediaType: MediaTypes.image,
messageId,
path: filePath.current
});
if (!imageUri) {
setLoading(false);
return setToDownload(true);
}
file.title_link = imageUri;
setNewFile(prev => ({
...prev,
title_link: filePath.current
}));
setToDownload(false);
setLoading(false);
};
const onPress = () => {
if (loading && downloadResumable.current) {
return downloadResumable.current.cancelAsync();
if (loading && isDownloadActive(MediaTypes.image, messageId)) {
cancelDownload(MediaTypes.image, messageId);
setLoading(false);
return setToDownload(true);
}
if (toDownload && !loading) {
@ -159,15 +178,15 @@ const ImageContainer = React.memo(
return;
}
return showAttachment(file);
return showAttachment(newFile);
};
if (file.description) {
if (newFile.description) {
return (
<Button disabled={isReply} theme={theme} onPress={onPress}>
<View>
<Markdown
msg={file.description}
msg={newFile.description}
style={[isReply && style]}
username={user.username}
getCustomEmoji={getCustomEmoji}

31
app/lib/methods/handleMediaDownload.ts
View File

@ -56,7 +56,7 @@ export function downloadMediaFile({
messageId: string;
downloadUrl: string;
path: string;
}): Promise<string | null> {
}): Promise<string | void> {
return new Promise((resolve, reject) => {
const downloadKey = mediaDownloadKey(mediaType, messageId);
const options = {
@ -70,20 +70,21 @@ export function downloadMediaFile({
if (response.respInfo.status >= 200 && response.respInfo.status < 400) {
// If response is all good...
try {
console.log('🚀 ~ file: handleMediaDownload.ts:71 ~ returnnewPromise ~ response:', response, response.path());
resolve(response.data);
delete downloadQueue[downloadKey];
resolve(path);
} catch (e) {
reject();
log(e);
} finally {
delete downloadQueue[downloadKey];
}
} else {
reject(null);
delete downloadQueue[downloadKey];
reject();
}
});
downloadQueue[downloadKey].catch(error => {
console.log('🚀 ~ file: handleMediaDownload.ts:82 ~ returnnewPromise ~ error:', error);
downloadQueue[downloadKey].catch(() => {
delete downloadQueue[downloadKey];
reject(null);
reject();
});
});
}
@ -96,9 +97,19 @@ const getExtension = (type: MediaTypes, mimeType?: string) => {
if (!mimeType) {
return defaultType[type];
}
const extensionFromMime = () => {
// The library is returning mpag instead of mp3 for audio/mpeg
const extensionFromMime = mimeType === 'audio/mpeg' ? 'mp3' : mime.extension(mimeType);
return extensionFromMime;
if (mimeType === 'audio/mpeg') {
return 'mp3';
}
const extension = mime.extension(mimeType);
// The mime.extension can return false when there aren't any extension
if (!extension) {
return defaultType[type];
}
return extension;
};
return extensionFromMime();
};
const ensureDirAsync = async (dir: string, intermediates = true): Promise<void> => {