web: add support for dubbed youtube audio tracks

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"),

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: {

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>;
+}

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,
 };
 

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>