no log: Make background tasks can be extended dynamically

frontend/src/@modules/task/index.ts

@@ -1,5 +1,9 @@
 import { keys } from "lodash";
-import { siteAddProgress, siteRemoveProgress } from "../../@redux/actions";
+import {
+  siteAddProgress,
+  siteRemoveProgress,
+  siteUpdateProgressCount,
+} from "../../@redux/actions";
 import store from "../../@redux/store";
 
 // A background task manager, use for dispatching task one by one
@@ -11,17 +15,22 @@ class BackgroundTask {
 
   dispatch<T extends Task.Callable>(groupName: string, tasks: Task.Task<T>[]) {
     if (groupName in this.groups) {
-      return false;
+      this.groups[groupName].push(...tasks);
+      store.dispatch(
+        siteUpdateProgressCount({
+          id: groupName,
+          count: this.groups[groupName].length,
+        })
+      );
+      return;
     }
 
     this.groups[groupName] = tasks;
     setTimeout(async () => {
-      const dispatch = store.dispatch;
-
       for (let index = 0; index < tasks.length; index++) {
         const task = tasks[index];
 
-        dispatch(
+        store.dispatch(
           siteAddProgress([
             {
               id: groupName,
@@ -37,10 +46,8 @@ class BackgroundTask {
         } catch (error) {}
       }
       delete this.groups[groupName];
-      dispatch(siteRemoveProgress([groupName]));
+      store.dispatch(siteRemoveProgress([groupName]));
     });
-
-    return true;
   }
 
   find(groupName: string, id: number) {

frontend/src/@redux/actions/site.ts

@@ -30,6 +30,11 @@ export const siteRemoveNotifications = createAction<string>(
 export const siteAddProgress =
   createAction<Site.Progress[]>("site/progress/add");
 
+export const siteUpdateProgressCount = createAction<{
+  id: string;
+  count: number;
+}>("site/progress/update_count");
+
 export const siteRemoveProgress = createAsyncThunk(
   "site/progress/remove",
   async (ids: string[]) => {

frontend/src/@redux/reducers/site.ts

@@ -12,6 +12,7 @@ import {
   siteUpdateBadges,
   siteUpdateInitialization,
   siteUpdateOffline,
+  siteUpdateProgressCount,
 } from "../actions/site";
 
 interface Site {
@@ -90,6 +91,13 @@ const reducer = createReducer(defaultSite, (builder) => {
     })
     .addCase(siteRemoveProgress.fulfilled, (state, action) => {
       pullAllWith(state.progress, action.payload, (l, r) => l.id === r);
+    })
+    .addCase(siteUpdateProgressCount, (state, action) => {
+      const { id, count } = action.payload;
+      const progress = state.progress.find((v) => v.id === id);
+      if (progress) {
+        progress.count = count;
+      }
     });
 
   builder

frontend/src/Movies/Detail/index.tsx

@@ -8,7 +8,7 @@ import {
   faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 import React, { FunctionComponent, useState } from "react";
-import { Container, Row } from "react-bootstrap";
+import { Alert, Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
 import { useIsGroupTaskRunningWithId } from "../../@modules/task/hooks";
@@ -144,6 +144,16 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
           </ContentHeader.Button>
         </ContentHeader.Group>
       </ContentHeader>
+      <Row>
+        <Alert
+          className="w-100 m-0 py-2"
+          show={hasTask}
+          style={{ borderRadius: 0 }}
+          variant="light"
+        >
+          A background task is running for this movie, actions are unavailable
+        </Alert>
+      </Row>
       <Row>
         <ItemOverview item={item} details={[]}></ItemOverview>
       </Row>

frontend/src/components/modals/MovieUploadModal.tsx

@@ -2,7 +2,6 @@ import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { Button, Container, Form } from "react-bootstrap";
 import { FileForm, LanguageSelector } from "..";
 import BackgroundTask from "../../@modules/task";
-import { useIsGroupTaskRunning } from "../../@modules/task/hooks";
 import { createTask } from "../../@modules/task/utilites";
 import {
   useEnabledLanguages,
@@ -35,11 +34,9 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
   const [file, setFile] = useState<Nullable<File>>(null);
   const [forced, setForced] = useState(false);
 
-  const hasTask = useIsGroupTaskRunning(TaskGroupName);
-
   const canUpload = useMemo(() => {
-    return file !== null && language?.code2 && !hasTask;
-  }, [language, file, hasTask]);
+    return file !== null && language?.code2;
+  }, [language, file]);
 
   const footer = (
     <Button

frontend/src/components/modals/SubtitleToolModal.tsx

@@ -40,7 +40,6 @@ import {
   useShowModal,
 } from "..";
 import BackgroundTask from "../../@modules/task";
-import { useIsGroupTaskRunning } from "../../@modules/task/hooks";
 import { createTask } from "../../@modules/task/utilites";
 import { useEnabledLanguages } from "../../@redux/hooks";
 import { SubtitlesApi } from "../../apis";
@@ -300,8 +299,6 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
   const payload = useModalPayload<SupportType[]>(props.modalKey);
   const [selections, setSelections] = useState<TableColumnType[]>([]);
 
-  const hasTask = useIsGroupTaskRunning(TaskGroupName);
-
   const closeModal = useCloseModal();
 
   const process = useCallback(
@@ -398,14 +395,14 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
       <Dropdown as={ButtonGroup} onSelect={(k) => k && process(k)}>
         <ActionButton
           size="sm"
-          disabled={selections.length === 0 || hasTask}
+          disabled={selections.length === 0}
           icon={faPlay}
           onClick={() => process("sync")}
         >
           Sync
         </ActionButton>
         <Dropdown.Toggle
-          disabled={selections.length === 0 || hasTask}
+          disabled={selections.length === 0}
           split
           variant="light"
           size="sm"
@@ -449,7 +446,7 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
         </Dropdown.Menu>
       </Dropdown>
     ),
-    [showModal, selections.length, process, hasTask]
+    [showModal, selections.length, process]
   );
 
   return (