From 91327220a0a5cc9c483dbf2e9138fc736b26b319 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 16 Dec 2024 17:23:43 +0600
Subject: [PATCH 01/33] web/PopoverContainer: create a reusable popover
 component

---
 .../components/misc/PopoverContainer.svelte   | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 web/src/components/misc/PopoverContainer.svelte

diff --git a/web/src/components/misc/PopoverContainer.svelte b/web/src/components/misc/PopoverContainer.svelte
new file mode 100644
index 00000000..d43e8426
--- /dev/null
+++ b/web/src/components/misc/PopoverContainer.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    export let id = "";
+    export let expanded = false;
+    export let popoverAction: () => void;
+    export let expandStart: "left" | "center" | "right" = "center";
+
+    $: renderPopover = false;
+
+    export const showPopover = async () => {
+        const timeout = !renderPopover;
+        renderPopover = true;
+
+        // 10ms delay to let the popover render for the first time
+        if (timeout) {
+            setTimeout(popoverAction, 10);
+        } else {
+            popoverAction();
+        }
+    };
+</script>
+
+<div {id} class="popover {expandStart}" class:expanded>
+    {#if renderPopover}
+        <slot></slot>
+    {/if}
+</div>
+
+<style>
+    .popover {
+        display: flex;
+        flex-direction: column;
+        border-radius: 18px;
+        background: var(--button);
+        box-shadow:
+            var(--button-box-shadow),
+            0 0 10px 10px var(--popover-glow);
+
+        position: relative;
+        padding: var(--padding);
+        gap: 6px;
+        top: 6px;
+
+        opacity: 0;
+        transform: scale(0);
+        transform-origin: top center;
+
+        transition:
+            transform 0.3s cubic-bezier(0.53, 0.05, 0.23, 1.15),
+            opacity 0.25s cubic-bezier(0.53, 0.05, 0.23, 0.99);
+
+        pointer-events: all;
+    }
+
+    .popover.left {
+        transform-origin: top left;
+    }
+
+    .popover.center {
+        transform-origin: top center;
+    }
+
+    .popover.right {
+        transform-origin: top right;
+    }
+
+    .popover.expanded {
+        opacity: 1;
+        transform: none;
+    }
+</style>

From 5d75ee493de6d68aedc1f09001863047d3230c29 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 16 Dec 2024 17:24:05 +0600
Subject: [PATCH 02/33] web/SupportedServices: use the general popover
 component

---
 .../components/save/SupportedServices.svelte  | 110 ++++++------------
 1 file changed, 38 insertions(+), 72 deletions(-)

diff --git a/web/src/components/save/SupportedServices.svelte b/web/src/components/save/SupportedServices.svelte
index 6dcb9244..adf63ef5 100644
--- a/web/src/components/save/SupportedServices.svelte
+++ b/web/src/components/save/SupportedServices.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { getServerInfo } from "$lib/api/server-info";
     import cachedInfo from "$lib/state/server-info";
+    import { getServerInfo } from "$lib/api/server-info";
+
+    import type { SvelteComponent } from "svelte";
 
     import Skeleton from "$components/misc/Skeleton.svelte";
     import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
+    import PopoverContainer from "$components/misc/PopoverContainer.svelte";
 
     let services: string[] = [];
 
-    let popover: HTMLDivElement;
-
+    let popover: SvelteComponent;
     $: expanded = false;
+
+    let servicesContainer: HTMLDivElement;
     $: loaded = false;
-    $: renderPopover = false;
 
     const loadInfo = async () => {
         await getServerInfo();
@@ -29,19 +32,7 @@
             await loadInfo();
         }
         if (expanded) {
-            popover.focus();
-        }
-    }
-
-    const showPopover = async () => {
-        const timeout = !renderPopover;
-        renderPopover = true;
-
-        // 10ms delay to let the popover render for the first time
-        if (timeout) {
-            setTimeout(popoverAction, 10);
-        } else {
-            await popoverAction();
+            servicesContainer.focus();
         }
     };
 </script>
@@ -49,7 +40,7 @@
 <div id="supported-services" class:expanded>
     <button
         id="services-button"
-        on:click={showPopover}
+        on:click={popover?.showPopover}
         aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)}
     >
         <div class="expand-icon">
@@ -58,33 +49,36 @@
         <span class="title">{$t("save.services.title")}</span>
     </button>
 
-    {#if renderPopover}
-        <div id="services-popover">
-            <div
-                id="services-container"
-                bind:this={popover}
-                tabindex="-1"
-                data-focus-ring-hidden
-            >
-                {#if loaded}
-                    {#each services as service}
-                        <div class="service-item">{service}</div>
-                    {/each}
-                {:else}
-                    {#each { length: 17 } as _}
-                        <Skeleton
-                            class="elevated"
-                            width={Math.random() * 44 + 50 + "px"}
-                            height="24.5px"
-                        />
-                    {/each}
-                {/if}
-            </div>
-            <div id="services-disclaimer" class="subtext">
-                {$t("save.services.disclaimer")}
-            </div>
+    <PopoverContainer
+        bind:this={popover}
+        id="services-popover"
+        {expanded}
+        {popoverAction}
+    >
+        <div
+            id="services-container"
+            bind:this={servicesContainer}
+            tabindex="-1"
+            data-focus-ring-hidden
+        >
+            {#if loaded}
+                {#each services as service}
+                    <div class="service-item">{service}</div>
+                {/each}
+            {:else}
+                {#each { length: 17 } as _}
+                    <Skeleton
+                        class="elevated"
+                        width={Math.random() * 44 + 50 + "px"}
+                        height="24.5px"
+                    />
+                {/each}
+            {/if}
         </div>
-    {/if}
+        <div id="services-disclaimer" class="subtext">
+            {$t("save.services.disclaimer")}
+        </div>
+    </PopoverContainer>
 </div>
 
 <style>
@@ -97,34 +91,6 @@
         height: 35px;
     }
 
-    #services-popover {
-        display: flex;
-        flex-direction: column;
-        border-radius: 18px;
-        background: var(--button);
-        box-shadow:
-            var(--button-box-shadow),
-            0 0 10px 10px var(--popover-glow);
-
-        position: relative;
-        padding: 12px;
-        gap: 6px;
-        top: 6px;
-
-        opacity: 0;
-        transform: scale(0);
-        transform-origin: top center;
-
-        transition:
-            transform 0.3s cubic-bezier(0.53, 0.05, 0.23, 1.15),
-            opacity 0.25s cubic-bezier(0.53, 0.05, 0.23, 0.99);
-    }
-
-    .expanded #services-popover {
-        transform: scale(1);
-        opacity: 1;
-    }
-
     #services-button {
         gap: 9px;
         padding: 7px 13px 7px 10px;

From 6d0ec5dd8561da80141b459265f87ff577dc4be5 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 16 Dec 2024 18:03:55 +0600
Subject: [PATCH 03/33] web: basic ui for the download queue manager

---
 .../downloads/DownloadManager.svelte          | 109 +++++++++++++++
 .../downloads/DownloadStatus.svelte           | 132 ++++++++++++++++++
 web/src/components/misc/Meowbalt.svelte       |   1 -
 web/src/routes/+layout.svelte                 |   8 +-
 4 files changed, 246 insertions(+), 4 deletions(-)
 create mode 100644 web/src/components/downloads/DownloadManager.svelte
 create mode 100644 web/src/components/downloads/DownloadStatus.svelte

diff --git a/web/src/components/downloads/DownloadManager.svelte b/web/src/components/downloads/DownloadManager.svelte
new file mode 100644
index 00000000..6008adb5
--- /dev/null
+++ b/web/src/components/downloads/DownloadManager.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { onNavigate } from "$app/navigation";
+    import type { SvelteComponent } from "svelte";
+
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+    import DownloadStatus from "$components/downloads/DownloadStatus.svelte";
+    import PopoverContainer from "$components/misc/PopoverContainer.svelte";
+
+    let popover: SvelteComponent;
+    $: expanded = false;
+
+    $: progress = 0;
+    $: indeterminate = false;
+
+    const popoverAction = async () => {
+        expanded = !expanded;
+        if (expanded) {
+            popover.focus();
+        }
+    };
+
+    onNavigate(() => {
+        expanded = false;
+    });
+</script>
+
+<div id="downloads-manager">
+    <DownloadStatus
+        {indeterminate}
+        {progress}
+        expandAction={popover?.showPopover}
+    />
+
+    <PopoverContainer
+        bind:this={popover}
+        id="downloads-popover"
+        {expanded}
+        {popoverAction}
+        expandStart="right"
+    >
+        <div id="downloads-header">
+            <div class="downloads-header-title">downloads</div>
+        </div>
+        <div id="downloads-list">
+            <div class="list-stub">
+                <Meowbalt emotion="think" />
+                <span>your downloads will appear here!</span>
+            </div>
+        </div>
+    </PopoverContainer>
+</div>
+
+<style>
+    #downloads-manager {
+        position: absolute;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: end;
+        z-index: 9;
+        pointer-events: none;
+        padding: 16px;
+    }
+
+    #downloads-manager :global(#downloads-popover) {
+        padding: 16px;
+        max-width: 425px;
+    }
+
+    #downloads-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .downloads-header-title {
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    #downloads-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .list-stub {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--gray);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 25px;
+        text-align: center;
+        gap: var(--padding);
+    }
+
+    .list-stub :global(.meowbalt) {
+        height: 120px;
+    }
+
+    @media screen and (max-width: 535px) {
+        #downloads-manager {
+            top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
+        }
+    }
+</style>
diff --git a/web/src/components/downloads/DownloadStatus.svelte b/web/src/components/downloads/DownloadStatus.svelte
new file mode 100644
index 00000000..743805c7
--- /dev/null
+++ b/web/src/components/downloads/DownloadStatus.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+    import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte";
+
+    export let indeterminate = false;
+    export let progress: number = 0;
+    export let expandAction: () => void;
+
+    $: progressStroke = `${progress}, 100`;
+    const indeterminateStroke = "15, 5";
+</script>
+
+<button
+    id="downloads-status"
+    on:click={expandAction}
+    class:completed={progress >= 100}
+>
+    <svg
+        id="progress-ring"
+        class:indeterminate
+        class:progressive={progress > 0 && !indeterminate}
+    >
+        <circle
+            cx="19"
+            cy="19"
+            r="16"
+            fill="none"
+            stroke-dasharray={indeterminate
+                ? indeterminateStroke
+                : progressStroke}
+        />
+    </svg>
+    <div class="icon-holder">
+        <IconArrowDown />
+    </div>
+</button>
+
+<style>
+    #downloads-status {
+        --download-status-glow: 0 0 8px 0px var(--button-elevated-hover);
+
+        pointer-events: all;
+        padding: 7px;
+        border-radius: 30px;
+        box-shadow:
+            var(--button-box-shadow),
+            var(--download-status-glow);
+
+        transition: box-shadow 0.2s, background-color 0.2s;
+    }
+
+    #downloads-status.completed {
+        box-shadow:
+            0 0 0 2px var(--blue) inset,
+            var(--download-status-glow);
+    }
+
+    :global([data-theme="light"]) #downloads-status.completed {
+        background-color: #e0eeff;
+    }
+
+    :global([data-theme="dark"]) #downloads-status.completed {
+        background-color: #1f3249;
+    }
+
+    .icon-holder {
+        display: flex;
+        background-color: var(--button-elevated-hover);
+        padding: 2px;
+        border-radius: 20px;
+        transition: background-color 0.2s;
+    }
+
+    .icon-holder :global(svg) {
+        height: 21px;
+        width: 21px;
+        stroke: var(--secondary);
+        transition: stroke 0.2s;
+    }
+
+    .completed .icon-holder {
+        background-color: var(--blue);
+    }
+
+    .completed .icon-holder :global(svg) {
+        stroke: white;
+    }
+
+    #progress-ring {
+        position: absolute;
+        transform: rotate(-90deg);
+        width: 38px;
+        height: 38px;
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    #progress-ring circle {
+        stroke: var(--blue);
+        stroke-width: 4;
+        stroke-dashoffset: 0;
+    }
+
+    #progress-ring.progressive circle {
+        transition: stroke-dasharray 0.2s;
+    }
+
+    #progress-ring.progressive,
+    #progress-ring.indeterminate {
+        opacity: 1;
+    }
+
+    #progress-ring.indeterminate {
+        animation: spin 3s linear infinite;
+    }
+
+    #progress-ring.indeterminate circle {
+        transition: none;
+    }
+
+    .completed #progress-ring {
+        opacity: 0;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/web/src/components/misc/Meowbalt.svelte b/web/src/components/misc/Meowbalt.svelte
index 26ad14b3..929c63aa 100644
--- a/web/src/components/misc/Meowbalt.svelte
+++ b/web/src/components/misc/Meowbalt.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-
     import type { MeowbaltEmotions } from "$lib/types/meowbalt";
 
     export let emotion: MeowbaltEmotions;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f930e227..6eb4abf8 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -25,6 +25,7 @@
     import NotchSticker from "$components/misc/NotchSticker.svelte";
     import DialogHolder from "$components/dialog/DialogHolder.svelte";
     import UpdateNotification from "$components/misc/UpdateNotification.svelte";
