Always show continue read/resume button if unread chapter available

This commit is contained in:
schroda
2024-08-14 14:26:25 +02:00
parent af44421838
commit d14255494d
4 changed files with 15 additions and 26 deletions

View File

@@ -42,7 +42,7 @@ const getMangaLinkTo = (
export const MangaCard = (props: MangaCardProps) => { export const MangaCard = (props: MangaCardProps) => {
const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props; const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
const { id, latestReadChapter, firstUnreadChapter, chapters, downloadCount, unreadCount } = manga; const { id, firstUnreadChapter, downloadCount, unreadCount } = manga;
const { const {
options: { showContinueReadingButton }, options: { showContinueReadingButton },
} = useLibraryOptionsContext(); } = useLibraryOptionsContext();
@@ -54,8 +54,7 @@ export const MangaCard = (props: MangaCardProps) => {
const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title); const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title);
const nextChapterIndexToRead = firstUnreadChapter?.sourceOrder ?? 1; const nextChapterIndexToRead = firstUnreadChapter?.sourceOrder;
const isLatestChapterRead = chapters?.totalCount === latestReadChapter?.sourceOrder;
const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false); const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false);
@@ -107,15 +106,12 @@ export const MangaCard = (props: MangaCardProps) => {
const continueReadingButton = useMemo( const continueReadingButton = useMemo(
() => ( () => (
<ContinueReadingButton <ContinueReadingButton
showContinueReadingButton={ showContinueReadingButton={showContinueReadingButton && mode === 'default'}
showContinueReadingButton && mode === 'default' && !!manga.chapters?.totalCount
}
isLatestChapterRead={isLatestChapterRead}
nextChapterIndexToRead={nextChapterIndexToRead} nextChapterIndexToRead={nextChapterIndexToRead}
mangaLinkTo={mangaLinkTo} mangaLinkTo={mangaLinkTo}
/> />
), ),
[showContinueReadingButton, isLatestChapterRead, nextChapterIndexToRead, mangaLinkTo], [showContinueReadingButton, nextChapterIndexToRead, mangaLinkTo],
); );
const mangaBadges = useMemo( const mangaBadges = useMemo(

View File

@@ -41,6 +41,7 @@ import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDo
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx'; import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts'; import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
import { Mangas } from '@/lib/data/Mangas';
const ChapterListHeader = styled(Stack)(({ theme }) => ({ const ChapterListHeader = styled(Stack)(({ theme }) => ({
margin: 8, margin: 8,
@@ -72,10 +73,7 @@ export const ChapterList = ({
manga, manga,
isRefreshing, isRefreshing,
}: { }: {
manga: Pick< manga: Pick<MangaScreenFieldsFragment, 'id' | 'firstUnreadChapter' | 'chapters' | 'unreadCount' | 'downloadCount'>;
MangaScreenFieldsFragment,
'id' | 'firstUnreadChapter' | 'chapters' | 'latestReadChapter' | 'unreadCount' | 'downloadCount'
>;
isRefreshing: boolean; isRefreshing: boolean;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -103,11 +101,10 @@ export const ChapterList = ({
const visibleChapters = useMemo(() => filterAndSortChapters(chapters, options), [chapters, options]); const visibleChapters = useMemo(() => filterAndSortChapters(chapters, options), [chapters, options]);
const nextChapterIndexToRead = manga.firstUnreadChapter?.sourceOrder ?? 1; const nextChapterIndexToRead = manga.firstUnreadChapter?.sourceOrder;
const isLatestChapterRead = manga.chapters.totalCount === manga.latestReadChapter?.sourceOrder;
const areAllChaptersRead = manga.unreadCount === 0; const areAllChaptersRead = Mangas.isFullyRead(manga);
const areAllChaptersDownloaded = manga.downloadCount === manga.chapters.totalCount; const areAllChaptersDownloaded = Mangas.isFullyDownloaded(manga);
const noChaptersFound = chapters.length === 0; const noChaptersFound = chapters.length === 0;
const noChaptersMatchingFilter = !noChaptersFound && visibleChapters.length === 0; const noChaptersMatchingFilter = !noChaptersFound && visibleChapters.length === 0;
@@ -139,12 +136,12 @@ export const ChapterList = ({
); );
} }
if (!isLatestChapterRead) { if (nextChapterIndexToRead !== undefined) {
return <ResumeFab chapterIndex={nextChapterIndexToRead} mangaId={manga.id} />; return <ResumeFab chapterIndex={nextChapterIndexToRead} mangaId={manga.id} />;
} }
return null; return null;
}, [chaptersWithMeta, isLatestChapterRead]); }, [chaptersWithMeta]);
if (isLoading || (noChaptersFound && isRefreshing)) { if (isLoading || (noChaptersFound && isRefreshing)) {
return ( return (

View File

@@ -15,20 +15,18 @@ import { Link } from 'react-router-dom';
export const ContinueReadingButton = ({ export const ContinueReadingButton = ({
showContinueReadingButton, showContinueReadingButton,
isLatestChapterRead,
nextChapterIndexToRead, nextChapterIndexToRead,
mangaLinkTo, mangaLinkTo,
}: { }: {
showContinueReadingButton: boolean; showContinueReadingButton: boolean;
isLatestChapterRead: boolean; nextChapterIndexToRead?: number;
nextChapterIndexToRead: number;
mangaLinkTo: string; mangaLinkTo: string;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const isFirstChapter = nextChapterIndexToRead === 1; const isFirstChapter = nextChapterIndexToRead === 1;
if (!showContinueReadingButton || isLatestChapterRead) { if (!showContinueReadingButton || nextChapterIndexToRead === undefined) {
return null; return null;
} }

View File

@@ -11,7 +11,7 @@ import { PopupState } from 'material-ui-popup-state/hooks';
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx'; import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts'; import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx'; import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
import { MangaChapterCountInfo, MangaThumbnailInfo } from '@/lib/data/Mangas.ts'; import { MangaThumbnailInfo } from '@/lib/data/Mangas.ts';
import { ChapterType, MangaType } from '@/lib/graphql/generated/graphql.ts'; import { ChapterType, MangaType } from '@/lib/graphql/generated/graphql.ts';
import { SingleModeProps } from '@/components/manga/MangaActionMenuItems.tsx'; import { SingleModeProps } from '@/components/manga/MangaActionMenuItems.tsx';
@@ -19,9 +19,7 @@ export type MangaCardMode = 'default' | 'source' | 'migrate.search' | 'migrate.s
type MangaCardBaseProps = Pick<MangaType, 'id' | 'title' | 'sourceId'> & type MangaCardBaseProps = Pick<MangaType, 'id' | 'title' | 'sourceId'> &
Omit<SingleModeProps['manga'], 'downloadCount' | 'unreadCount' | 'chapters'> & Omit<SingleModeProps['manga'], 'downloadCount' | 'unreadCount' | 'chapters'> &
Partial<Pick<MangaType, 'inLibrary' | 'downloadCount' | 'unreadCount'>> & Partial<Pick<MangaType, 'inLibrary' | 'downloadCount' | 'unreadCount'>> & {
Partial<MangaChapterCountInfo> & {
latestReadChapter?: Pick<ChapterType, 'id' | 'sourceOrder'> | null;
firstUnreadChapter?: Pick<ChapterType, 'id' | 'sourceOrder'> | null; firstUnreadChapter?: Pick<ChapterType, 'id' | 'sourceOrder'> | null;
}; };