feat: [a11y and i18n] Translate time phrases (#1232)

Author: manuhabitela

src/js/lang/en.ts

@@ -66,6 +66,15 @@ export const En = {
     'An unsupported error occurred. The server or network failed, or your browser does not support this format.',
   'The media is encrypted and there are no keys to decrypt it.':
     'The media is encrypted and there are no keys to decrypt it.',
+  hour: 'hour',
+  hours: 'hours',
+  minute: 'minute',
+  minutes: 'minutes',
+  second: 'second',
+  seconds: 'seconds',
+  '{time} remaining': '{time} remaining',
+  '{currentTime} of {totalTime}': '{currentTime} of {totalTime}',
+  'video not loaded, unknown time.': 'video not loaded, unknown time.',
 } as const;
 
 export type TranslateKeys = keyof typeof En;

src/js/lang/es.ts

@@ -68,6 +68,15 @@ export const Es: TranslateDictionary = {
     'Ocurrió un error de incompatibilidad. El servidor o la red fallaron, o tu navegador no admite este formato.',
   'The media is encrypted and there are no keys to decrypt it.':
     'El contenido está cifrado y no hay claves disponibles para descifrarlo.',
+  hour: 'hora',
+  hours: 'horas',
+  minute: 'minuto',
+  minutes: 'minutos',
+  second: 'segundo',
+  seconds: 'segundos',
+  '{time} remaining': '{time} restante',
+  '{currentTime} of {totalTime}': '{currentTime} de {totalTime}',
+  'video not loaded, unknown time.': 'video no cargado, tiempo desconocido.',
 };
 
 addTranslation('es', Es);

src/js/lang/fr.ts

@@ -68,6 +68,15 @@ export const Fr: TranslateDictionary = {
     'Une erreur non supportée s’est produite. Le serveur ou le réseau a échoué, ou votre navigateur ne prend pas en charge ce format.',
   'The media is encrypted and there are no keys to decrypt it.':
     'Le média est chiffré et il n’y a pas de clés pour le déchiffrer.',
+  hour: 'heure',
+  hours: 'heures',
+  minute: 'minute',
+  minutes: 'minutes',
+  second: 'seconde',
+  seconds: 'secondes',
+  '{time} remaining': '{time} restant',
+  '{currentTime} of {totalTime}': '{currentTime} sur {totalTime}',
+  'video not loaded, unknown time.': 'vidéo non chargée, durée inconnue.',
 };
 
 addTranslation('fr', Fr);

src/js/lang/pt.ts

@@ -68,5 +68,14 @@ export const Pt: TranslateDictionary = {
     'Ocorreu um erro de incompatibilidade. O servidor ou a rede falharam, ou seu navegador não suporta este formato.',
   'The media is encrypted and there are no keys to decrypt it.':
     'O conteúdo está criptografado e não há chaves disponíveis para descriptografá-lo.',
+  hour: 'hora',
+  hours: 'horas',
+  minute: 'minuto',
+  minutes: 'minutos',
+  second: 'segundo',
+  seconds: 'segundos',
+  '{time} remaining': '{time} restante',
+  '{currentTime} of {totalTime}': '{currentTime} de {totalTime}',
+  'video not loaded, unknown time.': 'vídeo não carregado, tempo desconhecido.',
 };
 addTranslation('pt', Pt);

src/js/lang/zh-CN.ts

@@ -68,5 +68,14 @@ export const ZhCn: TranslateDictionary = {
     '发生未支持的错误，可能是服务器或网络故障，或浏览器不支持该格式。',
   'The media is encrypted and there are no keys to decrypt it.':
     '媒体已加密，缺少解密密钥。',
+  hour: '小时',
+  hours: '小时',
+  minute: '分钟',
+  minutes: '分钟',
+  second: '秒',
+  seconds: '秒',
+  '{time} remaining': '剩余 {time}',
+  '{currentTime} of {totalTime}': '{currentTime} / {totalTime}',
+  'video not loaded, unknown time.': '视频未加载，时间未知。',
 };
 addTranslation('zh-CN', ZhCn);

src/js/lang/zh-TW.ts

@@ -68,6 +68,15 @@ export const ZhTw: TranslateDictionary = {
     '發生不支援的錯誤。伺服器或網路可能有問題，或瀏覽器不支援這個格式。',
   'The media is encrypted and there are no keys to decrypt it.':
     '媒體已加密，但找不到解密金鑰。',
+  hour: '小時',
+  hours: '小時',
+  minute: '分鐘',
+  minutes: '分鐘',
+  second: '秒',
+  seconds: '秒',
+  '{time} remaining': '剩餘 {time}',
+  '{currentTime} of {totalTime}': '{currentTime} / {totalTime}',
+  'video not loaded, unknown time.': '影片未載入，時間未知。',
 };
 
 addTranslation('zh-TW', ZhTw);

src/js/media-time-display.ts

@@ -63,7 +63,7 @@ const updateAriaValueText = (el: MediaTimeDisplay): void => {
     endTime = seekableEnd;
   }
   if (currentTime == null || endTime === null) {
-    el.setAttribute('aria-valuetext', DEFAULT_MISSING_TIME_PHRASE);
+    el.setAttribute('aria-valuetext', t(DEFAULT_MISSING_TIME_PHRASE));
     return;
   }
 
@@ -76,7 +76,10 @@ const updateAriaValueText = (el: MediaTimeDisplay): void => {
     return;
   }
   const totalTimePhrase = formatAsTimePhrase(endTime);
-  const fullPhrase = `${currentTimePhrase} of ${totalTimePhrase}`;
+  const fullPhrase = t('{currentTime} of {totalTime}', {
+    currentTime: currentTimePhrase,
+    totalTime: totalTimePhrase,
+  });
   el.setAttribute('aria-valuetext', fullPhrase);
 };
 

