web: core system for queue & queen bee, move remux to new system

it's 3 am and i think i had a divine intervention

web/src/components/misc/DropReceiver.svelte

@@ -3,19 +3,20 @@
     export let classes = "";
 
     export let draggedOver = false;
-    export let file: File | undefined;
+    export let files: FileList | undefined;
 
     const dropHandler = async (ev: DragEvent) => {
         draggedOver = false;
         ev.preventDefault();
 
-        if (ev?.dataTransfer?.files.length === 1) {
-            file = ev.dataTransfer.files[0];
-            return file;
+        if (ev?.dataTransfer?.files && ev?.dataTransfer?.files.length > 0) {
+            files = ev.dataTransfer.files;
+            return files;
         }
     };
 
     const dragOverHandler = (ev: DragEvent) => {
+        console.log("dragged over omg")
         draggedOver = true;
         ev.preventDefault();
     };
@@ -25,6 +26,7 @@
     {id}
     class={classes}
     role="region"
+    aria-hidden="true"
     on:drop={(ev) => dropHandler(ev)}
     on:dragover={(ev) => dragOverHandler(ev)}
     on:dragend={() => {

web/src/components/misc/FileReceiver.svelte

@@ -5,22 +5,33 @@
     import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
     import IconUpload from "@tabler/icons-svelte/IconUpload.svelte";
 
-    export let file: File | undefined;
+    export let files: FileList | undefined;
     export let draggedOver = false;
     export let acceptTypes: string[];
     export let acceptExtensions: string[];
+    export let maxFileNumber: number = 100;
+
+    let selectorStringMultiple = maxFileNumber > 1 ? ".multiple" : "";
 
     let fileInput: HTMLInputElement;
+
     const openFile = async () => {
         fileInput = document.createElement("input");
         fileInput.type = "file";
         fileInput.accept = acceptTypes.join(",");
 
+        if (maxFileNumber > 1) {
+            fileInput.multiple = true;
+        }
+
         fileInput.click();
         fileInput.onchange = async () => {
-            if (fileInput.files?.length === 1) {
-                file = fileInput.files[0];
-                return file;
+            let userFiles = fileInput?.files;
+            if (userFiles && userFiles.length >= 1) {
+                if (userFiles.length > maxFileNumber) {
+                    return alert("too many files, limit is " + maxFileNumber);
+                }
+                return files = userFiles;
             }
         };
     };
@@ -47,9 +58,9 @@
         <div class="open-file-text">
             <div class="open-title">
                 {#if draggedOver}
-                    {$t("receiver.title.drop")}
+                    {$t("receiver.title.drop" + selectorStringMultiple)}
                 {:else}
-                    {$t("receiver.title")}
+                    {$t("receiver.title" + selectorStringMultiple)}
                 {/if}
             </div>
             <div class="subtext accept-list">

web/src/components/queue/ProcessingQueue.svelte

@@ -2,11 +2,10 @@
     import { t } from "$lib/i18n/translations";
     import { onNavigate } from "$app/navigation";
 
-    import settings from "$lib/state/settings";
-    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
+    import { clearQueue, queue } from "$lib/state/queen-bee/queue";
 
     import type { SvelteComponent } from "svelte";
-    import type { QueueItem } from "$lib/types/queue";
+    import type { CobaltQueueItem } from "$lib/types/queue";
 
     import SectionHeading from "$components/misc/SectionHeading.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
@@ -15,47 +14,24 @@
     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";
-    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
-    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
-    import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
+    import { currentTasks } from "$lib/state/queen-bee/current-tasks";
 
     let popover: SvelteComponent;
     $: expanded = false;
 
-    $: queueItems = Object.entries($queue) as [id: string, item: QueueItem][];
+    $: queueItems = Object.entries($queue) as [
+        id: string,
+        item: CobaltQueueItem,
+    ][];
 
     $: queueLength = Object.keys($queue).length;
+    $: completedQueueItems = queueItems.filter(([id, item]) => {
+        return item.state === "done"
+    }).length;
+
+    // TODO: toggle this only when progress is unknown
     $: indeterminate = false;
 
-    const itemIcons = {
-        video: IconMovie,
-        video_mute: IconVolume3,
-        audio: IconMusic,
-        audio_convert: IconMusic,
-        image: IconPhoto,
-        gif: IconGif,
-    };
-
-    const addFakeQueueItem = () => {
-        return addToQueue({
-            id: crypto.randomUUID(),
-            status: "waiting",
-            type: "video",
-            filename: "test.mp4",
-            files: [
-                {
-                    type: "video",
-                    url: "https://",
-                },
-            ],
-            processingSteps: [],
-        });
-    };
-
     const popoverAction = async () => {
         expanded = !expanded;
     };
@@ -66,7 +42,7 @@
 </script>
 
 <div id="processing-queue" class:expanded>
-    <ProcessingStatus {indeterminate} expandAction={popover?.showPopover} />
+    <ProcessingStatus progress={(completedQueueItems / queueLength) * 100} {indeterminate} expandAction={popover?.showPopover} />
 
     <PopoverContainer
         bind:this={popover}
@@ -84,27 +60,21 @@
             />
             <div class="header-buttons">
                 {#if queueLength > 0}
-                    <button class="clear-button" on:click={nukeEntireQueue}>
+                    <button class="clear-button" on:click={clearQueue}>
                         <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 queueItems as [id, item]}
                 <ProcessingQueueItem
                     {id}
+                    mediaType={item.mediaType}
                     filename={item.filename}
-                    status={item.status}
-                    icon={itemIcons[item.type]}
+                    state={item.state}
+                    resultFile={item.state === "done" ? item.resultFile : undefined}
                 />
             {/each}
             {#if queueLength === 0}

web/src/components/queue/ProcessingQueueItem.svelte

@@ -1,41 +1,67 @@
 <script lang="ts">
+    import { queue, removeItem } from "$lib/state/queen-bee/queue";
+
     import IconX from "@tabler/icons-svelte/IconX.svelte";
     import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
-    import { removeFromQueue } from "$lib/state/queue";
+
+    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 { downloadFile } from "$lib/download";
+    import type { CobaltQueueItemState } from "$lib/types/queue";
+    import type { CobaltPipelineResultFileType } from "$lib/types/workers";
+
+    const itemIcons = {
+        video: IconMovie,
+        audio: IconMusic,
+        image: IconPhoto,
+    };
 
     export let id: string;
+    export let mediaType: CobaltPipelineResultFileType;
     export let filename: string;
-    export let status: string;
-    export let progress: number = 0;
-    export let icon: ConstructorOfATypedSvelteComponent;
+    export let state: CobaltQueueItemState;
+    export let resultFile: File | undefined;
+
+    // TODO: use a real value
+    const progress = 0;
+
+    const download = (file: File) =>
+        downloadFile({
+            file,
+        });
 </script>
 
 <div class="processing-item">
     <div class="processing-info">
         <div class="file-title">
             <div class="processing-type">
-                <svelte:component this={icon} />
+                <svelte:component this={itemIcons[mediaType]} />
             </div>
             <span>
                 {filename}
             </span>
         </div>
-        <div class="file-progress">
-            <div
-                class="progress"
-                style="width: {Math.min(100, progress)}%"
-            ></div>
-        </div>
-        <div class="file-status">{id}: {status}</div>
+        {#if state === "running"}
+            <div class="file-progress">
+                <div
+                    class="progress"
+                    style="width: {Math.min(100, progress)}%"
+                ></div>
+            </div>
+        {/if}
+        <div class="file-status">{id}: {state}</div>
     </div>
     <div class="file-actions">
-        <button class="action-button">
-            <IconDownload />
-        </button>
-        <button
-            class="action-button"
-            on:click={() => removeFromQueue(id)}
-        >
+        {#if state === "done" && resultFile}
+            <button
+                class="action-button"
+                on:click={() => download(resultFile)}
+            >
+                <IconDownload />
+            </button>
+        {/if}
+        <button class="action-button" on:click={() => removeItem(id)}>
             <IconX />
         </button>
     </div>