From d329139abe8f38c3124c86e4f6eaec0d30e375d1 Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sun, 8 Jun 2025 01:14:43 +0100
Subject: [PATCH 01/13] Fix for #916 - Added System priority and Alphabetic
 Ordering - First Commit Ever :)

---
 .../MultiselectMenu/Dropdown/Dropdown.less    | 79 +++++++++++--------
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 41 +++++++++-
 2 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.less b/src/components/MultiselectMenu/Dropdown/Dropdown.less
index 3bea17d22..71ca36e96 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.less
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.less
@@ -1,44 +1,55 @@
-// Copyright (C) 2017-2024 Smart code 203358507
+    // Copyright (C) 2017-2024 Smart code 203358507
 
-@import (reference) '~stremio/common/screen-sizes.less';
+    @import (reference) '~stremio/common/screen-sizes.less';
 
-@parent-height: 10rem;
+    @parent-height: 10rem;
 
-.dropdown {
-    background: var(--modal-background-color);
-    display: none;
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    box-shadow: var(--outer-glow);
-    border-radius: var(--border-radius);
-    overflow: hidden;
 
-    &.open {
-        display: block;
-        max-height: calc(3.3rem * 7);
-        overflow: auto;
-    }
 
-    .back-button {
-        display: flex;
-        align-items: center;
-        gap: 0 0.5rem;
-        padding: 0.75rem;
-        color: var(--primary-foreground-color);
 
-        .back-button-icon {
-            width: 1.5rem;
-        }
-    }
-}
-
-@media (orientation: landscape) and (max-width: @xsmall) {
     .dropdown {
+        background: var(--modal-background-color);
+        display: none;
+        position: absolute;
+        width: 100%;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        box-shadow: var(--outer-glow);
+        border-radius: var(--border-radius);
+        overflow: hidden;
+
         &.open {
-            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+            display: block;
+            max-height: calc(3.3rem * 7);
+            overflow: auto;
+        }
+
+        .back-button {
+            display: flex;
+            align-items: center;
+            gap: 0 0.5rem;
+            padding: 0.75rem;
+            color: var(--primary-foreground-color);
+
+            .back-button-icon {
+                width: 1.5rem;
+            }
+        }
+
+        .separator-after {
+        border-bottom: thin solid var(--overlay-color);
         }
     }
-}
\ No newline at end of file
+
+
+
+    @media (orientation: landscape) and (max-width: @xsmall) {
+        .dropdown {
+            &.open {
+                max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+            }
+        }
+    }
+
+
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 411ef6ab5..3aebce926 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -61,9 +61,45 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 </Button>
                 : null
             }
