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
* 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 CssBaseline from '@mui/material/CssBaseline';
import {
createTheme,
ThemeProvider,
Theme,
StyledEngineProvider,
} from '@mui/material/styles';
import { SWRConfig } from 'swr';
import { fetcher } from 'util/client';
import AppContext from 'components/context/AppContext';
import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme';
import useLocalStorage from 'util/useLocalStorage';
import React from 'react';
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 About from 'screens/settings/About';
import Categories from 'screens/settings/Categories';
import Backup from 'screens/settings/Backup';
import Library from 'screens/Library';
import Categories from 'screens/settings/Categories';
import SourceConfigure from 'screens/SourceConfigure';
import Manga from 'screens/Manga';
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 Extensions from 'screens/Extensions';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
import SearchAll from 'screens/SearchAll';
import Updates from 'screens/Updates';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const App: React.FC = () => (
<AppContext>
<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() {
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
{/* Manga Routes */}
const darkThemeContext = {
darkTheme,
setDarkTheme,
};
const theme = React.useMemo(
() => createTheme({
palette: {
mode: darkTheme ? 'dark' : 'light',
},
components: {
MuiCssBaseline: {
styleOverrides: `
*::-webkit-scrollbar {
width: 10px;
background: ${darkTheme ? '#222' : '#e1e1e1'};
<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
}
*::-webkit-scrollbar-thumb {
background: ${darkTheme ? '#111' : '#aaa'};
border-radius: 5px;
}
`,
},
},
}),
[darkTheme],
);
/>
)}
/>
</Switch>
</AppContext>
);
return (
<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>
);
}
export default App;

165
src/components/MangaCard.tsx
View File

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

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
* 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 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 useLocalStorage from 'util/useLocalStorage';
import { langCodeToName } from 'util/language';
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 }) => ({
display: 'flex',
@@ -38,7 +39,7 @@ interface IProps {
source: ISource
}
export default function SourceCard(props: IProps) {
const SourceCard: React.FC<IProps> = (props: IProps) => {
const {
source: {
id, name, lang, iconUrl, supportsLatest, isNsfw,
@@ -61,82 +62,83 @@ export default function SourceCard(props: IProps) {
<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/`)}
>
<CardContent sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}}
<CardActionArea
component={Link}
to={`/sources/${id}/popular/`}
>
<CardContent
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}}
>
<Box sx={{ display: 'flex' }}>
<Avatar
variant="rounded"
alt={name}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
mr: 2,
}}
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
/>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h5" component="h2">
{name}
</Typography>
{id !== '0' && (
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
{isNsfw && (
<Typography variant="caption" display="inline" gutterBottom color="red">
{' 18+'}
</Typography>
)}
<Box sx={{ display: 'flex' }}>
<Avatar
variant="rounded"
alt={name}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
mr: 2,
}}
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
/>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h5" component="h2">
{name}
</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>
<>
<MobileWidthButtons>
{supportsLatest && (
<>
<MobileWidthButtons>
{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
component={Link}
to={`/sources/${id}/popular/`}
variant="outlined"
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
>
Latest
Browse
</Button>
)}
</MobileWidthButtons>
<WiderWidthButtons>
{supportsLatest && (
<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>
</WiderWidthButtons>
</>
</CardContent>
</CardActionArea>
</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 RemoveDone from '@mui/icons-material/RemoveDone';
import {
LinearProgress,
Checkbox, ListItemIcon, ListItemText, Stack,
CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack,
} from '@mui/material';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
@@ -26,6 +25,7 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
import React from 'react';
import { Link } from 'react-router-dom';
import client from 'util/client';
@@ -107,21 +107,12 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
sx={{
position: 'relative',
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 } }}
style={{
textDecoration: 'none',
color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
}}
onClick={handleClick}
@@ -148,10 +139,11 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
<Typography variant="caption">
{dateStr}
{isDownloaded && ' • Downloaded'}
{dc && ` • Downloading (${(dc.progress * 100).toFixed(2)}%)`}
</Typography>
</Stack>
{dc && <DownloadStateIndicator download={dc} />}
{selected === null ? (
<IconButton aria-label="more" onClick={handleMenuClick} size="large">
<MoreVertIcon />
@@ -160,17 +152,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
<Checkbox checked={selected} />
)}
</CardContent>
</Link>
{dc != null && (
<LinearProgress
sx={{
position: 'absolute', bottom: 0, width: '100%', opacity: 0.5,
}}
variant="determinate"
value={dc.progress * 100}
color="inherit"
/>
)}
</CardActionArea>
<Menu
anchorEl={anchorEl}
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/. */
import FilterList from '@mui/icons-material/FilterList';
import { Badge, IconButton } from '@mui/material';
import { IconButton } from '@mui/material';
import * as React from 'react';
import ChapterOptions from './ChapterOptions';
import { isFilterActive } from './util';
@@ -23,9 +23,7 @@ const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
return (
<>
<IconButton onClick={() => setOpen(true)}>
<Badge color="primary" variant="dot" invisible={!isFiltered}>
<FilterList />
</Badge>
<FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
<ChapterOptions
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 { Link, useHistory } from 'react-router-dom';
import NavBarContext from 'components/context/NavbarContext';
import DarkTheme from 'components/context/DarkTheme';
import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
import { Box } from '@mui/system';
import { createPortal } from 'react-dom';
@@ -82,7 +81,6 @@ const navbarItems: Array<NavbarItem> = [
export default function DefaultNavBar() {
const { title, action, override } = useContext(NavBarContext);
const backTo = useBackTo();
const { darkTheme } = useContext(DarkTheme);
const theme = useTheme();
const history = useHistory();
@@ -109,7 +107,7 @@ export default function DefaultNavBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
<AppBar position="fixed" color="default">
<Toolbar>
{!isMainRoute && (
<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 Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom';
import { Switch } from '@mui/material';
import { Divider, Switch } from '@mui/material';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import MenuItem from '@mui/material/MenuItem';
@@ -39,8 +39,7 @@ const Root = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.default,
'& header': {
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
backgroundColor: theme.palette.action.hover,
display: 'flex',
alignItems: 'center',
minHeight: '64px',
@@ -63,12 +62,6 @@ const Root = styled('div')(({ theme }) => ({
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')({
@@ -106,9 +99,9 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
height: '40px',
width: '40px',
borderRadius: 5,
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
backgroundColor: theme.palette.custom.main,
'&: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>
</List>
</Collapse>
<hr />
<Divider sx={{ my: 1, mx: 2 }} />
<Navigation>
<span>
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
@@ -357,7 +350,6 @@ export default function ReaderNavBar(props: IProps) {
<Fade in={!hideOpenButton}>
<OpenDrawerButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
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 }) => ({
height: '100vh',
width: theme.spacing(8),
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
backgroundColor: theme.palette.custom,
position: 'fixed',
top: 0,
left: 0,

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

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

1
src/screens/Extensions.tsx
View File

@@ -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',
}}

58
src/screens/SearchAll.tsx
View File

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

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
* 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;

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;