Refactor/download queue and cleanup visuals overall (#202)
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
This commit is contained in:
Valter Martinek
@@ -7,51 +7,39 @@
|
||||
* 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 NavbarContext from 'components/context/NavbarContext';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import PauseIcon from '@mui/icons-material/Pause';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import client from 'util/client';
|
||||
import DragHandle from '@mui/icons-material/DragHandle';
|
||||
import PauseIcon from '@mui/icons-material/Pause';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import {
|
||||
DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle,
|
||||
} from 'react-beautiful-dnd';
|
||||
import { useTheme, Palette } from '@mui/material/styles';
|
||||
import List from '@mui/material/List';
|
||||
import DragHandleIcon from '@mui/icons-material/DragHandle';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import { ListItemIcon } from '@mui/material';
|
||||
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 { Box } from '@mui/system';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Box } from '@mui/system';
|
||||
import useSubscription from 'components/library/useSubscription';
|
||||
|
||||
const getItemStyle = (isDragging: boolean,
|
||||
draggableStyle: DraggingStyle | NotDraggingStyle | undefined, palette: Palette) => ({
|
||||
// styles we need to apply on draggables
|
||||
...draggableStyle,
|
||||
|
||||
...(isDragging && {
|
||||
background: palette.mode === 'dark' ? '#424242' : 'rgb(235,235,235)',
|
||||
}),
|
||||
});
|
||||
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
|
||||
import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { BACK } from 'util/useBackTo';
|
||||
|
||||
const initialQueue = {
|
||||
status: 'Stopped',
|
||||
queue: [],
|
||||
} as IQueue;
|
||||
|
||||
export default function DownloadQueue() {
|
||||
const DownloadQueue: React.FC = () => {
|
||||
const { data: queueState } = useSubscription<IQueue>('/api/v1/downloads');
|
||||
const { queue, status } = queueState ?? initialQueue;
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
|
||||
const toggleQueueStatus = () => {
|
||||
@@ -64,22 +52,8 @@ export default function DownloadQueue() {
|
||||
|
||||
useEffect(() => {
|
||||
setTitle('Download Queue');
|
||||
|
||||
setAction(() => {
|
||||
if (status === 'Stopped') {
|
||||
return (
|
||||
<IconButton onClick={toggleQueueStatus} size="large">
|
||||
<PlayArrowIcon />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<IconButton onClick={toggleQueueStatus} size="large">
|
||||
<PauseIcon />
|
||||
</IconButton>
|
||||
);
|
||||
});
|
||||
}, [status]);
|
||||
setAction(null);
|
||||
}, []);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const onDragEnd = (result: DropResult) => {
|
||||
@@ -89,27 +63,29 @@ export default function DownloadQueue() {
|
||||
return <EmptyView message="No downloads" />;
|
||||
}
|
||||
|
||||
const callDeleteServer = (chapter: IChapter) => {
|
||||
// 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}`);
|
||||
};
|
||||
|
||||
const deleteChapterQueue = (chapter: IChapter) => {
|
||||
const handleDelete = (chapter: IChapter) => {
|
||||
// required to stop before deleting otherwise the download kept going. Server issue?
|
||||
client.get('/api/v1/downloads/stop')
|
||||
.then(() => callDeleteServer(chapter));
|
||||
.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) => (
|
||||
<List ref={provided.innerRef}>
|
||||
<Box ref={provided.innerRef} sx={{ pt: 1 }}>
|
||||
{queue.map((item, index) => (
|
||||
<Draggable
|
||||
key={`${item.mangaId}-${item.chapterIndex}`}
|
||||
@@ -117,72 +93,57 @@ export default function DownloadQueue() {
|
||||
index={index}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<ListItem
|
||||
ContainerProps={{ ref: provided.innerRef } as any}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'flex-start',
|
||||
padding: 2,
|
||||
margin: '10px',
|
||||
'&:hover': {
|
||||
backgroundColor: 'action.hover',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'action.selected',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
},
|
||||
}}
|
||||
onClick={() => history.push(`/manga/${item.chapter.mangaId}`)}
|
||||
<Box
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={getItemStyle(
|
||||
snapshot.isDragging,
|
||||
provided.draggableProps.style,
|
||||
theme.palette,
|
||||
)}
|
||||
ref={provided.innerRef}
|
||||
sx={{ p: 1, pb: 2 }}
|
||||
>
|
||||
<ListItemIcon sx={{ margin: 'auto 0' }}>
|
||||
<DragHandleIcon />
|
||||
</ListItemIcon>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{item.manga.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{`${item.chapter.name} `
|
||||
+ `(${(item.progress * 100).toFixed(2)}%)`
|
||||
+ ` => state: ${item.state}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton
|
||||
sx={{ marginLeft: 'auto' }}
|
||||
onClick={(e) => {
|
||||
// deleteCategory(index);
|
||||
// prevent parent tags from getting the event
|
||||
e.stopPropagation();
|
||||
|
||||
// delete chapter from download queue
|
||||
deleteChapterQueue(item.chapter);
|
||||
<Card
|
||||
sx={{
|
||||
backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
<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}
|
||||
</List>
|
||||
</Box>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DownloadQueue;
|
||||
|
||||
Reference in New Issue
Block a user