-            {options
-                .filter((option: MultiselectMenuOption) => !option.hidden)
+
+                {options
+                    .filter((option: MultiselectMenuOption) => !option.hidden)
+                    .sort((a, b) => {
+                        
+                        const userLocale = navigator.language || 'en';
+                        const userLangCode = userLocale.split('-')[0];
+                        
+                        const getPriority = (option: MultiselectMenuOption) => {
+
+                            const value = String(option.value);
+
+                            // Check if the value matches user's language, if yes put at top of list
+                            const matchesUser = value === userLocale || value.startsWith(userLangCode + '-');
+                            if (matchesUser) return 1;
+
+                            
+                            // Check if it's English, put at the second position
+                            const isEnglish = value.startsWith('en-') || value === 'en';
+                            if (isEnglish) return 2;
+                            
+                            return 3; // Everything else
+                        };
+                        
+                        const aPriority = getPriority(a);
+                        const bPriority = getPriority(b);
+                        
+                        //Lowest number is ranked highest
+                        if (aPriority !== bPriority) {
+                            return aPriority - bPriority;
+                        }
+                       
+                        // Same priority = alphabetical by label eg "english", "french"
+                        return a.label.localeCompare(b.label);
+                    })
                 .map((option: MultiselectMenuOption) => (
+                    <div 
+                    key={String(option.value)}
+                    className={String(option.value) === 'en-US' ? styles['separator-after'] : ''}>
                     <Option
                         key={option.value}
                         ref={handleSetOptionRef(option.value)}
@@ -71,6 +107,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                         onSelect={onSelect}
                         selectedValue={value}
                     />
+                    </div>
                 ))
             }
         </div>

From bd5a8e988f5c514bf2689c438ee3facabbeaa853 Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sun, 8 Jun 2025 13:06:14 +0100
Subject: [PATCH 02/13] Improved Fix for Stremio#916 - Added System priority
 and Alphabetic Ordering on other dropdowns.

---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 75 ++++++++++++++++---
 1 file changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 3aebce926..216261f79 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -17,6 +17,52 @@ type Props = {
     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 { t } = useTranslation();
     const optionsRef = useRef(new Map());
@@ -66,21 +112,28 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                     .filter((option: MultiselectMenuOption) => !option.hidden)
                     .sort((a, b) => {
                         
-                        const userLocale = navigator.language || 'en';
-                        const userLangCode = userLocale.split('-')[0];
+                        const userLocale2 = navigator.language || 'en-US';
+                        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 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
-                            const matchesUser = value === userLocale || value.startsWith(userLangCode + '-');
-                            if (matchesUser) return 1;
+                            if (value === userLocale) return 1;
 
                             
                             // Check if it's English, put at the second position
-                            const isEnglish = value.startsWith('en-') || value === 'en';
-                            if (isEnglish) return 2;
+                            if (value == 'eng') return 2;
                             
                             return 3; // Everything else
                         };
@@ -98,8 +151,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                     })
                 .map((option: MultiselectMenuOption) => (
                     <div 
-                    key={String(option.value)}
-                    className={String(option.value) === 'en-US' ? styles['separator-after'] : ''}>
+                    key={`${String(option.label)}-${String(option.value)}`}
+                    className={String(option.label) === 'English' ? styles['separator-after'] : ''}>
                     <Option
                         key={option.value}
                         ref={handleSetOptionRef(option.value)}

From fb3d4e29fa8217c59ef62fa184fa0efcd0431264 Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sun, 8 Jun 2025 13:58:15 +0100
Subject: [PATCH 03/13] Cleaner Fix for Stremio#916 - Added System priority and
 Alphabetic Ordering on all dropdowns from settings screen.

---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index 216261f79..e32ee4bd7 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -61,6 +61,14 @@ const REVERSE_LANG_CODE_MAP: {[key:string]:string} = {
     'zh': 'zho'
 };
 
+const fourToThreeLangCodeMap = (x:string):string =>{
+    const result = REVERSE_LANG_CODE_MAP[x.split('-')[0]];
+    if(!result){
+        throw new Error(`Unkwown 4-Letter-Lang code: ${x}`);
+    }
+    return result;
+}
+
 // Usage: O(1) lookup
 
 const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
@@ -112,24 +120,17 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                     .filter((option: MultiselectMenuOption) => !option.hidden)
                     .sort((a, b) => {
                         
-                        const userLocale2 = navigator.language || 'en-US';
-                        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 fourLetterUserLocale = navigator.language || 'en-US';
+                        const threeLetterUserLocale:string = fourToThreeLangCodeMap(fourLetterUserLocale) || 'eng';                         
                         
                         const getPriority = (option: MultiselectMenuOption) => {
                             
                             const value2 = String(option.value);
-                            const value = value2.length == 3 ? value2 : (REVERSE_LANG_CODE_MAP[value2.split('-')[0]] || 'eng');
-                            
-                            // console.log(`OPTION VALUE: ${value}`)
+
+                            const value = value2.length == 3 ? value2 : (fourToThreeLangCodeMap(fourLetterUserLocale) || 'eng');
+
                             // Check if the value matches user's language, if yes put at top of list
-                            if (value === userLocale) return 1;
+                            if (value === threeLetterUserLocale) return 1;
 
                             
                             // Check if it's English, put at the second position

From 8ba2c4741e7ed9334b11865a0e25696576c7da65 Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Fri, 20 Jun 2025 12:14:45 +0100
Subject: [PATCH 04/13] Removed CODE_MAP, added fallbacks, simplified
 getPriority, removed hardcoded English. Ordering Logic same, neater

---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 103 +++++-------------
 1 file changed, 30 insertions(+), 73 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index e32ee4bd7..fa628d9a3 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import Option from './Option';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './Dropdown.less';
+import interfaceLanguages from '../../../common/interfaceLanguages.json';
 
 type Props = {
     options: MultiselectMenuOption[];
@@ -17,60 +18,18 @@ type Props = {
     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'
-};
-
-const fourToThreeLangCodeMap = (x:string):string =>{
-    const result = REVERSE_LANG_CODE_MAP[x.split('-')[0]];
-    if(!result){
-        throw new Error(`Unkwown 4-Letter-Lang code: ${x}`);
+function getThreeLetterLangCode(localeCode: string): string {
+    if (!interfaceLanguages || interfaceLanguages.length === 0) {
+        console.warn('Interface languages are not defined or empty. Falling back to "eng".');
+        return 'eng';
     }
-    return result;
+    const language = interfaceLanguages.find(lang => lang.codes.includes(localeCode));
+    if (!language) {
+        console.warn(`Unknown language code: ${localeCode}. Falling back to 'eng'.`);
+        return 'eng';
+    }
+    return language.codes[1];
 }
-
-// Usage: O(1) lookup
-
 const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
     const { t } = useTranslation();
     const optionsRef = useRef(new Map());
@@ -102,6 +61,23 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
         }
     }, [menuOpen, selectedOption]);
 
+    const navigatorLanguageFourLetterCode = navigator.language || 'en-US';
+    const navigatorLanguageThreeLetterCode:string = getThreeLetterLangCode(navigatorLanguageFourLetterCode) || 'eng';
+
+    const getPriority = (option: MultiselectMenuOption) => {
+        if (!option || !option.value) {
+            console.warn('Invalid option or option value:', option);    
+            return 3;
+        }
+        const optionValue = String(option.value);
+        const LangThreeLetterCode = optionValue.length === 3 ? optionValue : getThreeLetterLangCode(optionValue) || 'eng';
+
+        if (LangThreeLetterCode === navigatorLanguageThreeLetterCode) return 1;
+        if (LangThreeLetterCode === 'eng') return 2;
+        if (LangThreeLetterCode === 'None') return 3;
+        return 4;
+    };
+
     return (
         <div
             className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })}
@@ -120,25 +96,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                     .filter((option: MultiselectMenuOption) => !option.hidden)
                     .sort((a, b) => {
                         
-                        const fourLetterUserLocale = navigator.language || 'en-US';
-                        const threeLetterUserLocale:string = fourToThreeLangCodeMap(fourLetterUserLocale) || 'eng';                         
-                        
-                        const getPriority = (option: MultiselectMenuOption) => {
-                            
-                            const value2 = String(option.value);
-
-                            const value = value2.length == 3 ? value2 : (fourToThreeLangCodeMap(fourLetterUserLocale) || 'eng');
-
-                            // Check if the value matches user's language, if yes put at top of list
-                            if (value === threeLetterUserLocale) return 1;
-
-                            
-                            // Check if it's English, put at the second position
-                            if (value == 'eng') return 2;
-                            
-                            return 3; // Everything else
-                        };
-                        
+                        // Sort by priority first
                         const aPriority = getPriority(a);
                         const bPriority = getPriority(b);
                         
@@ -152,8 +110,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                     })
                 .map((option: MultiselectMenuOption) => (
                     <div 
-                    key={`${String(option.label)}-${String(option.value)}`}
-                    className={String(option.label) === 'English' ? styles['separator-after'] : ''}>
+                    key={`${String(option.label)}-${String(option.value)}`}>
                     <Option
                         key={option.value}
                         ref={handleSetOptionRef(option.value)}

From f4a9c88c68960c6c407738ad13726c08f389709f Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sat, 21 Jun 2025 12:42:57 +0100
Subject: [PATCH 05/13] Fixed linting issues, refactored sorting.

---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 79 +++++++++----------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index fa628d9a3..244bd2a2d 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -18,18 +18,27 @@ type Props = {
     onSelect: (value: string | number) => void;
 };
 
-function getThreeLetterLangCode(localeCode: string): string {
-    if (!interfaceLanguages || interfaceLanguages.length === 0) {
-        console.warn('Interface languages are not defined or empty. Falling back to "eng".');
-        return 'eng';
-    }
-    const language = interfaceLanguages.find(lang => lang.codes.includes(localeCode));
+function normalizeLanguageCode(langCode: string): string {
+    const language = interfaceLanguages.find((lang) => lang.codes.includes(langCode));
     if (!language) {
-        console.warn(`Unknown language code: ${localeCode}. Falling back to 'eng'.`);
+        console.warn(`Unknown language code: ${langCode}. Falling back to 'eng'.`);
         return 'eng';
     }
     return language.codes[1];
 }
+
+function getOptionLanguageCode(option: MultiselectMenuOption) {
+    if (option.label === 'None') {
+        return 'None';
+    }
+    if (!option || !option.value) {
+        console.warn('Invalid option or option value:', option);
+        return 'eng';
+    }
+    const optionValue = String(option.value);
+    return optionValue.length === 3 ? optionValue : normalizeLanguageCode(optionValue) || 'eng';
+}
+
 const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
     const { t } = useTranslation();
     const optionsRef = useRef(new Map());
@@ -61,23 +70,28 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
         }
     }, [menuOpen, selectedOption]);
 
-    const navigatorLanguageFourLetterCode = navigator.language || 'en-US';
-    const navigatorLanguageThreeLetterCode:string = getThreeLetterLangCode(navigatorLanguageFourLetterCode) || 'eng';
+    const browserLocale = navigator.language || 'eng-US';
+    const userLanguageCode = normalizeLanguageCode(browserLocale) || 'eng';
 
-    const getPriority = (option: MultiselectMenuOption) => {
-        if (!option || !option.value) {
-            console.warn('Invalid option or option value:', option);    
-            return 3;
-        }
-        const optionValue = String(option.value);
-        const LangThreeLetterCode = optionValue.length === 3 ? optionValue : getThreeLetterLangCode(optionValue) || 'eng';
+    const priorityLanguage = userLanguageCode === 'eng'
+        ? ['eng', 'None']
+        : [userLanguageCode, 'eng', 'None'];
 
-        if (LangThreeLetterCode === navigatorLanguageThreeLetterCode) return 1;
-        if (LangThreeLetterCode === 'eng') return 2;
-        if (LangThreeLetterCode === 'None') return 3;
-        return 4;
+    const isPriorityLanguage = (option: MultiselectMenuOption) => {
+        return priorityLanguage.includes(getOptionLanguageCode(option));
     };
 
+    const visibleOptions = options.filter((option: MultiselectMenuOption) => !option.hidden);
+
+    const sortedOptions = [
+
+        ...priorityLanguage.flatMap((lang) =>
+            visibleOptions.filter((option) => getOptionLanguageCode(option) === lang)),
+
+        ...visibleOptions
+            .filter((option) => !isPriorityLanguage(option))
+            .sort((a, b) => a.label.localeCompare(b.label))
+    ];
     return (
         <div
             className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })}
@@ -92,24 +106,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 : null
             }
 
-                {options
-                    .filter((option: MultiselectMenuOption) => !option.hidden)
-                    .sort((a, b) => {
-                        
-                        // Sort by priority first
-                        const aPriority = getPriority(a);
-                        const bPriority = getPriority(b);
-                        
-                        //Lowest number is ranked highest
-                        if (aPriority !== bPriority) {
-                            return aPriority - bPriority;
-                        }
-                       
-                        // Same priority = alphabetical by label eg "english", "french"
-                        return a.label.localeCompare(b.label);
-                    })
-                .map((option: MultiselectMenuOption) => (
-                    <div 
+            {sortedOptions.map((option: MultiselectMenuOption) => (
+                <div
                     key={`${String(option.label)}-${String(option.value)}`}>
                     <Option
                         key={option.value}
@@ -118,9 +116,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                         onSelect={onSelect}
                         selectedValue={value}
                     />
-                    </div>
-                ))
-            }
+                </div>
+            ))}
         </div>
     );
 };

