Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/remux: improve accessibility

Browse source
This commit is contained in:
wukko 2024-09-07 18:21:40 +06:00
parent 3232c4a51b
commit 7cd572954f
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 42 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
import mime from "mime"; import mime from "mime";
import LibAVWrapper from "$lib/libav"; import LibAVWrapper from "$lib/libav";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import { beforeNavigate } from '$app/navigation'; import { beforeNavigate } from "$app/navigation";
import { openURL } from "$lib/download"; import { openURL } from "$lib/download";
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
@ -23,7 +23,10 @@
$: { $: {
if (totalDuration && processedDuration) { if (totalDuration && processedDuration) {
const percentage = Math.max(0, Math.min(100, (processedDuration / totalDuration) * 100)).toFixed(2); const percentage = Math.max(
0,
Math.min(100, (processedDuration / totalDuration) * 100)
).toFixed(2);
progress = percentage; progress = percentage;
} else if (processing) { } else if (processing) {
progress = undefined; progress = undefined;
@ -101,38 +104,39 @@
totalDuration = Number(file_info.format.duration); totalDuration = Number(file_info.format.duration);
if (file instanceof File && !file.type) { if (file instanceof File && !file.type) {
file = new Blob([ file ], { file = new Blob([file], {
type: mime.getType(file.name) ?? undefined type: mime.getType(file.name) ?? undefined,
}); });
} }
const render = await ff.render({ const render = await ff
blob: file, .render({
args: ['-c', 'copy', '-map', '0'] blob: file,
}).catch(e => { args: ["-c", "copy", "-map", "0"],
console.error("uh-oh! render error") })
console.error(e) .catch((e) => {
return createDialog({ console.error("uh-oh! render error");
id: "remux-error", console.error(e);
type: "small", return createDialog({
meowbalt: "error", id: "remux-error",
bodyText: $t("error.remux.out_of_resources"), type: "small",
buttons: [ meowbalt: "error",
{ bodyText: $t("error.remux.out_of_resources"),
text: $t("button.gotit"), buttons: [
main: true, {
action: () => {}, text: $t("button.gotit"),
}, main: true,
], action: () => {},
},
],
});
}); });
});
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");
} }
} finally { } finally {
processing = false; processing = false;
file = undefined; file = undefined;
@ -150,7 +154,7 @@
event.cancel(); event.cancel();
//TODO: show a popup with an option to kill ongoing processing //TODO: show a popup with an option to kill ongoing processing
} }
}) });
$: if (browser && processing) { $: if (browser && processing) {
window.addEventListener("beforeunload", beforeUnloadHandler); window.addEventListener("beforeunload", beforeUnloadHandler);
@ -168,7 +172,13 @@
</svelte:head> </svelte:head>
<DropReceiver id="remux-container" bind:draggedOver bind:file> <DropReceiver id="remux-container" bind:draggedOver bind:file>
<div id="remux-open" class:processing> <div
id="remux-open"
class:processing
tabindex="-1"
data-first-focus
data-focus-ring-hidden
>
<FileReceiver <FileReceiver
bind:draggedOver bind:draggedOver
bind:file bind:file
@ -188,11 +198,15 @@
</div> </div>
</div> </div>
<div id="remux-processing" class:processing> <div id="remux-processing" class:processing aria-hidden={!processing}>
{#if processing} {#if processing}
{#if progress && speed} {#if progress && speed}
<div class="progress-bar"> <div class="progress-bar">
<Skeleton width="{progress}%" height="20px" class="elevated" /> <Skeleton
width="{progress}%"
height="20px"
class="elevated"
/>
</div> </div>
<div class="progress-text"> <div class="progress-text">
processing ({progress}%, {speed}x)... processing ({progress}%, {speed}x)...