web: add support for youtube hls

also increased api response timeout to 20 seconds

web/src/lib/api/api.ts

@@ -26,6 +26,7 @@ const request = async (url: string) => {
 
         youtubeVideoCodec: getSetting("save", "youtubeVideoCodec"),
         videoQuality: getSetting("save", "videoQuality"),
+        youtubeHLS: getSetting("save", "youtubeHLS"),
 
         filenameStyle: getSetting("save", "filenameStyle"),
         disableMetadata: getSetting("save", "disableMetadata"),
@@ -82,7 +83,7 @@ const request = async (url: string) => {
     const response: Optional<CobaltAPIResponse> = await fetch(api, {
         method: "POST",
         redirect: "manual",
-        signal: AbortSignal.timeout(10000),
+        signal: AbortSignal.timeout(20000),
         body: JSON.stringify(request),
         headers: {
             "Accept": "application/json",

web/src/lib/settings/defaults.ts

@@ -26,6 +26,7 @@ const defaultSettings: CobaltSettings = {
         videoQuality: "1080",
         youtubeVideoCodec: "h264",
         youtubeDubBrowserLang: false,
+        youtubeHLS: false,
     },
     privacy: {
         alwaysProxy: false,

web/src/lib/types/settings.ts

@@ -48,6 +48,7 @@ type CobaltSettingsSave = {
     videoQuality: typeof videoQualityOptions[number],
     youtubeVideoCodec: typeof youtubeVideoCodecOptions[number],
     youtubeDubBrowserLang: boolean,
+    youtubeHLS: boolean,
 };
 
 export type CurrentCobaltSettings = {

web/src/routes/settings/video/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import settings from "$lib/state/settings";
     import { t } from "$lib/i18n/translations";
 
     import { videoQualityOptions } from "$lib/types/settings";
@@ -53,6 +54,21 @@
     </Switcher>
 </SettingsCategory>
 
+<SettingsCategory
+    sectionId="hls"
+    title={$t("settings.video.youtube.hls")}
+    disabled={$settings.save.youtubeVideoCodec === "av1"}
+    beta
+>
+    <SettingsToggle
+        settingContext="save"
+        settingId="youtubeHLS"
+        title={$t("settings.video.youtube.hls.title")}
+        description={$t("settings.video.youtube.hls.description")}
+        disabled={$settings.save.youtubeVideoCodec === "av1"}
+    />
+</SettingsCategory>
+
 <SettingsCategory sectionId="twitter" title={$t("settings.video.twitter.gif")}>
     <SettingsToggle
         settingContext="save"