diff --git a/package.json b/package.json index b0058a96..cc1ac105 100644 --- 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 index 28ca2cad..fcfc7cf2 100644 --- 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 index 09688e01..56e448c6 100644 --- 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 index 83b66a00..c23c3ccd 100644 --- 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