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

Feature/reader skip duplicate chapters (#262)

Browse Source 
* Skip duplicate chapters in the Reader

* Debounce "end of page" handling in the reader

* Update keyboard event listener

In case the "go" function changed, the listeners have to be updated
This commit is contained in:
schroda
2023-04-05 13:37:12 +02:00
committed by GitHub
parent b1dc13cd30
commit d51150b784
11 changed files with 165 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/navbar/ReaderNavBar.tsx
View File

@@ -25,7 +25,7 @@ import Collapse from '@mui/material/Collapse';
import { styled } from '@mui/system';
import useBackTo from 'util/useBackTo';
import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
import { IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
import { useTranslation } from 'react-i18next';
const Root = styled('div')(({ theme }) => ({
@@ -119,6 +119,8 @@ interface IProps {
chapter: IChapter;
curPage: number;
scrollToPage: (page: number) => void;
openNextChapter: (offset: ChapterOffset, setHistory: (nextChapterIndex: number) => void) => Promise<void>;
retrievingNextChapter: boolean;
}
export default function ReaderNavBar(props: IProps) {
@@ -131,7 +133,8 @@ export default function ReaderNavBar(props: IProps) {
}>();
const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {};
const { settings, setSettingValue, manga, chapter, curPage, scrollToPage } = props;
const { settings, setSettingValue, manga, chapter, curPage, scrollToPage, openNextChapter, retrievingNextChapter } =
props;
const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen);
const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true);
@@ -139,6 +142,8 @@ export default function ReaderNavBar(props: IProps) {
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(prevSettingsCollapseOpen ?? true);
const disableChapterNavButtons = retrievingNextChapter;
const updateSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
// prevent closing the navBar when updating the "staticNav" setting
setUpdateDrawerOnRender(key !== 'staticNav');
@@ -254,6 +259,7 @@ export default function ReaderNavBar(props: IProps) {
staticNav={settings.staticNav}
showPageNumber={settings.showPageNumber}
loadNextOnEnding={settings.loadNextOnEnding}
skipDupChapters={settings.skipDupChapters}
readerType={settings.readerType}
/>
</Collapse>
@@ -261,7 +267,11 @@ export default function ReaderNavBar(props: IProps) {
<Navigation>
<PageNavigation>
<span>{t('reader.page_info.label.currently_on_page')}</span>
<FormControl size="small" sx={{ margin: '0 5px' }} disabled={chapter.pageCount === -1}>
<FormControl
size="small"
sx={{ margin: '0 5px' }}
disabled={disableChapterNavButtons || chapter.pageCount === -1}
>
<Select
MenuProps={MenuProps}
value={chapter.pageCount > -1 ? curPage : ''}
@@ -286,20 +296,26 @@ export default function ReaderNavBar(props: IProps) {
<IconButton
title={t('reader.button.previous_chapter')}
sx={{ gridArea: 'pre' }}
disabled={chapter.index <= 1}
onClick={() => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
}}
disabled={disableChapterNavButtons || chapter.index <= 1}
onClick={() =>
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${prevChapterIndex}`,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
})
}
>
<KeyboardArrowLeftIcon />
</IconButton>
<FormControl sx={{ gridArea: 'current' }} size="small" disabled={chapter.index < 1}>
<FormControl
sx={{ gridArea: 'current' }}
size="small"
disabled={disableChapterNavButtons || chapter.index < 1}
>
<Select
MenuProps={MenuProps}
value={chapter.index >= 1 ? chapter.index : ''}
@@ -328,15 +344,21 @@ export default function ReaderNavBar(props: IProps) {
<IconButton
title={t('reader.button.next_chapter')}
sx={{ gridArea: 'next' }}
disabled={chapter.index < 1 || chapter.index >= chapter.chapterCount}
disabled={
disableChapterNavButtons ||
chapter.index < 1 ||
chapter.index >= chapter.chapterCount
}
onClick={() => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
history.replace({
pathname: `/manga/${manga.id}/chapter/${nextChapterIndex}`,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
}),
);
}}
>
<KeyboardArrowRightIcon />

11
src/components/reader/ReaderSettingsOptions.tsx
View File

@@ -23,6 +23,7 @@ export default function ReaderSettingsOptions({
loadNextOnEnding,
readerType,
showPageNumber,
skipDupChapters,
setSettingValue,
}: IProps) {
const { t } = useTranslation();
@@ -59,6 +60,16 @@ export default function ReaderSettingsOptions({
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary={t('reader.settings.label.skip_dup_chapters')} />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={skipDupChapters}
onChange={(e) => setSettingValue('skipDupChapters', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary={t('reader.settings.label.reader_type')} />
<Select

2
src/components/reader/pager/DoublePagedPager.tsx
View File

@@ -185,7 +185,7 @@ export default function DoublePagedPager(props: IReaderProps) {
document.removeEventListener('keydown', keyboardControl);
selfRef.current?.removeEventListener('click', clickControl);
};
}, [selfRef, curPage, settings.readerType]);
}, [selfRef, curPage, settings.readerType, prevChapter, nextChapter]);
useEffect(() => {
setCurPage(initialPage);

2
src/components/reader/pager/HorizontalPager.tsx
View File

@@ -134,7 +134,7 @@ export default function HorizontalPager(props: IReaderProps) {
document.removeEventListener('scroll', handleLoadNextonEnding);
selfRef.current?.removeEventListener('mousedown', clickControl);
};
}, [selfRef, curPage]);
}, [selfRef, curPage, prevChapter, nextChapter]);
useEffect(() => {
const handleScroll = () => {

2
src/components/reader/pager/PagedPager.tsx
View File

@@ -85,7 +85,7 @@ export default function PagedReader(props: IReaderProps) {
document.removeEventListener('keydown', keyboardControl);
selfRef.current?.removeEventListener('click', clickControl);
};
}, [selfRef, curPage, settings.readerType]);
}, [selfRef, curPage, settings.readerType, prevChapter, nextChapter]);
useEffect(() => {
// Delay scrolling to next cycle

13
src/components/reader/pager/VerticalPager.tsx
View File

@@ -42,10 +42,17 @@ export default function VerticalPager(props: IReaderProps) {
const pagesRef = useRef<HTMLDivElement[]>([]);
useEffect(() => {
let handlingEndOfPage = false;
const handleScroll = () => {
if (!selfRef.current) return;
if (isAtBottom()) {
if (handlingEndOfPage) {
return;
}
handlingEndOfPage = true;
// If scroll is moved all the way to the bottom
// This handles cases when last page is show, but is smaller then
// window, in which case it would never get marked as read.
@@ -58,6 +65,8 @@ export default function VerticalPager(props: IReaderProps) {
nextChapter();
}
} else {
handlingEndOfPage = false;
// Update current page in parent
const currentPage = findCurrentPageIndex(selfRef.current);
if (currentPage !== currentPageRef.current) {
@@ -71,7 +80,7 @@ export default function VerticalPager(props: IReaderProps) {
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [settings.loadNextOnEnding]);
}, [settings.loadNextOnEnding, nextChapter]);
const go = useCallback(
(direction: 'up' | 'down') => {
@@ -114,7 +123,7 @@ export default function VerticalPager(props: IReaderProps) {
return () => {
document.removeEventListener('keydown', handleKeyboard);
};
}, []);
}, [go]);
useEffect(() => {
// Delay scrolling to next cycle