1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-12-14 00:22:59 +01:00
upscayl/renderer/components/upscayl-tab/view/ProgressBar.tsx
2023-09-09 17:48:00 +05:30

41 lines
1.1 KiB
TypeScript

import React from "react";
import Spinner from "../../icons/Spinner";
function ProgressBar({
progress,
doubleUpscaylCounter,
stopHandler,
batchMode,
}) {
const [batchProgress, setBatchProgress] = React.useState(0);
React.useEffect(() => {
if (progress.includes("0.00%")) {
setBatchProgress((prev) => prev + 1);
}
}, [progress]);
return (
<div className="absolute flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
<div className="flex flex-col items-center gap-2">
<Spinner />
<p className="rounded-full bg-base-300 px-2 py-1 font-bold">
{batchMode && "Batch Upscale In Progress: " + batchProgress}
{!batchMode &&
(doubleUpscaylCounter > 0
? `${progress}\nPass ${doubleUpscaylCounter}`
: `${progress}`)}
</p>
<p className="rounded-full bg-base-300 px-2 py-1 text-sm font-medium">
Doing the Upscayl magic...
</p>
<button onClick={stopHandler} className="btn-danger btn">
STOP
</button>
</div>
</div>
);
}
export default ProgressBar;