Add multi language support for labels (#1071)

![Screenshot 2025-02-11 at 3 09
23 PM](https://github.com/user-attachments/assets/5a65588a-41a6-4fef-90ea-e1b5c32911cb)

Add multi language support for labels by: 

- Create a Translations Helper that:

   - Read language of the browser 
   - Set language for the browser or set english as default

- Add string languages files for:

  - English (Default)
  - Spanish
  - Portuguese 
  - French

---------

Co-authored-by: Wesley Luyten <[email protected]>

Author: ronalduQualabs

docs/src/pages/landing/shared/data.tsx

@@ -17,7 +17,7 @@ import {
 } from "media-chrome/react";
 import type { MediaChromeListItem } from "../../../types";
 // @ts-ignore
-import { labels, timeUtils } from "media-chrome";
+import { timeUtils, t } from "media-chrome";
 
 const { formatAsTimePhrase } = timeUtils;
 
@@ -29,7 +29,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaController,
     a11y: {
       role: "region",
-      "aria-label": labels.VIDEO_PLAYER(),
+      "aria-label": t("video player"),
     },
   },
   {
@@ -43,7 +43,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaPlayButton,
     a11y: {
       role: "button",
-      "aria-label": labels.PLAY(),
+      "aria-label": t("play"),
     },
   },
   {
@@ -52,7 +52,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaSeekForwardButton,
     a11y: {
       role: "button",
-      "aria-label": labels.SEEK_FORWARD_N_SECS({ seekOffset: 30 }),
+      "aria-label": t("seek forward {seekOffset} seconds", { seekOffset: 30 }),
     },
   },
   {
@@ -61,7 +61,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaSeekBackwardButton,
     a11y: {
       role: "button",
-      "aria-label": labels.SEEK_BACK_N_SECS({ seekOffset: 30 }),
+      "aria-label": t("seek back {seekOffset} seconds", { seekOffset: 30 }),
     },
   },
   {
@@ -70,7 +70,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaMuteButton,
     a11y: {
       role: "button",
-      "aria-label": labels.MUTE(),
+      "aria-label": t("mute"),
     },
   },
   {
@@ -79,7 +79,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaVolumeRange,
     a11y: {
       role: "slider",
-      "aria-label": labels.VOLUME(),
+      "aria-label": t("volume"),
       "aria-valuetext": `${65}%`,
     },
   },
@@ -90,7 +90,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaTimeRange,
     a11y: {
       role: "slider",
-      "aria-label": labels.SEEK(),
+      "aria-label": t("seek"),
       "aria-valuetext": `${formatAsTimePhrase(-234)} of ${formatAsTimePhrase(
         360
       )}`,
@@ -109,7 +109,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     a11y: {
       role: "slider",
       // NOTE: Should add a label for media-time-display in media-chrome!
-      "aria-label": labels.PLAYBACK_TIME(),
+      "aria-label": t("playback time"),
       "aria-valuetext": `${formatAsTimePhrase(-234)} of ${formatAsTimePhrase(
         360
       )}`,
@@ -122,7 +122,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaCaptionsButton,
     a11y: {
       role: "switch",
-      "aria-label": labels.CLOSED_CAPTIONS(),
+      "aria-label": t("closed captions"),
     },
   },
   {
@@ -131,7 +131,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaPlaybackRateButton,
     a11y: {
       role: "button",
-      "aria-label": labels.PLAYBACK_RATE({ playbackRate: 1 }),
+      "aria-label": t("Playback rate {playbackRate}", { playbackRate: 1 }),
     },
   },
   {
@@ -141,7 +141,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaPipButton,
     a11y: {
       role: "button",
-      "aria-label": labels.ENTER_PIP(),
+      "aria-label": t("Enter picture in picture mode"),
     },
   },
   {
@@ -150,7 +150,7 @@ const mediaChromeListItems: MediaChromeListItem[] = [
     component: MediaFullscreenButton,
     a11y: {
       role: "button",
-      "aria-label": labels.ENTER_FULLSCREEN(),
+      "aria-label": t("enter fullscreen mode"),
     },
   },
 ];

docs/src/types/index.d.ts

@@ -1,24 +1,5 @@
-// declare module 'media-chrome/dist/labels/labels' {
-//   export interface nouns {
-//       [k: string]: function({ [k: string]: any }): string;
-//   };
-//   export interface verbs {
-//       [k: string]: function({ [k: string]: any }): string;
-//   };
-// }
+
 declare module "media-chrome" {
-  type labels = {
-    nouns: {
-      [k: string]: (
-        x?: Partial<{ seekOffset: number; playbackRate: number }>
-      ) => string;
-    };
-    verbs: {
-      [k: string]: (
-        x?: Partial<{ seekOffset: number; playbackRate: number }>
-      ) => string;
-    };
-  };
 }
 
 export type ARIARole =

package.json

@@ -85,6 +85,12 @@
       "import": "./dist/*.js",
       "require": "./dist/cjs/*.js",
       "default": "./dist/*.js"
+    },
+    "./lang/*": {
+      "types": "./dist/lang/*.d.ts",
+      "import": "./dist/lang/*.js",
+      "require": "./dist/lang/*.js",
+      "default": "./dist/lang/*.js"
     }
   },
   "customElements": "dist/custom-elements.json",

src/js/index.ts

@@ -1,6 +1,6 @@
 export * as constants from './constants.js';
-export { default as labels } from './labels/labels.js';
 export * as timeUtils from './utils/time.js';
+export { t } from './utils/i18n.js';
 
 // Import media-controller first to ensure it's available for other components
 // when calling `associateElement(this)` in connectedCallback.

src/js/labels/labels.ts

@@ -1,4 +1,4 @@
-export type LabelOptions = { seekOffset?: number; playbackRate?: number };
+import { t } from '../utils/i18n.js';
 
 export type MediaErrorLike = {
   code: number;
@@ -7,89 +7,28 @@ export type MediaErrorLike = {
 };
 
 const defaultErrorTitles = {
-  2: 'Network Error',
-  3: 'Decode Error',
-  4: 'Source Not Supported',
-  5: 'Encryption Error',
+  2: t('Network Error'),
+  3: t('Decode Error'),
+  4: t('Source Not Supported'),
+  5: t('Encryption Error'),
 };
 
 const defaultErrorMessages = {
-  2: 'A network error caused the media download to fail.',
-  3: 'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
-  4: 'An unsupported error occurred. The server or network failed, or your browser does not support this format.',
-  5: 'The media is encrypted and there are no keys to decrypt it.',
+  2: t('A network error caused the media download to fail.'),
+  3: t(
+    'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.'
+  ),
+  4: t(
+    'An unsupported error occurred. The server or network failed, or your browser does not support this format.'
+  ),
+  5: t('The media is encrypted and there are no keys to decrypt it.'),
 };
 
 // Returning null makes the error not show up in the UI.
 export const formatError = (error: MediaErrorLike) => {
   if (error.code === 1) return null;
   return {
     title: defaultErrorTitles[error.code] ?? `Error ${error.code}`,
-    message: defaultErrorMessages[error.code] ?? error.message
+    message: defaultErrorMessages[error.code] ?? error.message,
   };
-}
-
-export const tooltipLabels = {
-  ENTER_AIRPLAY: 'Start airplay',
-  EXIT_AIRPLAY: 'Stop airplay',
-  AUDIO_TRACK_MENU: 'Audio',
-  CAPTIONS: 'Captions',
-  ENABLE_CAPTIONS: 'Enable captions',
-  DISABLE_CAPTIONS: 'Disable captions',
-  START_CAST: 'Start casting',
-  STOP_CAST: 'Stop casting',
-  ENTER_FULLSCREEN: 'Enter fullscreen mode',
-  EXIT_FULLSCREEN: 'Exit fullscreen mode',
-  MUTE: 'Mute',
-  UNMUTE: 'Unmute',
-  ENTER_PIP: 'Enter picture in picture mode',
-  EXIT_PIP: 'Enter picture in picture mode',
-  PLAY: 'Play',
-  PAUSE: 'Pause',
-  PLAYBACK_RATE: 'Playback rate',
-  RENDITIONS: 'Quality',
-  SEEK_BACKWARD: 'Seek backward',
-  SEEK_FORWARD: 'Seek forward',
-  SETTINGS: 'Settings',
-};
-
-export const nouns: Record<string, (options?: LabelOptions) => string> = {
-  AUDIO_PLAYER: () => 'audio player',
-  VIDEO_PLAYER: () => 'video player',
-  VOLUME: () => 'volume',
-  SEEK: () => 'seek',
-  CLOSED_CAPTIONS: () => 'closed captions',
-  PLAYBACK_RATE: ({ playbackRate = 1 } = {}) =>
-    `current playback rate ${playbackRate}`,
-  PLAYBACK_TIME: () => `playback time`,
-  MEDIA_LOADING: () => `media loading`,
-  SETTINGS: () => `settings`,
-  AUDIO_TRACKS: () => `audio tracks`,
-  QUALITY: () => `quality`,
-};
-
-export const verbs: Record<string, (options?: LabelOptions) => string> = {
-  PLAY: () => 'play',
-  PAUSE: () => 'pause',
-  MUTE: () => 'mute',
-  UNMUTE: () => 'unmute',
-  ENTER_AIRPLAY: () => 'start airplay',
-  EXIT_AIRPLAY: () => 'stop airplay',
-  ENTER_CAST: () => 'start casting',
-  EXIT_CAST: () => 'stop casting',
-  ENTER_FULLSCREEN: () => 'enter fullscreen mode',
-  EXIT_FULLSCREEN: () => 'exit fullscreen mode',
-  ENTER_PIP: () => 'enter picture in picture mode',
-  EXIT_PIP: () => 'exit picture in picture mode',
-  SEEK_FORWARD_N_SECS: ({ seekOffset = 30 } = {}) =>
-    `seek forward ${seekOffset} seconds`,
-  SEEK_BACK_N_SECS: ({ seekOffset = 30 } = {}) =>
-    `seek back ${seekOffset} seconds`,
-  SEEK_LIVE: () => 'seek to live',
-  PLAYING_LIVE: () => 'playing live',
-};
-
-export default {
-  ...nouns,
-  ...verbs,
 };

src/js/lang/en.ts

@@ -0,0 +1,72 @@
+export const En = {
+  'Start airplay': 'Start airplay',
+  'Stop airplay': 'Stop airplay',
+  Audio: 'Audio',
+  Captions: 'Captions',
+  'Enable captions': 'Enable captions',
+  'Disable captions': 'Disable captions',
+  'Start casting': 'Start casting',
+  'Stop casting': 'Stop casting',
+  'Enter fullscreen mode': 'Enter fullscreen mode',
+  'Exit fullscreen mode': 'Exit fullscreen mode',
+  Mute: 'Mute',
+  Unmute: 'Unmute',
+  'Enter picture in picture mode': 'Enter picture in picture mode',
+  'Exit picture in picture mode': 'Exit picture in picture mode',
+  Play: 'Play',
+  Pause: 'Pause',
+  'Playback rate': 'Playback rate',
+  'Playback rate {playbackRate}': 'Playback rate {playbackRate}',
+  Quality: 'Quality',
+  'Seek backward': 'Seek backward',
+  'Seek forward': 'Seek forward',
+  Settings: 'Settings',
+  'audio player': 'audio player',
+  'video player': 'video player',
+  volume: 'volume',
+  seek: 'seek',
+  'closed captions': 'closed captions',
+  'current playback rate': 'current playback rate',
+  'playback time': 'playback time',
+  'media loading': 'media loading',
+
+  settings: 'settings',
+  'audio tracks': 'audio tracks',
+  quality: 'quality',
+  play: 'play',
+  pause: 'pause',
+  mute: 'mute',
+  unmute: 'unmute',
+  live: 'live',
+  'start airplay': 'start airplay',
+  'stop airplay': 'stop airplay',
+  'start casting': 'start casting',
+  'stop casting': 'stop casting',
+  'enter fullscreen mode': 'enter fullscreen mode',
+  'exit fullscreen mode': 'exit fullscreen mode',
+  'enter picture in picture mode': 'enter picture in picture mode',
+  'exit picture in picture mode': 'exit picture in picture mode',
+  'seek to live': 'seek to live',
+  'playing live': 'playing live',
+  'seek back {seekOffset} seconds': 'seek back {seekOffset} seconds',
+  'seek forward {seekOffset} seconds': 'seek forward {seekOffset} seconds',
+
+  'Network Error': 'Network Error',
+  'Decode Error': 'Decode Error',
+  'Source Not Supported': 'Source Not Supported',
+  'Encryption Error': 'Encryption Error',
+  'A network error caused the media download to fail.':
+    'A network error caused the media download to fail.',
+  'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.':
+    'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
+  'An unsupported error occurred. The server or network failed, or your browser does not support this format.':
+    '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.',
+} as const;
+
+export type TranslateKeys = keyof typeof En;
+
+export type TranslateDictionary = {
+  [key in TranslateKeys]: string;
+};