feat: improve task management, completed task will not re-start again

package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@volcengine/openapi": "^1.18.3",
+    "ahooks": "^3.8.4",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

renderer/components/TaskControls.tsx

@@ -1,12 +1,30 @@
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useState,
+  type Dispatch,
+  type FC,
+  type SetStateAction,
+} from 'react';
 import { Button } from './ui/button';
 import { toast } from 'sonner';
-import { isSubtitleFile, needsCoreML } from 'lib/utils';
+import { getNewTaskFiles, needsCoreML } from 'lib/utils';
 import { useTranslation } from 'next-i18next';
+import type { IFiles } from '../../types';
+import { Switch } from './ui/switch';
+import useLocalStorageState from 'hooks/useLocalStorageState';
+import { useUpdateEffect } from 'ahooks';
 
-const TaskControls = ({ files, formData }) => {
-  const [taskStatus, setTaskStatus] = useState('idle');
+type TaskStatus = 'idle' | 'running' | 'paused' | 'cancelled' | 'completed';
+
+const TaskControls: FC<{
+  files: IFiles[];
+  setFiles: Dispatch<SetStateAction<IFiles[]>>;
+  formData: any;
+}> = ({ files, setFiles, formData }) => {
+  const [taskStatus, setTaskStatus] = useState<TaskStatus>('idle');
   const { t } = useTranslation(['home', 'common']);
+  const [autoStartNewTaskWhenRunning, setAutoStartNewTaskWhenRunning] =
+    useLocalStorageState<boolean>('auto-start-new-task-when-running', false);
 
   useEffect(() => {
     // 获取当前任务状态
@@ -17,7 +35,7 @@ const TaskControls = ({ files, formData }) => {
     getCurrentTaskStatus();
 
     // 监听任务状态变化
-    const cleanup = window?.ipc?.on('taskComplete', (status: string) => {
+    const cleanup = window?.ipc?.on('taskComplete', (status: TaskStatus) => {
       setTaskStatus(status);
     });
 
@@ -28,30 +46,27 @@ const TaskControls = ({ files, formData }) => {
 
   const handleTask = async () => {
     if (!files?.length) {
-      toast(t('common:notification'), {
-        description: t('home:noTask'),
-      });
-      return;
+      return toast(t('common:notification'), { description: t('home:noTask') });
     }
-    const isAllFilesProcessed = files.every((item) => {
-      const basicProcessingDone = item.extractAudio && item.extractSubtitle;
-
-      if (formData.translateProvider === '-1') {
-        return basicProcessingDone;
-      }
-      if (isSubtitleFile(item?.filePath)) {
-        return item.translateSubtitle;
-      }
 
-      return basicProcessingDone && item.translateSubtitle;
-    });
+    // when start task button pressed, persist taskType to IFiles
+    const needPersist = files.some((f) => !f.taskType);
+    let updatedFiles = files;
+    if (needPersist) {
+      updatedFiles = files.map((f) => {
+        if (f.taskType) return f;
+        return { ...f, taskType: formData.taskType };
+      });
+      setFiles(updatedFiles);
+    }
 
-    if (isAllFilesProcessed) {
-      toast(t('common:notification'), {
+    const newTaskFiles = getNewTaskFiles(updatedFiles);
+    if (!newTaskFiles.length) {
+      return toast(t('common:notification'), {
         description: t('home:allFilesProcessed'),
       });
-      return;
     }
+
     // if(formData.model && needsCoreML(formData.model)){
     //   const checkMlmodel = await window.ipc.invoke('checkMlmodel', formData.model);
     //   if(!checkMlmodel){
@@ -61,8 +76,15 @@ const TaskControls = ({ files, formData }) => {
     //     return;
     //   }
     // }
+
     setTaskStatus('running');
-    window?.ipc?.send('handleTask', { files, formData });
+    setFiles((files) =>
+      files.map((f) => {
+        if (f.sent) return f;
+        return { ...f, sent: true };
+      }),
+    );
+    window?.ipc?.send('handleTask', { files: newTaskFiles, formData });
   };
   const handlePause = () => {
     window?.ipc?.send('pauseTask', null);
@@ -78,6 +100,18 @@ const TaskControls = ({ files, formData }) => {
     window?.ipc?.send('cancelTask', null);
     setTaskStatus('cancelled');
   };
+
+  useUpdateEffect(() => {
+    if (
+      taskStatus === 'running' &&
+      autoStartNewTaskWhenRunning &&
+      files.length &&
+      files.some((f) => !f.sent)
+    ) {
+      handleTask();
+    }
+  }, [files.length]);
+
   return (
     <div className="flex gap-2 ml-auto">
       {(taskStatus === 'idle' || taskStatus === 'completed') && (
@@ -87,6 +121,19 @@ const TaskControls = ({ files, formData }) => {
       )}
       {taskStatus === 'running' && (
         <>
+          <span className="inline-flex items-center justify-center gap-x-1 mr-1">
+            <Switch
+              id="auto-start-new-task-when-running"
+              checked={autoStartNewTaskWhenRunning}
+              onCheckedChange={setAutoStartNewTaskWhenRunning}
+            />
+            <label
+              htmlFor="auto-start-new-task-when-running"
+              className="cursor-pointer select-none"
+            >
+              {t('home:autoStartNewTaskWhenRunning')}
+            </label>
+          </span>
           <Button onClick={handlePause}>{t('home:pauseTask')}</Button>
           <Button onClick={handleCancel}>{t('home:cancelTask')}</Button>
         </>

renderer/hooks/useIpcCommunication.tsx

@@ -1,7 +1,9 @@
-import { useEffect } from 'react';
-import { IFiles } from '../../types';
+import { useEffect, type Dispatch, type SetStateAction } from 'react';
+import type { IFiles } from '../../types';
 
-export default function useIpcCommunication(setFiles) {
+export default function useIpcCommunication(
+  setFiles: Dispatch<SetStateAction<IFiles[]>>,
+) {
   useEffect(() => {
     window?.ipc?.on('file-selected', (res: IFiles[]) => {
       setFiles((prevFiles) => [...prevFiles, ...res]);

renderer/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import type { IFiles } from '../../types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -323,3 +324,60 @@ export const filterSupportedFiles = (files: File[]) => {
     );
   });
 };
+
+function fileStatusGetters(file: IFiles) {
+  const { taskType, extractAudio, extractSubtitle, translateSubtitle } = file;
+
+  function running(): boolean {
+    return !ended() && !!(extractAudio || extractSubtitle || translateSubtitle);
+  }
+
+  function ended(): boolean {
+    return succeed() || failed();
+  }
+
+  function succeed(): boolean {
+    if (taskType === 'generateOnly')
+      return extractAudio === 'done' && extractSubtitle === 'done';
+    if (taskType === 'translateOnly') return translateSubtitle === 'done';
+    if (taskType === 'generateAndTranslate')
+      return (
+        extractAudio === 'done' &&
+        extractSubtitle === 'done' &&
+        translateSubtitle === 'done'
+      );
+  }
+
+  function failed(): boolean {
+    return (
+      extractAudio === 'error' ||
+      extractSubtitle === 'error' ||
+      translateSubtitle === 'error'
+    );
+  }
+
+  return {
+    get running() {
+      return running();
+    },
+    get ended() {
+      return ended();
+    },
+    get succeed() {
+      return succeed();
+    },
+    get failed() {
+      return failed();
+    },
+  };
+}
+
+export function getNewTaskFiles(files: IFiles[]) {
+  return files.filter((file) => {
+    if (!file.sent) return true; // not sent yet
+    const { running, succeed } = fileStatusGetters(file);
+    if (running) return false;
+    if (succeed) return false;
+    return true; // rest are un-started | failed
+  });
+}

renderer/pages/[locale]/home.tsx

@@ -12,9 +12,10 @@ import TaskConfigForm from '@/components/TaskConfigForm';
 import TaskListControl from '@/components/TaskListControl';
 import { getStaticPaths, makeStaticProperties } from '../../lib/get-static';
 import { filterSupportedFiles } from 'lib/utils';
+import type { IFiles } from '../../../types';
 
 export default function Component() {
-  const [files, setFiles] = useState([]);
+  const [files, setFiles] = useState<IFiles[]>([]);
   const { systemInfo } = useSystemInfo();
   const { form, formData } = useFormConfig();
   useIpcCommunication(setFiles);
@@ -119,7 +120,7 @@ export default function Component() {
           <TaskList files={files} formData={formData} />
         </ScrollArea>
         <div className="flex-1" />
-        <TaskControls formData={formData} files={files} />
+        <TaskControls formData={formData} files={files} setFiles={setFiles} />
       </div>
       {/* <Guide systemInfo={systemInfo} updateSystemInfo={updateSystemInfo} /> */}
     </div>

renderer/public/locales/en/home.json

@@ -106,5 +106,6 @@
   "total": "Total",
   "translated": "Translated",
   "completionRate": "Completion rate",
-  "originalSubtitle": "Original subtitle"
+  "originalSubtitle": "Original subtitle",
+  "autoStartNewTaskWhenRunning": "Auto tart new tasks"
 }

renderer/public/locales/zh/home.json

@@ -112,5 +112,6 @@
   "total": "总数",
   "translated": "已翻译",
   "completionRate": "完成率",
-  "originalSubtitle": "原文字幕"
+  "originalSubtitle": "原文字幕",
+  "autoStartNewTaskWhenRunning": "自动开始新任务"
 }