Fix a issue that seleection of the languages profiles could be Unknown on settings page

This commit is contained in:
LASER-Yi 2022-02-24 01:05:23 +08:00
parent bb806defdb
commit 63f1e63fa8
No known key found for this signature in database
GPG Key ID: BB28903D50A1D408
6 changed files with 74 additions and 90 deletions

View File

@ -1,6 +1,6 @@
import { LanguageSelector as CLanguageSelector } from "components"; import { LanguageSelector as CLanguageSelector } from "components";
import React, { FunctionComponent, useMemo } from "react"; import React, { FunctionComponent, useMemo } from "react";
import { useEnabledLanguagesContext, useProfilesContext } from "."; import { useLatestEnabledLanguages, useLatestProfiles } from ".";
import { BaseInput, Selector, useSingleUpdate } from "../components"; import { BaseInput, Selector, useSingleUpdate } from "../components";
interface LanguageSelectorProps { interface LanguageSelectorProps {
@ -10,7 +10,7 @@ interface LanguageSelectorProps {
export const LanguageSelector: FunctionComponent< export const LanguageSelector: FunctionComponent<
LanguageSelectorProps & BaseInput<string[]> LanguageSelectorProps & BaseInput<string[]>
> = ({ settingKey, options }) => { > = ({ settingKey, options }) => {
const enabled = useEnabledLanguagesContext(); const enabled = useLatestEnabledLanguages();
const update = useSingleUpdate(); const update = useSingleUpdate();
return ( return (
@ -30,7 +30,7 @@ interface ProfileSelectorProps {}
export const ProfileSelector: FunctionComponent< export const ProfileSelector: FunctionComponent<
ProfileSelectorProps & BaseInput<Language.Profile> ProfileSelectorProps & BaseInput<Language.Profile>
> = ({ settingKey }) => { > = ({ settingKey }) => {
const profiles = useProfilesContext(); const profiles = useLatestProfiles();
const profileOptions = useMemo<SelectorOption<number>[]>( const profileOptions = useMemo<SelectorOption<number>[]>(
() => () =>

View File

@ -1,6 +1,6 @@
import { useLanguageProfiles, useLanguages } from "apis/hooks"; import { useLanguageProfiles, useLanguages } from "apis/hooks";
import { isArray } from "lodash"; import { isArray } from "lodash";
import React, { FunctionComponent, useContext } from "react"; import React, { FunctionComponent } from "react";
import { useEnabledLanguages } from "utilities/languages"; import { useEnabledLanguages } from "utilities/languages";
import { import {
Check, Check,
@ -15,32 +15,25 @@ import { enabledLanguageKey, languageProfileKey } from "../keys";
import { LanguageSelector, ProfileSelector } from "./components"; import { LanguageSelector, ProfileSelector } from "./components";
import Table from "./table"; import Table from "./table";
const EnabledLanguageContext = React.createContext<readonly Language.Info[]>( export function useLatestEnabledLanguages() {
[] const { data } = useEnabledLanguages();
);
const LanguagesProfileContext = React.createContext<
readonly Language.Profile[]
>([]);
export function useEnabledLanguagesContext() {
const list = useContext(EnabledLanguageContext);
const latest = useLatest<Language.Info[]>(enabledLanguageKey, isArray); const latest = useLatest<Language.Info[]>(enabledLanguageKey, isArray);
if (latest) { if (latest) {
return latest; return latest;
} else { } else {
return list; return data;
} }
} }
export function useProfilesContext() { export function useLatestProfiles() {
const list = useContext(LanguagesProfileContext); const { data = [] } = useLanguageProfiles();
const latest = useLatest<Language.Profile[]>(languageProfileKey, isArray); const latest = useLatest<Language.Profile[]>(languageProfileKey, isArray);
if (latest) { if (latest) {
return latest; return latest;
} else { } else {
return list; return data;
} }
} }
@ -48,81 +41,73 @@ interface Props {}
const SettingsLanguagesView: FunctionComponent<Props> = () => { const SettingsLanguagesView: FunctionComponent<Props> = () => {
const { data: languages } = useLanguages(); const { data: languages } = useLanguages();
const { data: enabled } = useEnabledLanguages();
const { data: profiles } = useLanguageProfiles();
return ( return (
<SettingsProvider title="Languages - Bazarr (Settings)"> <SettingsProvider title="Languages - Bazarr (Settings)">
<EnabledLanguageContext.Provider value={enabled}> <Group header="Subtitles Language">
<LanguagesProfileContext.Provider value={profiles ?? []}> <Input>
<Group header="Subtitles Language"> <Check
label="Single Language"
settingKey="settings-general-single_language"
></Check>
<Message>
Download a single Subtitles file without adding the language code to
the filename.
</Message>
<Message type="warning">
We don't recommend enabling this option unless absolutely required
(ie: media player not supporting language code in subtitles
filename). Results may vary.
</Message>
</Input>
<Input name="Languages Filter">
<LanguageSelector
settingKey={enabledLanguageKey}
options={languages ?? []}
></LanguageSelector>
</Input>
</Group>
<Group header="Languages Profiles">
<Table></Table>
</Group>
<Group header="Default Settings">
<CollapseBox>
<CollapseBox.Control>
<Input> <Input>
<Check <Check
label="Single Language" label="Series"
settingKey="settings-general-single_language" settingKey="settings-general-serie_default_enabled"
></Check> ></Check>
<Message> <Message>
Download a single Subtitles file without adding the language Apply only to Series added to Bazarr after enabling this option.
code to the filename.
</Message>
<Message type="warning">
We don't recommend enabling this option unless absolutely
required (ie: media player not supporting language code in
subtitles filename). Results may vary.
</Message> </Message>
</Input> </Input>
<Input name="Languages Filter"> </CollapseBox.Control>
<LanguageSelector <CollapseBox.Content indent>
settingKey={enabledLanguageKey} <Input name="Profile">
options={languages ?? []} <ProfileSelector settingKey="settings-general-serie_default_profile"></ProfileSelector>
></LanguageSelector>
</Input> </Input>
</Group> </CollapseBox.Content>
<Group header="Languages Profiles"> </CollapseBox>
<Table></Table> <CollapseBox>
</Group> <CollapseBox.Control>
<Group header="Default Settings"> <Input>
<CollapseBox> <Check
<CollapseBox.Control> label="Movies"
<Input> settingKey="settings-general-movie_default_enabled"
<Check ></Check>
label="Series" <Message>
settingKey="settings-general-serie_default_enabled" Apply only to Movies added to Bazarr after enabling this option.
></Check> </Message>
<Message> </Input>
Apply only to Series added to Bazarr after enabling this </CollapseBox.Control>
option. <CollapseBox.Content>
</Message> <Input name="Profile">
</Input> <ProfileSelector settingKey="settings-general-movie_default_profile"></ProfileSelector>
</CollapseBox.Control> </Input>
<CollapseBox.Content indent> </CollapseBox.Content>
<Input name="Profile"> </CollapseBox>
<ProfileSelector settingKey="settings-general-serie_default_profile"></ProfileSelector> </Group>
</Input>
</CollapseBox.Content>
</CollapseBox>
<CollapseBox>
<CollapseBox.Control>
<Input>
<Check
label="Movies"
settingKey="settings-general-movie_default_enabled"
></Check>
<Message>
Apply only to Movies added to Bazarr after enabling this
option.
</Message>
</Input>
</CollapseBox.Control>
<CollapseBox.Content>
<Input name="Profile">
<ProfileSelector settingKey="settings-general-movie_default_profile"></ProfileSelector>
</Input>
</CollapseBox.Content>
</CollapseBox>
</Group>
</LanguagesProfileContext.Provider>
</EnabledLanguageContext.Provider>
</SettingsProvider> </SettingsProvider>
); );
}; };

View File

@ -19,7 +19,7 @@ import React, {
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import { Column, TableUpdater } from "react-table"; import { Column, TableUpdater } from "react-table";
import { BuildKey } from "utilities"; import { BuildKey } from "utilities";
import { useEnabledLanguagesContext } from "."; import { useLatestEnabledLanguages } from ".";
import { Input, Message } from "../components"; import { Input, Message } from "../components";
import { cutoffOptions } from "./options"; import { cutoffOptions } from "./options";
interface Props { interface Props {
@ -45,7 +45,7 @@ const LanguagesProfileModal: FunctionComponent<Props & BaseModalProps> = (
const { payload: profile, closeModal } = const { payload: profile, closeModal } =
useModalInformation<Language.Profile>(modal.modalKey); useModalInformation<Language.Profile>(modal.modalKey);
const languages = useEnabledLanguagesContext(); const languages = useLatestEnabledLanguages();
const [current, setProfile] = useState(createDefaultProfile); const [current, setProfile] = useState(createDefaultProfile);

View File

@ -4,16 +4,16 @@ import { cloneDeep } from "lodash";
import React, { FunctionComponent, useCallback, useMemo } from "react"; import React, { FunctionComponent, useCallback, useMemo } from "react";
import { Badge, Button, ButtonGroup } from "react-bootstrap"; import { Badge, Button, ButtonGroup } from "react-bootstrap";
import { Column, TableUpdater } from "react-table"; import { Column, TableUpdater } from "react-table";
import { useEnabledLanguagesContext, useProfilesContext } from "."; import { useLatestEnabledLanguages, useLatestProfiles } from ".";
import { useSingleUpdate } from "../components"; import { useSingleUpdate } from "../components";
import { languageProfileKey } from "../keys"; import { languageProfileKey } from "../keys";
import Modal from "./modal"; import Modal from "./modal";
import { anyCutoff } from "./options"; import { anyCutoff } from "./options";
const Table: FunctionComponent = () => { const Table: FunctionComponent = () => {
const profiles = useProfilesContext(); const profiles = useLatestProfiles();
const languages = useEnabledLanguagesContext(); const languages = useLatestEnabledLanguages();
const nextProfileId = useMemo( const nextProfileId = useMemo(
() => () =>

View File

@ -139,8 +139,7 @@ export function Selector<
return ( return (
<CSelector <CSelector
{...selector} {...selector}
// TODO: Force as any value={value as SelectorValueType<T, M>}
defaultValue={value as any}
onChange={(v) => { onChange={(v) => {
v = beforeStaged ? beforeStaged(v) : v; v = beforeStaged ? beforeStaged(v) : v;
update(v, settingKey); update(v, settingKey);

View File

@ -10,7 +10,7 @@ export function useEnabledLanguages() {
const query = useLanguages(); const query = useLanguages();
const enabled = useMemo(() => { const enabled = useMemo(() => {
const data = const data: Language.Info[] =
query.data query.data
?.filter((v) => v.enabled) ?.filter((v) => v.enabled)
.map((v) => ({ code2: v.code2, name: v.name })) ?? []; .map((v) => ({ code2: v.code2, name: v.name })) ?? [];