src/ui/component/fileDownloadLink/view.jsx

@@ -20,7 +20,7 @@ type Props = {
 function FileDownloadLink(props: Props) {
   const { fileInfo, downloading, loading, openModal, pause, claimIsMine, download, uri } = props;
 
-  if (downloading) {
+  if (downloading || loading) {
     const progress = fileInfo && fileInfo.written_bytes > 0 ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
     const label =
       fileInfo && fileInfo.written_bytes > 0 ? progress.toFixed(0) + __('% downloaded') : __('Connecting...');

src/ui/modal/modalRemoveFile/index.js

@@ -1,25 +1,19 @@
 import { connect } from 'react-redux';
 import { doDeleteFileAndMaybeGoBack } from 'redux/actions/file';
-import {
+import { makeSelectTitleForUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
-  makeSelectTitleForUri,
-  makeSelectClaimIsMine,
-  makeSelectFileInfoForUri,
-  makeSelectClaimForUri,
-} from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalRemoveFile from './view';
 
 const select = (state, props) => ({
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
-  fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideModal()),
-  deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
+  deleteFile: (uri, deleteFromComputer, abandonClaim) => {
-    dispatch(doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim));
+    dispatch(doDeleteFileAndMaybeGoBack(uri, deleteFromComputer, abandonClaim));
   },
 });
 

src/ui/modal/modalRemoveFile/view.jsx

@@ -6,6 +6,7 @@ import Button from 'component/button';
 import usePersistedState from 'util/use-persisted-state';
 
 type Props = {
+  uri: string,
   claim: StreamClaim,
   claimIsMine: boolean,
   closeModal: () => void,
@@ -17,11 +18,9 @@ type Props = {
 };
 
 function ModalRemoveFile(props: Props) {
-  const { claim, claimIsMine, closeModal, deleteFile, fileInfo, title } = props;
+  const { uri, claimIsMine, closeModal, deleteFile, title } = props;
   const [deleteChecked, setDeleteChecked] = usePersistedState('modal-remove-file:delete', true);
   const [abandonChecked, setAbandonChecked] = usePersistedState('modal-remove-file:abandon', true);
-  const { txid, nout } = claim;
-  const outpoint = fileInfo ? fileInfo.outpoint : `${txid}:${nout}`;
 
   return (
     <Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
@@ -30,7 +29,7 @@ function ModalRemoveFile(props: Props) {
           {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
         </p>
       </section>
-      <Form onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
+      <Form onSubmit={() => deleteFile(uri, deleteChecked, claimIsMine ? abandonChecked : false)}>
         <FormField
           name="file_delete"
           label={__('Also delete this file from my computer')}
@@ -49,13 +48,7 @@ function ModalRemoveFile(props: Props) {
           />
         )}
         <div className="card__actions">
-          <Button
+          <Button type="submit" button="primary" label={__('OK')} disabled={!deleteChecked && !abandonChecked} />
-            autoFocus
-            button="primary"
-            label={__('OK')}
-            disabled={!deleteChecked && !abandonChecked}
-            onClick={() => deleteFile(outpoint || '', deleteChecked, claimIsMine ? abandonChecked : false)}
-          />
           <Button button="link" label={__('Cancel')} onClick={closeModal} />
         </div>
       </Form>

src/ui/redux/actions/file.js

@@ -2,10 +2,11 @@ import * as ACTIONS from 'constants/action_types';
 // @if TARGET='app'
 import { shell } from 'electron';
 // @endif
-import { Lbry, batchActions, doAbandonClaim, selectMyClaimsOutpoints } from 'lbry-redux';
+import { Lbry, batchActions, doAbandonClaim, selectMyClaimsOutpoints, makeSelectFileInfoForUri } from 'lbry-redux';
 import { doHideModal } from 'redux/actions/app';
 import { goBack } from 'connected-react-router';
 import { doSetPlayingUri } from 'redux/actions/content';
+import { selectPlayingUri } from 'redux/selectors/content';
 
 export function doOpenFileInFolder(path) {
   return () => {
@@ -48,16 +49,23 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
   };
 }
 
-export function doDeleteFileAndMaybeGoBack(fileInfo, deleteFromComputer, abandonClaim) {
+export function doDeleteFileAndMaybeGoBack(uri, deleteFromComputer, abandonClaim) {
-  return dispatch => {
+  return (dispatch, getState) => {
+    const state = getState();
+    const playingUri = selectPlayingUri(state);
+    const { outpoint } = makeSelectFileInfoForUri(uri)(state);
     const actions = [];
     actions.push(doHideModal());
-    actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
+    actions.push(doDeleteFile(outpoint, deleteFromComputer, abandonClaim));
-    actions.push(doSetPlayingUri(null));
+
-    dispatch(batchActions(...actions));
+    if (playingUri === uri) {
+      actions.push(doSetPlayingUri(null));
+    }
 
     if (abandonClaim) {
-      dispatch(goBack());
+      actions.push(goBack());
     }
+
+    dispatch(batchActions(...actions));
   };
 }

src/ui/util/use-persisted-state.js

@@ -12,7 +12,7 @@ export default function usePersistedState(key, firstTimeDefault) {
         parsedItem = JSON.parse(item);
       } catch (e) {}
 
-      if (parsedItem) {
+      if (parsedItem !== undefined) {
         defaultValue = parsedItem;
       } else {
         defaultValue = item;