Add Locale Setting and enable German Translation

src/renderer/App.js

@@ -33,6 +33,7 @@ export default Vue.extend({
     this.$store.dispatch('grabUserSettings')
     this.$store.commit('setUsingElectron', useElectron)
     this.checkThemeSettings()
+    this.checkLocale()
 
     if (useElectron) {
       console.log('User is using Electron')
@@ -48,6 +49,17 @@ export default Vue.extend({
     }
   },
   methods: {
+    checkLocale: function () {
+      const locale = localStorage.getItem('locale')
+
+      if (locale === null) {
+        // TODO: Get User default locale
+        this.$i18n.locale = 'en-US'
+      } else {
+        this.$i18n.locale = locale
+      }
+    },
+
     checkThemeSettings: function () {
       let baseTheme = localStorage.getItem('baseTheme')
       let mainColor = localStorage.getItem('mainColor')

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

@@ -23,6 +23,7 @@ export default Vue.extend({
       showInvidiousInstances: false,
       instanceNames: [],
       instanceValues: [],
+      currentLocale: '',
       backendValues: [
         'invidious',
         'local'
@@ -562,6 +563,10 @@ export default Vue.extend({
       return this.$store.getters.getThumbnailPreference
     },
 
+    localeOptions: function () {
+      return Object.keys(this.$i18n.messages)
+    },
+
     backendNames: function () {
       return [
         this.$t('Settings.General Settings.Preferred API Backend.Invidious API'),
@@ -614,6 +619,8 @@ export default Vue.extend({
     })
 
     this.updateInvidiousInstanceBounce = debounce(this.updateInvidiousInstance, 500)
+
+    this.currentLocale = this.$i18n.locale
   },
   beforeDestroy: function () {
     if (this.invidiousInstance === '') {
@@ -626,6 +633,11 @@ export default Vue.extend({
       this.updateInvidiousInstanceBounce(invidiousInstance)
     },
 
+    updateLocale: function (locale) {
+      this.$i18n.locale = locale
+      localStorage.setItem('locale', locale)
+    },
+
     ...mapActions([
       'updateEnableSearchSuggestions',
       'updateBackendFallback',

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

@@ -63,6 +63,13 @@
         :select-values="thumbnailTypeValues"
         @change="updateThumbnailPreference"
       />
+      <ft-select
+        placeholder="Change Locale"
+        :value="currentLocale"
+        :select-names="localeOptions"
+        :select-values="localeOptions"
+        @change="updateLocale"
+      />
     </div>
     <ft-flex-box class="generalSettingsFlexBox">
       <ft-input

src/renderer/main.js

@@ -33,7 +33,7 @@ fs.readdir('.', (err, dir) => {
 })
 
 // List of locales approved for use
-const activeLocales = ['en-US']
+const activeLocales = ['en-US', 'de-DE']
 const messages = {}
 
 // Take active locales and load respective YAML file

static/locales/de-DE.yaml

@@ -106,6 +106,7 @@ Settings:
     Fallback to Non-Preferred Backend on Failure: Falle zu nicht-präferiertem System bei Fehlschlag zurück
     Enable Search Suggestions: Aktiviere Suchvorschläge
     Default Landing Page: Standardseite
+    Locale Preference: Locale Preference
     Preferred API Backend:
       Preferred API Backend: Präferiertes API System
       Local API: Lokale API

static/locales/en-US.yaml

@@ -106,6 +106,7 @@ Settings:
     Fallback to Non-Preferred Backend on Failure: Fallback to Non-Preferred Backend on Failure
     Enable Search Suggestions: Enable Search Suggestions
     Default Landing Page: Default Landing Page
+    Locale Preference: Locale Preference
     Preferred API Backend:
       Preferred API Backend: Preferred API Backend
       Local API: Local API