web/ProcessingQueueItem: state icons, localized strings, fix line break

web/i18n/en/queue.json

@@ -2,5 +2,9 @@
     "title": "processing queue",
     "stub": "nothing in the queue yet, only two of us.\ntry {{ value }} something!",
     "stub.download": "downloading",
-    "stub.remux": "remuxing"
+    "stub.remux": "remuxing",
+
+    "state.waiting": "queued",
+    "state.starting": "starting...",
+    "state.running.remux": "remuxing"
 }

web/src/components/queue/ProcessingQueue.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
     import { onNavigate } from "$app/navigation";
+    import type { SvelteComponent } from "svelte";
 
     import { clearQueue, queue } from "$lib/state/queen-bee/queue";
 
-    import type { SvelteComponent } from "svelte";
-    import type { CobaltQueueItem } 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";
@@ -19,15 +17,11 @@
     let popover: SvelteComponent;
     $: expanded = false;
 
-    $: queueItems = Object.entries($queue) as [
-        id: string,
-        item: CobaltQueueItem,
-    ][];
-
+    $: queueItems = Object.entries($queue);
     $: queueLength = Object.keys($queue).length;
-    $: completedQueueItems = queueItems.filter(([id, item]) => {
-        return item.state === "done";
-    }).length;
+
+    $: cleanQueueLength = queueItems.filter(([id, item]) => item.state !== "error").length;
+    $: completedQueueItems = queueItems.filter(([id, item]) => item.state === "done").length;
 
     // TODO: toggle this only when progress is unknown
     $: indeterminate = false;
@@ -43,7 +37,7 @@
 
 <div id="processing-queue" class:expanded>
     <ProcessingStatus
-        progress={(completedQueueItems / queueLength) * 100}
+        progress={(completedQueueItems / cleanQueueLength) * 100}
         {indeterminate}
         expandAction={popover?.showPopover}
     />
@@ -140,7 +134,7 @@
     }
 
     .clear-button {
-        color: var(--red);
+        color: var(--medium-red);
     }
 
     #processing-list {

web/src/components/queue/ProcessingQueueItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
     import { formatFileSize } from "$lib/util";
     import { downloadFile } from "$lib/download";
     import { removeItem } from "$lib/state/queen-bee/queue";
@@ -9,7 +10,9 @@
     import Skeleton from "$components/misc/Skeleton.svelte";
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
     import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import IconExclamationCircle from "@tabler/icons-svelte/IconExclamationCircle.svelte";
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
@@ -25,8 +28,6 @@
     export let info: CobaltQueueItem;
     export let runningWorker: CobaltCurrentTaskItem | undefined;
 
-    $: state = info.state;
-
     $: progress = runningWorker?.progress;
     $: size = formatFileSize(runningWorker?.progress?.size);
 
@@ -38,44 +39,63 @@
 
 <div class="processing-item">
     <div class="processing-info">
+
         <div class="file-title">
             <div class="processing-type">
                 <svelte:component this={itemIcons[info.mediaType]} />
             </div>
-            <span>
+            <span class="filename">
                 {info.filename}
             </span>
         </div>
-        {#if state === "running"}
+
+        {#if info.state === "running"}
             <div class="file-progress">
                 {#if progress?.percentage}
                     <div
                         class="progress"
-                        style="width: {Math.min(100, progress?.percentage || 0)}%"
+                        style="width: {Math.min(
+                            100,
+                            progress?.percentage || 0
+                        )}%"
                     ></div>
                 {:else}
-                    <Skeleton height="6px" width="100%" class="elevated indeterminate-progress" />
+                    <Skeleton
+                        height="6px"
+                        width="100%"
+                        class="elevated indeterminate-progress"
+                    />
                 {/if}
             </div>
         {/if}
-        <div class="file-status">
+
+        <div class="file-status {info.state}">
             {#if info.state === "done"}
-                done: {formatFileSize(info.resultFile?.size)}
-            {:else if info.state === "running"}
-                {#if progress && progress.percentage}
-                    processing: {Math.ceil(progress.percentage)}%, {size}
-                {:else if progress && size}
-                    processing: {size}
+                <IconCheck /> {formatFileSize(info.resultFile?.size)}
+            {/if}
+
+            {#if info.state === "running"}
+                {#if runningWorker && progress && progress.percentage}
+                    {$t(`queue.state.running.${runningWorker.type}`)}: {Math.ceil(
+                        progress.percentage
+                    )}%, {size}
+                {:else if runningWorker && progress && size}
+                    {$t(`queue.state.running.${runningWorker.type}`)}: {size}
                 {:else}
-                    processing...
+                    {$t("queue.state.starting")}
                 {/if}
-            {:else if info.state === "error"}
-                error: {info.errorCode}
-            {:else}
-                queued
+            {/if}
+
+            {#if info.state === "error"}
+                <IconExclamationCircle /> {info.errorCode}
+            {/if}
+
+            {#if info.state === "waiting"}
+                {$t("queue.state.waiting")}
             {/if}
         </div>
     </div>
+
     <div class="file-actions">
         {#if info.state === "done" && info.resultFile}
             <button
@@ -154,10 +174,29 @@
         line-break: anywhere;
     }
 
+    .filename {
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+
     .file-status {
         font-size: 12px;
         color: var(--gray);
         line-break: anywhere;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .file-status.error {
+        color: var(--medium-red);
+    }
+
+    .file-status :global(svg) {
+        width: 16px;
+        height: 16px;
+        stroke-width: 2px;
     }
 
     .file-actions {

web/src/lib/queen-bee/scheduler.ts

@@ -24,6 +24,7 @@ export const checkTasks = () => {
                 const pipelineItem = task.pipeline[i];
 
                 addWorkerToQueue(pipelineItem.workerId, {
+                    type: pipelineItem.worker,
                     parentId: task.id,
                 });
 

web/src/lib/types/queen-bee.ts

@@ -1,6 +1,7 @@
-import type { CobaltWorkerProgress } from "$lib/types/workers";
+import type { CobaltWorkerProgress, CobaltWorkerType } from "$lib/types/workers";
 
 export type CobaltCurrentTaskItem = {
+    type: CobaltWorkerType,
     parentId: string,
     progress?: CobaltWorkerProgress,
 }

web/src/routes/+layout.svelte

@@ -111,6 +111,7 @@
         --gray: #75757e;
 
         --red: #ed2236;
+        --medium-red: #ce3030;
         --dark-red: #d61c2e;
         --green: #51cf5e;
         --blue: #2f8af9;