feat(packages): i18n (#1708)

packages/html/src/ui/time/time-element.ts

@@ -1,7 +1,12 @@
 import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';
 import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';
+import { resolveTranslation } from '@videojs/core/i18n';
 import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 import { isInteractiveActivation } from '@videojs/utils/dom';
+import { formatTimeAsPhrase } from '@videojs/utils/time';
+
+import { i18nContext } from '../../i18n/context';
+import { I18nController } from '../../i18n/controller';
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
 import { MediaElement } from '../media-element';
@@ -23,6 +28,7 @@ export class TimeElement extends MediaElement {
 
   readonly #core = new TimeCore();
   readonly #state = new PlayerController(this, playerContext, selectTime);
+  readonly #i18n = new I18nController(this, i18nContext);
 
   readonly #signSpan = document.createElement('span');
   readonly #textNode = document.createTextNode('');
@@ -89,10 +95,27 @@ export class TimeElement extends MediaElement {
     this.#signSpan.textContent = state.negative ? this.negativeSign : '';
     this.#textNode.textContent = state.text;
 
-    applyElementProps(this, this.#core.getAttrs(state, this.type));
+    const attrs = this.#core.getAttrs(state, this.type);
+    applyElementProps(this, {
+      ...attrs,
+      'aria-label': resolveTranslation(this.#i18n.value, attrs['aria-label'], this.#getLabelParams(state)),
+    });
     applyStateDataAttrs(this, state, TimeDataAttrs);
   }
 
+  #getLabelParams(state: TimeCore.State): { duration: string } | undefined {
+    const params = this.#core.getLabelParams(state);
+    if (!params || state.type !== 'remaining') {
+      return params;
+    }
+
+    return {
+      duration: resolveTranslation(this.#i18n.value, '{duration} remaining', {
+        duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale }),
+      }),
+    };
+  }
+
   #handleClick = (event: MouseEvent): void => {
     if (event.defaultPrevented || !this.toggle || !this.#state.value) return;
     this.#toggleType();
@@ -134,7 +157,6 @@ export class TimeElement extends MediaElement {
   #clearAttrs(): void {
     applyElementProps(this, {
       'aria-label': undefined,
-      'aria-valuetext': undefined,
       role: undefined,
       tabIndex: undefined,
       'data-type': undefined,