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

@@ -16,5 +16,6 @@
     "save": "save",
     "export": "export",
     "yes": "yes",
-    "no": "no"
+    "no": "no",
+    "clear": "clear"
 }

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"
+}

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 addFakeQueueItem = () => {
-    const processingQueue: QueueItem[] = [
+        return addToQueue({
-        {
+            id: crypto.randomUUID(),
-            id: "fake id",
+            status: "waiting",
             type: "video",
-            filename: "placeholder.mp4",
+            filename: "test.mp4",
-            status: "processing: 69%",
+            files: [
-            progress: 69,
+                {
-        },
+                    type: "video",
-        {
+                    url: "https://",
-            id: "fake id",
+                },
-            type: "audio",
+            ],
-            filename: "placeholder.mp3",
+            processingSteps: [],
-            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) {
-            popover.focus();
-        }
     };
 
     onNavigate(() => {
@@ -82,11 +64,7 @@
 </script>
 
 <div id="processing-manager">
-    <ProcessingStatus
+    <ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
-        {indeterminate}
-        {progress}
-        expandAction={popover?.showPopover}
-    />
 
     <PopoverContainer
         bind:this={popover}
@@ -96,28 +74,34 @@
         expandStart="right"
     >
         <div id="processing-header">
-            <div class="header-title">processing queue</div>
+            <div class="header-title">{$t("queue.title")}</div>
-            {#if processingQueue.length > 0}
+            <div class="header-buttons">
-                <button class="clear-button">
+                {#if queueLength > 0}
-                    <IconX />
+                    <button class="clear-button">
-                    clear
+                        <IconX />
-                </button>
+                        {$t("button.clear")}
-            {/if}
+                    </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}
+            {#if queueLength === 0}
-                <div class="list-stub">
+                <ProcessingQueueStub />
-                    <Meowbalt emotion="think" />
-                    <span>downloads will appear here!</span>
-                </div>
             {/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);

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>

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>