Moves translation to react and use i18next language detectors.

modules/settings/Settings.js

@@ -118,7 +118,6 @@ export default {
     },
     setLanguage: function (lang) {
         language = lang;
-        jitsiLocalStorage.setItem("language", lang);
     },
 
     /**

modules/translation/translation.js

@@ -1,87 +1,25 @@
-/* global $, require, config, interfaceConfig */
-import i18n from 'i18next';
-import XHR from 'i18next-xhr-backend';
+/* global $ */
+import { i18n, DEFAULT_LANG } from '../../react/features/base/translation';
 import jqueryI18next from 'jquery-i18next';
-import languagesR from "../../lang/languages.json";
-import mainR from "../../lang/main.json";
-import languages from "../../service/translation/languages";
-
-const DEFAULT_LANG = languages.EN;
-
-const defaultOptions = {
-    compatibilityAPI: 'v1',
-    compatibilityJSON: 'v1',
-    fallbackLng: DEFAULT_LANG,
-    load: "unspecific",
-    resGetPath: 'lang/__ns__-__lng__.json',
-    ns: {
-        namespaces: ['main', 'languages'],
-        defaultNs: 'main'
-    },
-    lngWhitelist : languages.getLanguages(),
-    fallbackOnNull: true,
-    fallbackOnEmpty: true,
-    useDataAttrOptions: true,
-    app: interfaceConfig.APP_NAME
-};
 
 function initCompleted() {
     $("[data-i18n]").localize();
 }
 
-function getLangFromQuery() {
-    var query = window.location.search.substring(1);
-    var vars = query.split("&");
-    for (var i=0;i<vars.length;i++) {
-        var pair = vars[i].split("=");
-        if(pair[0] == "lang")
-        {
-            return pair[1];
-        }
-    }
-    return null;
-}
-
 class Translation {
-    init (settingsLang) {
-        let options = defaultOptions;
-
-        let lang = getLangFromQuery() || settingsLang || config.defaultLanguage;
-        // XXX If none of the above has been set then the 'lang' will be
-        // 'undefined' and the i18n lib will try to auto detect user's
-        // preferred language based on browser's locale.
-        // The interface config option allows to disable this auto detection
-        // by specifying the fallback language in that case.
-        let langDetection = interfaceConfig.LANG_DETECTION;
-
-        if (!langDetection && !lang) {
-            lang = DEFAULT_LANG;
-        }
-
-        if (lang) {
-            options.lng = lang;
-        }
+    init () {
+        if (i18n.isInitialized)
+            initCompleted();
+        else
+            i18n.on('initialized', initCompleted);
 
-        i18n.use(XHR)
-            .use({
-                type: 'postProcessor',
-                name: "resolveAppName",
-                process: (res, key) => {
-                    return i18n.t(key, {app: options.app});
-                }
-            })
-            .init(options, initCompleted);
-        // adds default language which is preloaded from code
-        i18n.addResourceBundle(DEFAULT_LANG, 'main', mainR, true, true);
-        i18n.addResourceBundle(
-            DEFAULT_LANG, 'languages', languagesR, true, true);
         jqueryI18next.init(i18n, $, {useOptionsAttr: true});
     }
 
     setLanguage (lang) {
         if(!lang)
             lang = DEFAULT_LANG;
-        i18n.setLng(lang, defaultOptions, initCompleted);
+        i18n.setLng(lang, {}, initCompleted);
     }
 
     getCurrentLanguage () {

package.json

@@ -20,8 +20,9 @@
     "async": "0.9.0",
     "autosize": "^1.18.13",
     "bootstrap": "3.1.1",
-    "i18next": "3.4.4",
-    "i18next-xhr-backend": "1.1.0",
+    "i18next": "7.0.0",
+    "i18next-browser-languagedetector": "*",
+    "i18next-xhr-backend": "1.3.0",
     "jitsi-meet-logger": "jitsi/jitsi-meet-logger",
     "jquery": "~2.1.1",
     "jquery-contextmenu": "*",

react/features/base/translation/ConfigLanguageDetector.js

@@ -0,0 +1,25 @@
+/* global config */
+
+/**
+ * Custom language detection, just returns the config property if any.
+ */
+export default {
+    /**
+     * Name of the language detector.
+     */
+    name: 'configLanguageDetector',
+
+    /**
+     * The actual lookup.
+     *
+     * @returns {string} the default language if any.
+     */
+    lookup() {
+        return config.defaultLanguage;
+    },
+
+    /**
+     * Doesn't support caching.
+     */
+    cacheUserLanguage: Function.prototype
+};

react/features/base/translation/Translation.js

@@ -0,0 +1,72 @@
+/* global interfaceConfig */
+import i18n from 'i18next';
+import XHR from 'i18next-xhr-backend';
+import { DEFAULT_LANG, languages } from './constants';
+import languagesR from '../../../../lang/languages.json';
+import mainR from '../../../../lang/main.json';
+import Browser from 'i18next-browser-languagedetector';
+import ConfigLanguageDetector from './ConfigLanguageDetector';
+
+/**
+ * Default options to initialize i18next.
+ *
+ * @enum {string}
+ */
+const defaultOptions = {
+    compatibilityAPI: 'v1',
+    compatibilityJSON: 'v1',
+    fallbackLng: DEFAULT_LANG,
+    load: 'unspecific',
+    resGetPath: 'lang/__ns__-__lng__.json',
+    ns: {
+        namespaces: [ 'main', 'languages' ],
+        defaultNs: 'main'
+    },
+    lngWhitelist: languages.getLanguages(),
+    fallbackOnNull: true,
+    fallbackOnEmpty: true,
+    useDataAttrOptions: true,
+    app: interfaceConfig.APP_NAME
+};
+
+/**
+ * List of detectors to use in their order.
+ *
+ * @type {[*]}
+ */
+const detectors = [ 'querystring', 'localStorage', 'configLanguageDetector' ];
+
+/**
+ * Allow i18n to detect the system language from the browser.
+ */
+if (interfaceConfig.LANG_DETECTION) {
+    detectors.push('navigator');
+}
+
+/**
+ * The language detectors.
+ */
+const browser = new Browser(null, {
+    order: detectors,
+    lookupQuerystring: 'lang',
+    lookupLocalStorage: 'language',
+    caches: [ 'localStorage' ]
+});
+
+// adds a language detector that just checks the config
+browser.addDetector(ConfigLanguageDetector);
+
+i18n.use(XHR)
+    .use(browser)
+    .use({
+        type: 'postProcessor',
+        name: 'resolveAppName',
+        process: (res, key) => i18n.t(key, { app: defaultOptions.app })
+    })
+    .init(defaultOptions);
+
+// adds default language which is preloaded from code
+i18n.addResourceBundle(DEFAULT_LANG, 'main', mainR, true, true);
+i18n.addResourceBundle(DEFAULT_LANG, 'languages', languagesR, true, true);
+
+export default i18n;

react/features/base/translation/constants.js

@@ -0,0 +1,13 @@
+import languages from '../../../../service/translation/languages';
+
+/**
+ * The default language globally for the project.
+ *
+ * @type {string} the default language globally for the project.
+ */
+export const DEFAULT_LANG = languages.EN;
+
+/**
+ * Exports the list of languages currently supported.
+ */
+export { languages };

react/features/base/translation/index.js

@@ -0,0 +1,2 @@
+export { default as i18n } from './Translation';
+export * from './constants';