web/remux: move drop area and open file button into own components

web/src/components/misc/DragDropArea.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    export let id: string;
+    export let classes = "";
+
+    export let draggedOver = false;
+    export let file: File;
+
+    const dropHandler = async (ev: DragEvent) => {
+        draggedOver = false;
+        ev.preventDefault();
+
+        if (ev?.dataTransfer?.files.length === 1) {
+            file = ev.dataTransfer.files[0];
+            return file;
+        }
+    };
+
+    const dragOverHandler = (ev: DragEvent) => {
+        draggedOver = true;
+        ev.preventDefault();
+    };
+</script>
+
+<div
+    {id}
+    class={classes}
+    role="region"
+    on:drop={(ev) => dropHandler(ev)}
+    on:dragover={(ev) => dragOverHandler(ev)}
+    on:dragend={() => {
+        draggedOver = false;
+    }}
+>
+    <slot></slot>
+</div>

web/src/components/misc/OpenFileButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let file: File;
+    export let draggedOver = false;
+
+    const openFile = async () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = "video/*,audio/*";
+
+        fileInput.click();
+
+        fileInput.onchange = async (e: Event) => {
+            const target = e.target as HTMLInputElement;
+
+            if (target.files?.length === 1) {
+                file = target.files[0];
+                return file;
+            }
+        };
+    };
+</script>
+
+<button on:click={() => openFile()}>
+    {#if draggedOver}
+        drop the file!
+    {:else}
+        open the file
+    {/if}
+</button>

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

@@ -1,96 +1,40 @@
 <script lang="ts">
     import FFmpegWrapper from "$lib/ffmpeg";
-
     import { openURL } from "$lib/download";
 
-    $: draggedOver = false;
+    import DragDropArea from "$components/misc/DragDropArea.svelte";
+    import OpenFileButton from "$components/misc/OpenFileButton.svelte";
 
-    const dropHandler = async (ev: DragEvent) => {
+    let draggedOver = false;
-        draggedOver = false;
+    let file: File;
-        ev.preventDefault();
-
-        if (ev?.dataTransfer?.files.length === 1) {
-            const file = ev.dataTransfer.files[0];
-
-            await render(file);
-        }
-    };
-
-    const dragOverHandler = (ev: DragEvent) => {
-        draggedOver = true;
-        ev.preventDefault();
-    };
-
-    const render = async (file: File) => {
-        const type = file.type.split("/")[0];
-        const format = file.type.split("/")[1];
-
-        if (!["video", "audio"].includes(type)) return;
-
-        const reader = new FileReader();
-        reader.readAsArrayBuffer(file);
-
-        const fileBlob = URL.createObjectURL(
-            new Blob([file], { type: `${type}/${format}` })
-        );
 
+    const render = async () => {
         const ff = new FFmpegWrapper();
         await ff.init();
 
         const render = await ff.renderFile({
-            url: fileBlob,
+            file,
-            input: {
-                type,
-                format,
-            },
-            output: {
-                type,
-                format,
-            },
             args: ["-c", "copy"],
         });
 
-        openURL(render);
+        if (render) {
+            openURL(URL.createObjectURL(render));
+        } else {
+            console.log("not a valid file")
+        }
     };
 
-    const openFile = async () => {
+    $: if (file) {
-        const fileInput = document.createElement("input");
+        render();
-        fileInput.type = "file";
+    }
-        fileInput.accept = "video/*,audio/*";
-
-        fileInput.click();
-
-        fileInput.onchange = async (e: Event) => {
-            const target = e.target as HTMLInputElement;
-
-            if (target.files?.length === 1) {
-                const file = target.files[0];
-                await render(file);
-            }
-        };
-    };
 </script>
 
-<div
+<DragDropArea id="remux-container" bind:draggedOver bind:file>
-    id="remux-container"
+    <OpenFileButton bind:draggedOver bind:file />
-    role="region"
+</DragDropArea>
-    on:drop={(ev) => dropHandler(ev)}
-    on:dragover={(ev) => dragOverHandler(ev)}
-    on:dragend={() => {
-        draggedOver = false;
-    }}
->
-    <button on:click={() => openFile()}>
-        {#if draggedOver}
-            drop the file!
-        {:else}
-            open the file
-        {/if}
-    </button>
-</div>
 
 <style>
-    #remux-container {
+    :global(#remux-container) {
         display: flex;
         justify-content: center;
         align-items: center;