Always show continue read/resume button if unread chapter available
This commit is contained in:
@@ -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(
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user