76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
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 { ellipsis } from "../utils";
|
|
|
|
type Props = {
|
|
title: string,
|
|
thumbnail: string,
|
|
resolution: string
|
|
percentage: string,
|
|
size: number,
|
|
speed: number,
|
|
stopCallback: VoidFunction,
|
|
}
|
|
|
|
export function StackableResult({
|
|
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 percentageToNumber = () => Number(percentage.replace('%', ''))
|
|
|
|
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>
|
|
)
|
|
} |