virtualized downloads table
This commit is contained in:
@@ -18,12 +18,61 @@ import {
|
||||
TableRow,
|
||||
Typography
|
||||
} from "@mui/material"
|
||||
import { forwardRef } from 'react'
|
||||
import { TableComponents, TableVirtuoso } from 'react-virtuoso'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { activeDownloadsState } from '../atoms/downloads'
|
||||
import { serverURL } from '../atoms/settings'
|
||||
import { useRPC } from '../hooks/useRPC'
|
||||
import { RPCResult } from '../types'
|
||||
import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
width: 8,
|
||||
label: 'Status',
|
||||
dataKey: 'status',
|
||||
numeric: false,
|
||||
},
|
||||
{
|
||||
width: 500,
|
||||
label: 'Title',
|
||||
dataKey: 'title',
|
||||
numeric: false,
|
||||
},
|
||||
{
|
||||
width: 50,
|
||||
label: 'Speed',
|
||||
dataKey: 'speed',
|
||||
numeric: true,
|
||||
},
|
||||
{
|
||||
width: 150,
|
||||
label: 'Progress',
|
||||
dataKey: 'progress',
|
||||
numeric: true,
|
||||
},
|
||||
{
|
||||
width: 80,
|
||||
label: 'Size',
|
||||
dataKey: 'size',
|
||||
numeric: true,
|
||||
},
|
||||
{
|
||||
width: 100,
|
||||
label: 'Added on',
|
||||
dataKey: 'addedon',
|
||||
numeric: true,
|
||||
},
|
||||
{
|
||||
width: 80,
|
||||
label: 'Actions',
|
||||
dataKey: 'actions',
|
||||
numeric: true,
|
||||
},
|
||||
] as const
|
||||
|
||||
function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
@@ -39,10 +88,40 @@ function LinearProgressWithLabel(props: LinearProgressProps & { value: number })
|
||||
)
|
||||
}
|
||||
|
||||
const DownloadsTableView: React.FC = () => {
|
||||
const serverAddr = useRecoilValue(serverURL)
|
||||
const downloads = useRecoilValue(activeDownloadsState)
|
||||
const VirtuosoTableComponents: TableComponents<RPCResult> = {
|
||||
Scroller: forwardRef<HTMLDivElement>((props, ref) => (
|
||||
<TableContainer {...props} ref={ref} />
|
||||
)),
|
||||
Table: (props) => (
|
||||
<Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed', mt: 2 }} size='small' />
|
||||
),
|
||||
TableHead,
|
||||
TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
|
||||
TableBody: forwardRef<HTMLTableSectionElement>((props, ref) => (
|
||||
<TableBody {...props} ref={ref} />
|
||||
)),
|
||||
}
|
||||
|
||||
function fixedHeaderContent() {
|
||||
return (
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.dataKey}
|
||||
variant="head"
|
||||
align={column.numeric || false ? 'right' : 'left'}
|
||||
style={{ width: column.width }}
|
||||
>
|
||||
{column.label}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
const DownloadsTableView: React.FC = () => {
|
||||
const downloads = useRecoilValue(activeDownloadsState)
|
||||
const serverAddr = useRecoilValue(serverURL)
|
||||
const { client } = useRPC()
|
||||
|
||||
const abort = (id: string) => client.kill(id)
|
||||
@@ -57,102 +136,78 @@ const DownloadsTableView: React.FC = () => {
|
||||
window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer
|
||||
sx={{ minHeight: '80vh', mt: 4 }}
|
||||
hidden={downloads.length === 0}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width={8}>
|
||||
<Typography fontWeight={500} fontSize={13}>Status</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography fontWeight={500} fontSize={13}>Title</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography fontWeight={500} fontSize={13}>Speed</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center" width={200}>
|
||||
<Typography fontWeight={500} fontSize={13}>Progress</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Typography fontWeight={500} fontSize={13}>Size</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" width={180}>
|
||||
<Typography fontWeight={500} fontSize={13}>Added on</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" width={8}>
|
||||
<Typography fontWeight={500} fontSize={13}>Actions</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{
|
||||
downloads.map(download => (
|
||||
<TableRow key={download.id}>
|
||||
<TableCell>
|
||||
{download.progress.percentage === '-1'
|
||||
? <DownloadDoneIcon color="primary" />
|
||||
: <DownloadIcon color="primary" />
|
||||
}
|
||||
</TableCell>
|
||||
<TableCell>{download.info.title}</TableCell>
|
||||
<TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
|
||||
<TableCell align="right">
|
||||
<LinearProgressWithLabel
|
||||
sx={{ height: '16px' }}
|
||||
value={
|
||||
download.progress.percentage === '-1'
|
||||
? 100
|
||||
: Number(download.progress.percentage.replace('%', ''))
|
||||
}
|
||||
variant={
|
||||
download.progress.process_status === 0
|
||||
? 'indeterminate'
|
||||
: 'determinate'
|
||||
}
|
||||
color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
|
||||
<TableCell align="right">
|
||||
{new Date(download.info.created_at).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<ButtonGroup>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => abort(download.id)}
|
||||
>
|
||||
{download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
|
||||
|
||||
</IconButton>
|
||||
{download.progress.percentage === '-1' &&
|
||||
<>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => viewFile(download.output.savedFilePath)}
|
||||
>
|
||||
<SmartDisplayIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => downloadFile(download.output.savedFilePath)}
|
||||
>
|
||||
<FileDownloadIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
</ButtonGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
function rowContent(_index: number, download: RPCResult) {
|
||||
return (
|
||||
<>
|
||||
<TableCell>
|
||||
{download.progress.percentage === '-1'
|
||||
? <DownloadDoneIcon color="primary" />
|
||||
: <DownloadIcon color="primary" />
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</TableCell>
|
||||
<TableCell>{download.info.title}</TableCell>
|
||||
<TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
|
||||
<TableCell align="right">
|
||||
<LinearProgressWithLabel
|
||||
sx={{ height: '16px' }}
|
||||
value={
|
||||
download.progress.percentage === '-1'
|
||||
? 100
|
||||
: Number(download.progress.percentage.replace('%', ''))
|
||||
}
|
||||
variant={
|
||||
download.progress.process_status === 0
|
||||
? 'indeterminate'
|
||||
: 'determinate'
|
||||
}
|
||||
color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
|
||||
<TableCell align="right">
|
||||
{new Date(download.info.created_at).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<ButtonGroup>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => abort(download.id)}
|
||||
>
|
||||
{download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
|
||||
|
||||
</IconButton>
|
||||
{download.progress.percentage === '-1' &&
|
||||
<>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => viewFile(download.output.savedFilePath)}
|
||||
>
|
||||
<SmartDisplayIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => downloadFile(download.output.savedFilePath)}
|
||||
>
|
||||
<FileDownloadIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
}
|
||||
</ButtonGroup>
|
||||
</TableCell>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box style={{ height: '80vh', width: '100%' }}>
|
||||
<TableVirtuoso
|
||||
hidden={downloads.length === 0}
|
||||
data={downloads}
|
||||
components={VirtuosoTableComponents}
|
||||
fixedHeaderContent={fixedHeaderContent}
|
||||
itemContent={rowContent}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user