added delete file button for completed downloads (#44)

app/src/page/file/index.js

@@ -9,7 +9,7 @@ import {
   selectRewardContentClaimIds,
   makeSelectCostInfoForUri
 } from 'lbry-redux';
-//import { selectShowNsfw } from 'redux/selectors/settings';
+import { doDeleteFile } from '../../redux/actions/file';
 import FilePage from './view';
 
 const select = (state, props) => {
@@ -29,6 +29,9 @@ const select = (state, props) => {
 const perform = dispatch => ({
   fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
   fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
+  deleteFile: (fileInfo, deleteFromDevice, abandonClaim) => {
+    dispatch(doDeleteFile(fileInfo, deleteFromDevice, abandonClaim));
+  },
 });
 
 export default connect(select, perform)(FilePage);

app/src/page/file/view.js

@@ -1,6 +1,16 @@
 import React from 'react';
 import { Lbry } from 'lbry-redux';
-import { Text, View, ScrollView, StatusBar, TouchableOpacity, NativeModules } from 'react-native';
+import {
+  ActivityIndicator,
+  Alert,
+  Button,
+  Text,
+  View,
+  ScrollView,
+  StatusBar,
+  TouchableOpacity,
+  NativeModules
+} from 'react-native';
 import FileItemMedia from '../../component/fileItemMedia';
 import FileDownloadButton from '../../component/fileDownloadButton';
 import MediaPlayer from '../../component/mediaPlayer';
@@ -52,6 +62,20 @@ class FilePage extends React.PureComponent {
     }
   }
   
+  onDeletePressed = () => {
+    const { deleteFile, fileInfo } = this.props;
+    
+    Alert.alert(
+      'Delete file',
+      'Are you sure you want to remove this file from your device?',
+      [
+        { text: 'No' },
+        { text: 'Yes', onPress: () => { deleteFile(fileInfo.outpoint, true); } }
+      ],
+      { cancelable: true }
+    );
+  }
+  
   componentWillUnmount() {
     StatusBar.setHidden(false);
     if (NativeModules.ScreenOrientation) {
@@ -85,21 +109,30 @@ 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 = (completed || (fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes));
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     
     return (
       <View style={filePageStyle.pageContainer}>
-        <View style={this.state.fullscreenMode ? filePageStyle.fullscreenMedia : filePageStyle.mediaContainer}>
+        <View style={this.state.fullscreenMode ? filePageStyle.fullscreenMedia : filePageStyle.mediaContainer}>  
           {(!fileInfo || (isPlayable && !this.state.mediaLoaded)) &&
             <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
+          {isPlayable && !this.state.mediaLoaded && <ActivityIndicator size="large" color="#40b89a" style={filePageStyle.loading} />}
           {!completed && <FileDownloadButton uri={navigation.state.params.uri} style={filePageStyle.downloadButton} />}
           {fileInfo && isPlayable && <MediaPlayer fileInfo={fileInfo}
                                                   style={filePageStyle.player}
                                                   onFullscreenToggled={this.handleFullscreenToggle} 
                                                   onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
         </View>
-        <ScrollView style={filePageStyle.scrollContainer}>
+        { showActions &&
+        <View style={filePageStyle.actions}>
+          {completed && <Button color="red" title="Delete" onPress={this.onDeletePressed} />}
+          {fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes &&
+            <Button color="red" title="Stop Download" onPress={this.onStopDownloadPressed} />
+          }
+        </View>}
+        <ScrollView style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}>
           <Text style={filePageStyle.title}>{title}</Text>
           {channelName && <Text style={filePageStyle.channelName}>{channelName}</Text>}
           {description && <Text style={filePageStyle.description}>{description}</Text>}

app/src/redux/actions/file.js

@@ -220,3 +220,36 @@ export function doPurchaseUri(uri, specificCostInfo) {
     }*/
   };
 }
+
+export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
+  return (dispatch, getState) => {
+    Lbry.file_delete({
+      outpoint,
+      delete_from_download_dir: deleteFromComputer,
+    });
+
+    // If the file is for a claim we published then also abandon the claim
+    /*const myClaimsOutpoints = selectMyClaimsOutpoints(state);
+    if (abandonClaim && myClaimsOutpoints.indexOf(outpoint) !== -1) {
+      const byOutpoint = selectFileInfosByOutpoint(state);
+      const fileInfo = byOutpoint[outpoint];
+
+      if (fileInfo) {
+        const txid = fileInfo.outpoint.slice(0, -2);
+        const nout = Number(fileInfo.outpoint.slice(-1));
+
+        dispatch(doAbandonClaim(txid, nout));
+      }
+    }*/
+
+    dispatch({
+      type: ACTIONS.FILE_DELETE,
+      data: {
+        outpoint,
+      },
+    });
+
+    //const totalProgress = selectTotalDownloadProgress(getState());
+    //setProgressBar(totalProgress);
+  };
+}

app/src/styles/filePage.js

@@ -24,6 +24,12 @@ const filePageStyle = StyleSheet.create({
     marginRight: 16
   },
   scrollContainer: {
+    flex: 1,
+    marginTop: -20,
+    marginBottom: -4,
+    paddingTop: 10
+  },
+  scrollContainerActions: {
     flex: 1
   },
   title: {
@@ -47,7 +53,7 @@ const filePageStyle = StyleSheet.create({
     fontSize: 16,
     marginLeft: 20,
     marginRight: 20,
-    marginBottom: 20,
+    marginBottom: 40,
     color: '#999999'
   },
   thumbnail: {
@@ -56,7 +62,7 @@ const filePageStyle = StyleSheet.create({
   },
   downloadButton: {
     position: 'absolute',
-    top: '50%'
+    top: '40%'
   },
   player: {
     flex: 1,
@@ -73,6 +79,22 @@ const filePageStyle = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000',
     zIndex: 100
+  },
+  actions: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+    marginTop: -14,
+    width: '50%',
+  },
+  deleteButton: {
+    backgroundColor: '#ff0000',
+    width: 80
+  },
+  loading: {
+    position: 'absolute',
+    top: '40%'
   }
 });