Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-14 02:50:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improved Fix for Stremio#916 - Added System priority and Alphabetic Ordering on other dropdowns.

Browse source
This commit is contained in:
Jordan Clarke 2025-06-08 13:06:14 +01:00
parent d329139abe
commit bd5a8e988f
1 changed files with 64 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/components/MultiselectMenu/Dropdown/Dropdown.tsx
View file

@ -17,6 +17,52 @@ type Props = {
onSelect: (value: string | number) => void; onSelect: (value: string | number) => void;
}; };
const REVERSE_LANG_CODE_MAP: {[key:string]:string} = {
'ar': 'ara',
'bg': 'bul',
'bn': 'ben',
'ca': 'cat',
'cs': 'ces',
'da': 'dan',
'de': 'deu',
'el': 'ell',
'en': 'eng',
'eo': 'epo',
'es': 'spa',
'eu': 'eus',
'fa': 'fas',
'fr': 'fre',
'he': 'heb',
'hi': 'hin',
'hr': 'hrv',
'hu': 'hun',
'id': 'ind',
'it': 'ita',
'ja': 'jpn',
'ko': 'kor',
'mk': 'mkd',
'my': 'mya',
'nb': 'nob',
'nl': 'nld',
'nn': 'nno',
'pl': 'pol',
'pt': 'por',
'ru': 'rus',
'sv': 'swe',
'sl': 'slv',
'sr': 'srp',
'te': 'tel',
'tr': 'tur',
'uk': 'ukr',
'vi': 'vie',
'zh': 'zho'
};
// Usage: O(1) lookup
const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => { const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const optionsRef = useRef(new Map()); const optionsRef = useRef(new Map());
@ -66,21 +112,28 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
.filter((option: MultiselectMenuOption) => !option.hidden) .filter((option: MultiselectMenuOption) => !option.hidden)
.sort((a, b) => { .sort((a, b) => {
const userLocale = navigator.language || 'en'; const userLocale2 = navigator.language || 'en-US';
const userLangCode = userLocale.split('-')[0]; const userLocale:string = REVERSE_LANG_CODE_MAP[userLocale2.split('-')[0]] || 'eng'; // this is 3 leter code
// console.log(`USERBEFORE : ${userLocale2}, USERAFTER : ${userLocale}`)
// const userLangCode = userLocale.split('-')[0];
// console.log(`VALUE : ${a.value}, LABEL : ${a.label}`);
const getPriority = (option: MultiselectMenuOption) => { const getPriority = (option: MultiselectMenuOption) => {
const value = String(option.value); const value2 = String(option.value);
const value = value2.length == 3 ? value2 : (REVERSE_LANG_CODE_MAP[value2.split('-')[0]] || 'eng');
// console.log(`OPTION VALUE: ${value}`)
// Check if the value matches user's language, if yes put at top of list // Check if the value matches user's language, if yes put at top of list
const matchesUser = value === userLocale || value.startsWith(userLangCode + '-'); if (value === userLocale) return 1;
if (matchesUser) return 1;
// Check if it's English, put at the second position // Check if it's English, put at the second position
const isEnglish = value.startsWith('en-') || value === 'en'; if (value == 'eng') return 2;
if (isEnglish) return 2;
return 3; // Everything else return 3; // Everything else
}; };
@ -98,8 +151,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
}) })
.map((option: MultiselectMenuOption) => ( .map((option: MultiselectMenuOption) => (
<div <div
key={String(option.value)} key={`${String(option.label)}-${String(option.value)}`}
className={String(option.value) === 'en-US' ? styles['separator-after'] : ''}> className={String(option.label) === 'English' ? styles['separator-after'] : ''}>
<Option <Option
key={option.value} key={option.value}
ref={handleSetOptionRef(option.value)} ref={handleSetOptionRef(option.value)}