web/remux: remove fossil code & clean files after queue push

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { createRemuxPipeline } from "$lib/queen-bee/queue";
 
-    import Skeleton from "$components/misc/Skeleton.svelte";
     import DropReceiver from "$components/misc/DropReceiver.svelte";
     import FileReceiver from "$components/misc/FileReceiver.svelte";
     import BulletExplain from "$components/misc/BulletExplain.svelte";
@@ -9,23 +9,18 @@
     import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte";
     import IconDevices from "@tabler/icons-svelte/IconDevices.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
-    import { createRemuxPipeline } from "$lib/queen-bee/queue";
 
     let draggedOver = false;
     let files: FileList | undefined;
 
-    let speed: number | undefined;
-    let progress: string | undefined;
-    let currentProgress: string | undefined;
-
-    let processing = false;
-
     const remux = async () => {
         if (!files) return;
 
         for (let i = 0; i < files?.length; i++) {
             createRemuxPipeline(files[i]);
         }
+
+        files = undefined;
     };
 </script>
 
@@ -41,11 +36,9 @@
     bind:files
     bind:draggedOver
     id="remux-container"
-    classes={processing ? "processing" : ""}
 >
     <div
         id="remux-open"
-        class:processing
         tabindex="-1"
         data-first-focus
         data-focus-ring-hidden
@@ -100,39 +93,6 @@
             />
         </div>
     </div>
-
-    <div id="remux-processing" class:processing aria-hidden={!processing}>
-        <div id="processing-status">
-            {#if processing}
-                {#if progress && speed}
-                    <div class="progress-bar">
-                        <Skeleton
-                            width="{progress}%"
-                            height="20px"
-                            class="elevated"
-                        />
-                    </div>
-                    <div class="progress-text">
-                        processing ({progress}%, {speed}x)...
-                    </div>
-                {:else if currentProgress && speed}
-                    <div class="progress-text">
-                        processing ({currentProgress}s, {speed}x)...
-                    </div>
-                {:else}
-                    <div class="progress-text">processing...</div>
-                {/if}
-                <button
-                    on:click={() => {
-                        files = undefined;
-                        processing = false;
-                    }}
-                >
-                    cancel
-                </button>
-            {/if}
-        </div>
-    </div>
 </DropReceiver>
 
 <style>
@@ -150,53 +110,6 @@
         align-items: center;
         text-align: center;
         gap: 48px;
-        transition:
-            transform 0.2s,
-            opacity 0.2s;
-    }
-
-    #remux-processing {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        opacity: 0;
-        transform: scale(0.9);
-        transition:
-            transform 0.2s,
-            opacity 0.2s;
-    }
-
-    #remux-processing.processing {
-        opacity: 1;
-        transform: none;
-    }
-
-    #remux-open.processing {
-        transform: scale(0.9);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    #processing-status {
-        display: flex;
-        flex-direction: column;
-        padding: var(--padding);
-        gap: var(--padding);
-        justify-content: center;
-        align-items: center;
-    }
-
-    .progress-bar {
-        height: 20px;
-        width: 400px;
-        max-width: 400px;
-        border-radius: 6px;
-        background: var(--button);
-    }
-
-    .progress-text {
-        font-size: 14px;
-        text-align: center;
     }
 
     #remux-receiver {
@@ -237,10 +150,6 @@
     }
 
     @media screen and (max-width: 535px) {
-        .progress-bar {
-            width: 350px;
-        }
-
         #remux-bullets {
             gap: var(--padding);
         }