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 : 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) => ( +