Add Translations to Settings Pages

frontend/src/Settings/Quality/Definition/QualityDefinition.js

@@ -8,6 +8,7 @@ import Popover from 'Components/Tooltip/Popover';
 import { kinds, tooltipPositions } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
 import roundNumber from 'Utilities/Number/roundNumber';
+import translate from 'Utilities/String/translate';
 import QualityDefinitionLimits from './QualityDefinitionLimits';
 import styles from './QualityDefinition.css';
 
@@ -186,13 +187,13 @@ class QualityDefinition extends Component {
     } = this.state;
 
     const minBytes = minSize * 1024 * 1024;
-    const minSixty = `${formatBytes(minBytes * 60)}/h`;
+    const minSixty = `${formatBytes(minBytes * 60)}/${translate('HourShorthand')}`;
 
     const preferredBytes = preferredSize * 1024 * 1024;
-    const preferredSixty = preferredBytes ? `${formatBytes(preferredBytes * 60)}/h` : 'Unlimited';
+    const preferredSixty = preferredBytes ? `${formatBytes(preferredBytes * 60)}/${translate('HourShorthand')}` : translate('Unlimited');
 
     const maxBytes = maxSize && maxSize * 1024 * 1024;
-    const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60)}/h` : 'Unlimited';
+    const maxSixty = maxBytes ? `${formatBytes(maxBytes * 60)}/${translate('HourShorthand')}` : translate('Unlimited');
 
     return (
       <div className={styles.qualityDefinition}>
@@ -231,11 +232,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.INFO}>{minSixty}</Label>
                 }
-                title="Minimum Limits"
+                title={translate('MinimumLimits')}
                 body={
                   <QualityDefinitionLimits
                     bytes={minBytes}
-                    message="No minimum for any runtime"
+                    message={translate('NoMinimumForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -247,11 +248,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.SUCCESS}>{preferredSixty}</Label>
                 }
-                title="Preferred Size"
+                title={translate('PreferredSize')}
                 body={
                   <QualityDefinitionLimits
                     bytes={preferredBytes}
-                    message="No limit for any runtime"
+                    message={translate('NoLimitForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -263,11 +264,11 @@ class QualityDefinition extends Component {
                 anchor={
                   <Label kind={kinds.WARNING}>{maxSixty}</Label>
                 }
-                title="Maximum Limits"
+                title={translate('MaximumLimits')}
                 body={
                   <QualityDefinitionLimits
                     bytes={maxBytes}
-                    message="No limit for any runtime"
+                    message={translate('NoLimitForAnyRuntime')}
                   />
                 }
                 position={tooltipPositions.BOTTOM}
@@ -280,7 +281,7 @@ class QualityDefinition extends Component {
           advancedSettings &&
             <div className={styles.megabytesPerMinute}>
               <div>
-                Min
+                {translate('Min')}
 
                 <NumberInput
                   className={styles.sizeInput}
@@ -295,7 +296,7 @@ class QualityDefinition extends Component {
               </div>
 
               <div>
-                Preferred
+                {translate('Preferred')}
 
                 <NumberInput
                   className={styles.sizeInput}
@@ -310,7 +311,7 @@ class QualityDefinition extends Component {
               </div>
 
               <div>
-                Max
+                {translate('Max')}
 
                 <NumberInput
                   className={styles.sizeInput}

frontend/src/Settings/Quality/Definition/QualityDefinitionLimits.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 
 function QualityDefinitionLimits(props) {
   const {
@@ -13,14 +14,20 @@ function QualityDefinitionLimits(props) {
   }
 
   const thirty = formatBytes(bytes * 30);
-  const fourtyFive = formatBytes(bytes * 45);
+  const fortyFive = formatBytes(bytes * 45);
   const sixty = formatBytes(bytes * 60);
 
   return (
     <div>
-      <div>30 Minutes: {thirty}</div>
-      <div>45 Minutes: {fourtyFive}</div>
-      <div>60 Minutes: {sixty}</div>
+      <div>
+        {translate('MinutesThirty', { thirty })}
+      </div>
+      <div>
+        {translate('MinutesFortyFive', { fortyFive })}
+      </div>
+      <div>
+        {translate('MinutesSixty', { sixty })}
+      </div>
     </div>
   );
 }

frontend/src/Settings/Quality/Definition/QualityDefinitions.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
+import translate from 'Utilities/String/translate';
 import QualityDefinitionConnector from './QualityDefinitionConnector';
 import styles from './QualityDefinitions.css';
 
@@ -18,20 +19,26 @@ class QualityDefinitions extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend="Quality Definitions">
+      <FieldSet legend={translate('QualityDefinitions')}>
         <PageSectionContent
-          errorMessage="Unable to load Quality Definitions"
+          errorMessage={translate('QualityDefinitionsLoadError')}
           {...otherProps}
         >
           <div className={styles.header}>
-            <div className={styles.quality}>Quality</div>
-            <div className={styles.title}>Title</div>
-            <div className={styles.sizeLimit}>Size Limit</div>
+            <div className={styles.quality}>
+              {translate('Quality')}
+            </div>
+            <div className={styles.title}>
+              {translate('Title')}
+            </div>
+            <div className={styles.sizeLimit}>
+              {translate('SizeLimit')}
+            </div>
 
             {
               advancedSettings ?
                 <div className={styles.megabytesPerMinute}>
-                  Megabytes Per Minute
+                  {translate('MegabytesPerMinute')}
                 </div> :
                 null
             }
@@ -53,7 +60,7 @@ class QualityDefinitions extends Component {
 
           <div className={styles.sizeLimitHelpTextContainer}>
             <div className={styles.sizeLimitHelpText}>
-              Limits are automatically adjusted for the series runtime and number of episodes in the file.
+              {translate('QualityLimitsHelpText')}
             </div>
           </div>
         </PageSectionContent>