mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-01-01 12:46:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

web/remux: add processing state, clean file, prevent render loop

Browse source
This commit is contained in:
wukko 2024-08-13 15:22:24 +06:00
parent 1fd2b72075
commit 70b300bd71
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 44 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/misc/DropReceiver.svelte
View file

@ -3,7 +3,7 @@
export let classes = ""; export let classes = "";
export let draggedOver = false; export let draggedOver = false;
export let file: File; export let file: File | undefined;
const dropHandler = async (ev: DragEvent) => { const dropHandler = async (ev: DragEvent) => {
draggedOver = false; draggedOver = false;

2
web/src/components/misc/FileReceiver.svelte
View file

@ -4,7 +4,7 @@
import Meowbalt from "$components/misc/Meowbalt.svelte"; import Meowbalt from "$components/misc/Meowbalt.svelte";
import IconFileUpload from "@tabler/icons-svelte/IconFileUpload.svelte"; import IconFileUpload from "@tabler/icons-svelte/IconFileUpload.svelte";
export let file: File; export let file: File | undefined;
export let draggedOver = false; export let draggedOver = false;
export let acceptTypes: string[]; export let acceptTypes: string[];
export let acceptExtensions: string[]; export let acceptExtensions: string[];

47
web/src/routes/remux/+page.svelte
View file

@ -4,25 +4,35 @@
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import DropReceiver from "$components/misc/DropReceiver.svelte"; import DropReceiver from "$components/misc/DropReceiver.svelte";
import OpenFileButton from "$components/misc/FileReceiver.svelte"; import FileReceiver from "$components/misc/FileReceiver.svelte";
let draggedOver = false; let draggedOver = false;
let file: File; let file: File | undefined;
let processing = false;
const render = async () => { const render = async () => {
if (!file || processing) return;
const ff = new LibAVWrapper(); const ff = new LibAVWrapper();
await ff.init(); await ff.init();
processing = true;
const render = await ff.render({ const render = await ff.render({
blob: file, blob: file,
args: ["-c", "copy"], args: ["-c", "copy"],
}); });
processing = false;
if (render) { if (render) {
openURL(URL.createObjectURL(render)); openURL(URL.createObjectURL(render));
} else { } else {
console.log("not a valid file"); console.log("not a valid file");
} }
file = undefined;
}; };
$: if (file) { $: if (file) {
@ -31,8 +41,8 @@
</script> </script>
<DropReceiver id="remux-container" bind:draggedOver bind:file> <DropReceiver id="remux-container" bind:draggedOver bind:file>
<div id="remux-inner"> <div id="remux-open" class:processing>
<OpenFileButton <FileReceiver
bind:draggedOver bind:draggedOver
bind:file bind:file
acceptTypes={["video/*", "audio/*"]} acceptTypes={["video/*", "audio/*"]}
@ -50,6 +60,14 @@
{$t("remux.description")} {$t("remux.description")}
</div> </div>
</div> </div>
<div id="remux-processing" class:processing>
{#if processing}
processing...
{:else}
done!
{/if}
</div>
</DropReceiver> </DropReceiver>
<style> <style>
@ -60,7 +78,7 @@
width: 100%; width: 100%;
} }
#remux-inner { #remux-open {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -68,6 +86,25 @@
max-width: 450px; max-width: 450px;
text-align: center; text-align: center;
gap: 32px; gap: 32px;
transition: transform 0.2s, opacity 0.2s;
}
#remux-processing {
position: absolute;
display: flex;
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;
} }
.remux-description { .remux-description {