open-source-mirrors
/
bazarr
mirror of https://github.com/morpheus65535/bazarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor modal system

Browse Source
pull/1783/head
LASER-Yi 3 years ago
parent 87c5d0d9de
commit 658237dd50
No known key found for this signature in database
GPG Key ID: BB28903D50A1D408
32 changed files with 674 additions and 586 deletions
Show Stats Download Patch File Download Diff File

1
frontend/src/components/index.tsx
Unescape View File

@ -131,6 +131,5 @@ export * from "./buttons";
export * from "./header";
export * from "./inputs";
export * from "./LanguageSelector";
export * from "./modals";
export * from "./SearchBar";
export * from "./tables";

51
frontend/src/components/modals/BaseModal.tsx
Unescape View File

@ -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;

32
frontend/src/components/modals/HistoryModal.tsx
Unescape View File

@ -4,18 +4,17 @@ import {
useMovieAddBlacklist,
useMovieHistory,
} from "@/apis/hooks";
import { usePayload } from "@/modules/redux/hooks/modal";
import { useModal, usePayload, withModal } from "@/modules/modals";
import { FunctionComponent, useMemo } from "react";
import { Column } from "react-table";
import { HistoryIcon, PageTable, QueryOverlay, TextPopover } from "..";
import Language from "../bazarr/Language";
import { BlacklistButton } from "../inputs/blacklist";
import BaseModal, { BaseModalProps } from "./BaseModal";
export const MovieHistoryModal: FunctionComponent<BaseModalProps> = (props) => {
const { ...modal } = props;
const MovieHistoryView: FunctionComponent = () => {
const movie = usePayload<Item.Movie>();
const movie = usePayload<Item.Movie>(modal.modalKey);
const Modal = useModal({ size: "lg" });
const history = useMovieHistory(movie?.radarrId);
@ -84,7 +83,7 @@ export const MovieHistoryModal: FunctionComponent<BaseModalProps> = (props) => {
);
return (
<BaseModal title={`History - ${movie?.title ?? ""}`} {...modal}>
<Modal title={`History - ${movie?.title ?? ""}`}>
<QueryOverlay result={history}>
<PageTable
emptyText="No History Found"
@ -92,14 +91,16 @@ export const MovieHistoryModal: FunctionComponent<BaseModalProps> = (props) => {
data={data ?? []}
></PageTable>
</QueryOverlay>
</BaseModal>
</Modal>
);
};
export const EpisodeHistoryModal: FunctionComponent<BaseModalProps> = (
props
) => {
const episode = usePayload<Item.Episode>(props.modalKey);
export const MovieHistoryModal = withModal(MovieHistoryView, "movie-history");
const EpisodeHistoryView: FunctionComponent = () => {
const episode = usePayload<Item.Episode>();
const Modal = useModal({ size: "lg" });
const history = useEpisodeHistory(episode?.sonarrEpisodeId);
@ -175,7 +176,7 @@ export const EpisodeHistoryModal: FunctionComponent<BaseModalProps> = (
);
return (
<BaseModal title={`History - ${episode?.title ?? ""}`} {...props}>
<Modal title={`History - ${episode?.title ?? ""}`}>
<QueryOverlay result={history}>
<PageTable
emptyText="No History Found"
@ -183,6 +184,11 @@ export const EpisodeHistoryModal: FunctionComponent<BaseModalProps> = (
data={data ?? []}
></PageTable>
</QueryOverlay>
</BaseModal>
</Modal>
);
};
export const EpisodeHistoryModal = withModal(
EpisodeHistoryView,
"episode-history"
);

44
frontend/src/components/modals/ItemEditorModal.tsx
Unescape View File

@ -1,26 +1,28 @@
import { useIsAnyActionRunning, useLanguageProfiles } from "@/apis/hooks";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
import {
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import { GetItemId } from "@/utilities";
import { FunctionComponent, useEffect, useMemo, useState } from "react";
import { FunctionComponent, useMemo, useState } from "react";
import { Container, Form } from "react-bootstrap";
import { UseMutationResult } from "react-query";
import { AsyncButton, Selector, SelectorOption } from "..";
import BaseModal, { BaseModalProps } from "./BaseModal";
interface Props {
mutation: UseMutationResult<void, unknown, FormType.ModifyItem, unknown>;
}
const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
const { mutation, ...modal } = props;
const Editor: FunctionComponent<Props> = ({ mutation }) => {
const { data: profiles } = useLanguageProfiles();
const payload = usePayload<Item.Base>(modal.modalKey);
const { hide } = useModalControl();
const payload = usePayload<Item.Base>();
const { mutateAsync, isLoading } = mutation;
const { hide } = useModalControl();
const hasTask = useIsAnyActionRunning();
const profileOptions = useMemo<SelectorOption<number>[]>(
@ -33,9 +35,12 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
const [id, setId] = useState<Nullable<number>>(payload?.profileId ?? null);
useEffect(() => {
setId(payload?.profileId ?? null);
}, [payload]);
const Modal = useModal({
closeable: !isLoading,
onMounted: () => {
setId(payload?.profileId ?? null);
},
});
const footer = (
<AsyncButton
@ -56,21 +61,14 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
return null;
}
}}
onSuccess={() => {
hide();
}}
onSuccess={() => hide()}
>
Save
</AsyncButton>
);
return (
<BaseModal
closeable={!isLoading}
footer={footer}
title={payload?.title}
{...modal}
>
<Modal title={payload?.title ?? "Item Editor"} footer={footer}>
<Container fluid>
<Form>
<Form.Group>
@ -95,8 +93,8 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
</Form.Group>
</Form>
</Container>
</BaseModal>
</Modal>
);
};
export default Editor;
export default withModal(Editor, "edit");

69
frontend/src/components/modals/ManualSearchModal.tsx
Unescape View File

@ -1,4 +1,4 @@
import { usePayload } from "@/modules/redux/hooks/modal";
import { useModal, usePayload, withModal } from "@/modules/modals";
import { createAndDispatchTask } from "@/modules/task/utilities";
import { GetItemId, isMovie } from "@/utilities";
import {
@ -10,13 +10,7 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
import {
FunctionComponent,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import { FunctionComponent, useCallback, useMemo, useState } from "react";
import {
Badge,
Button,
@ -29,7 +23,7 @@ import {
} from "react-bootstrap";
import { UseQueryResult } from "react-query";
import { Column } from "react-table";
import { BaseModal, BaseModalProps, LoadingIndicator, PageTable } from "..";
import { LoadingIndicator, PageTable } from "..";
import Language from "../bazarr/Language";
type SupportType = Item.Movie | Item.Episode;
@ -41,24 +35,15 @@ interface Props<T extends SupportType> {
) => UseQueryResult<SearchResultType[] | undefined, unknown>;
}
export function ManualSearchModal<T extends SupportType>(
props: Props<T> & BaseModalProps
) {
const { download, query: useSearch, ...modal } = props;
function ManualSearchView<T extends SupportType>(props: Props<T>) {
const { download, query: useSearch } = props;
const item = usePayload<T>(modal.modalKey);
const item = usePayload<T>();
const itemId = useMemo(() => GetItemId(item ?? {}), [item]);
const [id, setId] = useState<number | undefined>(undefined);
// Cleanup the ID when user switches episode / movie
useEffect(() => {
if (itemId !== undefined && itemId !== id) {
setId(undefined);
}
}, [id, itemId]);
const results = useSearch(id);
const isStale = results.data === undefined;
@ -225,12 +210,6 @@ export function ManualSearchModal<T extends SupportType>(
}
};
const footer = (
<Button variant="light" hidden={isStale} onClick={search}>
Search Again
</Button>
);
const title = useMemo(() => {
let title = "Unknown";
@ -246,19 +225,39 @@ export function ManualSearchModal<T extends SupportType>(
return `Search - ${title}`;
}, [item]);
const Modal = useModal({
size: "xl",
closeable: results.isFetching === false,
onMounted: () => {
// Cleanup the ID when user switches episode / movie
if (itemId !== id) {
setId(undefined);
}
},
});
const footer = (
<Button variant="light" hidden={isStale} onClick={search}>
Search Again
</Button>
);
return (
<BaseModal
closeable={results.isFetching === false}
size="xl"
title={title}
footer={footer}
{...modal}
>
<Modal title={title} footer={footer}>
{content()}
</BaseModal>
</Modal>
);
}
export const MovieSearchModal = withModal<Props<Item.Movie>>(
ManualSearchView,
"movie-manual-search"
);
export const EpisodeSearchModal = withModal<Props<Item.Episode>>(
ManualSearchView,
"episode-manual-search"
);
const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
matches,
dont,

18
frontend/src/components/modals/MovieUploadModal.tsx
Unescape View File

@ -1,21 +1,18 @@
import { useMovieSubtitleModification } from "@/apis/hooks";
import { usePayload } from "@/modules/redux/hooks/modal";
import { usePayload, withModal } from "@/modules/modals";
import { createTask, dispatchTask } from "@/modules/task/utilities";
import {
useLanguageProfileBy,
useProfileItemsToLanguages,
} from "@/utilities/languages";
import { FunctionComponent, useCallback } from "react";
import { BaseModalProps } from "./BaseModal";
import SubtitleUploadModal, {
import SubtitleUploader, {
PendingSubtitle,
Validator,
} from "./SubtitleUploadModal";
const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
const modal = props;
const payload = usePayload<Item.Movie>(modal.modalKey);
const MovieUploadModal: FunctionComponent = () => {
const payload = usePayload<Item.Movie>();
const profile = useLanguageProfileBy(payload?.profileId);
@ -87,7 +84,7 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
);
return (
<SubtitleUploadModal
<SubtitleUploader
hideAllLanguages
initial={{ forced: false }}
availableLanguages={availableLanguages}
@ -95,9 +92,8 @@ const MovieUploadModal: FunctionComponent<BaseModalProps> = (props) => {
upload={upload}
update={update}
validate={validate}
{...modal}
></SubtitleUploadModal>
></SubtitleUploader>
);
};
export default MovieUploadModal;
export default withModal(MovieUploadModal, "movie-upload");

19
frontend/src/components/modals/SeriesUploadModal.tsx
Unescape View File

@ -1,6 +1,6 @@
import { useEpisodeSubtitleModification } from "@/apis/hooks";
import api from "@/apis/raw";
import { usePayload } from "@/modules/redux/hooks/modal";
import { usePayload, withModal } from "@/modules/modals";
import { createTask, dispatchTask } from "@/modules/task/utilities";
import {
useLanguageProfileBy,
@ -9,8 +9,7 @@ import {
import { FunctionComponent, useCallback, useMemo } from "react";
import { Column } from "react-table";
import { Selector, SelectorOption } from "../inputs";
import { BaseModalProps } from "./BaseModal";
import SubtitleUploadModal, {
import SubtitleUploader, {
PendingSubtitle,
useRowMutation,
Validator,
@ -24,11 +23,8 @@ interface SeriesProps {
episodes: readonly Item.Episode[];
}
const SeriesUploadModal: FunctionComponent<SeriesProps & BaseModalProps> = ({
episodes,
...modal
}) => {
const payload = usePayload<Item.Series>(modal.modalKey);
const SeriesUploadModal: FunctionComponent<SeriesProps> = ({ episodes }) => {
const payload = usePayload<Item.Series>();
const profile = useLanguageProfileBy(payload?.profileId);
@ -165,16 +161,15 @@ const SeriesUploadModal: FunctionComponent<SeriesProps & BaseModalProps> = ({
);
return (
<SubtitleUploadModal
<SubtitleUploader
columns={columns}
initial={{ instance: null }}
availableLanguages={availableLanguages}
upload={upload}
update={update}
validate={validate}
{...modal}
></SubtitleUploadModal>
></SubtitleUploader>
);
};
export default SeriesUploadModal;
export default withModal(SeriesUploadModal, "series-upload");

251
frontend/src/components/modals/SubtitleToolModal.tsx
Unescape View File

@ -1,5 +1,10 @@
import { useSubtitleAction } from "@/apis/hooks";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
import {
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import { createTask, dispatchTask } from "@/modules/task/utilities";
import { isMovie, submodProcessColor } from "@/utilities";
import { LOG } from "@/utilities/console";
@ -45,7 +50,6 @@ import {
} 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;
@ -77,12 +81,11 @@ interface ToolModalProps {
) => void;
}
const AddColorModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
props
) => {
const { process, ...modal } = props;
const ColorTool: FunctionComponent<ToolModalProps> = ({ process }) => {
const [selection, setSelection] = useState<Nullable<string>>(null);
const Modal = useModal();
const submit = useCallback(() => {
if (selection) {
const action = submodProcessColor(selection);
@ -90,31 +93,29 @@ const AddColorModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
}
}, [selection, process]);
const footer = useMemo(
() => (
<Button disabled={selection === null} onClick={submit}>
Save
</Button>
),
[selection, submit]
const footer = (
<Button disabled={selection === null} onClick={submit}>
Save
</Button>
);
return (
<BaseModal title="Choose Color" footer={footer} {...modal}>
<Modal title="Choose Color" footer={footer}>
<Selector options={colorOptions} onChange={setSelection}></Selector>
</BaseModal>
</Modal>
);
};
const FrameRateModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
props
) => {
const { process, ...modal } = props;
const ColorToolModal = withModal(ColorTool, "color-tool");
const FrameRateTool: FunctionComponent<ToolModalProps> = ({ process }) => {
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 submit = useCallback(() => {
if (canSave) {
const action = submodProcessFrameRate(from, to);
@ -129,7 +130,7 @@ const FrameRateModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
);
return (
<BaseModal title="Change Frame Rate" footer={footer} {...modal}>
<Modal title="Change Frame Rate" footer={footer}>
<InputGroup className="px-2">
<Form.Control
placeholder="From"
@ -156,20 +157,20 @@ const FrameRateModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
}}
></Form.Control>
</InputGroup>
</BaseModal>
</Modal>
);
};
const AdjustTimesModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
props
) => {
const { process, ...modal } = props;
const FrameRateModal = withModal(FrameRateTool, "frame-rate-tool");
const TimeAdjustmentTool: FunctionComponent<ToolModalProps> = ({ process }) => {
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) => {
@ -200,17 +201,14 @@ const AdjustTimesModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
}
}, [process, canSave, offset, isPlus]);
const footer = useMemo(
() => (
<Button disabled={!canSave} onClick={submit}>
Save
</Button>
),
[submit, canSave]
const footer = (
<Button disabled={!canSave} onClick={submit}>
Save
</Button>
);
return (
<BaseModal title="Adjust Times" footer={footer} {...modal}>
<Modal title="Adjust Times" footer={footer}>
<InputGroup>
<InputGroup.Prepend>
<Button
@ -242,14 +240,13 @@ const AdjustTimesModal: FunctionComponent<BaseModalProps & ToolModalProps> = (
onChange={updateOffset(3)}
></Form.Control>
</InputGroup>
</BaseModal>
</Modal>
);
};
const TranslateModal: FunctionComponent<BaseModalProps & ToolModalProps> = ({
process,
...modal
}) => {
const TimeAdjustmentModal = withModal(TimeAdjustmentTool, "time-adjust-tool");
const TranslationTool: FunctionComponent<ToolModalProps> = ({ process }) => {
const { data: languages } = useEnabledLanguages();
const available = useMemo(
@ -257,6 +254,8 @@ const TranslateModal: FunctionComponent<BaseModalProps & ToolModalProps> = ({
[languages]
);
const Modal = useModal();
const [selectedLanguage, setLanguage] =
useState<Nullable<Language.Info>>(null);
@ -266,17 +265,13 @@ const TranslateModal: FunctionComponent<BaseModalProps & ToolModalProps> = ({
}
}, [selectedLanguage, process]);
const footer = useMemo(
() => (
<Button disabled={!selectedLanguage} onClick={submit}>
Translate
</Button>
),
[submit, selectedLanguage]
const footer = (
<Button disabled={!selectedLanguage} onClick={submit}>
Translate
</Button>
);
return (
<BaseModal title="Translate to" footer={footer} {...modal}>
<Modal title="Translation" footer={footer}>
<Form.Label>
Enabled languages not listed here are unsupported by Google Translate.
</Form.Label>
@ -284,18 +279,21 @@ const TranslateModal: FunctionComponent<BaseModalProps & ToolModalProps> = ({
options={available}
onChange={setLanguage}
></LanguageSelector>
</BaseModal>
</Modal>
);
};
const TranslationModal = withModal(TranslationTool, "translate-tool");
const CanSelectSubtitle = (item: TableColumnType) => {
return item.path.endsWith(".srt");
};
const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
const payload = usePayload<SupportType[]>(props.modalKey);
const STM: FunctionComponent = () => {
const payload = usePayload<SupportType[]>();
const [selections, setSelections] = useState<TableColumnType[]>([]);
const Modal = useModal({ size: "xl" });
const { hide } = useModalControl();
const { mutateAsync } = useSubtitleAction();
@ -303,8 +301,7 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
const process = useCallback(
(action: string, override?: Partial<FormType.ModifySubtitle>) => {
LOG("info", "executing action", action);
hide(props.modalKey);
hide();
const tasks = selections.map((s) => {
const form: FormType.ModifySubtitle = {
id: s.id,
@ -318,7 +315,7 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
dispatchTask(tasks, "modify-subtitles");
},
[hide, props.modalKey, selections, mutateAsync]
[hide, selections, mutateAsync]
);
const { show } = useModalControl();
@ -383,92 +380,74 @@ const STM: FunctionComponent<BaseModalProps> = ({ ...props }) => {
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]
const footer = (
<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(ColorToolModal)}>
<ActionButtonItem icon={faPaintBrush}>Add Color</ActionButtonItem>
</Dropdown.Item>
<Dropdown.Item onSelect={() => show(FrameRateModal)}>
<ActionButtonItem icon={faFilm}>Change Frame Rate</ActionButtonItem>
</Dropdown.Item>
<Dropdown.Item onSelect={() => show(TimeAdjustmentModal)}>
<ActionButtonItem icon={faClock}>Adjust Times</ActionButtonItem>
</Dropdown.Item>
<Dropdown.Item onSelect={() => show(TranslationModal)}>
<ActionButtonItem icon={faLanguage}>Translate</ActionButtonItem>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
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>
</>
<Modal title="Subtitle Tools" footer={footer}>
<SimpleTable
emptyText="No External Subtitles Found"
plugins={plugins}
columns={columns}
onSelect={setSelections}
canSelect={CanSelectSubtitle}
data={data}
></SimpleTable>
<ColorToolModal process={process}></ColorToolModal>
<FrameRateModal process={process}></FrameRateModal>
<TimeAdjustmentModal process={process}></TimeAdjustmentModal>
<TranslationModal process={process}></TranslationModal>
</Modal>
);
};
export default STM;
export default withModal(STM, "subtitle-tools");

31
frontend/src/components/modals/SubtitleUploadModal.tsx
Unescape View File

@ -1,4 +1,4 @@
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModal, useModalControl } from "@/modules/modals";
import { BuildKey } from "@/utilities";
import { LOG } from "@/utilities/console";
import {
@ -23,7 +23,6 @@ import { Column } from "react-table";
import { LanguageSelector, MessageIcon } from "..";
import { FileForm } from "../inputs";
import { SimpleTable } from "../tables";
import BaseModal, { BaseModalProps } from "./BaseModal";
type ModifyFn<T> = (index: number, info?: PendingSubtitle<T>) => void;
@ -59,10 +58,7 @@ interface Props<T = unknown> {
hideAllLanguages?: boolean;
}
type ComponentProps<T> = Props<T> &
Omit<BaseModalProps, "footer" | "title" | "size">;
function SubtitleUploadModal<T>(props: ComponentProps<T>) {
function SubtitleUploader<T>(props: Props<T>) {
const {
initial,
columns,
@ -73,10 +69,16 @@ function SubtitleUploadModal<T>(props: ComponentProps<T>) {
hideAllLanguages,
} = props;
const { hide } = useModalControl();
const [pending, setPending] = useState<PendingSubtitle<T>[]>([]);
const showTable = pending.length > 0;
const Modal = useModal({
size: showTable ? "xl" : "lg",
});
const { hide } = useModalControl();
const fileList = useMemo(() => pending.map((v) => v.file), [pending]);
const initialRef = useRef(initial);
@ -281,8 +283,6 @@ function SubtitleUploadModal<T>(props: ComponentProps<T>) {
[columns, availableLanguages]
);
const showTable = pending.length > 0;
const canUpload = useMemo(
() =>
pending.length > 0 &&
@ -332,12 +332,7 @@ function SubtitleUploadModal<T>(props: ComponentProps<T>) {
);
return (
<BaseModal
size={showTable ? "xl" : "lg"}
title="Upload Subtitles"
footer={footer}
{...props}
>
<Modal title="Update Subtitles" footer={footer}>
<Container fluid className="flex-column">
<Form>
<Form.Group>
@ -360,8 +355,8 @@ function SubtitleUploadModal<T>(props: ComponentProps<T>) {
</RowContext.Provider>
</div>
</Container>
</BaseModal>
</Modal>
);
}
export default SubtitleUploadModal;
export default SubtitleUploader;

1
frontend/src/components/modals/index.ts
Unescape View File

@ -1,4 +1,3 @@
export * from "./BaseModal";
export * from "./HistoryModal";
export { default as ItemEditorModal } from "./ItemEditorModal";
export { default as MovieUploadModal } from "./MovieUploadModal";

14
frontend/src/modules/modals/ModalContext.ts
Unescape View File

@ -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);

44
frontend/src/modules/modals/ModalWrapper.tsx
Unescape View File

@ -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;

52
frontend/src/modules/modals/WithModal.tsx
Unescape View File

@ -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;
}

23
frontend/src/modules/modals/components.tsx
Unescape View File

@ -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>
</>
);
};

90
frontend/src/modules/modals/hooks.ts
Unescape View File

@ -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]);
}

3
frontend/src/modules/modals/index.ts
Unescape View File

@ -0,0 +1,3 @@
export * from "./components";
export * from "./hooks";
export { default as withModal } from "./WithModal";

36
frontend/src/modules/redux/hooks/modal.ts
Unescape View File

@ -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]
);
}

23
frontend/src/pages/Episodes/index.tsx
Unescape View File

@ -5,14 +5,14 @@ import {
useSeriesById,
useSeriesModification,
} from "@/apis/hooks";
import { ContentHeader, LoadingIndicator } from "@/components";
import ItemOverview from "@/components/ItemOverview";
import {
ContentHeader,
ItemEditorModal,
LoadingIndicator,
SeriesUploadModal,
} from "@/components";
import ItemOverview from "@/components/ItemOverview";
import { useModalControl } from "@/modules/redux/hooks/modal";
SubtitleToolModal,
} from "@/components/modals";
import { useModalControl } from "@/modules/modals";
import { createAndDispatchTask } from "@/modules/task/utilities";
import { useLanguageProfileBy } from "@/utilities/languages";
import {
@ -109,7 +109,7 @@ const SeriesEpisodesView: FunctionComponent = () => {
<ContentHeader.Button
disabled={series.episodeFileCount === 0 || !available || hasTask}
icon={faBriefcase}
onClick={() => show("tools", episodes)}
onClick={() => show(SubtitleToolModal, episodes)}
>
Tools
</ContentHeader.Button>
@ -120,14 +120,14 @@ const SeriesEpisodesView: FunctionComponent = () => {
!available
}
icon={faCloudUploadAlt}
onClick={() => show("upload", series)}
onClick={() => show(SeriesUploadModal, series)}
>
Upload
</ContentHeader.Button>
<ContentHeader.Button
icon={faWrench}
disabled={hasTask}
onClick={() => show("edit", series)}
onClick={() => show(ItemEditorModal, series)}
>
Edit Series
</ContentHeader.Button>
@ -158,11 +158,8 @@ const SeriesEpisodesView: FunctionComponent = () => {
></Table>
)}
</Row>
<ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
<SeriesUploadModal
modalKey="upload"
episodes={episodes ?? []}
></SeriesUploadModal>
<ItemEditorModal mutation={mutation}></ItemEditorModal>
<SeriesUploadModal episodes={episodes ?? []}></SeriesUploadModal>
</Container>
);
};

28
frontend/src/pages/Episodes/table.tsx
Unescape View File

@ -1,14 +1,9 @@
import { useDownloadEpisodeSubtitles, useEpisodesProvider } from "@/apis/hooks";
import {
ActionButton,
EpisodeHistoryModal,
GroupTable,
SubtitleToolModal,
TextPopover,
} from "@/components";
import { ManualSearchModal } from "@/components/modals/ManualSearchModal";
import { ActionButton, GroupTable, TextPopover } from "@/components";
import { EpisodeHistoryModal, SubtitleToolModal } from "@/components/modals";
import { EpisodeSearchModal } from "@/components/modals/ManualSearchModal";
import { useModalControl } from "@/modules/modals";
import { useShowOnlyDesired } from "@/modules/redux/hooks";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { BuildKey, filterSubtitleBy } from "@/utilities";
import { useProfileItemsToLanguages } from "@/utilities/languages";
import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
@ -166,21 +161,21 @@ const Table: FunctionComponent<Props> = ({
icon={faUser}
disabled={series?.profileId === null || disabled}
onClick={() => {
show("manual-search", row.original);
show(EpisodeSearchModal, row.original);
}}
></ActionButton>
<ActionButton
icon={faHistory}
disabled={disabled}
onClick={() => {
show("history", row.original);
show(EpisodeHistoryModal, row.original);
}}
></ActionButton>
<ActionButton
icon={faBriefcase}
disabled={disabled}
onClick={() => {
show("tools", [row.original]);
show(SubtitleToolModal, [row.original]);
}}
></ActionButton>
</ButtonGroup>
@ -214,13 +209,12 @@ const Table: FunctionComponent<Props> = ({
}}
emptyText="No Episode Found For This Series"
></GroupTable>
<SubtitleToolModal modalKey="tools" size="lg"></SubtitleToolModal>
<EpisodeHistoryModal modalKey="history" size="lg"></EpisodeHistoryModal>
<ManualSearchModal
modalKey="manual-search"
<SubtitleToolModal></SubtitleToolModal>
<EpisodeHistoryModal></EpisodeHistoryModal>
<EpisodeSearchModal
download={download}
query={useEpisodesProvider}
></ManualSearchModal>
></EpisodeSearchModal>
</>
);
};

34
frontend/src/pages/Movies/Details/index.tsx
Unescape View File

@ -8,17 +8,16 @@ import {
useMovieById,
useMovieModification,
} from "@/apis/hooks/movies";
import { ContentHeader, LoadingIndicator } from "@/components";
import ItemOverview from "@/components/ItemOverview";
import {
ContentHeader,
ItemEditorModal,
LoadingIndicator,
MovieHistoryModal,
MovieUploadModal,
SubtitleToolModal,
} from "@/components";
import ItemOverview from "@/components/ItemOverview";
import { ManualSearchModal } from "@/components/modals/ManualSearchModal";
import { useModalControl } from "@/modules/redux/hooks/modal";
} from "@/components/modals";
import { MovieSearchModal } from "@/components/modals/ManualSearchModal";
import { useModalControl } from "@/modules/modals";
import { createAndDispatchTask } from "@/modules/task/utilities";
import { useLanguageProfileBy } from "@/utilities/languages";
import {
@ -122,20 +121,20 @@ const MovieDetailView: FunctionComponent = () => {
<ContentHeader.Button
icon={faUser}
disabled={movie.profileId === null || hasTask}
onClick={() => show("manual-search", movie)}
onClick={() => show(MovieSearchModal, movie)}
>
Manual
</ContentHeader.Button>
<ContentHeader.Button
icon={faHistory}
onClick={() => show("history", movie)}
onClick={() => show(MovieHistoryModal, movie)}
>
History
</ContentHeader.Button>
<ContentHeader.Button
icon={faToolbox}
disabled={hasTask}
onClick={() => show("tools", [movie])}
onClick={() => show(SubtitleToolModal, [movie])}
>
Tools
</ContentHeader.Button>
@ -145,14 +144,14 @@ const MovieDetailView: FunctionComponent = () => {
<ContentHeader.Button
disabled={!allowEdit || movie.profileId === null || hasTask}
icon={faCloudUploadAlt}
onClick={() => show("upload", movie)}
onClick={() => show(MovieUploadModal, movie)}
>
Upload
</ContentHeader.Button>
<ContentHeader.Button
icon={faWrench}
disabled={hasTask}
onClick={() => show("edit", movie)}
onClick={() => show(ItemEditorModal, movie)}
>
Edit Movie
</ContentHeader.Button>
@ -174,15 +173,14 @@ const MovieDetailView: FunctionComponent = () => {
<Row>
<Table movie={movie} profile={profile} disabled={hasTask}></Table>
</Row>
<ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
<SubtitleToolModal modalKey="tools" size="lg"></SubtitleToolModal>
<MovieHistoryModal modalKey="history" size="lg"></MovieHistoryModal>
<MovieUploadModal modalKey="upload" size="lg"></MovieUploadModal>
<ManualSearchModal
modalKey="manual-search"
<ItemEditorModal mutation={mutation}></ItemEditorModal>
<SubtitleToolModal></SubtitleToolModal>
<MovieHistoryModal></MovieHistoryModal>
<MovieUploadModal></MovieUploadModal>
<MovieSearchModal
download={download}
query={useMoviesProvider}
></ManualSearchModal>
></MovieSearchModal>
</Container>
);
};

9
frontend/src/pages/Movies/index.tsx
Unescape View File

@ -1,9 +1,10 @@
import { useMovieModification, useMoviesPagination } from "@/apis/hooks";
import { ActionBadge, ItemEditorModal, TextPopover } from "@/components";
import { ActionBadge, TextPopover } from "@/components";
import Language from "@/components/bazarr/Language";
import LanguageProfile from "@/components/bazarr/LanguageProfile";
import { ItemEditorModal } from "@/components/modals";
import ItemView from "@/components/views/ItemView";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModalControl } from "@/modules/modals";
import { BuildKey } from "@/utilities";
import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
@ -90,7 +91,7 @@ const MovieView: FunctionComponent = () => {
return (
<ActionBadge
icon={faWrench}
onClick={() => show("edit", row.original)}
onClick={() => show(ItemEditorModal, row.original)}
></ActionBadge>
);
},
@ -105,7 +106,7 @@ const MovieView: FunctionComponent = () => {
<title>Movies - Bazarr</title>
</Helmet>
<ItemView query={query} columns={columns}></ItemView>
<ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
<ItemEditorModal mutation={mutation}></ItemEditorModal>
</Container>
);
};

9
frontend/src/pages/Series/index.tsx
Unescape View File

@ -1,8 +1,9 @@
import { useSeriesModification, useSeriesPagination } from "@/apis/hooks";
import { ActionBadge, ItemEditorModal } from "@/components";
import { ActionBadge } from "@/components";
import LanguageProfile from "@/components/bazarr/LanguageProfile";
import { ItemEditorModal } from "@/components/modals";
import ItemView from "@/components/views/ItemView";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModalControl } from "@/modules/modals";
import { BuildKey } from "@/utilities";
import { faWrench } from "@fortawesome/free-solid-svg-icons";
import { FunctionComponent, useMemo } from "react";
@ -92,7 +93,7 @@ const SeriesView: FunctionComponent = () => {
return (
<ActionBadge
icon={faWrench}
onClick={() => show("edit", original)}
onClick={() => show(ItemEditorModal, original)}
></ActionBadge>
);
},
@ -107,7 +108,7 @@ const SeriesView: FunctionComponent = () => {
<title>Series - Bazarr</title>
</Helmet>
<ItemView query={query} columns={columns}></ItemView>
<ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
<ItemEditorModal mutation={mutation}></ItemEditorModal>
</Container>
);
};

61
frontend/src/pages/Settings/Languages/modal.tsx
Unescape View File

@ -1,14 +1,17 @@
import {
ActionButton,
BaseModal,
BaseModalProps,
Chips,
LanguageSelector,
Selector,
SelectorOption,
SimpleTable,
} from "@/components";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
import {
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import { BuildKey } from "@/utilities";
import { LOG } from "@/utilities/console";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
@ -17,7 +20,6 @@ import {
FunctionComponent,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
@ -53,12 +55,8 @@ function createDefaultProfile(): Language.Profile {
};
}
const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
props
) => {
const { update, ...modal } = props;
const profile = usePayload<Language.Profile>(modal.modalKey);
const LanguagesProfileModal: FunctionComponent<Props> = ({ update }) => {
const profile = usePayload<Language.Profile>();
const { hide } = useModalControl();
@ -66,13 +64,12 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
const [current, setProfile] = useState(createDefaultProfile);
useEffect(() => {
if (profile) {
setProfile(profile);
} else {
setProfile(createDefaultProfile);
}
}, [profile]);
const Modal = useModal({
size: "lg",
onMounted: () => {
setProfile(profile ?? createDefaultProfile);
},
});
const cutoff: SelectorOption<number>[] = useMemo(() => {
const options = [...cutoffOptions];
@ -134,18 +131,6 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
const canSave = current.name.length > 0 && current.items.length > 0;
const footer = (
<Button
disabled={!canSave}
onClick={() => {
hide();
update(current);
}}
>
Save
</Button>
);
const columns = useMemo<Column<Language.ProfileItem>[]>(
() => [
{
@ -253,8 +238,20 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
[languages]
);
const footer = (
<Button
disabled={!canSave}
onClick={() => {
hide();
update(current);
}}
>
Save
</Button>
);
return (
<BaseModal size="lg" title="Languages Profile" footer={footer} {...modal}>
<Modal title="Languages Profile" footer={footer}>
<Input>
<Form.Control
type="text"
@ -319,8 +316,8 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
></Selector>
<Message>Download subtitle file without format conversion</Message>
</Input>
</BaseModal>
</Modal>
);
};
export default LanguagesProfileModal;
export default withModal(LanguagesProfileModal, "languages-profile-editor");

8
frontend/src/pages/Settings/Languages/table.tsx
Unescape View File

@ -1,5 +1,5 @@
import { ActionButton, SimpleTable } from "@/components";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModalControl } from "@/modules/modals";
import { LOG } from "@/utilities/console";
import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
import { cloneDeep } from "lodash";
@ -69,7 +69,7 @@ const Table: FunctionComponent = () => {
const mutateRow = useCallback<ModifyFn>(
(index, item) => {
if (item) {
show("profile", cloneDeep(item));
show(Modal, cloneDeep(item));
} else {
const list = [...profiles];
list.splice(index, 1);
@ -185,12 +185,12 @@ const Table: FunctionComponent = () => {
mustNotContain: [],
originalFormat: false,
};
show("profile", profile);
show(Modal, profile);
}}
>
{canAdd ? "Add New Profile" : "No Enabled Languages"}
</Button>
<Modal update={updateProfile} modalKey="profile"></Modal>
<Modal update={updateProfile}></Modal>
</>
);
};

145
frontend/src/pages/Settings/Notifications/components.tsx
Unescape View File

@ -1,32 +1,22 @@
import api from "@/apis/raw";
import { AsyncButton, Selector, SelectorOption } from "@/components";
import {
AsyncButton,
BaseModal,
BaseModalProps,
Selector,
SelectorOption,
} from "@/components";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import { BuildKey } from "@/utilities";
import {
FunctionComponent,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import { FunctionComponent, useCallback, useMemo, useState } from "react";
import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { ColCard, useLatestArray, useUpdateArray } from "../components";
import { notificationsKey } from "../keys";
interface ModalProps {
interface Props {
selections: readonly Settings.NotificationInfo[];
}
const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
selections,
...modal
}) => {
const NotificationTool: FunctionComponent<Props> = ({ selections }) => {
const options = useMemo<SelectorOption<Settings.NotificationInfo>[]>(
() =>
selections
@ -43,16 +33,11 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
"name"
);
const payload = usePayload<Settings.NotificationInfo>(modal.modalKey);
const { hide } = useModalControl();
const payload = usePayload<Settings.NotificationInfo>();
const [current, setCurrent] =
useState<Nullable<Settings.NotificationInfo>>(payload);
useEffect(() => {
setCurrent(payload);
}, [payload]);
const updateUrl = useCallback((url: string) => {
setCurrent((current) => {
if (current) {
@ -69,55 +54,60 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
const canSave =
current !== null && current?.url !== null && current?.url.length !== 0;
const footer = useMemo(
() => (
<>
<AsyncButton
className="mr-auto"
disabled={!canSave}
variant="outline-secondary"
promise={() => {
if (current && current.url) {
return api.system.testNotification(current.url);
} else {
return null;
}
}}
>
Test
</AsyncButton>
<Button
hidden={payload === null}
variant="danger"
onClick={() => {
if (current) {
update({ ...current, enabled: false });
}
hide();
}}
>
Remove
</Button>
<Button
disabled={!canSave}
onClick={() => {
if (current) {
update({ ...current, enabled: true });
}
hide();
}}
>
Save
</Button>
</>
),
[canSave, payload, current, hide, update]
);
const getLabel = useCallback((v: Settings.NotificationInfo) => v.name, []);
const Modal = useModal({
onMounted: () => {
setCurrent(payload);
},
});
const { hide } = useModalControl();
const footer = (
<>
<AsyncButton
className="mr-auto"
disabled={!canSave}
variant="outline-secondary"
promise={() => {
if (current && current.url) {
return api.system.testNotification(current.url);
} else {
return null;
}
}}
>
Test
</AsyncButton>
<Button
hidden={payload === null}
variant="danger"
onClick={() => {
if (current) {
update({ ...current, enabled: false });
}
hide();
}}
>
Remove
</Button>
<Button
disabled={!canSave}
onClick={() => {
if (current) {
update({ ...current, enabled: true });
}
hide();
}}
>
Save
</Button>
</>
);
return (
<BaseModal title="Notification" footer={footer} {...modal}>
<Modal title="Notification" footer={footer}>
<Container fluid>
<Row>
<Col xs={12}>
@ -145,10 +135,12 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
</Col>
</Row>
</Container>
</BaseModal>
</Modal>
);
};
const NotificationModal = withModal(NotificationTool, "notification-tool");
export const NotificationView: FunctionComponent = () => {
const notifications = useLatestArray<Settings.NotificationInfo>(
notificationsKey,
@ -165,7 +157,7 @@ export const NotificationView: FunctionComponent = () => {
<ColCard
key={BuildKey(idx, v.name)}
header={v.name}
onClick={() => show("notifications", v)}
onClick={() => show(NotificationModal, v)}
></ColCard>
));
}, [notifications, show]);
@ -174,12 +166,9 @@ export const NotificationView: FunctionComponent = () => {
<Container fluid>
<Row>
{elements}{" "}
<ColCard plus onClick={() => show("notifications")}></ColCard>
<ColCard plus onClick={() => show(NotificationModal)}></ColCard>
</Row>
<NotificationModal
selections={notifications ?? []}
modalKey="notifications"
></NotificationModal>
<NotificationModal selections={notifications ?? []}></NotificationModal>
</Container>
);
};

52
frontend/src/pages/Settings/Providers/components.tsx
Unescape View File

@ -1,10 +1,10 @@
import { Selector, SelectorComponents, SelectorOption } from "@/components";
import {
BaseModal,
Selector,
SelectorComponents,
SelectorOption,
} from "@/components";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import { BuildKey, isReactText } from "@/utilities";
import { capitalize, isArray, isBoolean } from "lodash";
import {
@ -27,7 +27,6 @@ import {
} from "../components";
import { ProviderInfo, ProviderList } from "./list";
const ModalKey = "provider-modal";
const ProviderKey = "settings-general-enabled_providers";
export const ProviderView: FunctionComponent = () => {
@ -37,7 +36,7 @@ export const ProviderView: FunctionComponent = () => {
const select = useCallback(
(v?: ProviderInfo) => {
show(ModalKey, v ?? null);
show(ProviderModal, v ?? null);
},
[show]
);
@ -72,12 +71,14 @@ export const ProviderView: FunctionComponent = () => {
{cards}
<ColCard key="add-card" plus onClick={select}></ColCard>
</Row>
<ProviderModal></ProviderModal>
</Container>
);
};
export const ProviderModal: FunctionComponent = () => {
const payload = usePayload<ProviderInfo>(ModalKey);
const ProviderTool: FunctionComponent = () => {
const payload = usePayload<ProviderInfo>();
const Modal = useModal();
const { hide } = useModalControl();
const [staged, setChange] = useState<LooseObject>({});
@ -121,20 +122,6 @@ export const ProviderModal: FunctionComponent = () => {
const canSave = info !== null;
const footer = useMemo(
() => (
<>
<Button hidden={!payload} variant="danger" onClick={deletePayload}>
Delete
</Button>
<Button disabled={!canSave} onClick={addProvider}>
Save
</Button>
</>
),
[canSave, payload, deletePayload, addProvider]
);
const onSelect = useCallback((item: Nullable<ProviderInfo>) => {
if (item) {
setInfo(item);
@ -237,8 +224,19 @@ export const ProviderModal: FunctionComponent = () => {
[]
);
const footer = (
<>
<Button hidden={!payload} variant="danger" onClick={deletePayload}>
Delete
</Button>
<Button disabled={!canSave} onClick={addProvider}>
Save
</Button>
</>
);
return (
<BaseModal title="Provider" footer={footer} modalKey={ModalKey}>
<Modal title="Provider" footer={footer}>
<StagedChangesContext.Provider value={[staged, setChange]}>
<Container>
<Row>
@ -266,6 +264,8 @@ export const ProviderModal: FunctionComponent = () => {
</Row>
</Container>
</StagedChangesContext.Provider>
</BaseModal>
</Modal>
);
};
const ProviderModal = withModal(ProviderTool, "provider-tool");

3
frontend/src/pages/Settings/Providers/index.tsx
Unescape View File

@ -1,6 +1,6 @@
import { FunctionComponent } from "react";
import { Group, Input, Layout } from "../components";
import { ProviderModal, ProviderView } from "./components";
import { ProviderView } from "./components";
const SettingsProvidersView: FunctionComponent = () => {
return (
@ -10,7 +10,6 @@ const SettingsProvidersView: FunctionComponent = () => {
<ProviderView></ProviderView>
</Input>
</Group>
<ProviderModal></ProviderModal>
</Layout>
);
};

30
frontend/src/pages/System/Backups/BackupDeleteModal.tsx
Unescape View File

@ -1,16 +1,20 @@
import { AsyncButton, BaseModal, BaseModalProps } from "@/components";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
import { AsyncButton } from "@/components";
import {
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import React, { FunctionComponent } from "react";
import { Button } from "react-bootstrap";
import { useDeleteBackups } from "../../../apis/hooks";
interface Props extends BaseModalProps {}
const SystemBackupDeleteModal: FunctionComponent<Props> = ({ ...modal }) => {
const SystemBackupDeleteModal: FunctionComponent = () => {
const { mutateAsync } = useDeleteBackups();
const result = usePayload<string>(modal.modalKey);
const result = usePayload<string>();
const Modal = useModal();
const { hide } = useModalControl();
const footer = (
@ -19,9 +23,7 @@ const SystemBackupDeleteModal: FunctionComponent<Props> = ({ ...modal }) => {
<Button
variant="outline-secondary"
className="mr-2"
onClick={() => {
hide(modal.modalKey);
}}
onClick={() => hide()}
>
Cancel
</Button>
@ -34,7 +36,7 @@ const SystemBackupDeleteModal: FunctionComponent<Props> = ({ ...modal }) => {
return null;
}
}}
onSuccess={() => hide(modal.modalKey)}
onSuccess={() => hide()}
>
Delete
</AsyncButton>
@ -43,10 +45,10 @@ const SystemBackupDeleteModal: FunctionComponent<Props> = ({ ...modal }) => {
);
return (
<BaseModal title="Delete Backup" footer={footer} {...modal}>
Are you sure you want to delete the backup '{result}'?
</BaseModal>
<Modal title="Delete Backup" footer={footer}>
<span>Are you sure you want to delete the backup '{result}'?</span>
</Modal>
);
};
export default SystemBackupDeleteModal;
export default withModal(SystemBackupDeleteModal, "delete");

36
frontend/src/pages/System/Backups/BackupRestoreModal.tsx
Unescape View File

@ -1,27 +1,29 @@
import { useRestoreBackups } from "@/apis/hooks/system";
import { AsyncButton, BaseModal, BaseModalProps } from "@/components";
import { useModalControl, usePayload } from "@/modules/redux/hooks/modal";
import { AsyncButton } from "@/components";
import {
useModal,
useModalControl,
usePayload,
withModal,
} from "@/modules/modals";
import React, { FunctionComponent } from "react";
import { Button } from "react-bootstrap";
interface Props extends BaseModalProps {}
const SystemBackupRestoreModal: FunctionComponent = () => {
const result = usePayload<string>();
const SystemBackupRestoreModal: FunctionComponent<Props> = ({ ...modal }) => {
const result = usePayload<string>(modal.modalKey);
const Modal = useModal();
const { hide } = useModalControl();
const { mutateAsync } = useRestoreBackups();
const { hide } = useModalControl();
const footer = (
<div className="d-flex flex-row-reverse flex-grow-1 justify-content-between">
<div>
<Button
variant="outline-secondary"
className="mr-2"
onClick={() => {
hide(modal.modalKey);
}}
onClick={() => hide()}
>
Cancel
</Button>
@ -34,7 +36,7 @@ const SystemBackupRestoreModal: FunctionComponent<Props> = ({ ...modal }) => {
return null;
}
}}
onSuccess={() => hide(modal.modalKey)}
onSuccess={() => hide()}
>
Restore
</AsyncButton>
@ -43,11 +45,13 @@ const SystemBackupRestoreModal: FunctionComponent<Props> = ({ ...modal }) => {
);
return (
<BaseModal title="Restore Backup" footer={footer} {...modal}>
Are you sure you want to restore the backup '{result}'? Bazarr will
automatically restart and reload the UI during the restore process.
</BaseModal>
<Modal title="Restore Backup" footer={footer}>
<span>
Are you sure you want to restore the backup '{result}'? Bazarr will
automatically restart and reload the UI during the restore process.
</span>
</Modal>
);
};
export default SystemBackupRestoreModal;
export default withModal(SystemBackupRestoreModal, "restore");

20
frontend/src/pages/System/Backups/table.tsx
Unescape View File

@ -1,5 +1,5 @@
import { ActionButton, PageTable } from "@/components";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModalControl } from "@/modules/modals";
import { faClock, faHistory, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { FunctionComponent, useMemo } from "react";
@ -42,11 +42,15 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
<ButtonGroup>
<ActionButton
icon={faHistory}
onClick={() => show("restore", row.row.original.filename)}
onClick={() =>
show(SystemBackupRestoreModal, row.row.original.filename)
}
></ActionButton>
<ActionButton
icon={faTrash}
onClick={() => show("delete", row.row.original.filename)}
onClick={() =>
show(SystemBackupDeleteModal, row.row.original.filename)
}
></ActionButton>
</ButtonGroup>
);
@ -59,14 +63,8 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
return (
<React.Fragment>
<PageTable columns={columns} data={backups}></PageTable>
<SystemBackupRestoreModal
modalKey="restore"
size="lg"
></SystemBackupRestoreModal>
<SystemBackupDeleteModal
modalKey="delete"
size="lg"
></SystemBackupDeleteModal>
<SystemBackupRestoreModal></SystemBackupRestoreModal>
<SystemBackupDeleteModal></SystemBackupDeleteModal>
</React.Fragment>
);
};

17
frontend/src/pages/System/Logs/modal.tsx
Unescape View File

@ -1,9 +1,11 @@
import { BaseModal, BaseModalProps } from "@/components";
import { usePayload } from "@/modules/redux/hooks/modal";
import { useModal, usePayload, withModal } from "@/modules/modals";
import { FunctionComponent, useMemo } from "react";
const SystemLogModal: FunctionComponent<BaseModalProps> = ({ ...modal }) => {
const stack = usePayload<string>(modal.modalKey);
const SystemLogModal: FunctionComponent = () => {
const stack = usePayload<string>();
const Modal = useModal();
const result = useMemo(
() =>
stack?.split("\\n").map((v, idx) => (
@ -13,13 +15,14 @@ const SystemLogModal: FunctionComponent<BaseModalProps> = ({ ...modal }) => {
)),
[stack]
);
return (
<BaseModal title="Stack traceback" {...modal}>
<Modal title="Stack traceback">
<pre>
<code>{result}</code>
</pre>
</BaseModal>
</Modal>
);
};
export default SystemLogModal;
export default withModal(SystemLogModal, "system-log");

6
frontend/src/pages/System/Logs/table.tsx
Unescape View File

@ -1,5 +1,5 @@
import { ActionButton, PageTable } from "@/components";
import { useModalControl } from "@/modules/redux/hooks/modal";
import { useModalControl } from "@/modules/modals";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import {
faBug,
@ -60,7 +60,7 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
return (
<ActionButton
icon={faLayerGroup}
onClick={() => show("system-log", value)}
onClick={() => show(SystemLogModal, value)}
></ActionButton>
);
} else {
@ -75,7 +75,7 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
return (
<>
<PageTable columns={columns} data={logs}></PageTable>
<SystemLogModal size="xl" modalKey="system-log"></SystemLogModal>
<SystemLogModal></SystemLogModal>
</>
);
};

Write Preview
Loading…
Cancel
Save