Sort all language dropdowns, not just in the Settings Page.

ui/component/channelEdit/view.jsx

@@ -21,6 +21,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 import { SIMPLE_SITE } from 'config';
+import { sortLanguageMap } from 'util/default-languages';
 
 const LANG_NONE = 'none';
 
@@ -416,9 +417,9 @@ function ChannelForm(props: Props) {
                       <option key={'pri-langNone'} value={LANG_NONE}>
                         {__('None selected')}
                       </option>
-                      {Object.keys(SUPPORTED_LANGUAGES).map((language) => (
+                      {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
-                        <option key={language} value={language}>
+                        <option key={langKey} value={langKey}>
-                          {SUPPORTED_LANGUAGES[language]}
+                          {langName}
                         </option>
                       ))}
                     </FormField>
@@ -434,11 +435,9 @@ function ChannelForm(props: Props) {
                       <option key={'sec-langNone'} value={LANG_NONE}>
                         {__('None selected')}
                       </option>
-                      {Object.keys(SUPPORTED_LANGUAGES)
+                      {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
-                        .filter((lang) => lang !== languageParam[0])
+                        <option key={langKey} value={langKey} disabled={langKey === languageParam[0]}>
-                        .map((language) => (
+                          {langName}
-                          <option key={language} value={language}>
-                            {SUPPORTED_LANGUAGES[language]}
                         </option>
                       ))}
                     </FormField>

ui/component/publishAdditionalOptions/view.jsx

@@ -8,6 +8,7 @@ import PublishReleaseDate from 'component/publishReleaseDate';
 import LicenseType from './license-type';
 import Card from 'component/common/card';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
+import { sortLanguageMap } from 'util/default-languages';
 
 // @if TARGET='app'
 // import ErrorText from 'component/common/error-text';
@@ -162,9 +163,8 @@ function PublishAdditionalOptions(props: Props) {
                   value={language}
                   onChange={(event) => updatePublishForm({ language: event.target.value })}
                 >
-                  {Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => (
+                  {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
-                    // $FlowFixMe
+                    <option key={langKey} value={langKey}>
-                    <option key={langkey} value={langkey}>
                       {langName}
                     </option>
                   ))}

ui/component/settingLanguage/view.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { FormField } from 'component/common/form';
 import Spinner from 'component/spinner';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
-import { getDefaultLanguage } from 'util/default-languages';
+import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
 
 type Props = {
   language: string,
@@ -15,9 +15,7 @@ type Props = {
 
 function SettingLanguage(props: Props) {
   const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props;
-
   const [previousLanguage, setPreviousLanguage] = useState(null);
-  const languages = SUPPORTED_LANGUAGES;
 
   if (previousLanguage && language !== previousLanguage) {
     setPreviousLanguage(null);
@@ -41,23 +39,11 @@ function SettingLanguage(props: Props) {
           'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
         )}
       >
-        {Object.entries(languages)
+        {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
-          .sort((a, b) => {
-            const lhs = String(a[1]);
-            const rhs = String(b[1]);
-            if (lhs < rhs) return -1;
-            if (lhs > rhs) return 1;
-            return 0;
-          })
-          .map((language) => {
-            const langKey = language[0];
-            const langName = String(language[1]);
-            return (
           <option key={langKey} value={langKey}>
             {langName}
           </option>
-            );
+        ))}
-          })}
       </FormField>
       {previousLanguage && <Spinner type="small" />}
       <FormField

ui/page/youtubeSync/view.jsx

@@ -14,7 +14,7 @@ import { Lbryio } from 'lbryinc';
 import { useHistory } from 'react-router';
 import YoutubeTransferStatus from 'component/youtubeTransferStatus';
 import Nag from 'component/common/nag';
-import { getDefaultLanguage } from 'util/default-languages';
+import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
 
 const STATUS_TOKEN_PARAM = 'status_token';
 const ERROR_MESSAGE_PARAM = 'error_message';
@@ -147,9 +147,9 @@ export default function YoutubeSync(props: Props) {
                   onChange={(event) => setLanguage(event.target.value)}
                   value={language}
                 >
-                  {Object.keys(SUPPORTED_LANGUAGES).map((language) => (
+                  {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
-                    <option key={language} value={language}>
+                    <option key={langKey} value={langKey}>
-                      {SUPPORTED_LANGUAGES[language]}
+                      {langName}
                     </option>
                   ))}
                 </FormField>

ui/util/default-languages.js

@@ -12,3 +12,19 @@ export const getDefaultHomepageKey = () => {
   const language = getDefaultLanguage();
   return (homepages[language] && language) || (homepages[language.slice(0, 2)] && language.slice(0, 2)) || DEFAULT_LANG;
 };
+
+/**
+ * Sorts the language map by their native representation (not by language code).
+ *
+ * @param languages The language map to sort, e.g. "{ 'ja': '日本語', ... }"
+ * @returns {[string, string][]}
+ */
+export function sortLanguageMap(languages) {
+  return Object.entries(languages).sort((a, b) => {
+    const lhs = String(a[1]);
+    const rhs = String(b[1]);
+    if (lhs < rhs) return -1;
+    if (lhs > rhs) return 1;
+    return 0;
+  });
+}