From 8e4d0cd03d2df1404864660c02021de08e4756b9 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 24 Feb 2025 15:51:11 +0600
Subject: [PATCH] web/settings: add a local processing page

---
 web/i18n/en/settings.json                     | 15 ++++++++----
 web/src/routes/settings/+layout.svelte        | 13 +++++++++-
 web/src/routes/settings/advanced/+page.svelte |  1 -
 web/src/routes/settings/download/+page.svelte |  9 -------
 web/src/routes/settings/local/+page.svelte    | 24 +++++++++++++++++++
 web/src/routes/settings/privacy/+page.svelte  |  2 +-
 6 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 web/src/routes/settings/local/+page.svelte

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index ca1374d1..5fc668cc 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -7,6 +7,7 @@
     "page.advanced": "advanced",
     "page.debug": "info for nerds",
     "page.instances": "instances",
+    "page.local": "local processing",
 
     "section.general": "general",
     "section.save": "save",
@@ -111,10 +112,6 @@
     "advanced.debug.title": "enable features for nerds",
     "advanced.debug.description": "gives you easy access to app info that can be useful for debugging. enabling this does not affect functionality of cobalt in any way.",
 
-    "advanced.local-processing": "local processing",
-    "advanced.local-processing.title": "mux and convert media on device",
-    "advanced.local-processing.description": "when downloading media, cobalt will use on-device processing to mux or convert it. exclusive local features such as remux or convert are not affected, they always run locally.",
-
     "processing.community": "community instances",
     "processing.enable_custom.title": "use a custom processing server",
     "processing.enable_custom.description": "cobalt will use a custom processing instance if you choose to. even though cobalt has some security measures in place, we are not responsible for any damages done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
@@ -127,5 +124,13 @@
     "processing.access_key.input.alt_text": "u-u-i-d access key",
 
     "advanced.settings_data": "settings data",
-    "advanced.local_storage": "local storage"
+    "advanced.local_storage": "local storage",
+
+    "local.saving": "saving",
+    "local.saving.title": "mux and convert media on device",
+    "local.saving.description": "when downloading media, cobalt will do needed processing on-device instead of using cloud compute. files will download faster and more reliably.\n\nexclusive local features are not affected by this toggle, they always run locally.",
+
+    "local.webcodecs": "webcodecs",
+    "local.webcodecs.title": "use webcodecs for on-device processing",
+    "local.webcodecs.description": "when decoding or encoding files, cobalt will try to use webcodecs. this feature allows for GPU-accelerated processing of media files, meaning that all decoding & encoding will be way faster.\n\navailability and stability of this feature depends on your device's and browser's capabilities. stuff might break or not work properly."
 }
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index a1f7bfb9..b7c78b03 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -16,8 +16,10 @@
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
 
-    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
+    import IconCpu from "@tabler/icons-svelte/IconCpu.svelte";
     import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
+
+    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
     import IconAdjustmentsStar from "@tabler/icons-svelte/IconAdjustmentsStar.svelte";
 
     $: versionText = $version
@@ -69,12 +71,21 @@
         </PageNavSection>
 
         <PageNavSection>
+            <PageNavTab
+                path="/settings/local"
+                title={$t("settings.page.local")}
+                icon={IconCpu}
+                iconColor="gray"
+            />
             <PageNavTab
                 path="/settings/instances"
                 title={$t("settings.page.instances")}
                 icon={IconWorld}
                 iconColor="gray"
             />
+        </PageNavSection>
+
+        <PageNavSection>
             <PageNavTab
                 path="/settings/advanced"
                 title={$t("settings.page.advanced")}
diff --git a/web/src/routes/settings/advanced/+page.svelte b/web/src/routes/settings/advanced/+page.svelte
index 7c533ecc..343791fe 100644
--- a/web/src/routes/settings/advanced/+page.svelte
+++ b/web/src/routes/settings/advanced/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { getStorageQuota } from "$lib/storage";
 
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import ManageSettings from "$components/settings/ManageSettings.svelte";
diff --git a/web/src/routes/settings/download/+page.svelte b/web/src/routes/settings/download/+page.svelte
index 9cc63449..48a2b433 100644
--- a/web/src/routes/settings/download/+page.svelte
+++ b/web/src/routes/settings/download/+page.svelte
@@ -56,15 +56,6 @@
     />
 </SettingsCategory>
 
-<SettingsCategory sectionId="local-processing" title={$t("settings.advanced.local-processing")} beta>
-    <SettingsToggle
-        settingContext="advanced"
-        settingId="localProcessing"
-        title={$t("settings.advanced.local-processing.title")}
-        description={$t("settings.advanced.local-processing.description")}
-    />
-</SettingsCategory>
-
 <style>
     .category-inside-group {
         display: flex;
diff --git a/web/src/routes/settings/local/+page.svelte b/web/src/routes/settings/local/+page.svelte
new file mode 100644
index 00000000..670f022a
--- /dev/null
+++ b/web/src/routes/settings/local/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+</script>
+
+<SettingsCategory sectionId="mux-convert" title={$t("settings.local.saving")} beta>
+    <SettingsToggle
+        settingContext="save"
+        settingId="localProcessing"
+        title={$t("settings.local.saving.title")}
+        description={$t("settings.local.saving.description")}
+    />
+</SettingsCategory>
+
+<SettingsCategory sectionId="webcodecs" title={$t("settings.local.webcodecs")} beta>
+    <SettingsToggle
+        settingContext="advanced"
+        settingId="useWebCodecs"
+        title={$t("settings.local.webcodecs.title")}
+        description={$t("settings.local.webcodecs.description")}
+    />
+</SettingsCategory>
diff --git a/web/src/routes/settings/privacy/+page.svelte b/web/src/routes/settings/privacy/+page.svelte
index dfe3bd7c..b6fb972e 100644
--- a/web/src/routes/settings/privacy/+page.svelte
+++ b/web/src/routes/settings/privacy/+page.svelte
@@ -9,7 +9,7 @@
 
 <SettingsCategory sectionId="tunnel" title={$t("settings.privacy.tunnel")}>
     <SettingsToggle
-        settingContext="privacy"
+        settingContext="save"
         settingId="alwaysProxy"
         title={$t("settings.privacy.tunnel.title")}
         description={$t("settings.privacy.tunnel.description")}