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

Add continue read button to library (#505)

Browse Source
This commit is contained in:
schroda
2023-12-19 15:17:00 +01:00
committed by GitHub
parent 663e20fff9
commit 2f8c284c8b
6 changed files with 152 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/MangaCard.tsx
View File

@@ -10,12 +10,13 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import { Avatar, Box, CardContent, styled, Tooltip } from '@mui/material';
import { Avatar, Box, CardContent, Stack, styled, Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { SpinnerImage } from '@/components/util/SpinnerImage';
import { TPartialManga } from '@/typings.ts';
import { ContinueReadingButton } from '@/components/manga/ContinueReadingButton.tsx';
const BottomGradient = styled('div')({
position: 'absolute',
@@ -44,11 +45,6 @@ const MangaTitle = styled(Typography)({
});
const GridMangaTitle = styled(MangaTitle)({
width: '100%',
position: 'absolute',
bottom: 0,
margin: '0.5em 0',
padding: '0 0.5em',
fontSize: '1.05rem',
});
@@ -75,17 +71,29 @@ export const MangaCard = (props: IProps) => {
const { t } = useTranslation();
const {
manga: { id, title, thumbnailUrl: tmpThumbnailUrl, downloadCount, unreadCount: unread, inLibrary },
manga: {
id,
title,
thumbnailUrl: tmpThumbnailUrl,
downloadCount,
unreadCount: unread,
inLibrary,
lastReadChapter,
chapters,
},
gridLayout,
inLibraryIndicator,
} = props;
const thumbnailUrl = tmpThumbnailUrl ?? 'nonExistingMangaUrl';
const {
options: { showUnreadBadge, showDownloadBadge },
options: { showContinueReadingButton, showUnreadBadge, showDownloadBadge },
} = useLibraryOptionsContext();
const mangaLinkTo = `/manga/${id}/`;
const nextChapterIndexToRead = (lastReadChapter?.sourceOrder ?? 0) + 1;
const isLatestChapterRead = chapters?.totalCount === lastReadChapter?.sourceOrder;
if (gridLayout !== GridLayout.List) {
return (
<Link to={mangaLinkTo} style={gridLayout === GridLayout.Comfortable ? { textDecoration: 'none' } : {}}>
@@ -155,10 +163,23 @@ export const MangaCard = (props: IProps) => {
placeItems: 'center',
}}
/>
{gridLayout !== GridLayout.Comfortable && (
<>
<BottomGradient />
<BottomGradientDoubledDown />
<Stack
direction="row"
justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
alignItems="end"
sx={{
position: 'absolute',
bottom: 0,
width: '100%',
margin: '0.5em 0',
padding: '0 0.5em',
gap: '0.5em',
}}
>
{gridLayout !== GridLayout.Comfortable && (
<Tooltip title={title} placement="top">
<GridMangaTitle
sx={{
@@ -169,8 +190,15 @@ export const MangaCard = (props: IProps) => {
{title}
</GridMangaTitle>
</Tooltip>
</>
)}
<ContinueReadingButton
showContinueReadingButton={showContinueReadingButton}
isLatestChapterRead={isLatestChapterRead}
nextChapterIndexToRead={nextChapterIndexToRead}
mangaLinkTo={mangaLinkTo}
/>
</Stack>
</>
</CardActionArea>
</Card>
{gridLayout === GridLayout.Comfortable && (
@@ -178,6 +206,10 @@ export const MangaCard = (props: IProps) => {
<GridMangaTitle
sx={{
position: 'relative',
width: '100%',
bottom: 0,
margin: '0.5em 0',
padding: '0 0.5em',
color: 'text.primary',
height: '3rem',
}}
@@ -237,6 +269,7 @@ export const MangaCard = (props: IProps) => {
<MangaTitle variant="h5">{title}</MangaTitle>
</Tooltip>
</Box>
<Stack direction="row" alignItems="center" gap="5px">
<BadgeContainer>
{inLibraryIndicator && inLibrary && (
<Typography sx={{ backgroundColor: 'primary.dark' }}>
@@ -256,6 +289,13 @@ export const MangaCard = (props: IProps) => {
</Typography>
)}
</BadgeContainer>
<ContinueReadingButton
showContinueReadingButton={showContinueReadingButton}
isLatestChapterRead={isLatestChapterRead}
nextChapterIndexToRead={nextChapterIndexToRead}
mangaLinkTo={mangaLinkTo}
/>
</Stack>
</CardContent>
</CardActionArea>
</Card>

1
src/components/context/LibraryOptionsContext.tsx
View File

@@ -21,6 +21,7 @@ export enum GridLayout {
}
export const DefaultLibraryOptions: LibraryOptions = {
showContinueReadingButton: false,
showDownloadBadge: false,
showUnreadBadge: false,
gridLayout: GridLayout.Compact,

16
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -82,7 +82,8 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
));
}
if (key === 'display') {
const { gridLayout, showDownloadBadge, showUnreadBadge, showTabSize } = options;
const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge, showTabSize } =
options;
return (
<>
<FormLabel>{t('global.grid_layout.title')}</FormLabel>
@@ -110,12 +111,12 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
<CheckboxInput
label={t('library.option.display.badge.label.unread_badges')}
checked={showUnreadBadge === true}
checked={showUnreadBadge}
onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
/>
<CheckboxInput
label={t('library.option.display.badge.label.download_badges')}
checked={showDownloadBadge === true}
checked={showDownloadBadge}
onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
/>
@@ -125,6 +126,15 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
checked={showTabSize}
onChange={() => handleFilterChange('showTabSize', !showTabSize)}
/>
<FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
<CheckboxInput
label={t('library.option.display.other.label.show_continue_reading_button')}
checked={showContinueReadingButton}
onChange={() =>
handleFilterChange('showContinueReadingButton', !showContinueReadingButton)
}
/>
</>
);
}

46
src/components/manga/ContinueReadingButton.tsx Normal file
View File

@@ -0,0 +1,46 @@
/*
* 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 { useTranslation } from 'react-i18next';
import { Button, Tooltip } from '@mui/material';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
export const ContinueReadingButton = ({
showContinueReadingButton,
isLatestChapterRead,
nextChapterIndexToRead,
mangaLinkTo,
}: {
showContinueReadingButton: boolean;
isLatestChapterRead: boolean;
nextChapterIndexToRead: number;
mangaLinkTo: string;
}) => {
const { t } = useTranslation();
const isFirstChapter = nextChapterIndexToRead === 1;
if (!showContinueReadingButton || isLatestChapterRead) {
return null;
}
return (
<Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<Button
variant="contained"
size="small"
sx={{ minWidth: 'unset' }}
href={`${mangaLinkTo}chapter/${nextChapterIndexToRead}`}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
<PlayArrowIcon />
</Button>
</Tooltip>
);
};

10
src/i18n/locale/en.json
View File

@@ -141,8 +141,8 @@
"queue": {
"error": {
"label": {
"failed_to_remove": "Could not remove the download from the queue.",
"failed_delete_all": "Could not remove all downloads from the queue"
"failed_delete_all": "Could not remove all downloads from the queue",
"failed_to_remove": "Could not remove the download from the queue."
}
},
"label": {
@@ -319,6 +319,7 @@
"loading": "Loading…",
"never": "Never",
"none": "None",
"other": "Other",
"password": "Password",
"sort": "Sort",
"unknown": "Unknown",
@@ -379,6 +380,11 @@
},
"title": "Badges"
},
"other": {
"label": {
"show_continue_reading_button": "Show continue reading button"
}
},
"tab": {
"label": {
"show_number_of_items": "Show number of items"

1
src/typings.ts
View File

@@ -340,6 +340,7 @@ enum GridLayout {
export interface LibraryOptions {
// display options
showContinueReadingButton: boolean;
showDownloadBadge: boolean;
showUnreadBadge: boolean;
gridLayout: GridLayout;