improve stop download experience
This commit is contained in:
parent
7c969cbe93
commit
8b8cf9cd7a
4 changed files with 46 additions and 22 deletions
|
@ -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...';
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,8 +178,20 @@ 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"}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
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));
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue