From 60b22cb5f7d1bbd2ab3b4da2f185997599fe8b57 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 28 Oct 2024 15:27:51 +0600
Subject: [PATCH] web: add support for youtube hls

also increased api response timeout to 20 seconds
---
 web/i18n/en/settings.json                  |  4 ++++
 web/src/lib/api/api.ts                     |  3 ++-
 web/src/lib/settings/defaults.ts           |  1 +
 web/src/lib/types/settings.ts              |  1 +
 web/src/routes/settings/video/+page.svelte | 16 ++++++++++++++++
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index ba2fc886..b583a043 100644
--- a/web/i18n/en/settings.json
+++ b/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.",
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index 19f27c94..bdbbe59b 100644
--- a/web/src/lib/api/api.ts
+++ b/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",
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index c0b0c187..168ca54a 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -26,6 +26,7 @@ const defaultSettings: CobaltSettings = {
         videoQuality: "1080",
         youtubeVideoCodec: "h264",
         youtubeDubBrowserLang: false,
+        youtubeHLS: false,
     },
     privacy: {
         alwaysProxy: false,
diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts
index 3c9cef6e..25eb1017 100644
--- a/web/src/lib/types/settings.ts
+++ b/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 = {
diff --git a/web/src/routes/settings/video/+page.svelte b/web/src/routes/settings/video/+page.svelte
index c43016cb..4760d9c0 100644
--- a/web/src/routes/settings/video/+page.svelte
+++ b/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"