diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index c845c1e36..f06dfa1f8 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -1,4 +1,4 @@ -import { Anchor } from "@mantine/core"; +import { Anchor, Code, Table } from "@mantine/core"; import { FunctionComponent } from "react"; import { Check, @@ -32,6 +32,92 @@ const subzeroColorOverride = (settings: Settings) => { ); }; +interface CommandOption { + option: string; + description: string; +} + +const commandOptions: CommandOption[] = [ + { + option: "directory", + description: "Full path of the episode file parent directory", + }, + { + option: "episode", + description: "Full path of the episode file", + }, + { + option: "episode_name", + description: + "Filename of the episode without parent directory or extension", + }, + { + option: "subtitles", + description: "Full path of the subtitles file", + }, + { + option: "subtitles_language", + description: "Language of the subtitles file (may include HI or forced)", + }, + { + option: "subtitles_language_code2", + description: + "2-letter ISO-639 language code of the subtitles language (may include :hi or :forced)", + }, + { + option: "subtitles_language_code2_dot", + description: + "2-letter ISO-639 language code of the subtitles language (same as previous but with dot separator instead of colon)", + }, + { + option: "subtitles_language_code3", + description: + "3-letter ISO-639 language code of the subtitles language (may include :hi or :forced)", + }, + { + option: "subtitles_language_code3_dot", + description: + "3-letter ISO-639 language code of the subtitles language (same as previous but with dot separator instead of colon)", + }, + { + option: "episode_language", + description: "Audio language of the episode file", + }, + { + option: "episode_language_code2", + description: "2-letter ISO-639 language code of the episode audio language", + }, + { + option: "episode_language_code3", + description: "3-letter ISO-639 language code of the episode audio language", + }, + { + option: "score", + description: "Score of the subtitle file", + }, + { + option: "subtitle_id", + description: "Provider ID of the subtitle file", + }, + { + option: "series_id", + description: "Sonarr series ID (Empty if movie)", + }, + { + option: "episode_id", + description: "Sonarr episode ID or Radarr movie ID", + }, +]; + +const commandOptionElements: JSX.Element[] = commandOptions.map((op, idx) => ( + + + {op.option} + + {op.description} + +)); + const SettingsSubtitlesView: FunctionComponent = () => { return ( @@ -255,6 +341,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { Tries to make subtitles that are completely uppercase readable. { settingKey="settings-general-use_postprocessing_threshold" label="Series Score Threshold" > - + { label="Command" settingKey="settings-general-postprocessing_cmd" > - Variables you can use in your command - - {"{{directory}}"} Full path of the episode file parent - directory - - - {"{{episode}}"} Full path of the episode file - - - {"{{episode_name}}"} Filename of the episode without parent - directory or extension - - - {"{{subtitles}}"} Full path of the subtitles file - - - {"{{subtitles_language}}"} Language of the subtitles file - (may include HI or forced) - - - {"{{subtitles_language_code2}}"} 2-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - - - {"{{subtitles_language_code2_dot}}"} 2-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - - - {"{{subtitles_language_code3}}"} 3-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - - - {"{{subtitles_language_code3_dot}}"} 3-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - - - {"{{episode_language}}"} Audio language of the episode file - - - {"{{episode_language_code2}}"} 2-letter ISO-639 language code - of the episode audio language - - - {"{{episode_language_code3}}"} 3-letter ISO-639 language code - of the episode audio language - - - {"{{score}}"} Score of the subtitle file - - - {"{{subtitle_id}}"} Provider ID of the subtitle file - - - {"{{series_id}}"} Sonarr series ID (Empty if movie) - - - {"{{episode_id}}"} Sonarr episode ID or Radarr movie ID - + + {commandOptionElements} +
diff --git a/frontend/src/pages/Settings/components/Message.tsx b/frontend/src/pages/Settings/components/Message.tsx index 4bde9d9b4..2f334b793 100644 --- a/frontend/src/pages/Settings/components/Message.tsx +++ b/frontend/src/pages/Settings/components/Message.tsx @@ -5,7 +5,7 @@ export const Message: FunctionComponent<{ type?: "warning" | "info"; }> = ({ type = "info", children }) => { return ( - + {children} ); diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx index c47b94e06..32b582496 100644 --- a/frontend/src/pages/Settings/components/collapse.tsx +++ b/frontend/src/pages/Settings/components/collapse.tsx @@ -1,4 +1,4 @@ -import { Collapse } from "@mantine/core"; +import { Collapse, Stack } from "@mantine/core"; import { FunctionComponent, useMemo, useRef } from "react"; import { useSettingValue } from "./hooks"; @@ -29,7 +29,7 @@ const CollapseBox: FunctionComponent = ({ return ( -
{children}
+ {children}
); };