fix(ui): for server default options, display "All" region/language option instead of empty string (#1042)

pull/1035/head
TheCatLady 3 years ago committed by GitHub
parent 3f9a116b17
commit 3fed26cfbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -9,7 +9,7 @@ import 'country-flag-icons/3x2/flags.css';
const messages = defineMessages({ const messages = defineMessages({
regionDefault: 'All Regions', regionDefault: 'All Regions',
regionServerDefault: '{applicationTitle} Default ({region})', regionServerDefault: 'Default ({region})',
}); });
interface RegionSelectorProps { interface RegionSelectorProps {
@ -38,6 +38,10 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
[] []
); );
const defaultRegionNameFallback =
regions?.find((region) => region.iso_3166_1 === currentSettings.region)
?.english_name ?? currentSettings.region;
useEffect(() => { useEffect(() => {
if (regions && value) { if (regions && value) {
if (value === 'all') { if (value === 'all') {
@ -65,15 +69,21 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
<div className="relative"> <div className="relative">
<span className="inline-block w-full rounded-md shadow-sm"> <span className="inline-block w-full rounded-md shadow-sm">
<Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"> <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
{selectedRegion && {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
selectedRegion.iso_3166_1 !== 'all' && (isUserSetting &&
hasFlag(selectedRegion?.iso_3166_1) && ( !selectedRegion &&
<span className="h-4 mr-2 overflow-hidden text-base leading-4"> currentSettings.region &&
<span hasFlag(currentSettings.region))) && (
className={`flag:${selectedRegion?.iso_3166_1}`} <span className="h-4 mr-2 overflow-hidden text-base leading-4">
/> <span
</span> className={`flag:${
)} selectedRegion
? selectedRegion.iso_3166_1
: currentSettings.region
}`}
/>
</span>
)}
<span className="block truncate"> <span className="block truncate">
{selectedRegion && selectedRegion.iso_3166_1 !== 'all' {selectedRegion && selectedRegion.iso_3166_1 !== 'all'
? intl.formatDisplayName(selectedRegion.iso_3166_1, { ? intl.formatDisplayName(selectedRegion.iso_3166_1, {
@ -82,12 +92,11 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
}) ?? selectedRegion.english_name }) ?? selectedRegion.english_name
: isUserSetting && selectedRegion?.iso_3166_1 !== 'all' : isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
? intl.formatMessage(messages.regionServerDefault, { ? intl.formatMessage(messages.regionServerDefault, {
applicationTitle: currentSettings.applicationTitle,
region: currentSettings.region region: currentSettings.region
? intl.formatDisplayName(currentSettings.region, { ? intl.formatDisplayName(currentSettings.region, {
type: 'region', type: 'region',
fallback: 'none', fallback: 'none',
}) ?? currentSettings.region }) ?? defaultRegionNameFallback
: intl.formatMessage(messages.regionDefault), : intl.formatMessage(messages.regionDefault),
}) })
: intl.formatMessage(messages.regionDefault)} : intl.formatMessage(messages.regionDefault)}
@ -130,16 +139,23 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
active active
? 'text-white bg-indigo-600' ? 'text-white bg-indigo-600'
: 'text-gray-300' : 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4`} } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
> >
<span className="mr-2 text-base">
<span
className={
hasFlag(currentSettings.region)
? `flag:${currentSettings.region}`
: 'pr-6'
}
/>
</span>
<span <span
className={`${ className={`${
selected ? 'font-semibold' : 'font-normal' selected ? 'font-semibold' : 'font-normal'
} block truncate`} } block truncate`}
> >
{intl.formatMessage(messages.regionServerDefault, { {intl.formatMessage(messages.regionServerDefault, {
applicationTitle:
currentSettings.applicationTitle,
region: currentSettings.region region: currentSettings.region
? intl.formatDisplayName( ? intl.formatDisplayName(
currentSettings.region, currentSettings.region,
@ -147,7 +163,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
type: 'region', type: 'region',
fallback: 'none', fallback: 'none',
} }
) ?? currentSettings.region ) ?? defaultRegionNameFallback
: intl.formatMessage(messages.regionDefault), : intl.formatMessage(messages.regionDefault),
})} })}
</span> </span>

@ -30,7 +30,7 @@ const messages = defineMessages({
originallanguageTip: originallanguageTip:
'Filter content by original language (only applies to the "Popular" and "Upcoming" categories)', 'Filter content by original language (only applies to the "Popular" and "Upcoming" categories)',
originalLanguageDefault: 'All Languages', originalLanguageDefault: 'All Languages',
languageServerDefault: '{applicationTitle} Default ({language})', languageServerDefault: 'Default ({language})',
}); });
const UserGeneralSettings: React.FC = () => { const UserGeneralSettings: React.FC = () => {
@ -61,6 +61,11 @@ const UserGeneralSettings: React.FC = () => {
return <Error statusCode={500} />; return <Error statusCode={500} />;
} }
const defaultLanguageNameFallback =
languages.find(
(language) => language.iso_639_1 === currentSettings.originalLanguage
)?.english_name ?? currentSettings.originalLanguage;
return ( return (
<> <>
<div className="mb-6"> <div className="mb-6">
@ -167,15 +172,17 @@ const UserGeneralSettings: React.FC = () => {
> >
<option value=""> <option value="">
{intl.formatMessage(messages.languageServerDefault, { {intl.formatMessage(messages.languageServerDefault, {
applicationTitle: currentSettings.applicationTitle, language: currentSettings.originalLanguage
language: ? intl.formatDisplayName(
intl.formatDisplayName( currentSettings.originalLanguage,
currentSettings.originalLanguage, {
{ type: 'language',
type: 'language', fallback: 'none',
fallback: 'none', }
} ) ?? defaultLanguageNameFallback
) ?? currentSettings.originalLanguage, : intl.formatMessage(
messages.originalLanguageDefault
),
})} })}
</option> </option>
<option value="all"> <option value="all">

@ -139,7 +139,7 @@
"components.PlexLoginButton.signingin": "Signing in…", "components.PlexLoginButton.signingin": "Signing in…",
"components.PlexLoginButton.signinwithplex": "Sign In", "components.PlexLoginButton.signinwithplex": "Sign In",
"components.RegionSelector.regionDefault": "All Regions", "components.RegionSelector.regionDefault": "All Regions",
"components.RegionSelector.regionServerDefault": "{applicationTitle} Default ({region})", "components.RegionSelector.regionServerDefault": "Default ({region})",
"components.RequestBlock.profilechanged": "Quality Profile", "components.RequestBlock.profilechanged": "Quality Profile",
"components.RequestBlock.requestoverrides": "Request Overrides", "components.RequestBlock.requestoverrides": "Request Overrides",
"components.RequestBlock.rootfolder": "Root Folder", "components.RequestBlock.rootfolder": "Root Folder",
@ -680,7 +680,7 @@
"components.UserProfile.ProfileHeader.settings": "Edit Settings", "components.UserProfile.ProfileHeader.settings": "Edit Settings",
"components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name", "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",
"components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings", "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
"components.UserProfile.UserSettings.UserGeneralSettings.languageServerDefault": "{applicationTitle} Default ({language})", "components.UserProfile.UserSettings.UserGeneralSettings.languageServerDefault": "Default ({language})",
"components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User", "components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User",
"components.UserProfile.UserSettings.UserGeneralSettings.originalLanguageDefault": "All Languages", "components.UserProfile.UserSettings.UserGeneralSettings.originalLanguageDefault": "All Languages",
"components.UserProfile.UserSettings.UserGeneralSettings.originallanguage": "Discover Language", "components.UserProfile.UserSettings.UserGeneralSettings.originallanguage": "Discover Language",

Loading…
Cancel
Save