improve stop download experience

app/src/component/fileDownloadButton/view.js

@@ -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...';

app/src/page/file/index.js

@@ -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);

app/src/page/file/view.js

@@ -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"}

app/src/redux/actions/file.js

@@ -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));
   };
 }