+    import DownloadManager from "$components/downloads/DownloadManager.svelte";
 
     $: reduceMotion =
         $settings.appearance.reduceMotion || device.prefers.reducedMotion;
@@ -81,14 +82,15 @@
         data-reduce-motion={reduceMotion}
         data-reduce-transparency={reduceTransparency}
     >
-        {#if $updated}
-            <UpdateNotification />
-        {/if}
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
+        <DownloadManager />
         <DialogHolder />
         <Sidebar />
+        {#if $updated}
+            <UpdateNotification />
+        {/if}
         <div id="content">
             {#if ($turnstileEnabled && $page.url.pathname === "/") || $turnstileCreated}
                 <Turnstile />

From 45434ba751f262cb5295c23a8bee987800c0b76d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 16 Dec 2024 18:05:39 +0600
Subject: [PATCH 04/33] web/UpdateNotification: accommodate space for the
 download manager

---
 web/src/components/misc/UpdateNotification.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/src/components/misc/UpdateNotification.svelte b/web/src/components/misc/UpdateNotification.svelte
index ea839538..2791f7e3 100644
--- a/web/src/components/misc/UpdateNotification.svelte
+++ b/web/src/components/misc/UpdateNotification.svelte
@@ -32,6 +32,7 @@
         pointer-events: all;
         gap: 8px;
         margin: var(--padding);
+        margin-right: 71px;
         margin-top: calc(env(safe-area-inset-top) + var(--padding));
         box-shadow:
             var(--button-box-shadow),
@@ -90,6 +91,10 @@
             animation: slide-in-bottom 0.4s;
         }
 
+        .update-button {
+            margin-right: var(--padding);
+        }
+
         @keyframes slide-in-bottom {
             from {
                 transform: translateY(300px);

From 13c4438a579fac3ac5a536b0aa0dfd5e3a0e2395 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 17 Dec 2024 01:25:02 +0600
Subject: [PATCH 05/33] web/DownloadManager: item component & type

---
 .../components/downloads/DownloadItem.svelte  | 151 ++++++++++++++++++
 .../downloads/DownloadManager.svelte          | 101 +++++++++++-
 web/src/lib/types/queue.ts                    |   7 +
 3 files changed, 254 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/downloads/DownloadItem.svelte
 create mode 100644 web/src/lib/types/queue.ts

diff --git a/web/src/components/downloads/DownloadItem.svelte b/web/src/components/downloads/DownloadItem.svelte
new file mode 100644
index 00000000..4fc0a15e
--- /dev/null
+++ b/web/src/components/downloads/DownloadItem.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+
+    export let filename: string;
+    export let status: string;
+    export let progress: number = 0;
+    export let icon: ConstructorOfATypedSvelteComponent;
+</script>
+
+<div class="download-item">
+    <div class="download-info">
+        <div class="file-title">
+            <div class="download-type">
+                <svelte:component this={icon} />
+            </div>
+            <span>
+                {filename}
+            </span>
+        </div>
+        <div class="file-progress">
+            <div
+                class="progress"
+                style="width: {Math.min(100, progress)}%"
+            ></div>
+        </div>
+        <div class="file-status">{status}</div>
+    </div>
+    <div class="file-actions">
+        <button class="action-button">
+            <IconDownload />
+        </button>
+        <button class="action-button">
+            <IconX />
+        </button>
+    </div>
+</div>
+
+<style>
+    .download-item,
+    .file-actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .download-item {
+        width: 425px;
+        padding: 8px 0;
+        gap: 8px;
+        border-bottom: 1.5px var(--button-elevated) solid;
+    }
+
+    .download-type {
+        display: flex;
+    }
+
+    .download-type :global(svg) {
+        width: 18px;
+        height: 18px;
+        stroke-width: 1.5px;
+    }
+
+    .download-info {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-size: 13px;
+        gap: 4px;
+        font-weight: 500;
+    }
+
+    .file-progress {
+        width: 100%;
+        background-color: var(--button-elevated);
+    }
+
+    .file-progress,
+    .file-progress .progress {
+        height: 6px;
+        border-radius: 10px;
+    }
+
+    .file-progress .progress {
+        background-color: var(--blue);
+    }
+
+    .file-title {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+    }
+
+    .file-status {
+        font-size: 12px;
+        color: var(--gray);
+        line-break: anywhere;
+    }
+
+    .file-actions {
+        gap: 4px;
+    }
+
+    @media (hover: hover) {
+        .file-actions {
+            position: absolute;
+            right: 0;
+            background-color: var(--button);
+            height: 90%;
+            padding-left: 18px;
+
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.2s;
+
+            mask-image: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(0, 0, 0, 1) 20%
+            );
+        }
+
+        .download-item:hover .file-actions {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+
+    .action-button {
+        padding: 8px;
+        height: auto;
+        box-shadow: none;
+    }
+
+    .action-button :global(svg) {
+        width: 18px;
+        height: 18px;
+        stroke-width: 1.5px;
+    }
+
+    .download-item:first-child {
+        padding-top: 0;
+    }
+
+    .download-item:last-child {
+        padding-bottom: 0;
+        border: none;
+    }
+</style>
diff --git a/web/src/components/downloads/DownloadManager.svelte b/web/src/components/downloads/DownloadManager.svelte
index 6008adb5..abf28e03 100644
--- a/web/src/components/downloads/DownloadManager.svelte
+++ b/web/src/components/downloads/DownloadManager.svelte
@@ -1,17 +1,73 @@
 <script lang="ts">
     import { onNavigate } from "$app/navigation";
     import type { SvelteComponent } from "svelte";
+    import type { QueueItem } from "$lib/types/queue";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DownloadStatus from "$components/downloads/DownloadStatus.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
+    import DownloadItem from "$components/downloads/DownloadItem.svelte";
 
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
+
+    import IconGif from "@tabler/icons-svelte/IconGif.svelte";
+    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
     let popover: SvelteComponent;
     $: expanded = false;
 
     $: progress = 0;
     $: indeterminate = false;
 
+    const itemIcons = {
+        video: IconMovie,
+        audio: IconMusic,
+        mute: IconVolume3,
+        image: IconPhoto,
+        gif: IconGif,
+    };
+
+    // dummy data for testing ui rn
+    const downloadQueue: QueueItem[] = [
+        {
+            id: "fake id",
+            type: "video",
+            filename: "placeholder.mp4",
+            status: "processing: 69%",
+            progress: 69,
+        },
+        {
+            id: "fake id",
+            type: "audio",
+            filename: "placeholder.mp3",
+            status: "processing: 3%",
+            progress: 3,
+        },
+        {
+            id: "fake id",
+            type: "mute",
+            filename: "placeholder.mp4",
+            status: "processing: 55%",
+            progress: 55,
+        },
+        {
+            id: "fake id",
+            type: "image",
+            filename: "placeholder.jpg",
+            status: "processing: 21%",
+            progress: 22,
+        },
+        {
+            id: "fake id",
+            type: "gif",
+            filename: "placeholder.gif",
+            status: "processing: 82%",
+            progress: 82,
+        },
+    ];
+
     const popoverAction = async () => {
         expanded = !expanded;
         if (expanded) {
@@ -40,12 +96,28 @@
     >
         <div id="downloads-header">
             <div class="downloads-header-title">downloads</div>
+            {#if downloadQueue.length > 0}
+                <button class="downloads-clear-button">
+                    <IconX />
+                    clear
+                </button>
+            {/if}
         </div>
         <div id="downloads-list">
-            <div class="list-stub">
-                <Meowbalt emotion="think" />
-                <span>your downloads will appear here!</span>
-            </div>
+            {#each downloadQueue as item}
+                <DownloadItem
+                    filename={item.filename}
+                    status={item.status}
+                    progress={item.progress}
+                    icon={itemIcons[item.type]}
+                />
+            {/each}
+            {#if downloadQueue.length === 0}
+                <div class="list-stub">
+                    <Meowbalt emotion="think" />
+                    <span>your downloads will appear here!</span>
+                </div>
+            {/if}
         </div>
     </PopoverContainer>
 </div>
@@ -66,6 +138,7 @@
     #downloads-manager :global(#downloads-popover) {
         padding: 16px;
         max-width: 425px;
+        gap: 12px;
     }
 
     #downloads-header {
@@ -75,13 +148,31 @@
     }
 
     .downloads-header-title {
-        font-size: 14px;
+        font-size: 15px;
         font-weight: 500;
     }
 
+    .downloads-clear-button {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--red);
+
+        padding: 0;
+        background: none;
+        box-shadow: none;
+    }
+
+    .downloads-clear-button :global(svg) {
+        height: 16px;
+        width: 16px;
+    }
+
     #downloads-list {
         display: flex;
         flex-direction: column;
+
+        max-height: 60vh;
+        overflow: scroll;
     }
 
     .list-stub {
diff --git a/web/src/lib/types/queue.ts b/web/src/lib/types/queue.ts
new file mode 100644
index 00000000..a0d28692
--- /dev/null
+++ b/web/src/lib/types/queue.ts
@@ -0,0 +1,7 @@
+export type QueueItem = {
+    id: string,
+    type: "video" | "audio" | "mute" | "image" | "gif",
+    filename: string,
+    status: string,
+    progress: number,
+}

From 11e3d7a8f44baafbd560c94b93067550831cb256 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 17 Dec 2024 16:50:13 +0600
Subject: [PATCH 06/33] web: rename `DownloadManager` to `ProcessingQueue`

also replaced the download icon with a blender (to be updated, maybe)
---
 .../ProcessingQueue.svelte}                   | 49 ++++++++++---------
 .../ProcessingQueueItem.svelte}               | 22 ++++-----
 .../ProcessingStatus.svelte}                  | 20 ++++----
 web/src/routes/+layout.svelte                 |  4 +-
 4 files changed, 48 insertions(+), 47 deletions(-)
 rename web/src/components/{downloads/DownloadManager.svelte => queue/ProcessingQueue.svelte} (81%)
 rename web/src/components/{downloads/DownloadItem.svelte => queue/ProcessingQueueItem.svelte} (89%)
 rename web/src/components/{downloads/DownloadStatus.svelte => queue/ProcessingStatus.svelte} (83%)

diff --git a/web/src/components/downloads/DownloadManager.svelte b/web/src/components/queue/ProcessingQueue.svelte
similarity index 81%
rename from web/src/components/downloads/DownloadManager.svelte
rename to web/src/components/queue/ProcessingQueue.svelte
index abf28e03..05ed6db7 100644
--- a/web/src/components/downloads/DownloadManager.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -4,17 +4,18 @@
     import type { QueueItem } from "$lib/types/queue";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-    import DownloadStatus from "$components/downloads/DownloadStatus.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
-    import DownloadItem from "$components/downloads/DownloadItem.svelte";
+    import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
+    import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
 
     import IconGif from "@tabler/icons-svelte/IconGif.svelte";
-    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
+
     let popover: SvelteComponent;
     $: expanded = false;
 
@@ -30,7 +31,7 @@
     };
 
     // dummy data for testing ui rn
-    const downloadQueue: QueueItem[] = [
+    const processingQueue: QueueItem[] = [
         {
             id: "fake id",
             type: "video",
@@ -80,8 +81,8 @@
     });
 </script>
 
-<div id="downloads-manager">
-    <DownloadStatus
+<div id="processing-manager">
+    <ProcessingStatus
         {indeterminate}
         {progress}
         expandAction={popover?.showPopover}
@@ -89,33 +90,33 @@
 
     <PopoverContainer
         bind:this={popover}
-        id="downloads-popover"
+        id="processing-popover"
         {expanded}
         {popoverAction}
         expandStart="right"
     >
-        <div id="downloads-header">
-            <div class="downloads-header-title">downloads</div>
-            {#if downloadQueue.length > 0}
-                <button class="downloads-clear-button">
+        <div id="processing-header">
+            <div class="header-title">processing queue</div>
+            {#if processingQueue.length > 0}
+                <button class="clear-button">
                     <IconX />
                     clear
                 </button>
             {/if}
         </div>
-        <div id="downloads-list">
-            {#each downloadQueue as item}
-                <DownloadItem
+        <div id="processing-list">
+            {#each processingQueue as item}
+                <ProcessingQueueItem
                     filename={item.filename}
                     status={item.status}
                     progress={item.progress}
                     icon={itemIcons[item.type]}
                 />
             {/each}
-            {#if downloadQueue.length === 0}
+            {#if processingQueue.length === 0}
                 <div class="list-stub">
                     <Meowbalt emotion="think" />
-                    <span>your downloads will appear here!</span>
+                    <span>downloads will appear here!</span>
                 </div>
             {/if}
         </div>
@@ -123,7 +124,7 @@
 </div>
 
 <style>
-    #downloads-manager {
+    #processing-manager {
         position: absolute;
         right: 0;
         display: flex;
@@ -135,24 +136,24 @@
         padding: 16px;
     }
 
-    #downloads-manager :global(#downloads-popover) {
+    #processing-manager :global(#processing-popover) {
         padding: 16px;
         max-width: 425px;
         gap: 12px;
     }
 
-    #downloads-header {
+    #processing-header {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
 
-    .downloads-header-title {
+    .header-title {
         font-size: 15px;
         font-weight: 500;
     }
 
-    .downloads-clear-button {
+    .clear-button {
         font-size: 13px;
         font-weight: 500;
         color: var(--red);
@@ -162,12 +163,12 @@
         box-shadow: none;
     }
 
-    .downloads-clear-button :global(svg) {
+    .clear-button :global(svg) {
         height: 16px;
         width: 16px;
     }
 
-    #downloads-list {
+    #processing-list {
         display: flex;
         flex-direction: column;
 
@@ -193,7 +194,7 @@
     }
 
     @media screen and (max-width: 535px) {
-        #downloads-manager {
+        #processing-manager {
             top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
         }
     }
diff --git a/web/src/components/downloads/DownloadItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
similarity index 89%
rename from web/src/components/downloads/DownloadItem.svelte
rename to web/src/components/queue/ProcessingQueueItem.svelte
index 4fc0a15e..c0bc0e0f 100644
--- a/web/src/components/downloads/DownloadItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -8,10 +8,10 @@
     export let icon: ConstructorOfATypedSvelteComponent;
 </script>
 
-<div class="download-item">
-    <div class="download-info">
+<div class="processing-item">
+    <div class="processing-info">
         <div class="file-title">
-            <div class="download-type">
+            <div class="processing-type">
                 <svelte:component this={icon} />
             </div>
             <span>
@@ -37,7 +37,7 @@
 </div>
 
 <style>
-    .download-item,
+    .processing-item,
     .file-actions {
         display: flex;
         flex-direction: row;
@@ -46,24 +46,24 @@
         position: relative;
     }
 
-    .download-item {
+    .processing-item {
         width: 425px;
         padding: 8px 0;
         gap: 8px;
         border-bottom: 1.5px var(--button-elevated) solid;
     }
 
-    .download-type {
+    .processing-type {
         display: flex;
     }
 
-    .download-type :global(svg) {
+    .processing-type :global(svg) {
         width: 18px;
         height: 18px;
         stroke-width: 1.5px;
     }
 
-    .download-info {
+    .processing-info {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -122,7 +122,7 @@
             );
         }
 
-        .download-item:hover .file-actions {
+        .processing-item:hover .file-actions {
             visibility: visible;
             opacity: 1;
         }
@@ -140,11 +140,11 @@
         stroke-width: 1.5px;
     }
 
-    .download-item:first-child {
+    .processing-item:first-child {
         padding-top: 0;
     }
 
-    .download-item:last-child {
+    .processing-item:last-child {
         padding-bottom: 0;
         border: none;
     }
diff --git a/web/src/components/downloads/DownloadStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
similarity index 83%
rename from web/src/components/downloads/DownloadStatus.svelte
rename to web/src/components/queue/ProcessingStatus.svelte
index 743805c7..768a7500 100644
--- a/web/src/components/downloads/DownloadStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte";
+    import IconBlender from "@tabler/icons-svelte/IconBlender.svelte";
 
     export let indeterminate = false;
     export let progress: number = 0;
@@ -10,7 +10,7 @@
 </script>
 
 <button
-    id="downloads-status"
+    id="processing-status"
     on:click={expandAction}
     class:completed={progress >= 100}
 >
@@ -30,35 +30,35 @@
         />
     </svg>
     <div class="icon-holder">
-        <IconArrowDown />
+        <IconBlender />
     </div>
 </button>
 
 <style>
-    #downloads-status {
-        --download-status-glow: 0 0 8px 0px var(--button-elevated-hover);
+    #processing-status {
+        --processing-status-glow: 0 0 8px 0px var(--button-elevated-hover);
 
         pointer-events: all;
         padding: 7px;
         border-radius: 30px;
         box-shadow:
             var(--button-box-shadow),
-            var(--download-status-glow);
+            var(--processing-status-glow);
 
         transition: box-shadow 0.2s, background-color 0.2s;
     }
 
-    #downloads-status.completed {
+    #processing-status.completed {
         box-shadow:
             0 0 0 2px var(--blue) inset,
-            var(--download-status-glow);
+            var(--processing-status-glow);
     }
 
-    :global([data-theme="light"]) #downloads-status.completed {
+    :global([data-theme="light"]) #processing-status.completed {
         background-color: #e0eeff;
     }
 
-    :global([data-theme="dark"]) #downloads-status.completed {
+    :global([data-theme="dark"]) #processing-status.completed {
         background-color: #1f3249;
     }
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 6eb4abf8..f942606f 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -24,8 +24,8 @@
     import Turnstile from "$components/misc/Turnstile.svelte";
     import NotchSticker from "$components/misc/NotchSticker.svelte";
     import DialogHolder from "$components/dialog/DialogHolder.svelte";
+    import ProcessingQueue from "$components/queue/ProcessingQueue.svelte";
     import UpdateNotification from "$components/misc/UpdateNotification.svelte";
-    import DownloadManager from "$components/downloads/DownloadManager.svelte";
 
     $: reduceMotion =
         $settings.appearance.reduceMotion || device.prefers.reducedMotion;
@@ -85,7 +85,7 @@
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
-        <DownloadManager />
+        <ProcessingQueue />
         <DialogHolder />
         <Sidebar />
         {#if $updated}

From fcab598ec436464528a8e726f6441eaaf12f58a4 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 16:58:26 +0600
Subject: [PATCH 07/33] web/ProcessingStatus: make the icon thinner

---
 web/src/components/queue/ProcessingStatus.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
index 768a7500..2bc97276 100644
--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -74,6 +74,7 @@
         height: 21px;
         width: 21px;
         stroke: var(--secondary);
+        stroke-width: 1.5px;
         transition: stroke 0.2s;
     }
 

From 13ec4f4faffdbe5e904791749a91fda0d2237917 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 16:59:08 +0600
Subject: [PATCH 08/33] web/queue: add types & states

---
 web/src/lib/state/queue.ts | 61 ++++++++++++++++++++++++++++++++++++++
 web/src/lib/types/queue.ts | 33 +++++++++++++++++++--
 2 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/state/queue.ts

diff --git a/web/src/lib/state/queue.ts b/web/src/lib/state/queue.ts
new file mode 100644
index 00000000..c586623d
--- /dev/null
+++ b/web/src/lib/state/queue.ts
@@ -0,0 +1,61 @@
+import { merge } from "ts-deepmerge";
+import { get, readable, type Updater } from "svelte/store";
+import type { OngoingQueueItem, QueueItem } from "$lib/types/queue";
+
+type Queue = {
+    [id: string]: QueueItem;
+}
+
+type OngoingQueue = {
+    [id: string]: OngoingQueueItem;
+}
+
+let update: (_: Updater<Queue>) => void;
+
+const queue = readable<Queue>(
+    {},
+    (_, _update) => { update = _update }
+);
+
+export function addToQueue(item: QueueItem) {
+    update(queueData => {
+        queueData[item.id] = item;
+        return queueData;
+    });
+}
+
+export function removeFromQueue(id: string) {
+    update(queueData => {
+        delete queueData[id];
+        return queueData;
+    });
+}
+
+let updateOngoing: (_: Updater<OngoingQueue>) => void;
+
+const ongoingQueue = readable<OngoingQueue>(
+    {},
+    (_, _update) => { updateOngoing = _update }
+);
+
+export function updateOngoingQueue(id: string, itemInfo: Partial<OngoingQueueItem> = {}) {
+    updateOngoing(queueData => {
+        if (get(queue)?.id) {
+            queueData[id] = merge(queueData[id], {
+                id,
+                ...itemInfo,
+            });
+        }
+
+        return queueData;
+    });
+}
+
+export function removeFromOngoingQueue(id: string) {
+    updateOngoing(queue => {
+        delete queue[id];
+        return queue;
+    });
+}
+
+export { queue, ongoingQueue };
diff --git a/web/src/lib/types/queue.ts b/web/src/lib/types/queue.ts
index a0d28692..6785b514 100644
--- a/web/src/lib/types/queue.ts
+++ b/web/src/lib/types/queue.ts
@@ -1,7 +1,34 @@
+type ProcessingStep = "mux" | "mux_hls" | "encode";
+type ProcessingPreset = "mp4" | "webm" | "copy";
+type ProcessingState = "completed" | "failed" | "canceled" | "waiting" | "downloading" | "muxing" | "converting";
+type ProcessingType = "video" | "video_mute" | "audio" | "audio_convert" | "image" | "gif";
+type QueueFileType = "video" | "audio" | "image" | "gif";
+
+export type ProcessingStepItem = {
+    type: ProcessingStep,
+    preset?: ProcessingPreset,
+}
+
+export type QueueFile = {
+    type: QueueFileType,
+    url: string,
+}
+
 export type QueueItem = {
     id: string,
-    type: "video" | "audio" | "mute" | "image" | "gif",
+    status: ProcessingState,
+    type: ProcessingType,
     filename: string,
-    status: string,
-    progress: number,
+    files: QueueFile[],
+    processingSteps: ProcessingStepItem[],
+}
+
+export type OngoingQueueItem = {
+    id: string,
+    currentStep?: ProcessingStep,
+    size?: {
+        expected: number,
+        current: number,
+    },
+    speed?: number,
 }

From a8bb64ffb1831b1f25000f12ccc567358b99594f Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:04:57 +0600
Subject: [PATCH 09/33] web/ProcessingQueue: use new types and states, refactor

- added a dedicated ui debug button
- fixed scrolling (content is no longer cutting off weirdly)
- moved stub to its own component
- moved all permanent strings to localization
---
 web/i18n/en/button.json                       |   3 +-
 web/i18n/en/queue.json                        |   6 +
 .../components/queue/ProcessingQueue.svelte   | 147 ++++++++----------
 .../queue/ProcessingQueueItem.svelte          |  11 +-
 .../queue/ProcessingQueueStub.svelte          |  44 ++++++
 5 files changed, 122 insertions(+), 89 deletions(-)
 create mode 100644 web/i18n/en/queue.json
 create mode 100644 web/src/components/queue/ProcessingQueueStub.svelte

diff --git a/web/i18n/en/button.json b/web/i18n/en/button.json
index 1ea7fb41..f066049e 100644
--- a/web/i18n/en/button.json
+++ b/web/i18n/en/button.json
@@ -16,5 +16,6 @@
     "save": "save",
     "export": "export",
     "yes": "yes",
-    "no": "no"
+    "no": "no",
+    "clear": "clear"
 }
diff --git a/web/i18n/en/queue.json b/web/i18n/en/queue.json
new file mode 100644
index 00000000..f709b44b
--- /dev/null
+++ b/web/i18n/en/queue.json
@@ -0,0 +1,6 @@
+{
+    "title": "processing queue",
+    "stub": "nothing in the queue yet, only two of us.\ntry {{ value }} something!",
+    "stub.download": "downloading",
+    "stub.remux": "remuxing"
+}
diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 05ed6db7..9609ad5f 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
     import { onNavigate } from "$app/navigation";
     import type { SvelteComponent } from "svelte";
-    import type { QueueItem } from "$lib/types/queue";
 
-    import Meowbalt from "$components/misc/Meowbalt.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
     import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
     import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
+    import ProcessingQueueStub from "$components/queue/ProcessingQueueStub.svelte";
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
 
     import IconGif from "@tabler/icons-svelte/IconGif.svelte";
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
@@ -16,64 +17,45 @@
     import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
 
+    import settings from "$lib/state/settings";
+    import { addToQueue, queue } from "$lib/state/queue";
+    import type { QueueItem } from "$lib/types/queue";
+
     let popover: SvelteComponent;
     $: expanded = false;
 
-    $: progress = 0;
+    $: queueItems = Object.entries($queue) as [id: string, item: QueueItem][];
+
+    $: queueLength = Object.keys($queue).length;
     $: indeterminate = false;
 
     const itemIcons = {
         video: IconMovie,
+        video_mute: IconVolume3,
         audio: IconMusic,
-        mute: IconVolume3,
+        audio_convert: IconMusic,
         image: IconPhoto,
         gif: IconGif,
     };
 
-    // dummy data for testing ui rn
-    const processingQueue: QueueItem[] = [
-        {
-            id: "fake id",
+    const addFakeQueueItem = () => {
+        return addToQueue({
+            id: crypto.randomUUID(),
+            status: "waiting",
             type: "video",
-            filename: "placeholder.mp4",
-            status: "processing: 69%",
-            progress: 69,
-        },
-        {
-            id: "fake id",
-            type: "audio",
-            filename: "placeholder.mp3",
-            status: "processing: 3%",
-            progress: 3,
-        },
-        {
-            id: "fake id",
-            type: "mute",
-            filename: "placeholder.mp4",
-            status: "processing: 55%",
-            progress: 55,
-        },
-        {
-            id: "fake id",
-            type: "image",
-            filename: "placeholder.jpg",
-            status: "processing: 21%",
-            progress: 22,
-        },
-        {
-            id: "fake id",
-            type: "gif",
-            filename: "placeholder.gif",
-            status: "processing: 82%",
-            progress: 82,
-        },
-    ];
+            filename: "test.mp4",
+            files: [
+                {
+                    type: "video",
+                    url: "https://",
+                },
+            ],
+            processingSteps: [],
+        });
+    };
 
     const popoverAction = async () => {
         expanded = !expanded;
-        if (expanded) {
-            popover.focus();
-        }
     };
 
     onNavigate(() => {
@@ -82,11 +64,7 @@
 </script>
 
 <div id="processing-manager">
-    <ProcessingStatus
-        {indeterminate}
-        {progress}
-        expandAction={popover?.showPopover}
-    />
+    <ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
 
     <PopoverContainer
         bind:this={popover}
@@ -96,28 +74,34 @@
         expandStart="right"
     >
         <div id="processing-header">
-            <div class="header-title">processing queue</div>
-            {#if processingQueue.length > 0}
-                <button class="clear-button">
-                    <IconX />
-                    clear
-                </button>
-            {/if}
+            <div class="header-title">{$t("queue.title")}</div>
+            <div class="header-buttons">
+                {#if queueLength > 0}
+                    <button class="clear-button">
+                        <IconX />
+                        {$t("button.clear")}
+                    </button>
+                {/if}
+                <!-- button for ui debug -->
+                {#if $settings.advanced.debug}
+                    <button class="test-button" on:click={addFakeQueueItem}>
+                        <IconPlus />
+                        add item
+                    </button>
+                {/if}
+            </div>
         </div>
         <div id="processing-list">
-            {#each processingQueue as item}
+            {#each queueItems as [id, item]}
                 <ProcessingQueueItem
+                    {id}
                     filename={item.filename}
                     status={item.status}
-                    progress={item.progress}
                     icon={itemIcons[item.type]}
                 />
             {/each}
-            {#if processingQueue.length === 0}
-                <div class="list-stub">
-                    <Meowbalt emotion="think" />
-                    <span>downloads will appear here!</span>
-                </div>
+            {#if queueLength === 0}
+                <ProcessingQueueStub />
             {/if}
         </div>
     </PopoverContainer>
@@ -137,9 +121,10 @@
     }
 
     #processing-manager :global(#processing-popover) {
-        padding: 16px;
         max-width: 425px;
         gap: 12px;
+        padding: 16px;
+        padding-bottom: 0;
     }
 
     #processing-header {
@@ -153,21 +138,30 @@
         font-weight: 500;
     }
 
-    .clear-button {
+    .header-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: var(--padding);
+    }
+
+    .header-buttons button {
         font-size: 13px;
         font-weight: 500;
-        color: var(--red);
-
         padding: 0;
         background: none;
         box-shadow: none;
+        text-align: left;
     }
 
-    .clear-button :global(svg) {
+    .header-buttons button :global(svg) {
         height: 16px;
         width: 16px;
     }
 
+    .clear-button {
+        color: var(--red);
+    }
+
     #processing-list {
         display: flex;
         flex-direction: column;
@@ -176,23 +170,6 @@
         overflow: scroll;
     }
 
-    .list-stub {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--gray);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 25px;
-        text-align: center;
-        gap: var(--padding);
-    }
-
-    .list-stub :global(.meowbalt) {
-        height: 120px;
-    }
-
     @media screen and (max-width: 535px) {
         #processing-manager {
             top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index c0bc0e0f..a9114f7f 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import IconX from "@tabler/icons-svelte/IconX.svelte";
     import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import { removeFromQueue } from "$lib/state/queue";
 
+    export let id: string;
     export let filename: string;
     export let status: string;
     export let progress: number = 0;
@@ -24,13 +26,16 @@
                 style="width: {Math.min(100, progress)}%"
             ></div>
         </div>
-        <div class="file-status">{status}</div>
+        <div class="file-status">{id}: {status}</div>
     </div>
     <div class="file-actions">
         <button class="action-button">
             <IconDownload />
         </button>
-        <button class="action-button">
+        <button
+            class="action-button"
+            on:click={() => removeFromQueue(id)}
+        >
             <IconX />
         </button>
     </div>
@@ -145,7 +150,7 @@
     }
 
     .processing-item:last-child {
-        padding-bottom: 0;
+        padding-bottom: 16px;
         border: none;
     }
 </style>
diff --git a/web/src/components/queue/ProcessingQueueStub.svelte b/web/src/components/queue/ProcessingQueueStub.svelte
new file mode 100644
index 00000000..5a4afef7
--- /dev/null
+++ b/web/src/components/queue/ProcessingQueueStub.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+
+    const stubActions = ["download", "remux"];
+
+    const randomAction = () => {
+        return stubActions[Math.floor(Math.random() * stubActions.length)];
+    };
+</script>
+
+<div class="queue-stub">
+    <Meowbalt emotion="think" />
+    <span class="subtext stub-text">
+        {$t("queue.stub", {
+            value: $t(`queue.stub.${randomAction()}`),
+        })}
+    </span>
+</div>
+
+<style>
+    .queue-stub {
+        --base-padding: calc(var(--padding) * 1.5);
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--gray);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--base-padding);
+        padding-bottom: calc(var(--base-padding) + 16px);
+        text-align: center;
+        gap: var(--padding);
+    }
+
+    .queue-stub :global(.meowbalt) {
+        height: 120px;
+    }
+
+    .stub-text {
+        padding: 0;
+    }
+</style>

From 3f46395bd20b0c5da54440aeb1192c117e63192e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:10:08 +0600
Subject: [PATCH 10/33] web/state/queue: add `nukeEntireQueue()`

---
 web/src/lib/state/queue.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/web/src/lib/state/queue.ts b/web/src/lib/state/queue.ts
index c586623d..ee431743 100644
--- a/web/src/lib/state/queue.ts
+++ b/web/src/lib/state/queue.ts
@@ -58,4 +58,13 @@ export function removeFromOngoingQueue(id: string) {
     });
 }
 
+export function nukeEntireQueue() {
+    update(() => {
+        return {};
+    });
+    updateOngoing(() => {
+        return {};
+    });
+}
+
 export { queue, ongoingQueue };

From eba8dc3767d277b77f6b5bb9d2eee9bfc77ce466 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:10:30 +0600
Subject: [PATCH 11/33] web/ProcessingQueue: make the clear button actually
 clear the queue

---
 web/src/components/queue/ProcessingQueue.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 9609ad5f..f7967942 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -18,7 +18,7 @@
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
 
     import settings from "$lib/state/settings";
-    import { addToQueue, queue } from "$lib/state/queue";
+    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
     import type { QueueItem } from "$lib/types/queue";
 
     let popover: SvelteComponent;
@@ -77,7 +77,7 @@
             <div class="header-title">{$t("queue.title")}</div>
             <div class="header-buttons">
                 {#if queueLength > 0}
-                    <button class="clear-button">
+                    <button class="clear-button" on:click={nukeEntireQueue}>
                         <IconX />
                         {$t("button.clear")}
                     </button>

From f3ff3656ef412125fa28a92218d0dbccc6a5b307 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:47:48 +0600
Subject: [PATCH 12/33] web/ProcessingQueue: fix ui on narrow screens

---
 .../components/queue/ProcessingQueue.svelte   | 22 ++++++++++++-------
 .../queue/ProcessingQueueItem.svelte          |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index f7967942..5eae4b24 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -63,7 +63,7 @@
     });
 </script>
 
-<div id="processing-manager">
+<div id="processing-queue" class:expanded>
     <ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
 
     <PopoverContainer
@@ -108,7 +108,8 @@
 </div>
 
 <style>
-    #processing-manager {
+    #processing-queue {
+        --holder-padding: 16px;
         position: absolute;
         right: 0;
         display: flex;
@@ -117,14 +118,17 @@
         justify-content: end;
         z-index: 9;
         pointer-events: none;
-        padding: 16px;
+        padding: var(--holder-padding);
+        width: calc(100% - var(--holder-padding) * 2);
     }
 
-    #processing-manager :global(#processing-popover) {
-        max-width: 425px;
+    #processing-queue :global(#processing-popover) {
         gap: 12px;
         padding: 16px;
         padding-bottom: 0;
+
+        width: calc(100% - 16px * 2);
+        max-width: 425px;
     }
 
     #processing-header {
@@ -166,13 +170,15 @@
         display: flex;
         flex-direction: column;
 
-        max-height: 60vh;
+        max-height: 65vh;
         overflow: scroll;
     }
 
     @media screen and (max-width: 535px) {
-        #processing-manager {
-            top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
+        #processing-queue {
+            --holder-padding: 8px;
+            padding-top: 4px;
+            top: env(safe-area-inset-top);
         }
     }
 </style>
diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index a9114f7f..6c43a6cf 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -52,7 +52,7 @@
     }
 
     .processing-item {
-        width: 425px;
+        width: 100%;
         padding: 8px 0;
         gap: 8px;
         border-bottom: 1.5px var(--button-elevated) solid;

From 5860efa6207116cbabca5cb83bcc7f4c195b5236 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:48:40 +0600
Subject: [PATCH 13/33] web/PopoverContainer: hide for screen readers when not
 expanded

---
 web/src/components/misc/PopoverContainer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/misc/PopoverContainer.svelte b/web/src/components/misc/PopoverContainer.svelte
index d43e8426..832f5749 100644
--- a/web/src/components/misc/PopoverContainer.svelte
+++ b/web/src/components/misc/PopoverContainer.svelte
@@ -19,7 +19,7 @@
     };
 </script>
 
-<div {id} class="popover {expandStart}" class:expanded>
+<div {id} class="popover {expandStart}" aria-hidden={!expanded} class:expanded>
     {#if renderPopover}
         <slot></slot>
     {/if}

From 73d0b24aafc5572b8347697b58a725f2ad3f757a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 17:57:07 +0600
Subject: [PATCH 14/33] web/layout: move processing queue into content for
 better a11y

---
 web/src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index f942606f..b7e7aade 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -85,13 +85,13 @@
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
-        <ProcessingQueue />
         <DialogHolder />
         <Sidebar />
         {#if $updated}
             <UpdateNotification />
         {/if}
         <div id="content">
+            <ProcessingQueue />
             {#if ($turnstileEnabled && $page.url.pathname === "/") || $turnstileCreated}
                 <Turnstile />
             {/if}

From 8c9f7ff36d99b774c32d3d3592911f698af4a5de Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Dec 2024 18:42:34 +0600
Subject: [PATCH 15/33] web/ProcessingQueue: align buttons to center vertically

---
 web/src/components/queue/ProcessingQueue.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 5eae4b24..728d31af 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -126,7 +126,6 @@
         gap: 12px;
         padding: 16px;
         padding-bottom: 0;
-
         width: calc(100% - 16px * 2);
         max-width: 425px;
     }
@@ -135,6 +134,7 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        align-items: center;
     }
 
     .header-title {
@@ -155,6 +155,7 @@
         background: none;
         box-shadow: none;
         text-align: left;
+        border-radius: 3px;
     }
 
     .header-buttons button :global(svg) {

From 06000cbc776c7e3055d7abde56674a7850d0380a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 19 Dec 2024 21:09:51 +0600
Subject: [PATCH 16/33] web/SectionHeading: added a new prop to disable the
 link

---
 web/src/components/misc/SectionHeading.svelte | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
index e3b1e635..8741030f 100644
--- a/web/src/components/misc/SectionHeading.svelte
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -8,6 +8,7 @@
     export let title: string;
     export let sectionId: string;
     export let beta = false;
+    export let nolink = false;
     export let copyData = "";
 
     const sectionURL = `${$page.url.origin}${$page.url.pathname}#${sectionId}`;
@@ -32,18 +33,20 @@
         </div>
     {/if}
 
-    <button
-        class="link-copy"
-        aria-label={copied
-            ? $t("button.copied")
-            : $t(`button.copy${copyData ? "" : ".section"}`)}
-        on:click={() => {
-            copied = true;
-            copyURL(copyData || sectionURL);
-        }}
-    >
-        <CopyIcon check={copied} regularIcon={!!copyData} />
-    </button>
+    {#if !nolink}
+        <button
+            class="link-copy"
+            aria-label={copied
+                ? $t("button.copied")
+                : $t(`button.copy${copyData ? "" : ".section"}`)}
+            on:click={() => {
+                copied = true;
+                copyURL(copyData || sectionURL);
+            }}
+        >
+            <CopyIcon check={copied} regularIcon={!!copyData} />
+        </button>
+    {/if}
 </div>
 
 <style>

From 5820736a3118815465069ed74c8677823b0f794e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 19 Dec 2024 21:11:02 +0600
Subject: [PATCH 17/33] web/ProcessingQueue: use the heading component with the
 beta tag

---
 .../components/queue/ProcessingQueue.svelte   | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 728d31af..326346f0 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
     import { onNavigate } from "$app/navigation";
-    import type { SvelteComponent } from "svelte";
 
+    import settings from "$lib/state/settings";
+    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
+
+    import type { SvelteComponent } from "svelte";
+    import type { QueueItem } from "$lib/types/queue";
+
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
     import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
     import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
@@ -17,10 +23,6 @@
     import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
 
-    import settings from "$lib/state/settings";
-    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
-    import type { QueueItem } from "$lib/types/queue";
-
     let popover: SvelteComponent;
     $: expanded = false;
 
@@ -74,7 +76,12 @@
         expandStart="right"
     >
         <div id="processing-header">
-            <div class="header-title">{$t("queue.title")}</div>
+            <SectionHeading
+                title={$t("queue.title")}
+                sectionId="queue"
+                beta
+                nolink
+            />
             <div class="header-buttons">
                 {#if queueLength > 0}
                     <button class="clear-button" on:click={nukeEntireQueue}>
@@ -137,11 +144,6 @@
         align-items: center;
     }
 
-    .header-title {
-        font-size: 15px;
-        font-weight: 500;
-    }
-
     .header-buttons {
         display: flex;
         flex-direction: row;

From e7c2872e402a036a336e3a3490de3fbe19c72696 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 10:16:48 +0000
Subject: [PATCH 18/33] api/stream: rename getInternalStream to
 getInternalTunnel

---
 api/src/core/api.js      | 4 ++--
 api/src/stream/manage.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/api/src/core/api.js b/api/src/core/api.js
index 153f2ca6..76a0f95f 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -16,7 +16,7 @@ import { createStore } from "../store/redis-ratelimit.js";
 import { randomizeCiphers } from "../misc/randomize-ciphers.js";
 import { verifyTurnstileToken } from "../security/turnstile.js";
 import { friendlyServiceName } from "../processing/service-alias.js";
-import { verifyStream, getInternalStream } from "../stream/manage.js";
+import { verifyStream, getInternalTunnel } from "../stream/manage.js";
 import { createResponse, normalizeRequest, getIP } from "../processing/request.js";
 import * as APIKeys from "../security/api-keys.js";
 import * as Cookies from "../processing/cookie/manager.js";
@@ -303,7 +303,7 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
             return res.sendStatus(400);
         }
 
-        const streamInfo = getInternalStream(req.query.id);
+        const streamInfo = getInternalTunnel(req.query.id);
         if (!streamInfo) {
             return res.sendStatus(404);
         }
diff --git a/api/src/stream/manage.js b/api/src/stream/manage.js
index 79b5c1db..a090ca22 100644
--- a/api/src/stream/manage.js
+++ b/api/src/stream/manage.js
@@ -68,7 +68,7 @@ export function createStream(obj) {
     return streamLink.toString();
 }
 
-export function getInternalStream(id) {
+export function getInternalTunnel(id) {
     return internalStreamCache.get(id);
 }
 
@@ -124,7 +124,7 @@ export function destroyInternalStream(url) {
     const id = url.searchParams.get('id');
 
     if (internalStreamCache.has(id)) {
-        closeRequest(getInternalStream(id)?.controller);
+        closeRequest(getInternalTunnel(id)?.controller);
         internalStreamCache.delete(id);
     }
 }

From f06aa65801041929e1a8440b62457d7b96b14c4f Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 10:19:15 +0000
Subject: [PATCH 19/33] api: always create separate server for itunnels

---
 api/src/core/api.js | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/api/src/core/api.js b/api/src/core/api.js
index 76a0f95f..e19e0674 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -316,8 +316,6 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
         return stream(res, { type: 'internal', ...streamInfo });
     };
 
-    app.get('/itunnel', itunnelHandler);
-
     app.get('/', (_, res) => {
         res.type('json');
         res.status(200).send(serverInfo);
@@ -378,17 +376,15 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
         }
     });
 
-    if (isCluster) {
-        const istreamer = express();
-        istreamer.get('/itunnel', itunnelHandler);
-        const server = istreamer.listen({
-            port: 0,
-            host: '127.0.0.1',
-            exclusive: true
-        }, () => {
-            const { port } = server.address();
-            console.log(`${Green('[✓]')} cobalt sub-instance running on 127.0.0.1:${port}`);
-            setTunnelPort(port);
-        });
-    }
+    const istreamer = express();
+    istreamer.get('/itunnel', itunnelHandler);
+    const server = istreamer.listen({
+        port: 0,
+        host: '127.0.0.1',
+        exclusive: true
+    }, () => {
+        const { port } = server.address();
+        console.log(`${Green('[✓]')} cobalt sub-instance running on 127.0.0.1:${port}`);
+        setTunnelPort(port);
+    });
 }

From bc597c817faa2dec9ce386458dac4f7a8cdb6b48 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 10:38:31 +0000
Subject: [PATCH 20/33] api: move itunnel handlers to separate file

---
 api/src/core/api.js     | 43 ++++-------------------------
 api/src/core/itunnel.js | 61 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 37 deletions(-)
 create mode 100644 api/src/core/itunnel.js

diff --git a/api/src/core/api.js b/api/src/core/api.js
index e19e0674..b93ff2ca 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -8,18 +8,19 @@ import jwt from "../security/jwt.js";
 import stream from "../stream/stream.js";
 import match from "../processing/match.js";
 
-import { env, isCluster, setTunnelPort } from "../config.js";
+import { env } from "../config.js";
 import { extract } from "../processing/url.js";
-import { Green, Bright, Cyan } from "../misc/console-text.js";
+import { Bright, Cyan } from "../misc/console-text.js";
 import { hashHmac } from "../security/secrets.js";
 import { createStore } from "../store/redis-ratelimit.js";
 import { randomizeCiphers } from "../misc/randomize-ciphers.js";
 import { verifyTurnstileToken } from "../security/turnstile.js";
 import { friendlyServiceName } from "../processing/service-alias.js";
-import { verifyStream, getInternalTunnel } from "../stream/manage.js";
+import { verifyStream } from "../stream/manage.js";
 import { createResponse, normalizeRequest, getIP } from "../processing/request.js";
 import * as APIKeys from "../security/api-keys.js";
 import * as Cookies from "../processing/cookie/manager.js";
+import { setupTunnelHandler } from "./itunnel.js";
 
 const git = {
     branch: await getBranch(),
@@ -292,29 +293,7 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
         }
 
         return stream(res, streamInfo);
-    })
-
-    const itunnelHandler = (req, res) => {
-        if (!req.ip.endsWith('127.0.0.1')) {
-            return res.sendStatus(403);
-        }
-
-        if (String(req.query.id).length !== 21) {
-            return res.sendStatus(400);
-        }
-
-        const streamInfo = getInternalTunnel(req.query.id);
-        if (!streamInfo) {
-            return res.sendStatus(404);
-        }
-
-        streamInfo.headers = new Map([
-            ...(streamInfo.headers || []),
-            ...Object.entries(req.headers)
-        ]);
-
-        return stream(res, { type: 'internal', ...streamInfo });
-    };
+    });
 
     app.get('/', (_, res) => {
         res.type('json');
@@ -376,15 +355,5 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
         }
     });
 