From 5f82d6e9da70bf042d6774fb5a7b6e516967ef5a Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sat, 21 Jun 2025 12:46:41 +0100
Subject: [PATCH 06/13] Fixed Linting Errors in Dropdown.tsx and removed the
 seperator logic from dropdown and style from less file

---
 .../MultiselectMenu/Dropdown/Dropdown.less    | 79 ++++++++-----------
 1 file changed, 34 insertions(+), 45 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.less b/src/components/MultiselectMenu/Dropdown/Dropdown.less
index 71ca36e96..2373241f2 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.less
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.less
@@ -1,55 +1,44 @@
-    // Copyright (C) 2017-2024 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
-    @import (reference) '~stremio/common/screen-sizes.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
-    @parent-height: 10rem;
+@parent-height: 12rem;
 
+.dropdown {
+    background: var(--modal-background-color);
+    display: none;
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    box-shadow: var(--outer-glow);
+    border-radius: var(--border-radius);
+    overflow: hidden;
 
+    &.open {
+        display: block;
+        max-height: calc(3.3rem * 7);
+        overflow: auto;
+    }
 
+    .back-button {
+        display: flex;
+        align-items: center;
+        gap: 0 0.5rem;
+        padding: 0.75rem;
+        color: var(--primary-foreground-color);
 
+        .back-button-icon {
+            width: 1.5rem;
+        }
+    }
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
     .dropdown {
-        background: var(--modal-background-color);
-        display: none;
-        position: absolute;
-        width: 100%;
-        top: 100%;
-        left: 0;
-        z-index: 10;
-        box-shadow: var(--outer-glow);
-        border-radius: var(--border-radius);
-        overflow: hidden;
-
         &.open {
-            display: block;
-            max-height: calc(3.3rem * 7);
-            overflow: auto;
-        }
-
-        .back-button {
-            display: flex;
-            align-items: center;
-            gap: 0 0.5rem;
-            padding: 0.75rem;
-            color: var(--primary-foreground-color);
-
-            .back-button-icon {
-                width: 1.5rem;
-            }
-        }
-
-        .separator-after {
-        border-bottom: thin solid var(--overlay-color);
+            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
         }
     }
-
-
-
-    @media (orientation: landscape) and (max-width: @xsmall) {
-        .dropdown {
-            &.open {
-                max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
-            }
-        }
-    }
-
-
+}
\ No newline at end of file

