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

Fix for #916 - Added System priority and Alphabetic Ordering - First Commit Ever :)

Browse source
This commit is contained in:
Jordan Clarke 2025-06-08 01:14:43 +01:00
parent d75c9b1d99
commit d329139abe
2 changed files with 84 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/components/MultiselectMenu/Dropdown/Dropdown.less
View file

@ -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);
}
}
}
@media (orientation: landscape) and (max-width: @xsmall) {
.dropdown {
&.open {
max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
}
}
}

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

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