toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix Downloads and previews (#1596)

Browse source 
* Fix downloads and previews

* Update react-native-doc-viewer dependency
This commit is contained in:
Elias Nahum 2018-04-17 12:10:51 -03:00 committed by GitHub
parent 5a23129a50
commit 033a0c15bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/components/file_attachment_list/file_attachment.js
View file

@ -58,23 +58,29 @@ export default class FileAttachment extends PureComponent {
renderFileInfo() {
const {file, theme} = this.props;
const {data} = file;
const style = getStyleSheet(theme);
if (!file.id) {
if (!data || !data.id) {
return null;
}
return (
<View style={style.attachmentContainer}>
<Text
numberOfLines={4}
numberOfLines={2}
ellipsizeMode='tail'
style={style.fileName}
>
{file.name.trim()}
{file.caption.trim()}
</Text>
<View style={style.fileDownloadContainer}>
<Text style={style.fileInfo}>
{`${file.extension.toUpperCase()} ${Utils.getFormattedFileSize(file)}`}
<Text
numberOfLines={2}
ellipsizeMode='tail'
style={style.fileInfo}
>
{`${data.extension.toUpperCase()} ${Utils.getFormattedFileSize(data)}`}
</Text>
</View>
</View>
@ -89,21 +95,22 @@ export default class FileAttachment extends PureComponent {
theme,
navigator,
} = this.props;
const {data} = file;
const style = getStyleSheet(theme);
let fileAttachmentComponent;
if (file.has_preview_image || file.loading || isGif(file)) {
if ((data && data.has_preview_image) || file.loading || isGif(data)) {
fileAttachmentComponent = (
<TouchableOpacity onPress={this.handlePreviewPress}>
<FileAttachmentImage
file={file}
file={data || {}}
onCaptureRef={this.handleCaptureRef}
onCapturePreviewRef={this.handleCapturePreviewRef}
theme={theme}
/>
</TouchableOpacity>
);
} else if (isDocument(file)) {
} else if (isDocument(data)) {
fileAttachmentComponent = (
<FileAttachmentDocument
file={file}
@ -115,7 +122,7 @@ export default class FileAttachment extends PureComponent {
fileAttachmentComponent = (
<TouchableOpacity onPress={this.handlePreviewPress}>
<FileAttachmentIcon
file={file}
file={data}
onCaptureRef={this.handleCaptureRef}
onCapturePreviewRef={this.handleCapturePreviewRef}
theme={theme}

28
app/components/file_attachment_list/file_attachment_document.js
View file

@ -100,7 +100,8 @@ export default class FileAttachmentDocument extends PureComponent {
};
downloadAndPreviewFile = async (file) => {
const path = `${DOCUMENTS_PATH}/${file.name}`;
const {data} = file;
const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
this.setState({didCancel: false});
@ -116,14 +117,14 @@ export default class FileAttachmentDocument extends PureComponent {
}
const options = {
session: file.id,
session: data.id,
timeout: 10000,
indicator: true,
overwrite: true,
path,
};
const mime = file.mime_type.split(';')[0];
const mime = data.mime_type.split(';')[0];
let openDocument = this.openDocument;
if (TEXT_PREVIEW_FORMATS.includes(mime)) {
openDocument = this.previewTextFile;
@ -134,7 +135,7 @@ export default class FileAttachmentDocument extends PureComponent {
openDocument(file, 0);
} else {
this.setState({downloading: true});
this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id));
this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(data.id));
this.downloadTask.progress((received, total) => {
const progress = (received / total) * 100;
if (this.mounted) {
@ -179,15 +180,16 @@ export default class FileAttachmentDocument extends PureComponent {
previewTextFile = (file, delay = 2000) => {
const {navigator, theme} = this.props;
const {data} = file;
const prefix = Platform.OS === 'android' ? 'file:/' : '';
const path = `${DOCUMENTS_PATH}/${file.name}`;
const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
const readFile = RNFetchBlob.fs.readFile(`${prefix}${path}`, 'utf8');
setTimeout(async () => {
try {
const content = await readFile;
navigator.push({
screen: 'TextPreview',
title: file.name,
title: file.caption,
animated: true,
backButtonTitle: '',
passProps: {
@ -213,13 +215,15 @@ export default class FileAttachmentDocument extends PureComponent {
// shown nicely and smooth
setTimeout(() => {
if (!this.state.didCancel && this.mounted) {
const {data} = file;
const prefix = Platform.OS === 'android' ? 'file:/' : '';
const path = `${DOCUMENTS_PATH}/${file.name}`;
const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
this.setStatusBarColor('dark-content');
OpenFile.openDoc([{
url: `${prefix}${path}`,
fileName: file.name,
fileType: file.extension,
fileNameOptional: file.caption,
fileName: data.name,
fileType: data.extension,
cache: false,
}], (error) => {
if (error) {
@ -233,7 +237,7 @@ export default class FileAttachmentDocument extends PureComponent {
id: 'mobile.document_preview.failed_description',
defaultMessage: 'An error occurred while opening the document. Please make sure you have a {fileType} viewer installed and try again.\n',
}, {
fileType: file.extension.toUpperCase(),
fileType: data.extension.toUpperCase(),
}),
[{
text: intl.formatMessage({
@ -270,7 +274,7 @@ export default class FileAttachmentDocument extends PureComponent {
return (
<View style={[style.circularProgressContent, {width: wrapperWidth}]}>
<FileAttachmentIcon
file={file}
file={file.data}
iconHeight={iconHeight}
iconWidth={iconWidth}
theme={theme}
@ -324,7 +328,7 @@ export default class FileAttachmentDocument extends PureComponent {
} else {
fileAttachmentComponent = (
<FileAttachmentIcon
file={file}
file={file.data}
theme={theme}
iconHeight={iconHeight}
iconWidth={iconWidth}

47
app/components/file_attachment_list/file_attachment_list.js
View file

@ -212,26 +212,33 @@ export default class FileAttachmentList extends Component {
));
}
return files.map((file, idx) => (
<TouchableOpacity
key={file.id}
onLongPress={this.props.onLongPress}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<FileAttachment
deviceWidth={deviceWidth}
file={file}
index={idx}
navigator={navigator}
onCaptureRef={this.handleCaptureRef}
onCapturePreviewRef={this.handleCapturePreviewRef}
onInfoPress={this.handleInfoPress}
onPreviewPress={this.handlePreviewPress}
theme={this.props.theme}
/>
</TouchableOpacity>
));
return files.map((file, idx) => {
const f = {
caption: file.name,
data: file,
};
return (
<TouchableOpacity
key={file.id}
onLongPress={this.props.onLongPress}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<FileAttachment
deviceWidth={deviceWidth}
file={f}
index={idx}
navigator={navigator}
onCaptureRef={this.handleCaptureRef}
onCapturePreviewRef={this.handleCapturePreviewRef}
onInfoPress={this.handleInfoPress}
onPreviewPress={this.handlePreviewPress}
theme={this.props.theme}
/>
</TouchableOpacity>
);
});
};
render() {

11
app/screens/image_preview/downloader.android.js
View file

@ -64,6 +64,7 @@ export default class Downloader extends PureComponent {
handleDownload = async () => {
const {file, onDownloadCancel, onDownloadStart, onDownloadSuccess} = this.props;
const {intl} = this.context;
const {data} = file;
const canWriteToStorage = await this.checkForPermissions();
if (!canWriteToStorage) {
@ -88,11 +89,9 @@ export default class Downloader extends PureComponent {
ToastAndroid.show(started, ToastAndroid.SHORT);
onDownloadStart();
const dest = `${RNFetchBlob.fs.dirs.DownloadDir}/${file.caption}`;
const dest = `${RNFetchBlob.fs.dirs.DownloadDir}/${data.id}-${file.caption}`;
let downloadFile = true;
const {data} = file;
if (data.localPath) {
const exists = await RNFetchBlob.fs.exists(data.localPath);
@ -101,7 +100,7 @@ export default class Downloader extends PureComponent {
await RNFetchBlob.fs.cp(data.localPath, dest);
}
} else if (isVideo(data)) {
const path = `${VIDEOS_PATH}/${data.id}.${data.extension}`;
const path = `${VIDEOS_PATH}/${data.id}-${file.caption}`;
const exists = await RNFetchBlob.fs.exists(path);
if (exists) {
@ -109,7 +108,7 @@ export default class Downloader extends PureComponent {
await RNFetchBlob.fs.cp(path, dest);
}
} else if (isDocument(data)) {
const path = `${DOCUMENTS_PATH}/${data.name}`;
const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
const exists = await RNFetchBlob.fs.exists(path);
if (exists) {
@ -127,7 +126,7 @@ export default class Downloader extends PureComponent {
useDownloadManager: true,
notification: true,
path: dest,
title: `${data.name} ${title}`,
title: `${file.caption} ${title}`,
mime: data.mime_type,
description: data.name,
mediaScannable: true,

6
app/screens/image_preview/downloader.ios.js
View file

@ -271,7 +271,7 @@ export default class Downloader extends PureComponent {
let path;
let res;
if (data.localPath) {
if (data && data.localPath) {
path = data.localPath;
downloadFile = false;
this.setState({
@ -300,7 +300,7 @@ export default class Downloader extends PureComponent {
}
}
options.path = `${downloadPath}/${file.caption}`;
options.path = `${downloadPath}/${data.id}-${file.caption}`;
} else {
options.fileCache = true;
options.appendExt = data.extension;
@ -352,7 +352,7 @@ export default class Downloader extends PureComponent {
} catch (error) {
// cancellation throws so we need to catch
if (downloadPath) {
RNFetchBlob.fs.unlink(`${downloadPath}/${file.id}.${file.extension}`);
RNFetchBlob.fs.unlink(`${downloadPath}/${data.id}-${file.caption}`);
}
if (error.message !== 'cancelled' && this.mounted) {
this.showDownloadFailedAlert();

4
app/screens/image_preview/image_preview.js
View file

@ -370,9 +370,9 @@ export default class ImagePreview extends PureComponent {
if (file.data) {
if (isDocument(file.data)) {
return this.renderAttachmentDocument(file.data);
return this.renderAttachmentDocument(file);
} else if (isVideo(file.data)) {
return this.renderVideoPreview(file.data);
return this.renderVideoPreview(file);
}
return this.renderAttachmentIcon(file.data);

8
app/screens/image_preview/video_preview.js
View file

@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Alert,
Platform,
StyleSheet,
TouchableOpacity,
View,
@ -62,8 +63,9 @@ export default class VideoPreview extends PureComponent {
async initializeComponent() {
const {file} = this.props;
const path = `${VIDEOS_PATH}/${file.id}.${file.extension}`;
const exist = await RNFetchBlob.fs.exists(path);
const prefix = Platform.OS === 'android' ? 'file:/' : '';
const path = `${VIDEOS_PATH}/${file.data.id}-${file.caption}`;
const exist = await RNFetchBlob.fs.exists(`${prefix}${path}`);
if (exist) {
this.setState({path});
@ -82,7 +84,7 @@ export default class VideoPreview extends PureComponent {
onDownloadSuccess = () => {
const {file} = this.props;
const path = `${VIDEOS_PATH}/${file.id}.${file.extension}`;
const path = `${VIDEOS_PATH}/${file.data.id}-${file.caption}`;
this.setState({showDownloader: false, path});
};

18
package-lock.json generated
View file

@ -6798,6 +6798,12 @@
"resolved": "https://registry.npmjs.org/redux-batched-actions/-/redux-batched-actions-0.2.0.tgz",
"integrity": "sha1-2gAAyIKw5shhqW1YI702rfXZwN0="
},
"redux-offline": {
"version": "git+https://github.com/enahum/redux-offline.git#4bd85e7e3b279a2b11fb4d587808d583d2b5e7b5",
"requires": {
"redux-persist": "4.9.1"
}
},
"redux-persist": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-4.9.1.tgz",
@ -11209,9 +11215,9 @@
"integrity": "sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k="
},
"react-native-doc-viewer": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/react-native-doc-viewer/-/react-native-doc-viewer-2.7.3.tgz",
"integrity": "sha1-exzNWBT71S9M3sRmmSjAWOtO4To="
"version": "2.7.8",
"resolved": "https://registry.npmjs.org/react-native-doc-viewer/-/react-native-doc-viewer-2.7.8.tgz",
"integrity": "sha1-Q9BlMo+xt+yQ0yHlvSNHEegHyPY="
},
"react-native-drawer": {
"version": "2.5.0",
@ -11731,12 +11737,6 @@
"symbol-observable": "1.2.0"
}
},
"redux-offline": {
"version": "git+https://github.com/enahum/redux-offline.git#4bd85e7e3b279a2b11fb4d587808d583d2b5e7b5",
"requires": {
"redux-persist": "4.10.2"
}
},
"redux-persist": {
"version": "4.10.2",
"resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-4.10.2.tgz",