diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index 96214c49..26552f36 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -12,7 +12,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import Typography from '@mui/material/Typography'; import { useLocation, useNavigate } from 'react-router-dom'; import Slide from '@mui/material/Slide'; @@ -125,10 +125,12 @@ interface IProps { setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes, persist?: boolean) => void; manga: TManga; chapter: TChapter; + chapters: TChapter[]; curPage: number; scrollToPage: (page: number) => void; openNextChapter: (offset: ChapterOffset) => void; retrievingNextChapter: boolean; + hasDuplicatedChapters: boolean; } export function ReaderNavBar(props: IProps) { @@ -141,12 +143,25 @@ export function ReaderNavBar(props: IProps) { }>(); const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {}; - const { settings, setSettingValue, manga, chapter, curPage, scrollToPage, openNextChapter, retrievingNextChapter } = - props; + const { + settings, + setSettingValue, + manga, + chapter, + chapters, + curPage, + scrollToPage, + openNextChapter, + retrievingNextChapter, + hasDuplicatedChapters, + } = props; const handleBack = useBackButton(); useSetDefaultBackTo(`/manga/${manga.id}`); + const hasMultipleScanlators = useMemo(() => !!new Set(chapters.map(({ scanlator }) => scanlator)).size, [chapters]); + const chapterSelectShowScanlator = !hasDuplicatedChapters && hasMultipleScanlators; + const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen); const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true); const [hideOpenButton, setHideOpenButton] = useState(settings.staticNav || prevDrawerOpen); @@ -338,13 +353,12 @@ export function ReaderNavBar(props: IProps) { }); }} > - {Array(Math.max(0, manga.chapters.totalCount)) - .fill(1) - .map((ignoreValue, index) => ( - {`${t( - 'chapter.title', - )} ${index + 1}`} - ))} + {chapters.map(({ id, sourceOrder, name, chapterNumber, scanlator }) => ( + {`#${chapterNumber}${chapterSelectShowScanlator && scanlator != null ? ` (${scanlator})` : ''} | ${name}`} + ))} diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx index bbd8a082..7ffdb7a0 100644 --- a/src/screens/Reader.tsx +++ b/src/screens/Reader.tsx @@ -185,6 +185,11 @@ export function Reader() { const { settings: metadataSettings } = useMetadataServerSettings(); + const uniqueChapters = useMemo( + () => + settings.skipDupChapters ? Chapters.removeDuplicates(chapter, mangaChapters ?? []) : mangaChapters ?? [], + [chapter, mangaChapters, settings.skipDupChapters], + ); const prevChapters = useMemo( () => Chapters.getNextChapters(chapter, mangaChapters ?? [], { @@ -380,17 +385,19 @@ export function Reader() { setSettingValue={setSettingValue} manga={manga} chapter={chapter} + chapters={uniqueChapters} curPage={curPage} scrollToPage={setPageToScrollTo} openNextChapter={openNextChapter} retrievingNextChapter={retrievingNextChapter} + hasDuplicatedChapters={settings.skipDupChapters && mangaChapters?.length !== uniqueChapters.length} /> ), }); // clean up for when we leave the reader return () => setOverride({ status: false, value:
}); - }, [manga, chapter, settings, curPage, chapterIndex, retrievingNextChapter, openNextChapter]); + }, [manga, chapter, settings, curPage, chapterIndex, retrievingNextChapter, openNextChapter, uniqueChapters]); useEffect(() => { if (!wasLastPageReadSet) {