From ea2dd5bb3567cb67e0d50a846f53f5cb917eb815 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 28 Oct 2024 23:15:01 +0600
Subject: [PATCH] web: add support for dubbed youtube audio tracks

---
 web/i18n/en/settings.json                  |  7 +-
 web/src/lib/api/api.ts                     |  2 +-
 web/src/lib/settings/defaults.ts           |  2 +-
 web/src/lib/settings/youtube-lang.ts       | 95 ++++++++++++++++++++++
 web/src/lib/types/settings.ts              |  7 +-
 web/src/routes/settings/audio/+page.svelte | 25 ++++--
 6 files changed, 121 insertions(+), 17 deletions(-)
 create mode 100644 web/src/lib/settings/youtube-lang.ts

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 0c493000..10f0acd6 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -56,9 +56,10 @@
     "audio.bitrate.kbps": "kb/s",
     "audio.bitrate.description": "bitrate is applied only when converting audio to a lossy format. cobalt can't improve the source audio quality, so choosing a bitrate over 128kbps may inflate the file size with no audible difference. perceived quality may vary by format.",
 
-    "audio.youtube.dub": "youtube",
-    "audio.youtube.dub.title": "use browser language for dubbed videos",
-    "audio.youtube.dub.description": "works even if cobalt isn't translated to your language.",
+    "audio.youtube.dub": "youtube audio track",
+    "audio.youtube.dub.title": "audio track language",
+    "audio.youtube.dub.description": "if selected language isn't available, original will be used instead.",
+    "youtube.dub.original": "original",
 
     "audio.tiktok.original": "tiktok",
     "audio.tiktok.original.title": "download original sound",
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index bdbbe59b..6d836380 100644
--- a/web/src/lib/api/api.ts
+++ b/web/src/lib/api/api.ts
@@ -22,7 +22,7 @@ const request = async (url: string) => {
         audioBitrate: getSetting("save", "audioBitrate"),
         audioFormat: getSetting("save", "audioFormat"),
         tiktokFullAudio: getSetting("save", "tiktokFullAudio"),
-        youtubeDubBrowserLang: getSetting("save", "youtubeDubBrowserLang"),
+        youtubeDubLang: getSetting("save", "youtubeDubLang"),
 
         youtubeVideoCodec: getSetting("save", "youtubeVideoCodec"),
         videoQuality: getSetting("save", "videoQuality"),
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index 168ca54a..49f44ac0 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -25,7 +25,7 @@ const defaultSettings: CobaltSettings = {
         twitterGif: true,
         videoQuality: "1080",
         youtubeVideoCodec: "h264",
-        youtubeDubBrowserLang: false,
+        youtubeDubLang: "original",
         youtubeHLS: false,
     },
     privacy: {
diff --git a/web/src/lib/settings/youtube-lang.ts b/web/src/lib/settings/youtube-lang.ts
new file mode 100644
index 00000000..55667aa0
--- /dev/null
+++ b/web/src/lib/settings/youtube-lang.ts
@@ -0,0 +1,95 @@
+export const youtubeLanguages = [
+    "original",
+    "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",
+    "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-CN",
+    "zh-HK",
+    "zh-TW",
+    "zu"
+] as const;
+
+export const namedYoutubeLanguages = () => {
+    return youtubeLanguages.reduce((obj, lang) => {
+        const intlName = new Intl.DisplayNames([lang], { type: 'language' }).of(lang);
+
+        let name = `${intlName} (${lang})`;
+        if (lang === "original") {
+            name = lang;
+        }
+
+        return {
+            ...obj,
+            [lang]: name,
+        };
+    }, {}) as Record<typeof youtubeLanguages[number], string>;
+}
diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts
index 25eb1017..3531f88e 100644
--- a/web/src/lib/types/settings.ts
+++ b/web/src/lib/types/settings.ts
@@ -1,5 +1,6 @@
-import languages from '$i18n/languages.json';
-import type { RecursivePartial } from './generic';
+import languages from "$i18n/languages.json";
+import { youtubeLanguages } from "$lib/settings/youtube-lang";
+import type { RecursivePartial } from "$lib/types/generic";
 
 export const themeOptions = ["auto", "light", "dark"] as const;
 export const audioBitrateOptions = ["320", "256", "128", "96", "64", "8"] as const;
@@ -47,7 +48,7 @@ type CobaltSettingsSave = {
     twitterGif: boolean,
     videoQuality: typeof videoQualityOptions[number],
     youtubeVideoCodec: typeof youtubeVideoCodecOptions[number],
-    youtubeDubBrowserLang: boolean,
+    youtubeDubLang: typeof youtubeLanguages[number],
     youtubeHLS: boolean,
 };
 
diff --git a/web/src/routes/settings/audio/+page.svelte b/web/src/routes/settings/audio/+page.svelte
index 06555a42..3af303e4 100644
--- a/web/src/routes/settings/audio/+page.svelte
+++ b/web/src/routes/settings/audio/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import settings from "$lib/state/settings";
     import { t } from "$lib/i18n/translations";
+    import { namedYoutubeLanguages, youtubeLanguages } from "$lib/settings/youtube-lang";
 
     import { audioFormatOptions, audioBitrateOptions } from "$lib/types/settings";
 
@@ -8,6 +9,9 @@
     import Switcher from "$components/buttons/Switcher.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsDropdown from "$components/settings/SettingsDropdown.svelte";
+
+    const displayLangs = namedYoutubeLanguages();
 </script>
 
 <SettingsCategory sectionId="format" title={$t("settings.audio.format")}>
@@ -42,6 +46,18 @@
     </Switcher>
 </SettingsCategory>
 
+<SettingsCategory sectionId="youtube" title={$t("settings.audio.youtube.dub")}>
+    <SettingsDropdown
+        title={$t("settings.audio.youtube.dub.title")}
+        description={$t("settings.audio.youtube.dub.description")}
+        items={displayLangs}
+        settingContext="save"
+        settingId="youtubeDubLang"
+        selectedOption={$settings.save.youtubeDubLang}
+        selectedTitle={displayLangs[$settings.save.youtubeDubLang]}
+    />
+</SettingsCategory>
+
 <SettingsCategory
     sectionId="tiktok"
     title={$t("settings.audio.tiktok.original")}
@@ -53,12 +69,3 @@
         description={$t("settings.audio.tiktok.original.description")}
     />
 </SettingsCategory>
-
-<SettingsCategory sectionId="youtube" title={$t("settings.audio.youtube.dub")}>
-    <SettingsToggle
-        settingContext="save"
-        settingId="youtubeDubBrowserLang"
-        title={$t("settings.audio.youtube.dub.title")}
-        description={$t("settings.audio.youtube.dub.description")}
-    />
-</SettingsCategory>