Add i18n support with language optin in VideoJS

src/components/MediaPlayer/MediaPlayer.js

@@ -210,6 +210,7 @@ const MediaPlayer = ({ enableFileDownload = false, enablePIP = false }) => {
     poster: isVideo ? getPoster(manifest, canvasIndex) : null,
     controls: true,
     fluid: true,
+    language: "fr", // TODO:: fill this information from props
     controlBar: {
       // Define and order control bar controls
       // See https://docs.videojs.com/tutorial-components.html for options of what

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import videojs from 'video.js';
 import 'videojs-hotkeys';
-
 import 'videojs-markers-plugin/dist/videojs-markers-plugin';
 import 'videojs-markers-plugin/dist/videojs.markers.plugin.css';
 
@@ -26,12 +25,8 @@ import {
 } from '@Services/iiif-parser';
 import { checkSrcRange, getMediaFragment } from '@Services/utility-helpers';
 
-import VideoJSProgress from './components/js/VideoJSProgress';
-import VideoJSCurrentTime from './components/js/VideoJSCurrentTime';
-import VideoJSFileDownload from './components/js/VideoJSFileDownload';
-import VideoJSNextButton from './components/js/VideoJSNextButton';
-import VideoJSPreviousButton from './components/js/VideoJSPreviousButton';
-// import vjsYo from './vjsYo';
+import { LANG_MAP } from './VideoJSUtils';
+
 
 function VideoJSPlayer({
   isVideo,
@@ -102,11 +97,18 @@ function VideoJSPlayer({
 
     setCIndex(canvasIndex);
 
+    // Load desired language from VideoJS's lang files
+    let languageJSON = LANG_MAP[options.language];
     let newPlayer;
     if (playerRef.current != null) {
+      languageJSON
+        ? videojs.addLanguage(options.language, languageJSON)
+        /** When desired language is not available defaults to English */
+        : videojs.addLanguage("en", LANG_MAP["en"]);
       newPlayer = videojs(playerRef.current, options);
     }
 
+
     /* Another way to add a component to the controlBar */
     // newPlayer.getChild('controlBar').addChild('vjsYo', {});
 

src/components/MediaPlayer/VideoJS/VideoJSUtils.js

@@ -0,0 +1,15 @@
+/** VideoJS custom components */
+import VideoJSProgress from './components/js/VideoJSProgress';
+import VideoJSCurrentTime from './components/js/VideoJSCurrentTime';
+import VideoJSFileDownload from './components/js/VideoJSFileDownload';
+import VideoJSNextButton from './components/js/VideoJSNextButton';
+import VideoJSPreviousButton from './components/js/VideoJSPreviousButton';
+// import vjsYo from './vjsYo';
+
+/** VideoJS language files */
+import de from "video.js/dist/lang/de.json";
+import en from "video.js/dist/lang/en.json";
+import fr from "video.js/dist/lang/fr.json";
+import it from "video.js/dist/lang/it.json";
+
+export const LANG_MAP = { "de": de, "fr": fr, "it": it, "en": en };