From a7a36d6f11586ea2714af09b68ffee280a7ac80d Mon Sep 17 00:00:00 2001
From: Jordan Clarke <jsoclarke@gmail.com>
Date: Sat, 21 Jun 2025 12:54:25 +0100
Subject: [PATCH 07/13] Settings: Default langs priority and Alphabetic
 Ordering #933

---
 .../MultiselectMenu/Dropdown/Dropdown.less    | 25 -------------------
 1 file changed, 25 deletions(-)

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.less b/src/components/MultiselectMenu/Dropdown/Dropdown.less
index 5bfea4b3e..2373241f2 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.less
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.less
@@ -1,23 +1,9 @@
 // Copyright (C) 2017-2024 Smart code 203358507
-// Copyright (C) 2017-2024 Smart code 203358507
 
-@import (reference) '~stremio/common/screen-sizes.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
-@parent-height: 12rem;
 @parent-height: 12rem;
 
-.dropdown {
-    background: var(--modal-background-color);
-    display: none;
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    box-shadow: var(--outer-glow);
-    border-radius: var(--border-radius);
-    overflow: hidden;
 .dropdown {
     background: var(--modal-background-color);
     display: none;
@@ -30,23 +16,12 @@
     border-radius: var(--border-radius);
     overflow: hidden;
 
-    &.open {
-        display: block;
-        max-height: calc(3.3rem * 7);
-        overflow: auto;
-    }
     &.open {
         display: block;
         max-height: calc(3.3rem * 7);
         overflow: auto;
     }
 
-    .back-button {
-        display: flex;
-        align-items: center;
-        gap: 0 0.5rem;
-        padding: 0.75rem;
-        color: var(--primary-foreground-color);
     .back-button {
         display: flex;
         align-items: center;

From f2490ee7751dd58cc371ee07df01fe5cf7ac7e84 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 09:54:57 +0300
Subject: [PATCH 08/13] refactor(Dropdown): clean up

---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     | 57 +++----------------
 .../Dropdown/Option/Option.less               |  4 ++
 .../Dropdown/Option/Option.tsx                | 11 +++-
 .../Dropdown/useLanguageSorting.ts            | 38 +++++++++++++
 4 files changed, 59 insertions(+), 51 deletions(-)
 create mode 100644 src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts

diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index d25533732..ecc0800cb 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import Option from './Option';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './Dropdown.less';
-import interfaceLanguages from '../../../common/interfaceLanguages.json';
+import useLanguageSorting from './useLanguageSorting';
 
 type Props = {
     options: MultiselectMenuOption[];
@@ -18,29 +18,9 @@ type Props = {
     onSelect: (value: any) => void;
 };
 
-function normalizeLanguageCode(langCode: string): string {
-    const language = interfaceLanguages.find((lang) => lang.codes.includes(langCode));
-    if (!language) {
-        console.warn(`Unknown language code: ${langCode}. Falling back to 'eng'.`);
-        return 'eng';
-    }
-    return language.codes[1];
-}
-
-function getOptionLanguageCode(option: MultiselectMenuOption) {
-    if (option.label === 'None') {
-        return 'None';
-    }
-    if (!option || !option.value) {
-        console.warn('Invalid option or option value:', option);
-        return 'eng';
-    }
-    const optionValue = String(option.value);
-    return optionValue.length === 3 ? optionValue : normalizeLanguageCode(optionValue) || 'eng';
-}
-
 const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
     const { t } = useTranslation();
+    const { isLanguageDropdown, sortedOptions } = useLanguageSorting(options);
     const optionsRef = useRef(new Map());
     const containerRef = useRef(null);
 
@@ -70,28 +50,6 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
         }
     }, [menuOpen, selectedOption]);
 
-    const browserLocale = navigator.language || 'eng-US';
-    const userLanguageCode = normalizeLanguageCode(browserLocale) || 'eng';
-
-    const priorityLanguage = userLanguageCode === 'eng'
-        ? ['eng', 'None']
-        : [userLanguageCode, 'eng', 'None'];
-
-    const isPriorityLanguage = (option: MultiselectMenuOption) => {
-        return priorityLanguage.includes(getOptionLanguageCode(option));
-    };
-
-    const visibleOptions = options.filter((option: MultiselectMenuOption) => !option.hidden);
-
-    const sortedOptions = [
-
-        ...priorityLanguage.flatMap((lang) =>
-            visibleOptions.filter((option) => getOptionLanguageCode(option) === lang)),
-
-        ...visibleOptions
-            .filter((option) => !isPriorityLanguage(option))
-            .sort((a, b) => a.label.localeCompare(b.label))
-    ];
     return (
         <div
             className={classNames(styles['dropdown'], { [styles['open']]: menuOpen })}
@@ -105,10 +63,9 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 </Button>
                 : null
             }
-
-            {sortedOptions.map((option: MultiselectMenuOption) => (
-                <div
-                    key={`${String(option.label)}-${String(option.value)}`}>
+            {(isLanguageDropdown ? sortedOptions : options)
+                ?.filter((option: MultiselectMenuOption) => !option.hidden)
+                .map((option: MultiselectMenuOption) => (
                     <Option
                         key={option.value}
                         ref={handleSetOptionRef(option.value)}
@@ -116,8 +73,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                         onSelect={onSelect}
                         selectedValue={value}
                     />
-                </div>
-            ))}
+                ))
+            }
         </div>
     );
 };
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.less b/src/components/MultiselectMenu/Dropdown/Option/Option.less
index a0ee1743f..ea69df18d 100644
--- a/src/components/MultiselectMenu/Dropdown/Option/Option.less
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.less
@@ -23,6 +23,10 @@
         opacity: 1;
     }
 