-    const istreamer = express();
-    istreamer.get('/itunnel', itunnelHandler);
-    const server = istreamer.listen({
-        port: 0,
-        host: '127.0.0.1',
-        exclusive: true
-    }, () => {
-        const { port } = server.address();
-        console.log(`${Green('[✓]')} cobalt sub-instance running on 127.0.0.1:${port}`);
-        setTunnelPort(port);
-    });
+    setupTunnelHandler();
 }
diff --git a/api/src/core/itunnel.js b/api/src/core/itunnel.js
new file mode 100644
index 00000000..fea4cb76
--- /dev/null
+++ b/api/src/core/itunnel.js
@@ -0,0 +1,61 @@
+import stream from "../stream/stream.js";
+import { getInternalTunnel } from "../stream/manage.js";
+import { setTunnelPort } from "../config.js";
+import { Green } from "../misc/console-text.js";
+import express from "express";
+
+const validateTunnel = (req, res) => {
+    if (!req.ip.endsWith('127.0.0.1')) {
+        res.sendStatus(403);
+        return;
+    }
+
+    if (String(req.query.id).length !== 21) {
+        res.sendStatus(400);
+        return;
+    }
+
+    const streamInfo = getInternalTunnel(req.query.id);
+    if (!streamInfo) {
+        res.sendStatus(404);
+        return;
+    }
+
+    return streamInfo;
+}
+
+const streamTunnel = (req, res) => {
+    const streamInfo = validateTunnel(req, res);
+    if (!streamInfo) {
+        return;
+    }
+
+    streamInfo.headers = new Map([
+        ...(streamInfo.headers || []),
+        ...Object.entries(req.headers)
+    ]);
+
+    return stream(res, { type: 'internal', ...streamInfo });
+}
+
+export const setupTunnelHandler = () => {
+    const tunnelHandler = express();
+
+    tunnelHandler.get('/itunnel', streamTunnel);
+
+    // fallback
+    tunnelHandler.use((_, res) => res.sendStatus(400));
+    // error handler
+    tunnelHandler.use((_, __, res, ____) => res.socket.end());
+
+
+    const server = tunnelHandler.listen({
+        port: 0,
+        host: '127.0.0.1',
+        exclusive: true
+    }, () => {
+        const { port } = server.address();
+        console.log(`${Green('[✓]')} internal tunnel handler running on 127.0.0.1:${port}`);
+        setTunnelPort(port);
+    });
+}

