From 11c7355749b6e0180841dd02604a06dd924dd217 Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Wed, 20 Jan 2021 23:49:34 +0300
Subject: [PATCH] Use native language names in the language picker

This seems more intuitive to me and is what I've seen in most other
language pickers.
---
 CHANGELOG.md                                  |  1 +
 .../interface_language_switcher.vue           | 28 +++++++++----------
 src/services/locale/locale.service.js         | 12 ++++++++
 3 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/services/locale/locale.service.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40c1d9828d..2d751bf393 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 - Don't filter own posts when they hit your wordfilter
+- Language picker now uses native language names
 
 ## [2.2.2] - 2020-12-22
 ### Added
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 524ec5e955..dc3bd4088c 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -12,11 +12,11 @@
         v-model="language"
       >
         <option
-          v-for="(langCode, i) in languageCodes"
-          :key="langCode"
-          :value="langCode"
+          v-for="lang in languages"
+          :key="lang.code"
+          :value="lang.code"
         >
-          {{ languageNames[i] }}
+          {{ lang.name }}
         </option>
       </select>
       <FAIcon
@@ -29,6 +29,7 @@
 
 <script>
 import languagesObject from '../../i18n/messages'
+import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -42,12 +43,8 @@ library.add(
 
 export default {
   computed: {
-    languageCodes () {
-      return languagesObject.languages
-    },
-
-    languageNames () {
-      return _.map(this.languageCodes, this.getLanguageName)
+    languages () {
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
     },
 
     language: {
@@ -61,12 +58,13 @@ export default {
   methods: {
     getLanguageName (code) {
       const specialLanguageNames = {
-        'ja': 'Japanese (日本語)',
-        'ja_easy': 'Japanese (やさしいにほんご)',
-        'zh': 'Simplified Chinese (简体中文)',
-        'zh_Hant': 'Traditional Chinese (繁體中文)'
+        'ja_easy': 'やさしいにほんご',
+        'zh': '简体中文',
+        'zh_Hant': '繁體中文'
       }
-      return specialLanguageNames[code] || ISO6391.getName(code)
+      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+      const browserLocale = localeService.internalToBrowserLocale(code)
+      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
     }
   }
 }
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
new file mode 100644
index 0000000000..5be99d81f4
--- /dev/null
+++ b/src/services/locale/locale.service.js
@@ -0,0 +1,12 @@
+const specialLanguageCodes = {
+  'ja_easy': 'ja',
+  'zh_Hant': 'zh-HANT'
+}
+
+const internalToBrowserLocale = code => specialLanguageCodes[code] || code
+
+const localeService = {
+  internalToBrowserLocale
+}
+
+export default localeService