Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-09 20:26:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/remux: remove fossil code & clean files after queue push

Browse source
This commit is contained in:
wukko 2025-01-26 01:40:18 +06:00
parent c3cc6c09f4
commit 7c3e1e6779
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 3 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import { createRemuxPipeline } from "$lib/queen-bee/queue";
import Skeleton from "$components/misc/Skeleton.svelte";
import DropReceiver from "$components/misc/DropReceiver.svelte"; import DropReceiver from "$components/misc/DropReceiver.svelte";
import FileReceiver from "$components/misc/FileReceiver.svelte"; import FileReceiver from "$components/misc/FileReceiver.svelte";
import BulletExplain from "$components/misc/BulletExplain.svelte"; import BulletExplain from "$components/misc/BulletExplain.svelte";
@ -9,23 +9,18 @@
import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte"; import IconRepeat from "@tabler/icons-svelte/IconRepeat.svelte";
import IconDevices from "@tabler/icons-svelte/IconDevices.svelte"; import IconDevices from "@tabler/icons-svelte/IconDevices.svelte";
import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte"; import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
import { createRemuxPipeline } from "$lib/queen-bee/queue";
let draggedOver = false; let draggedOver = false;
let files: FileList | undefined; let files: FileList | undefined;
let speed: number | undefined;
let progress: string | undefined;
let currentProgress: string | undefined;
let processing = false;
const remux = async () => { const remux = async () => {
if (!files) return; if (!files) return;
for (let i = 0; i < files?.length; i++) { for (let i = 0; i < files?.length; i++) {
createRemuxPipeline(files[i]); createRemuxPipeline(files[i]);
} }
files = undefined;
}; };
</script> </script>
@ -41,11 +36,9 @@
bind:files bind:files
bind:draggedOver bind:draggedOver
id="remux-container" id="remux-container"
classes={processing ? "processing" : ""}
> >
<div <div
id="remux-open" id="remux-open"
class:processing
tabindex="-1" tabindex="-1"
data-first-focus data-first-focus
data-focus-ring-hidden data-focus-ring-hidden
@ -100,39 +93,6 @@
/> />
</div> </div>
</div> </div>
<div id="remux-processing" class:processing aria-hidden={!processing}>
<div id="processing-status">
{#if processing}
{#if progress && speed}
<div class="progress-bar">
<Skeleton
width="{progress}%"
height="20px"
class="elevated"
/>
</div>
<div class="progress-text">
processing ({progress}%, {speed}x)...
</div>
{:else if currentProgress && speed}
<div class="progress-text">
processing ({currentProgress}s, {speed}x)...
</div>
{:else}
<div class="progress-text">processing...</div>
{/if}
<button
on:click={() => {
files = undefined;
processing = false;
}}
>
cancel
</button>
{/if}
</div>
</div>
</DropReceiver> </DropReceiver>
<style> <style>
@ -150,53 +110,6 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 48px; gap: 48px;
transition:
transform 0.2s,
opacity 0.2s;
}
#remux-processing {
position: absolute;
display: flex;
flex-direction: column;
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;
pointer-events: none;
}
#processing-status {
display: flex;
flex-direction: column;
padding: var(--padding);
gap: var(--padding);
justify-content: center;
align-items: center;
}
.progress-bar {
height: 20px;
width: 400px;
max-width: 400px;
border-radius: 6px;
background: var(--button);
}
.progress-text {
font-size: 14px;
text-align: center;
} }
#remux-receiver { #remux-receiver {
@ -237,10 +150,6 @@
} }
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
.progress-bar {
width: 350px;
}
#remux-bullets { #remux-bullets {
gap: var(--padding); gap: var(--padding);
} }