Skip to content

Commit

Permalink
Feature/download queue clear queue (#490)
Browse files Browse the repository at this point in the history 
* Use "NavbarContext" in "DownloadsQueue"

* Add option to clear the whole download queue
  • Loading branch information
@schroda
schroda authored Dec 9, 2023
1 parent 7d574a2 commit c51897e
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 77 deletions.
4 changes: 3 additions & 1 deletion src/i18n/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,10 +141,12 @@
"queue": {
"error": {
"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": {
"delete_all": "Delete all",
"no_downloads": "No downloads"
},
"title": "Download Queue"
Expand Down
165 changes: 89 additions & 76 deletions src/screens/DownloadQueue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,13 @@ import { Card, CardActionArea, Stack, Box, Tooltip } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import React, { useContext, useEffect } from 'react';
import { DragDropContext, Draggable } from 'react-beautiful-dnd';

import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
import { makeToast } from '@/components/util/Toast';
import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
import { EmptyView } from '@/components/util/EmptyView';
import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
Expand All @@ -34,9 +33,18 @@ export const DownloadQueue: React.FC = () => {
const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
const status = downloaderData?.downloadChanged.state ?? 'STARTED';
const isQueueEmpty = !queue.length;

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 = () => {
if (status === 'STOPPED') {
requestManager.startDownloads();
Expand All @@ -47,14 +55,24 @@ export const DownloadQueue: React.FC = () => {

useEffect(() => {
setTitle(t('download.queue.title'));
setAction(null);
}, [t]);
setAction(
<>
<Tooltip title={t('download.queue.label.delete_all')}>
<IconButton onClick={clearQueue} size="large" disabled={isQueueEmpty}>
<DeleteSweepIcon />
</IconButton>
</Tooltip>

const onDragEnd = () => {};
<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]);

if (queue.length === 0) {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}
const onDragEnd = () => {};

const handleDelete = async (chapter: TChapter) => {
const isRunning = status === 'STARTED';
Expand Down Expand Up @@ -83,79 +101,74 @@ export const DownloadQueue: React.FC = () => {
requestManager.startDownloads().response.catch(() => {});
};

if (isQueueEmpty) {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}

return (
<>
<NavbarToolbar>
<Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
<IconButton onClick={toggleQueueStatus} size="large">
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</Tooltip>
</NavbarToolbar>
<DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable">
{(droppableProvided) => (
<Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}>
{queue.map((item, index) => (
<Draggable
key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
index={index}
>
{(draggableProvided, snapshot) => (
<Box
{...draggableProvided.draggableProps}
{...draggableProvided.dragHandleProps}
ref={draggableProvided.innerRef}
sx={{ p: 1, pb: 2 }}
<DragDropContext onDragEnd={onDragEnd}>
<StrictModeDroppable droppableId="droppable">
{(droppableProvided) => (
<Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}>
{queue.map((item, index) => (
<Draggable
key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
index={index}
>
{(draggableProvided, snapshot) => (
<Box
{...draggableProvided.draggableProps}
{...draggableProvided.dragHandleProps}
ref={draggableProvided.innerRef}
sx={{ p: 1, pb: 2 }}
>
<Card
sx={{
backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
}}
>
<Card
<CardActionArea
component={Link}
to={`/manga/${item.chapter.mangaId}`}
sx={{
backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
display: 'flex',
alignItems: 'center',
p: 1,
}}
>
<CardActionArea
component={Link}
to={`/manga/${item.chapter.mangaId}`}
sx={{
display: 'flex',
alignItems: 'center',
p: 1,
}}
>
<IconButton sx={{ pointerEvents: 'none' }}>
<DragHandle />
<IconButton sx={{ pointerEvents: 'none' }}>
<DragHandle />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6">{item.chapter.manga.title}</Typography>
<Typography variant="caption" display="block" gutterBottom>
{item.chapter.name}
</Typography>
</Stack>
<DownloadStateIndicator download={item} />
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6">{item.chapter.manga.title}</Typography>
<Typography variant="caption" display="block" gutterBottom>
{item.chapter.name}
</Typography>
</Stack>
<DownloadStateIndicator download={item} />
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</CardActionArea>
</Card>
</Box>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Box>
)}
</StrictModeDroppable>
</DragDropContext>
</>
</Tooltip>
</CardActionArea>
</Card>
</Box>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Box>
)}
</StrictModeDroppable>
</DragDropContext>
);
};

0 comments on commit c51897e

Please sign in to comment.