ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor/download queue and cleanup visuals overall (#202)

Browse Source 
* 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
2022-11-26 13:51:56 +01:00
committed by GitHub
parent bfca70a44c
commit 8dfc89ee17
16 changed files with 618 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
src/App.tsx
View File

@@ -5,194 +5,124 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from 'react-router-dom';
import { QueryParamProvider } from 'use-query-params';
import { Container } from '@mui/material'; import { Container } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { import AppContext from 'components/context/AppContext';
createTheme,
ThemeProvider,
Theme,
StyledEngineProvider,
} from '@mui/material/styles';
import { SWRConfig } from 'swr';
import { fetcher } from 'util/client';
import DefaultNavBar from 'components/navbar/DefaultNavBar'; import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme'; import React from 'react';
import useLocalStorage from 'util/useLocalStorage'; import {
Redirect, Route, Switch,
} from 'react-router-dom';
import Browse from 'screens/Browse';
import DownloadQueue from 'screens/DownloadQueue';
import Extensions from 'screens/Extensions';
import Library from 'screens/Library';
import Manga from 'screens/Manga';
import Reader from 'screens/Reader';
import SearchAll from 'screens/SearchAll';
import Settings from 'screens/Settings'; import Settings from 'screens/Settings';
import About from 'screens/settings/About'; import About from 'screens/settings/About';
import Categories from 'screens/settings/Categories';
import Backup from 'screens/settings/Backup'; import Backup from 'screens/settings/Backup';
import Library from 'screens/Library'; import Categories from 'screens/settings/Categories';
import SourceConfigure from 'screens/SourceConfigure'; import SourceConfigure from 'screens/SourceConfigure';
import Manga from 'screens/Manga';
import SourceMangas from 'screens/SourceMangas'; import SourceMangas from 'screens/SourceMangas';
import Reader from 'screens/Reader';
import Updates from 'screens/Updates';
import DownloadQueue from 'screens/DownloadQueue';
import Browse from 'screens/Browse';
import Sources from 'screens/Sources'; import Sources from 'screens/Sources';
import Extensions from 'screens/Extensions'; import Updates from 'screens/Updates';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
import SearchAll from 'screens/SearchAll';
declare module '@mui/styles/defaultTheme' { const App: React.FC = () => (
// eslint-disable-next-line @typescript-eslint/no-empty-interface <AppContext>
interface DefaultTheme extends Theme {} <CssBaseline />
} <DefaultNavBar />
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
}}
>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<Settings />
</Route>
export default function App() { {/* Manga Routes */}
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
const darkThemeContext = { <Route path="/sources/:sourceId/popular/">
darkTheme, <SourceMangas popular />
setDarkTheme, </Route>
}; <Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
const theme = React.useMemo( </Route>
() => createTheme({ <Route path="/sources/:sourceId/configure/">
palette: { <SourceConfigure />
mode: darkTheme ? 'dark' : 'light', </Route>
}, <Route path="/sources/all/search/">
components: { <SearchAll />
MuiCssBaseline: { </Route>
styleOverrides: ` <Route path="/downloads">
*::-webkit-scrollbar { <DownloadQueue />
width: 10px; </Route>
background: ${darkTheme ? '#222' : '#e1e1e1'}; <Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader
// when changing chapters
render={(props: any) => (
<Reader
key={
props.match.params
.chapterIndex
} }
/>
*::-webkit-scrollbar-thumb { )}
background: ${darkTheme ? '#111' : '#aaa'}; />
border-radius: 5px; </Switch>
} </AppContext>
`, );
},
},
}),
[darkTheme],
);
return ( export default App;
<SWRConfig value={{ fetcher }}>
<Router>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}>
<LibraryOptionsContextProvider>
<NavBarContextProvider>
<CssBaseline />
<DefaultNavBar />
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
}}
>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider
value={darkThemeContext}
>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources/all/search/">
<SearchAll />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader
// when changing chapters
render={(props: any) => (
<Reader
key={
props.match.params
.chapterIndex
}
/>
)}
/>
</Switch>
</NavBarContextProvider>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</ThemeProvider>
</StyledEngineProvider>
</Router>
</SWRConfig>
);
}

165
src/components/MangaCard.tsx
View File

