106 lines
2.7 KiB
TypeScript
106 lines
2.7 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 { useEffect, useState } from "react";
|
|
import { ellipsis, formatSpeedMiB, roundMiB } 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 [isCompleted, setIsCompleted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (percentage === '-1') {
|
|
setIsCompleted(true)
|
|
}
|
|
}, [percentage])
|
|
|
|
const percentageToNumber = () => isCompleted ? 100 : Number(percentage.replace('%', ''))
|
|
|
|
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;
|
|
}
|
|
|
|
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={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()}
|
|
color={isCompleted ? "secondary" : "primary"}
|
|
/> :
|
|
null
|
|
}
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<CardActions>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
color="primary"
|
|
onClick={stopCallback}>
|
|
{isCompleted ? "Clear" : "Stop"}
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
)
|
|
} |