diff options
| -rw-r--r-- | frontend/src/pages/Settings/General/index.tsx | 95 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/Languages/index.tsx | 63 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/Radarr/index.tsx | 124 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/Scheduler/index.tsx | 174 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/Sonarr/index.tsx | 160 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/Subtitles/index.tsx | 564 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/components/collapse.tsx | 77 | ||||
| -rw-r--r-- | frontend/src/pages/Settings/components/forms.tsx | 10 |
8 files changed, 582 insertions, 685 deletions
diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx index 348d31dd8..91eed1300 100644 --- a/frontend/src/pages/Settings/General/index.tsx +++ b/frontend/src/pages/Settings/General/index.tsx @@ -65,24 +65,20 @@ const SettingsGeneralView: FunctionComponent = () => { <Message>Reverse proxy support</Message> </Section> <Section header="Security"> - <CollapseBox> - <CollapseBox.Control> - <Selector - label="Authentication" - clearable - options={securityOptions} - placeholder="No Authentication" - settingKey="settings-auth-type" - beforeStaged={(v) => (v === null ? "None" : v)} - ></Selector> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k !== "" && k !== "None"}> - <Text label="Username" settingKey="settings-auth-username"></Text> - <Password - label="Password" - settingKey="settings-auth-password" - ></Password> - </CollapseBox.Content> + <Selector + label="Authentication" + clearable + options={securityOptions} + placeholder="No Authentication" + settingKey="settings-auth-type" + beforeStaged={(v) => (v === null ? "None" : v)} + ></Selector> + <CollapseBox settingKey="settings-auth-type"> + <Text label="Username" settingKey="settings-auth-username"></Text> + <Password + label="Password" + settingKey="settings-auth-password" + ></Password> </CollapseBox> <Text label="API Key" @@ -118,38 +114,37 @@ const SettingsGeneralView: FunctionComponent = () => { ></Text> </Section> <Section header="Proxy"> - <CollapseBox> - <CollapseBox.Control> - <Selector - clearable - settingKey="settings-proxy-type" - placeholder="No Proxy" - options={proxyOptions} - beforeStaged={(v) => (v === null ? "None" : v)} - ></Selector> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k !== "" && k !== "None"}> - <Text label="Host" settingKey="settings-proxy-url"></Text> - <Number label="Port" settingKey="settings-proxy-port"></Number> - <Text label="Username" settingKey="settings-proxy-username"></Text> - <Password - label="Password" - settingKey="settings-proxy-password" - ></Password> - <Message> - You only need to enter a username and password if one is required. - Leave them blank otherwise - </Message> - <Chips - label="Ignored Addresses" - settingKey="settings-proxy-exclude" - ></Chips> - <Message> - List of excluded domains or IP addresses. Asterisk(wildcard), - regex and CIDR are unsupported. You can use '.domain.com' to - include all subdomains. - </Message> - </CollapseBox.Content> + <Selector + clearable + settingKey="settings-proxy-type" + placeholder="No Proxy" + options={proxyOptions} + beforeStaged={(v) => (v === null ? "None" : v)} + ></Selector> + <CollapseBox + settingKey="settings-proxy-type" + on={(k) => k !== null && k !== "None"} + > + <Text label="Host" settingKey="settings-proxy-url"></Text> + <Number label="Port" settingKey="settings-proxy-port"></Number> + <Text label="Username" settingKey="settings-proxy-username"></Text> + <Password + label="Password" + settingKey="settings-proxy-password" + ></Password> + <Message> + You only need to enter a username and password if one is required. + Leave them blank otherwise + </Message> + <Chips + label="Ignored Addresses" + settingKey="settings-proxy-exclude" + ></Chips> + <Message> + List of excluded domains or IP addresses. Asterisk(wildcard), regex + and CIDR are unsupported. You can use '.domain.com' to include all + subdomains. + </Message> </CollapseBox> </Section> <Section header="Updates" hidden={!Environment.canUpdate}> diff --git a/frontend/src/pages/Settings/Languages/index.tsx b/frontend/src/pages/Settings/Languages/index.tsx index c455fb41b..2fc744588 100644 --- a/frontend/src/pages/Settings/Languages/index.tsx +++ b/frontend/src/pages/Settings/Languages/index.tsx @@ -64,41 +64,36 @@ const SettingsLanguagesView: FunctionComponent = () => { <Table></Table> </Section> <Section header="Default Settings"> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Series" - settingKey="settings-general-serie_default_enabled" - ></Check> - <Message> - Apply only to Series added to Bazarr after enabling this option. - </Message> - </CollapseBox.Control> - <CollapseBox.Content indent> - <ProfileSelector - label="Profile" - placeholder="Select a profile" - settingKey="settings-general-serie_default_profile" - ></ProfileSelector> - </CollapseBox.Content> + <Check + label="Series" + settingKey="settings-general-serie_default_enabled" + ></Check> + <Message> + Apply only to Series added to Bazarr after enabling this option. + </Message> + + <CollapseBox indent settingKey="settings-general-serie_default_enabled"> + <ProfileSelector + label="Profile" + placeholder="Select a profile" + settingKey="settings-general-serie_default_profile" + ></ProfileSelector> </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Movies" - settingKey="settings-general-movie_default_enabled" - ></Check> - <Message> - Apply only to Movies added to Bazarr after enabling this option. - </Message> - </CollapseBox.Control> - <CollapseBox.Content indent> - <ProfileSelector - label="Profile" - placeholder="Select a profile" - settingKey="settings-general-movie_default_profile" - ></ProfileSelector> - </CollapseBox.Content> + + <Check + label="Movies" + settingKey="settings-general-movie_default_enabled" + ></Check> + <Message> + Apply only to Movies added to Bazarr after enabling this option. + </Message> + + <CollapseBox indent settingKey="settings-general-movie_default_enabled"> + <ProfileSelector + label="Profile" + placeholder="Select a profile" + settingKey="settings-general-movie_default_profile" + ></ProfileSelector> </CollapseBox> </Section> </Layout> diff --git a/frontend/src/pages/Settings/Radarr/index.tsx b/frontend/src/pages/Settings/Radarr/index.tsx index 246ee2f7b..f76cb8dba 100644 --- a/frontend/src/pages/Settings/Radarr/index.tsx +++ b/frontend/src/pages/Settings/Radarr/index.tsx @@ -22,71 +22,67 @@ const SettingsRadarrView: FunctionComponent = () => { return ( <Layout name="Radarr"> - <CollapseBox> - <CollapseBox.Control> - <Section header="Use Radarr"> - <Check label="Enabled" settingKey={moviesEnabledKey}></Check> - </Section> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Section header="Host"> - <Text label="Address" settingKey="settings-radarr-ip"></Text> - <Message>Hostname or IPv4 Address</Message> - <Number label="Port" settingKey="settings-radarr-port"></Number> - <Text - label="Base URL" - icon="/" - settingKey="settings-radarr-base_url" - override={baseUrlOverride} - beforeStaged={(v) => "/" + v} - ></Text> - <Text label="API Key" settingKey="settings-radarr-apikey"></Text> - <Check label="SSL" settingKey="settings-radarr-ssl"></Check> - <URLTestButton category="radarr"></URLTestButton> - </Section> - <Section header="Options"> - <Slider - label="Minimum Score" - settingKey="settings-general-minimum_score_movie" - ></Slider> - <Chips - label="Excluded Tags" - settingKey="settings-radarr-excluded_tags" - ></Chips> - <Message> - Movies with those tags (case sensitive) in Radarr will be excluded - from automatic download of subtitles. - </Message> - <Check - label="Download Only Monitored" - settingKey="settings-radarr-only_monitored" - ></Check> - <Message> - Automatic download of subtitles will only happen for monitored - movies in Radarr. - </Message> + <Section header="Use Radarr"> + <Check label="Enabled" settingKey={moviesEnabledKey}></Check> + </Section> + <CollapseBox settingKey={moviesEnabledKey}> + <Section header="Host"> + <Text label="Address" settingKey="settings-radarr-ip"></Text> + <Message>Hostname or IPv4 Address</Message> + <Number label="Port" settingKey="settings-radarr-port"></Number> + <Text + label="Base URL" + icon="/" + settingKey="settings-radarr-base_url" + override={baseUrlOverride} + beforeStaged={(v) => "/" + v} + ></Text> + <Text label="API Key" settingKey="settings-radarr-apikey"></Text> + <Check label="SSL" settingKey="settings-radarr-ssl"></Check> + <URLTestButton category="radarr"></URLTestButton> + </Section> + <Section header="Options"> + <Slider + label="Minimum Score" + settingKey="settings-general-minimum_score_movie" + ></Slider> + <Chips + label="Excluded Tags" + settingKey="settings-radarr-excluded_tags" + ></Chips> + <Message> + Movies with those tags (case sensitive) in Radarr will be excluded + from automatic download of subtitles. + </Message> + <Check + label="Download Only Monitored" + settingKey="settings-radarr-only_monitored" + ></Check> + <Message> + Automatic download of subtitles will only happen for monitored + movies in Radarr. + </Message> - <Check - label="Defer searching of subtitles until scheduled task execution" - settingKey="settings-radarr-defer_search_signalr" - ></Check> - <Message> - If enabled, this option will prevent Bazarr from searching - subtitles as soon as movies are imported. - </Message> - <Message> - Search can be triggered using this command - <Code> - curl -d "radarr_moviefile_id=$radarr_moviefile_id" -H - "x-api-key: ###############################" -X POST - http://localhost:6767/api/webhooks/radarr - </Code> - </Message> - </Section> - <Section header="Path Mappings"> - <PathMappingTable type="radarr"></PathMappingTable> - </Section> - </CollapseBox.Content> + <Check + label="Defer searching of subtitles until scheduled task execution" + settingKey="settings-radarr-defer_search_signalr" + ></Check> + <Message> + If enabled, this option will prevent Bazarr from searching subtitles + as soon as movies are imported. + </Message> + <Message> + Search can be triggered using this command + <Code> + curl -d "radarr_moviefile_id=$radarr_moviefile_id" -H "x-api-key: + ###############################" -X POST + http://localhost:6767/api/webhooks/radarr + </Code> + </Message> + </Section> + <Section header="Path Mappings"> + <PathMappingTable type="radarr"></PathMappingTable> + </Section> </CollapseBox> </Layout> ); diff --git a/frontend/src/pages/Settings/Scheduler/index.tsx b/frontend/src/pages/Settings/Scheduler/index.tsx index 3575c8f0a..c885f6854 100644 --- a/frontend/src/pages/Settings/Scheduler/index.tsx +++ b/frontend/src/pages/Settings/Scheduler/index.tsx @@ -50,70 +50,77 @@ const SettingsSchedulerView: FunctionComponent = () => { ></Selector> </Section> <Section header="Disk Indexing"> - <CollapseBox> - <CollapseBox.Control> - <Selector - label="Update all Episode Subtitles from Disk" - settingKey="settings-sonarr-full_update" - options={diskUpdateOptions} - ></Selector> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k === "Weekly"}> - <Selector - label="Day of The Week" - settingKey="settings-sonarr-full_update_day" - options={dayOptions} - ></Selector> - </CollapseBox.Content> - <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}> - <Selector - label="Time of The Day" - settingKey="settings-sonarr-full_update_hour" - options={timeOptions} - ></Selector> - </CollapseBox.Content> + <Selector + label="Update all Episode Subtitles from Disk" + settingKey="settings-sonarr-full_update" + options={diskUpdateOptions} + ></Selector> - <Check - label="Use cached ffprobe results" - settingKey="settings-sonarr-use_ffprobe_cache" - ></Check> - <Message> - If disabled, Bazarr will use ffprobe to index video file properties - on each run. This will result in higher disk I/O. - </Message> + <CollapseBox + settingKey="settings-sonarr-full_update" + on={(k) => k === "Weekly"} + > + <Selector + label="Day of The Week" + settingKey="settings-sonarr-full_update_day" + options={dayOptions} + ></Selector> </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Selector - label="Update all Movie Subtitles from Disk" - settingKey="settings-radarr-full_update" - options={diskUpdateOptions} - ></Selector> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k === "Weekly"}> - <Selector - label="Day of The Week" - settingKey="settings-radarr-full_update_day" - options={dayOptions} - ></Selector> - </CollapseBox.Content> - <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}> - <Selector - label="Time of The Day" - settingKey="settings-radarr-full_update_hour" - options={timeOptions} - ></Selector> - </CollapseBox.Content> + <CollapseBox + settingKey="settings-sonarr-full_update" + on={(k) => k === "Daily" || k === "Weekly"} + > + <Selector + label="Time of The Day" + settingKey="settings-sonarr-full_update_hour" + options={timeOptions} + ></Selector> + </CollapseBox> + + <Check + label="Use cached ffprobe results" + settingKey="settings-sonarr-use_ffprobe_cache" + ></Check> + <Message> + If disabled, Bazarr will use ffprobe to index video file properties on + each run. This will result in higher disk I/O. + </Message> + + <Selector + label="Update all Movie Subtitles from Disk" + settingKey="settings-radarr-full_update" + options={diskUpdateOptions} + ></Selector> - <Check - label="Use cached ffprobe results" - settingKey="settings-radarr-use_ffprobe_cache" - ></Check> - <Message> - If disabled, Bazarr will use ffprobe to index video file properties - on each run. This will result in higher disk I/O. - </Message> + <CollapseBox + settingKey="settings-radarr-full_update" + on={(k) => k === "Weekly"} + > + <Selector + label="Day of The Week" + settingKey="settings-radarr-full_update_day" + options={dayOptions} + ></Selector> </CollapseBox> + <CollapseBox + settingKey="settings-radarr-full_update" + on={(k) => k === "Daily" || k === "Weekly"} + > + <Selector + label="Time of The Day" + settingKey="settings-radarr-full_update_hour" + options={timeOptions} + ></Selector> + </CollapseBox> + + <Check + label="Use cached ffprobe results" + settingKey="settings-radarr-use_ffprobe_cache" + ></Check> + <Message> + If disabled, Bazarr will use ffprobe to index video file properties on + each run. This will result in higher disk I/O. + </Message> </Section> <Section header="Search and Upgrade Subtitles"> <Selector @@ -135,28 +142,31 @@ const SettingsSchedulerView: FunctionComponent = () => { ></Selector> </Section> <Section header="Backup"> - <CollapseBox> - <CollapseBox.Control> - <Selector - label="Backup config and database" - settingKey="settings-backup-frequency" - options={backupOptions} - ></Selector> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k === "Weekly"}> - <Selector - label="Day of The Week" - settingKey="settings-backup-day" - options={dayOptions} - ></Selector> - </CollapseBox.Content> - <CollapseBox.Content on={(k) => k === "Daily" || k === "Weekly"}> - <Selector - label="Time of The Day" - settingKey="settings-backup-hour" - options={timeOptions} - ></Selector> - </CollapseBox.Content> + <Selector + label="Backup config and database" + settingKey="settings-backup-frequency" + options={backupOptions} + ></Selector> + + <CollapseBox + settingKey="settings-backup-frequency" + on={(k) => k === "Weekly"} + > + <Selector + label="Day of The Week" + settingKey="settings-backup-day" + options={dayOptions} + ></Selector> + </CollapseBox> + <CollapseBox + settingKey="settings-backup-frequency" + on={(k) => k === "Daily" || k === "Weekly"} + > + <Selector + label="Time of The Day" + settingKey="settings-backup-hour" + options={timeOptions} + ></Selector> </CollapseBox> </Section> </Layout> diff --git a/frontend/src/pages/Settings/Sonarr/index.tsx b/frontend/src/pages/Settings/Sonarr/index.tsx index fc951a746..f388dc039 100644 --- a/frontend/src/pages/Settings/Sonarr/index.tsx +++ b/frontend/src/pages/Settings/Sonarr/index.tsx @@ -24,88 +24,84 @@ const SettingsSonarrView: FunctionComponent = () => { return ( <Layout name="Sonarr"> - <CollapseBox> - <CollapseBox.Control> - <Section header="Use Sonarr"> - <Check label="Enabled" settingKey={seriesEnabledKey}></Check> - </Section> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Section header="Host"> - <Text label="Address" settingKey="settings-sonarr-ip"></Text> - <Message>Hostname or IPv4 Address</Message> - <Number label="Port" settingKey="settings-sonarr-port"></Number> - <Text - label="Base URL" - icon="/" - settingKey="settings-sonarr-base_url" - override={baseUrlOverride} - beforeStaged={(v) => "/" + v} - ></Text> - <Text label="API Key" settingKey="settings-sonarr-apikey"></Text> - <Check label="SSL" settingKey="settings-sonarr-ssl"></Check> - <URLTestButton category="sonarr"></URLTestButton> - </Section> - <Section header="Options"> - <Slider - label="Minimum Score" - settingKey="settings-general-minimum_score" - ></Slider> - <Chips - label="Excluded Tags" - settingKey="settings-sonarr-excluded_tags" - ></Chips> - <Message> - Episodes from series with those tags (case sensitive) in Sonarr - will be excluded from automatic download of subtitles. - </Message> - <MultiSelector - label="Excluded Series Types" - placeholder="Select series types" - settingKey="settings-sonarr-excluded_series_types" - options={seriesTypeOptions} - ></MultiSelector> - <Message> - Episodes from series with those types in Sonarr will be excluded - from automatic download of subtitles. - </Message> - <Check - label="Download Only Monitored" - settingKey="settings-sonarr-only_monitored" - ></Check> - <Message> - Automatic download of subtitles will only happen for monitored - episodes in Sonarr. - </Message> - <Check - label="Defer searching of subtitles until scheduled task execution" - settingKey="settings-sonarr-defer_search_signalr" - ></Check> - <Message> - If enabled, this option will prevent Bazarr from searching - subtitles as soon as episodes are imported. - </Message> - <Message> - Search can be triggered using this command - <Code> - curl -d "sonarr_episodefile_id=$sonarr_episodefile_id" -H - "x-api-key: ###############################" -X POST - http://localhost:6767/api/webhooks/sonarr - </Code> - </Message> - <Check - label="Exclude season zero (extras)" - settingKey="settings-sonarr-exclude_season_zero" - ></Check> - <Message> - Episodes from season zero (extras) from automatic download of - subtitles. - </Message> - </Section> - <Section header="Path Mappings"> - <PathMappingTable type="sonarr"></PathMappingTable> - </Section> - </CollapseBox.Content> + <Section header="Use Sonarr"> + <Check label="Enabled" settingKey={seriesEnabledKey}></Check> + </Section> + <CollapseBox settingKey={seriesEnabledKey}> + <Section header="Host"> + <Text label="Address" settingKey="settings-sonarr-ip"></Text> + <Message>Hostname or IPv4 Address</Message> + <Number label="Port" settingKey="settings-sonarr-port"></Number> + <Text + label="Base URL" + icon="/" + settingKey="settings-sonarr-base_url" + override={baseUrlOverride} + beforeStaged={(v) => "/" + v} + ></Text> + <Text label="API Key" settingKey="settings-sonarr-apikey"></Text> + <Check label="SSL" settingKey="settings-sonarr-ssl"></Check> + <URLTestButton category="sonarr"></URLTestButton> + </Section> + <Section header="Options"> + <Slider + label="Minimum Score" + settingKey="settings-general-minimum_score" + ></Slider> + <Chips + label="Excluded Tags" + settingKey="settings-sonarr-excluded_tags" + ></Chips> + <Message> + Episodes from series with those tags (case sensitive) in Sonarr will + be excluded from automatic download of subtitles. + </Message> + <MultiSelector + label="Excluded Series Types" + placeholder="Select series types" + settingKey="settings-sonarr-excluded_series_types" + options={seriesTypeOptions} + ></MultiSelector> + <Message> + Episodes from series with those types in Sonarr will be excluded + from automatic download of subtitles. + </Message> + <Check + label="Download Only Monitored" + settingKey="settings-sonarr-only_monitored" + ></Check> + <Message> + Automatic download of subtitles will only happen for monitored + episodes in Sonarr. + </Message> + <Check + label="Defer searching of subtitles until scheduled task execution" + settingKey="settings-sonarr-defer_search_signalr" + ></Check> + <Message> + If enabled, this option will prevent Bazarr from searching subtitles + as soon as episodes are imported. + </Message> + <Message> + Search can be triggered using this command + <Code> + curl -d "sonarr_episodefile_id=$sonarr_episodefile_id" -H + "x-api-key: ###############################" -X POST + http://localhost:6767/api/webhooks/sonarr + </Code> + </Message> + <Check + label="Exclude season zero (extras)" + settingKey="settings-sonarr-exclude_season_zero" + ></Check> + <Message> + Episodes from season zero (extras) from automatic download of + subtitles. + </Message> + </Section> + <Section header="Path Mappings"> + <PathMappingTable type="sonarr"></PathMappingTable> + </Section> </CollapseBox> </Layout> ); diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index 73b6517d5..c845c1e36 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -36,53 +36,47 @@ const SettingsSubtitlesView: FunctionComponent = () => { return ( <Layout name="Subtitles"> <Section header="Subtitles Options"> - <CollapseBox> - <CollapseBox.Control> - <Selector - label="Subtitle Folder" - options={folderOptions} - settingKey="settings-general-subfolder" - ></Selector> - <Message> - Choose the folder you wish to store/read the subtitles - </Message> - </CollapseBox.Control> - <CollapseBox.Content on={(k) => k !== "" && k !== "current"}> - <Text - label="Custom Subtitles Folder" - settingKey="settings-general-subfolder_custom" - ></Text> - </CollapseBox.Content> + <Selector + label="Subtitle Folder" + options={folderOptions} + settingKey="settings-general-subfolder" + ></Selector> + <Message> + Choose the folder you wish to store/read the subtitles + </Message> + <CollapseBox + settingKey="settings-general-subfolder" + on={(k) => k !== "" && k !== "current"} + > + <Text + label="Custom Subtitles Folder" + settingKey="settings-general-subfolder_custom" + ></Text> </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Upgrade Previously Downloaded Subtitles" - settingKey="settings-general-upgrade_subs" - ></Check> - <Message> - Schedule a task to upgrade subtitles previously downloaded by - Bazarr. - </Message> - </CollapseBox.Control> - <CollapseBox.Content> - <Slider - settingKey="settings-general-days_to_upgrade_subs" - max={30} - mb="lg" - ></Slider> - <Message> - Number of days to go back in history to upgrade subtitles - </Message> - <Check - label="Upgrade Manually Downloaded or Translated Subtitles" - settingKey="settings-general-upgrade_manual" - ></Check> - <Message> - Enable or disable upgrade of manually downloaded or translated - subtitles. - </Message> - </CollapseBox.Content> + <Check + label="Upgrade Previously Downloaded Subtitles" + settingKey="settings-general-upgrade_subs" + ></Check> + <Message> + Schedule a task to upgrade subtitles previously downloaded by Bazarr. + </Message> + <CollapseBox settingKey="settings-general-upgrade_subs"> + <Slider + settingKey="settings-general-days_to_upgrade_subs" + max={30} + mb="lg" + ></Slider> + <Message> + Number of days to go back in history to upgrade subtitles + </Message> + <Check + label="Upgrade Manually Downloaded or Translated Subtitles" + settingKey="settings-general-upgrade_manual" + ></Check> + <Message> + Enable or disable upgrade of manually downloaded or translated + subtitles. + </Message> </CollapseBox> <Selector label="Hearing-impaired subtitles extension" @@ -95,73 +89,71 @@ const SettingsSubtitlesView: FunctionComponent = () => { </Message> </Section> <Section header="Anti-Captcha Options"> - <CollapseBox> - <CollapseBox.Control> - <Selector - clearable - placeholder="Select a provider" - settingKey="settings-general-anti_captcha_provider" - beforeStaged={(v) => (v === undefined ? "None" : v)} - options={antiCaptchaOption} - ></Selector> - <Message>Choose the anti-captcha provider you want to use</Message> - </CollapseBox.Control> - <CollapseBox.Content eventKey="anti-captcha"> - <Anchor href="http://getcaptchasolution.com/eixxo1rsnw"> - Anti-Captcha.com - </Anchor> - <Text - label="Account Key" - settingKey="settings-anticaptcha-anti_captcha_key" - ></Text> - </CollapseBox.Content> - <CollapseBox.Content eventKey="death-by-captcha"> - <Anchor href="https://www.deathbycaptcha.com"> - DeathByCaptcha.com - </Anchor> - <Text - label="Username" - settingKey="settings-deathbycaptcha-username" - ></Text> - <Password - label="Password" - settingKey="settings-deathbycaptcha-password" - ></Password> - </CollapseBox.Content> + <Selector + clearable + placeholder="Select a provider" + settingKey="settings-general-anti_captcha_provider" + beforeStaged={(v) => (v === undefined ? "None" : v)} + options={antiCaptchaOption} + ></Selector> + <Message>Choose the anti-captcha provider you want to use</Message> + <CollapseBox + settingKey="settings-general-anti_captcha_provider" + on={(value) => value === "anti-captcha"} + > + <Anchor href="http://getcaptchasolution.com/eixxo1rsnw"> + Anti-Captcha.com + </Anchor> + <Text + label="Account Key" + settingKey="settings-anticaptcha-anti_captcha_key" + ></Text> + </CollapseBox> + <CollapseBox + settingKey="settings-general-anti_captcha_provider" + on={(value) => value === "death-by-captcha"} + > + <Anchor href="https://www.deathbycaptcha.com"> + DeathByCaptcha.com + </Anchor> + <Text + label="Username" + settingKey="settings-deathbycaptcha-username" + ></Text> + <Password + label="Password" + settingKey="settings-deathbycaptcha-password" + ></Password> </CollapseBox> </Section> <Section header="Performance / Optimization"> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Adaptive Searching" - settingKey="settings-general-adaptive_searching" - ></Check> - <Message> - When searching for subtitles, Bazarr will reduce search frequency - to limit call to providers. - </Message> - </CollapseBox.Control> - <CollapseBox.Content> - <Selector - settingKey="settings-general-adaptive_searching_delay" - beforeStaged={(v) => (v === undefined ? "3w" : v)} - options={adaptiveSearchingDelayOption} - ></Selector> - <Message> - In order to reduce search frequency, how many weeks must Bazarr - wait after initial search. - </Message> - <Selector - settingKey="settings-general-adaptive_searching_delta" - beforeStaged={(v) => (v === undefined ? "1w" : v)} - options={adaptiveSearchingDeltaOption} - ></Selector> - <Message> - How often should Bazarr search for subtitles when in adaptive - search mode. - </Message> - </CollapseBox.Content> + <Check + label="Adaptive Searching" + settingKey="settings-general-adaptive_searching" + ></Check> + <Message> + When searching for subtitles, Bazarr will reduce search frequency to + limit call to providers. + </Message> + <CollapseBox settingKey="settings-general-adaptive_searching"> + <Selector + settingKey="settings-general-adaptive_searching_delay" + beforeStaged={(v) => (v === undefined ? "3w" : v)} + options={adaptiveSearchingDelayOption} + ></Selector> + <Message> + In order to reduce search frequency, how many weeks must Bazarr wait + after initial search. + </Message> + <Selector + settingKey="settings-general-adaptive_searching_delta" + beforeStaged={(v) => (v === undefined ? "1w" : v)} + options={adaptiveSearchingDeltaOption} + ></Selector> + <Message> + How often should Bazarr search for subtitles when in adaptive search + mode. + </Message> </CollapseBox> <Check label="Search Enabled Providers Simultaneously" @@ -171,48 +163,43 @@ const SettingsSubtitlesView: FunctionComponent = () => { Search multiple providers at once (Don't choose this on low powered devices) </Message> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Use Embedded Subtitles" - settingKey="settings-general-use_embedded_subs" - ></Check> - <Message> - Use embedded subtitles in media files when determining missing - ones. - </Message> - </CollapseBox.Control> - <CollapseBox.Content> - <Check - label="Ignore Embedded PGS Subtitles" - settingKey="settings-general-ignore_pgs_subs" - ></Check> - <Message> - Ignores PGS Subtitles in Embedded Subtitles detection. - </Message> - <Check - label="Ignore Embedded VobSub Subtitles" - settingKey="settings-general-ignore_vobsub_subs" - ></Check> - <Message> - Ignores VobSub Subtitles in Embedded Subtitles detection. - </Message> - <Check - label="Ignore Embedded ASS Subtitles" - settingKey="settings-general-ignore_ass_subs" - ></Check> - <Message> - Ignores ASS Subtitles in Embedded Subtitles detection. - </Message> - <Check - label="Show Only Desired Languages" - settingKey="settings-general-embedded_subs_show_desired" - ></Check> - <Message> - Hide embedded subtitles for languages that are not currently - desired. - </Message> - </CollapseBox.Content> + <Check + label="Use Embedded Subtitles" + settingKey="settings-general-use_embedded_subs" + ></Check> + <Message> + Use embedded subtitles in media files when determining missing ones. + </Message> + <CollapseBox settingKey="settings-general-use_embedded_subs"> + <Check + label="Ignore Embedded PGS Subtitles" + settingKey="settings-general-ignore_pgs_subs" + ></Check> + <Message> + Ignores PGS Subtitles in Embedded Subtitles detection. + </Message> + <Check + label="Ignore Embedded VobSub Subtitles" + settingKey="settings-general-ignore_vobsub_subs" + ></Check> + <Message> + Ignores VobSub Subtitles in Embedded Subtitles detection. + </Message> + <Check + label="Ignore Embedded ASS Subtitles" + settingKey="settings-general-ignore_ass_subs" + ></Check> + <Message> + Ignores ASS Subtitles in Embedded Subtitles detection. + </Message> + <Check + label="Show Only Desired Languages" + settingKey="settings-general-embedded_subs_show_desired" + ></Check> + <Message> + Hide embedded subtitles for languages that are not currently + desired. + </Message> </CollapseBox> </Section> <Section header="Post-Processing"> @@ -288,159 +275,130 @@ const SettingsSubtitlesView: FunctionComponent = () => { Reverses the punctuation in right-to-left subtitles for problematic playback devices. </Message> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Permission (chmod)" - settingKey="settings-general-chmod_enabled" - ></Check> - </CollapseBox.Control> - <CollapseBox.Content> - <Text placeholder="0777" settingKey="settings-general-chmod"></Text> - <Message>Must be 4 digit octal</Message> - </CollapseBox.Content> + <Check + label="Permission (chmod)" + settingKey="settings-general-chmod_enabled" + ></Check> + <CollapseBox settingKey="settings-general-chmod_enabled"> + <Text placeholder="0777" settingKey="settings-general-chmod"></Text> + <Message>Must be 4 digit octal</Message> </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Automatic Subtitles Synchronization" - settingKey="settings-subsync-use_subsync" - ></Check> - <Message> - Enable the automatic subtitles synchronization after downloading a - subtitles. - </Message> - </CollapseBox.Control> - <CollapseBox.Content> - <Check label="Debug" settingKey="settings-subsync-debug"></Check> - <Message> - Do not actually sync the subtitles but generate a .tar.gz file to - be able to open an issue for ffsubsync. This file will reside - alongside the media file. - </Message> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Series Score Threshold" - settingKey="settings-subsync-use_subsync_threshold" - ></Check> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Slider settingKey="settings-subsync-subsync_threshold"></Slider> - </CollapseBox.Content> - </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - label="Movies Score Threshold" - settingKey="settings-subsync-use_subsync_movie_threshold" - ></Check> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Slider settingKey="settings-subsync-subsync_movie_threshold"></Slider> - </CollapseBox.Content> - </CollapseBox> - </CollapseBox.Content> + <Check + label="Automatic Subtitles Synchronization" + settingKey="settings-subsync-use_subsync" + ></Check> + <Message> + Enable the automatic subtitles synchronization after downloading a + subtitles. + </Message> + <CollapseBox settingKey="settings-subsync-use_subsync"> + <Check label="Debug" settingKey="settings-subsync-debug"></Check> + <Message> + Do not actually sync the subtitles but generate a .tar.gz file to be + able to open an issue for ffsubsync. This file will reside alongside + the media file. + </Message> + <Check + label="Series Score Threshold" + settingKey="settings-subsync-use_subsync_threshold" + ></Check> + <CollapseBox settingKey="settings-subsync-use_subsync_threshold"> + <Slider settingKey="settings-subsync-subsync_threshold"></Slider> + </CollapseBox> + <Check + label="Movies Score Threshold" + settingKey="settings-subsync-use_subsync_movie_threshold" + ></Check> + <CollapseBox settingKey="settings-subsync-use_subsync_movie_threshold"> + <Slider settingKey="settings-subsync-subsync_movie_threshold"></Slider> + </CollapseBox> </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - settingKey="settings-general-use_postprocessing" - label="Custom Post-Processing" - ></Check> - <Message> - Enable the post-processing execution after downloading a - subtitles. - </Message> - </CollapseBox.Control> - <CollapseBox.Content> - <CollapseBox> - <CollapseBox.Control> - <Check - settingKey="settings-general-use_postprocessing_threshold" - label="Series Score Threshold" - ></Check> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Slider settingKey="settings-general-postprocessing_threshold"></Slider> - </CollapseBox.Content> - </CollapseBox> - <CollapseBox> - <CollapseBox.Control> - <Check - settingKey="settings-general-use_postprocessing_threshold_movie" - label="Movies Score Threshold" - ></Check> - </CollapseBox.Control> - <CollapseBox.Content indent={false}> - <Slider settingKey="settings-general-postprocessing_threshold_movie"></Slider> - </CollapseBox.Content> - </CollapseBox> - <Text - label="Command" - settingKey="settings-general-postprocessing_cmd" - ></Text> - <Message>Variables you can use in your command</Message> - <Message> - <b>{"{{directory}}"}</b> Full path of the episode file parent - directory - </Message> - <Message> - <b>{"{{episode}}"}</b> Full path of the episode file - </Message> - <Message> - <b>{"{{episode_name}}"}</b> Filename of the episode without parent - directory or extension - </Message> - <Message> - <b>{"{{subtitles}}"}</b> Full path of the subtitles file - </Message> - <Message> - <b>{"{{subtitles_language}}"}</b> Language of the subtitles file - (may include HI or forced) - </Message> - <Message> - <b>{"{{subtitles_language_code2}}"}</b> 2-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - </Message> - <Message> - <b>{"{{subtitles_language_code2_dot}}"}</b> 2-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - </Message> - <Message> - <b>{"{{subtitles_language_code3}}"}</b> 3-letter ISO-639 language - code of the subtitles language (may include :hi or :forced) - </Message> - <Message> - <b>{"{{subtitles_language_code3_dot}}"}</b> 3-letter ISO-639 - language code of the subtitles language (same as previous but with - dot separator instead of colon) - </Message> - <Message> - <b>{"{{episode_language}}"}</b> Audio language of the episode file - </Message> - <Message> - <b>{"{{episode_language_code2}}"}</b> 2-letter ISO-639 language - code of the episode audio language - </Message> - <Message> - <b>{"{{episode_language_code3}}"}</b> 3-letter ISO-639 language - code of the episode audio language - </Message> - <Message> - <b>{"{{score}}"}</b> Score of the subtitle file - </Message> - <Message> - <b>{"{{subtitle_id}}"}</b> Provider ID of the subtitle file - </Message> - <Message> - <b>{"{{series_id}}"}</b> Sonarr series ID (Empty if movie) - </Message> - <Message> - <b>{"{{episode_id}}"}</b> Sonarr episode ID or Radarr movie ID - </Message> - </CollapseBox.Content> + <Check + settingKey="settings-general-use_postprocessing" + label="Custom Post-Processing" + ></Check> + <Message> + Enable the post-processing execution after downloading a subtitles. + </Message> + <CollapseBox settingKey="settings-general-use_postprocessing"> + <Check + settingKey="settings-general-use_postprocessing_threshold" + label="Series Score Threshold" + ></Check> + <CollapseBox settingKey="settings-general-use_postprocessing"> + <Slider settingKey="settings-general-postprocessing_threshold"></Slider> + </CollapseBox> + <Check + settingKey="settings-general-use_postprocessing_threshold_movie" + label="Movies Score Threshold" + ></Check> + <CollapseBox settingKey="settings-general-use_postprocessing_threshold_movie"> + <Slider settingKey="settings-general-postprocessing_threshold_movie"></Slider> + </CollapseBox> + <Text + label="Command" + settingKey="settings-general-postprocessing_cmd" + ></Text> + <Message>Variables you can use in your command</Message> + <Message> + <b>{"{{directory}}"}</b> Full path of the episode file parent + directory + </Message> + <Message> + <b>{"{{episode}}"}</b> Full path of the episode file + </Message> + <Message> + <b>{"{{episode_name}}"}</b> Filename of the episode without parent + directory or extension + </Message> + <Message> + <b>{"{{subtitles}}"}</b> Full path of the subtitles file + </Message> + <Message> + <b>{"{{subtitles_language}}"}</b> Language of the subtitles file + (may include HI or forced) + </Message> + <Message> + <b>{"{{subtitles_language_code2}}"}</b> 2-letter ISO-639 language + code of the subtitles language (may include :hi or :forced) + </Message> + <Message> + <b>{"{{subtitles_language_code2_dot}}"}</b> 2-letter ISO-639 + language code of the subtitles language (same as previous but with + dot separator instead of colon) + </Message> + <Message> + <b>{"{{subtitles_language_code3}}"}</b> 3-letter ISO-639 language + code of the subtitles language (may include :hi or :forced) + </Message> + <Message> + <b>{"{{subtitles_language_code3_dot}}"}</b> 3-letter ISO-639 + language code of the subtitles language (same as previous but with + dot separator instead of colon) + </Message> + <Message> + <b>{"{{episode_language}}"}</b> Audio language of the episode file + </Message> + <Message> + <b>{"{{episode_language_code2}}"}</b> 2-letter ISO-639 language code + of the episode audio language + </Message> + <Message> + <b>{"{{episode_language_code3}}"}</b> 3-letter ISO-639 language code + of the episode audio language + </Message> + <Message> + <b>{"{{score}}"}</b> Score of the subtitle file + </Message> + <Message> + <b>{"{{subtitle_id}}"}</b> Provider ID of the subtitle file + </Message> + <Message> + <b>{"{{series_id}}"}</b> Sonarr series ID (Empty if movie) + </Message> + <Message> + <b>{"{{episode_id}}"}</b> Sonarr episode ID or Radarr movie ID + </Message> </CollapseBox> </Section> </Layout> diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx index 1296e44b2..c47b94e06 100644 --- a/frontend/src/pages/Settings/components/collapse.tsx +++ b/frontend/src/pages/Settings/components/collapse.tsx @@ -1,75 +1,31 @@ import { Collapse } from "@mantine/core"; -import { - createContext, - Dispatch, - FunctionComponent, - useContext, - useMemo, - useState, -} from "react"; - -type SupportType = string | boolean; - -const CollapseContext = createContext< - [SupportType, Dispatch<SupportType> | undefined] ->([false, undefined]); - -const CollapseUpdateContext = createContext<Dispatch<SupportType> | undefined>( - undefined -); - -export function useCollapse() { - return useContext(CollapseUpdateContext); -} - -interface CollapseBoxType { - Control: typeof CollapseBoxControl; - Content: typeof CollapseBoxContent; -} - -const CollapseBox: CollapseBoxType & FunctionComponent = ({ children }) => { - const state = useState<boolean | string>(false); - - return ( - <CollapseContext.Provider value={state}> - {children} - </CollapseContext.Provider> - ); -}; - -const CollapseBoxControl: FunctionComponent = ({ children }) => { - const context = useContext(CollapseContext); - return ( - <CollapseUpdateContext.Provider value={context[1]}> - {children} - </CollapseUpdateContext.Provider> - ); -}; +import { FunctionComponent, useMemo, useRef } from "react"; +import { useSettingValue } from "./hooks"; interface ContentProps { - on?: (k: string) => boolean; - eventKey?: string; + settingKey: string; + on?: (k: unknown) => boolean; indent?: boolean; - children: JSX.Element | JSX.Element[]; } -const CollapseBoxContent: FunctionComponent<ContentProps> = ({ +const CollapseBox: FunctionComponent<ContentProps> = ({ on, - eventKey, indent, children, + settingKey, }) => { - const [value] = useContext(CollapseContext); + const value = useSettingValue(settingKey); - const open = useMemo(() => { - if (on && typeof value === "string") { - return on(value); - } else if (eventKey) { - return value === eventKey; + const onRef = useRef(on); + onRef.current = on; + + const open = useMemo<boolean>(() => { + if (onRef.current) { + return onRef.current(value); } else { - return value === true; + return Boolean(value); } - }, [on, value, eventKey]); + }, [value]); return ( <Collapse in={open} pl={indent ? "md" : undefined}> @@ -78,7 +34,4 @@ const CollapseBoxContent: FunctionComponent<ContentProps> = ({ ); }; -CollapseBox.Control = CollapseBoxControl; -CollapseBox.Content = CollapseBoxContent; - export default CollapseBox; diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx index fac10a946..e0d880db9 100644 --- a/frontend/src/pages/Settings/components/forms.tsx +++ b/frontend/src/pages/Settings/components/forms.tsx @@ -22,8 +22,8 @@ import { TextInput, TextInputProps, } from "@mantine/core"; -import { FunctionComponent, ReactText, useCallback, useEffect } from "react"; -import { useCollapse, useSettingValue } from "."; +import { FunctionComponent, ReactText, useCallback } from "react"; +import { useSettingValue } from "."; import { FormKey, useFormActions } from "../utilities/FormValues"; import { OverrideFuncType } from "./hooks"; @@ -71,15 +71,12 @@ export const Text: FunctionComponent<TextProps> = ({ const value = useSettingValue<ReactText>(settingKey, override); const { setValue } = useFormActions(); - const collapse = useCollapse(); - return ( <TextInput {...props} value={value ?? undefined} onChange={(e) => { const val = e.currentTarget.value; - collapse && collapse(val.toString()); const value = beforeStaged ? beforeStaged(val) : val; setValue(value, settingKey, location); }} @@ -124,12 +121,9 @@ export const Check: FunctionComponent<CheckProps> = ({ settingKey, location, }) => { - const collapse = useCollapse(); const value = useSettingValue<boolean>(settingKey, override); const { setValue } = useFormActions(); - useEffect(() => collapse && collapse(value ?? false), [collapse, value]); - return ( <Switch id={settingKey} |