added pause and resume logic

src/components/ExportInProgress.tsx

@@ -25,12 +25,12 @@ export default function ExportInProgress(props: Props) {
         <>
             <div style={{ marginBottom: '30px', padding: '0 5%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
                 <div style={{ marginBottom: '10px' }}>
-                    <ComfySpan> {props.exportStats.current} / {props.exportStats.total} </ComfySpan> <span style={{ marginLeft: '10px' }}> files exported</span>
+                    <ComfySpan> {props.exportStats.current} / {props.exportStats.total} </ComfySpan> <span style={{ marginLeft: '10px' }}> files exported {props.exportStage === ExportStage.PAUSED && `(paused)`}</span>
                 </div>
                 <div style={{ width: '100%', marginBottom: '30px' }}>
                     <ProgressBar
                         now={Math.round(props.exportStats.current * 100 / props.exportStats.total)}
-                        animated
+                        animated={!(props.exportStage === ExportStage.PAUSED)}
                         variant="upload-progress-bar"
                     />
                 </div>

src/components/ExportModal.tsx

@@ -53,6 +53,9 @@ export default function ExportModal(props: Props) {
         exportInfo?.folder && setExportFolder(exportInfo.folder);
         exportInfo?.time && setLastExportTime(exportInfo.time);
         setExportSize(props.usage);
+        exportService.ElectronAPIs.registerStopExportListener(stopExport);
+        exportService.ElectronAPIs.registerPauseExportListener(pauseExport);
+        exportService.ElectronAPIs.registerStartExportListener(startExport);
     }, []);
 
     useEffect(() => {
@@ -80,6 +83,7 @@ export default function ExportModal(props: Props) {
     };
 
     const startExport = async () => {
+        const exportFolder = getData(LS_KEYS.EXPORT)?.folder;
         if (!exportFolder) {
             const folderSelected = await selectExportDirectory();
             if (!folderSelected) {
@@ -102,8 +106,9 @@ export default function ExportModal(props: Props) {
         }
     };
 
-    const cancelExport = () => {
-        exportService.cancelExport();
+    const stopExport = () => {
+        exportService.stopRunningExport();
+        const lastExportTime = getData(LS_KEYS.EXPORT)?.time;
         if (!lastExportTime) {
             updateExportStage(ExportStage.INIT);
         } else {
@@ -112,7 +117,7 @@ export default function ExportModal(props: Props) {
     };
     const pauseExport = () => {
         updateExportStage(ExportStage.PAUSED);
-        exportService.stopExport();
+        exportService.pauseRunningExport();
     };
 
     const ExportDynamicState = () => {
@@ -136,7 +141,7 @@ export default function ExportModal(props: Props) {
                         exportStage={exportStage}
                         exportStats={exportStats}
                         exportFiles={startExport}
-                        cancelExport={cancelExport}
+                        cancelExport={stopExport}
                         pauseExport={pauseExport}
                     />
                 );

src/services/exportService.ts

@@ -19,15 +19,13 @@ class ExportService {
 
     exportInProgress: Promise<void> = null;
 
-    abortExport: boolean = false;
+    stopExport: boolean = false;
     pauseExport: boolean = false;
     failedFiles: File[] = [];
     constructor() {
         const main = async () => {
             this.ElectronAPIs = runningInBrowser() && window['ElectronAPIs'];
             if (this.ElectronAPIs) {
-                this.ElectronAPIs.registerStopExportListener(() => (this.abortExport = true));
-                this.ElectronAPIs.registerPauseExportListener(() => (this.pauseExport = true));
                 const autoStartExport = getData(LS_KEYS.EXPORT);
                 if (autoStartExport?.status) {
                     this.exportFiles(null);
@@ -39,10 +37,10 @@ class ExportService {
     async selectExportDirectory() {
         return await this.ElectronAPIs.selectRootDirectory();
     }
-    cancelExport() {
-        this.abortExport = true;
+    stopRunningExport() {
+        this.stopExport = true;
     }
-    stopExport() {
+    pauseRunningExport() {
         this.pauseExport = true;
     }
     async exportFiles(updateProgress: (stats: ExportStats) => void) {
@@ -52,8 +50,8 @@ class ExportService {
             this.ElectronAPIs.sendNotification(ExportNotification.IN_PROGRESS);
             return this.exportInProgress;
         }
-        this.exportInProgress = this.fileExporter(files, collections, updateProgress);
         this.ElectronAPIs.showOnTray('starting export');
+        this.exportInProgress = this.fileExporter(files, collections, updateProgress);
         return this.exportInProgress;
     }
 
@@ -83,7 +81,7 @@ class ExportService {
                 collectionIDMap.set(collection.id, collectionFolderPath);
             }
             for (const [index, file] of files.entries()) {
-                if (this.abortExport || this.pauseExport) {
+                if (this.stopExport || this.pauseExport) {
                     if (this.pauseExport) {
                         this.ElectronAPIs.showOnTray({
                             export_progress:
@@ -112,10 +110,11 @@ class ExportService {
                 });
                 updateProgress({ current: index + 1, total: files.length, failed: this.failedFiles.length });
             }
-            if (this.abortExport) {
+            if (this.stopExport) {
                 this.ElectronAPIs.sendNotification(
                     ExportNotification.ABORT,
                 );
+                this.ElectronAPIs.showOnTray();
             } else if (this.pauseExport) {
                 this.ElectronAPIs.sendNotification(
                     ExportNotification.PAUSE,
@@ -139,7 +138,8 @@ class ExportService {
             logError(e);
         } finally {
             this.exportInProgress = null;
-            this.abortExport = false;
+            this.stopExport = false;
+            this.pauseExport = false;
             this.failedFiles = [];
         }
     }