sort app language to top of subtitle languages

This commit is contained in:
Pas 2026-03-02 15:35:03 -07:00
parent 39e5329ef3
commit 4630d7822b
3 changed files with 25 additions and 9 deletions

View file

@ -260,6 +260,7 @@ export function CaptionOption(props: CaptionOptionProps) {
// Hook to filter and sort subtitle list with search
export function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
const { t: translate } = useTranslation();
const appLanguage = useLanguageStore((s) => s.language);
const unknownChoice = translate("player.menus.subtitles.unknownLanguage");
return useMemo(() => {
const input = subs.map((t) => ({
@ -267,7 +268,10 @@ export function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
languageName:
getPrettyLanguageNameFromLocale(t.language) ?? unknownChoice,
}));
const sorted = sortLangCodes(input.map((t) => t.language));
const sorted = sortLangCodes(
input.map((t) => t.language),
appLanguage,
);
let results = input.sort((a, b) => {
return sorted.indexOf(a.language) - sorted.indexOf(b.language);
});
@ -283,7 +287,7 @@ export function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
}
return results;
}, [subs, searchQuery, unknownChoice]);
}, [subs, searchQuery, unknownChoice, appLanguage]);
}
export function CustomCaptionOption() {
@ -529,8 +533,12 @@ export function CaptionsView({
// Sort with app language first, then alphabetically
return sortedGroups.sort((a, b) => {
// App language always comes first
if (a.language === appLanguage) return -1;
if (b.language === appLanguage) return 1;
const isALang =
a.language === appLanguage || a.language.startsWith(`${appLanguage}-`);
const isBLang =
b.language === appLanguage || b.language.startsWith(`${appLanguage}-`);
if (isALang && !isBLang) return -1;
if (!isALang && isBLang) return 1;
// Then sort alphabetically
return a.languageName.localeCompare(b.languageName);

View file

@ -47,7 +47,10 @@ export function PreferencesPart(props: {
const { t } = useTranslation();
const { showModal } = useOverlayStack();
const [isSourceListExpanded, setIsSourceListExpanded] = useState(false);
const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
const sorted = sortLangCodes(
appLanguageOptions.map((item) => item.code),
props.language,
);
const allowAutoplay = isAutoplayAllowed();

View file

@ -123,16 +123,21 @@ export function getPrettyLanguageNameFromLocale(locale: string): string | null {
/**
* Sort locale codes by occurrence, rest on alphabetical order
* @param langCodes list language codes to sort
* @param appLanguage optional app language to prioritize
* @returns sorted version of inputted list
*/
export function sortLangCodes(langCodes: string[]) {
const languagesOrder = [...languageOrder].reverse(); // Reverse is necessary, not sure why
export function sortLangCodes(langCodes: string[], appLanguage?: string) {
const languagesOrder = [...languageOrder];
if (appLanguage && !languagesOrder.includes(appLanguage)) {
languagesOrder.unshift(appLanguage);
}
const reversedOrder = [...languagesOrder].reverse(); // Reverse is necessary, not sure why
const results = langCodes.sort((a, b) => {
const langOrderA = languagesOrder.findIndex(
const langOrderA = reversedOrder.findIndex(
(v) => a.startsWith(`${v}-`) || a === v,
);
const langOrderB = languagesOrder.findIndex(
const langOrderB = reversedOrder.findIndex(
(v) => b.startsWith(`${v}-`) || b === v,
);
if (langOrderA !== -1 || langOrderB !== -1) return langOrderB - langOrderA;