improve stop download experience

This commit is contained in:
Akinwale Ariwodola 2018-09-26 21:11:55 +01:00
parent 7c969cbe93
commit 8b8cf9cd7a
4 changed files with 46 additions and 22 deletions

View file

@ -47,7 +47,7 @@ class FileDownloadButton extends React.PureComponent {
onStartDownloadFailed
} = this.props;
if (loading || downloading) {
if ((fileInfo && !fileInfo.stopped) || loading || downloading) {
const progress =
fileInfo && fileInfo.written_bytes ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0,
label = fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...';

View file

@ -1,8 +1,9 @@
import { connect } from 'react-redux';
import {
doFetchFileInfo,
doResolveUri,
doFetchCostInfoForUri,
doResolveUri,
doNotify,
makeSelectIsUriResolving,
makeSelectCostInfoForUri,
makeSelectFileInfoForUri,
@ -32,13 +33,14 @@ const select = (state, props) => {
};
const perform = dispatch => ({
fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
resolveUri: uri => dispatch(doResolveUri(uri)),
stopDownload: (uri, fileInfo) => dispatch(doStopDownloadingFile(uri, fileInfo)),
deleteFile: (fileInfo, deleteFromDevice, abandonClaim) => {
dispatch(doDeleteFile(fileInfo, deleteFromDevice, abandonClaim));
},
fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
notify: data => dispatch(doNotify(data)),
resolveUri: uri => dispatch(doResolveUri(uri)),
stopDownload: (uri, fileInfo) => dispatch(doStopDownloadingFile(uri, fileInfo)),
});
export default connect(select, perform)(FilePage);

View file

@ -57,7 +57,8 @@ class FilePage extends React.PureComponent {
showWebView: false,
playerBgHeight: 0,
playerHeight: 0,
uri: null
uri: null,
stopDownloadConfirmed: false
};
}
@ -155,7 +156,12 @@ class FilePage extends React.PureComponent {
{ text: 'No' },
{ text: 'Yes', onPress: () => {
deleteFile(fileInfo.outpoint, true);
this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false });
this.setState({
downloadPressed: false,
fileViewLogged: false,
mediaLoaded: false,
stopDownloadConfirmed: false
});
}}
],
{ cancelable: true }
@ -163,7 +169,7 @@ class FilePage extends React.PureComponent {
}
onStopDownloadPressed = () => {
const { deleteFile, stopDownload, fileInfo, navigation } = this.props;
const { fileInfo, navigation, notify, stopDownload } = this.props;
Alert.alert(
'Stop download',
@ -172,7 +178,19 @@ class FilePage extends React.PureComponent {
{ text: 'No' },
{ text: 'Yes', onPress: () => {
stopDownload(navigation.state.params.uri, fileInfo);
this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false });
this.setState({
downloadPressed: false,
fileViewLogged: false,
mediaLoaded: false,
stopDownloadConfirmed: true
});
// there can be a bit of lag between the user pressing Yes and the UI being updated
// after the file_set_status and file_delete operations, so let the user know
notify({
message: 'The download will stop momentarily. You do not need to wait to discover something else.',
displayType: ['toast']
});
}}
],
{ cancelable: true }
@ -361,7 +379,9 @@ class FilePage extends React.PureComponent {
const mediaType = Lbry.getMediaType(contentType);
const isPlayable = mediaType === 'video' || mediaType === 'audio';
const { height, channel_name: channelName, value } = claim;
const showActions = !this.state.fullscreenMode && !this.state.showImageViewer && !this.state.showWebView &&
const showActions = !this.state.fullscreenMode &&
!this.state.showImageViewer &&
!this.state.showWebView &&
(completed || (fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes));
const channelClaimId =
value && value.publisherSignature && value.publisherSignature.certificateId;
@ -420,7 +440,7 @@ class FilePage extends React.PureComponent {
isPlayable={isPlayable}
onPlay={() => {
this.startTime = Date.now();
this.setState({ downloadPressed: true, autoPlayMedia: true });
this.setState({ downloadPressed: true, autoPlayMedia: true, stopDownloadConfirmed: false });
}}
onButtonLayout={() => this.setState({ downloadButtonShown: true })}
onStartDownloadFailed={() => {
@ -454,14 +474,16 @@ class FilePage extends React.PureComponent {
onPlaybackStarted={this.onPlaybackStarted}
/>}
{ showActions &&
{fileInfo && showActions &&
<View style={filePageStyle.actions}>
{completed && <Button style={filePageStyle.actionButton}
theme={"light"}
icon={"trash"}
text={"Delete"}
onPress={this.onDeletePressed} />}
{!completed && fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes &&
{!completed && fileInfo && !fileInfo.stopped &&
fileInfo.written_bytes < fileInfo.total_bytes &&
!this.state.stopDownloadConfirmed &&
<Button style={filePageStyle.actionButton}
theme={"light"}
text={"Stop Download"}

View file

@ -135,14 +135,14 @@ export function doStopDownloadingFile(uri, fileInfo) {
type: ACTIONS.DOWNLOADING_CANCELED,
data: {}
});
});
// Should also delete the file after the user stops downloading
dispatch(doDeleteFile(fileInfo.outpoint, uri));
if (NativeModules.LbryDownloadManager) {
NativeModules.LbryDownloadManager.stopDownload(uri, fileInfo.file_name);
}
// Should also delete the file after the user stops downloading
dispatch(doDeleteFile(fileInfo.outpoint, uri));
});
};
}