Add multi language support for labels

package.json

@@ -100,11 +100,11 @@
     "manifest": "npx @custom-elements-manifest/analyzer analyze --config scripts/custom-elements-manifest.config.js",
     "postmanifest": "rimraf 'dist/**/media-*'",
     "build:types": "tsc",
-    "build:esm": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=esm --outdir=dist",
-    "build:cjs": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=cjs --outdir=dist/cjs",
+    "build:esm": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=esm --bundle --outdir=dist --loader:.json=json",
+    "build:cjs": "esbuild \"src/js/**/*.*s*\" --target=es2019 --format=cjs --outdir=dist/cjs --loader:.json=json",
     "postbuild:cjs": "echo '{\"type\": \"commonjs\"}' > ./dist/cjs/package.json",
-    "build:iife:index": "esbuild src/js/index.ts --bundle --target=es2019 --format=iife --outdir=dist/iife --minify --sourcemap --global-name=MediaChrome",
-    "build:iife:all": "esbuild src/js/all.ts --bundle --target=es2019 --format=iife --outdir=dist/iife --minify --sourcemap --global-name=MediaChrome",
+    "build:iife:index": "esbuild src/js/index.ts --bundle --target=es2019 --format=iife --outdir=dist/iife --minify --sourcemap --global-name=MediaChrome --loader:.json=json",
+    "build:iife:all": "esbuild src/js/all.ts --bundle --target=es2019 --format=iife --outdir=dist/iife --minify --sourcemap --global-name=MediaChrome --loader:.json=json",
     "build:react": "node ./scripts/react/build.js",
     "postbuild:react": "esbuild \"dist/react/**/*.js\" --target=es2019 --format=cjs --outdir=dist/cjs/react",
     "build": "run-s build:types build:esm build:cjs build:iife:* build:react",
@@ -184,5 +184,9 @@
     "media",
     "player",
     "controls"
-  ]
+  ],
+  "dependencies": {
+    "i18next": "^24.0.5",
+    "i18next-browser-languagedetector": "^8.0.2"
+  }
 }

src/js/i18n/i18n.ts