+    &.separator {
+        border-bottom: thin solid var(--overlay-color);
+    }
+
     &:hover {
         background-color: rgba(255, 255, 255, 0.15);
     }
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
index 5d43fb45b..0abd6d3c7 100644
--- a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import { Button } from 'stremio/components';
 import styles from './Option.less';
 import Icon from '@stremio/stremio-icons/react';
+import useLanguageSorting from '../useLanguageSorting';
+import interfaceLanguages from 'stremio/common/interfaceLanguages.json';
 
 type Props = {
     option: MultiselectMenuOption;
@@ -13,8 +15,15 @@ type Props = {
 };
 
 const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
+    const { userLangCode } = useLanguageSorting();
+
     const selected = useMemo(() => option?.value === selectedValue, [option, selectedValue]);
 
+    const separator = useMemo(() => {
+        const lang = interfaceLanguages.find((l) => l.name === option?.label);
+        return lang ? userLangCode.some((code) => lang.codes.includes(code)) : false;
+    }, [option, userLangCode]);
+
     const handleClick = useCallback(() => {
         onSelect(option.value);
     }, [onSelect, option.value]);
@@ -22,7 +31,7 @@ const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, on
     return (
         <Button
             ref={ref}
-            className={classNames(styles['option'], { [styles['selected']]: selected })}
+            className={classNames(styles['option'], { [styles['selected']]: selected }, { [styles['separator']]: separator })}
             key={option.id}
             onClick={handleClick}
             aria-selected={selected}
diff --git a/src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts b/src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts
new file mode 100644
index 000000000..3f1ed39d0
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import interfaceLanguages from 'stremio/common/interfaceLanguages.json';
+
+const useLanguageSorting = (options?: MultiselectMenuOption[]) => {
+    const userLangCode = useMemo(() => {
+        const lang = interfaceLanguages.find((l) => l.codes.includes(navigator.language || 'en-US'));
+        if (lang) {
+            const threeLetter = lang.codes[1] || 'eng';
+            const fullLocale = navigator.language || 'en-US';
+            return [threeLetter, fullLocale];
+        }
+        return ['eng'];
+    }, []);
+
+    const isLanguageDropdown = useMemo(() => {
+        return options?.some((opt) => interfaceLanguages.some((l) => l.name === opt.label));
+    }, [options]);
+
+    const sortedOptions = useMemo(() => {
+        if (!isLanguageDropdown || !options) return options;
+
+        const matchingIndex = options.findIndex((opt) => {
+            const lang = interfaceLanguages.find((l) => l.name === opt.label);
+            return userLangCode.some((code) => lang?.codes.includes(code));
+        });
+
+        if (matchingIndex === -1) return options;
+
+        const matchingOption = options[matchingIndex];
+        const otherOptions = options.filter((_, index) => index !== matchingIndex);
+
+        return [matchingOption, ...otherOptions];
+    }, [options, userLangCode, isLanguageDropdown]);
+
+    return { userLangCode, isLanguageDropdown, sortedOptions };
+};
+
+export default useLanguageSorting;

From f49a243009e227ea5ba673cd79a0f3b520f76862 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 13:01:11 +0300
Subject: [PATCH 09/13] refactor(Settings): simplify handling for langs

---
 src/common/index.js                           |  2 ++
 .../Dropdown => common}/useLanguageSorting.ts |  4 +---
 .../MultiselectMenu/Dropdown/Dropdown.tsx     |  6 ++---
 .../Dropdown/Option/Option.less               |  4 ----
 .../Dropdown/Option/Option.tsx                | 11 +--------
 .../Settings/General/useGeneralOptions.ts     | 15 ++++++++----
 .../Settings/Player/usePlayerOptions.ts       | 24 ++++++++++---------
 7 files changed, 29 insertions(+), 37 deletions(-)
 rename src/{components/MultiselectMenu/Dropdown => common}/useLanguageSorting.ts (90%)

diff --git a/src/common/index.js b/src/common/index.js
index 55ccfe045..3354a64e4 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -26,6 +26,7 @@ const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
 const { default: useOrientation } = require('./useOrientation');
+const { default: useLanguageSorting } = require('./useLanguageSorting');
 
 module.exports = {
     FileDropProvider,
@@ -59,4 +60,5 @@ module.exports = {
     useTorrent,
     useTranslate,
     useOrientation,
+    useLanguageSorting,
 };
diff --git a/src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts b/src/common/useLanguageSorting.ts
similarity index 90%
rename from src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts
rename to src/common/useLanguageSorting.ts
index 3f1ed39d0..44c8927bd 100644
--- a/src/components/MultiselectMenu/Dropdown/useLanguageSorting.ts
+++ b/src/common/useLanguageSorting.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import interfaceLanguages from 'stremio/common/interfaceLanguages.json';
 
-const useLanguageSorting = (options?: MultiselectMenuOption[]) => {
+const useLanguageSorting = (options: MultiselectMenuOption[]) => {
     const userLangCode = useMemo(() => {
         const lang = interfaceLanguages.find((l) => l.codes.includes(navigator.language || 'en-US'));
         if (lang) {
@@ -17,8 +17,6 @@ const useLanguageSorting = (options?: MultiselectMenuOption[]) => {
     }, [options]);
 
     const sortedOptions = useMemo(() => {
-        if (!isLanguageDropdown || !options) return options;
-
         const matchingIndex = options.findIndex((opt) => {
             const lang = interfaceLanguages.find((l) => l.name === opt.label);
             return userLangCode.some((code) => lang?.codes.includes(code));
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
index ecc0800cb..00fd3ff6a 100644
--- a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import Option from './Option';
 import Icon from '@stremio/stremio-icons/react';
 import styles from './Dropdown.less';
-import useLanguageSorting from './useLanguageSorting';
 
 type Props = {
     options: MultiselectMenuOption[];
@@ -20,7 +19,6 @@ type Props = {
 
 const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props) => {
     const { t } = useTranslation();
-    const { isLanguageDropdown, sortedOptions } = useLanguageSorting(options);
     const optionsRef = useRef(new Map());
     const containerRef = useRef(null);
 
@@ -63,8 +61,8 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 </Button>
                 : null
             }
-            {(isLanguageDropdown ? sortedOptions : options)
-                ?.filter((option: MultiselectMenuOption) => !option.hidden)
+            {options
+                .filter((option: MultiselectMenuOption) => !option.hidden)
                 .map((option: MultiselectMenuOption) => (
                     <Option
                         key={option.value}
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.less b/src/components/MultiselectMenu/Dropdown/Option/Option.less
index ea69df18d..a0ee1743f 100644
--- a/src/components/MultiselectMenu/Dropdown/Option/Option.less
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.less
@@ -23,10 +23,6 @@
         opacity: 1;
     }
 
-    &.separator {
-        border-bottom: thin solid var(--overlay-color);
-    }
-
     &:hover {
         background-color: rgba(255, 255, 255, 0.15);
     }
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
index 0abd6d3c7..5d43fb45b 100644
--- a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
@@ -5,8 +5,6 @@ import classNames from 'classnames';
 import { Button } from 'stremio/components';
 import styles from './Option.less';
 import Icon from '@stremio/stremio-icons/react';
-import useLanguageSorting from '../useLanguageSorting';
-import interfaceLanguages from 'stremio/common/interfaceLanguages.json';
 
 type Props = {
     option: MultiselectMenuOption;
@@ -15,15 +13,8 @@ type Props = {
 };
 
 const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, onSelect }, ref) => {
-    const { userLangCode } = useLanguageSorting();
-
     const selected = useMemo(() => option?.value === selectedValue, [option, selectedValue]);
 
-    const separator = useMemo(() => {
-        const lang = interfaceLanguages.find((l) => l.name === option?.label);
-        return lang ? userLangCode.some((code) => lang.codes.includes(code)) : false;
-    }, [option, userLangCode]);
-
     const handleClick = useCallback(() => {
         onSelect(option.value);
     }, [onSelect, option.value]);
@@ -31,7 +22,7 @@ const Option = forwardRef<HTMLButtonElement, Props>(({ option, selectedValue, on
     return (
         <Button
             ref={ref}
-            className={classNames(styles['option'], { [styles['selected']]: selected }, { [styles['separator']]: separator })}
+            className={classNames(styles['option'], { [styles['selected']]: selected })}
             key={option.id}
             onClick={handleClick}
             aria-selected={selected}
diff --git a/src/routes/Settings/General/useGeneralOptions.ts b/src/routes/Settings/General/useGeneralOptions.ts
index 59e7b40c1..efe9a1330 100644
--- a/src/routes/Settings/General/useGeneralOptions.ts
+++ b/src/routes/Settings/General/useGeneralOptions.ts
@@ -1,15 +1,20 @@
 import { useMemo } from 'react';
-import { interfaceLanguages } from 'stremio/common';
+import { interfaceLanguages, useLanguageSorting } from 'stremio/common';
 import { useServices } from 'stremio/services';
 
 const useGeneralOptions = (profile: Profile) => {
     const { core } = useServices();
 
-    const interfaceLanguageSelect = useMemo(() => ({
-        options: interfaceLanguages.map(({ name, codes }) => ({
+    const interfaceLanguageOptions = useMemo(() => 
+        interfaceLanguages.map(({ name, codes }) => ({
             value: codes[0],
             label: name,
-        })),
+        })), []);
+
+    const { sortedOptions } = useLanguageSorting(interfaceLanguageOptions);
+
+    const interfaceLanguageSelect = useMemo(() => ({
+        options: sortedOptions,
         value: interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage,
         onSelect: (value: string) => {
             core.transport.dispatch({
@@ -23,7 +28,7 @@ const useGeneralOptions = (profile: Profile) => {
                 }
             });
         }
-    }), [profile.settings]);
+    }), [profile.settings, sortedOptions]);
 
     const escExitFullscreenToggle = useMemo(() => ({
         checked: profile.settings.escExitFullscreen,
diff --git a/src/routes/Settings/Player/usePlayerOptions.ts b/src/routes/Settings/Player/usePlayerOptions.ts
index 04c263d54..7c417079c 100644
--- a/src/routes/Settings/Player/usePlayerOptions.ts
+++ b/src/routes/Settings/Player/usePlayerOptions.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useServices } from 'stremio/services';
-import { CONSTANTS, languageNames, usePlatform } from 'stremio/common';
+import { CONSTANTS, languageNames, usePlatform, useLanguageSorting } from 'stremio/common';
 
 const LANGUAGES_NAMES: Record<string, string> = languageNames;
 
@@ -10,13 +10,18 @@ const usePlayerOptions = (profile: Profile) => {
     const { core } = useServices();
     const platform = usePlatform();
 
+    const languageOptions = useMemo(() => 
+        Object.keys(LANGUAGES_NAMES).map((code) => ({
+            value: code,
+            label: LANGUAGES_NAMES[code]
+        })), []);
+
+    const { sortedOptions: sortedLanguageOptions } = useLanguageSorting(languageOptions);
+
     const subtitlesLanguageSelect = useMemo(() => ({
         options: [
             { value: null, label: t('NONE') },
-            ...Object.keys(LANGUAGES_NAMES).map((code) => ({
-                value: code,
-                label: LANGUAGES_NAMES[code]
-            }))
+            ...sortedLanguageOptions
         ],
         value: profile.settings.subtitlesLanguage,
         onSelect: (value: string) => {
@@ -31,7 +36,7 @@ const usePlayerOptions = (profile: Profile) => {
                 }
             });
         }
-    }), [profile.settings]);
+    }), [profile.settings, sortedLanguageOptions, t]);
 
     const subtitlesSizeSelect = useMemo(() => ({
         options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
@@ -105,10 +110,7 @@ const usePlayerOptions = (profile: Profile) => {
     }), [profile.settings]);
 
     const audioLanguageSelect = useMemo(() => ({
-        options: Object.keys(LANGUAGES_NAMES).map((code) => ({
-            value: code,
-            label: LANGUAGES_NAMES [code]
-        })),
+        options: sortedLanguageOptions,
         value: profile.settings.audioLanguage,
         onSelect: (value: string) => {
             core.transport.dispatch({
@@ -122,7 +124,7 @@ const usePlayerOptions = (profile: Profile) => {
                 }
             });
         }
-    }), [profile.settings]);
+    }), [profile.settings, sortedLanguageOptions]);
 
     const surroundSoundToggle = useMemo(() => ({
         checked: profile.settings.surroundSound,

From 7fb0a8c1be78f4525ec1059f59633caa287d7fab Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 13:02:12 +0300
Subject: [PATCH 10/13] remove(usePlayerOptions): unnecessary dep

---
 src/routes/Settings/Player/usePlayerOptions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Settings/Player/usePlayerOptions.ts b/src/routes/Settings/Player/usePlayerOptions.ts
index 7c417079c..c376b51d0 100644
--- a/src/routes/Settings/Player/usePlayerOptions.ts
+++ b/src/routes/Settings/Player/usePlayerOptions.ts
@@ -36,7 +36,7 @@ const usePlayerOptions = (profile: Profile) => {
                 }
             });
         }
-    }), [profile.settings, sortedLanguageOptions, t]);
+    }), [profile.settings, sortedLanguageOptions]);
 
     const subtitlesSizeSelect = useMemo(() => ({
         options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({

From c726398402bd2714fe29daf87bc484f3b64637d6 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 13:22:32 +0300
Subject: [PATCH 11/13] chore: run lint

---
 .../Settings/General/useGeneralOptions.ts     | 41 ++++++++++---------
 .../Settings/Player/usePlayerOptions.ts       |  2 +-
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/routes/Settings/General/useGeneralOptions.ts b/src/routes/Settings/General/useGeneralOptions.ts
index efe9a1330..84e0bcb9c 100644
--- a/src/routes/Settings/General/useGeneralOptions.ts
+++ b/src/routes/Settings/General/useGeneralOptions.ts
@@ -5,17 +5,20 @@ import { useServices } from 'stremio/services';
 const useGeneralOptions = (profile: Profile) => {
     const { core } = useServices();
 
-    const interfaceLanguageOptions = useMemo(() => 
+    const interfaceLanguageOptions = useMemo(() =>
         interfaceLanguages.map(({ name, codes }) => ({
             value: codes[0],
             label: name,
-        })), []);
+        })),
+    []);
 
     const { sortedOptions } = useLanguageSorting(interfaceLanguageOptions);
 
     const interfaceLanguageSelect = useMemo(() => ({
         options: sortedOptions,
-        value: interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] || profile.settings.interfaceLanguage,
+        value:
+            interfaceLanguages.find(({ codes }) => codes[1] === profile.settings.interfaceLanguage)?.codes?.[0] ||
+            profile.settings.interfaceLanguage,
         onSelect: (value: string) => {
             core.transport.dispatch({
                 action: 'Ctx',
@@ -23,11 +26,11 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        interfaceLanguage: value
-                    }
-                }
+                        interfaceLanguage: value,
+                    },
+                },
             });
-        }
+        },
     }), [profile.settings, sortedOptions]);
 
     const escExitFullscreenToggle = useMemo(() => ({
@@ -39,11 +42,11 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        escExitFullscreen: !profile.settings.escExitFullscreen
-                    }
-                }
+                        escExitFullscreen: !profile.settings.escExitFullscreen,
+                    },
+                },
             });
-        }
+        },
     }), [profile.settings]);
 
     const quitOnCloseToggle = useMemo(() => ({
@@ -55,11 +58,11 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        quitOnClose: !profile.settings.quitOnClose
-                    }
-                }
+                        quitOnClose: !profile.settings.quitOnClose,
+                    },
+                },
             });
