Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: improve tracks language labels

Browse source
This commit is contained in:
Tim 2024-12-26 16:50:31 +01:00
parent cd9fdc59f5
commit 702452fc2b
6 changed files with 36 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package-lock.json generated
View file

@ -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": {

2
package.json
View file

@ -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",

2
src/common/index.js
View file

@ -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,

25
src/common/languages.ts Normal file
View file

@ -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,
};

9
src/routes/Player/AudioMenu/AudioMenu.tsx
View file

@ -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']}>
{
typeof languageNames[lang] === 'string' ?
languageNames[lang]
:
lang
}
{ languages.label(lang) }
</div>
{
selectedAudioTrackId === id ?

11
src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
View file

@ -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}>
<div className={styles['language-label']}>{typeof languageNames[lang] === 'string' ? languageNames[lang] : lang}</div>
<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']}>{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') ?
track.label
:
track.lang
languages.label(!track.label.startsWith('http') ? track.label : track.lang)
}
<div className={styles['variant-origin']}>{t(track.origin)}</div>
</div>