Add "Cancel Upload" button

src/components/upload-dialog.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import { useShallowEqualSelector } from '../utils';
 
+import { actions as uploadDialogActions } from '../redux/upload-dialog-feature';
+
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -11,6 +14,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import { TransitionProps } from '@material-ui/core/transitions';
+import { Button } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
     progressPerc: {
@@ -33,9 +37,11 @@ const Transition = React.forwardRef(function Transition(
 
 export const UploadDialog = (props: {}) => {
     const classes = useStyles();
+    const dispatch = useDispatch();
 
     let {
         visible,
+        cancelled,
         writtenProgress,
         encryptedProgress,
         totalProgress,
@@ -47,6 +53,10 @@ export const UploadDialog = (props: {}) => {
         titleConverting,
     } = useShallowEqualSelector(state => state.uploadDialog);
 
+    const handleCancelUpload = useCallback(() => {
+        dispatch(uploadDialogActions.setCancelUpload(true));
+    }, [dispatch]);
+
     let progressValue = Math.floor((writtenProgress / totalProgress) * 100);
     let bufferValue = Math.floor((encryptedProgress / totalProgress) * 100);
     let convertedValue = Math.floor((trackConverting / trackTotal) * 100);
@@ -86,7 +96,11 @@ export const UploadDialog = (props: {}) => {
                 />
                 <Box className={classes.progressPerc}>{progressValue}%</Box>
             </DialogContent>
-            <DialogActions></DialogActions>
+            <DialogActions>
+                <Button disabled={cancelled} onClick={handleCancelUpload}>
+                    {cancelled ? `Stopping after current track...` : `Cancel Recording`}
+                </Button>
+            </DialogActions>
         </Dialog>
     );
 };

src/redux/actions.ts

@@ -282,12 +282,16 @@ export function convertAndUpload(files: File[], format: string, titleSource: Tit
         const wireformat = WireformatDict[format];
 
         await netmdService?.stop();
-        dispatch(uploadDialogActions.setVisible(true));
+        dispatch(batchActions([uploadDialogActions.setVisible(true), uploadDialogActions.setCancelUpload(false)]));
 
         const updateProgressCallback = ({ written, encrypted, total }: { written: number; encrypted: number; total: number }) => {
             dispatch(uploadDialogActions.setWriteProgress({ written, encrypted, total }));
         };
 
+        const hasUploadBeenCancelled = () => {
+            return getState().uploadDialog.cancelled;
+        };
+
         let trackUpdate: {
             current: number;
             converting: number;
@@ -310,7 +314,7 @@ export function convertAndUpload(files: File[], format: string, titleSource: Tit
 
             let i = 0;
             function convertNext() {
-                if (i === files.length) {
+                if (i === files.length || hasUploadBeenCancelled()) {
                     trackUpdate.converting = i;
                     trackUpdate.titleConverting = ``;
                     updateTrack();
@@ -357,6 +361,10 @@ export function convertAndUpload(files: File[], format: string, titleSource: Tit
         let errorMessage = ``;
         let i = 1;
         for await (let item of conversionIterator(files)) {
+            if (hasUploadBeenCancelled()) {
+                break;
+            }
+
             const { file, data } = item;
 
             let title = file.name;

src/redux/upload-dialog-feature.ts

@@ -3,6 +3,8 @@ import { enableBatching } from 'redux-batched-actions';
 
 export interface LoadingDialogState {
     visible: boolean;
+    cancelled: boolean;
+
     writtenProgress: number;
     encryptedProgress: number;
     totalProgress: number;
@@ -17,6 +19,8 @@ export interface LoadingDialogState {
 
 const initialState: LoadingDialogState = {
     visible: false,
+    cancelled: false,
+
     // Current Track Upload
     writtenProgress: 0,
     encryptedProgress: 0,
@@ -42,6 +46,9 @@ export const slice = createSlice({
             state.writtenProgress = action.payload.written;
             state.totalProgress = action.payload.total;
         },
+        setCancelUpload: (state, action: PayloadAction<boolean>) => {
+            state.cancelled = action.payload;
+        },
         setTrackProgress: (
             state,
             action: PayloadAction<{ total: number; current: number; converting: number; titleCurrent: string; titleConverting: string }>