Localize durations using Intl.NumberFormat (#18067)

src/common/datetime/format_duration.ts

@@ -1,8 +1,13 @@
 import { HaDurationData } from "../../components/ha-duration-input";
+import { FrontendLocaleData } from "../../data/translation";
+import "../../resources/intl-polyfill";
 
 const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
 
-export const formatDuration = (duration: HaDurationData) => {
+export const formatDuration = (
+  locale: FrontendLocaleData,
+  duration: HaDurationData
+) => {
   const d = duration.days || 0;
   const h = duration.hours || 0;
   const m = duration.minutes || 0;
@@ -10,7 +15,11 @@ export const formatDuration = (duration: HaDurationData) => {
   const ms = duration.milliseconds || 0;
 
   if (d > 0) {
-    return `${d} day${d === 1 ? "" : "s"} ${h}:${leftPad(m)}:${leftPad(s)}`;
+    return `${Intl.NumberFormat(locale.language, {
+      style: "unit",
+      unit: "day",
+      unitDisplay: "long",
+    }).format(d)} ${h}:${leftPad(m)}:${leftPad(s)}`;
   }
   if (h > 0) {
     return `${h}:${leftPad(m)}:${leftPad(s)}`;
@@ -19,10 +28,18 @@ export const formatDuration = (duration: HaDurationData) => {
     return `${m}:${leftPad(s)}`;
   }
   if (s > 0) {
-    return `${s} second${s === 1 ? "" : "s"}`;
+    return Intl.NumberFormat(locale.language, {
+      style: "unit",
+      unit: "second",
+      unitDisplay: "long",
+    }).format(s);
   }
   if (ms > 0) {
-    return `${ms} millisecond${ms === 1 ? "" : "s"}`;
+    return Intl.NumberFormat(locale.language, {
+      style: "unit",
+      unit: "millisecond",
+      unitDisplay: "long",
+    }).format(ms);
   }
   return null;
 };

src/data/automation_i18n.ts

@@ -29,14 +29,17 @@ const triggerTranslationBaseKey =
 const conditionsTranslationBaseKey =
   "ui.panel.config.automation.editor.conditions.type";
 
-const describeDuration = (forTime: number | string | ForDict) => {
+const describeDuration = (
+  locale: FrontendLocaleData,
+  forTime: number | string | ForDict
+) => {
   let duration: string | null;
   if (typeof forTime === "number") {
     duration = secondsToDuration(forTime);
   } else if (typeof forTime === "string") {
     duration = forTime;
   } else {
-    duration = formatDuration(forTime);
+    duration = formatDuration(locale, forTime);
   }
   return duration;
 };
@@ -150,7 +153,9 @@ const tryDescribeTrigger = (
         )
       : undefined;
 
-    const duration = trigger.for ? describeDuration(trigger.for) : undefined;
+    const duration = trigger.for
+      ? describeDuration(hass.locale, trigger.for)
+      : undefined;
 
     if (trigger.above && trigger.below) {
       return hass.localize(
@@ -322,7 +327,7 @@ const tryDescribeTrigger = (
     }
 
     if (trigger.for) {
-      const duration = describeDuration(trigger.for);
+      const duration = describeDuration(hass.locale, trigger.for);
       if (duration) {
         base += ` for ${duration}`;
       }
@@ -573,7 +578,7 @@ const tryDescribeTrigger = (
   if (trigger.platform === "template") {
     let duration = "";
     if (trigger.for) {
-      duration = describeDuration(trigger.for) ?? "";
+      duration = describeDuration(hass.locale, trigger.for) ?? "";
     }
 
     return hass.localize(
@@ -827,7 +832,7 @@ const tryDescribeCondition = (
     base += ` ${statesString}`;
 
     if (condition.for) {
-      const duration = describeDuration(condition.for);
+      const duration = describeDuration(hass.locale, condition.for);
       if (duration) {
         base += ` for ${duration}`;
       }

src/data/script_i18n.ts

@@ -213,7 +213,7 @@ const tryDescribeAction = <T extends ActionType>(
       duration = hass.localize(
         `${actionTranslationBaseKey}.delay.description.duration_string`,
         {
-          string: formatDuration(config.delay),
+          string: formatDuration(hass.locale, config.delay),
         }
       );
     } else {

src/panels/mailbox/ha-panel-mailbox.ts

@@ -19,6 +19,7 @@ import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import { haStyle } from "../../resources/styles";
 import "../../components/ha-top-app-bar-fixed";
+import { formatDuration } from "../../common/datetime/format_duration";
 
 let registeredDialog = false;
 
@@ -89,11 +90,9 @@ class HaPanelMailbox extends LitElement {
                   <div class="row">
                     <div>${message.caller}</div>
                     <div class="tip">
-                      ${this.hass.localize(
+                      ${formatDuration(this.hass.locale, {
-                        "ui.duration.second",
+                        seconds: message.duration,
-                        "count",
+                      })}
-                        message.duration
-                      )}
                     </div>
                   </div>
                   <div secondary>

src/translations/en.json

@@ -1462,13 +1462,6 @@
         "nameservers": "Name Servers: {nameservers}"
       }
     },
-    "duration": {
-      "second": "{count} {count, plural,\n  one {second}\n  other {seconds}\n}",
-      "minute": "{count} {count, plural,\n  one {minute}\n  other {minutes}\n}",
-      "hour": "{count} {count, plural,\n  one {hour}\n  other {hours}\n}",
-      "day": "{count} {count, plural,\n  one {day}\n  other {days}\n}",
-      "week": "{count} {count, plural,\n  one {week}\n  other {weeks}\n}"
-    },
     "weekdays": {
       "monday": "Monday",
       "tuesday": "Tuesday",