@@ -0,0 +1,35 @@
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import enTranslation from './locales/en.json';
+import esTranslation from './locales/es.json';
+import ptTranslation from './locales/pt.json';
+import frTranslation from './locales/fr.json';
+
+export const initI18n = () => {
+  i18next.use(LanguageDetector).init({
+    fallbackLng: 'en',
+    detection: {
+      order: ['navigator', 'localStorage', 'cookie', 'querystring'],
+      caches: ['localStorage', 'cookie'],
+    },
+    resources: {
+      en: {
+        translation: enTranslation,
+      },
+      es: {
+        translation: esTranslation,
+      },
+      fr: {
+        translation: frTranslation,
+      },
+      pt: {
+        translation: ptTranslation,
+      },
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+};
+
+export default i18next;

src/js/i18n/locales/en.json

@@ -0,0 +1,58 @@
+{
+  "tooltips": {
+    "enterAirplay": "Start airplay",
+    "exitAirplay": "Stop airplay",
+    "audioTrackMenu": "Audio",
+    "captions": "Captions",
+    "enableCaptions": "Enable captions",
+    "disableCaptions": "Disable captions",
+    "startCast": "Start casting",
+    "stopCast": "Stop casting",
+    "enterFullscreen": "Enter fullscreen mode",
+    "exitFullscreen": "Exit fullscreen mode",
+    "mute": "Mute",
+    "unmute": "Unmute",
+    "enterPip": "Enter picture in picture mode",
+    "exitPip": "Exit picture in picture mode",
+    "play": "Play",
+    "pause": "Pause",
+    "playbackRate": "Playback rate",
+    "renditions": "Quality",
+    "seekBackward": "Seek backward",
+    "seekForward": "Seek forward",
+    "settings": "Settings"
+  },
+  "nouns": {
+    "audioPlayer": "audio player",
+    "videoPlayer": "video player",
+    "volume": "volume",
+    "seek": "seek",
+    "closedCaptions": "closed captions",
+    "playbackRate": "current playback rate",
+    "playbackTime": "playback time",
+    "mediaLoading": "media loading",
+    "settings": "settings",
+    "audioTracks": "audio tracks",
+    "quality": "quality"
+  },
+  "verbs": {
+    "play": "play",
+    "pause": "pause",
+    "mute": "mute",
+    "unmute": "unmute",
+    "live": "LIVE",
+    "enterAirplay": "start airplay",
+    "exitAirplay": "stop airplay",
+    "enterCast": "start casting",
+    "exitCast": "stop casting",
+    "enterFullscreen": "enter fullscreen mode",
+    "exitFullscreen": "exit fullscreen mode",
+    "enterPip": "enter picture in picture mode",
+    "exitPip": "exit picture in picture mode",
+    "seekLive": "seek to live",
+    "playingLive": "playing live",
+    "seekBack": "seek back",
+    "seekForward": "seek forward",
+    "seconds": "seconds"
+  }
+}

src/js/i18n/locales/es.json

@@ -0,0 +1,58 @@
+{
+  "tooltips": {
+    "enterAirplay": "Iniciar AirPlay",
+    "exitAirplay": "Detener AirPlay",
+    "audioTrackMenu": "Audio",
+    "captions": "Subtítulos",
+    "enableCaptions": "Activar subtítulos",
+    "disableCaptions": "Desactivar subtítulos",
+    "startCast": "Iniciar transmisión",
+    "stopCast": "Detener transmisión",
+    "enterFullscreen": "Entrar en modo pantalla completa",
+    "exitFullscreen": "Salir del modo pantalla completa",
+    "mute": "Silenciar",
+    "unmute": "Reactivar sonido",
+    "enterPip": "Entrar en modo imagen en imagen",
+    "exitPip": "Salir del modo imagen en imagen",
+    "play": "Reproducir",
+    "pause": "Pausar",
+    "playbackRate": "Velocidad de reproducción",
+    "renditions": "Calidad",
+    "seekBackward": "Retroceder",
+    "seekForward": "Avanzar",
+    "settings": "Configuración"
+  },
+  "nouns": {
+    "audioPlayer": "reproductor de audio",
+    "videoPlayer": "reproductor de video",
+    "volume": "volumen",
+    "seek": "búsqueda",
+    "closedCaptions": "subtítulos",
+    "playbackRate": "velocidad de reproducción actual",
+    "playbackTime": "tiempo de reproducción",
+    "mediaLoading": "cargando medios",
+    "settings": "configuración",
+    "audioTracks": "pistas de audio",
+    "quality": "calidad"
+  },
+  "verbs": {
+    "play": "reproducir",
+    "pause": "pausar",
+    "mute": "silenciar",
+    "unmute": "reactivar sonido",
+    "live": "EN VIVO",
+    "enterAirplay": "iniciar AirPlay",
+    "exitAirplay": "detener AirPlay",
+    "enterCast": "iniciar transmisión",
+    "exitCast": "detener transmisión",
+    "enterFullscreen": "entrar en modo pantalla completa",
+    "exitFullscreen": "salir del modo pantalla completa",
+    "enterPip": "entrar en modo imagen en imagen",
+    "exitPip": "salir del modo imagen en imagen",
+    "seekLive": "ir a la transmisión en vivo",
+    "playingLive": "reproduciendo en vivo",
+    "seekBack": "retroceder",
+    "seekForward": "avanzar",
+    "seconds": "segundos"
+  }
+}

src/js/i18n/locales/fr.json

@@ -0,0 +1,58 @@
+{
+  "tooltips": {
+    "enterAirplay": "Démarrer la diffusion AirPlay",
+    "exitAirplay": "Arrêter la diffusion AirPlay",
+    "audioTrackMenu": "Audio",
+    "captions": "Sous-titres",
+    "enableCaptions": "Activer les sous-titres",
+    "disableCaptions": "Désactiver les sous-titres",
+    "startCast": "Démarrer la diffusion (cast)",
+    "stopCast": "Arrêter la diffusion (cast)",
+    "enterFullscreen": "Mettre en mode plein écran",
+    "exitFullscreen": "Quitter le mode plein écran",
+    "mute": "Désactiver le son",
+    "unmute": "Activer le son",
+    "enterPip": "Mettre en mode image-en-image (PiP)",
+    "exitPip": "Quitter le mode image-en-image (PiP)",
+    "play": "Lire",
+    "pause": "Pause",
+    "playbackRate": "Taux de lecture",
+    "renditions": "Qualité",
+    "seekBackward": "Reculer",
+    "seekForward": "Avancer",
+    "settings": "Paramètres"
+  },
+  "nouns": {
+    "audioPlayer": "lecteur audio",
+    "videoPlayer": "lecteur vidéo",
+    "volume": "volume",
+    "seek": "se déplacer",
+    "closedCaptions": "sous-titres codés",
+    "playbackRate": "taux de lecture actuel",
+    "playbackTime": "durée de lecture",
+    "mediaLoading": "chargement des médias",
+    "settings": "paramètres",
+    "audioTracks": "pistes audio",
+    "quality": "qualité"
+  },
+  "verbs": {
+    "play": "lire",
+    "pause": "pause",
+    "mute": "désactiver le son",
+    "unmute": "activer le son",
+    "live": "en direct",
+    "enterAirplay": "démarrer la diffusion AirPlay",
+    "exitAirplay": "arrêter la diffusion AirPlay",
+    "enterCast": "démarrer la diffusion (cast)",
+    "exitCast": "arrêter la diffusion (cast)",
+    "enterFullscreen": "mettre en mode plein écran",
+    "exitFullscreen": "quitter le mode plein écran",
+    "enterPip": "mettre en mode image-en-image (PiP)",
+    "exitPip": "quitter le mode image-en-image (PiP)",
+    "seekLive": "aller au direct",
+    "playingLive": "lecture en direct",
+    "seekBack": "reculer",
+    "seekForward": "avancer",
+    "seconds": "secondes"
+  }
+}

src/js/i18n/locales/pt.json

@@ -0,0 +1,58 @@
+{
+  "tooltips": {
+    "enterAirplay": "Iniciar AirPlay",
+    "exitAirplay": "Parar AirPlay",
+    "audioTrackMenu": "Áudio",
+    "captions": "Legendas",
+    "enableCaptions": "Ativar legendas",
+    "disableCaptions": "Desativar legendas",
+    "startCast": "Iniciar transmissão",
+    "stopCast": "Parar transmissão",
+    "enterFullscreen": "Entrar no modo de tela cheia",
+    "exitFullscreen": "Sair do modo de tela cheia",
+    "mute": "Silenciar",
+    "unmute": "Ativar som",
+    "enterPip": "Entrar no modo PiP (Imagem na tela)",
+    "exitPip": "Sair do modo PiP",
+    "play": "Reproduzir",
+    "pause": "Pausar",
+    "playbackRate": "Taxa de reprodução",
+    "renditions": "Qualidade",
+    "seekBackward": "Retroceder",
+    "seekForward": "Avançar",
+    "settings": "Configurações"
+  },
+  "nouns": {
+    "audioPlayer": "reprodutor de áudio",
+    "videoPlayer": "reprodutor de vídeo",
+    "volume": "volume",
+    "seek": "buscar",
+    "closedCaptions": "legendas ocultas",
+    "playbackRate": "taxa de reprodução atual",
+    "playbackTime": "tempo de reprodução",
+    "mediaLoading": "carregando mídia",
+    "settings": "configurações",
+    "audioTracks": "faixas de áudio",
+    "quality": "qualidade"
+  },
+  "verbs": {
+    "play": "reproduzir",
+    "pause": "pausar",
+    "mute": "silenciar",
+    "unmute": "ativar som",
+    "live": "AO VIVO",
+    "enterAirplay": "iniciar AirPlay",
+    "exitAirplay": "parar AirPlay",
+    "enterCast": "iniciar transmissão",
+    "exitCast": "parar transmissão",
+    "enterFullscreen": "entrar no modo de tela cheia",
+    "exitFullscreen": "sair do modo de tela cheia",
+    "enterPip": "entrar no modo PiP",
+    "exitPip": "sair do modo PiP",
+    "seekLive": "buscar ao vivo",
+    "playingLive": "reproduzindo ao vivo",
+    "seekBack": "voltar",
+    "seekForward": "avançar",
+    "seconds": "segundos"
+  }
+}