fix: humanize duration in different locales

Author: Andrei Caleniuc

package-lock.json

@@ -81,7 +81,6 @@
     "@angular/platform-browser-dynamic": "14.2.12",
     "@angular/router": "14.2.12",
     "clipboard": "2.0.8",
-    "humanize-duration": "3.28.0",
     "lodash-es": "4.17.21",
     "luxon": "3.2.1",
     "object-hash": "2.2.0",
@@ -110,7 +109,6 @@
     "@types/chalk": "^2.2.0",
     "@types/clipboard": "2.0.7",
     "@types/faker": "4.1.5",
-    "@types/humanize-duration": "3.27.1",
     "@types/jasmine": "3.3.12",
     "@types/jasmine_dom_matchers": "^1.4.4",
     "@types/jasminewd2": "2.0.6",

package.json

@@ -156,4 +156,35 @@ describe('Directive: UiSecondFormat', () => {
             expect(enTooltip).toBe(jaTooltip);
         });
     });
+
+    describe('humanize in different locales', () => {
+        [
+            {
+                code: 'es-mx',
+                unit: ' segundos',
+            },
+            {
+                code: 'pt-br',
+                unit: ' segundos',
+            },
+            {
+                code: 'zh-cn',
+                unit: '秒钟',
+            },
+        ].forEach(locale => {
+            it(`should humanize in ${locale.code}`, async () => {
+                Settings.defaultLocale = locale.code;
+
+                component.seconds = 40;
+                fixture.detectChanges();
+
+                const text = fixture.debugElement.query(By.directive(UiSecondFormatDirective));
+
+                (options.redraw$ as BehaviorSubject<void>).next();
+
+                fixture.detectChanges();
+                expect(text.nativeElement.innerText).toBe(`40${locale.unit}`);
+            });
+        });
+    });
 });

projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.spec.ts

@@ -1,5 +1,7 @@
-import humanizeDuration from 'humanize-duration';
-import { Duration } from 'luxon';
+import {
+    Duration,
+    DurationObjectUnits,
+} from 'luxon';
 import {
     BehaviorSubject,
     merge,
@@ -77,6 +79,8 @@ export class UiSecondFormatDirective {
 
     private _seconds$ = new BehaviorSubject<number | null>(null);
 
+    private _units: (keyof DurationObjectUnits)[] = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
+
     /**
      * @ignore
      */
@@ -118,11 +122,11 @@ export class UiSecondFormatDirective {
             return '';
         }
 
-        return humanizeDuration(duration.toMillis(), {
-                language: duration.locale,
-                // Max number of units is set to 1 to mimic what moment does
-                largest: 1,
-            });
+        const rescaledDuration = duration.rescale();
+
+        const largestUnit = this._getDurationLargestUnit(rescaledDuration);
+
+        return Duration.fromObject({ [largestUnit]: rescaledDuration[largestUnit] }).toHuman();
     };
 
     private _mapDurationToTooltip = (duration: Duration | null) => {
@@ -132,4 +136,8 @@ export class UiSecondFormatDirective {
 
         return duration.shiftTo('hours', 'minutes', 'seconds').toISO();
     };
+
+    private _getDurationLargestUnit(duration: Duration) {
+        return this._units.find(unit => !!duration[unit]) ?? 'seconds';
+    }
 }

projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts

@@ -39,7 +39,6 @@
         "@angular/platform-browser-dynamic": ">=14.1.0",
         "@angular/router": ">=14.1.0",
         "clipboard": "^2.0.8",
-        "humanize-duration": "^3.28.0",
         "lodash-es": "^4.17.21",
         "luxon": "^3.2.1",
         "object-hash": "^2.2.0",