Refactor/download queue and cleanup visuals overall (#202)
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
This commit is contained in:
Valter Martinek
284
src/App.tsx
284
src/App.tsx
@@ -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
|
||||||
}
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</AppContext>
|
||||||
|
);
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
export default App;
|
||||||
background: ${darkTheme ? '#111' : '#aaa'};
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
[darkTheme],
|
|
||||||
);
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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
66
src/components/context/AppContext.tsx
Normal 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;
|
||||||
@@ -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,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
53
src/components/molecules/DownloadStateIndicator.tsx
Normal 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;
|
||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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',
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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
56
src/theme.ts
Normal 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;
|
||||||
Reference in New Issue
Block a user