Move download subtitle action to background

frontend/src/Movies/Detail/index.tsx

@@ -31,8 +31,7 @@ import { RouterEmptyPath } from "../../special-pages/404";
 import { useOnLoadedOnce } from "../../utilites";
 import Table from "./table";
 
-const download = (item: any, result: SearchResultType) => {
-  item = item as Item.Movie;
+const download = (item: Item.Movie, result: SearchResultType) => {
   const { language, hearing_impaired, forced, provider, subtitle } = result;
   return ProvidersApi.downloadMovieSubtitle(item.radarrId, {
     language,
@@ -182,7 +181,7 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
       <MovieUploadModal modalKey="upload" size="lg"></MovieUploadModal>
       <ManualSearchModal
         modalKey="manual-search"
-        onSelect={download}
+        download={download}
       ></ManualSearchModal>
     </Container>
   );

frontend/src/Series/Episodes/table.tsx

@@ -32,8 +32,7 @@ interface Props {
   profile?: Language.Profile;
 }
 
-const download = (item: any, result: SearchResultType) => {
-  item = item as Item.Episode;
+const download = (item: Item.Episode, result: SearchResultType) => {
   const { language, hearing_impaired, forced, provider, subtitle } = result;
   return ProvidersApi.downloadEpisodeSubtitle(
     item.sonarrSeriesId,
@@ -226,7 +225,7 @@ const Table: FunctionComponent<Props> = ({
       <EpisodeHistoryModal modalKey="history" size="lg"></EpisodeHistoryModal>
       <ManualSearchModal
         modalKey="manual-search"
-        onSelect={download}
+        download={download}
       ></ManualSearchModal>
     </React.Fragment>
   );

frontend/src/components/modals/ManualSearchModal.tsx

@@ -25,7 +25,6 @@ import {
 } from "react-bootstrap";
 import { Column } from "react-table";
 import {
-  AsyncButton,
   BaseModal,
   BaseModalProps,
   LanguageText,
@@ -33,8 +32,10 @@ import {
   PageTable,
   useModalPayload,
 } from "..";
+import { dispatchTask } from "../../@modules/task";
+import { createTask } from "../../@modules/task/utilites";
 import { ProvidersApi } from "../../apis";
-import { isMovie } from "../../utilites";
+import { GetItemId, isMovie } from "../../utilites";
 import "./msmStyle.scss";
 
 type SupportType = Item.Movie | Item.Episode;
@@ -45,20 +46,19 @@ enum SearchState {
   Finished,
 }
 
-interface Props {
-  onSelect: (item: SupportType, result: SearchResultType) => Promise<void>;
-  onDownload?: () => void;
+interface Props<T extends SupportType> {
+  download: (item: T, result: SearchResultType) => Promise<void>;
 }
 
-export const ManualSearchModal: FunctionComponent<Props & BaseModalProps> = (
-  props
-) => {
-  const { onSelect, onDownload, ...modal } = props;
+export function ManualSearchModal<T extends SupportType>(
+  props: Props<T> & BaseModalProps
+) {
+  const { download, ...modal } = props;
 
   const [result, setResult] = useState<SearchResultType[]>([]);
   const [searchState, setSearchState] = useState(SearchState.Ready);
 
-  const item = useModalPayload<SupportType>(modal.modalKey);
+  const item = useModalPayload<T>(modal.modalKey);
 
   const search = useCallback(async () => {
     if (item) {
@@ -186,23 +186,32 @@ export const ManualSearchModal: FunctionComponent<Props & BaseModalProps> = (
       },
       {
         accessor: "subtitle",
-        Cell: ({ row, externalUpdate }) => {
+        Cell: ({ row }) => {
           const result = row.original;
           return (
-            <AsyncButton
+            <Button
               size="sm"
               variant="light"
-              noReset
-              promise={() => onSelect(item!, result)}
-              onSuccess={() => externalUpdate && externalUpdate(row)}
+              disabled={item === null}
+              onClick={() => {
+                if (!item) return;
+
+                const id = GetItemId(item);
+                const task = createTask(item.title, id, download, item, result);
+                dispatchTask(
+                  "Downloading subtitles...",
+                  [task],
+                  "Downloading..."
+                );
+              }}
             >
               <FontAwesomeIcon icon={faDownload}></FontAwesomeIcon>
-            </AsyncButton>
+            </Button>
           );
         },
       },
     ],
-    [onSelect, item]
+    [download, item]
   );
 
   const content = useMemo<JSX.Element>(() => {
@@ -225,12 +234,11 @@ export const ManualSearchModal: FunctionComponent<Props & BaseModalProps> = (
             emptyText="No Result"
             columns={columns}
             data={result}
-            externalUpdate={onDownload}
           ></PageTable>
         </React.Fragment>
       );
     }
-  }, [searchState, columns, result, search, item?.path, onDownload]);
+  }, [searchState, columns, result, search, item?.path]);
 
   const footer = useMemo(
     () => (
@@ -271,7 +279,7 @@ export const ManualSearchModal: FunctionComponent<Props & BaseModalProps> = (
       {content}
     </BaseModal>
   );
-};
+}
 
 const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
   matches,

frontend/src/utilites/index.ts

@@ -40,7 +40,7 @@ export function submodProcessColor(s: string) {
   return `color(name=${s})`;
 }
 
-export function GetItemId(item: any): number {
+export function GetItemId<T extends object>(item: T): number {
   if (isMovie(item)) {
     return item.radarrId;
   } else if (isEpisode(item)) {