From 4fc2952c5481f971b5f4b06057bde3f80a25826c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 28 Jun 2025 17:43:46 +0600
Subject: [PATCH] web/audio-sub-language: update localized values dynamically

---
 web/src/lib/settings/audio-sub-language.ts    | 21 +++++++++++--------
 web/src/lib/types/generic.ts                  |  3 +++
 web/src/routes/settings/audio/+page.svelte    |  2 +-
 web/src/routes/settings/metadata/+page.svelte |  2 +-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/settings/audio-sub-language.ts b/web/src/lib/settings/audio-sub-language.ts
index 61653844..b2cfe7bc 100644
--- a/web/src/lib/settings/audio-sub-language.ts
+++ b/web/src/lib/settings/audio-sub-language.ts
@@ -1,5 +1,5 @@
-import { t } from "$lib/i18n/translations";
-import { get } from "svelte/store";
+import { t as translation } from "$lib/i18n/translations";
+import type { FromReadable } from "$lib/types/generic";
 
 const languages = [
     // 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 SubtitleLang = typeof subtitleLanguages[number];
 
+type TranslationFunction = FromReadable<typeof translation>;
+
 const namedLanguages = (
-    languages: typeof youtubeDubLanguages | typeof subtitleLanguages
+    languages: typeof youtubeDubLanguages | typeof subtitleLanguages,
+    t: TranslationFunction,
 ) => {
     return languages.reduce((obj, lang) => {
         let name: string;
 
         switch (lang) {
             case "original":
-                name = get(t)("settings.youtube.dub.original");
+                name = t("settings.youtube.dub.original");
                 break;
             case "none":
-                name = get(t)("settings.subtitles.none");
+                name = t("settings.subtitles.none");
                 break;
             default: {
                 let intlName;
@@ -60,12 +63,12 @@ const namedLanguages = (
     }, {}) as Record<typeof languages[number], string>;
 }
 
-export const namedYoutubeDubLanguages = () => {
-    return namedLanguages(youtubeDubLanguages);
+export const namedYoutubeDubLanguages = (t: TranslationFunction) => {
+    return namedLanguages(youtubeDubLanguages, t);
 }
 
-export const namedSubtitleLanguages = () => {
-    return namedLanguages(subtitleLanguages);
+export const namedSubtitleLanguages = (t: TranslationFunction) => {
+    return namedLanguages(subtitleLanguages, t);
 }
 
 export const getBrowserLanguage = (): YoutubeDubLang => {
diff --git a/web/src/lib/types/generic.ts b/web/src/lib/types/generic.ts
index 59844106..19f78db2 100644
--- a/web/src/lib/types/generic.ts
+++ b/web/src/lib/types/generic.ts
@@ -1,3 +1,5 @@
+import type { Readable } from "svelte/store";
+
 // more readable version of recursive partial taken from stackoverflow:
 // https://stackoverflow.com/a/51365037
 export type RecursivePartial<Type> = {
@@ -10,3 +12,4 @@ export type RecursivePartial<Type> = {
 export type DefaultImport<T> = () => Promise<{ default: T }>;
 export type Optional<T> = T | undefined;
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+export type FromReadable<T> = T extends Readable<infer U> ? U : never;
diff --git a/web/src/routes/settings/audio/+page.svelte b/web/src/routes/settings/audio/+page.svelte
index 06b513d7..f4227daa 100644
--- a/web/src/routes/settings/audio/+page.svelte
+++ b/web/src/routes/settings/audio/+page.svelte
@@ -11,7 +11,7 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
 
-    const displayLangs = namedYoutubeDubLanguages();
+    const displayLangs = namedYoutubeDubLanguages($t);
 </script>
 
 <SettingsCategory sectionId="format" title={$t("settings.audio.format")}>
diff --git a/web/src/routes/settings/metadata/+page.svelte b/web/src/routes/settings/metadata/+page.svelte
index 944ec61c..dfe02eef 100644
--- a/web/src/routes/settings/metadata/+page.svelte
+++ b/web/src/routes/settings/metadata/+page.svelte
@@ -12,7 +12,7 @@
     import FilenamePreview from "$components/settings/FilenamePreview.svelte";
     import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
 
-    const displayLangs = namedSubtitleLanguages();
+    const displayLangs = namedSubtitleLanguages($t);
 </script>
 
 <SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>