fix(ui): improve QuotaSelector display of unlimited and singular valu…

…es (sct#1704)

src/components/QuotaSelector/index.tsx

@@ -2,8 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
- movieRequestLimit: '{quotaLimit} movie(s) per {quotaDays} day(s)',
- tvRequestLimit: '{quotaLimit} season(s) per {quotaDays} day(s)',
+ movieRequests:
+ '{quotaLimit} <quotaUnits>{movies} per {quotaDays} {days}</quotaUnits>',
+ tvRequests:
+ '{quotaLimit} <quotaUnits>{seasons} per {quotaDays} {days}</quotaUnits>',
+ movies: '{count, plural, one {movie} other {movies}}',
+ seasons: '{count, plural, one {season} other {seasons}}',
+ days: '{count, plural, one {day} other {days}}',
  unlimited: 'Unlimited',
 });
 
@@ -47,9 +52,7 @@ const QuotaSelector: React.FC<QuotaSelectorProps> = ({
  return (
  <div className={`${isDisabled ? 'opacity-50' : ''}`}>
  {intl.formatMessage(
- mediaType === 'movie'
- ? messages.movieRequestLimit
- : messages.tvRequestLimit,
+ mediaType === 'movie' ? messages.movieRequests : messages.tvRequests,
  {
  quotaLimit: (
  <select
@@ -82,6 +85,16 @@ const QuotaSelector: React.FC<QuotaSelectorProps> = ({
  ))}
  </select>
  ),
+ movies: intl.formatMessage(messages.movies, { count: quotaLimit }),
+ seasons: intl.formatMessage(messages.seasons, { count: quotaLimit }),
+ days: intl.formatMessage(messages.days, { count: quotaDays }),
+ quotaUnits: function quotaUnits(msg) {
+ return (
+ <span className={limitOverride || quotaLimit ? '' : 'hidden'}>
+ {msg}
+ </span>
+ );
+ },
  }
  )}
  </div>

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -42,7 +42,7 @@ const messages = defineMessages({
  originallanguageTip: 'Filter content by original language',
  movierequestlimit: 'Movie Request Limit',
  seriesrequestlimit: 'Series Request Limit',
- enableOverride: 'Enable Override',
+ enableOverride: 'Override Global Limit',
  applanguage: 'Display Language',
  languageDefault: 'Default ({language})',
 });

src/i18n/locale/en.json

@@ -145,8 +145,11 @@
  "components.PersonDetails.lifespan": "{birthdate} – {deathdate}",
  "components.PlexLoginButton.signingin": "Signing In…",
  "components.PlexLoginButton.signinwithplex": "Sign In",
- "components.QuotaSelector.movieRequestLimit": "{quotaLimit} movie(s) per {quotaDays} day(s)",
- "components.QuotaSelector.tvRequestLimit": "{quotaLimit} season(s) per {quotaDays} day(s)",
+ "components.QuotaSelector.days": "{count, plural, one {day} other {days}}",
+ "components.QuotaSelector.movieRequests": "{quotaLimit} <quotaUnits>{movies} per {quotaDays} {days}</quotaUnits>",
+ "components.QuotaSelector.movies": "{count, plural, one {movie} other {movies}}",
+ "components.QuotaSelector.seasons": "{count, plural, one {season} other {seasons}}",
+ "components.QuotaSelector.tvRequests": "{quotaLimit} <quotaUnits>{seasons} per {quotaDays} {days}</quotaUnits>",
  "components.QuotaSelector.unlimited": "Unlimited",
  "components.RegionSelector.regionDefault": "All Regions",
  "components.RegionSelector.regionServerDefault": "Default ({region})",
@@ -738,7 +741,7 @@
  "components.UserProfile.UserSettings.UserGeneralSettings.admin": "Admin",
  "components.UserProfile.UserSettings.UserGeneralSettings.applanguage": "Display Language",
  "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",
- "components.UserProfile.UserSettings.UserGeneralSettings.enableOverride": "Enable Override",
+ "components.UserProfile.UserSettings.UserGeneralSettings.enableOverride": "Override Global Limit",
  "components.UserProfile.UserSettings.UserGeneralSettings.general": "General",
  "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
  "components.UserProfile.UserSettings.UserGeneralSettings.languageDefault": "Default ({language})",