155 lines
7.3 KiB
TypeScript
155 lines
7.3 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-shadow */
|
|
/* eslint-disable react/destructuring-assignment */
|
|
/*
|
|
* Copyright (C) Contributors to the Suwayomi project
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
|
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import DragHandle from '@mui/icons-material/DragHandle';
|
|
import PauseIcon from '@mui/icons-material/Pause';
|
|
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
|
import { Card, CardActionArea, Stack } from '@mui/material';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import NavbarContext from 'components/context/NavbarContext';
|
|
import EmptyView from 'components/util/EmptyView';
|
|
import React, { useContext, useEffect } from 'react';
|
|
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
|
|
import client from 'util/client';
|
|
|
|
import Typography from '@mui/material/Typography';
|
|
import { Box } from '@mui/system';
|
|
import useSubscription from 'components/library/useSubscription';
|
|
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
|
|
import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
|
|
import { Link } from 'react-router-dom';
|
|
import { BACK } from 'util/useBackTo';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { IChapter, IQueue } from 'typings';
|
|
|
|
const initialQueue = {
|
|
status: 'Stopped',
|
|
queue: [],
|
|
} as IQueue;
|
|
|
|
const DownloadQueue: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const { data: queueState } = useSubscription<IQueue>('/api/v1/downloads');
|
|
const { queue, status } = queueState ?? initialQueue;
|
|
|
|
const { setTitle, setAction } = useContext(NavbarContext);
|
|
|
|
const toggleQueueStatus = () => {
|
|
if (status === 'Stopped') {
|
|
client.get('/api/v1/downloads/start');
|
|
} else {
|
|
client.get('/api/v1/downloads/stop');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setTitle(t('download.queue.title'));
|
|
setAction(null);
|
|
}, [t]);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const onDragEnd = (result: DropResult) => {};
|
|
|
|
if (queue.length === 0) {
|
|
return <EmptyView message={t('download.queue.label.no_downloads')} />;
|
|
}
|
|
|
|
const handleDelete = (chapter: IChapter) => {
|
|
// required to stop before deleting otherwise the download kept going. Server issue?
|
|
client.get('/api/v1/downloads/stop').then(() =>
|
|
Promise.all([
|
|
// remove from download queue
|
|
client.delete(`/api/v1/download/${chapter.mangaId}/chapter/${chapter.index}`),
|
|
// delete partial download, should be handle server side?
|
|
// bug: The folder and the last image downloaded are not deleted
|
|
client.delete(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`),
|
|
]),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<NavbarToolbar>
|
|
<IconButton onClick={toggleQueueStatus} size="large">
|
|
{status === 'Stopped' ? <PlayArrowIcon /> : <PauseIcon />}
|
|
</IconButton>
|
|
</NavbarToolbar>
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="droppable">
|
|
{(provided) => (
|
|
<Box ref={provided.innerRef} sx={{ pt: 1 }}>
|
|
{queue.map((item, index) => (
|
|
<Draggable
|
|
key={`${item.mangaId}-${item.chapterIndex}`}
|
|
draggableId={`${item.mangaId}-${item.chapterIndex}`}
|
|
index={index}
|
|
>
|
|
{(provided, snapshot) => (
|
|
<Box
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
ref={provided.innerRef}
|
|
sx={{ p: 1, pb: 2 }}
|
|
>
|
|
<Card
|
|
sx={{
|
|
backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
|
|
}}
|
|
>
|
|
<CardActionArea
|
|
component={Link}
|
|
to={{
|
|
pathname: `/manga/${item.chapter.mangaId}`,
|
|
state: { backLink: BACK },
|
|
}}
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
p: 1,
|
|
}}
|
|
>
|
|
<IconButton sx={{ pointerEvents: 'none' }}>
|
|
<DragHandle />
|
|
</IconButton>
|
|
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
|
|
<Typography variant="h6">{item.manga.title}</Typography>
|
|
<Typography variant="caption" display="block" gutterBottom>
|
|
{item.chapter.name}
|
|
</Typography>
|
|
</Stack>
|
|
<DownloadStateIndicator download={item} />
|
|
<IconButton
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleDelete(item.chapter);
|
|
}}
|
|
size="large"
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Box>
|
|
)}
|
|
</Draggable>
|
|
))}
|
|
{provided.placeholder}
|
|
</Box>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DownloadQueue;
|