@@ -37,16 +37,11 @@ const MangaTitle = styled(Typography)({
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
padding: '0.5em', padding: '0.5em',
color: 'white',
fontSize: '1.05rem', fontSize: '1.05rem',
textShadow: '0px 0px 3px #000000',
}); });
const BadgeContainer = styled('div')({ const BadgeContainer = styled('div')({
display: 'flex', display: 'flex',
position: 'absolute',
top: 5,
left: 5,
height: 'fit-content', height: 'fit-content',
borderRadius: '5px', borderRadius: '5px',
overflow: 'hidden', overflow: 'hidden',
@@ -94,10 +89,9 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } }; const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
if (gridLayout !== 2) { if (gridLayout !== 2) {
const colomns = Math.round(dimensions / ItemWidth); const cols = Math.ceil(dimensions / ItemWidth);
return ( return (
// @ts-ignore gridsize type isnt allowed to be a decimal but it works fine <Grid item columns={cols} xs={1}>
<Grid item xs={12 / colomns} sm={12 / colomns} md={12 / colomns} lg={12 / colomns}>
<Link to={mangaLinkTo} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}> <Link to={mangaLinkTo} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
<Box <Box
sx={{ sx={{
@@ -107,7 +101,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
> >
<Card <Card
sx={{ sx={{
// force standard aspect ratio of manga covers // force standard aspect ratio of manga covers
aspectRatio: '225/350', aspectRatio: '225/350',
display: 'flex', display: 'flex',
}} }}
@@ -120,7 +114,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
}} }}
> >
<BadgeContainer> <BadgeContainer
sx={{
position: 'absolute',
top: 5,
left: 5,
}}
>
{inLibraryIndicator && inLibrary && ( {inLibraryIndicator && inLibrary && (
<Typography <Typography
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }} sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
@@ -173,7 +173,12 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
{(gridLayout === 1) ? ( {(gridLayout === 1) ? (
<></> <></>
) : ( ) : (
<MangaTitle> <MangaTitle
sx={{
color: 'white',
textShadow: '0px 0px 3px #000000',
}}
>
{truncateText(title, 61)} {truncateText(title, 61)}
</MangaTitle> </MangaTitle>
)} )}
@@ -183,6 +188,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
<MangaTitle <MangaTitle
sx={{ sx={{
position: 'relative', position: 'relative',
color: 'text.primary',
}} }}
> >
{truncateText(title, 61)} {truncateText(title, 61)}
@@ -193,83 +199,82 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
</Grid> </Grid>
); );
} }
return ( return (
<Grid item xs={12} sm={12} md={12} lg={12}> <Grid item xs={12}>
<Link to={mangaLinkTo} style={{ textDecoration: 'none', color: 'unset' }}> <Card>
<CardContent sx={{ <CardActionArea
display: 'flex', component={Link}
justifyContent: 'space-between', to={mangaLinkTo}
alignItems: 'center',
padding: 2,
'&: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',
},
position: 'relative',
}}
> >
<Avatar <CardContent
variant="rounded"
sx={inLibrary
? {
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 2,
imageRendering: 'pixelated',
filter: 'brightness(0.4)',
}
: {
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 2,
imageRendering: 'pixelated',
}}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
/>
<Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: 'row', justifyContent: 'space-between',
flexGrow: 1, alignItems: 'center',
width: 'min-content', padding: 2,
position: 'relative',
}} }}
> >
<Typography variant="h5" component="h2"> <Avatar
{truncateText(title, 61)} variant="rounded"
</Typography> sx={inLibraryIndicator && inLibrary
</Box> ? {
<BadgeContainer sx={{ position: 'relative' }}> width: 56,
{inLibrary && ( height: 56,
<Typography flex: '0 0 auto',
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }} marginRight: 2,
> imageRendering: 'pixelated',
In library filter: 'brightness(0.4)',
</Typography> }
)} : {
{ showUnreadBadge && unread! > 0 && ( width: 56,
<Typography height: 56,
sx={{ backgroundColor: 'primary.dark' }} flex: '0 0 auto',
> marginRight: 2,
{unread} imageRendering: 'pixelated',
</Typography> }}
)} src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
{ showDownloadBadge && downloadCount! > 0 && ( />
<Typography sx={{ <Box
backgroundColor: 'success.dark', sx={{
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
width: 'min-content',
}} }}
> >
{downloadCount} <Typography variant="h5" component="h2">
{truncateText(title, 61)}
</Typography> </Typography>
)} </Box>
</BadgeContainer> <BadgeContainer>
</CardContent> {inLibraryIndicator && inLibrary && (
</Link> <Typography
sx={{ backgroundColor: 'primary.dark' }}
>
In library
</Typography>
)}
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
</CardContent>
</CardActionArea>
</Card>
</Grid> </Grid>
); );
}); });

150
src/components/SourceCard.tsx
View File

@@ -5,16 +5,17 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React from 'react'; import { CardActionArea } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import { useHistory } from 'react-router-dom';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import useLocalStorage from 'util/useLocalStorage';
import { langCodeToName } from 'util/language';
import { Box, styled } from '@mui/system'; import { Box, styled } from '@mui/system';
import React from 'react';
import { Link, useHistory } from 'react-router-dom';
import { langCodeToName } from 'util/language';
import useLocalStorage from 'util/useLocalStorage';
const MobileWidthButtons = styled('div')(({ theme }) => ({ const MobileWidthButtons = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
@@ -38,7 +39,7 @@ interface IProps {
source: ISource source: ISource
} }
export default function SourceCard(props: IProps) { const SourceCard: React.FC<IProps> = (props: IProps) => {
const { const {
source: { source: {
id, name, lang, iconUrl, supportsLatest, isNsfw, id, name, lang, iconUrl, supportsLatest, isNsfw,
@@ -61,82 +62,83 @@ export default function SourceCard(props: IProps) {
<Card <Card
sx={{ sx={{
margin: '10px', 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/`)}
> >
<CardContent sx={{ <CardActionArea
display: 'flex', component={Link}
justifyContent: 'space-between', to={`/sources/${id}/popular/`}
alignItems: 'center',
padding: 2,
}}
> >
<CardContent
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}}
>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<Avatar <Avatar
variant="rounded" variant="rounded"
alt={name} alt={name}
sx={{ sx={{
width: 56, width: 56,
height: 56, height: 56,
flex: '0 0 auto', flex: '0 0 auto',
mr: 2, mr: 2,
}} }}
src={`${serverAddress}${iconUrl}?useCache=${useCache}`} src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
/> />
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}> <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h5" component="h2"> <Typography variant="h5" component="h2">
{name} {name}
</Typography>
{id !== '0' && (
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
{isNsfw && (
<Typography variant="caption" display="inline" gutterBottom color="red">
{' 18+'}
</Typography>
)}
</Typography> </Typography>
)} {id !== '0' && (
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
{isNsfw && (
<Typography variant="caption" display="inline" gutterBottom color="red">
{' 18+'}
</Typography>
)}
</Typography>
)}
</Box>
</Box> </Box>
</Box> <>
<> <MobileWidthButtons>
<MobileWidthButtons> {supportsLatest && (
{supportsLatest && ( <Button
variant="outlined"
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
>
Latest
</Button>
)}
</MobileWidthButtons>
<WiderWidthButtons>
{supportsLatest && (
<Button
component={Link}
to={`/sources/${id}/latest/`}
variant="outlined"
>
Latest
</Button>
)}
<Button <Button
component={Link}
to={`/sources/${id}/popular/`}
variant="outlined" variant="outlined"
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
> >
Latest Browse
</Button> </Button>
)} </WiderWidthButtons>
</MobileWidthButtons> </>
<WiderWidthButtons> </CardContent>
{supportsLatest && ( </CardActionArea>
<Button
variant="outlined"
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
>
Latest
</Button>
)}
<Button
variant="outlined"
onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
>
Browse
</Button>
</WiderWidthButtons>
</>
</CardContent>
</Card> </Card>
); );
} };
export default SourceCard;

66
src/components/context/AppContext.tsx Normal file
View File

@@ -0,0 +1,66 @@
/*
* 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 {
StyledEngineProvider, ThemeProvider,
} from '@mui/material/styles';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import React, { useMemo } from 'react';
import {
BrowserRouter as Router, Route,
} from 'react-router-dom';
import { SWRConfig } from 'swr';
import createTheme from 'theme';
import { QueryParamProvider } from 'use-query-params';
import { fetcher } from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import DarkTheme from './DarkTheme';
interface Props {
children: React.ReactNode
}
const AppContext: React.FC<Props> = ({ children }) => {
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
const darkThemeContext = useMemo(() => ({
darkTheme,
setDarkTheme,
}), [darkTheme]);
const theme = useMemo(
() => createTheme(darkTheme),
[darkTheme],
);
return (
<SWRConfig value={{ fetcher }}>
<Router>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<DarkTheme.Provider value={darkThemeContext}>
<QueryParamProvider ReactRouterRoute={Route}>
<LibraryOptionsContextProvider>
<NavBarContextProvider>
{children}
</NavBarContextProvider>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</DarkTheme.Provider>
</ThemeProvider>
</StyledEngineProvider>
</Router>
</SWRConfig>
);
};
export default AppContext;

32
src/components/manga/ChapterCard.tsx
View File

@@ -16,8 +16,7 @@ import Download from '@mui/icons-material/Download';
import MoreVertIcon from '@mui/icons-material/MoreVert'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import RemoveDone from '@mui/icons-material/RemoveDone'; import RemoveDone from '@mui/icons-material/RemoveDone';
import { import {
LinearProgress, CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack,
Checkbox, ListItemIcon, ListItemText, Stack,
} from '@mui/material'; } from '@mui/material';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
@@ -26,6 +25,7 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import client from 'util/client'; import client from 'util/client';
@@ -107,21 +107,12 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
sx={{ sx={{
position: 'relative', position: 'relative',
margin: 1, margin: 1,
':hover': {
backgroundColor: 'action.hover',
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
cursor: 'pointer',
},
':active': {
backgroundColor: 'action.selected',
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
}} }}
> >
<Link <CardActionArea
component={Link}
to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: { backLink: BACK } }} to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: { backLink: BACK } }}
style={{ style={{
textDecoration: 'none',
color: theme.palette.text[chapter.read ? 'disabled' : 'primary'], color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
}} }}
onClick={handleClick} onClick={handleClick}
@@ -148,10 +139,11 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
<Typography variant="caption"> <Typography variant="caption">
{dateStr} {dateStr}
{isDownloaded && ' • Downloaded'} {isDownloaded && ' • Downloaded'}
{dc && ` • Downloading (${(dc.progress * 100).toFixed(2)}%)`}
</Typography> </Typography>
</Stack> </Stack>
{dc && <DownloadStateIndicator download={dc} />}
{selected === null ? ( {selected === null ? (
<IconButton aria-label="more" onClick={handleMenuClick} size="large"> <IconButton aria-label="more" onClick={handleMenuClick} size="large">
<MoreVertIcon /> <MoreVertIcon />
@@ -160,17 +152,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
<Checkbox checked={selected} /> <Checkbox checked={selected} />
)} )}
</CardContent> </CardContent>
</Link> </CardActionArea>
{dc != null && (
<LinearProgress
sx={{
position: 'absolute', bottom: 0, width: '100%', opacity: 0.5,
}}
variant="determinate"
value={dc.progress * 100}
color="inherit"
/>
)}
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted

6
src/components/manga/ChaptersToolbarMenu.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import FilterList from '@mui/icons-material/FilterList'; import FilterList from '@mui/icons-material/FilterList';
import { Badge, IconButton } from '@mui/material'; import { IconButton } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import ChapterOptions from './ChapterOptions'; import ChapterOptions from './ChapterOptions';
import { isFilterActive } from './util'; import { isFilterActive } from './util';
@@ -23,9 +23,7 @@ const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
return ( return (
<> <>
<IconButton onClick={() => setOpen(true)}> <IconButton onClick={() => setOpen(true)}>
<Badge color="primary" variant="dot" invisible={!isFiltered}> <FilterList color={isFiltered ? 'warning' : undefined} />
<FilterList />
</Badge>
</IconButton> </IconButton>
<ChapterOptions <ChapterOptions
open={open} open={open}

53
src/components/molecules/DownloadStateIndicator.tsx Normal file
View File

@@ -0,0 +1,53 @@
/*
* 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 { CircularProgress } from '@mui/material';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/system';
import React from 'react';
interface DownloadStateIndicatorProps {
download: IDownloadChapter
}
const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => (
<Box
sx={{
position: 'relative',
display: 'inline-flex',
width: '50px',
justifyContent: 'center',
}}
>
{download.progress !== 0 && (
<CircularProgress
variant="determinate"
value={download.progress * 100}
/>
)}
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography variant="caption" component="div" color="text.secondary">
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && download.state}
</Typography>
</Box>
</Box>
);
export default DownloadStateIndicator;

4
src/components/navbar/DefaultNavBar.tsx
View File

@@ -25,7 +25,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
import ArrowBack from '@mui/icons-material/ArrowBack'; import ArrowBack from '@mui/icons-material/ArrowBack';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import NavBarContext from 'components/context/NavbarContext'; import NavBarContext from 'components/context/NavbarContext';
import DarkTheme from 'components/context/DarkTheme';
import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon'; import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
@@ -82,7 +81,6 @@ const navbarItems: Array<NavbarItem> = [
export default function DefaultNavBar() { export default function DefaultNavBar() {
const { title, action, override } = useContext(NavBarContext); const { title, action, override } = useContext(NavBarContext);
const backTo = useBackTo(); const backTo = useBackTo();
const { darkTheme } = useContext(DarkTheme);
const theme = useTheme(); const theme = useTheme();
const history = useHistory(); const history = useHistory();
@@ -109,7 +107,7 @@ export default function DefaultNavBar() {
return ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}> <AppBar position="fixed" color="default">
<Toolbar> <Toolbar>
{!isMainRoute && ( {!isMainRoute && (
<IconButton <IconButton

18
src/components/navbar/ReaderNavBar.tsx
View File

@@ -17,7 +17,7 @@ import { useHistory, Link } from 'react-router-dom';
import Slide from '@mui/material/Slide'; import Slide from '@mui/material/Slide';
import Fade from '@mui/material/Fade'; import Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom'; import Zoom from '@mui/material/Zoom';
import { Switch } from '@mui/material'; import { Divider, Switch } from '@mui/material';
import List from '@mui/material/List'; import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem'; import ListItem from '@mui/material/ListItem';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
@@ -39,8 +39,7 @@ const Root = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
'& header': { '& header': {
backgroundColor: backgroundColor: theme.palette.action.hover,
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
minHeight: '64px', minHeight: '64px',
@@ -63,12 +62,6 @@ const Root = styled('div')(({ theme }) => ({
flexGrow: 1, flexGrow: 1,
}, },
}, },
'& hr': {
margin: '0 16px',
height: '1px',
border: '0',
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
},
})); }));
const Navigation = styled('div')({ const Navigation = styled('div')({
@@ -106,9 +99,9 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
height: '40px', height: '40px',
width: '40px', width: '40px',
borderRadius: 5, borderRadius: 5,
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white', backgroundColor: theme.palette.custom.main,
'&:hover': { '&:hover': {
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100], backgroundColor: theme.palette.custom.light,
}, },
})); }));
@@ -313,7 +306,7 @@ export default function ReaderNavBar(props: IProps) {
</ListItem> </ListItem>
</List> </List>
</Collapse> </Collapse>
<hr /> <Divider sx={{ my: 1, mx: 2 }} />
<Navigation> <Navigation>
<span> <span>
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`} {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
@@ -357,7 +350,6 @@ export default function ReaderNavBar(props: IProps) {
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<OpenDrawerButton <OpenDrawerButton
edge="start" edge="start"
color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
disableFocusRipple disableFocusRipple

2
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -14,7 +14,7 @@ import { useTheme } from '@mui/material/styles';
const SideNavBarContainer = styled('div')(({ theme }) => ({ const SideNavBarContainer = styled('div')(({ theme }) => ({
height: '100vh', height: '100vh',
width: theme.spacing(8), width: theme.spacing(8),
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], backgroundColor: theme.palette.custom,
position: 'fixed', position: 'fixed',
top: 0, top: 0,
left: 0, left: 0,

2
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -16,7 +16,7 @@ const BottomNavContainer = styled('div')(({ theme }) => ({
left: 0, left: 0,
height: theme.spacing(7), height: theme.spacing(7),
width: '100vw', width: '100vw',
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], backgroundColor: theme.palette.custom.light,
position: 'fixed', position: 'fixed',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',

185
src/screens/DownloadQueue.tsx
View File

@@ -7,51 +7,39 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * 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 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 { import {
DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle, Card, CardActionArea, Stack,
} from 'react-beautiful-dnd'; } from '@mui/material';
import { useTheme, Palette } from '@mui/material/styles'; import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List'; import NavbarContext from 'components/context/NavbarContext';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import ListItem from '@mui/material/ListItem';
import { ListItemIcon } from '@mui/material';
import EmptyView from 'components/util/EmptyView'; 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 Typography from '@mui/material/Typography';
import { useHistory } from 'react-router-dom'; import { Box } from '@mui/system';
import useSubscription from 'components/library/useSubscription'; import useSubscription from 'components/library/useSubscription';
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
const getItemStyle = (isDragging: boolean, import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
draggableStyle: DraggingStyle | NotDraggingStyle | undefined, palette: Palette) => ({ import { Link } from 'react-router-dom';
// styles we need to apply on draggables import { BACK } from 'util/useBackTo';
...draggableStyle,
...(isDragging && {
background: palette.mode === 'dark' ? '#424242' : 'rgb(235,235,235)',
}),
});
const initialQueue = { const initialQueue = {
status: 'Stopped', status: 'Stopped',
queue: [], queue: [],
} as IQueue; } as IQueue;
export default function DownloadQueue() { const DownloadQueue: React.FC = () => {
const { data: queueState } = useSubscription<IQueue>('/api/v1/downloads'); const { data: queueState } = useSubscription<IQueue>('/api/v1/downloads');
const { queue, status } = queueState ?? initialQueue; const { queue, status } = queueState ?? initialQueue;
const history = useHistory();
const theme = useTheme();
const { setTitle, setAction } = useContext(NavbarContext); const { setTitle, setAction } = useContext(NavbarContext);
const toggleQueueStatus = () => { const toggleQueueStatus = () => {
@@ -64,22 +52,8 @@ export default function DownloadQueue() {
useEffect(() => { useEffect(() => {
setTitle('Download Queue'); setTitle('Download Queue');
setAction(null);
setAction(() => { }, []);
if (status === 'Stopped') {
return (
<IconButton onClick={toggleQueueStatus} size="large">
<PlayArrowIcon />
</IconButton>
);
}
return (
<IconButton onClick={toggleQueueStatus} size="large">
<PauseIcon />
</IconButton>
);
});
}, [status]);
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const onDragEnd = (result: DropResult) => { const onDragEnd = (result: DropResult) => {
@@ -89,27 +63,29 @@ export default function DownloadQueue() {
return <EmptyView message="No downloads" />; return <EmptyView message="No downloads" />;
} }
const callDeleteServer = (chapter: IChapter) => { const handleDelete = (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) => {
// required to stop before deleting otherwise the download kept going. Server issue? // required to stop before deleting otherwise the download kept going. Server issue?
client.get('/api/v1/downloads/stop') 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 ( return (
<> <>
<NavbarToolbar>
<IconButton onClick={toggleQueueStatus} size="large">
{status === 'Stopped' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</NavbarToolbar>
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable"> <Droppable droppableId="droppable">
{(provided) => ( {(provided) => (
<List ref={provided.innerRef}> <Box ref={provided.innerRef} sx={{ pt: 1 }}>
{queue.map((item, index) => ( {queue.map((item, index) => (
<Draggable <Draggable
key={`${item.mangaId}-${item.chapterIndex}`} key={`${item.mangaId}-${item.chapterIndex}`}
@@ -117,72 +93,57 @@ export default function DownloadQueue() {
index={index} index={index}
> >
{(provided, snapshot) => ( {(provided, snapshot) => (
<ListItem <Box
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}`)}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style,
theme.palette,
)}
ref={provided.innerRef} ref={provided.innerRef}
sx={{ p: 1, pb: 2 }}
> >
<ListItemIcon sx={{ margin: 'auto 0' }}> <Card
<DragHandleIcon /> sx={{
</ListItemIcon> backgroundColor: snapshot.isDragging ? 'custom.light' : undefined,
<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);
}} }}
size="large"
> >
<DeleteIcon /> <CardActionArea
</IconButton> component={Link}
</ListItem> 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> </Draggable>
))} ))}
{provided.placeholder} {provided.placeholder}
</List> </Box>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</> </>
); );
} };
export default DownloadQueue;

1
src/screens/Extensions.tsx
View File

@@ -185,7 +185,6 @@ export default function MangaExtensions() {
paddingLeft: 25, paddingLeft: 25,
paddingBottom: '0.83em', paddingBottom: '0.83em',
paddingTop: '0.83em', paddingTop: '0.83em',
backgroundColor: 'rgb(18, 18, 18)',
fontSize: '2em', fontSize: '2em',
fontWeight: 'bold', fontWeight: 'bold',
}} }}

58
src/screens/SearchAll.tsx
View File

@@ -6,20 +6,20 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import { Card } from '@mui/material'; import { Card, CardActionArea, Typography } from '@mui/material';
import { useHistory } from 'react-router-dom';
import NavbarContext from 'components/context/NavbarContext'; import NavbarContext from 'components/context/NavbarContext';
import MangaGrid from 'components/MangaGrid'; import MangaGrid from 'components/MangaGrid';
import LangSelect from 'components/navbar/action/LangSelect'; import LangSelect from 'components/navbar/action/LangSelect';
import AppbarSearch from 'components/util/AppbarSearch'; import AppbarSearch from 'components/util/AppbarSearch';
import PQueue from 'p-queue/dist/index';
import React, { useContext, useEffect, useState } from 'react'; 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 client from 'util/client';
import { import {
langCodeToName, langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs, langCodeToName, langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs,
} from 'util/language'; } from 'util/language';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import PQueue from 'p-queue/dist/index';
function sourceToLangList(sources: ISource[]) { function sourceToLangList(sources: ISource[]) {
const result: string[] = []; const result: string[] = [];
@@ -32,7 +32,7 @@ function sourceToLangList(sources: ISource[]) {
return result; return result;
} }
export default function SearchAll() { const SearchAll: React.FC = () => {
const [query] = useQueryParam('query', StringParam); const [query] = useQueryParam('query', StringParam);
const { setTitle, setAction } = useContext(NavbarContext); const { setTitle, setAction } = useContext(NavbarContext);
const [triggerUpdate, setTriggerUpdate] = useState<number>(2); const [triggerUpdate, setTriggerUpdate] = useState<number>(2);
@@ -150,14 +150,6 @@ export default function SearchAll() {
); );
}, [shownLangs, sources]); }, [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) { if (query) {
return ( return (
<> <>
@@ -177,31 +169,19 @@ export default function SearchAll() {
}).map(({ lang, id, displayName }) => ( }).map(({ lang, id, displayName }) => (
( (
<> <>
<Card <Card sx={{ margin: '10px' }}>
sx={{ <CardActionArea
margin: '10px', component={Link}
'&:hover': { to={`/sources/${id}/popular/?R&query=${query}`}
backgroundColor: 'action.hover', sx={{ p: 3 }}
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' }}
> >
{displayName} <Typography variant="h5">
</h1> {displayName}
<p </Typography>
style={{ margin: '0px 0px 25px 25px' }} <Typography variant="caption">
> {langCodeToName(lang)}
{langCodeToName(lang)} </Typography>
</p> </CardActionArea>
</Card> </Card>
<MangaGrid <MangaGrid
mangas={mangas[id] || []} mangas={mangas[id] || []}
@@ -222,4 +202,6 @@ export default function SearchAll() {
); );
} }
return (<></>); return (<></>);
} };
export default SearchAll;

137
src/screens/Updates.tsx
View File

@@ -5,22 +5,24 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { import DownloadIcon from '@mui/icons-material/Download';
useContext, useEffect, useState, useRef, import { CardActionArea } from '@mui/material';
} from 'react'; import Avatar from '@mui/material/Avatar';
import { useHistory } from 'react-router-dom';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton'; 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 Typography from '@mui/material/Typography';
import { Box } from '@mui/system';
import NavbarContext from 'components/context/NavbarContext'; import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client'; import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
import useLocalStorage from 'util/useLocalStorage';
import EmptyView from 'components/util/EmptyView'; import EmptyView from 'components/util/EmptyView';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder'; 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) { function epochToDate(epoch: number) {
const date = new Date(0); // The 0 there is the key, which sets the date to the epoch 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: [], queue: [],
} as IQueue; } as IQueue;
export default function Updates() { const Updates: React.FC = () => {
const history = useHistory(); const history = useHistory();
const { setTitle, setAction } = useContext(NavbarContext); const { setTitle, setAction } = useContext(NavbarContext);
@@ -135,17 +137,9 @@ export default function Updates() {
if (!fetched) { return <LoadingPlaceholder />; } if (!fetched) { return <LoadingPlaceholder />; }
if (fetched && updateEntries.length === 0) { return <EmptyView message="You don't have any updates yet." />; } if (fetched && updateEntries.length === 0) { return <EmptyView message="You don't have any updates yet." />; }
const downloadStatusStringFor = (chapter: IChapter) => { const downloadForChapter = (chapter: IChapter) => {
let rtn = ''; const { index, mangaId } = chapter;
if (chapter.downloaded) { return queue.find((q) => index === q.chapterIndex && mangaId === q.mangaId);
rtn = ' • Downloaded';
}
queue.forEach((q) => {
if (chapter.index === q.chapterIndex && chapter.mangaId === q.mangaId) {
rtn = ` • Downloading (${(q.progress * 100).toFixed(2)}%)`;
}
});
return rtn;
}; };
const downloadChapter = (chapter: IChapter) => { const downloadChapter = (chapter: IChapter) => {
@@ -166,70 +160,69 @@ export default function Updates() {
> >
{dateGroup[0]} {dateGroup[0]}
</Typography> </Typography>
{dateGroup[1].map(({ item: { chapter, manga }, globalIdx }) => ( {dateGroup[1].map(({ item: { chapter, manga }, globalIdx }) => {
<Card const download = downloadForChapter(chapter);
ref={globalIdx === updateEntries.length - 1 ? lastEntry : undefined} return (
key={globalIdx} <Card
sx={{ ref={globalIdx === updateEntries.length - 1 ? lastEntry : undefined}
margin: '10px', key={globalIdx}
'&:hover': { sx={{ margin: '10px' }}
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,
}}
> >
<Box sx={{ display: 'flex' }}> <CardActionArea
<Avatar component={Link}
variant="rounded" to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: history.location.state }}
>
<CardContent
sx={{ sx={{
width: 56, display: 'flex',
height: 56, justifyContent: 'space-between',
flex: '0 0 auto', alignItems: 'center',
marginRight: 2, padding: 2,
imageRendering: 'pixelated',
}} }}
src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`} >
/> <Box sx={{ display: 'flex' }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <Avatar
<Typography variant="h5" component="h2"> variant="rounded"
{manga.title} sx={{
</Typography> width: 56,
<Typography variant="caption" display="block" gutterBottom> height: 56,
{chapter.name} flex: '0 0 auto',
{downloadStatusStringFor(chapter)} marginRight: 2,
</Typography> imageRendering: 'pixelated',
</Box> }}
</Box> src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
{downloadStatusStringFor(chapter) === '' />
&& ( <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 <IconButton
onClick={(e) => { onClick={(e) => {
downloadChapter(chapter);
// prevent parent tags from getting the event
e.stopPropagation(); e.stopPropagation();
e.preventDefault();
downloadChapter(chapter);
}} }}
size="large" size="large"
> >
<DownloadIcon /> <DownloadIcon />
</IconButton> </IconButton>
)} )}
</CardContent> </CardContent>
</Card> </CardActionArea>
))} </Card>
);
})}
</div> </div>
))} ))}
</> </>
); );
} };
export default Updates;

56
src/theme.ts Normal file
View File

@@ -0,0 +1,56 @@
/*
* 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 { Theme, createTheme as createMuiTheme } from '@mui/material/styles';
declare module '@mui/styles/defaultTheme' {
interface DefaultTheme extends Theme {}
}
declare module '@mui/material/styles' {
interface PaletteOptions {
custom?: PaletteOptions['primary'];
}
}
const createTheme = (dark?: boolean) => {
const baseTheme = createMuiTheme({
palette: {
mode: dark ? 'dark' : 'light',
},
});
const tachideskTheme = createMuiTheme({
palette: {
custom: {
main: dark ? baseTheme.palette.common.black : baseTheme.palette.common.white,
light: dark ? baseTheme.palette.grey[900] : baseTheme.palette.grey[100],
},
},
components: {
MuiCssBaseline: {
styleOverrides: `
*::-webkit-scrollbar {
width: 10px;
background: ${dark ? '#222' : '#e1e1e1'};
}
*::-webkit-scrollbar-thumb {
background: ${dark ? '#111' : '#aaa'};
border-radius: 5px;
}
`,
},
},
}, baseTheme);
return tachideskTheme;
};
export default createTheme;