web/remux: add imported files to queue automatically & filter by type

web/src/components/misc/DropReceiver.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
-    export let id: string;
-    export let classes = "";
+    import type { Snippet } from "svelte";
 
-    export let draggedOver = false;
-    export let files: FileList | undefined;
+    type Props = {
+        id: string;
+        draggedOver?: boolean;
+        files: FileList | undefined;
+        onDrop: () => {};
+        children?: Snippet;
+    };
+
+    let {
+        id,
+        draggedOver = $bindable(false),
+        files = $bindable(),
+        onDrop,
+        children,
+    }: Props = $props();
 
     const dropHandler = async (ev: DragEvent) => {
         draggedOver = false;
@@ -11,7 +23,7 @@
 
         if (ev?.dataTransfer?.files && ev?.dataTransfer?.files.length > 0) {
             files = ev.dataTransfer.files;
-            return files;
+            onDrop();
         }
     };
 
@@ -23,17 +35,16 @@
 
 <div
     {id}
-    class={classes}
     role="region"
     aria-hidden="true"
-    on:drop={(ev) => dropHandler(ev)}
-    on:dragover={(ev) => dragOverHandler(ev)}
-    on:dragend={() => {
+    ondrop={(ev) => dropHandler(ev)}
+    ondragover={(ev) => dragOverHandler(ev)}
+    ondragend={() => {
         draggedOver = false;
     }}
-    on:dragleave={() => {
+    ondragleave={() => {
         draggedOver = false;
     }}
 >
-    <slot></slot>
+    {@render children?.()}
 </div>

web/src/lib/libav.ts

@@ -49,8 +49,6 @@ export default class LibAVWrapper {
         if (!this.libav) throw new Error("LibAV wasn't initialized");
         const libav = await this.libav;
 
-        console.log('yay loaded libav :3');
-
         await libav.mkreadaheadfile('input', blob);
 
         try {

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

@@ -17,8 +17,12 @@
         if (!files) return;
 
         for (let i = 0; i < files?.length; i++) {
+            const type = files[i].type;
+            // TODO: stricter type limits?
+            if (type.startsWith("video/") || type.startsWith("audio/")) {
                 createRemuxPipeline(files[i]);
             }
+        }
 
         files = undefined;
     };
@@ -32,16 +36,8 @@
     />
 </svelte:head>
 
-<DropReceiver
-    bind:files
-    bind:draggedOver
-    id="remux-container"
->
-    <div
-        id="remux-open"
-        tabindex="-1"
-        data-first-focus
-    >
+<DropReceiver bind:files bind:draggedOver onDrop={remux} id="remux-container">
+    <div id="remux-open" tabindex="-1" data-first-focus>
         <div id="remux-receiver">
             <FileReceiver
                 bind:draggedOver
@@ -57,19 +53,6 @@
                     "m4a",
                 ]}
             />
-
-            {#if files}
-                <div class="button-row">
-                    <button on:click={remux}>remux</button>
-                    <button
-                        on:click={() => {
-                            files = undefined;
-                        }}
-                    >
-                        clear imported files
-                    </button>
-                </div>
-            {/if}
         </div>
 
         <div id="remux-bullets">
@@ -125,18 +108,6 @@
         max-width: 450px;
     }
 
-    .button-row {
-        display: flex;
-        flex-direction: row;
-        gap: 6px;
-    }
-
-    button {
-        padding: 12px 24px;
-        border-radius: 200px;
-        width: fit-content;
-    }
-
     @media screen and (max-width: 920px) {
         #remux-open {
             flex-direction: column;