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;
|
||||
|
||||
@@ -185,7 +185,6 @@ export default function MangaExtensions() {
|
||||
paddingLeft: 25,
|
||||
paddingBottom: '0.83em',
|
||||
paddingTop: '0.83em',
|
||||
backgroundColor: 'rgb(18, 18, 18)',
|
||||
fontSize: '2em',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
|
||||
@@ -6,20 +6,20 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Card } from '@mui/material';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Card, CardActionArea, Typography } from '@mui/material';
|
||||
import NavbarContext from 'components/context/NavbarContext';
|
||||
import MangaGrid from 'components/MangaGrid';
|
||||
import LangSelect from 'components/navbar/action/LangSelect';
|
||||
import AppbarSearch from 'components/util/AppbarSearch';
|
||||
import PQueue from 'p-queue/dist/index';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { useQueryParam, StringParam } from 'use-query-params';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { StringParam, useQueryParam } from 'use-query-params';
|
||||
import client from 'util/client';
|
||||
import {
|
||||
langCodeToName, langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs,
|
||||
} from 'util/language';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import PQueue from 'p-queue/dist/index';
|
||||
|
||||
function sourceToLangList(sources: ISource[]) {
|
||||
const result: string[] = [];
|
||||
@@ -32,7 +32,7 @@ function sourceToLangList(sources: ISource[]) {
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function SearchAll() {
|
||||
const SearchAll: React.FC = () => {
|
||||
const [query] = useQueryParam('query', StringParam);
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
const [triggerUpdate, setTriggerUpdate] = useState<number>(2);
|
||||
@@ -150,14 +150,6 @@ export default function SearchAll() {
|
||||
);
|
||||
}, [shownLangs, sources]);
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const redirectTo = (e: any, to: string) => {
|
||||
history.push(to);
|
||||
|
||||
// prevent parent tags from getting the event
|
||||
e.stopPropagation();
|
||||
};
|
||||
if (query) {
|
||||
return (
|
||||
<>
|
||||
@@ -177,31 +169,19 @@ export default function SearchAll() {
|
||||
}).map(({ lang, id, displayName }) => (
|
||||
(
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
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={(e) => redirectTo(e, `/sources/${id}/popular/?R&query=${query}`)}
|
||||
>
|
||||
<h1
|
||||
key={lang}
|
||||
style={{ margin: '25px 0px 0px 25px' }}
|
||||
<Card sx={{ margin: '10px' }}>
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={`/sources/${id}/popular/?R&query=${query}`}
|
||||
sx={{ p: 3 }}
|
||||
>
|
||||
{displayName}
|
||||
</h1>
|
||||
<p
|
||||
style={{ margin: '0px 0px 25px 25px' }}
|
||||
>
|
||||
{langCodeToName(lang)}
|
||||
</p>
|
||||
<Typography variant="h5">
|
||||
{displayName}
|
||||
</Typography>
|
||||
<Typography variant="caption">
|
||||
{langCodeToName(lang)}
|
||||
</Typography>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
<MangaGrid
|
||||
mangas={mangas[id] || []}
|
||||
@@ -222,4 +202,6 @@ export default function SearchAll() {
|
||||
);
|
||||
}
|
||||
return (<></>);
|
||||
}
|
||||
};
|
||||
|
||||
export default SearchAll;
|
||||
|
||||
@@ -5,22 +5,24 @@
|
||||
* 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 React, {
|
||||
useContext, useEffect, useState, useRef,
|
||||
} from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import { CardActionArea } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Box } from '@mui/system';
|
||||
import NavbarContext from 'components/context/NavbarContext';
|
||||
import client from 'util/client';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
|
||||
import EmptyView from 'components/util/EmptyView';
|
||||
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
|
||||
import { Box } from '@mui/system';
|
||||
import React, {
|
||||
useContext, useEffect, useRef, useState,
|
||||
} from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import client from 'util/client';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
|
||||
function epochToDate(epoch: number) {
|
||||
const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
|
||||
@@ -67,7 +69,7 @@ const initialQueue = {
|
||||
queue: [],
|
||||
} as IQueue;
|
||||
|
||||
export default function Updates() {
|
||||
const Updates: React.FC = () => {
|
||||
const history = useHistory();
|
||||
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
@@ -135,17 +137,9 @@ export default function Updates() {
|
||||
if (!fetched) { return <LoadingPlaceholder />; }
|
||||
if (fetched && updateEntries.length === 0) { return <EmptyView message="You don't have any updates yet." />; }
|
||||
|
||||
const downloadStatusStringFor = (chapter: IChapter) => {
|
||||
let rtn = '';
|
||||
if (chapter.downloaded) {
|
||||
rtn = ' • Downloaded';
|
||||
}
|
||||
queue.forEach((q) => {
|
||||
if (chapter.index === q.chapterIndex && chapter.mangaId === q.mangaId) {
|
||||
rtn = ` • Downloading (${(q.progress * 100).toFixed(2)}%)`;
|
||||
}
|
||||
});
|
||||
return rtn;
|
||||
const downloadForChapter = (chapter: IChapter) => {
|
||||
const { index, mangaId } = chapter;
|
||||
return queue.find((q) => index === q.chapterIndex && mangaId === q.mangaId);
|
||||
};
|
||||
|
||||
const downloadChapter = (chapter: IChapter) => {
|
||||
@@ -166,70 +160,69 @@ export default function Updates() {
|
||||
>
|
||||
{dateGroup[0]}
|
||||
</Typography>
|
||||
{dateGroup[1].map(({ item: { chapter, manga }, globalIdx }) => (
|
||||
<Card
|
||||
ref={globalIdx === updateEntries.length - 1 ? lastEntry : undefined}
|
||||
key={globalIdx}
|
||||
sx={{
|
||||
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({ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: history.location.state })}
|
||||
>
|
||||
<CardContent sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
{dateGroup[1].map(({ item: { chapter, manga }, globalIdx }) => {
|
||||
const download = downloadForChapter(chapter);
|
||||
return (
|
||||
<Card
|
||||
ref={globalIdx === updateEntries.length - 1 ? lastEntry : undefined}
|
||||
key={globalIdx}
|
||||
sx={{ margin: '10px' }}
|
||||
>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: history.location.state }}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
marginRight: 2,
|
||||
imageRendering: 'pixelated',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{manga.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{chapter.name}
|
||||
{downloadStatusStringFor(chapter)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{downloadStatusStringFor(chapter) === ''
|
||||
&& (
|
||||
>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
marginRight: 2,
|
||||
imageRendering: 'pixelated',
|
||||
}}
|
||||
src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{manga.title}
|
||||
</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{chapter.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{download && <DownloadStateIndicator download={download} />}
|
||||
{download == null && !chapter.downloaded && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
downloadChapter(chapter);
|
||||
// prevent parent tags from getting the event
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
downloadChapter(chapter);
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
<DownloadIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Updates;
|
||||
|
||||
Reference in New Issue
Block a user