src/js/media-time-range.ts

@@ -35,8 +35,11 @@ const updateAriaValueText = (el: any): void => {
   const currentTimePhrase = formatAsTimePhrase(+calcTimeFromRangeValue(el));
   const totalTimePhrase = formatAsTimePhrase(+el.mediaSeekableEnd);
   const fullPhrase = !(currentTimePhrase && totalTimePhrase)
-    ? DEFAULT_MISSING_TIME_PHRASE
-    : `${currentTimePhrase} of ${totalTimePhrase}`;
+    ? t(DEFAULT_MISSING_TIME_PHRASE)
+    : t('{currentTime} of {totalTime}', {
+        currentTime: currentTimePhrase,
+        totalTime: totalTimePhrase,
+      });
   range.setAttribute('aria-valuetext', fullPhrase);
 };
 

src/js/utils/time.ts

@@ -1,4 +1,5 @@
 import { isValidNumber } from './utils.js';
+import { t } from './i18n.js';
 
 const UnitLabels = [
   {
@@ -13,12 +14,13 @@ const UnitLabels = [
     singular: 'second',
     plural: 'seconds',
   },
-];
+] as const;
+
 const toTimeUnitPhrase = (timeUnitValue, unitIndex) => {
   const unitLabel =
     timeUnitValue === 1
-      ? UnitLabels[unitIndex].singular
-      : UnitLabels[unitIndex].plural;
+      ? t(UnitLabels[unitIndex].singular)
+      : t(UnitLabels[unitIndex].plural);
 
   return `${timeUnitValue} ${unitLabel}`;
 };
@@ -52,9 +54,11 @@ export const formatAsTimePhrase = (seconds) => {
     .join(', ');
 
   // If the time was negative, assume it represents some remaining amount of time/"count down".
-  const negativeSuffix = negative ? ' remaining' : '';
+  if (negative) {
+    return t('{time} remaining', { time: timeString });
+  }
 
-  return `${timeString}${negativeSuffix}`;
+  return timeString;
 };
 
 /**