Re-Arrange System Default Locale logic

src/renderer/App.js

@@ -10,6 +10,7 @@ import FtButton from './components/ft-button/ft-button.vue'
 import FtToast from './components/ft-toast/ft-toast.vue'
 import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
 import $ from 'jquery'
+import { app } from '@electron/remote'
 import { markdown } from 'markdown'
 import Parser from 'rss-parser'
 
@@ -117,9 +118,21 @@ export default Vue.extend({
     checkLocale: function () {
       const locale = localStorage.getItem('locale')
 
-      if (locale === null) {
-        // TODO: Get User default locale
-        this.$i18n.locale = 'en-US'
+      if (locale === null || locale === 'system') {
+        const systemLocale = app.getLocale().replace(/-|_/, '_')
+        const findLocale = Object.keys(this.$i18n.messages).find((locale) => {
+          const localeName = locale.replace(/-|_/, '_')
+          return localeName.includes(systemLocale)
+        })
+
+        if (typeof findLocale !== 'undefined') {
+          this.$i18n.locale = findLocale
+          localStorage.setItem('locale', 'system')
+        } else {
+          this.$i18n.locale = 'en-US'
+          this.currentLocale = 'en-US'
+          localStorage.setItem('locale', 'en-US')
+        }
       } else {
         this.$i18n.locale = locale
       }

src/renderer/components/general-settings/general-settings.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import $ from 'jquery'
 import { mapActions } from 'vuex'
+import { app } from '@electron/remote'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtInput from '../ft-input/ft-input.vue'
@@ -96,17 +97,15 @@ export default Vue.extend({
     },
 
     localeOptions: function () {
-      return Object.keys(this.$i18n.messages)
+      return ['system'].concat(Object.keys(this.$i18n.messages))
     },
 
     localeNames: function () {
-      const names = []
+      const names = [
+        this.$t('Settings.General Settings.System Default')
+      ]
 
       Object.keys(this.$i18n.messages).forEach((locale) => {
-        if (locale === 'system') {
-          names.push('System Language')
-          return
-        }
         const localeName = this.$i18n.messages[locale]['Locale Name']
         if (typeof localeName !== 'undefined') {
           names.push(localeName)
@@ -171,7 +170,7 @@ export default Vue.extend({
 
     this.updateInvidiousInstanceBounce = debounce(this.updateInvidiousInstance, 500)
 
-    this.currentLocale = this.$i18n.locale
+    this.currentLocale = localStorage.getItem('locale')
   },
   beforeDestroy: function () {
     if (this.invidiousInstance === '') {
@@ -194,18 +193,41 @@ export default Vue.extend({
     },
 
     updateLocale: function (locale) {
-      this.$i18n.locale = locale
-      this.currentLocale = locale
-      localStorage.setItem('locale', locale)
+      if (locale === 'system') {
+        const systemLocale = app.getLocale().replace(/-|_/, '_')
+        const findLocale = Object.keys(this.$i18n.messages).find((locale) => {
+          const localeName = locale.replace(/-|_/, '_')
+          return localeName.includes(systemLocale)
+        })
+
+        if (typeof findLocale !== 'undefined') {
+          this.$i18n.locale = findLocale
+          this.currentLocale = 'system'
+          localStorage.setItem('locale', 'system')
+        } else {
+          // Translating this string isn't needed because the user will always see it in English
+          this.showToast({
+            message: 'Locale not found, defaulting to English (US)'
+          })
+          this.$i18n.locale = 'en-US'
+          this.currentLocale = 'en-US'
+          localStorage.setItem('locale', 'en-US')
+        }
+      } else {
+        this.$i18n.locale = locale
+        this.currentLocale = locale
+        localStorage.setItem('locale', locale)
+      }
 
       const payload = {
         isDev: this.isDev,
-        locale: locale
+        locale: this.currentLocale
       }
       this.getRegionData(payload)
     },
 
     ...mapActions([
+      'showToast',
       'updateEnableSearchSuggestions',
       'updateBackendFallback',
       'updateCheckForUpdates',

src/renderer/main.js

@@ -27,34 +27,24 @@ Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 Vue.use(VueI18n)
 
 // List of locales approved for use
-const activeLocales = ['system', 'en-US', 'en_GB', 'ar', 'bg', 'cs', 'da', 'de-DE', 'el', 'es', 'es-MX', 'fi', 'fr-FR', 'gl', 'he', 'hu', 'hr', 'id', 'is', 'it', 'ja', 'nb_NO', 'nl', 'nn', 'pl', 'pt', 'pt-BR', 'pt-PT', 'ru', 'sk', 'sl', 'sv', 'tr', 'uk', 'vi', 'zh-CN', 'zh-TW']
+const activeLocales = ['en-US', 'en_GB', 'ar', 'bg', 'cs', 'da', 'de-DE', 'el', 'es', 'es-MX', 'fi', 'fr-FR', 'gl', 'he', 'hu', 'hr', 'id', 'is', 'it', 'ja', 'nb_NO', 'nl', 'nn', 'pl', 'pt', 'pt-BR', 'pt-PT', 'ru', 'sk', 'sl', 'sv', 'tr', 'uk', 'vi', 'zh-CN', 'zh-TW']
 const messages = {}
 /* eslint-disable-next-line */
 const fileLocation = isDev ? 'static/locales/' : `${__dirname}/static/locales/`
 
 // Take active locales and load respective YAML file
 activeLocales.forEach((locale) => {
-  // Import elctrons app object to access getLocale function
-  const { app } = require('@electron/remote')
   try {
     // File location when running in dev
-    if (locale === 'system') {
-      const systemsLocale = activeLocales.filter((currentValue) => { return currentValue.startsWith(app.getLocale()) })
-      if (systemsLocale.length) {
-        const doc = yaml.load(fs.readFileSync(`${fileLocation}${systemsLocale[0]}.yaml`))
-        messages[locale] = doc
-      }
-    } else {
-      const doc = yaml.load(fs.readFileSync(`${fileLocation}${locale}.yaml`))
-      messages[locale] = doc
-    }
+    const doc = yaml.load(fs.readFileSync(`${fileLocation}${locale}.yaml`))
+    messages[locale] = doc
   } catch (e) {
     console.log(e)
   }
 })
 
 const i18n = new VueI18n({
-  locale: 'system', // set locale standard is to follow the systems locale
+  locale: 'en-US', // set locale
   fallbackLocale: {
     default: 'en-US' // for the case systems locale has no corresponding .yaml file en-US gets set
   },

static/locales/en-US.yaml

@@ -113,6 +113,7 @@ Settings:
     Enable Search Suggestions: Enable Search Suggestions
     Default Landing Page: Default Landing Page
     Locale Preference: Locale Preference
+    System Default: System Default
     Preferred API Backend:
       Preferred API Backend: Preferred API Backend
       Local API: Local API