-        }
+        },
     }), [profile.settings]);
 
     const hideSpoilersToggle = useMemo(() => ({
@@ -71,11 +74,11 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        hideSpoilers: !profile.settings.hideSpoilers
-                    }
-                }
+                        hideSpoilers: !profile.settings.hideSpoilers,
+                    },
+                },
             });
-        }
+        },
     }), [profile.settings]);
 
     return {
diff --git a/src/routes/Settings/Player/usePlayerOptions.ts b/src/routes/Settings/Player/usePlayerOptions.ts
index c376b51d0..982c5138e 100644
--- a/src/routes/Settings/Player/usePlayerOptions.ts
+++ b/src/routes/Settings/Player/usePlayerOptions.ts
@@ -10,7 +10,7 @@ const usePlayerOptions = (profile: Profile) => {
     const { core } = useServices();
     const platform = usePlatform();
 
-    const languageOptions = useMemo(() => 
+    const languageOptions = useMemo(() =>
         Object.keys(LANGUAGES_NAMES).map((code) => ({
             value: code,
             label: LANGUAGES_NAMES[code]

From 41a5bb7cef3e4e49960857e9112ea15cab082bd8 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 22:18:09 +0300
Subject: [PATCH 12/13] chore: remove unnecessary ","

---
 .../Settings/General/useGeneralOptions.ts     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/routes/Settings/General/useGeneralOptions.ts b/src/routes/Settings/General/useGeneralOptions.ts
index 84e0bcb9c..d9bbd6387 100644
--- a/src/routes/Settings/General/useGeneralOptions.ts
+++ b/src/routes/Settings/General/useGeneralOptions.ts
@@ -26,11 +26,11 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        interfaceLanguage: value,
-                    },
-                },
+                        interfaceLanguage: value
+                    }
+                }
             });
-        },
+        }
     }), [profile.settings, sortedOptions]);
 
     const escExitFullscreenToggle = useMemo(() => ({
@@ -43,10 +43,10 @@ const useGeneralOptions = (profile: Profile) => {
                     args: {
                         ...profile.settings,
                         escExitFullscreen: !profile.settings.escExitFullscreen,
-                    },
-                },
+                    }
+                }
             });
