ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/download queue clear queue (#490)

Browse Source 
* Use "NavbarContext" in "DownloadsQueue"

* Add option to clear the whole download queue
This commit is contained in:
schroda
2023-12-10 00:09:00 +01:00
committed by GitHub
parent 7d574a29f6
commit c51897ed54
2 changed files with 92 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/i18n/locale/en.json
View File

@@ -141,10 +141,12 @@
"queue": { "queue": {
"error": { "error": {
"label": { "label": {
"failed_to_remove": "Could not remove download from queue." "failed_to_remove": "Could not remove the download from the queue.",
"failed_delete_all": "Could not remove all downloads from the queue"
} }
}, },
"label": { "label": {
"delete_all": "Delete all",
"no_downloads": "No downloads" "no_downloads": "No downloads"
}, },
"title": "Download Queue" "title": "Download Queue"

165
src/screens/DownloadQueue.tsx
View File

@@ -14,14 +14,13 @@ import { Card, CardActionArea, Stack, Box, Tooltip } from '@mui/material';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import React, { useContext, useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import { DragDropContext, Draggable } from 'react-beautiful-dnd'; import { DragDropContext, Draggable } from 'react-beautiful-dnd';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { StrictModeDroppable } from '@/lib/StrictModeDroppable'; import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
import { makeToast } from '@/components/util/Toast'; import { makeToast } from '@/components/util/Toast';
import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator'; import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
import { EmptyView } from '@/components/util/EmptyView'; import { EmptyView } from '@/components/util/EmptyView';
import { DownloadType } from '@/lib/graphql/generated/graphql.ts'; import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
@@ -34,9 +33,18 @@ export const DownloadQueue: React.FC = () => {
const { data: downloaderData } = requestManager.useDownloadSubscription(); const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? []; const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
const status = downloaderData?.downloadChanged.state ?? 'STARTED'; const status = downloaderData?.downloadChanged.state ?? 'STARTED';
const isQueueEmpty = !queue.length;
const { setTitle, setAction } = useContext(NavBarContext); const { setTitle, setAction } = useContext(NavBarContext);
const clearQueue = async () => {
try {
await requestManager.clearDownloads().response;
} catch (e) {
makeToast(t('download.queue.error.label.failed_delete_all'), 'error');
}
};
const toggleQueueStatus = () => { const toggleQueueStatus = () => {
if (status === 'STOPPED') { if (status === 'STOPPED') {
requestManager.startDownloads(); requestManager.startDownloads();
@@ -47,15 +55,25 @@ export const DownloadQueue: React.FC = () => {
useEffect(() => { useEffect(() => {
setTitle(t('download.queue.title')); setTitle(t('download.queue.title'));
setAction(null); setAction(
}, [t]); <>
<Tooltip title={t('download.queue.label.delete_all')}>
<IconButton onClick={clearQueue} size="large" disabled={isQueueEmpty}>
<DeleteSweepIcon />
</IconButton>
</Tooltip>
<Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
<IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty}>
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
</>,
);
}, [t, status, isQueueEmpty]);
const onDragEnd = () => {}; const onDragEnd = () => {};
if (queue.length === 0) {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}
const handleDelete = async (chapter: TChapter) => { const handleDelete = async (chapter: TChapter) => {
const isRunning = status === 'STARTED'; const isRunning = status === 'STARTED';
@@ -83,79 +101,74 @@ export const DownloadQueue: React.FC = () => {
requestManager.startDownloads().response.catch(() => {}); requestManager.startDownloads().response.catch(() => {});
}; };
if (isQueueEmpty) {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}
return ( return (
<> <DragDropContext onDragEnd={onDragEnd}>
<NavbarToolbar> <StrictModeDroppable droppableId="droppable">
<Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}> {(droppableProvided) => (
<IconButton onClick={toggleQueueStatus} size="large"> <Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}>
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />} {queue.map((item, index) => (
</IconButton> <Draggable
</Tooltip> key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
</NavbarToolbar> draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
<DragDropContext onDragEnd={onDragEnd}> index={index}
<StrictModeDroppable droppableId="droppable"> >
{(droppableProvided) => ( {(draggableProvided, snapshot) => (
<Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}> <Box
{queue.map((item, index) => ( {...draggableProvided.draggableProps}
<Draggable {...draggableProvided.dragHandleProps}
key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`} ref={draggableProvided.innerRef}
draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`} sx={{ p: 1, pb: 2 }}
index={index} >
> <Card
{(draggableProvided, snapshot) => ( sx={{
<Box backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
{...draggableProvided.draggableProps} }}
{...draggableProvided.dragHandleProps}
ref={draggableProvided.innerRef}
sx={{ p: 1, pb: 2 }}
> >
<Card <CardActionArea
component={Link}
to={`/manga/${item.chapter.mangaId}`}
sx={{ sx={{
backgroundColor: snapshot.isDragging ? 'custom.light' : undefined, display: 'flex',
alignItems: 'center',
p: 1,
}} }}
> >
<CardActionArea <IconButton sx={{ pointerEvents: 'none' }}>
component={Link} <DragHandle />
to={`/manga/${item.chapter.mangaId}`} </IconButton>
sx={{ <Stack sx={{ flex: 1, ml: 1 }} direction="column">
display: 'flex', <Typography variant="h6">{item.chapter.manga.title}</Typography>
alignItems: 'center', <Typography variant="caption" display="block" gutterBottom>
p: 1, {item.chapter.name}
}} </Typography>
> </Stack>
<IconButton sx={{ pointerEvents: 'none' }}> <DownloadStateIndicator download={item} />
<DragHandle /> <Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton> </IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column"> </Tooltip>
<Typography variant="h6">{item.chapter.manga.title}</Typography> </CardActionArea>
<Typography variant="caption" display="block" gutterBottom> </Card>
{item.chapter.name} </Box>
</Typography> )}
</Stack> </Draggable>
<DownloadStateIndicator download={item} /> ))}
<Tooltip title={t('chapter.action.download.delete.label.action')}> {droppableProvided.placeholder}
<IconButton </Box>
onClick={(e) => { )}
e.preventDefault(); </StrictModeDroppable>
e.stopPropagation(); </DragDropContext>
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</CardActionArea>
</Card>
</Box>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Box>
)}
</StrictModeDroppable>
</DragDropContext>
</>
); );
}; };