mirror of https://github.com/morpheus65535/bazarr
231 lines
5.7 KiB
TypeScript
231 lines
5.7 KiB
TypeScript
import { useSubtitleAction } from "@/apis/hooks";
|
|
import Language from "@/components/bazarr/Language";
|
|
import { ActionButton, ActionButtonItem } from "@/components/buttons";
|
|
import { SimpleTable } from "@/components/tables";
|
|
import { useCustomSelection } from "@/components/tables/plugins";
|
|
import {
|
|
useModal,
|
|
useModalControl,
|
|
usePayload,
|
|
withModal,
|
|
} from "@/modules/modals";
|
|
import { createTask, dispatchTask } from "@/modules/task/utilities";
|
|
import { isMovie } from "@/utilities";
|
|
import { LOG } from "@/utilities/console";
|
|
import { isObject } from "lodash";
|
|
import { FunctionComponent, useCallback, useMemo, useState } from "react";
|
|
import { Badge, ButtonGroup, Dropdown } from "react-bootstrap";
|
|
import { Column, useRowSelect } from "react-table";
|
|
import {
|
|
ProcessSubtitleContext,
|
|
ProcessSubtitleType,
|
|
useProcess,
|
|
} from "./ToolContext";
|
|
import { tools } from "./tools";
|
|
import { ToolOptions } from "./types";
|
|
|
|
type SupportType = Item.Episode | Item.Movie;
|
|
|
|
type TableColumnType = FormType.ModifySubtitle & {
|
|
raw_language: Language.Info;
|
|
};
|
|
|
|
function getIdAndType(item: SupportType): [number, "episode" | "movie"] {
|
|
if (isMovie(item)) {
|
|
return [item.radarrId, "movie"];
|
|
} else {
|
|
return [item.sonarrEpisodeId, "episode"];
|
|
}
|
|
}
|
|
|
|
const CanSelectSubtitle = (item: TableColumnType) => {
|
|
return item.path.endsWith(".srt");
|
|
};
|
|
|
|
function isElement(value: unknown): value is JSX.Element {
|
|
return isObject(value);
|
|
}
|
|
|
|
interface SubtitleToolViewProps {
|
|
count: number;
|
|
tools: ToolOptions[];
|
|
select: (items: TableColumnType[]) => void;
|
|
}
|
|
|
|
const SubtitleToolView: FunctionComponent<SubtitleToolViewProps> = ({
|
|
tools,
|
|
count,
|
|
select,
|
|
}) => {
|
|
const payload = usePayload<SupportType[]>();
|
|
|
|
const Modal = useModal({
|
|
size: "lg",
|
|
});
|
|
const { show } = useModalControl();
|
|
|
|
const columns: Column<TableColumnType>[] = useMemo<Column<TableColumnType>[]>(
|
|
() => [
|
|
{
|
|
Header: "Language",
|
|
accessor: "raw_language",
|
|
Cell: ({ value }) => (
|
|
<Badge variant="secondary">
|
|
<Language.Text value={value} long></Language.Text>
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
id: "file",
|
|
Header: "File",
|
|
accessor: "path",
|
|
Cell: ({ value }) => {
|
|
const path = value;
|
|
|
|
let idx = path.lastIndexOf("/");
|
|
|
|
if (idx === -1) {
|
|
idx = path.lastIndexOf("\\");
|
|
}
|
|
|
|
if (idx !== -1) {
|
|
return path.slice(idx + 1);
|
|
} else {
|
|
return path;
|
|
}
|
|
},
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
const data = useMemo<TableColumnType[]>(
|
|
() =>
|
|
payload?.flatMap((item) => {
|
|
const [id, type] = getIdAndType(item);
|
|
return item.subtitles.flatMap((v) => {
|
|
if (v.path !== null) {
|
|
return [
|
|
{
|
|
id,
|
|
type,
|
|
language: v.code2,
|
|
path: v.path,
|
|
raw_language: v,
|
|
},
|
|
];
|
|
} else {
|
|
return [];
|
|
}
|
|
});
|
|
}) ?? [],
|
|
[payload]
|
|
);
|
|
|
|
const plugins = [useRowSelect, useCustomSelection];
|
|
|
|
const process = useProcess();
|
|
|
|
const footer = useMemo(() => {
|
|
const action = tools[0];
|
|
const others = tools.slice(1);
|
|
|
|
return (
|
|
<Dropdown as={ButtonGroup} onSelect={(k) => k && process(k)}>
|
|
<ActionButton
|
|
size="sm"
|
|
disabled={count === 0}
|
|
icon={action.icon}
|
|
onClick={() => process(action.key)}
|
|
>
|
|
{action.name}
|
|
</ActionButton>
|
|
<Dropdown.Toggle
|
|
disabled={count === 0}
|
|
split
|
|
variant="light"
|
|
size="sm"
|
|
className="px-2"
|
|
></Dropdown.Toggle>
|
|
<Dropdown.Menu>
|
|
{others.map((v) => (
|
|
<Dropdown.Item
|
|
key={v.key}
|
|
eventKey={v.modal ? undefined : v.key}
|
|
onSelect={() => {
|
|
if (v.modal) {
|
|
show(v.modal);
|
|
}
|
|
}}
|
|
>
|
|
<ActionButtonItem icon={v.icon}>{v.name}</ActionButtonItem>
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
);
|
|
}, [count, process, show, tools]);
|
|
|
|
return (
|
|
<Modal title="Subtitle Tools" footer={footer}>
|
|
<SimpleTable
|
|
emptyText="No External Subtitles Found"
|
|
plugins={plugins}
|
|
columns={columns}
|
|
onSelect={select}
|
|
canSelect={CanSelectSubtitle}
|
|
data={data}
|
|
></SimpleTable>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export const SubtitleToolModal = withModal(SubtitleToolView, "subtitle-tools");
|
|
|
|
const SubtitleTools: FunctionComponent = () => {
|
|
const modals = useMemo(
|
|
() =>
|
|
tools
|
|
.map((t) => t.modal && <t.modal key={t.key}></t.modal>)
|
|
.filter(isElement),
|
|
[]
|
|
);
|
|
|
|
const { hide } = useModalControl();
|
|
const [selections, setSelections] = useState<TableColumnType[]>([]);
|
|
const { mutateAsync } = useSubtitleAction();
|
|
|
|
const process = useCallback<ProcessSubtitleType>(
|
|
(action, override) => {
|
|
LOG("info", "executing action", action);
|
|
hide(SubtitleToolModal.modalKey);
|
|
const tasks = selections.map((s) => {
|
|
const form: FormType.ModifySubtitle = {
|
|
id: s.id,
|
|
type: s.type,
|
|
language: s.language,
|
|
path: s.path,
|
|
...override,
|
|
};
|
|
return createTask(s.path, mutateAsync, { action, form });
|
|
});
|
|
|
|
dispatchTask(tasks, "modify-subtitles");
|
|
},
|
|
[hide, selections, mutateAsync]
|
|
);
|
|
|
|
return (
|
|
<ProcessSubtitleContext.Provider value={process}>
|
|
<SubtitleToolModal
|
|
count={selections.length}
|
|
tools={tools}
|
|
select={setSelections}
|
|
></SubtitleToolModal>
|
|
{modals}
|
|
</ProcessSubtitleContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default SubtitleTools;
|