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

Icu 599 - remove download animation on cancel (#1365)

Browse source 
* easier to read

* seperated promise from progress so cancelling works

* Remove loading bar immediately

* style fix
This commit is contained in:
Stephen Kiers 2018-01-22 07:04:43 -07:00 committed by enahum
parent 8b62ec7133
commit 9029794afa
2 changed files with 29 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -110,13 +110,13 @@ export default class FileAttachmentDocument extends PureComponent {
this.openDocument(file, 0);
} else {
this.setState({downloading: true});
this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id)).
progress((received, total) => {
const progress = (received / total) * 100;
if (this.mounted) {
this.setState({progress});
}
});
this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id));
this.downloadTask.progress((received, total) => {
const progress = (received / total) * 100;
if (this.mounted) {
this.setState({progress});
}
});
await this.downloadTask;
if (this.mounted) {

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

@ -84,13 +84,6 @@ export default class Downloader extends PureComponent {
}
downloadDidCancel = () => {
if (this.mounted) {
this.setState({progress: 0, started: false, didCancel: false});
}
this.props.onDownloadCancel();
};
handleCancelDownload = () => {
if (this.mounted) {
this.setState({
didCancel: true,
@ -98,12 +91,10 @@ export default class Downloader extends PureComponent {
started: false
});
}
if (this.downloadTask) {
this.downloadTask.cancel(() => {
this.props.onDownloadCancel();
});
this.downloadTask.cancel();
}
this.props.onDownloadCancel();
};
recenterDownloader = (props) => {
@ -143,7 +134,7 @@ export default class Downloader extends PureComponent {
{!isVideo &&
<TouchableOpacity
style={styles.cancelButton}
onPress={this.handleCancelDownload}
onPress={this.downloadDidCancel}
>
<FormattedText
id='channel_modal.cancel'
@ -227,7 +218,12 @@ export default class Downloader extends PureComponent {
saveVideo = (videoPath) => {
const {deviceHeight} = this.props;
const top = (deviceHeight / 2) - 100;
this.setState({progress: 100, started: true, force: true, isVideo: true});
this.setState({
progress: 100,
started: true,
force: true,
isVideo: true
});
Animated.spring(this.state.downloaderTop, {
toValue: top,
tension: 8,
@ -296,14 +292,16 @@ export default class Downloader extends PureComponent {
options.appendExt = file.extension;
}
this.downloadTask = RNFetchBlob.config(options).fetch('GET', imageUrl).
progress((received, total) => {
const progress = (received / total) * 100;
if (this.mounted) {
this.setState({progress, started: true});
}
});
this.downloadTask = RNFetchBlob.config(options).fetch('GET', imageUrl);
this.downloadTask.progress((received, total) => {
const progress = (received / total) * 100;
if (this.mounted) {
this.setState({
progress,
started: true
});
}
});
const res = await this.downloadTask;
let path = res.path();
@ -364,13 +362,11 @@ export default class Downloader extends PureComponent {
render() {
const {show, downloadPath} = this.props;
if (!show && !this.state.force) {
if ((!show || this.state.didCancel) && !this.state.force) {
return null;
}
const {didCancel, progress, started} = this.state;
const trueProgress = didCancel ? 0 : progress;
const {progress, started} = this.state;
const containerHeight = show ? '100%' : 0;
@ -380,14 +376,13 @@ export default class Downloader extends PureComponent {
} else {
component = this.renderProgress;
}
return (
<View style={[styles.container, {height: containerHeight}]}>
<AnimatedView style={[styles.downloader, {top: this.state.downloaderTop}]}>
<View style={styles.progressCircleContent}>
<AnimatedCircularProgress
size={120}
fill={trueProgress}
fill={progress}
width={4}
backgroundColor='rgba(255, 255, 255, 0.5)'
tintColor='white'