feat(i18n): convert to opaque keys (#1848)

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

@@ -1,6 +1,7 @@
 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 Text, translateText } from '@videojs/core/i18n';
+import { remainingSuffixText } from '@videojs/core/i18n/text/time';
 import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 import { isInteractiveActivation } from '@videojs/utils/dom';
 import { formatTimeAsPhrase } from '@videojs/utils/time';
@@ -23,7 +24,7 @@ export class TimeElement extends MediaElement {
 
   type: TimeType = TimeCore.defaultProps.type;
   negativeSign = TimeCore.defaultProps.negativeSign;
-  label = TimeCore.defaultProps.label;
+  label: Text | string = '';
   toggle = TimeCore.defaultProps.toggle;
 
   readonly #core = new TimeCore();
@@ -98,21 +99,20 @@ export class TimeElement extends MediaElement {
     const attrs = this.#core.getAttrs(state, this.type);
     applyElementProps(this, {
       ...attrs,
-      'aria-label': resolveTranslation(this.#i18n.value, attrs['aria-label'], this.#getLabelParams(state)),
+      'aria-label': translateText(attrs['aria-label'], this.#i18n.value, 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;
-    }
+    if (!params) return undefined;
+
+    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });
 
     return {
-      duration: resolveTranslation(this.#i18n.value, '{duration} remaining', {
-        duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale }),
-      }),
+      duration:
+        state.type === 'remaining' ? translateText(remainingSuffixText, this.#i18n.value, { duration }) : duration,
     };
   }