420 lines
No EOL
13 KiB
TypeScript
420 lines
No EOL
13 KiB
TypeScript
import { Badge, Box, Button, CircularProgress, Divider, IconButton, LinearProgress, Skeleton, Tooltip, Typography } from '@mui/material';
|
|
import React from 'react';
|
|
import { messageChannelContext } from '../../../provider/MessageChannel';
|
|
import { queueContext } from '../../../provider/QueueProvider';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
|
|
import useDownloadManager from '../DownloadManager/DownloadManager';
|
|
|
|
const Queue: React.FC = () => {
|
|
const { data, current } = useDownloadManager();
|
|
const queue = React.useContext(queueContext);
|
|
const msg = React.useContext(messageChannelContext);
|
|
|
|
|
|
if (!msg)
|
|
return <>Never</>;
|
|
|
|
return data || queue.length > 0 ? <>
|
|
{data && <>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Box sx={{
|
|
marginTop: '2rem',
|
|
marginBottom: '1rem',
|
|
height: '12rem',
|
|
width: '93vw',
|
|
maxWidth: '93rem',
|
|
backgroundColor: '#282828',
|
|
boxShadow: '0px 0px 50px #00000090',
|
|
borderRadius: '10px',
|
|
display: 'flex',
|
|
transition: '250ms'
|
|
}}>
|
|
<img style={{
|
|
borderRadius: '5px',
|
|
margin: '5px',
|
|
boxShadow: '0px 0px 10px #00000090',
|
|
userSelect: 'none',
|
|
}}
|
|
src={data.downloadInfo.image} height='auto' width='auto' alt="Thumbnail" />
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
}}>
|
|
<Box sx={{
|
|
//backgroundColor: '#ff0000',
|
|
width: '70%',
|
|
marginLeft: '10px'
|
|
}}>
|
|
<Box sx={{
|
|
flexDirection: 'column',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
}}>
|
|
{data.downloadInfo.parent.title}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.2rem',
|
|
}}>
|
|
{data.downloadInfo.title}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
//backgroundColor: '#00ff00',
|
|
width: '30%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
}}>
|
|
Downloading: {data.downloadInfo.language.name}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
height: '50%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
//backgroundColor: '#0000ff',
|
|
}}>
|
|
<LinearProgress variant='determinate'
|
|
sx={{
|
|
height: '20px',
|
|
width: '97.53%',
|
|
margin: '10px',
|
|
boxShadow: '0px 0px 10px #00000090',
|
|
borderRadius: '10px',
|
|
}} value={(typeof data.progress.percent === 'string' ? parseInt(data.progress.percent) : data.progress.percent)}
|
|
/>
|
|
<Box>
|
|
<Typography color='text.primary'
|
|
sx={{
|
|
fontSize: '1.3rem',
|
|
}}>
|
|
{data.progress.cur} / {(data.progress.total)} parts ({data.progress.percent}% | {formatTime(data.progress.time)} | {(data.progress.downloadSpeed / 1024 / 1024).toFixed(2)} MB/s | {(data.progress.bytes / 1024 / 1024).toFixed(2)}MB)
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
}
|
|
{
|
|
current && !data && <>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Box sx={{
|
|
marginTop: '2rem',
|
|
marginBottom: '1rem',
|
|
height: '12rem',
|
|
width: '93vw',
|
|
maxWidth: '93rem',
|
|
backgroundColor: '#282828',
|
|
boxShadow: '0px 0px 50px #00000090',
|
|
borderRadius: '10px',
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
transition: '250ms'
|
|
}}>
|
|
<img style={{
|
|
borderRadius: '5px',
|
|
margin: '5px',
|
|
boxShadow: '0px 0px 10px #00000090',
|
|
userSelect: 'none',
|
|
maxWidth: '20.5rem',
|
|
}}
|
|
src={current.image} height='auto' width='auto' alt="Thumbnail" />
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
justifyContent: 'center',
|
|
//backgroundColor: '#ffffff0f'
|
|
}}>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
|
|
}}>
|
|
<Box sx={{
|
|
width: '70%',
|
|
marginLeft: '10px'
|
|
}}>
|
|
<Box sx={{
|
|
flexDirection: 'column',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
}}>
|
|
{current.parent.title}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.2rem',
|
|
}}>
|
|
{current.title}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
//backgroundColor: '#00ff00',
|
|
width: '30%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
position: 'relative',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
}}>
|
|
Downloading:
|
|
</Typography>
|
|
<CircularProgress variant="indeterminate" sx={{
|
|
marginLeft: '2rem',
|
|
}}/>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
height: '50%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
//backgroundColor: '#0000ff',
|
|
}}>
|
|
<LinearProgress variant='indeterminate'
|
|
sx={{
|
|
height: '20px',
|
|
width: '97.53%',
|
|
margin: '10px',
|
|
boxShadow: '0px 0px 10px #00000090',
|
|
borderRadius: '10px',
|
|
}}
|
|
/>
|
|
<Box>
|
|
<Typography color='text.primary'
|
|
sx={{
|
|
fontSize: '1.3rem',
|
|
}}>
|
|
0 / ? parts (0% | XX:XX | 0 MB/s | 0MB)
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
}
|
|
{queue.map((queueItem, index, { length }) => {
|
|
return <Box key={`queue_item_${index}`} sx={{
|
|
display: 'flex',
|
|
mb: '-1.5rem',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Box sx={{
|
|
marginTop: '1.5rem',
|
|
marginBottom: '1.5rem',
|
|
height: '11rem',
|
|
width: '90vw',
|
|
maxWidth: '90rem',
|
|
backgroundColor: '#282828',
|
|
boxShadow: '0px 0px 10px #00000090',
|
|
borderRadius: '10px',
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
}}>
|
|
<img style={{
|
|
borderRadius: '5px',
|
|
margin: '5px',
|
|
boxShadow: '0px 0px 5px #00000090',
|
|
userSelect: 'none',
|
|
maxWidth: '18.5rem'
|
|
}}
|
|
src={queueItem.image} height='auto' width='auto' alt="Thumbnail" />
|
|
<Box sx={{
|
|
margin: '5px',
|
|
display: 'flex',
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<Box sx={{
|
|
width: '30%',
|
|
marginRight: '5px',
|
|
marginLeft: '5px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
}}>
|
|
{queueItem.parent.title}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.6rem',
|
|
marginTop: '-0.4rem',
|
|
marginBottom: '0.4rem',
|
|
}}>
|
|
S{queueItem.parent.season}E{queueItem.episode}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.2rem',
|
|
marginTop: '-0.4rem',
|
|
marginBottom: '0.4rem',
|
|
textOverflow: 'ellipsis',
|
|
}}>
|
|
{queueItem.title}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{
|
|
width: '40%',
|
|
marginRight: '5px',
|
|
marginLeft: '5px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
}}>
|
|
Dub(s): {queueItem.dubLang.join(', ')}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
}}>
|
|
Sub(s): {queueItem.dlsubs.join(', ')}
|
|
</Typography>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '1.8rem',
|
|
|
|
}}>
|
|
Quality: {queueItem.q}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{
|
|
marginRight: '5px',
|
|
marginLeft: '5px',
|
|
width: '30%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
display: 'flex'
|
|
}}>
|
|
<Tooltip title="Delete from queue" arrow placement='top'>
|
|
<IconButton
|
|
onClick={() => {
|
|
msg.removeFromQueue(index);
|
|
}}
|
|
sx={{
|
|
backgroundColor: '#ff573a25',
|
|
height: '40px',
|
|
transition: '250ms',
|
|
'&:hover' : {
|
|
backgroundColor: '#ff573a',
|
|
}
|
|
}}>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
;
|
|
})}
|
|
</> : <Box sx={{
|
|
display: 'flex',
|
|
width: '100%',
|
|
height: '12rem',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}>
|
|
<Typography color='text.primary' sx={{
|
|
fontSize: '2rem',
|
|
margin: '10px'
|
|
}}>
|
|
Selected episodes will be shown here
|
|
</Typography>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
margin: '10px'
|
|
}}>
|
|
<Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}>
|
|
<Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
<Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
margin: '10px'
|
|
}}>
|
|
<Skeleton variant='rectangular' height={'10rem'} width={'20rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}>
|
|
<Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
<Skeleton variant='text' height={'100%'} width={'30rem'} sx={{ margin: '5px', borderRadius: '5px' }}/>
|
|
</Box>
|
|
</Box>
|
|
</Box>;
|
|
};
|
|
|
|
const formatTime = (time: number) => {
|
|
time = Math.floor(time / 1000);
|
|
const minutes = Math.floor(time / 60);
|
|
time = time % 60;
|
|
|
|
return `${minutes.toFixed(0).length < 2 ? `0${minutes}` : minutes}m${time.toFixed(0).length < 2 ? `0${time}` : time}s`;
|
|
};
|
|
|
|
export default Queue; |