fix(ui): improve QuotaSelector display of unlimited and singular values (#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})",