-        },
+        }
     }), [profile.settings]);
 
     const quitOnCloseToggle = useMemo(() => ({
@@ -59,10 +59,10 @@ const useGeneralOptions = (profile: Profile) => {
                     args: {
                         ...profile.settings,
                         quitOnClose: !profile.settings.quitOnClose,
-                    },
-                },
+                    }
+                }
             });
-        },
+        }
     }), [profile.settings]);
 
     const hideSpoilersToggle = useMemo(() => ({
@@ -75,10 +75,10 @@ const useGeneralOptions = (profile: Profile) => {
                     args: {
                         ...profile.settings,
                         hideSpoilers: !profile.settings.hideSpoilers,
-                    },
-                },
+                    }
+                }
             });
-        },
+        }
     }), [profile.settings]);
 
     return {

From 5eff16695cb9a941b26de86152da7fbc426fa007 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 22:18:42 +0300
Subject: [PATCH 13/13] chore: remove unnecessary "," (2)

---
 src/routes/Settings/General/useGeneralOptions.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Settings/General/useGeneralOptions.ts b/src/routes/Settings/General/useGeneralOptions.ts
index d9bbd6387..a4ab84c5e 100644
--- a/src/routes/Settings/General/useGeneralOptions.ts
+++ b/src/routes/Settings/General/useGeneralOptions.ts
@@ -42,7 +42,7 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        escExitFullscreen: !profile.settings.escExitFullscreen,
+                        escExitFullscreen: !profile.settings.escExitFullscreen
                     }
                 }
             });
@@ -58,7 +58,7 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        quitOnClose: !profile.settings.quitOnClose,
+                        quitOnClose: !profile.settings.quitOnClose
                     }
                 }
             });
@@ -74,7 +74,7 @@ const useGeneralOptions = (profile: Profile) => {
                     action: 'UpdateSettings',
                     args: {
                         ...profile.settings,
-                        hideSpoilers: !profile.settings.hideSpoilers,
+                        hideSpoilers: !profile.settings.hideSpoilers
                     }
                 }
             });