web/audio-sub-language: update localized values dynamically

This commit is contained in:
wukko 2025-06-28 17:43:46 +06:00
parent d70180b23c
commit 4fc2952c54
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
4 changed files with 17 additions and 11 deletions

View File

@ -1,5 +1,5 @@
import { t } from "$lib/i18n/translations"; import { t as translation } from "$lib/i18n/translations";
import { get } from "svelte/store"; import type { FromReadable } from "$lib/types/generic";
const languages = [ const languages = [
// most popular languages are first, according to // most popular languages are first, according to
@ -30,18 +30,21 @@ export const subtitleLanguages = ["none", ...languages] as const;
export type YoutubeDubLang = typeof youtubeDubLanguages[number]; export type YoutubeDubLang = typeof youtubeDubLanguages[number];
export type SubtitleLang = typeof subtitleLanguages[number]; export type SubtitleLang = typeof subtitleLanguages[number];
type TranslationFunction = FromReadable<typeof translation>;
const namedLanguages = ( const namedLanguages = (
languages: typeof youtubeDubLanguages | typeof subtitleLanguages languages: typeof youtubeDubLanguages | typeof subtitleLanguages,
t: TranslationFunction,
) => { ) => {
return languages.reduce((obj, lang) => { return languages.reduce((obj, lang) => {
let name: string; let name: string;
switch (lang) { switch (lang) {
case "original": case "original":
name = get(t)("settings.youtube.dub.original"); name = t("settings.youtube.dub.original");
break; break;
case "none": case "none":
name = get(t)("settings.subtitles.none"); name = t("settings.subtitles.none");
break; break;
default: { default: {
let intlName; let intlName;
@ -60,12 +63,12 @@ const namedLanguages = (
}, {}) as Record<typeof languages[number], string>; }, {}) as Record<typeof languages[number], string>;
} }
export const namedYoutubeDubLanguages = () => { export const namedYoutubeDubLanguages = (t: TranslationFunction) => {
return namedLanguages(youtubeDubLanguages); return namedLanguages(youtubeDubLanguages, t);
} }
export const namedSubtitleLanguages = () => { export const namedSubtitleLanguages = (t: TranslationFunction) => {
return namedLanguages(subtitleLanguages); return namedLanguages(subtitleLanguages, t);
} }
export const getBrowserLanguage = (): YoutubeDubLang => { export const getBrowserLanguage = (): YoutubeDubLang => {

View File

@ -1,3 +1,5 @@
import type { Readable } from "svelte/store";
// more readable version of recursive partial taken from stackoverflow: // more readable version of recursive partial taken from stackoverflow:
// https://stackoverflow.com/a/51365037 // https://stackoverflow.com/a/51365037
export type RecursivePartial<Type> = { export type RecursivePartial<Type> = {
@ -10,3 +12,4 @@ export type RecursivePartial<Type> = {
export type DefaultImport<T> = () => Promise<{ default: T }>; export type DefaultImport<T> = () => Promise<{ default: T }>;
export type Optional<T> = T | undefined; export type Optional<T> = T | undefined;
export type Writeable<T> = { -readonly [P in keyof T]: T[P] }; export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
export type FromReadable<T> = T extends Readable<infer U> ? U : never;

View File

@ -11,7 +11,7 @@
import SettingsToggle from "$components/buttons/SettingsToggle.svelte"; import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
import SettingsDropdown from "$components/settings/SettingsDropdown.svelte"; import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
const displayLangs = namedYoutubeDubLanguages(); const displayLangs = namedYoutubeDubLanguages($t);
</script> </script>
<SettingsCategory sectionId="format" title={$t("settings.audio.format")}> <SettingsCategory sectionId="format" title={$t("settings.audio.format")}>

View File

@ -12,7 +12,7 @@
import FilenamePreview from "$components/settings/FilenamePreview.svelte"; import FilenamePreview from "$components/settings/FilenamePreview.svelte";
import SettingsDropdown from "$components/settings/SettingsDropdown.svelte"; import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
const displayLangs = namedSubtitleLanguages(); const displayLangs = namedSubtitleLanguages($t);
</script> </script>
<SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}> <SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>