morpheus65535
3 years ago
commit
a455dc2379
@ -1,51 +0,0 @@
|
||||
import { useIsShowed, useModalControl } from "@/modules/redux/hooks/modal";
|
||||
import clsx from "clsx";
|
||||
import { FunctionComponent, useCallback, useState } from "react";
|
||||
import { Modal } from "react-bootstrap";
|
||||
|
||||
export interface BaseModalProps {
|
||||
modalKey: string;
|
||||
size?: "sm" | "lg" | "xl";
|
||||
closeable?: boolean;
|
||||
title?: string;
|
||||
footer?: JSX.Element;
|
||||
}
|
||||
|
||||
export const BaseModal: FunctionComponent<BaseModalProps> = (props) => {
|
||||
const { size, modalKey, title, children, footer, closeable = true } = props;
|
||||
const [needExit, setExit] = useState(false);
|
||||
|
||||
const { hide: hideModal } = useModalControl();
|
||||
const showIndex = useIsShowed(modalKey);
|
||||
const isShowed = showIndex !== -1;
|
||||
|
||||
const hide = useCallback(() => {
|
||||
setExit(true);
|
||||
}, []);
|
||||
|
||||
const exit = useCallback(() => {
|
||||
if (isShowed) {
|
||||
hideModal(modalKey);
|
||||
}
|
||||
setExit(false);
|
||||
}, [isShowed, hideModal, modalKey]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
centered
|
||||
size={size}
|
||||
show={isShowed && !needExit}
|
||||
onHide={hide}
|
||||
onExited={exit}
|
||||
backdrop={closeable ? undefined : "static"}
|
||||
className={clsx(`index-${showIndex}`)}
|
||||
backdropClassName={clsx(`index-${showIndex}`)}
|
||||
>
|
||||
<Modal.Header closeButton={closeable}>{title}</Modal.Header>
|
||||
<Modal.Body>{children}</Modal.Body>
|
||||
<Modal.Footer hidden={footer === undefined}>{footer}</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseModal;
|
||||
@ -1,474 +0,0 @@
|
||||
import { useSubtitleAction } from "@/apis/hooks";
|
||||
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
|
||||
import { createTask, dispatchTask } from "@/modules/task/utilities";
|
||||
import { isMovie, submodProcessColor } from "@/utilities";
|
||||
import { LOG } from "@/utilities/console";
|
||||
import { useEnabledLanguages } from "@/utilities/languages";
|
||||
import {
|
||||
faClock,
|
||||
faCode,
|
||||
faDeaf,
|
||||
faExchangeAlt,
|
||||
faFilm,
|
||||
faImage,
|
||||
faLanguage,
|
||||
faMagic,
|
||||
faMinus,
|
||||
faPaintBrush,
|
||||
faPlay,
|
||||
faPlus,
|
||||
faTextHeight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
FunctionComponent,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Dropdown,
|
||||
Form,
|
||||
InputGroup,
|
||||
} from "react-bootstrap";
|
||||
import { Column, useRowSelect } from "react-table";
|
||||
import {
|
||||
ActionButton,
|
||||
ActionButtonItem,
|
||||
LanguageSelector,
|
||||
Selector,
|
||||
SimpleTable,
|
||||
} from "..";
|
||||
import Language from "../bazarr/Language";
|
||||
import { useCustomSelection } from "../tables/plugins";
|
||||
import BaseModal, { BaseModalProps } from "./BaseModal";
|
||||
import { availableTranslation, colorOptions } from "./toolOptions";
|
||||
|
||||
type SupportType = Item.Episode | Item.Movie;
|
||||
|
||||
type TableColumnType = FormType.ModifySubtitle & {
|
||||
_language: Language.Info;
|
||||
};
|
||||
|
||||
function getIdAndType(item: SupportType): [number, "episode" | "movie"] {
|
||||
if (isMovie(item)) {
|
||||
return [item.radarrId, "movie"];
|
||||
} else {
|
||||
return [item.sonarrEpisodeId, "episode"];
|
||||
}
|
||||
}
|
||||
|
||||
function submodProcessFrameRate(from: number, to: number) {
|
||||
return `change_FPS(from=${from},to=${to})`;
|
||||
}
|
||||
|
||||
function submodProcessOffset(h: number, m: number, s: number, ms: number) {
|
||||
return `shift_offset(h=${h},m=${m},s=${s},ms=${ms})`;
|
||||
}
|
||||
|
||||
interface ToolModalProps {
|
||||
process: (
|
||||
action: string,
|
||||
override?: Partial<FormType.ModifySubtitle>
|
||||
) => void;
|
||||
}
|
||||
|
||||
const AddColorModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
|
||||
props
|
||||
) => {
|
||||
const { process, ...modal } = props;
|
||||
const [selection, setSelection] = useState<Nullable<string>>(null);
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (selection) {
|
||||
const action = submodProcessColor(selection);
|
||||
process(action);
|
||||
}
|
||||
}, [selection, process]);
|
||||
|
||||
const footer = useMemo(
|
||||
() => (
|
||||
<Button disabled={selection === null} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
),
|
||||
[selection, submit]
|
||||
);
|
||||
return (
|
||||
<BaseModal title="Choose Color" footer={footer} {...modal}>
|
||||
<Selector options={colorOptions} onChange={setSelection}></Selector>
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
const FrameRateModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
|
||||
props
|
||||
) => {
|
||||
const { process, ...modal } = props;
|
||||
|
||||
const [from, setFrom] = useState<Nullable<number>>(null);
|
||||
const [to, setTo] = useState<Nullable<number>>(null);
|
||||
|
||||
const canSave = from !== null && to !== null && from !== to;
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (canSave) {
|
||||
const action = submodProcessFrameRate(from, to);
|
||||
process(action);
|
||||
}
|
||||
}, [canSave, from, to, process]);
|
||||
|
||||
const footer = (
|
||||
<Button disabled={!canSave} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal title="Change Frame Rate" footer={footer} {...modal}>
|
||||
<InputGroup className="px-2">
|
||||
<Form.Control
|
||||
placeholder="From"
|
||||
type="number"
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
setFrom(null);
|
||||
} else {
|
||||
setFrom(value);
|
||||
}
|
||||
}}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
placeholder="To"
|
||||
type="number"
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
setTo(null);
|
||||
} else {
|
||||
setTo(value);
|
||||
}
|
||||
}}
|
||||
></Form.Control>
|
||||
</InputGroup>
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
const AdjustTimesModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
|
||||
props
|
||||
) => {
|
||||
const { process, ...modal } = props;
|
||||
|
||||
const [isPlus, setPlus] = useState(true);
|
||||
const [offset, setOffset] = useState<[number, number, number, number]>([
|
||||
0, 0, 0, 0,
|
||||
]);
|
||||
|
||||
const updateOffset = useCallback(
|
||||
(idx: number): ChangeEventHandler<HTMLInputElement> => {
|
||||
return (e) => {
|
||||
let value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
const newOffset = [...offset] as [number, number, number, number];
|
||||
newOffset[idx] = value;
|
||||
setOffset(newOffset);
|
||||
};
|
||||
},
|
||||
[offset]
|
||||
);
|
||||
|
||||
const canSave = offset.some((v) => v !== 0);
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (canSave) {
|
||||
const newOffset = offset.map((v) => (isPlus ? v : -v));
|
||||
const action = submodProcessOffset(
|
||||
newOffset[0],
|
||||
newOffset[1],
|
||||
newOffset[2],
|
||||
newOffset[3]
|
||||
);
|
||||
process(action);
|
||||
}
|
||||
}, [process, canSave, offset, isPlus]);
|
||||
|
||||
const footer = useMemo(
|
||||
() => (
|
||||
<Button disabled={!canSave} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
),
|
||||
[submit, canSave]
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal title="Adjust Times" footer={footer} {...modal}>
|
||||
<InputGroup>
|
||||
<InputGroup.Prepend>
|
||||
<Button
|
||||
variant="secondary"
|
||||
title={isPlus ? "Later" : "Earlier"}
|
||||
onClick={() => setPlus(!isPlus)}
|
||||
>
|
||||
<FontAwesomeIcon icon={isPlus ? faPlus : faMinus}></FontAwesomeIcon>
|
||||
</Button>
|
||||
</InputGroup.Prepend>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="hour"
|
||||
onChange={updateOffset(0)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="min"
|
||||
onChange={updateOffset(1)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="sec"
|
||||
onChange={updateOffset(2)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="ms"
|
||||
onChange={updateOffset(3)}
|
||||
></Form.Control>
|
||||
</InputGroup>
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
const TranslateModal: FunctionComponent<BaseModalProps & ToolModalProps> = ({
|
||||
process,
|
||||
...modal
|
||||
}) => {
|
||||
const { data: languages } = useEnabledLanguages();
|
||||
|
||||
const available = useMemo(
|
||||
() => languages.filter((v) => v.code2 in availableTranslation),
|
||||
[languages]
|
||||
);
|
||||
|
||||
const [selectedLanguage, setLanguage] =
|
||||
useState<Nullable<Language.Info>>(null);
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (selectedLanguage) {
|
||||
process("translate", { language: selectedLanguage.code2 });
|
||||
}
|
||||
}, [selectedLanguage, process]);
|
||||
|
||||
const footer = useMemo(
|
||||
() => (
|
||||
<Button disabled={!selectedLanguage} onClick={submit}>
|
||||
Translate
|
||||
</Button>
|
||||
),
|
||||
[submit, selectedLanguage]
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal title="Translate to" footer={footer} {...modal}>
|
||||
<Form.Label>
|
||||
Enabled languages not listed here are unsupported by Google Translate.
|
||||
</Form.Label>
|
||||
<LanguageSelector
|
||||
options={available}
|
||||
onChange={setLanguage}
|
||||
></LanguageSelector>
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
const CanSelectSubtitle = (item: TableColumnType) => {
|
||||
return item.path.endsWith(".srt");
|
||||
};
|
||||
|
||||
const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
|
||||
const payload = usePayload<SupportType[]>(props.modalKey);
|
||||
const [selections, setSelections] = useState<TableColumnType[]>([]);
|
||||
|
||||
const { hide } = useModalControl();
|
||||
|
||||
const { mutateAsync } = useSubtitleAction();
|
||||
|
||||
const process = useCallback(
|
||||
(action: string, override?: Partial<FormType.ModifySubtitle>) => {
|
||||
LOG("info", "executing action", action);
|
||||
hide(props.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, props.modalKey, selections, mutateAsync]
|
||||
);
|
||||
|
||||
const { show } = useModalControl();
|
||||
|
||||
const columns: Column<TableColumnType>[] = useMemo<Column<TableColumnType>[]>(
|
||||
() => [
|
||||
{
|
||||
Header: "Language",
|
||||
accessor: "_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,
|
||||
_language: v,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
}) ?? [],
|
||||
[payload]
|
||||
);
|
||||
|
||||
const plugins = [useRowSelect, useCustomSelection];
|
||||
|
||||
const footer = useMemo(
|
||||
() => (
|
||||
<Dropdown as={ButtonGroup} onSelect={(k) => k && process(k)}>
|
||||
<ActionButton
|
||||
size="sm"
|
||||
disabled={selections.length === 0}
|
||||
icon={faPlay}
|
||||
onClick={() => process("sync")}
|
||||
>
|
||||
Sync
|
||||
</ActionButton>
|
||||
<Dropdown.Toggle
|
||||
disabled={selections.length === 0}
|
||||
split
|
||||
variant="light"
|
||||
size="sm"
|
||||
className="px-2"
|
||||
></Dropdown.Toggle>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item eventKey="remove_HI">
|
||||
<ActionButtonItem icon={faDeaf}>Remove HI Tags</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item eventKey="remove_tags">
|
||||
<ActionButtonItem icon={faCode}>Remove Style Tags</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item eventKey="OCR_fixes">
|
||||
<ActionButtonItem icon={faImage}>OCR Fixes</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item eventKey="common">
|
||||
<ActionButtonItem icon={faMagic}>Common Fixes</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item eventKey="fix_uppercase">
|
||||
<ActionButtonItem icon={faTextHeight}>
|
||||
Fix Uppercase
|
||||
</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item eventKey="reverse_rtl">
|
||||
<ActionButtonItem icon={faExchangeAlt}>
|
||||
Reverse RTL
|
||||
</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item onSelect={() => show("add-color")}>
|
||||
<ActionButtonItem icon={faPaintBrush}>Add Color</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item onSelect={() => show("change-frame-rate")}>
|
||||
<ActionButtonItem icon={faFilm}>Change Frame Rate</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item onSelect={() => show("adjust-times")}>
|
||||
<ActionButtonItem icon={faClock}>Adjust Times</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item onSelect={() => show("translate-sub")}>
|
||||
<ActionButtonItem icon={faLanguage}>Translate</ActionButtonItem>
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
),
|
||||
[selections.length, process, show]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<BaseModal title={"Subtitle Tools"} footer={footer} {...props}>
|
||||
<SimpleTable
|
||||
emptyText="No External Subtitles Found"
|
||||
plugins={plugins}
|
||||
columns={columns}
|
||||
onSelect={setSelections}
|
||||
canSelect={CanSelectSubtitle}
|
||||
data={data}
|
||||
></SimpleTable>
|
||||
</BaseModal>
|
||||
<AddColorModal process={process} modalKey="add-color"></AddColorModal>
|
||||
<FrameRateModal
|
||||
process={process}
|
||||
modalKey="change-frame-rate"
|
||||
></FrameRateModal>
|
||||
<AdjustTimesModal
|
||||
process={process}
|
||||
modalKey="adjust-times"
|
||||
></AdjustTimesModal>
|
||||
<TranslateModal
|
||||
process={process}
|
||||
modalKey="translate-sub"
|
||||
></TranslateModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default STM;
|
||||
@ -0,0 +1,36 @@
|
||||
import { Selector } from "@/components";
|
||||
import { useModal, withModal } from "@/modules/modals";
|
||||
import { submodProcessColor } from "@/utilities";
|
||||
import { FunctionComponent, useCallback, useState } from "react";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useProcess } from "./ToolContext";
|
||||
import { colorOptions } from "./tools";
|
||||
|
||||
const ColorTool: FunctionComponent = () => {
|
||||
const [selection, setSelection] = useState<Nullable<string>>(null);
|
||||
|
||||
const Modal = useModal();
|
||||
|
||||
const process = useProcess();
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (selection) {
|
||||
const action = submodProcessColor(selection);
|
||||
process(action);
|
||||
}
|
||||
}, [process, selection]);
|
||||
|
||||
const footer = (
|
||||
<Button disabled={selection === null} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal title="Choose Color" footer={footer}>
|
||||
<Selector options={colorOptions} onChange={setSelection}></Selector>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default withModal(ColorTool, "color-tool");
|
||||
@ -0,0 +1,65 @@
|
||||
import { useModal, withModal } from "@/modules/modals";
|
||||
import { FunctionComponent, useCallback, useState } from "react";
|
||||
import { Button, Form, InputGroup } from "react-bootstrap";
|
||||
import { useProcess } from "./ToolContext";
|
||||
|
||||
function submodProcessFrameRate(from: number, to: number) {
|
||||
return `change_FPS(from=${from},to=${to})`;
|
||||
}
|
||||
|
||||
const FrameRateTool: FunctionComponent = () => {
|
||||
const [from, setFrom] = useState<Nullable<number>>(null);
|
||||
const [to, setTo] = useState<Nullable<number>>(null);
|
||||
|
||||
const canSave = from !== null && to !== null && from !== to;
|
||||
|
||||
const Modal = useModal();
|
||||
|
||||
const process = useProcess();
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (canSave) {
|
||||
const action = submodProcessFrameRate(from, to);
|
||||
process(action);
|
||||
}
|
||||
}, [canSave, from, process, to]);
|
||||
|
||||
const footer = (
|
||||
<Button disabled={!canSave} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal title="Change Frame Rate" footer={footer}>
|
||||
<InputGroup className="px-2">
|
||||
<Form.Control
|
||||
placeholder="From"
|
||||
type="number"
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
setFrom(null);
|
||||
} else {
|
||||
setFrom(value);
|
||||
}
|
||||
}}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
placeholder="To"
|
||||
type="number"
|
||||
onChange={(e) => {
|
||||
const value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
setTo(null);
|
||||
} else {
|
||||
setTo(value);
|
||||
}
|
||||
}}
|
||||
></Form.Control>
|
||||
</InputGroup>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default withModal(FrameRateTool, "frame-rate-tool");
|
||||
@ -0,0 +1,100 @@
|
||||
import { useModal, withModal } from "@/modules/modals";
|
||||
import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
FunctionComponent,
|
||||
useCallback,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Button, Form, InputGroup } from "react-bootstrap";
|
||||
import { useProcess } from "./ToolContext";
|
||||
|
||||
function submodProcessOffset(h: number, m: number, s: number, ms: number) {
|
||||
return `shift_offset(h=${h},m=${m},s=${s},ms=${ms})`;
|
||||
}
|
||||
|
||||
const TimeAdjustmentTool: FunctionComponent = () => {
|
||||
const [isPlus, setPlus] = useState(true);
|
||||
const [offset, setOffset] = useState<[number, number, number, number]>([
|
||||
0, 0, 0, 0,
|
||||
]);
|
||||
|
||||
const Modal = useModal();
|
||||
|
||||
const updateOffset = useCallback(
|
||||
(idx: number): ChangeEventHandler<HTMLInputElement> => {
|
||||
return (e) => {
|
||||
let value = parseFloat(e.currentTarget.value);
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
const newOffset = [...offset] as [number, number, number, number];
|
||||
newOffset[idx] = value;
|
||||
setOffset(newOffset);
|
||||
};
|
||||
},
|
||||
[offset]
|
||||
);
|
||||
|
||||
const canSave = offset.some((v) => v !== 0);
|
||||
|
||||
const process = useProcess();
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (canSave) {
|
||||
const newOffset = offset.map((v) => (isPlus ? v : -v));
|
||||
const action = submodProcessOffset(
|
||||
newOffset[0],
|
||||
newOffset[1],
|
||||
newOffset[2],
|
||||
newOffset[3]
|
||||
);
|
||||
process(action);
|
||||
}
|
||||
}, [canSave, offset, process, isPlus]);
|
||||
|
||||
const footer = (
|
||||
<Button disabled={!canSave} onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal title="Adjust Times" footer={footer}>
|
||||
<InputGroup>
|
||||
<InputGroup.Prepend>
|
||||
<Button
|
||||
variant="secondary"
|
||||
title={isPlus ? "Later" : "Earlier"}
|
||||
onClick={() => setPlus(!isPlus)}
|
||||
>
|
||||
<FontAwesomeIcon icon={isPlus ? faPlus : faMinus}></FontAwesomeIcon>
|
||||
</Button>
|
||||
</InputGroup.Prepend>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="hour"
|
||||
onChange={updateOffset(0)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="min"
|
||||
onChange={updateOffset(1)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="sec"
|
||||
onChange={updateOffset(2)}
|
||||
></Form.Control>
|
||||
<Form.Control
|
||||
type="number"
|
||||
placeholder="ms"
|
||||
onChange={updateOffset(3)}
|
||||
></Form.Control>
|
||||
</InputGroup>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default withModal(TimeAdjustmentTool, "time-adjustment");
|
||||
@ -0,0 +1,14 @@
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
export type ProcessSubtitleType = (
|
||||
action: string,
|
||||
override?: Partial<FormType.ModifySubtitle>
|
||||
) => void;
|
||||
|
||||
export const ProcessSubtitleContext = createContext<ProcessSubtitleType>(() => {
|
||||
throw new Error("ProcessSubtitleContext not initialized");
|
||||
});
|
||||
|
||||
export function useProcess() {
|
||||
return useContext(ProcessSubtitleContext);
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
import { LanguageSelector } from "@/components/LanguageSelector";
|
||||
import { useModal, withModal } from "@/modules/modals";
|
||||
import { useEnabledLanguages } from "@/utilities/languages";
|
||||
import { FunctionComponent, useCallback, useMemo, useState } from "react";
|
||||
import { Button, Form } from "react-bootstrap";
|
||||
import { useProcess } from "./ToolContext";
|
||||
import { availableTranslation } from "./tools";
|
||||
|
||||
const TranslationTool: FunctionComponent = () => {
|
||||
const { data: languages } = useEnabledLanguages();
|
||||
|
||||
const available = useMemo(
|
||||
() => languages.filter((v) => v.code2 in availableTranslation),
|
||||
[languages]
|
||||
);
|
||||
|
||||
const Modal = useModal();
|
||||
|
||||
const [selectedLanguage, setLanguage] =
|
||||
useState<Nullable<Language.Info>>(null);
|
||||
|
||||
const process = useProcess();
|
||||
|
||||
const submit = useCallback(() => {
|
||||
if (selectedLanguage) {
|
||||
process("translate", { language: selectedLanguage.code2 });
|
||||
}
|
||||
}, [process, selectedLanguage]);
|
||||
|
||||
const footer = (
|
||||
<Button disabled={!selectedLanguage} onClick={submit}>
|
||||
Translate
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<Modal title="Translation" footer={footer}>
|
||||
<Form.Label>
|
||||
Enabled languages not listed here are unsupported by Google Translate.
|
||||
</Form.Label>
|
||||
<LanguageSelector
|
||||
options={available}
|
||||
onChange={setLanguage}
|
||||
></LanguageSelector>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default withModal(TranslationTool, "translation-tool");
|
||||
@ -0,0 +1,230 @@
|
||||
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;
|
||||
@ -1,4 +1,84 @@
|
||||
import { SelectorOption } from "..";
|
||||
import { SelectorOption } from "@/components";
|
||||
import {
|
||||
faClock,
|
||||
faCode,
|
||||
faDeaf,
|
||||
faExchangeAlt,
|
||||
faFilm,
|
||||
faImage,
|
||||
faLanguage,
|
||||
faMagic,
|
||||
faPaintBrush,
|
||||
faPlay,
|
||||
faTextHeight,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import ColorTool from "./ColorTool";
|
||||
import FrameRateTool from "./FrameRateTool";
|
||||
import TimeTool from "./TimeTool";
|
||||
import Translation from "./Translation";
|
||||
import { ToolOptions } from "./types";
|
||||
|
||||
export const tools: ToolOptions[] = [
|
||||
{
|
||||
key: "sync",
|
||||
icon: faPlay,
|
||||
name: "Sync",
|
||||
},
|
||||
{
|
||||
key: "remove_HI",
|
||||
icon: faDeaf,
|
||||
name: "Remove HI Tags",
|
||||
},
|
||||
{
|
||||
key: "remove_tags",
|
||||
icon: faCode,
|
||||
name: "Remove Style Tags",
|
||||
},
|
||||
{
|
||||
key: "OCR_fixes",
|
||||
icon: faImage,
|
||||
name: "OCR Fixes",
|
||||
},
|
||||
{
|
||||
key: "common",
|
||||
icon: faMagic,
|
||||
name: "Common Fixes",
|
||||
},
|
||||
{
|
||||
key: "fix_uppercase",
|
||||
icon: faTextHeight,
|
||||
name: "Fix Uppercase",
|
||||
},
|
||||
{
|
||||
key: "reverse_rtl",
|
||||
icon: faExchangeAlt,
|
||||
name: "Reverse RTL",
|
||||
},
|
||||
{
|
||||
key: "add_color",
|
||||
icon: faPaintBrush,
|
||||
name: "Add Color",
|
||||
modal: ColorTool,
|
||||
},
|
||||
{
|
||||
key: "change_frame_rate",
|
||||
icon: faFilm,
|
||||
name: "Change Frame Rate",
|
||||
modal: FrameRateTool,
|
||||
},
|
||||
{
|
||||
key: "adjust_time",
|
||||
icon: faClock,
|
||||
name: "Adjust Times",
|
||||
modal: TimeTool,
|
||||
},
|
||||
{
|
||||
key: "translation",
|
||||
icon: faLanguage,
|
||||
name: "Translate",
|
||||
modal: Translation,
|
||||
},
|
||||
];
|
||||
|
||||
export const availableTranslation = {
|
||||
af: "afrikaans",
|
||||
@ -0,0 +1,9 @@
|
||||
import { ModalComponent } from "@/modules/modals/WithModal";
|
||||
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export interface ToolOptions {
|
||||
key: string;
|
||||
icon: IconDefinition;
|
||||
name: string;
|
||||
modal?: ModalComponent<unknown>;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { createContext, Dispatch, SetStateAction } from "react";
|
||||
|
||||
export interface ModalData {
|
||||
key: string;
|
||||
closeable: boolean;
|
||||
size: "sm" | "lg" | "xl" | undefined;
|
||||
}
|
||||
|
||||
export type ModalSetter = {
|
||||
[P in keyof Omit<ModalData, "key">]: Dispatch<SetStateAction<ModalData[P]>>;
|
||||
};
|
||||
|
||||
export const ModalDataContext = createContext<ModalData | null>(null);
|
||||
export const ModalSetterContext = createContext<ModalSetter | null>(null);
|
||||
@ -0,0 +1,44 @@
|
||||
import clsx from "clsx";
|
||||
import { FunctionComponent, useCallback, useState } from "react";
|
||||
import { Modal } from "react-bootstrap";
|
||||
import { useCurrentLayer, useModalControl, useModalData } from "./hooks";
|
||||
|
||||
interface Props {}
|
||||
|
||||
export const ModalWrapper: FunctionComponent<Props> = ({ children }) => {
|
||||
const { size, closeable, key } = useModalData();
|
||||
const [needExit, setExit] = useState(false);
|
||||
|
||||
const { hide: hideModal } = useModalControl();
|
||||
|
||||
const layer = useCurrentLayer();
|
||||
const isShowed = layer !== -1;
|
||||
|
||||
const hide = useCallback(() => {
|
||||
setExit(true);
|
||||
}, []);
|
||||
|
||||
const exit = useCallback(() => {
|
||||
if (isShowed) {
|
||||
hideModal(key);
|
||||
}
|
||||
setExit(false);
|
||||
}, [isShowed, hideModal, key]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
centered
|
||||
size={size}
|
||||
show={isShowed && !needExit}
|
||||
onHide={hide}
|
||||
onExited={exit}
|
||||
backdrop={closeable ? undefined : "static"}
|
||||
className={clsx(`index-${layer}`)}
|
||||
backdropClassName={clsx(`index-${layer}`)}
|
||||
>
|
||||
{children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalWrapper;
|
||||
@ -0,0 +1,52 @@
|
||||
import { FunctionComponent, useMemo, useState } from "react";
|
||||
import {
|
||||
ModalData,
|
||||
ModalDataContext,
|
||||
ModalSetter,
|
||||
ModalSetterContext,
|
||||
} from "./ModalContext";
|
||||
import ModalWrapper from "./ModalWrapper";
|
||||
|
||||
export interface ModalProps {}
|
||||
|
||||
export type ModalComponent<P> = FunctionComponent<P> & {
|
||||
modalKey: string;
|
||||
};
|
||||
|
||||
export default function withModal<T>(
|
||||
Content: FunctionComponent<T>,
|
||||
key: string
|
||||
) {
|
||||
const Comp: ModalComponent<T> = (props: ModalProps & T) => {
|
||||
const [closeable, setCloseable] = useState(true);
|
||||
const [size, setSize] = useState<ModalData["size"]>(undefined);
|
||||
const data: ModalData = useMemo(
|
||||
() => ({
|
||||
key,
|
||||
size,
|
||||
closeable,
|
||||
}),
|
||||
[closeable, size]
|
||||
);
|
||||
|
||||
const setter: ModalSetter = useMemo(
|
||||
() => ({
|
||||
closeable: setCloseable,
|
||||
size: setSize,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<ModalDataContext.Provider value={data}>
|
||||
<ModalSetterContext.Provider value={setter}>
|
||||
<ModalWrapper>
|
||||
<Content {...props}></Content>
|
||||
</ModalWrapper>
|
||||
</ModalSetterContext.Provider>
|
||||
</ModalDataContext.Provider>
|
||||
);
|
||||
};
|
||||
Comp.modalKey = key;
|
||||
return Comp;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { FunctionComponent, ReactNode } from "react";
|
||||
import { Modal } from "react-bootstrap";
|
||||
import { useModalData } from "./hooks";
|
||||
|
||||
interface StandardModalProps {
|
||||
title: string;
|
||||
footer?: ReactNode;
|
||||
}
|
||||
|
||||
export const StandardModalView: FunctionComponent<StandardModalProps> = ({
|
||||
children,
|
||||
footer,
|
||||
title,
|
||||
}) => {
|
||||
const { closeable } = useModalData();
|
||||
return (
|
||||
<>
|
||||
<Modal.Header closeButton={closeable}>{title}</Modal.Header>
|
||||
<Modal.Body>{children}</Modal.Body>
|
||||
<Modal.Footer hidden={footer === undefined}>{footer}</Modal.Footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,90 @@
|
||||
import {
|
||||
hideModalAction,
|
||||
showModalAction,
|
||||
} from "@/modules/redux/actions/modal";
|
||||
import { useReduxAction, useReduxStore } from "@/modules/redux/hooks/base";
|
||||
import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
|
||||
import { StandardModalView } from "./components";
|
||||
import {
|
||||
ModalData,
|
||||
ModalDataContext,
|
||||
ModalSetterContext,
|
||||
} from "./ModalContext";
|
||||
import { ModalComponent } from "./WithModal";
|
||||
|
||||
type ModalProps = Partial<Omit<ModalData, "key">> & {
|
||||
onMounted?: () => void;
|
||||
};
|
||||
|
||||
export function useModal(props?: ModalProps): typeof StandardModalView {
|
||||
const setter = useContext(ModalSetterContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (setter && props) {
|
||||
setter.closeable(props.closeable ?? true);
|
||||
setter.size(props.size);
|
||||
}
|
||||
}, [props, setter]);
|
||||
|
||||
const ref = useRef<ModalProps["onMounted"]>(props?.onMounted);
|
||||
ref.current = props?.onMounted;
|
||||
|
||||
const layer = useCurrentLayer();
|
||||
|
||||
useEffect(() => {
|
||||
if (layer !== -1 && ref.current) {
|
||||
ref.current();
|
||||
}
|
||||
}, [layer]);
|
||||
|
||||
return StandardModalView;
|
||||
}
|
||||
|
||||
export function useModalControl() {
|
||||
const showAction = useReduxAction(showModalAction);
|
||||
|
||||
const show = useCallback(
|
||||
<P>(comp: ModalComponent<P>, payload?: unknown) => {
|
||||
showAction({ key: comp.modalKey, payload });
|
||||
},
|
||||
[showAction]
|
||||
);
|
||||
|
||||
const hideAction = useReduxAction(hideModalAction);
|
||||
|
||||
const hide = useCallback(
|
||||
(key?: string) => {
|
||||
hideAction(key);
|
||||
},
|
||||
[hideAction]
|
||||
);
|
||||
|
||||
return { show, hide };
|
||||
}
|
||||
|
||||
export function useModalData(): ModalData {
|
||||
const data = useContext(ModalDataContext);
|
||||
|
||||
if (data === null) {
|
||||
throw new Error("useModalData should be used inside Modal");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function usePayload<T>(): T | null {
|
||||
const { key } = useModalData();
|
||||
const stack = useReduxStore((s) => s.modal.stack);
|
||||
|
||||
return useMemo(
|
||||
() => (stack.find((m) => m.key === key)?.payload as T) ?? null,
|
||||
[stack, key]
|
||||
);
|
||||
}
|
||||
|
||||
export function useCurrentLayer() {
|
||||
const { key } = useModalData();
|
||||
const stack = useReduxStore((s) => s.modal.stack);
|
||||
|
||||
return useMemo(() => stack.findIndex((m) => m.key === key), [stack, key]);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export * from "./components";
|
||||
export * from "./hooks";
|
||||
export { default as withModal } from "./WithModal";
|
||||
@ -1,36 +0,0 @@
|
||||
import {
|
||||
hideModalAction,
|
||||
showModalAction,
|
||||
} from "@/modules/redux/actions/modal";
|
||||
import { useReduxAction, useReduxStore } from "@/modules/redux/hooks/base";
|
||||
import { useCallback, useMemo } from "react";
|
||||
|
||||
export function useModalControl() {
|
||||
const showModal = useReduxAction(showModalAction);
|
||||
|
||||
const show = useCallback(
|
||||
(key: string, payload?: unknown) => {
|
||||
showModal({ key, payload });
|
||||
},
|
||||
[showModal]
|
||||
);
|
||||
|
||||
const hide = useReduxAction(hideModalAction);
|
||||
|
||||
return { show, hide };
|
||||
}
|
||||
|
||||
export function useIsShowed(key: string) {
|
||||
const stack = useReduxStore((s) => s.modal.stack);
|
||||
|
||||
return useMemo(() => stack.findIndex((m) => m.key === key), [stack, key]);
|
||||
}
|
||||
|
||||
export function usePayload<T>(key: string): T | null {
|
||||
const stack = useReduxStore((s) => s.modal.stack);
|
||||
|
||||
return useMemo(
|
||||
() => (stack.find((m) => m.key === key)?.payload as T) ?? null,
|
||||
[stack, key]
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue