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
@@ -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