From 3fd05891e6a411224754bf068f6411ada87416ed Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Sun, 11 Aug 2024 18:30:42 +0600 Subject: [PATCH] web/remux: move drop area and open file button into own components --- web/src/components/misc/DragDropArea.svelte | 35 +++++++ web/src/components/misc/OpenFileButton.svelte | 29 ++++++ web/src/routes/remux/+page.svelte | 92 ++++--------------- 3 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 web/src/components/misc/DragDropArea.svelte create mode 100644 web/src/components/misc/OpenFileButton.svelte diff --git a/web/src/components/misc/DragDropArea.svelte b/web/src/components/misc/DragDropArea.svelte new file mode 100644 index 00000000..61c11f8b --- /dev/null +++ b/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> diff --git a/web/src/components/misc/OpenFileButton.svelte b/web/src/components/misc/OpenFileButton.svelte new file mode 100644 index 00000000..f7421876 --- /dev/null +++ b/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> diff --git a/web/src/routes/remux/+page.svelte b/web/src/routes/remux/+page.svelte index 45dc735d..36666d58 100644 --- a/web/src/routes/remux/+page.svelte +++ b/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) => { - 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}` }) - ); + let draggedOver = false; + let file: File; + const render = async () => { const ff = new FFmpegWrapper(); await ff.init(); const render = await ff.renderFile({ - url: fileBlob, - input: { - type, - format, - }, - output: { - type, - format, - }, + file, args: ["-c", "copy"], }); - openURL(render); + if (render) { + openURL(URL.createObjectURL(render)); + } else { + console.log("not a valid file") + } }; - 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) { - const file = target.files[0]; - await render(file); - } - }; - }; + $: if (file) { + render(); + } </script> -<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> +<DragDropArea id="remux-container" bind:draggedOver bind:file> + <OpenFileButton bind:draggedOver bind:file /> +</DragDropArea> <style> - #remux-container { + :global(#remux-container) { display: flex; justify-content: center; align-items: center;