web/remux: accept files on drag, update ffmpeg function call

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

@@ -3,45 +3,89 @@
 
     import { openURL } from "$lib/download";
 
-    const loadFile = async() => {
+    $: draggedOver = false;
+
+    const dropHandler = async (ev: DragEvent) => {
+        draggedOver = false;
+        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 ff = new FFmpegWrapper();
+        await ff.init();
+
+        const render = await ff.renderFile({
+            url: fileBlob,
+            input: {
+                type,
+                format,
+            },
+            output: {
+                type,
+                format,
+            },
+            args: ["-c", "copy"],
+        });
+
+        openURL(render);
+    };
+
+    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;
-            const reader = new FileReader();
 
             if (target.files?.length === 1) {
                 const file = target.files[0];
-                const type = file.type.split("/")[0];
-                const format = file.type.split("/")[1];
-
-                if (!["video", "audio"].includes(type))
-                    return;
-
-                reader.readAsArrayBuffer(file);
-
-                const fileBlob = URL.createObjectURL(
-                    new Blob([file], { type: "video/mp4" })
-                );
-
-                const ff = new FFmpegWrapper();
-
-                await ff.init();
-                const render = await ff.renderFile(fileBlob, type, format);
-
-                openURL(render);
+                await render(file);
             }
         };
-
-        fileInput.click();
     };
 </script>
 
-<div id="remux-container">
-    <button on:click={() => loadFile()}>
-        load file
+<div
+    id="remux-container"
+    role="region"
+    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>