From bf4675a5e37fd2084482068eb60974e39d7d7023 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 11:29:13 +0000
Subject: [PATCH 21/33] api/stream: move bsky override into isHlsResponse

---
 api/src/stream/internal-hls.js | 7 +++++--
 api/src/stream/internal.js     | 5 +----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/api/src/stream/internal-hls.js b/api/src/stream/internal-hls.js
index 55634c71..61f3d361 100644
--- a/api/src/stream/internal-hls.js
+++ b/api/src/stream/internal-hls.js
@@ -55,8 +55,11 @@ function transformMediaPlaylist(streamInfo, hlsPlaylist) {
 
 const HLS_MIME_TYPES = ["application/vnd.apple.mpegurl", "audio/mpegurl", "application/x-mpegURL"];
 
-export function isHlsResponse (req) {
-    return HLS_MIME_TYPES.includes(req.headers['content-type']);
+export function isHlsResponse(req, streamInfo) {
+    return HLS_MIME_TYPES.includes(req.headers['content-type'])
+        // bluesky's cdn responds with wrong content-type for the hls playlist,
+        // so we enforce it here until they fix it
+        || (streamInfo.service === 'bsky' && streamInfo.url.endsWith('.m3u8'));
 }
 
 export async function handleHlsPlaylist(streamInfo, req, res) {
diff --git a/api/src/stream/internal.js b/api/src/stream/internal.js
index 7d8bf4c9..c32a3692 100644
--- a/api/src/stream/internal.js
+++ b/api/src/stream/internal.js
@@ -96,10 +96,7 @@ async function handleGenericStream(streamInfo, res) {
         res.status(fileResponse.statusCode);
         fileResponse.body.on('error', () => {});
 
-        // bluesky's cdn responds with wrong content-type for the hls playlist,
-        // so we enforce it here until they fix it
-        const isHls = isHlsResponse(fileResponse)
-                      || (streamInfo.service === "bsky" && streamInfo.url.endsWith('.m3u8'));
+        const isHls = isHlsResponse(fileResponse, streamInfo);
 
         for (const [ name, value ] of Object.entries(fileResponse.headers)) {
             if (!isHls || name.toLowerCase() !== 'content-length') {

From 11388cb418bec582fd5ccaa00d8f5e51af78bdaf Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 16:21:38 +0000
Subject: [PATCH 22/33] api/stream: await all call types

---
 api/src/stream/stream.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/api/src/stream/stream.js b/api/src/stream/stream.js
index a6d41200..6de52793 100644
--- a/api/src/stream/stream.js
+++ b/api/src/stream/stream.js
@@ -10,20 +10,20 @@ export default async function(res, streamInfo) {
                 return await stream.proxy(streamInfo, res);
 
             case "internal":
-                return internalStream(streamInfo, res);
+                return await internalStream(streamInfo, res);
 
             case "merge":
-                return stream.merge(streamInfo, res);
+                return await stream.merge(streamInfo, res);
 
             case "remux":
             case "mute":
-                return stream.remux(streamInfo, res);
+                return await stream.remux(streamInfo, res);
 
             case "audio":
-                return stream.convertAudio(streamInfo, res);
+                return await stream.convertAudio(streamInfo, res);
 
             case "gif":
-                return stream.convertGif(streamInfo, res);
+                return await stream.convertGif(streamInfo, res);
         }
 
         closeResponse(res);

From 05e0f031ed46fe0aa45f7c413e19bac4e9424dc1 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 17:07:30 +0000
Subject: [PATCH 23/33] api/stream: add `Estimated-Content-Length` header to
 tunnels

present where Content-Length cannot be accurately calculated,
pure proxy streams do not have this header and instead have
the accurate Content-Length one.
---
 api/src/stream/internal-hls.js | 57 ++++++++++++++++++++++++++++++++++
 api/src/stream/internal.js     | 39 ++++++++++++++++++++++-
 api/src/stream/manage.js       | 10 ++++++
 api/src/stream/shared.js       | 39 +++++++++++++++++++++++
 api/src/stream/types.js        | 27 +++++++++++-----
 5 files changed, 163 insertions(+), 9 deletions(-)

diff --git a/api/src/stream/internal-hls.js b/api/src/stream/internal-hls.js
index 61f3d361..e4416288 100644
--- a/api/src/stream/internal-hls.js
+++ b/api/src/stream/internal-hls.js
@@ -1,5 +1,6 @@
 import HLS from "hls-parser";
 import { createInternalStream } from "./manage.js";
+import { request } from "undici";
 
 function getURL(url) {
     try {
@@ -74,3 +75,59 @@ export async function handleHlsPlaylist(streamInfo, req, res) {
 
     res.send(hlsPlaylist);
 }
+
+async function getSegmentSize(url, config) {
+    const segmentResponse = await request(url, {
+        ...config,
+        throwOnError: true
+    });
+
+    if (segmentResponse.headers['content-length']) {
+        segmentResponse.body.dump();
+        return +segmentResponse.headers['content-length'];
+    }
+
+    // if the response does not have a content-length
+    // header, we have to compute it ourselves
+    let size = 0;
+
+    for await (const data of segmentResponse.body) {
+        size += data.length;
+    }
+
+    return size;
+}
+
+export async function probeInternalHLSTunnel(streamInfo) {
+    const { url, headers, dispatcher, signal } = streamInfo;
+
+    // remove all falsy headers
+    Object.keys(headers).forEach(key => {
+        if (!headers[key]) delete headers[key];
+    });
+
+    const config = { headers, dispatcher, signal, maxRedirections: 16 };
+
+    const manifestResponse = await fetch(url, config);
+
+    const manifest = HLS.parse(await manifestResponse.text());
+    if (manifest.segments.length === 0)
+        return -1;
+
+    const segmentSamples = await Promise.all(
+        Array(5).fill().map(async () => {
+            const manifestIdx = Math.floor(Math.random() * manifest.segments.length);
+            const randomSegment = manifest.segments[manifestIdx];
+            if (!randomSegment.uri)
+                throw "segment is missing URI";
+
+            const segmentSize = await getSegmentSize(randomSegment.uri, config) / randomSegment.duration;
+            return segmentSize;
+        })
+    );
+
+    const averageBitrate = segmentSamples.reduce((a, b) => a + b) / segmentSamples.length;
+    const totalDuration = manifest.segments.reduce((acc, segment) => acc + segment.duration, 0);
+
+    return averageBitrate * totalDuration;
+}
diff --git a/api/src/stream/internal.js b/api/src/stream/internal.js
index c32a3692..2cfc990c 100644
--- a/api/src/stream/internal.js
+++ b/api/src/stream/internal.js
@@ -1,7 +1,7 @@
 import { request } from "undici";
 import { Readable } from "node:stream";
 import { closeRequest, getHeaders, pipe } from "./shared.js";
-import { handleHlsPlaylist, isHlsResponse } from "./internal-hls.js";
+import { handleHlsPlaylist, isHlsResponse, probeInternalHLSTunnel } from "./internal-hls.js";
 
 const CHUNK_SIZE = BigInt(8e6); // 8 MB
 const min = (a, b) => a < b ? a : b;
@@ -130,3 +130,40 @@ export function internalStream(streamInfo, res) {
 
     return handleGenericStream(streamInfo, res);
 }
+
+export async function probeInternalTunnel(streamInfo) {
+    try {
+        const signal = AbortSignal.timeout(3000);
+        const headers = {
+            ...Object.fromEntries(streamInfo.headers || []),
+            ...getHeaders(streamInfo.service),
+            host: undefined,
+            range: undefined
+        };
+
+        if (streamInfo.isHLS) {
+            return probeInternalHLSTunnel({
+                ...streamInfo,
+                signal,
+                headers
+            });
+        }
+
+        const response = await request(streamInfo.url, {
+            method: 'HEAD',
+            headers,
+            dispatcher: streamInfo.dispatcher,
+            signal,
+            maxRedirections: 16
+        });
+
+        if (response.statusCode !== 200)
+            throw "status is not 200 OK";
+
+        const size = +response.headers['content-length'];
+        if (isNaN(size))
+            throw "content-length is not a number";
+
+        return size;
+    } catch {}
+}
diff --git a/api/src/stream/manage.js b/api/src/stream/manage.js
index a090ca22..10d25384 100644
--- a/api/src/stream/manage.js
+++ b/api/src/stream/manage.js
@@ -72,6 +72,16 @@ export function getInternalTunnel(id) {
     return internalStreamCache.get(id);
 }
 
+export function getInternalTunnelFromURL(url) {
+    url = new URL(url);
+    if (url.hostname !== '127.0.0.1') {
+        return;
+    }
+
+    const id = url.searchParams.get('id');
+    return getInternalTunnel(id);
+}
+
 export function createInternalStream(url, obj = {}) {
     assert(typeof url === 'string');
 
diff --git a/api/src/stream/shared.js b/api/src/stream/shared.js
index 65af03f0..9a2b6779 100644
--- a/api/src/stream/shared.js
+++ b/api/src/stream/shared.js
@@ -1,5 +1,7 @@
 import { genericUserAgent } from "../config.js";
 import { vkClientAgent } from "../processing/services/vk.js";
+import { getInternalTunnelFromURL } from "./manage.js";
+import { probeInternalTunnel } from "./internal.js";
 
 const defaultHeaders = {
     'user-agent': genericUserAgent
@@ -47,3 +49,40 @@ export function pipe(from, to, done) {
 
     from.pipe(to);
 }
+
+export async function estimateTunnelLength(streamInfo, multiplier = 1) {
+    let urls = streamInfo.urls;
+    if (!Array.isArray(urls)) {
+        urls = [ urls ];
+    }
+
+    const internalTunnels = urls.map(getInternalTunnelFromURL);
+    if (internalTunnels.some(t => !t))
+        return -1;
+
+    const sizes = await Promise.all(internalTunnels.map(probeInternalTunnel));
+    const estimatedSize = sizes.reduce(
+        // if one of the sizes is missing, let's just make a very
+        // bold guess that it's the same size as the existing one
+        (acc, cur) => cur <= 0 ? acc * 2 : acc + cur,
+        0
+    );
+
+    if (isNaN(estimatedSize) || estimatedSize <= 0) {
+        return -1;
+    }
+
+    return Math.floor(estimatedSize * multiplier);
+}
+
+export function estimateAudioMultiplier(streamInfo) {
+    if (streamInfo.audioFormat === 'wav') {
+        return 1411 / 128;
+    }
+
+    if (streamInfo.audioCopy) {
+        return 1;
+    }
+
+    return streamInfo.audioBitrate / 128;
+}
diff --git a/api/src/stream/types.js b/api/src/stream/types.js
index 0a4e2d47..688e6eef 100644
--- a/api/src/stream/types.js
+++ b/api/src/stream/types.js
@@ -1,4 +1,4 @@
-import { Agent, request } from "undici";
+import { Agent, request, stream } from "undici";
 import ffmpeg from "ffmpeg-static";
 import { spawn } from "child_process";
 import { create as contentDisposition } from "content-disposition-header";
@@ -6,7 +6,7 @@ import { create as contentDisposition } from "content-disposition-header";
 import { env } from "../config.js";
 import { destroyInternalStream } from "./manage.js";
 import { hlsExceptions } from "../processing/service-config.js";
-import { getHeaders, closeRequest, closeResponse, pipe } from "./shared.js";
+import { getHeaders, closeRequest, closeResponse, pipe, estimateTunnelLength, estimateAudioMultiplier } from "./shared.js";
 
 const ffmpegArgs = {
     webm: ["-c:v", "copy", "-c:a", "copy"],
@@ -73,6 +73,7 @@ const proxy = async (streamInfo, res) => {
     try {
         res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
         res.setHeader('Content-disposition', contentDisposition(streamInfo.filename));
+        res.setHeader('Estimated-Content-Length', await estimateTunnelLength(streamInfo));
 
         const { body: stream, headers, statusCode } = await request(streamInfo.urls, {
             headers: {
@@ -98,7 +99,7 @@ const proxy = async (streamInfo, res) => {
     }
 }
 
-const merge = (streamInfo, res) => {
+const merge = async (streamInfo, res) => {
     let process;
     const shutdown = () => (
         killProcess(process),
@@ -112,7 +113,7 @@ const merge = (streamInfo, res) => {
     try {
         if (streamInfo.urls.length !== 2) return shutdown();
 
-        const format = streamInfo.filename.split('.')[streamInfo.filename.split('.').length - 1];
+        const format = streamInfo.filename.split('.').pop();
 
         let args = [
             '-loglevel', '-8',
@@ -152,6 +153,7 @@ const merge = (streamInfo, res) => {
 
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('Content-Disposition', contentDisposition(streamInfo.filename));
+        res.setHeader('Estimated-Content-Length', await estimateTunnelLength(streamInfo));
 
         pipe(muxOutput, res, shutdown);
 
@@ -162,7 +164,7 @@ const merge = (streamInfo, res) => {
     }
 }
 
-const remux = (streamInfo, res) => {
+const remux = async (streamInfo, res) => {
     let process;
     const shutdown = () => (
         killProcess(process),
@@ -196,7 +198,7 @@ const remux = (streamInfo, res) => {
             args.push('-bsf:a', 'aac_adtstoasc');
         }
 
-        let format = streamInfo.filename.split('.')[streamInfo.filename.split('.').length - 1];
+        let format = streamInfo.filename.split('.').pop();
         if (format === "mp4") {
             args.push('-movflags', 'faststart+frag_keyframe+empty_moov')
         }
@@ -215,6 +217,7 @@ const remux = (streamInfo, res) => {
 
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('Content-Disposition', contentDisposition(streamInfo.filename));
+        res.setHeader('Estimated-Content-Length', await estimateTunnelLength(streamInfo));
 
         pipe(muxOutput, res, shutdown);
 
@@ -225,7 +228,7 @@ const remux = (streamInfo, res) => {
     }
 }
 
-const convertAudio = (streamInfo, res) => {
+const convertAudio = async (streamInfo, res) => {
     let process;
     const shutdown = () => (
         killProcess(process),
@@ -284,6 +287,13 @@ const convertAudio = (streamInfo, res) => {
 
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('Content-Disposition', contentDisposition(streamInfo.filename));
+        res.setHeader(
+            'Estimated-Content-Length',
+            await estimateTunnelLength(
+                streamInfo,
+                estimateAudioMultiplier(streamInfo) * 1.1
+            )
+        );
 
         pipe(muxOutput, res, shutdown);
         res.on('finish', shutdown);
@@ -292,7 +302,7 @@ const convertAudio = (streamInfo, res) => {
     }
 }
 
-const convertGif = (streamInfo, res) => {
+const convertGif = async (streamInfo, res) => {
     let process;
     const shutdown = () => (killProcess(process), closeResponse(res));
 
@@ -321,6 +331,7 @@ const convertGif = (streamInfo, res) => {
 
         res.setHeader('Connection', 'keep-alive');
         res.setHeader('Content-Disposition', contentDisposition(streamInfo.filename));
+        res.setHeader('Estimated-Content-Length', await estimateTunnelLength(streamInfo, 60));
 
         pipe(muxOutput, res, shutdown);
 

From 6e6a792984d2ca8124db84edba374787e7b7ce2d Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 17:41:38 +0000
Subject: [PATCH 24/33] api/bilibili: mark tunnel as isHLS where appropriate

---
 api/src/processing/services/bilibili.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/api/src/processing/services/bilibili.js b/api/src/processing/services/bilibili.js
index b47b0bc2..47932711 100644
--- a/api/src/processing/services/bilibili.js
+++ b/api/src/processing/services/bilibili.js
@@ -58,7 +58,8 @@ async function com_download(id) {
     return {
         urls: [video.baseUrl, audio.baseUrl],
         audioFilename: `bilibili_${id}_audio`,
-        filename: `bilibili_${id}_${video.width}x${video.height}.mp4`
+        filename: `bilibili_${id}_${video.width}x${video.height}.mp4`,
+        isHLS: true
     };
 }
 

From f5b47a2b7e2b998405c9ab8515b2a2dfd4c47aaf Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 17:42:39 +0000
Subject: [PATCH 25/33] api/tunnel: adjust estimate multiplier to 1.1

---
 api/src/stream/shared.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/stream/shared.js b/api/src/stream/shared.js
index 9a2b6779..ec06339d 100644
--- a/api/src/stream/shared.js
+++ b/api/src/stream/shared.js
@@ -50,7 +50,7 @@ export function pipe(from, to, done) {
     from.pipe(to);
 }
 
-export async function estimateTunnelLength(streamInfo, multiplier = 1) {
+export async function estimateTunnelLength(streamInfo, multiplier = 1.1) {
     let urls = streamInfo.urls;
     if (!Array.isArray(urls)) {
         urls = [ urls ];

From fec07d0e10693fb0fcf0bb9fafdb88a3726935cb Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Mon, 16 Dec 2024 17:45:02 +0000
Subject: [PATCH 26/33] api: add cors headers for tunnels

---
 api/src/core/api.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/api/src/core/api.js b/api/src/core/api.js
index b93ff2ca..fc890ad2 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -264,6 +264,14 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
         }
     })
 
+    app.use('/tunnel', cors({
+        methods: ['GET'],
+        exposedHeaders: [
+            'Estimated-Content-Length'
+        ],
+        ...corsConfig,
+    }));
+
     app.get('/tunnel', apiTunnelLimiter, async (req, res) => {
         const id = String(req.query.id);
         const exp = String(req.query.exp);

From 06c348126eaffd61b4070743e78cf582c56e124c Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Tue, 17 Dec 2024 12:16:04 +0000
Subject: [PATCH 27/33] api/stream: remove random undici import wtf

---
 api/src/stream/types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/stream/types.js b/api/src/stream/types.js
index 688e6eef..c55654c0 100644
--- a/api/src/stream/types.js
+++ b/api/src/stream/types.js
@@ -1,4 +1,4 @@
-import { Agent, request, stream } from "undici";
+import { Agent, request } from "undici";
 import ffmpeg from "ffmpeg-static";
 import { spawn } from "child_process";
 import { create as contentDisposition } from "content-disposition-header";

From 78d0670f501ed57923945f172d3e7b9ec52ecbac Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Tue, 17 Dec 2024 12:20:17 +0000
Subject: [PATCH 28/33] api/stream: stfu deepsource

---
 api/src/stream/types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/src/stream/types.js b/api/src/stream/types.js
index c55654c0..4f665c5a 100644
--- a/api/src/stream/types.js
+++ b/api/src/stream/types.js
@@ -29,7 +29,7 @@ const convertMetadataToFFmpeg = (metadata) => {
 
     for (const [ name, value ] of Object.entries(metadata)) {
         if (metadataTags.includes(name)) {
-            args.push('-metadata', `${name}=${value.replace(/[\u0000-\u0009]/g, "")}`);
+            args.push('-metadata', `${name}=${value.replace(/[\u0000-\u0009]/g, "")}`); // skipcq: JS-0004
         } else {
             throw `${name} metadata tag is not supported.`;
         }

From 52b7f9523f507613df09866bc62c6c30833d4cf9 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Fri, 20 Dec 2024 16:35:40 +0000
Subject: [PATCH 29/33] api/stream: remove content-length estimation from
 proxy()

---
 api/src/stream/types.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/api/src/stream/types.js b/api/src/stream/types.js
index 4f665c5a..1e270df8 100644
--- a/api/src/stream/types.js
+++ b/api/src/stream/types.js
@@ -73,7 +73,6 @@ const proxy = async (streamInfo, res) => {
     try {
         res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
         res.setHeader('Content-disposition', contentDisposition(streamInfo.filename));
-        res.setHeader('Estimated-Content-Length', await estimateTunnelLength(streamInfo));
 
         const { body: stream, headers, statusCode } = await request(streamInfo.urls, {
             headers: {

From a9515d376aa04eb9a33ef818810214ace7326c8e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Dec 2024 23:04:20 +0600
Subject: [PATCH 30/33] web/settings: add duck to settings types

---
 web/src/lib/settings/defaults.ts | 3 ++-
 web/src/lib/types/settings.ts    | 6 ++++--
 web/src/lib/types/settings/v5.ts | 8 ++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/types/settings/v5.ts

diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index a4448aaa..1f8ef01b 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -2,9 +2,10 @@ import { defaultLocale } from "$lib/i18n/translations";
 import type { CobaltSettings } from "$lib/types/settings";
 
 const defaultSettings: CobaltSettings = {
-    schemaVersion: 4,
+    schemaVersion: 5,
     advanced: {
         debug: false,
+        duck: false,
     },
     appearance: {
         theme: "auto",
diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts
index 93958e88..37454183 100644
--- a/web/src/lib/types/settings.ts
+++ b/web/src/lib/types/settings.ts
@@ -2,14 +2,16 @@ import type { RecursivePartial } from "$lib/types/generic";
 import type { CobaltSettingsV2 } from "$lib/types/settings/v2";
 import type { CobaltSettingsV3 } from "$lib/types/settings/v3";
 import type { CobaltSettingsV4 } from "$lib/types/settings/v4";
+import type { CobaltSettingsV5 } from "$lib/types/settings/v5";
 
 export * from "$lib/types/settings/v2";
 export * from "$lib/types/settings/v3";
 export * from "$lib/types/settings/v4";
+export * from "$lib/types/settings/v5";
 
-export type CobaltSettings = CobaltSettingsV4;
+export type CobaltSettings = CobaltSettingsV5;
 
-export type AnyCobaltSettings = CobaltSettingsV3 | CobaltSettingsV2 | CobaltSettings;
+export type AnyCobaltSettings = CobaltSettingsV4 | CobaltSettingsV3 | CobaltSettingsV2 | CobaltSettings;
 
 export type PartialSettings = RecursivePartial<CobaltSettings>;
 
diff --git a/web/src/lib/types/settings/v5.ts b/web/src/lib/types/settings/v5.ts
new file mode 100644
index 00000000..fa38b952
--- /dev/null
+++ b/web/src/lib/types/settings/v5.ts
@@ -0,0 +1,8 @@
+import { type CobaltSettingsV4 } from "$lib/types/settings/v4";
+
+export type CobaltSettingsV5 = Omit<CobaltSettingsV4, 'schemaVersion' | 'advanced'> & {
+    schemaVersion: 5,
+    advanced: CobaltSettingsV4['advanced'] & {
+        duck: boolean;
+    };
+};

From 41600dab4f8823d5df4f3aa6c032a8ea8539c5a7 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Dec 2024 23:04:37 +0600
Subject: [PATCH 31/33] web/settings/advanced: add a toggle for local
 processing

---
 web/i18n/en/settings.json                     | 4 ++++
 web/src/routes/+layout.svelte                 | 4 +++-
 web/src/routes/settings/advanced/+page.svelte | 9 +++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index c450b4b9..c0a4f1df 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -113,6 +113,10 @@
 
     "advanced.data": "data management",
 
+    "advanced.duck": "local processing",
+    "advanced.duck.title": "process everything on device",
+    "advanced.duck.description": "very wip, may cause critical issues or not work at all. this toggle will probably be gone by release.",
+
     "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.",
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index b7e7aade..93f45b17 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -91,7 +91,9 @@
             <UpdateNotification />
         {/if}
         <div id="content">
-            <ProcessingQueue />
+            {#if $settings.advanced.duck}
+                <ProcessingQueue />
+            {/if}
             {#if ($turnstileEnabled && $page.url.pathname === "/") || $turnstileCreated}
                 <Turnstile />
             {/if}
diff --git a/web/src/routes/settings/advanced/+page.svelte b/web/src/routes/settings/advanced/+page.svelte
index f66ada39..9a02203f 100644
--- a/web/src/routes/settings/advanced/+page.svelte
+++ b/web/src/routes/settings/advanced/+page.svelte
@@ -15,6 +15,15 @@
     />
 </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>

From 806a644a400235750713fdafa694997d23e60e10 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Dec 2024 23:10:33 +0600
Subject: [PATCH 32/33] web/ProcessingStatus: replace icon with a more fitting
 one

---
 web/src/components/queue/ProcessingStatus.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
index 2bc97276..7acd4a2b 100644
--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import IconBlender from "@tabler/icons-svelte/IconBlender.svelte";
+    import IconRun from "@tabler/icons-svelte/IconRun.svelte";
 
     export let indeterminate = false;
     export let progress: number = 0;
@@ -30,7 +30,7 @@
         />
     </svg>
     <div class="icon-holder">
-        <IconBlender />
+        <IconRun />
     </div>
 </button>
 

From 45e7b699370530e9deba696b6c742f14de22cf64 Mon Sep 17 00:00:00 2001
From: jj <log@riseup.net>
Date: Wed, 25 Dec 2024 20:05:18 +0000
Subject: [PATCH 33/33] api/tunnel: add `Content-Disposition` to exposed
 headers

---
 api/src/core/api.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/api/src/core/api.js b/api/src/core/api.js
index fc890ad2..364764c0 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -267,7 +267,8 @@ export const runAPI = async (express, app, __dirname, isPrimary = true) => {
     app.use('/tunnel', cors({
         methods: ['GET'],
         exposedHeaders: [
-            'Estimated-Content-Length'
+            'Estimated-Content-Length',
+            'Content-Disposition'
         ],
         ...corsConfig,
     }));