web/audio-sub-language: refactor, prioritize popular languages

now the page with a picker won't freeze if intl can't recognize a language code & subtitle settings item will be localized. dub & sub now use their own arrays of languages (first one needs "original" as default and second one needs "none" as default).
This commit is contained in:
wukko 2025-06-20 15:42:50 +06:00
parent c9fdfca239
commit 1e5cc353e4
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
2 changed files with 49 additions and 23 deletions

View File

@ -2,22 +2,26 @@ import { t } from "$lib/i18n/translations";
import { get } from "svelte/store";
const languages = [
// most popular languages are first, according to
// https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers
"en", "es", "pt", "fr", "ru",
"zh", "vi", "hi", "bn", "ja",
"af", "am", "ar", "as", "az",
"be", "bg", "bn", "bs", "ca",
"cs", "da", "de", "el", "en",
"es", "et", "eu", "fa", "fi",
"fil", "fr", "gl", "gu", "hi",
"be", "bg", "bs", "ca", "cs",
"da", "de", "el", "et", "eu",
"fa", "fi", "fil", "gl", "gu",
"hr", "hu", "hy", "id", "is",
"it", "iw", "ja", "ka", "kk",
"km", "kn", "ko", "ky", "lo",
"lt", "lv", "mk", "ml", "mn",
"mr", "ms", "my", "no", "ne",
"nl", "or", "pa", "pl", "pt",
"ro", "ru", "si", "sk", "sl",
"sq", "sr", "sv", "sw", "ta",
"te", "th", "tr", "uk", "ur",
"uz", "vi", "zh", "zh-Hans", "zh-Hant",
"zh-CN", "zh-HK", "zh-TW", "zu"
"it", "iw", "ka", "kk", "ko",
"km", "kn", "ky", "lo", "lt",
"lv", "mk", "ml", "mn", "mr",
"ms", "my", "no", "ne", "nl",
"or", "pa", "pl", "ro", "si",
"sk", "sl", "sq", "sr", "sv",
"sw", "ta", "te", "th", "tr",
"uk", "ur", "uz", "zh-Hans",
"zh-Hant", "zh-CN", "zh-HK",
"zh-TW", "zu"
];
export const youtubeDubLanguages = ["original", ...languages] as const;
@ -26,20 +30,42 @@ export const subtitleLanguages = ["none", ...languages] as const;
export type YoutubeDubLang = typeof youtubeDubLanguages[number];
export type SubtitleLang = typeof subtitleLanguages[number];
export const namedYoutubeLanguages = () => {
return youtubeDubLanguages.reduce((obj, lang) => {
const intlName = new Intl.DisplayNames([lang], { type: 'language' }).of(lang);
const namedLanguages = (
languages: typeof youtubeDubLanguages | typeof subtitleLanguages
) => {
return languages.reduce((obj, lang) => {
let name: string;
let name = `${intlName} (${lang})`;
if (lang === "original") {
switch (lang) {
case "original":
name = get(t)("settings.youtube.dub.original");
break;
case "none":
name = get(t)("settings.subtitles.none");
break;
default: {
let intlName = "unknown";
try {
intlName = new Intl.DisplayNames([lang], { type: 'language' }).of(lang) || "unknown";
} catch { /* */ };
name = `${intlName} (${lang})`;
break;
}
}
return {
...obj,
[lang]: name,
};
}, {}) as Record<YoutubeDubLang, string>;
}, {}) as Record<typeof languages[number], string>;
}
export const namedYoutubeDubLanguages = () => {
return namedLanguages(youtubeDubLanguages);
}
export const namedSubtitleLanguages = () => {
return namedLanguages(subtitleLanguages);
}
export const getBrowserLanguage = (): YoutubeDubLang => {

View File

@ -1,7 +1,7 @@
<script lang="ts">
import settings from "$lib/state/settings";
import { t } from "$lib/i18n/translations";
import { namedYoutubeLanguages } from "$lib/settings/audio-sub-language";
import { namedYoutubeDubLanguages } from "$lib/settings/audio-sub-language";
import { audioFormatOptions, audioBitrateOptions } from "$lib/types/settings";
@ -11,7 +11,7 @@
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
const displayLangs = namedYoutubeLanguages();
const displayLangs = namedYoutubeDubLanguages();
</script>
<SettingsCategory sectionId="format" title={$t("settings.audio.format")}>