Handling TasmoCompiler gui language the same way

as Tasmota GUI interface - add browserLang property to locales/languages.js - there is no need to replace "-" with "_" in detected browser language. This is now checked against browserLang property.
benzino77 · Jun 4, 2021 · 9697f48 · 9697f48
1 parent 929d601
commit 9697f48
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tasmocompiler",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "private": true,
   "proxy": "http://localhost:3001/",
   "dependencies": {

diff --git a/src/App.js b/src/App.js
@@ -18,20 +18,21 @@ import { allMessages, defaultLanguage } from './locales/languages';
 import { tasmotaGUILanguages } from './components/AppStepper/VersionStep/Variables/Languages';
 import availableFeatures from './components/AppStepper/FeaturesStep/AvailableFeatures';
 
-const browserLanguage = navigator.language
-  .toLocaleLowerCase()
-  .replace('-', '_');
-
-let tcGUILanguage = browserLanguage;
+const browserLanguage = navigator.language.toLocaleLowerCase();
 
 console.log(`Detected browser language: ${browserLanguage}`);
-// Set default TasmoCompiler GUI language to english if not found on supported languages list
-if (!allMessages[browserLanguage]) {
-  console.log(
-    `Browser language (${browserLanguage}) not supported. Changing TasmoCompiler GUI language to default (${defaultLanguage})`
-  );
-  tcGUILanguage = defaultLanguage;
-}
+
+let tcGUILanguage = defaultLanguage;
+
+Object.keys(allMessages).some((l) => {
+  const found = allMessages[l].browserLang.includes(browserLanguage);
+  if (found) {
+    tcGUILanguage = l;
+  }
+  return found;
+});
+
+console.log(`TasmoCompiler GUI language set to ${tcGUILanguage}`);
 
 class App extends Component {
   constructor(props) {

diff --git a/src/components/AppStepper/VersionStep/Variables/Languages.js b/src/components/AppStepper/VersionStep/Variables/Languages.js
@@ -6,63 +6,63 @@ const tasmotaGUILanguages = [
     value: 'af_AF',
     nativeName: 'Afrikaans',
     flag: 'flags/af.png',
-    browserLang: ['af'],
+    browserLang: ['af', 'af-af'],
   },
   {
     name: 'English',
     value: 'en_GB',
     nativeName: 'English',
     flag: 'flags/gb.png',
-    browserLang: ['en', 'en_us', 'en_gb'],
+    browserLang: ['en', 'en-us', 'en-gb'],
   },
   {
     name: 'Bulgarian',
     value: 'bg_BG',
     nativeName: 'Български',
     flag: 'flags/bg.png',
-    browserLang: ['bg'],
+    browserLang: ['bg', 'bg-bg'],
   },
   {
     name: 'Czech',
     value: 'cs_CZ',
     nativeName: 'Čeština',
     flag: 'flags/cz.png',
-    browserLang: ['cs'],
+    browserLang: ['cs', 'cs-cz'],
   },
   {
     name: 'German',
     value: 'de_DE',
     nativeName: 'Deutsch',
     flag: 'flags/de.png',
-    browserLang: ['de'],
+    browserLang: ['de', 'de-de'],
   },
   {
     name: 'Greek',
     value: 'el_GR',
     nativeName: 'Ελληνικά',
     flag: 'flags/gr.png',
-    browserLang: ['el'],
+    browserLang: ['el', 'el-gr'],
   },
   {
     name: 'Spanish',
     value: 'es_ES',
     nativeName: 'Español',
     flag: 'flags/es.png',
-    browserLang: ['es'],
+    browserLang: ['es', 'es-es'],
   },
   {
     name: 'French',
     value: 'fr_FR',
     nativeName: 'Français',
     flag: 'flags/fr.png',
-    browserLang: ['fr', 'fr_fr'],
+    browserLang: ['fr', 'fr-fr'],
   },
   {
     name: 'Hebrew',
     value: 'he_HE',
     nativeName: 'עִבְרִית',
     flag: 'flags/he.png',
-    browserLang: ['he'],
+    browserLang: ['he', 'he-he'],
   },
   {
     name: 'Hungarian',
@@ -83,7 +83,7 @@ const tasmotaGUILanguages = [
     value: 'ko_KO',
     nativeName: '한국어',
     flag: 'flags/ko.png',
-    browserLang: ['ko', 'ko_kr'],
+    browserLang: ['ko', 'ko-kr'],
   },
   {
     name: 'Dutch',
@@ -97,49 +97,49 @@ const tasmotaGUILanguages = [
     value: 'pl_PL',
     nativeName: 'Polski',
     flag: 'flags/pl.png',
-    browserLang: ['pl'],
+    browserLang: ['pl', 'pl-pl'],
   },
   {
     name: 'Portuguese (Brazil)',
     value: 'pt_BR',
     nativeName: 'Português (Brasileiro)',
     flag: 'flags/br.png',
-    browserLang: [],
+    browserLang: ['pt-br'],
   },
   {
     name: 'Portuguese',
     value: 'pt_PT',
     nativeName: 'Português',
     flag: 'flags/pt.png',
-    browserLang: ['pt'],
+    browserLang: ['pt', 'pt-pt'],
   },
   {
     name: 'Romanian',
     value: 'ro_RO',
     nativeName: 'Română',
     flag: 'flags/ro.png',
-    browserLang: ['ro', 'ro_ro'],
+    browserLang: ['ro', 'ro-ro'],
   },
   {
     name: 'Russian',
     value: 'ru_RU',
     nativeName: 'Русский',
     flag: 'flags/ru.png',
-    browserLang: ['ru'],
+    browserLang: ['ru', 'ru-ru'],
   },
   {
     name: 'Slovak',
     value: 'sk_SK',
     nativeName: 'Slovenčina',
     flag: 'flags/sk.png',
-    browserLang: ['sk'],
+    browserLang: ['sk', 'sk-sk'],
   },
   {
     name: 'Swedish',
     value: 'sv_SE',
     nativeName: 'Svenska',
     flag: 'flags/se.png',
-    browserLang: ['se', 'sv_se'],
+    browserLang: ['se', 'sv-se'],
   },
   {
     name: 'Turkish',
@@ -153,54 +153,46 @@ const tasmotaGUILanguages = [
     value: 'uk_UA',
     nativeName: 'Українська',
     flag: 'flags/ua.png',
-    browserLang: ['uk'],
+    browserLang: ['uk', 'uk-ua'],
   },
   {
     name: 'Vietnam',
     value: 'vi_VN',
     nativeName: 'Tiếng việt',
     flag: 'flags/vn.png',
-    browserLang: ['vi'],
+    browserLang: ['vi', 'vi-vn'],
   },
   {
     name: 'Chinese (Simplified)',
     value: 'zh_CN',
     nativeName: '汉语',
     flag: 'flags/cn.png',
-    browserLang: [],
+    browserLang: ['zh-cn'],
   },
   {
     name: 'Chinese (Traditional)',
     value: 'zh_TW',
     nativeName: '漢語',
     flag: 'flags/tw.png',
-    browserLang: [],
+    browserLang: ['zh-tw'],
   },
   {
     name: 'Frisian',
     value: 'fy_NL',
     nativeName: 'Frysk',
     flag: 'flags/nl.png',
-    browserLang: ['fy'],
+    browserLang: ['fy', 'fy-nl'],
   },
 ];
 
 // What default language should be selected for Tasmota GUI
 // it is based on user browser language setting
-const browserLanguage = navigator.language
-  .toLocaleLowerCase()
-  .replace('-', '_');
+const browserLanguage = navigator.language.toLocaleLowerCase();
 
 let languageIndex = tasmotaGUILanguages.findIndex((element) =>
   element.browserLang.includes(browserLanguage)
 );
 
-if (languageIndex === -1) {
-  languageIndex = tasmotaGUILanguages.findIndex((element) =>
-    element.value.toLowerCase().includes(browserLanguage)
-  );
-}
-
 // Set English as default
 if (languageIndex === -1) {
   languageIndex = tasmotaGUILanguages.findIndex((element) =>

diff --git a/src/locales/languages.js b/src/locales/languages.js
@@ -10,14 +10,54 @@ import localePT from './pt.json';
 // nativeName: Language native name https://www.internationalphoneticalphabet.org/languages/language-names-in-native-language/
 // flag: PNG 24px width proportional icon name from public/flags folder for most typical country of this language
 const allMessages = {
-  de: { source: localeDE, nativeName: 'Deutsch', flag: 'flags/de.png' },
-  en: { source: localeEN, nativeName: 'English', flag: 'flags/gb.png' },
-  es: { source: localeES, nativeName: 'Español', flag: 'flags/es.png' },
-  it: { source: localeIT, nativeName: 'Italiano', flag: 'flags/it.png' },
-  pl: { source: localePL, nativeName: 'Polski', flag: 'flags/pl.png' },
-  pt: { source: localePT, nativeName: 'Português', flag: 'flags/pt.png' },
-  cs: { source: localeCS, nativeName: 'Čeština', flag: 'flags/cz.png' },
-  hu: { source: localeHU, nativeName: 'Magyar', flag: 'flags/hu.png' },
+  de: {
+    source: localeDE,
+    nativeName: 'Deutsch',
+    flag: 'flags/de.png',
+    browserLang: ['de', 'de-de'],
+  },
+  en: {
+    source: localeEN,
+    nativeName: 'English',
+    flag: 'flags/gb.png',
+    browserLang: ['en', 'en-gb', 'en-us'],
+  },
+  es: {
+    source: localeES,
+    nativeName: 'Español',
+    flag: 'flags/es.png',
+    browserLang: ['es', 'es-es'],
+  },
+  it: {
+    source: localeIT,
+    nativeName: 'Italiano',
+    flag: 'flags/it.png',
+    browserLang: ['it'],
+  },
+  pl: {
+    source: localePL,
+    nativeName: 'Polski',
+    flag: 'flags/pl.png',
+    browserLang: ['pl', 'pl-pl'],
+  },
+  pt: {
+    source: localePT,
+    nativeName: 'Português',
+    flag: 'flags/pt.png',
+    browserLang: ['pt', 'pt-pt'],
+  },
+  cs: {
+    source: localeCS,
+    nativeName: 'Čeština',
+    flag: 'flags/cz.png',
+    browserLang: ['cs', 'cs-cz'],
+  },
+  hu: {
+    source: localeHU,
+    nativeName: 'Magyar',
+    flag: 'flags/hu.png',
+    browserLang: ['hu'],
+  },
 };
 
 // source of truth