web: add support for youtube hls

also increased api response timeout to 20 seconds

web/i18n/en/settings.json

@@ -32,6 +32,10 @@
     "video.youtube.codec": "youtube video codec and container",
     "video.youtube.codec.description": "h264: best compatibility, average quality. max quality is 1080p. \nav1: best quality and efficiency. supports 8k & HDR. \nvp9: same quality as av1, but file is ~2x bigger. supports 4k & HDR.\n\nav1 and vp9 aren't as widely supported as h264. if av1 or vp9 isn't available, h264 is used instead.",
 
+    "video.youtube.hls": "youtube hls",
+    "video.youtube.hls.title": "use hls formats for videos",
+    "video.youtube.hls.description": "only h264 and vp9 codecs are supported in this mode, both are served in a mp4 container. files download faster and are less prone to errors. files may be less compatible with editing software or video players.",
+
     "video.twitter.gif": "twitter/x",
     "video.twitter.gif.title": "convert looping videos to GIF",
     "video.twitter.gif.description": "GIF conversion is inefficient, converted file may be obnoxiously big and low quality.",

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"