web: add local processing setting & api type

response is not handled at all yet, this is a raw draft

web/i18n/en/settings.json

@@ -113,9 +113,9 @@
 
     "advanced.data": "data management",
 
-    "advanced.duck": "duck",
+    "advanced.local-processing": "local processing",
-    "advanced.duck.title": "enable new on-device features",
+    "advanced.local-processing.title": "mux and convert media on device",
-    "advanced.duck.description": "very wip, WILL cause critical issues or not work at all. this toggle will be gone by release.",
+    "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",

web/src/components/sidebar/Sidebar.svelte

@@ -35,10 +35,10 @@
     <div id="sidebar-tabs" role="tablist">
         <div id="sidebar-actions" class="sidebar-inner-container">
             <SidebarTab name="save" path="/" icon={IconDownload} />
-            {#if $settings.advanced.duck && !device.is.mobile && $settings.advanced.debug}
+            <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
+            {#if $settings.advanced.localProcessing && !device.is.mobile && $settings.advanced.debug}
                 <SidebarTab name="cutout" path="/cutout" icon={IconCut} beta />
             {/if}
-            <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">
             <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />

web/src/lib/api/api.ts

@@ -66,6 +66,7 @@ const request = async (url: string) => {
         tiktokH265: getSetting("save", "tiktokH265"),
 
         alwaysProxy: getSetting("privacy", "alwaysProxy"),
+        localProcessing: getSetting("advanced", "localProcessing"),
     }
 
     await getServerInfo();

web/src/lib/settings/defaults.ts

@@ -5,7 +5,7 @@ const defaultSettings: CobaltSettings = {
     schemaVersion: 5,
     advanced: {
         debug: false,
-        duck: false,
+        localProcessing: false,
     },
     appearance: {
         theme: "auto",

web/src/lib/types/api.ts

@@ -3,6 +3,7 @@ enum CobaltResponseType {
     Picker = 'picker',
     Redirect = 'redirect',
     Tunnel = 'tunnel',
+    LocalProcessing = 'local-processing',
 }
 
 export type CobaltErrorResponse = {
@@ -40,6 +41,33 @@ type CobaltTunnelResponse = {
     status: CobaltResponseType.Tunnel,
 } & CobaltPartialURLResponse;
 
+type CobaltLocalProcessingResponse = {
+    status: CobaltResponseType.LocalProcessing,
+    tunnel: string[],
+
+    // TODO: proper type for processing types
+    type: string,
+    service: string,
+    filename?: string,
+
+    metadata?: {
+        album?: string,
+        copyright?: string,
+        title?: string,
+        artist?: string,
+        track?: string,
+        date?: string
+    },
+
+    audio?: {
+        copy: boolean,
+        format: string,
+        bitrate: string,
+    },
+
+    isHLS?: boolean,
+}
+
 export type CobaltFileUrlType = "redirect" | "tunnel";
 
 export type CobaltSession = {
@@ -69,4 +97,5 @@ export type CobaltServerInfoResponse = CobaltServerInfo | CobaltErrorResponse;
 export type CobaltAPIResponse = CobaltErrorResponse
                               | CobaltPickerResponse
                               | CobaltRedirectResponse
-                              | CobaltTunnelResponse;
+                              | CobaltTunnelResponse
+                              | CobaltLocalProcessingResponse;

web/src/lib/types/settings/v5.ts

@@ -3,6 +3,6 @@ import { type CobaltSettingsV4 } from "$lib/types/settings/v4";
 export type CobaltSettingsV5 = Omit<CobaltSettingsV4, 'schemaVersion' | 'advanced'> & {
     schemaVersion: 5,
     advanced: CobaltSettingsV4['advanced'] & {
-        duck: boolean;
+        localProcessing: boolean;
     };
 };

web/src/routes/+layout.svelte

@@ -91,7 +91,7 @@
             <UpdateNotification />
         {/if}
         <div id="content">
-            {#if $settings.advanced.duck}
+            {#if $settings.advanced.localProcessing}
                 <ProcessingQueue />
             {/if}
             {#if ($turnstileEnabled && $page.url.pathname === "/") || $turnstileCreated}

web/src/routes/cutout/+page.svelte

@@ -73,7 +73,7 @@
     };
 
     onMount(() => {
-        if (!($settings.advanced.duck && $settings.advanced.debug)) {
+        if (!($settings.advanced.localProcessing && $settings.advanced.debug)) {
             goto("/", { replaceState: true });
         }
     });

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

@@ -15,15 +15,6 @@
     />
 </SettingsCategory>
 
-<SettingsCategory sectionId="local-processing" title={$t("settings.advanced.duck")} beta>
-    <SettingsToggle
-        settingContext="advanced"
-        settingId="duck"
-        title={$t("settings.advanced.duck.title")}
-        description={$t("settings.advanced.duck.description")}
-    />
-</SettingsCategory>
-
 <SettingsCategory sectionId="data" title={$t("settings.advanced.data")}>
     <ManageSettings />
 </SettingsCategory>

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

@@ -56,6 +56,15 @@
     />
 </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;