diff --git a/frontend/src/components/modals/MovieUploadModal.tsx b/frontend/src/components/modals/MovieUploadModal.tsx index 85e852f93..f96e77089 100644 --- a/frontend/src/components/modals/MovieUploadModal.tsx +++ b/frontend/src/components/modals/MovieUploadModal.tsx @@ -1,11 +1,8 @@ -import React, { FunctionComponent, useCallback, useMemo } from "react"; -import { Form } from "react-bootstrap"; -import { Column } from "react-table"; +import React, { FunctionComponent, useCallback } from "react"; import { dispatchTask } from "../../@modules/task"; import { createTask } from "../../@modules/task/utilities"; import { useProfileBy, useProfileItemsToLanguages } from "../../@redux/hooks"; import { MoviesApi } from "../../apis"; -import { BuildKey } from "../../utilities"; import { BaseModalProps } from "./BaseModal"; import { useModalInformation } from "./hooks"; import SubtitleUploadModal, { @@ -13,9 +10,7 @@ import SubtitleUploadModal, { Validator, } from "./SubtitleUploadModal"; -interface Payload { - forced: boolean; -} +interface Payload {} export const TaskGroupName = "Uploading Subtitles..."; @@ -67,11 +62,7 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => { const tasks = items .filter((v) => v.language !== null) .map((v) => { - const { - file, - language, - payload: { forced }, - } = v; + const { file, language, forced, hi } = v; return createTask( file.name, @@ -79,9 +70,9 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => { MoviesApi.uploadSubtitles.bind(MoviesApi), radarrId, { - file: file, + file, forced, - hi: false, + hi, language: language!.code2, } ); @@ -92,39 +83,12 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => { [payload] ); - const columns = useMemo<Column<PendingSubtitle<Payload>>[]>( - () => [ - { - id: "forced", - Header: "Forced", - accessor: "payload", - Cell: ({ row, value, update }) => { - const { original, index } = row; - return ( - <Form.Check - custom - disabled={original.state === "fetching"} - id={BuildKey(index, original.file.name, "forced")} - checked={value.forced} - onChange={(v) => { - const newInfo = { ...row.original }; - newInfo.payload.forced = v.target.checked; - update && update(row, newInfo); - }} - ></Form.Check> - ); - }, - }, - ], - [] - ); - return ( <SubtitleUploadModal hideAllLanguages initial={{ forced: false }} availableLanguages={availableLanguages} - columns={columns} + columns={[]} upload={upload} update={update} validate={validate} diff --git a/frontend/src/components/modals/SubtitleUploadModal.tsx b/frontend/src/components/modals/SubtitleUploadModal.tsx index 4584826fb..ac6edd14b 100644 --- a/frontend/src/components/modals/SubtitleUploadModal.tsx +++ b/frontend/src/components/modals/SubtitleUploadModal.tsx @@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Button, Container, Form } from "react-bootstrap"; import { Column, TableUpdater } from "react-table"; import { LanguageSelector, MessageIcon } from ".."; +import { BuildKey } from "../../utilities"; import { FileForm } from "../inputs"; import { SimpleTable } from "../tables"; import BaseModal, { BaseModalProps } from "./BaseModal"; @@ -20,6 +21,8 @@ export interface PendingSubtitle<P> { state: "valid" | "fetching" | "warning" | "error"; messages: string[]; language: Language.Info | null; + forced: boolean; + hi: boolean; payload: P; } @@ -67,6 +70,8 @@ export default function SubtitleUploadModal<T>( state: "fetching", messages: [], language: initialLanguage, + forced: false, + hi: false, payload: { ...initialRef.current }, })); @@ -165,7 +170,48 @@ export default function SubtitleUploadModal<T>( Header: "File", accessor: (d) => d.file.name, }, - ...columns, + { + id: "hi", + Header: "HI", + accessor: "hi", + Cell: ({ row, value, update }) => { + const { original, index } = row; + return ( + <Form.Check + custom + disabled={original.state === "fetching"} + id={BuildKey(index, original.file.name, "hi")} + checked={value} + onChange={(v) => { + const newInfo = { ...row.original }; + newInfo.hi = v.target.checked; + update && update(row, newInfo); + }} + ></Form.Check> + ); + }, + }, + { + id: "forced", + Header: "Forced", + accessor: "forced", + Cell: ({ row, value, update }) => { + const { original, index } = row; + return ( + <Form.Check + custom + disabled={original.state === "fetching"} + id={BuildKey(index, original.file.name, "forced")} + checked={value} + onChange={(v) => { + const newInfo = { ...row.original }; + newInfo.forced = v.target.checked; + update && update(row, newInfo); + }} + ></Form.Check> + ); + }, + }, { id: "language", Header: "Language", @@ -188,6 +234,7 @@ export default function SubtitleUploadModal<T>( ); }, }, + ...columns, { id: "action", accessor: "file",