Translate Frontend Utilities

(cherry picked from commit 3f0e8ce8634b085d49638d11df96109797ac9cef)

Closes #9129

frontend/src/Utilities/Date/formatDateTime.js

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import translate from 'Utilities/String/translate';
 import formatTime from './formatTime';
 import isToday from './isToday';
 import isTomorrow from './isTomorrow';
@@ -10,15 +11,15 @@ function getRelativeDay(date, includeRelativeDate) {
   }
 
   if (isYesterday(date)) {
-    return 'Yesterday, ';
+    return translate('Yesterday');
   }
 
   if (isToday(date)) {
-    return 'Today, ';
+    return translate('Today');
   }
 
   if (isTomorrow(date)) {
-    return 'Tomorrow, ';
+    return translate('Tomorrow');
   }
 
   return '';
@@ -33,7 +34,10 @@ function formatDateTime(date, dateFormat, timeFormat, { includeSeconds = false,
   const formattedDate = moment(date).format(dateFormat);
   const formattedTime = formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds });
 
-  return `${relativeDay}${formattedDate} ${formattedTime}`;
+  if (relativeDay) {
+    return translate('FormatDateTimeRelative', { relativeDay, formattedDate, formattedTime });
+  }
+  return translate('FormatDateTime', { formattedDate, formattedTime });
 }
 
 export default formatDateTime;

frontend/src/Utilities/Date/formatRuntime.js

@@ -1,15 +0,0 @@
-function formatRuntime(minutes, format) {
-  if (!minutes) {
-    return (format === 'hoursMinutes') ? '0m' : '0 mins';
-  }
-
-  if (format === 'minutes') {
-    return `${minutes} mins`;
-  }
-
-  const movieHours = Math.floor(minutes / 60);
-  const movieMinutes = (minutes <= 59) ? minutes : minutes % 60;
-  return `${((movieHours > 0) ? `${movieHours}h ` : '') + movieMinutes}m`;
-}
-
-export default formatRuntime;

frontend/src/Utilities/Date/formatRuntime.ts

@@ -0,0 +1,27 @@
+import translate from 'Utilities/String/translate';
+
+function formatRuntime(runtime: number, format = 'hoursMinutes') {
+  if (!runtime) {
+    return format === 'hoursMinutes' ? '0m' : '0 mins';
+  }
+
+  if (format === 'minutes') {
+    return `${runtime} mins`;
+  }
+
+  const hours = Math.floor(runtime / 60);
+  const minutes = runtime % 60;
+  const result = [];
+
+  if (hours) {
+    result.push(translate('FormatRuntimeHours', { hours }));
+  }
+
+  if (minutes) {
+    result.push(translate('FormatRuntimeMinutes', { minutes }));
+  }
+
+  return result.join(' ');
+}
+
+export default formatRuntime;

frontend/src/Utilities/Date/formatShortTimeSpan.js

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import translate from 'Utilities/String/translate';
 
 function formatShortTimeSpan(timeSpan) {
   if (!timeSpan) {
@@ -12,14 +13,14 @@ function formatShortTimeSpan(timeSpan) {
   const seconds = Math.floor(duration.asSeconds());
 
   if (hours > 0) {
-    return `${hours} hour(s)`;
+    return translate('FormatShortTimeSpanHours', { hours });
   }
 
   if (minutes > 0) {
-    return `${minutes} minute(s)`;
+    return translate('FormatShortTimeSpanMinutes', { minutes });
   }
 
-  return `${seconds} second(s)`;
+  return translate('FormatShortTimeSpanSeconds', { seconds });
 }
 
 export default formatShortTimeSpan;

frontend/src/Utilities/Date/formatTimeSpan.js

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import padNumber from 'Utilities/Number/padNumber';
+import translate from 'Utilities/String/translate';
 
 function formatTimeSpan(timeSpan) {
   if (!timeSpan) {
@@ -16,7 +17,7 @@ function formatTimeSpan(timeSpan) {
   const time = `${hours}:${minutes}:${seconds}`;
 
   if (days > 0) {
-    return `${days}d ${time}`;
+    return translate('FormatTimeSpanDays', { days, time });
   }
 
   return time;

frontend/src/Utilities/Number/formatAge.js

@@ -1,3 +1,5 @@
+import translate from 'Utilities/String/translate';
+
 function formatAge(age, ageHours, ageMinutes) {
   age = Math.round(age);
   ageHours = parseFloat(ageHours);
@@ -5,13 +7,13 @@ function formatAge(age, ageHours, ageMinutes) {
 
   if (age < 2 && ageHours) {
     if (ageHours < 2 && !!ageMinutes) {
-      return `${ageMinutes.toFixed(0)} ${ageHours === 1 ? 'minute' : 'minutes'}`;
+      return `${ageMinutes.toFixed(0)} ${ageHours === 1 ? translate('FormatAgeMinute') : translate('FormatAgeMinutes')}`;
     }
 
-    return `${ageHours.toFixed(1)} ${ageHours === 1 ? 'hour' : 'hours'}`;
+    return `${ageHours.toFixed(1)} ${ageHours === 1 ? translate('FormatAgeHour') : translate('FormatAgeHours')}`;
   }
 
-  return `${age} ${age === 1 ? 'day' : 'days'}`;
+  return `${age} ${age === 1 ? translate('FormatAgeDay') : translate('FormatAgeDays')}`;
 }
 
 export default formatAge;

src/NzbDrone.Core/Localization/Core/en.json

@@ -418,6 +418,20 @@
   "ForMoreInformationOnTheIndividualImportListsClinkOnTheInfoButtons": "For more information on the individual import lists, click on the info buttons.",
   "ForMoreInformationOnTheIndividualIndexers": "For more information on the individual indexers, click on the info buttons.",
   "Forecast": "Forecast",
+  "FormatAgeDay": "day",
+  "FormatAgeDays": "days",
+  "FormatAgeHour": "hour",
+  "FormatAgeHours": "hours",
+  "FormatAgeMinute": "minute",
+  "FormatAgeMinutes": "minutes",
+  "FormatDateTime": "{formattedDate} {formattedTime}",
+  "FormatDateTimeRelative": "{relativeDay}, {formattedDate} {formattedTime}",
+  "FormatRuntimeHours": "{hours}h",
+  "FormatRuntimeMinutes": "{minutes}m",
+  "FormatShortTimeSpanHours": "{hours} hour(s)",
+  "FormatShortTimeSpanMinutes": "{minutes} minute(s)",
+  "FormatShortTimeSpanSeconds": "{seconds} second(s)",
+  "FormatTimeSpanDays": "{days}d {time}",
   "Formats": "Formats",
   "FreeSpace": "Free Space",
   "From": "from",