Resume chapter at specific page

- open from outside reader
 - is read
  - yes: 1st page
  - no : last read page
- inside reader via
 - chapter selection: first page
 - previous chapter : last page
 - next chapter     : first page
This commit is contained in:
schroda
2024-12-06 23:59:39 +01:00
parent 206c216093
commit 916abd3bb1
15 changed files with 106 additions and 41 deletions

View File

@@ -20,7 +20,7 @@ export type MangaCardMode = 'default' | 'source' | 'migrate.search' | 'migrate.s
type MangaCardBaseProps = Pick<MangaType, 'id' | 'title' | 'sourceId'> &
Omit<SingleModeProps['manga'], 'downloadCount' | 'unreadCount' | 'chapters'> &
Partial<Pick<MangaType, 'inLibrary' | 'downloadCount' | 'unreadCount'>> & {
firstUnreadChapter?: Pick<ChapterType, 'id' | 'sourceOrder'> | null;
firstUnreadChapter?: Pick<ChapterType, 'id' | 'sourceOrder' | 'isRead'> | null;
};
export type MangaIdInfo = Pick<MangaType, 'id'>;

View File

@@ -12,24 +12,26 @@ import Tooltip from '@mui/material/Tooltip';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Link } from 'react-router-dom';
import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
export const ContinueReadingButton = ({
showContinueReadingButton,
nextChapterIndexToRead,
chapter,
mangaLinkTo,
}: {
showContinueReadingButton: boolean;
nextChapterIndexToRead?: number;
chapter?: (ChapterSourceOrderInfo & ChapterReadInfo) | null;
mangaLinkTo: string;
}) => {
const { t } = useTranslation();
const isFirstChapter = nextChapterIndexToRead === 1;
if (!showContinueReadingButton || nextChapterIndexToRead === undefined) {
if (!showContinueReadingButton || !chapter) {
return null;
}
const { sourceOrder } = chapter;
const isFirstChapter = sourceOrder === 1;
return (
<Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<Button
@@ -37,7 +39,8 @@ export const ContinueReadingButton = ({
size="small"
sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
component={Link}
to={`${mangaLinkTo}chapter/${nextChapterIndexToRead}`}
to={`${mangaLinkTo}chapter/${chapter.sourceOrder}`}
state={{ resumeMode: Chapters.getReaderResumeMode(chapter) }}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>

View File

@@ -10,20 +10,27 @@ import { Link } from 'react-router-dom';
import PlayArrow from '@mui/icons-material/PlayArrow';
import { useTranslation } from 'react-i18next';
import { StyledFab } from '@/modules/core/components/buttons/StyledFab.tsx';
import {
ChapterMangaInfo,
ChapterReadInfo,
Chapters,
ChapterSourceOrderInfo,
} from '@/modules/chapter/services/Chapters.ts';
interface ResumeFABProps {
chapterIndex: number;
mangaId: number;
}
export function ResumeFab(props: ResumeFABProps) {
export function ResumeFab({ chapter }: { chapter: ChapterMangaInfo & ChapterSourceOrderInfo & ChapterReadInfo }) {
const { t } = useTranslation();
const { chapterIndex, mangaId } = props;
const { sourceOrder } = chapter;
return (
<StyledFab component={Link} variant="extended" color="primary" to={`/manga/${mangaId}/chapter/${chapterIndex}`}>
<StyledFab
component={Link}
variant="extended"
color="primary"
to={Chapters.getReaderUrl(chapter)}
state={{ resumeMode: Chapters.getReaderResumeMode(chapter) }}
>
<PlayArrow />
{chapterIndex === 1 ? t('global.button.start') : t('global.button.resume')}
{sourceOrder === 1 ? t('global.button.start') : t('global.button.resume')}
</StyledFab>
);
}

View File

@@ -55,8 +55,6 @@ export const MangaCard = (props: MangaCardProps) => {
const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title);
const nextChapterIndexToRead = firstUnreadChapter?.sourceOrder;
const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false);
const handleClick = (event: React.MouseEvent | React.TouchEvent, openMenu?: () => void) => {
@@ -108,11 +106,11 @@ export const MangaCard = (props: MangaCardProps) => {
() => (
<ContinueReadingButton
showContinueReadingButton={showContinueReadingButton && mode === 'default'}
nextChapterIndexToRead={nextChapterIndexToRead}
chapter={firstUnreadChapter}
mangaLinkTo={mangaLinkTo}
/>
),
[showContinueReadingButton, nextChapterIndexToRead, mangaLinkTo],
[showContinueReadingButton, firstUnreadChapter, mangaLinkTo],
);
const mangaBadges = useMemo(