refactor: improve tracks language labels

package-lock.json

@@ -23,7 +23,7 @@
                 "filter-invalid-dom-props": "3.0.1",
                 "hat": "^0.0.3",
                 "i18next": "^24.0.5",
-                "langs": "^2.0.0",
+                "langs": "github:Stremio/nodejs-langs",
                 "lodash.debounce": "4.0.8",
                 "lodash.intersection": "4.4.0",
                 "lodash.isequal": "4.5.0",
@@ -10263,6 +10263,7 @@
         },
         "node_modules/langs": {
             "version": "2.0.0",
+            "resolved": "git+ssh://git@github.com/Stremio/nodejs-langs.git#584beab4032469f6b76be1d119a0ab25f31f4ab6",
             "license": "MIT"
         },
         "node_modules/launch-editor": {

package.json

@@ -27,7 +27,7 @@
         "filter-invalid-dom-props": "3.0.1",
         "hat": "^0.0.3",
         "i18next": "^24.0.5",
-        "langs": "^2.0.0",
+        "langs": "github:Stremio/nodejs-langs",
         "lodash.debounce": "4.0.8",
         "lodash.intersection": "4.4.0",
         "lodash.isequal": "4.5.0",

src/common/index.js

@@ -37,6 +37,7 @@ const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
 const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const interfaceLanguages = require('./interfaceLanguages.json');
 const languageNames = require('./languageNames.json');
+const languages = require('./languages');
 const routesRegexp = require('./routesRegexp');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
@@ -94,6 +95,7 @@ module.exports = {
     getVisibleChildrenRange,
     interfaceLanguages,
     languageNames,
+    languages,
     routesRegexp,
     useAnimationFrame,
     useBinaryState,

src/common/languages.ts

@@ -0,0 +1,25 @@
+import langs from 'langs';
+
+const all = langs.all().map((lang) => ({
+    ...lang,
+    code: lang['2'],
+    label: lang.local,
+    alpha2: lang['1'],
+    alpha3: [lang['2'], lang['2B'], lang['2T'], lang['3']],
+    locale: lang['locale'],
+}));
+
+const find = (code: string) => {
+    return all.find(({ alpha2, alpha3, locale }) => [alpha2, ...alpha3, locale].includes(code));
+};
+
+const label = (code: string) => {
+    const language = find(code);
+    return language?.label ?? code;
+};
+
+export {
+    all,
+    find,
+    label,
+};

src/routes/Player/AudioMenu/AudioMenu.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { Button, languageNames } from 'stremio/common';
+import { Button, languages } from 'stremio/common';
 import styles from './AudioMenu.less';
 
 type Props = {
@@ -41,12 +41,7 @@ const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackS
                                 onClick={onAudioTrackClick}
                             >
                                 <div className={styles['label']}>
-                                    {
+                                    { languages.label(lang) }
-                                        typeof languageNames[lang] === 'string' ?
-                                            languageNames[lang]
-                                            :
-                                            lang
-                                    }
                                 </div>
                                 {
                                     selectedAudioTrackId === id ?

src/routes/Player/SubtitlesMenu/SubtitlesMenu.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { Button, CONSTANTS, comparatorWithPriorities, languageNames } = require('stremio/common');
+const { Button, CONSTANTS, comparatorWithPriorities, languages } = require('stremio/common');
 const DiscreteSelectInput = require('./DiscreteSelectInput');
 const styles = require('./styles');
 const { t } = require('i18next');
@@ -159,8 +159,8 @@ const SubtitlesMenu = React.memo((props) => {
                         }
                     </Button>
                     {subtitlesLanguages.map((lang, index) => (
-                        <Button key={index} title={typeof languageNames[lang] === 'string' ? languageNames[lang] : lang} className={classnames(styles['language-option'], { 'selected': selectedSubtitlesLanguage === lang })} data-lang={lang} onClick={subtitlesLanguageOnClick}>
+                        <Button key={index} title={languages.label(lang)} className={classnames(styles['language-option'], { 'selected': selectedSubtitlesLanguage === lang })} data-lang={lang} onClick={subtitlesLanguageOnClick}>
-                            <div className={styles['language-label']}>{typeof languageNames[lang] === 'string' ? languageNames[lang] : lang}</div>
+                            <div className={styles['language-label']}>{languages.label(lang)}</div>
                             {
                                 selectedSubtitlesLanguage === lang ?
                                     <div className={styles['icon']} />
@@ -180,10 +180,7 @@ const SubtitlesMenu = React.memo((props) => {
                                 <Button key={index} title={track.label} className={classnames(styles['variant-option'], { 'selected': props.selectedSubtitlesTrackId === track.id || props.selectedExtraSubtitlesTrackId === track.id })} data-id={track.id} data-origin={track.origin} data-embedded={track.embedded} onClick={subtitlesTrackOnClick}>
                                     <div className={styles['variant-label']}>
                                         {
-                                            typeof track.label === 'string' && !track.label.startsWith('http') ?
+                                            languages.label(!track.label.startsWith('http') ? track.label : track.lang)
-                                                track.label
-                                                :
-                                                track.lang
                                         }
                                         <div className={styles['variant-origin']}>{t(track.origin)}</div>
                                     </div>