it just works

frontend/src/components/StackableResult.tsx

@@ -1,6 +1,18 @@
 import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
-import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
-import { IMessage } from "../interfaces";
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  LinearProgress,
+  Skeleton,
+  Stack,
+  Typography
+} from "@mui/material";
+import { useEffect, useState } from "react";
 import { ellipsis } from "../utils";
 
 type Props = {
@@ -22,6 +34,14 @@ export function StackableResult({
   size,
   stopCallback
 }: Props) {
+  const [isCompleted, setIsCompleted] = useState(false)
+
+  useEffect(() => {
+    if (percentage === '-1') {
+      setIsCompleted(true)
+    }
+  }, [percentage])
+
   const guessResolution = (xByY: string): any => {
     if (!xByY) return null;
     if (xByY.includes('4320')) return (<EightK color="primary" />);
@@ -31,9 +51,10 @@ export function StackableResult({
     return null;
   }
 
-  const percentageToNumber = () => Number(percentage.replace('%', ''))
+  const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
 
-  const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MiB`
+  const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB`
+  const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s`
 
   return (
     <Card>
@@ -54,21 +75,33 @@ export function StackableResult({
             <Skeleton />
           }
           <Stack direction="row" spacing={1} py={2}>
-            <Chip label={'Downloading'} color="primary" />
-            <Typography>{percentage}</Typography>
-            <Typography>{speed}</Typography>
-            <Typography>{roundMB(size ?? 0)}</Typography>
+            <Chip
+              label={isCompleted ? 'Completed' : 'Downloading'}
+              color="primary"
+              size="small"
+            />
+            <Typography>{!isCompleted ? percentage : ''}</Typography>
+            <Typography> {!isCompleted ? formatSpeedMiB(speed) : ''}</Typography>
+            <Typography>{roundMiB(size ?? 0)}</Typography>
             {guessResolution(resolution)}
           </Stack>
           {percentage ?
-            <LinearProgress variant="determinate" value={percentageToNumber()} /> :
+            <LinearProgress
+              variant="determinate"
+              value={percentageToNumber()}
+              color={isCompleted ? "secondary" : "primary"}
+            /> :
             null
           }
         </CardContent>
       </CardActionArea>
       <CardActions>
-        <Button variant="contained" size="small" color="primary" onClick={stopCallback}>
-          Stop
+        <Button
+          variant="contained"
+          size="small"
+          color="primary"
+          onClick={stopCallback}>
+          {isCompleted ? "Clear" : "Stop"}
         </Button>
       </CardActions>
     </Card>

frontend/src/components/Statistics.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Line } from "react-chartjs-2";
-import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Title,
-    Tooltip,
-    Legend,
-} from 'chart.js';
-import { on } from "../events";
-
-ChartJS.register(
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Title,
-    Tooltip,
-    Legend
-);
-
-export function Statistics() {
-    const dataset = new Array<number>();
-    const chartRef = useRef(null)
-
-    useEffect(() => {
-        on('dlSpeed', (data: CustomEvent<any>) => {
-            dataset.push(data.detail)
-            chartRef.current.update()
-        })
-    }, [])
-
-    const data = {
-        labels: dataset.map(() => ''),
-        datasets: [
-            {
-                data: dataset,
-                label: 'download speed',
-                borderColor: 'rgb(53, 162, 235)',
-            }
-        ]
-    }
-
-    return (
-        <div className="chart">
-            <Line data={data} ref={chartRef} />
-        </div>
-    )
-}