converted dir tree

frontend/src/components/StackableResult.tsx

@@ -4,73 +4,73 @@ import { IMessage } from "../interfaces";
 import { ellipsis } from "../utils";
 
 type Props = {
-    title: string,
-    thumbnail: string,
-    resolution: string
-    percentage: string,
-    size: number,
-    speed: number,
-    stopCallback: VoidFunction,
+  title: string,
+  thumbnail: string,
+  resolution: string
+  percentage: string,
+  size: number,
+  speed: number,
+  stopCallback: VoidFunction,
 }
 
 export function StackableResult({
-    title,
-    thumbnail,
-    resolution,
-    percentage,
-    speed,
-    size,
-    stopCallback
+  title,
+  thumbnail,
+  resolution,
+  percentage,
+  speed,
+  size,
+  stopCallback
 }: Props) {
-    const guessResolution = (xByY: string): any => {
-        if (!xByY) return null;
-        if (xByY.includes('4320')) return (<EightK color="primary" />);
-        if (xByY.includes('2160')) return (<FourK color="primary" />);
-        if (xByY.includes('1080')) return (<Hd color="primary" />);
-        if (xByY.includes('720')) return (<Sd color="primary" />);
-        return null;
-    }
+  const guessResolution = (xByY: string): any => {
+    if (!xByY) return null;
+    if (xByY.includes('4320')) return (<EightK color="primary" />);
+    if (xByY.includes('2160')) return (<FourK color="primary" />);
+    if (xByY.includes('1080')) return (<Hd color="primary" />);
+    if (xByY.includes('720')) return (<Sd color="primary" />);
+    return null;
+  }
 
-    const percentageToNumber = () => Number(percentage.replace('%', ''))
+  const percentageToNumber = () => Number(percentage.replace('%', ''))
 
-    const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MiB`
+  const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MiB`
 
-    return (
-        <Card>
-            <CardActionArea>
-                {thumbnail !== '' ?
-                    <CardMedia
-                        component="img"
-                        height={180}
-                        image={thumbnail}
-                    /> :
-                    <Skeleton variant="rectangular" height={180} />
-                }
-                <CardContent>
-                    {title !== '' ?
-                        <Typography gutterBottom variant="h6" component="div">
-                            {ellipsis(title, 54)}
-                        </Typography> :
-                        <Skeleton />
-                    }
-                    <Stack direction="row" spacing={1} py={2}>
-                        <Chip label={'Downloading'} color="primary" />
-                        <Typography>{percentage}</Typography>
-                        <Typography>{speed}</Typography>
-                        <Typography>{roundMB(size ?? 0)}</Typography>
-                        {guessResolution(resolution)}
-                    </Stack>
-                    {percentage ?
-                        <LinearProgress variant="determinate" value={percentageToNumber()} /> :
-                        null
-                    }
-                </CardContent>
-            </CardActionArea>
-            <CardActions>
-                <Button variant="contained" size="small" color="primary" onClick={stopCallback}>
-                    Stop
-                </Button>
-            </CardActions>
-        </Card>
-    )
+  return (
+    <Card>
+      <CardActionArea>
+        {thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        <CardContent>
+          {title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(title, 54)}
+            </Typography> :
+            <Skeleton />
+          }
+          <Stack direction="row" spacing={1} py={2}>
+            <Chip label={'Downloading'} color="primary" />
+            <Typography>{percentage}</Typography>
+            <Typography>{speed}</Typography>
+            <Typography>{roundMB(size ?? 0)}</Typography>
+            {guessResolution(resolution)}
+          </Stack>
+          {percentage ?
+            <LinearProgress variant="determinate" value={percentageToNumber()} /> :
+            null
+          }
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button variant="contained" size="small" color="primary" onClick={stopCallback}>
+          Stop
+        </Button>
+      </CardActions>
+    </Card>
+  )
 }